/* GENERATED from ~/.claude/design/tokens.json v1.1.0. Do not hand-edit. */
/* sl-kit v1.1.0. Linked once per embed. A widget writes markup, never colour or type. */
.sl-w{
  --a: #128770; --a-wash: #E4F0EC; --a-text: #0C5E4E;
  background: transparent;                 /* a widget is a guest. it paints no ground */
  color: #24262D;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1rem; line-height: 1.6;
  max-width: 100%; margin: 1.5rem 0;
}
.sl-w[data-domain="say"]{ --a: #D35400; --a-wash: #FBEDE4; --a-text: #A5430B; }
.sl-w[data-domain="map"]{ --a: #3098DA; --a-wash: #E6F1FA; --a-text: #1C6EA4; }
.sl-w *{ box-sizing: border-box; }

.sl-w__eyebrow{ font-family: var(--sl-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 0.6875rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--a); font-weight: 600; margin-bottom: .5rem; }
.sl-w__title{ font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 1.75rem;
  line-height: 1.2; letter-spacing: -.01em; color: #24262D; margin: 0 0 .35rem; }
.sl-w__title em{ font-style: normal; color: var(--a); }   /* exactly one accent word */
.sl-w__intro{ color: #565E73; font-size: 0.875rem; margin: 0 0 1rem; }
/* __head was USED by every mini app and DEFINED by nothing, so the header block carried
   no separation from the body it introduces. A hairline that underlines a header across
   the column is typography and is allowed by rule 1; a rail that outlines a box is not. */
.sl-w__head{ margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid #DFE1E6; }
.sl-w__head > :last-child{ margin-bottom: 0; }
.sl-w__body{ display: block; }
.sl-w__foot{ margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid #DFE1E6;
  font-size: 0.75rem; color: #8A8FA0; }

/* the ONLY tinted surface. no rail: rule G8 */
.sl-w-panel{ background: var(--a-wash); border-radius: 10px; padding: 1.25rem; }
.sl-w-card{ background: #FFFFFF; border: 1px solid #DFE1E6; border-radius: 10px; padding: 1rem; }
.sl-w-grid{ display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sl-w-note{ background: var(--a-wash); color: var(--a-text); border-radius: 10px; padding: 1rem; }
.sl-w-result{ background: #FFFFFF; border: 1px solid #DFE1E6; border-radius: 10px; padding: 1rem; }
.sl-w-empty{ color: #8A8FA0; font-size: 0.875rem; padding: 1rem 0; }

.sl-w-step{ display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0;
  border-bottom: 1px solid #DFE1E6; }
.sl-w-step:last-child{ border-bottom: 0; }
.sl-w-step__n{ font-family: 'Lexend', sans-serif; font-weight: 600; color: var(--a);
  font-variant-numeric: tabular-nums; min-width: 1rem; }
.sl-w-step__t{ font-weight: 600; color: #24262D; font-size: 0.875rem; }
.sl-w-step__d{ color: #565E73; font-size: 0.75rem; }

.sl-w-table{ width: 100%; overflow-x: auto; display: block; }
.sl-w-table table{ width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sl-w-table th, .sl-w-table td{ padding: .6rem .75rem; border-bottom: 1px solid #DFE1E6; text-align: left; }
.sl-w-table th{ color: #8A8FA0; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; }

/* controls are ALWAYS white, or they stop looking pressable */
.sl-w-btn{ display: inline-block; background: #FFFFFF; color: #24262D;
  border: 1px solid #DFE1E6; border-radius: 4px; padding: .55rem 1rem;
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.sl-w-btn--primary{ background: var(--a); border-color: var(--a); color: #FFFFFF; }
.sl-w-input, .sl-w-select{ width: 100%; background: #FFFFFF; color: #24262D;
  border: 1px solid #DFE1E6; border-radius: 4px; padding: .55rem .75rem; font: inherit; font-size: 0.875rem; }
/* G11, and it is UNCONDITIONAL. A chip inside a panel shares the panel's wash and
   disappears (26 Aug). Making it WHITE fixed that and caused a worse fault: a white chip
   beside a white button reads as two buttons (Paul, 27 Aug, looking at a render). A chip
   is a LABEL, not a control, so it must not compete on fill AT ALL.
   Corrected 29 Aug: this was written as a DESCENDANT rule under .sl-w-panel/.sl-w-note,
   so on a WHITE card the chip kept its wash fill and its pill shape, which is
   button-shaped, on the one surface where a white control also lives. Rendered and
   confirmed on the classroom timer Ready chip. The ruling is about what a chip IS,
   not about what it sits on, so the dot-and-type form is now the base. */
.sl-w-chip{ display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 0; padding: .2rem 0; color: var(--a-text);
  font-size: 0.75rem; font-weight: 600; }
.sl-w-chip::before{ content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--a); flex: 0 0 auto; }
/* Same fault, missed the first time: a PRIMARY BUTTON filled with the accent and
   sat on the accent wash stops being the lightest thing on its panel, so it stops
   reading as pressable. Rule 4: controls inside a tinted panel stay white, and the
   accent moves into the type. Caught in review, 27 Aug. */
.sl-w-panel .sl-w-btn--primary, .sl-w-note .sl-w-btn--primary{
  background: #FFFFFF; border-color: var(--a); color: var(--a-text); font-weight: 600; }
.sl-w-progress{ display: flex; gap: .4rem; }
.sl-w-progress i{ flex: 1; height: 4px; border-radius: 2px; background: #DFE1E6; }
.sl-w-progress i.is-done{ background: var(--a); }
.sl-w-cta{ margin-top: 1.25rem; }

.sl-w :focus-visible{ outline: 2px solid var(--a); outline-offset: 2px; }
@media (max-width: 560px){ .sl-w-grid{ grid-template-columns: 1fr; } .sl-w__title{ font-size: 1.375rem; } }
@media (prefers-reduced-motion: reduce){ .sl-w *{ animation: none !important; transition: none !important; } }
@media print{ .sl-w-panel, .sl-w-note{ background: #FFFFFF; } .sl-w-cta{ display: none; } }

/* ============================================================================
   1.2.0, 9 September 2026. Three faults found by LOOKING at live pages, not by
   any property check.

   1. INK TOKENS. A diagram embedded in an article body had no neutral colour to
      use, so it used currentColor. Webflow's own rule
          .w-richtext figure div { color: rgba(0,0,0,0) }
      makes any div inside a rich-text figure TRANSPARENT and beats .sl-w on
      specificity (0,1,2 against 0,1,0). Sixty-two text elements across three
      live diagrams were invisible: every label, every description. Every
      property check passed. Measured 9 Sep 2026.

   2. THE CREAM SKIN IS NEUTRALISED FOR .sl-w. The site bundle injects
      #sl-widget-v21-visual-standardizer, forcing background #FFFAF0 and a 1px
      #EAD9B8 border on every [data-init], with !important. That is the 2026-06
      cream skin, superseded by Paul's rules 3 and G8 on 26 August: a mini app
      is a guest and paints no ground, and colour never goes into a border round
      a box. Beating !important needs !important at higher specificity. Scoped
      to .sl-w, so older widgets are untouched until the bundle is fixed.

   3. PRINT ISOLATION. A mini app's Print button printed the whole article,
      twelve pages of nav, hero and CTA. It uses visibility rather than display
      because the app sits several levels inside the article, and display:none
      on an ancestor cannot be undone on a descendant. The first attempt used
      display and produced an empty PDF; reading the PDF is what caught it.
   ============================================================================ */

.sl-w{
  --ink: #24262D;          /* colour/ink */
  --muted: #565E73;        /* colour/muted */
  --hairline: #DFE1E6;     /* colour/border */
  --surface: #FFFFFF;      /* colour/surface. Type on a filled accent mark. */
}

/* Beats .w-richtext figure div (0,1,2). */
.w-richtext figure div.sl-w,
.w-richtext .sl-w,
.blog-text-open-sans .sl-w,
.sl-w{ color: var(--ink) !important; }

.w-richtext [data-init].sl-w,
.w-richtext .sl-w,
.blog-text-open-sans [data-init].sl-w,
.blog-text-open-sans .sl-w{
  background: transparent !important;   /* a guest paints no ground */
  border: 0 !important;                 /* G8: no decorative edge */
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* An SVG diagram inherits the ink, so currentColor is safe again inside .sl-w. */
.sl-w svg{ color: var(--ink); }

@media print{
  body.sl-print-artefact *{ visibility: hidden !important; }
  body.sl-print-artefact .sl-w.sl-printing,
  body.sl-print-artefact .sl-w.sl-printing *{ visibility: visible !important; }
  body.sl-print-artefact .sl-w.sl-printing{
    position: absolute !important; left: 0; top: 0;
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
  }
  .sl-w.sl-printing .sl-w-panel{ background: none !important; }
}