/* GENERATED from ~/.claude/design/tokens.json v1.2.6. Do not hand-edit. */
/* sl-kit v1.2.6. 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; }
/* the site styles every <label> bold (Webflow, font-weight 700) and the kit's controls take font: inherit, so
   every select, input and textarea inside a mini app rendered bold. Measured live 16 Sep 2026 on 8 kit mini apps
   (powerful-knowledge, echo-reading, checking-for-understanding, exit-tickets and four more): 22 of 22 labels bold. */
.sl-w label{ font-weight: 400; }

.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-text); font-weight: 600; margin-bottom: .5rem; }
/* eyebrow and step numeral take --a-text, not --a: at 11px and 16px the raw accent is 4.44:1 on white,
   under AA (rule 6). Measured 14 Sep 2026 on the classroom timer, bell-ringer-activities. */
.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: 1rem; 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; }
/* Kit 1.2.5 (Paul, 16 Sep 2026: "washed out, too many grey lines"): the footer loses its hairline and
   its faint grey. #8A8FA0 is 3.3:1 on white, under AA at 12px; muted is 7:1. Spacing does the separating. */
.sl-w__foot{ margin-top: 1.5rem; font-size: 0.875rem; color: #565E73; }
/* G18 (Paul, 16 Sep 2026): a link is never the browser default blue. It takes the text colour
   it sits in, underlined, and the underline carries the accent text colour so it still reads
   as a link. Buttons rendered as <a> are excluded: .slw a.slw-btn and .sl-w-btn keep their own fill. */
.sl-w a:not(.sl-w-btn){ color: inherit; text-decoration: underline; text-decoration-color: var(--a-text);
  text-underline-offset: .15em; }
.sl-w a:not(.sl-w-btn):hover, .sl-w a:not(.sl-w-btn):focus-visible{ color: var(--a-text); }

/* 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: 1.25rem; }
/* rule 3: on a ground a white card lifts without a border; on white it needs one. Kit 1.2.5. */
.sl-w-panel .sl-w-card, .sl-w-panel .sl-w-result, .sl-w-note .sl-w-card{ border-color: transparent; }
.sl-w-empty{ color: #565E73; font-size: 0.875rem; padding: 1rem 0; }

.sl-w-step{ display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; }   /* 1.2.5: no hairline between steps */
.sl-w-step__n{ font-family: 'Lexend', sans-serif; font-weight: 600; color: var(--a-text);
  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.875rem; }

.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: #565E73; 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; }
/* Kit 1.2.6 (Paul, 18 Sep 2026, live learning-objectives page): "make sure the drop-downs
   look on-brand" still read generic after 1.2.5's data-URI chevron, because a picker's
   OWN bare <select> carried no .sl-w-select class, so the chevron rule never reached it.
   Every native select, input and textarea inside a mini app now shares one white fill,
   hairline, radius and font, whether or not it carries a kit class. The chevron is drawn
   with two linear-gradients on --muted (the ink-2 token the kit already defines below),
   never a hex baked into an SVG data URI, so a future ink change reaches it without a
   republish of every article. */
.sl-w input, .sl-w .sl-w-input, .sl-w textarea{
  width: 100%; background-color: #FFFFFF; color: #24262D;
  border: 1px solid #DFE1E6; border-radius: 8px;
  padding: .6rem .8rem; font: inherit; font-size: 15px; }
.sl-w select, .sl-w .sl-w-select{
  appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 100%; background-color: #FFFFFF; color: #24262D;
  border: 1px solid #DFE1E6; border-radius: 8px;
  padding: .6rem 2.4rem .6rem .8rem; font: inherit; font-size: 15px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat; }
.sl-w select:focus-visible, .sl-w .sl-w-select:focus-visible,
.sl-w input:focus-visible, .sl-w .sl-w-input:focus-visible,
.sl-w textarea:focus-visible{ outline: 2px solid #565E73; outline-offset: 2px; border-color: #D7DAE0; }
/* 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; } }

/* ============================================================================
   Kit 1.2.6, 18 September 2026. Four more rules from Paul reading the live
   learning-objectives page (select/input/textarea are above, next to what they
   replace). "no likes, replies or views... the quote glyph must not sit in the
   middle of the quote... grey boxes read as slotted in... put two cards side
   by side" feeds (d) and (e), which follow VOICE-BLOCKS.md exactly.
   ============================================================================ */

/* (b) The site bundle's injectVisualStandardizer paints
   outline:2px solid #128770;outline-offset:3px on [data-init]:focus-within,
   a coloured outline round a whole card, which rule 1 forbids. The control
   itself keeps its own focus ring (above); the card gets none. */
.w-richtext .sl-w[data-init]:focus-within,
.blog-text-open-sans .sl-w[data-init]:focus-within{ outline: none !important; }

/* (c) .sl-w-result and .sl-w-card are already white with the neutral hairline
   on the page ground, and stay white (only the border drops) inside a tinted
   .sl-w-panel, so "reads grey" is a reading of an EMPTY box: a result panel
   with nothing in it yet paints as a blank white rectangle. An empty one now
   paints nothing at all, so a mini app can show a plain-text hint instead
   while it waits for an answer. */
.sl-w-result:empty, .sl-w-result[data-empty="1"]{ display: none; }
.sl-w-hint{ color: #565E73; font-size: 15px; }

/* (d) Voice cards (x-voices, VOICE-BLOCKS.md): two quoted posts side by side
   from 700px, one small accent open-quote mark top-left as the block's one
   mark, never centred over the text, and the handle carries the link. */
.sl-w-cards{ display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px){ .sl-w-cards{ grid-template-columns: 1fr 1fr; } }
.sl-w-quote{ font-size: 17px; line-height: 1.5; text-align: left; font-style: normal; margin: 0; }
.sl-w-card--quote{ position: relative; padding: 1.1rem 1rem 1rem 1rem; }
.sl-w-card--quote::before{ content: "\201C"; position: absolute; top: 8px; left: 12px;
  font: 700 28px/1 var(--display); color: var(--a); opacity: .35; }
.sl-w-card--quote .sl-w-quote{ padding-left: 1.6rem; }   /* clears the mark, never sits under it */
.sl-w-handle, .sl-w a.sl-w-handle{ color: var(--a-text); text-decoration: none;
  font-size: 13px; font-weight: 600; }
.sl-w a.sl-w-handle:hover{ text-decoration: underline; }

/* (e) Practice table (x-practice, VOICE-BLOCKS.md): the routine's own words in
   a <q>, and a handle that never breaks mid-word in a narrow cell. */
.sl-w-table q{ display: block; font-size: 15px; color: #24262D; margin: .4rem 0 .3rem;
  quotes: "\201C" "\201D"; }
.sl-w-table .sl-w-handle{ word-break: keep-all; white-space: nowrap; }

/* The block below was hand-appended in the content repo on 9 Sep 2026 as kit 1.2.0
   (scripts/data/sl-kit-sources) and folded into this generator on 14 Sep 2026, so the
   generator is the source of the kit again. */

/* ============================================================================
   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. */
  --display: 'Lexend', sans-serif;   /* Kit 1.2.6: the voice-card quote mark's face */
}

/* 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; }
}