/* ==========================================================================
   Know What You Want · shared style
   SLT Consulting · © 2026 DIDACTIKFACTOR LDA
   Layout: dark teal brand band, one reading column (760px), blocks stacked
   in lesson order; interactions sit on soft surfaces, Dark Playground on teal.
   ========================================================================== */

:root {
  /* Brand palette (series style) */
  --slt-green: #8ECE00;
  --slt-sage: #A0C963;
  --slt-leaf: #8DC794;
  --slt-mint: #74C4BA;
  --slt-blue: #49C1E9;
  --slt-teal: #345157;
  --slt-magenta: #D81B60;

  /* Semantic tokens (light) */
  --bg: #ffffff;
  --surface: #f3f7f6;
  --surface-2: #e7efed;
  --ink: #1f3236;
  --ink-soft: #4d6468;
  --line: #d3dfdc;
  --band: #345157;
  --band-ink: #f2f8f6;
  --band-soft: #b9d1cd;
  --accent: #5f8f00;          /* green, darkened for text on white */
  --accent-fill: #8ECE00;
  --accent-on: #1f3236;       /* text on green fills */
  --info: #1677a0;            /* blue, darkened for text */
  --info-fill: #49C1E9;
  --hot: #D81B60;
  --hot-soft: #fbe3ec;
  --ok-soft: #eaf6d6;
  --info-soft: #e1f4fb;
  --dark-panel: #345157;
  --dark-panel-ink: #f2f8f6;
  --focus: #49C1E9;
  --shadow: 0 1px 2px rgba(31, 50, 54, .06), 0 4px 16px rgba(31, 50, 54, .06);

  /* Type */
  --font: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-xs: .8125rem;
  --fs-s: .9375rem;
  --fs-m: 1.0625rem;
  --fs-l: 1.375rem;
  --fs-xl: 1.875rem;
  --fs-xxl: clamp(2rem, 5vw, 2.75rem);

  /* Shape */
  --r-s: 8px;
  --r-m: 14px;
  --col: 760px;
  --wide: 1040px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #172629;
    --surface: #213539;
    --surface-2: #2a4146;
    --ink: #eaf3f1;
    --ink-soft: #b3c8c5;
    --line: #36504f;
    --band: #345157;
    --band-ink: #f2f8f6;
    --band-soft: #b9d1cd;
    --accent: #a6dc2e;
    --accent-fill: #8ECE00;
    --accent-on: #172629;
    --info: #6fd0f0;
    --info-fill: #49C1E9;
    --hot: #f0588f;
    --hot-soft: #4a2333;
    --ok-soft: #2b3e1c;
    --info-soft: #1d3c49;
    --dark-panel: #0f1c1f;
    --dark-panel-ink: #eaf3f1;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #172629;
  --surface: #213539;
  --surface-2: #2a4146;
  --ink: #eaf3f1;
  --ink-soft: #b3c8c5;
  --line: #36504f;
  --band: #345157;
  --band-ink: #f2f8f6;
  --band-soft: #b9d1cd;
  --accent: #a6dc2e;
  --accent-fill: #8ECE00;
  --accent-on: #172629;
  --info: #6fd0f0;
  --info-fill: #49C1E9;
  --hot: #f0588f;
  --hot-soft: #4a2333;
  --ok-soft: #2b3e1c;
  --info-soft: #1d3c49;
  --dark-panel: #0f1c1f;
  --dark-panel-ink: #eaf3f1;
  --shadow: none;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--band);
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; color: var(--ink); }
h1 { font-size: var(--fs-xxl); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); font-weight: 700; }
h3 { font-size: var(--fs-l); font-weight: 700; }
p { margin: 0; max-width: 65ch; }
a { color: var(--info); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.kw-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kw-wrap {
  width: 100%;
  max-width: calc(var(--col) + 32px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.kw-wrap--wide { max-width: calc(var(--wide) + 32px); }

/* ---------- Progress ---------- */
.kw-progress {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 9;
  height: 4px;
  background: var(--band);
}
.kw-progress__bar { height: 100%; width: 0; background: var(--accent-fill); transition: width .15s linear; }

/* ---------- Brand band ---------- */
.kw-band { background: var(--band); color: var(--band-ink); }
.kw-band__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px;
  padding-block: 14px;
}
.kw-logo { display: block; height: 54px; width: auto; }
.kw-band__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--fs-s); }
.kw-band__meta a { color: var(--band-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.kw-band__meta a:hover { text-decoration: underline; }
.kw-label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.kw-band .kw-label { color: var(--band-soft); }
.kw-model .kw-label { color: var(--accent); }

/* Step map */
.kw-steps {
  list-style: none; margin: 0; padding: 0 0 18px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  counter-reset: step;
}
.kw-steps li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--band-soft);
  padding: 8px 10px; border-radius: var(--r-s);
  border: 1px solid rgba(255, 255, 255, .14);
  min-width: 0;
}
.kw-steps li span { min-width: 0; overflow-wrap: anywhere; }
.kw-steps .kw-steps__n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: rgba(255, 255, 255, .12); color: var(--band-ink);
}
.kw-steps li[aria-current="step"] { background: var(--accent-fill); color: #1f3236; border-color: transparent; }
.kw-steps li[aria-current="step"] .kw-steps__n { background: #1f3236; color: #ffffff; }
.kw-steps li.is-next { border-style: dashed; }
@media (max-width: 560px) {
  .kw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Hero ---------- */
.kw-hero { padding-block: 40px 8px; display: grid; gap: 14px; }
.kw-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; font-size: var(--fs-s); }
.kw-hero__lead { font-size: var(--fs-l); line-height: 1.45; color: var(--ink-soft); }
.kw-hero__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-s); color: var(--ink-soft); }
.kw-hero__facts span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Blocks ---------- */
.kw-block { padding-block: 36px; display: grid; gap: 18px; border-top: 1px solid var(--line); }
.kw-block:first-of-type { border-top: 0; }
.kw-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.kw-eyebrow .kw-icon { color: var(--accent); }
.kw-block > p, .kw-prose p { color: var(--ink); }
.kw-prose { display: grid; gap: 12px; }
.kw-muted { color: var(--ink-soft); }
.kw-emph { font-style: italic; font-weight: 600; font-size: var(--fs-l); line-height: 1.4; }

/* Case cards */
.kw-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kw-case { background: var(--surface); border-radius: var(--r-m); padding: 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.kw-case__title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.kw-case__title .kw-icon { color: var(--info); }
.kw-case p { font-size: var(--fs-s); color: var(--ink-soft); }
.kw-case q { font-weight: 600; color: var(--ink); }
@media (max-width: 600px) { .kw-cases { grid-template-columns: 1fr; } }

/* What / Why / Role */
.kw-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kw-trio__card { border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.kw-trio__card h3 { font-size: var(--fs-m); display: flex; align-items: center; gap: 8px; }
.kw-trio__card h3 .kw-icon { color: var(--accent); }
.kw-trio__card p { font-size: var(--fs-s); }
@media (max-width: 720px) { .kw-trio { grid-template-columns: 1fr; } }

/* Tap-to-reveal cards */
.kw-reveals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .kw-reveals { grid-template-columns: 1fr; } }
.kw-reveal {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--surface); border: 2px solid transparent; border-radius: var(--r-m);
  padding: 16px; display: grid; gap: 8px; align-content: start; min-height: 150px; min-width: 0;
  transition: border-color .15s ease, background-color .15s ease;
}
.kw-reveal:hover { border-color: var(--line); }
.kw-reveal__who { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.kw-reveal__who .kw-icon { color: var(--info); }
.kw-reveal__role { font-size: var(--fs-xs); color: var(--ink-soft); }
.kw-reveal__front { font-size: var(--fs-s); color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.kw-reveal__back { font-weight: 600; }
.kw-reveal[aria-expanded="true"] { background: var(--ok-soft); border-color: var(--accent-fill); }
.kw-reveal[aria-expanded="false"] .kw-reveal__back { display: none; }
.kw-reveal[aria-expanded="true"] .kw-reveal__front { display: none; }

/* Fog word figure */
.kw-fog {
  background: var(--surface); border-radius: var(--r-m); padding: 22px;
  display: grid; gap: 16px; justify-items: start;
}
.kw-fog__word {
  font-size: var(--fs-xl); font-weight: 800; color: var(--hot);
  display: inline-flex; align-items: center; gap: 10px;
}
.kw-fog__means { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; }
.kw-fog__mean { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; display: grid; gap: 4px; min-width: 0; }
.kw-fog__mean b { font-size: var(--fs-s); }
.kw-fog__mean span { font-size: var(--fs-xs); color: var(--ink-soft); }
@media (max-width: 640px) { .kw-fog__means { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Worked example (sequence) */
.kw-steps-v { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kw-steps-v li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; position: relative; }
.kw-steps-v li::before {
  content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line);
}
.kw-steps-v li:last-child::before { display: none; }
.kw-steps-v__n {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); font-weight: 800; color: var(--ink);
}
.kw-steps-v__body { display: grid; gap: 6px; padding-top: 5px; }
.kw-steps-v__body b { font-weight: 700; }
.kw-quote { border-left: 3px solid var(--info-fill); padding: 2px 0 2px 12px; color: var(--ink-soft); font-style: italic; }
.kw-before-after { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.kw-before-after > div { border-radius: var(--r-m); padding: 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.kw-before { background: var(--hot-soft); }
.kw-after { background: var(--ok-soft); }
.kw-before-after .kw-label { color: var(--ink-soft); }
.kw-before-after__arrow { display: grid; place-items: center; color: var(--ink-soft); }
.kw-before-after p { font-weight: 600; }
@media (max-width: 600px) {
  .kw-before-after { grid-template-columns: 1fr; }
  .kw-before-after__arrow { transform: rotate(90deg); }
}

/* Interaction shell */
.kw-activity { border: 2px solid var(--line); border-radius: var(--r-m); padding: 20px; display: grid; gap: 16px; }
.kw-activity__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.kw-activity__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-m); }
.kw-activity__title .kw-icon { color: var(--hot); }
.kw-counter { font-size: var(--fs-s); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.kw-counter.is-done { color: var(--accent); }

/* Fog spotter */
.kw-spot { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: q; }
.kw-spot__q { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.kw-spot__n { font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; padding-top: 4px; }
.kw-spot__line { display: flex; flex-wrap: wrap; gap: 2px 1px; align-items: baseline; font-size: var(--fs-m); }
.kw-word {
  font: inherit; color: inherit; background: none; border: 0; padding: 1px 3px; margin: 0;
  border-radius: 4px; cursor: pointer; line-height: 1.5;
}
.kw-word:hover { background: var(--surface-2); }
.kw-word.is-miss { background: var(--surface-2); color: var(--ink-soft); }
.kw-word.is-fog { background: var(--hot-soft); color: var(--hot); font-weight: 700; text-decoration: underline wavy; text-underline-offset: 4px; }
.kw-spot__follow {
  background: var(--surface); border-radius: var(--r-s); padding: 10px 12px;
  font-size: var(--fs-s); display: flex; gap: 8px; align-items: start;
}
.kw-spot__follow .kw-icon { color: var(--info); margin-top: 2px; }

/* Choice questions */
.kw-q { display: grid; gap: 12px; }
.kw-q + .kw-q { border-top: 1px dashed var(--line); padding-top: 18px; }
.kw-q__stem { font-weight: 700; }
.kw-q__ctx { font-size: var(--fs-s); color: var(--ink-soft); }
.kw-options { display: grid; gap: 8px; }
.kw-option {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--bg); border: 2px solid var(--line); border-radius: var(--r-s);
  padding: 12px 14px; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start;
  transition: border-color .15s ease, background-color .15s ease;
}
.kw-option:hover:not([disabled]) { border-color: var(--info-fill); }
.kw-option__mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800; color: var(--ink-soft); }
.kw-option.is-right { border-color: var(--accent-fill); background: var(--ok-soft); }
.kw-option.is-right .kw-option__mark { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-on); }
.kw-option.is-wrong { border-color: var(--hot); background: var(--hot-soft); }
.kw-option.is-wrong .kw-option__mark { background: var(--hot); border-color: var(--hot); color: #ffffff; }
.kw-option[disabled] { cursor: default; }
.kw-option.is-dim { opacity: .65; }
.kw-feedback { border-radius: var(--r-s); padding: 12px 14px; font-size: var(--fs-s); display: flex; gap: 10px; align-items: start; }
.kw-feedback.is-right { background: var(--ok-soft); }
.kw-feedback.is-right .kw-icon { color: var(--accent); }
.kw-feedback.is-wrong { background: var(--hot-soft); }
.kw-feedback.is-wrong .kw-icon { color: var(--hot); }
.kw-feedback .kw-icon { margin-top: 2px; }
.kw-feedback p { max-width: none; }

/* Hidden questions list (after an activity) */
.kw-hidden-qs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kw-hidden-qs > div { background: var(--info-soft); border-radius: var(--r-s); padding: 12px; display: grid; gap: 4px; min-width: 0; }
.kw-hidden-qs b { display: flex; align-items: center; gap: 6px; }
.kw-hidden-qs span { font-size: var(--fs-s); }
@media (max-width: 640px) { .kw-hidden-qs { grid-template-columns: 1fr; } }

/* Impact pyramid levels (fixed brand colours, same in both themes) */
.lvl-1 { --lvl: #8ECE00; --lvl-ink: #1f3236; }
.lvl-2 { --lvl: #A0C963; --lvl-ink: #1f3236; }
.lvl-3 { --lvl: #8DC794; --lvl-ink: #1f3236; }
.lvl-4 { --lvl: #74C4BA; --lvl-ink: #1f3236; }
.lvl-5 { --lvl: #49C1E9; --lvl-ink: #1f3236; }
.lvl-6 { --lvl: #345157; --lvl-ink: #ffffff; }

.kw-pyr-wrap, .kw-pyr-wrap--explore { display: grid; gap: 20px; }
.kw-pyr-wrap--explore { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 720px) { .kw-pyr-wrap--explore { grid-template-columns: 1fr; } }
.kw-pyr { display: grid; gap: 6px; justify-items: center; }
.kw-pyr__row {
  font: inherit; text-align: left; border: 2px solid transparent; margin: 0;
  background: var(--lvl); color: var(--lvl-ink);
  border-radius: 8px; padding: 9px 12px; min-height: 44px;
  display: flex; align-items: center; gap: 10px; max-width: 100%;
  font-size: var(--fs-s); font-weight: 700;
}
.kw-pyr__n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .35); font-size: var(--fs-xs); }
.lvl-6 .kw-pyr__n { background: rgba(255, 255, 255, .18); }
.kw-pyr__name { min-width: 0; overflow-wrap: break-word; hyphens: auto; line-height: 1.25; }
button.kw-pyr__row { cursor: pointer; }
button.kw-pyr__row:hover { filter: brightness(1.06); }
.kw-pyr__row[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
.kw-pyr__row.is-dim { opacity: .35; }
.kw-pyr__row.is-marked { border-color: var(--hot); }
.kw-pyr__mark {
  margin-left: auto; flex: none; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--hot); color: #ffffff; border-radius: 999px; padding: 2px 10px;
}
.kw-pyr__detail .kw-label { color: var(--accent); }
.kw-pyr__detail { background: var(--surface); border-radius: var(--r-m); padding: 18px; display: grid; gap: 8px; min-width: 0; }
.kw-pyr__dl { margin: 0; display: grid; gap: 10px; }
.kw-pyr__dl div { display: grid; gap: 2px; }
.kw-pyr__dl dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.kw-pyr__dl dt .kw-icon { color: var(--info); }
.kw-pyr__dl dd { margin: 0; font-size: var(--fs-s); }
.kw-gap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: center; }
@media (max-width: 640px) { .kw-gap { grid-template-columns: 1fr; } }
.kw-gap__notes { display: grid; gap: 12px; }
.kw-gap__note { border-left: 4px solid var(--hot); padding: 4px 0 4px 12px; display: grid; gap: 2px; }
.kw-gap__note .kw-label { color: var(--hot); }
.kw-gap__note p { font-weight: 600; }

/* Why ladder */
.kw-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kw-ladder > li { display: grid; gap: 6px; padding-bottom: 6px; }
.kw-ladder__why { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: var(--fs-s); font-weight: 700; padding-left: 14px; }
.kw-ladder__why .kw-icon { color: var(--hot); }
.kw-ladder__rung {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  background: var(--surface); border-radius: var(--r-s); padding: 12px 14px; border-left: 6px solid var(--lvl, var(--line));
}
.kw-ladder__rung p { font-weight: 600; }
.kw-ladder__rung small { display: block; font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 400; }
.kw-lvl-tag {
  font-size: var(--fs-xs); font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  background: var(--lvl); color: var(--lvl-ink);
}
.kw-ladder__start { border-left-color: var(--hot); }
@media (max-width: 480px) { .kw-ladder__rung { grid-template-columns: 1fr; } .kw-lvl-tag { justify-self: start; } }

/* Objective list with levels */
.kw-objlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 14px; align-items: start; }
.kw-objlist li { display: contents; }
.kw-objlist .kw-lvl-tag { justify-self: start; }
@media (max-width: 520px) { .kw-objlist { grid-template-columns: 1fr; gap: 4px; } .kw-objlist li > span:last-child { margin-bottom: 8px; } }

/* Place the objective */
.kw-place { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kw-place__item { border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px; display: grid; gap: 10px; }
.kw-place__item.is-done { border-color: var(--accent-fill); }
.kw-place__text { font-weight: 600; }
.kw-place__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kw-chip {
  font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 6px;
}
.kw-chip b { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--lvl); color: var(--lvl-ink); }
.kw-chip:hover:not([disabled]) { border-color: var(--lvl); }
.kw-chip.is-right { background: var(--lvl); color: var(--lvl-ink); border-color: var(--lvl); }
.kw-chip.is-right b { background: rgba(255, 255, 255, .35); }
.kw-chip.is-wrong { border-color: var(--hot); color: var(--hot); text-decoration: line-through; }
.kw-chip.is-dim { opacity: .45; }
.kw-chip[disabled] { cursor: default; }

/* KPI parts (fixed brand colours) */
.part-who  { --pc: #49C1E9; --pc-ink: #1f3236; }
.part-what { --pc: #8ECE00; --pc-ink: #1f3236; }
.part-much { --pc: #D81B60; --pc-ink: #ffffff; }
.part-when { --pc: #74C4BA; --pc-ink: #1f3236; }
.kw-part {
  background: color-mix(in srgb, var(--pc) 20%, transparent);
  border-bottom: 3px solid var(--pc);
  border-radius: 3px; padding: 0 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: opacity .15s ease, background-color .15s ease;
}
.kw-part--empty { color: var(--ink-soft); font-style: italic; border-bottom-style: dashed; }
.kw-chip.part-who, .kw-chip.part-what, .kw-chip.part-much, .kw-chip.part-when { --lvl: var(--pc); --lvl-ink: var(--pc-ink); }
.kw-chip b .kw-icon { width: 13px; height: 13px; }

.kw-anatomy { background: var(--surface); border-radius: var(--r-m); padding: 22px; display: grid; gap: 18px; }
.kw-anatomy__sentence { font-size: var(--fs-l); font-weight: 700; line-height: 1.7; max-width: none; }
.kw-anatomy[data-focus="who"]  .kw-part:not(.part-who),
.kw-anatomy[data-focus="what"] .kw-part:not(.part-what),
.kw-anatomy[data-focus="much"] .kw-part:not(.part-much),
.kw-anatomy[data-focus="when"] .kw-part:not(.part-when) { opacity: .3; }
.kw-anatomy[data-focus="who"]  .kw-part.part-who,
.kw-anatomy[data-focus="what"] .kw-part.part-what,
.kw-anatomy[data-focus="much"] .kw-part.part-much,
.kw-anatomy[data-focus="when"] .kw-part.part-when { background: color-mix(in srgb, var(--pc) 45%, transparent); }
.kw-partcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .kw-partcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .kw-partcards { grid-template-columns: 1fr; } }
.kw-partcard {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--bg); border: 2px solid var(--line); border-top: 6px solid var(--pc); border-radius: var(--r-s);
  padding: 12px; display: grid; gap: 6px; align-content: start; min-width: 0;
}
.kw-partcard b { display: flex; align-items: center; gap: 6px; }
.kw-partcard b .kw-icon { color: var(--pc); }
.kw-partcard span { font-size: var(--fs-xs); color: var(--ink-soft); }
.kw-partcard[aria-pressed="true"] { border-color: var(--pc); }

/* KPI library */
.kw-chip[aria-pressed="true"] { background: var(--lvl, var(--ink)); color: var(--lvl-ink, var(--bg)); border-color: var(--lvl, var(--ink)); }
.kw-chip--all { --lvl: var(--band); --lvl-ink: #ffffff; }
.kw-chip--all b .kw-icon { width: 13px; height: 13px; }
.kw-lib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .kw-lib { grid-template-columns: 1fr; } }
.kw-lib__item { border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.kw-lib__item .kw-lvl-tag { justify-self: start; }
.kw-lib__obj { font-size: var(--fs-s); color: var(--ink-soft); }
.kw-lib__kpi { font-weight: 600; line-height: 1.75; }

/* KPI builder */
.kw-kpi { border: 2px solid var(--line); border-radius: var(--r-m); padding: 18px; display: grid; gap: 14px; }
.kw-kpi__head { display: grid; gap: 4px; }
.kw-kpi__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .kw-kpi__fields { grid-template-columns: 1fr; } }
.kw-kpi__field { display: grid; gap: 4px; min-width: 0; }
.kw-kpi__field label { font-size: var(--fs-s); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.kw-kpi__field label .kw-icon { color: var(--pc); }
.kw-kpi__field input {
  font: inherit; color: var(--ink); background: var(--bg); width: 100%;
  border: 2px solid var(--line); border-left: 6px solid var(--pc); border-radius: var(--r-s); padding: 9px 10px;
}
.kw-kpi__field input:focus { outline: none; border-color: var(--pc); }
.kw-kpi__out { background: var(--surface); border-radius: var(--r-s); padding: 14px; font-weight: 600; line-height: 1.8; max-width: none; }
.kw-kpi-status { display: flex; align-items: center; gap: 8px; font-size: var(--fs-s); font-weight: 600; }
.kw-kpi-status.is-open { color: var(--ink-soft); }
.kw-kpi-status.is-done { color: var(--accent); }
.kw-model { background: var(--ok-soft); border-radius: var(--r-s); padding: 12px 14px; display: grid; gap: 6px; }
.kw-model p { line-height: 1.8; }

/* Ready for data */
.kw-ready { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .kw-ready { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .kw-ready { grid-template-columns: 1fr; } }
.kw-ready > div { border-top: 6px solid var(--pc); background: var(--surface); border-radius: var(--r-s); padding: 12px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.kw-ready b { display: flex; align-items: center; gap: 6px; }
.kw-ready b .kw-icon { color: var(--pc); }
.kw-ready span { font-size: var(--fs-s); }

/* Index */
.kw-lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 680px) { .kw-lessons { grid-template-columns: 1fr; } }
.kw-lesson {
  color: inherit; text-decoration: none; display: grid; gap: 8px; align-content: start; min-width: 0;
  border: 2px solid var(--line); border-radius: var(--r-m); padding: 20px;
  transition: border-color .15s ease;
}
.kw-lesson:hover { border-color: var(--accent-fill); }
.kw-lesson__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ok-soft); color: var(--accent); }
.kw-lesson__icon .kw-icon { width: 24px; height: 24px; }
.kw-lesson h3 { font-size: var(--fs-l); }
.kw-lesson p { color: var(--ink-soft); }
.kw-lesson__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-s); color: var(--ink-soft); }
.kw-lesson__meta span { display: inline-flex; align-items: center; gap: 6px; }
.kw-lesson__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); margin-top: 4px; }
.kw-lesson--tool { background: var(--band); border-color: var(--band); }
.kw-lesson--tool h3, .kw-lesson--tool p, .kw-lesson--tool .kw-lesson__meta, .kw-lesson--tool .kw-label { color: var(--band-ink); }
.kw-lesson--tool .kw-lesson__go { color: var(--slt-green); }
.kw-lesson--tool .kw-lesson__icon { background: rgba(255, 255, 255, .12); color: var(--slt-green); }
.kw-downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.kw-download { display: flex; gap: 12px; align-items: start; padding: 14px; border-radius: var(--r-s); background: var(--surface); color: inherit; text-decoration: none; min-width: 0; }
.kw-download .kw-icon { color: var(--hot); margin-top: 3px; }
.kw-download b { display: block; }
.kw-download span span { font-size: var(--fs-s); color: var(--ink-soft); }
.kw-download:hover { background: var(--surface-2); }
.kw-index-steps li { color: var(--band-ink); }

/* Objective builder */
.kb-hero { padding-bottom: 20px; max-width: var(--col); }
.kb-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  background: var(--info-soft); border-radius: var(--r-m); padding: 14px 18px; margin-bottom: 24px;
}
.kb-banner > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kb-banner > span .kw-icon { color: var(--info); }
.kb-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px; align-items: start; padding-bottom: 40px; }
@media (max-width: 960px) { .kb-layout { grid-template-columns: 1fr; } }
.kb-steps { display: grid; gap: 22px; min-width: 0; }
.kb-step { border: 2px solid var(--line); border-radius: var(--r-m); padding: 20px; display: grid; gap: 16px; min-width: 0; }
.kb-step__head, .kb-brief__head { display: flex; gap: 12px; align-items: start; }
.kb-step__head h2, .kb-brief__head h2 { font-size: var(--fs-l); }
.kb-step__n {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-fill); color: #1f3236; font-weight: 800;
}
.kb-help { font-size: var(--fs-s); }
.kb-fieldlabel { font-weight: 700; font-size: var(--fs-s); }
.kb-fog { display: grid; gap: 6px; }
.kb-fog:empty { display: none; }
.kb-fogword { color: var(--hot); text-decoration: underline wavy; text-underline-offset: 3px; margin-right: 4px; }
.kb-cards { display: grid; gap: 12px; }
.kb-card { border-left: 6px solid var(--lvl); background: var(--surface); border-radius: var(--r-s); padding: 14px; display: grid; gap: 10px; }
.kb-card .kw-lvl-tag, .kw-kpi .kw-lvl-tag { justify-self: start; }
.kw-kpi.lvl-1, .kw-kpi.lvl-2, .kw-kpi.lvl-3, .kw-kpi.lvl-4, .kw-kpi.lvl-5, .kw-kpi.lvl-6 { border-left: 6px solid var(--lvl); }
.kw-kpi__head .kw-lvl-tag { margin-bottom: 4px; }
.kb-objtext { font-weight: 600; }
.kb-examples { font-size: var(--fs-s); }
.kb-examples summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--info); font-weight: 600; }
.kb-examples[open] summary { margin-bottom: 8px; }
.kb-examples p { margin-bottom: 6px; }
#kb-levels .kw-chip { font-size: var(--fs-s); }
.kb-brief {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px);
  background: var(--surface); border-radius: var(--r-m); padding: 20px; display: grid; gap: 16px; min-width: 0;
  max-height: calc(100vh - 32px); overflow: auto;
}
@media (max-width: 960px) { .kb-brief { position: static; max-height: none; } }
.kb-brief__body { display: grid; gap: 16px; }
.kb-brief__body > div { display: grid; gap: 6px; }
.kb-brief__body .kw-label { color: var(--accent); }
.kb-brief__orig { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--hot); }
.kb-brief__clar { font-weight: 700; }
.kb-brief__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kb-brief__list li { background: var(--bg); border-left: 6px solid var(--lvl); border-radius: var(--r-s); padding: 10px 12px; display: grid; gap: 4px; }
.kb-brief__list .kw-lvl-tag { justify-self: start; }
.kb-brief__kpi { font-size: var(--fs-s); line-height: 1.8; }
.kb-look { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-s); }
.kb-look li { display: flex; gap: 8px; align-items: start; }
.kb-look .kw-icon { color: var(--pc); margin-top: 3px; }
.kb-brief__actions .kw-btn { font-size: var(--fs-xs); padding: 8px 14px; }
.kb-fallback { font: inherit; font-size: var(--fs-xs); width: 100%; border: 2px solid var(--line); border-radius: var(--r-s); padding: 8px; background: var(--bg); color: var(--ink); }
.kb-brief__clear { display: grid; gap: 8px; }
.kb-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-s); font-weight: 600; }
.kb-brief__copy { font-size: var(--fs-xs); color: var(--ink-soft); }

/* Dark Playground */
.kw-dark {
  background: var(--dark-panel); color: var(--dark-panel-ink);
  border-radius: var(--r-m); padding: 24px; display: grid; gap: 14px;
}
.kw-dark h2, .kw-dark h3, .kw-dark p { color: var(--dark-panel-ink); }
.kw-dark .kw-eyebrow { color: #b9d1cd; }
.kw-dark .kw-eyebrow .kw-icon { color: var(--slt-green); }
.kw-dark__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kw-dark__grid > div { background: rgba(255, 255, 255, .07); border-radius: var(--r-s); padding: 14px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.kw-dark__grid b { display: flex; align-items: center; gap: 8px; }
.kw-dark__problem .kw-icon { color: #ff8fb5; }
.kw-dark__fix .kw-icon { color: var(--slt-green); }
@media (max-width: 600px) { .kw-dark__grid { grid-template-columns: 1fr; } }

/* Take it with you */
.kw-takeaway { background: var(--surface); border-radius: var(--r-m); padding: 24px; display: grid; gap: 16px; }
.kw-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kw-checklist label { display: flex; gap: 10px; align-items: start; cursor: pointer; }
.kw-checklist input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--slt-green); flex: none; }
.kw-field { display: grid; gap: 6px; }
.kw-field label { font-weight: 700; font-size: var(--fs-s); }
.kw-field textarea {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 2px solid var(--line); border-radius: var(--r-s); padding: 12px; min-height: 96px; resize: vertical; width: 100%;
}
.kw-field textarea:focus { border-color: var(--info-fill); outline: none; }
.kw-hint { font-size: var(--fs-xs); color: var(--ink-soft); }

/* Buttons */
.kw-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kw-btn {
  font: inherit; font-weight: 700; font-size: var(--fs-s); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 10px 18px; border: 2px solid transparent;
  background: var(--accent-fill); color: #1f3236;
}
.kw-btn:hover { filter: brightness(1.05); }
.kw-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.kw-btn--ghost:hover { border-color: var(--ink-soft); }
.kw-status { font-size: var(--fs-s); color: var(--accent); font-weight: 600; min-height: 1.5em; }

/* Lesson navigation */
.kw-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 28px; border-top: 1px solid var(--line); }

/* Footer */
.kw-footer { background: var(--band); color: var(--band-soft); font-size: var(--fs-xs); }
.kw-footer .kw-wrap { padding-block: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* Motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Print: lesson becomes a handout */
@media print {
  .kw-progress, .kw-nav, .kw-actions { display: none; }
  body:has(.kb-brief) .kw-band, body:has(.kb-brief) .kb-hero, body:has(.kb-brief) .kb-banner,
  body:has(.kb-brief) .kb-steps, body:has(.kb-brief) .kb-brief__clear, body:has(.kb-brief) .kw-status,
  body:has(.kb-brief) .kw-footer { display: none !important; }
  .kb-layout { display: block; }
  .kb-brief { position: static; max-height: none; overflow: visible; background: #ffffff; }
  .kw-band, .kw-footer, .kw-dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}