/* ============================================================================
   Knowledge Hub — guide page (Standard Knowledge Card)
   London Reporting Academy
   ----------------------------------------------------------------------------
   Ported from design_handoff_knowledge_card/knowledge-card.css (LRA.zip).
   Two layers, in this order, and the order matters:

   LAYER 0  tokens          — see note below
   LAYER 1  structure & typography
   LAYER 2  colour system   — deliberately overrides layer 1 values

   Three deliberate departures from the handoff, all forced by what this repo
   actually serves:

   1. TOKENS ARE LOCAL. The handoff expects compiled `--lra-*` custom
      properties from a design system that `frontend/src/styles/` describes but
      that nothing in this repo builds — the served `app.css` has no `--lra-*`
      and no `.btn--primary`. The values below are copied verbatim from
      `frontend/src/styles/_variables.scss`, which is the same source the
      handoff's `vendor/tokens.css` was generated from, and are scoped to
      `.kh-page` rather than `:root` so nothing leaks into the rest of the
      site. When the design system is finally compiled and shipped, delete
      this block and the rules keep working unchanged.

   2. ELEMENT SELECTORS ARE SCOPED. The handoff styles `body`, `a`, `h1,h2,h3`
      and `p` globally, which is safe in a standalone page and not safe in a
      stylesheet loaded alongside `app.css`. Each is scoped under `.kh-page`.

   3. `#id` SELECTORS ARE CLASSES. The handoff colours blocks by section id and
      says so itself: "If a block can appear more than once per page, promote
      those #id selectors to classes before shipping." These are StreamField
      blocks and an article carries four tables, so the families are
      `.kh-fam--*`, the tinted bands `.kh-band--*` and the taught tables
      `.kh-tbl--map` / `--risk` / `--evidence`.
   ========================================================================== */

/* ===== LAYER 0 — tokens (see note 1) ===================================== */
.kh-page{
  --lra-color-primary:#0D3068; --lra-color-primary-light:#1a4a8f; --lra-color-primary-dark:#091f45;
  --lra-color-accent:#62B5E1; --lra-color-accent-light:#93C4EA; --lra-color-accent-dark:#3a9dd4;
  --lra-color-teal:#0090A7; --lra-color-teal-light:#00b3cf;
  --lra-color-white:#FFF; --lra-color-black:#000;
  --lra-color-gray-100:#F7F8F9; --lra-color-gray-200:#EEF0F2; --lra-color-gray-300:#DDE2E4;
  --lra-color-gray-400:#B7C4CE; --lra-color-gray-500:#9AA6AC; --lra-color-gray-600:#84919A;
  --lra-color-gray-700:#5A656D; --lra-color-gray-800:#333; --lra-color-gray-900:#1a1a1a;
  --lra-color-warning:#ffc107; --lra-color-linkedin:#0077B5;
  --lra-color-bg-body:#FFF;
  --lra-color-bg-gradient:linear-gradient(180deg,rgba(226,235,239,1) 0%,rgba(226,235,239,0) 20%);
  --lra-font-primary:'Inter',-apple-system,blinkmacsystemfont,'Segoe UI',sans-serif;
  --lra-font-secondary:'Lora',georgia,'Times New Roman',serif;
  --lra-font-size-xs:12px; --lra-font-size-sm:13px; --lra-font-size-base:14px;
  --lra-font-size-md:16px; --lra-font-size-lg:18px; --lra-font-size-xl:20px;
  --lra-font-size-2xl:24px; --lra-font-size-3xl:32px;
  --lra-font-weight-regular:400; --lra-font-weight-medium:500;
  --lra-font-weight-semibold:600; --lra-font-weight-bold:700;
  --lra-letter-spacing-tight:-0.96px; --lra-letter-spacing-base:-0.56px;
  --lra-spacing-xs:4px; --lra-spacing-sm:8px; --lra-spacing-md:16px; --lra-spacing-lg:24px;
  --lra-spacing-xl:32px; --lra-spacing-2xl:48px; --lra-spacing-3xl:64px; --lra-spacing-4xl:96px;
  --lra-max-width-content:1230px; --lra-header-height:76px; --lra-header-height-mob:61px;
  --lra-border-radius-sm:5px; --lra-border-radius-md:10px; --lra-border-radius-lg:20px;
  --lra-transition-fast:0.2s ease; --lra-transition-base:0.3s ease;
  /* layer 2 tints */
  --v-teal:#F0F7F8; --v-teal-line:#C8E2E6; --v-blue:#F2F7FC; --v-blue-line:#D5E5F4;
  --v-grey:#F7F8F9; --v-amber:#FFFCF2; --v-amber-line:#EFE2C2; --v-amber-ink:#856200;
  /* Teal for TEXT. --lra-color-teal (#0090A7) is 3.79:1 on white, which fails
     AA at the 12-13px the hub's labels and eyebrows are set in; this is the
     same hue darkened to 5.83:1. Rule: the token below for type under 16px,
     --lra-color-teal for glyphs, rules, dots and hover states. */
  --kh-teal-ink:#0b6f80;
}

/* ===== LAYER 1 — structure & typography ================================== */
/* An anchor jump has to clear two fixed things, not one: the site header and
   the hub bar now parked under it (56px + its rule, plus air). The flat 140px
   this replaces was measured when the bar was still hidden behind the header
   and did not need clearing.

   The fallback is a literal, not `--lra-header-height`: the tokens above are
   declared on `.kh-page`, so on <html> that variable does not resolve and
   would invalidate the whole calc(). `--lra-header-height-live` is set on
   <html> itself by shared/header_height_probe.html, so it does resolve here. */
html:has(.kh-page){scroll-behavior:smooth;scroll-padding-top:calc(var(--lra-header-height-live,72px) + 72px)}
@media (prefers-reduced-motion:reduce){html:has(.kh-page){scroll-behavior:auto}}
.kh-page{background:var(--lra-color-bg-body);font-family:var(--lra-font-primary);color:var(--lra-color-gray-800);-webkit-font-smoothing:antialiased}
/* The element resets stay inside :where() so they keep the ZERO specificity the
   handoff's bare `a` / `h1,h2,h3` / `p` selectors had. Scoping them as
   `.kh-page p` (0,1,1) made them outrank every block class (0,1,0), so
   `margin:0` silently won over .kh-lead / .kh-stand / .kh-subhead / the
   passport values, and the link colour won over .kh-btn — a navy label on a
   navy fill. :where() restores the cascade the design assumes while keeping
   the scoping that stops these leaking into app.css. */
:where(.kh-page) a{color:var(--lra-color-primary);text-decoration-color:var(--lra-color-gray-400);text-underline-offset:3px}
:where(.kh-page) a:hover{color:var(--lra-color-teal);text-decoration-color:currentColor}
:where(.kh-page) :is(h1,h2,h3){font-family:var(--lra-font-secondary);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);margin:0}
:where(.kh-page) p{margin:0}
.kh-shell{max-width:var(--lra-max-width-content);margin-inline:auto;padding-inline:var(--lra-spacing-md)}
.kh-grid{display:grid;grid-template-columns:minmax(0,720px) minmax(240px,300px);gap:var(--lra-spacing-4xl);justify-content:center}
/* Skip link — the first node inside `.kh-page` on every tier. Lives here
   rather than in the card layer because the guide tier needs it too, and it
   is not `.sr-only`: no served stylesheet defines that utility, so the link
   rendered as plain body text above the hub bar.

   On focus it pins to the viewport instead of returning to flow. The site
   header is `position:fixed` and up to ~116px tall, so an in-flow skip link
   un-hides underneath it and a keyboard user never sees the thing they just
   tabbed to. */
.kh-skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kh-skip:focus{position:fixed;top:var(--lra-spacing-sm);inset-inline-start:var(--lra-spacing-sm);z-index:200;width:auto;height:auto;margin:0;padding:10px 20px;clip:auto;display:inline-block;background:var(--lra-color-primary);color:var(--lra-color-white);text-decoration:none}
/* hub bar + crumbs */
/* The bar sticks BELOW the fixed header, never over it. `top:0` parked it
   under a header up to ~116px tall, so it was invisible from the first
   scroll. The fix is the offset, not the stacking order: z-index stays at 90
   because the header is 103 and the mobile menu panel is 102, and lifting the
   bar past those would paint it over an open menu — a worse overlap than the
   one being fixed.

   `--lra-header-height-live` is the measured height from
   shared/header_height_probe.html; the `--lra-header-height` token behind it
   is the no-JS fallback, and resolves here because `.kh-hubbar` sits inside
   `.kh-page` where the tokens are declared. */
.kh-hubbar{position:sticky;top:var(--lra-header-height-live,var(--lra-header-height));z-index:90;background:var(--lra-color-white);border-bottom:1px solid var(--lra-color-gray-300)}
.kh-hubbar__inner{display:flex;align-items:center;gap:var(--lra-spacing-lg);min-height:56px;overflow-x:auto}
.kh-hubbar__t{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);white-space:nowrap}
.kh-hubbar__t span{display:block;font-family:var(--lra-font-primary);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-regular);letter-spacing:0;text-transform:none;color:var(--lra-color-gray-600);margin-top:2px}
.kh-pills{display:flex;gap:var(--lra-spacing-sm);margin-inline-start:auto}
.kh-pill{display:inline-block;padding:5px 14px;border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-lg);font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);color:var(--lra-color-gray-700);text-decoration:none;white-space:nowrap;transition:var(--lra-transition-fast)}
.kh-pill:hover{border-color:var(--lra-color-accent);color:var(--lra-color-primary)}
.kh-pill.is-active{background:var(--lra-color-primary);border-color:var(--lra-color-primary);color:var(--lra-color-white)}
.kh-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lra-spacing-sm);padding-block:var(--lra-spacing-lg) 0;font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-600)}
.kh-crumbs a{color:var(--lra-color-gray-700);text-decoration:none}
.kh-crumbs a:hover{color:var(--lra-color-teal)}
.kh-crumbs i{font-style:normal;color:var(--lra-color-gray-400)}
/* hero */
.kh-hero{background:var(--lra-color-gray-100);border-bottom:1px solid var(--lra-color-gray-300);padding-bottom:var(--lra-spacing-2xl)}
.kh-hero .kh-grid{padding-top:var(--lra-spacing-xl);row-gap:var(--lra-spacing-2xl)}
.kh-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lra-spacing-sm);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--lra-color-teal)}
.kh-eyebrow em{font-style:normal;color:var(--lra-color-gray-600);font-weight:var(--lra-font-weight-medium)}
.kh-eyebrow s{text-decoration:none;color:var(--lra-color-gray-400)}
.kh-page h1.kh-title{font-size:clamp(30px,3.6vw,44px);line-height:1.14;letter-spacing:var(--lra-letter-spacing-tight);margin-top:var(--lra-spacing-md);text-wrap:balance}
.kh-stand{margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-lg);line-height:1.6;color:var(--lra-color-gray-700);max-width:62ch;text-wrap:pretty}
.kh-hero__aside{align-self:end;font-size:var(--lra-font-size-sm);line-height:1.6;color:var(--lra-color-gray-700);border-top:2px solid var(--lra-color-primary);padding-top:var(--lra-spacing-md)}
.kh-hero__aside b{display:block;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--lra-color-primary);margin-bottom:6px}
/* passport */
.kh-passport{grid-column:1/-1;background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-top:3px solid var(--lra-color-teal);border-radius:var(--lra-border-radius-sm)}
.kh-passport__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--lra-spacing-sm);padding:12px var(--lra-spacing-lg);border-bottom:1px solid var(--lra-color-gray-200)}
.kh-page .kh-passport__top h2{font-family:var(--lra-font-primary);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--lra-color-primary)}
.kh-status{display:inline-flex;align-items:center;gap:7px;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--lra-color-teal)}
.kh-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lra-color-teal);box-shadow:0 0 0 3px rgba(0,144,167,.15)}
.kh-status--pending{color:var(--lra-color-gray-600)}
.kh-status--pending::before{background:var(--lra-color-gray-400);box-shadow:0 0 0 3px rgba(183,196,206,.25)}
.kh-passport__cells{display:grid;grid-template-columns:repeat(3,1fr)}
.kh-passport__cell{padding:var(--lra-spacing-md) var(--lra-spacing-lg);border-inline-start:1px solid var(--lra-color-gray-200)}
.kh-passport__cell:first-child{border-inline-start:0}
.kh-passport__label{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--lra-color-gray-600)}
.kh-passport__value{margin-top:6px;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.3}
.kh-passport__sub{margin-top:4px;font-size:var(--lra-font-size-sm);line-height:1.45;color:var(--lra-color-gray-700)}
.kh-passport__sub a{text-decoration:none}
.kh-rev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--lra-spacing-lg);align-items:center;padding:var(--lra-spacing-lg);border-bottom:1px solid var(--lra-color-gray-200);text-decoration:none;color:inherit;border-radius:3px;transition:background var(--lra-transition-base),box-shadow var(--lra-transition-base),transform var(--lra-transition-base)}
.kh-rev__av{position:relative;display:block;width:76px;height:76px;border-radius:50%;background:var(--lra-color-primary);box-shadow:0 0 0 3px var(--lra-color-white),0 0 0 4px var(--lra-color-gray-300);overflow:hidden;transition:box-shadow var(--lra-transition-base)}
.kh-rev__av i{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--lra-font-secondary);font-style:normal;font-size:var(--lra-font-size-xl);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-accent-light)}
.kh-rev__av img{position:relative;width:100%;height:100%;object-fit:cover;display:block}
.kh-rev__txt{display:grid;gap:2px}
.kh-rev__k{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--lra-color-gray-700)}
.kh-rev__n{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:2px;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-xl);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.2}
.kh-rev__li{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:4px;background:rgba(0,119,181,.1);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);letter-spacing:0;color:var(--lra-color-linkedin);transition:var(--lra-transition-fast)}
.kh-rev__li svg{width:14px;height:14px}
.kh-rev__c{font-size:var(--lra-font-size-base);line-height:1.5;color:var(--lra-color-gray-800)}
.kh-rev__loc{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:var(--lra-font-size-base);color:var(--lra-color-gray-800)}
.kh-rev__loc svg{color:var(--lra-color-teal);flex:none}
.kh-rev__fine{margin-top:3px;font-size:var(--lra-font-size-xs);color:var(--lra-color-gray-700)}
/* body + blocks */
.kh-body{padding-block:var(--lra-spacing-2xl) var(--lra-spacing-4xl)}
.kh-main>*+*{margin-top:var(--lra-spacing-3xl)}
.kh-kicker{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--lra-color-teal)}
.kh-page h2.kh-h2{font-size:26px;line-height:1.2;letter-spacing:var(--lra-letter-spacing-base);margin-top:var(--lra-spacing-xs)}
.kh-page h3.kh-h3{font-size:var(--lra-font-size-xl);line-height:1.3;letter-spacing:var(--lra-letter-spacing-base);margin-top:var(--lra-spacing-xl)}
.kh-prose{font-size:var(--lra-font-size-md);line-height:1.72;color:var(--lra-color-gray-800);text-wrap:pretty}
.kh-prose p{margin-top:var(--lra-spacing-md)}
.kh-prose>:first-child{margin-top:0}
.kh-page .kh-prose h2{font-size:26px;line-height:1.2;letter-spacing:var(--lra-letter-spacing-base);margin-top:var(--lra-spacing-xl)}
.kh-page .kh-prose h3{font-size:var(--lra-font-size-xl);line-height:1.3;letter-spacing:var(--lra-letter-spacing-base);margin-top:var(--lra-spacing-xl)}
.kh-prose ul,.kh-prose ol{margin:var(--lra-spacing-md) 0 0;padding-inline-start:20px}
.kh-prose li{margin-top:6px}
.kh-prose b,.kh-prose strong{font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary)}
.kh-lead{margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-md);line-height:1.7;color:var(--lra-color-gray-700)}
/* answer card */
.kh-answer{background:var(--lra-color-primary);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-xl)}
.kh-answer .kh-kicker{color:var(--lra-color-accent)}
.kh-page .kh-answer h2{font-size:26px;line-height:1.22;letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-white);margin-top:var(--lra-spacing-sm)}
.kh-answer__text{margin-top:var(--lra-spacing-md);font-family:var(--lra-font-secondary);font-size:21px;line-height:1.44;letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-accent-light);text-wrap:pretty}
.kh-answer__cond{margin-top:var(--lra-spacing-lg);padding-top:var(--lra-spacing-md);border-top:1px solid rgba(255,255,255,.22);font-size:var(--lra-font-size-md);line-height:1.68;color:rgba(255,255,255,.86)}
/* orientation rows */
.kh-why{margin-top:var(--lra-spacing-lg);border-top:1px solid var(--lra-color-gray-300)}
.kh-why__row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:var(--lra-spacing-lg);padding-block:var(--lra-spacing-md);border-bottom:1px solid var(--lra-color-gray-200)}
.kh-why__row dt{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.35}
.kh-why__row dd{margin:0;font-size:var(--lra-font-size-base);line-height:1.65;color:var(--lra-color-gray-800)}
/* split panels */
.kh-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:var(--lra-spacing-lg);background:var(--lra-color-gray-300);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);overflow:hidden}
.kh-split__col{background:var(--lra-color-white);padding:var(--lra-spacing-lg)}
.kh-split__col--opt{background:var(--lra-color-gray-100)}
.kh-split__head{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--lra-color-primary);padding-bottom:var(--lra-spacing-sm);border-bottom:2px solid var(--lra-color-primary)}
.kh-split__col--opt .kh-split__head{color:var(--lra-color-gray-700);border-bottom-color:var(--lra-color-gray-400)}
.kh-split__body{margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-md);line-height:1.68;color:var(--lra-color-gray-800)}
.kh-marks{list-style:none;margin:var(--lra-spacing-md) 0 0;padding:0;display:grid;gap:11px;font-size:var(--lra-font-size-base);line-height:1.55}
.kh-marks li{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start}
.kh-marks li::before{content:"";width:9px;height:9px;margin-top:6px;background:var(--lra-color-teal);border-radius:2px}
.kh-marks--opt li::before{background:transparent;border:1.5px solid var(--lra-color-gray-500);border-radius:50%}
/* figure */
.kh-fig{margin:var(--lra-spacing-lg) 0 0;border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-lg);background:var(--lra-color-white)}
.kh-fig__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--lra-spacing-sm);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--lra-color-gray-600);padding-bottom:var(--lra-spacing-md);border-bottom:1px solid var(--lra-color-gray-200)}
.kh-fig__head b{color:var(--lra-color-primary)}
.kh-fig__img{margin-top:var(--lra-spacing-lg)}
.kh-fig__img img{display:block;width:100%;height:auto}
.kh-fig__cap{margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-xs);line-height:1.6;color:var(--lra-color-gray-700)}
/* callouts */
.kh-note{margin-top:var(--lra-spacing-lg);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-lg);background:var(--lra-color-white)}
.kh-note--soft{background:var(--lra-color-gray-100)}
.kh-note__tag{display:flex;align-items:center;gap:10px;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--lra-color-teal)}
.kh-note__tag::after{content:"";flex:1;height:1px;background:var(--lra-color-gray-300)}
.kh-note__k{margin-top:10px;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-lg);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.3}
.kh-note p{margin-top:10px;font-size:var(--lra-font-size-base);line-height:1.7;color:var(--lra-color-gray-800)}
/* Withdrawn standard. Amber, full width, above the title — the one thing
   on the page that must be read before the guidance below it, because the
   requirement it documents no longer exists. */
.kh-withdrawn{margin-top:var(--lra-spacing-lg);border:1px solid #e0c56a;border-left:4px solid #c9971f;border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-lg);background:#fdf8ea}
.kh-withdrawn__tag{display:flex;align-items:center;gap:10px;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-bold);letter-spacing:.1em;text-transform:uppercase;color:#8a6d1e}
.kh-withdrawn__tag::after{content:"";flex:1;height:1px;background:#e0c56a}
.kh-withdrawn__lead{margin-top:10px!important;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-lg);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);line-height:1.35}
.kh-withdrawn p{margin-top:10px;font-size:var(--lra-font-size-base);line-height:1.7;color:var(--lra-color-gray-800)}
.kh-withdrawn__next a{display:inline-block;margin:2px 0;font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-teal);text-decoration:none}
.kh-withdrawn__next a:hover{text-decoration:underline}
.kh-withdrawn__fine{margin-top:var(--lra-spacing-md)!important;padding-top:10px;border-top:1px solid #e8d9a8;font-size:var(--lra-font-size-xs)!important;color:var(--lra-color-gray-600)!important}
.kh-withdrawn__fine a{color:var(--lra-color-teal);text-decoration:none}
.kh-note__fine{margin-top:var(--lra-spacing-md)!important;padding-top:10px;border-top:1px solid var(--lra-color-gray-200);font-size:var(--lra-font-size-xs)!important;color:var(--lra-color-gray-600)!important}
/* steps */
.kh-steps{list-style:none;counter-reset:s;margin:var(--lra-spacing-lg) 0 0;padding:0;border-top:1px solid var(--lra-color-gray-300)}
.kh-steps li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:var(--lra-spacing-md);padding-block:var(--lra-spacing-md);border-bottom:1px solid var(--lra-color-gray-200);font-size:var(--lra-font-size-base);line-height:1.6}
.kh-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);color:var(--lra-color-gray-400)}
.kh-steps b{display:block;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.35;margin-bottom:3px}
/* tables */
.kh-scroll{overflow-x:auto;margin-top:var(--lra-spacing-lg)}
.kh-tbl{width:100%;min-width:600px;border-collapse:collapse;font-size:var(--lra-font-size-base)}
.kh-tbl th{text-align:start;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--lra-color-gray-600);padding:0 var(--lra-spacing-md) var(--lra-spacing-sm) 0;border-bottom:2px solid var(--lra-color-primary);vertical-align:bottom}
.kh-tbl td{padding:13px var(--lra-spacing-md) 13px 0;border-bottom:1px solid var(--lra-color-gray-200);vertical-align:top;line-height:1.55;color:var(--lra-color-gray-800)}
.kh-tbl td:last-child,.kh-tbl th:last-child{padding-inline-end:0}
.kh-tbl td b{color:var(--lra-color-primary);font-weight:var(--lra-font-weight-semibold)}
.kh-tbl tbody tr:hover td{background:var(--lra-color-gray-100)}
.kh-tbl a{font-weight:var(--lra-font-weight-medium);text-decoration:none}
.kh-tbl a:hover{text-decoration:underline}
.kh-tbl--map td:nth-child(2){font-weight:var(--lra-font-weight-medium);color:var(--lra-color-primary)}
/* checklist + self-check */
.kh-check{list-style:none;margin:var(--lra-spacing-lg) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px var(--lra-spacing-lg);font-size:var(--lra-font-size-base);line-height:1.5}
.kh-check li{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start}
.kh-check li::before{content:"";width:12px;height:12px;margin-top:4px;border:1.5px solid var(--lra-color-gray-500);border-radius:2px;background:var(--lra-color-white)}
.kh-selfc{margin-top:var(--lra-spacing-lg);background:var(--lra-color-gray-100);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-lg)}
.kh-selfc ol{list-style:none;counter-reset:q;margin:var(--lra-spacing-md) 0 0;padding:0;display:grid;gap:var(--lra-spacing-md)}
.kh-selfc li{counter-increment:q;display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);line-height:1.45;color:var(--lra-color-primary)}
.kh-selfc li::before{content:"Q" counter(q);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;color:var(--lra-color-teal);padding-top:5px}
/* related standards */
.kh-rel{margin-top:var(--lra-spacing-lg);border-top:1px solid var(--lra-color-gray-300)}
.kh-rel__row{padding-block:var(--lra-spacing-md);border-bottom:1px solid var(--lra-color-gray-200)}
.kh-rel__tag{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--lra-color-teal)}
.kh-rel__row b{display:block;margin-top:5px;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.35}
.kh-rel__row p{margin-top:5px;font-size:var(--lra-font-size-base);line-height:1.6}
.kh-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kh-chips a{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-medium);letter-spacing:.02em;color:var(--lra-color-primary);text-decoration:none;border:1px solid var(--lra-color-gray-300);border-radius:3px;padding:4px 9px;background:var(--lra-color-white);transition:var(--lra-transition-fast)}
.kh-chips a:hover{border-color:var(--lra-color-teal);color:var(--lra-color-teal)}
.kh-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--lra-spacing-sm);margin-top:var(--lra-spacing-lg)}
.kh-cards a{display:block;padding:11px 13px;border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);text-decoration:none;transition:var(--lra-transition-fast)}
.kh-cards a:hover{border-color:var(--lra-color-teal);background:var(--lra-color-gray-100)}
.kh-cards code{display:block;font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary)}
.kh-cards span{display:block;margin-top:2px;font-size:var(--lra-font-size-xs);color:var(--lra-color-gray-600)}
/* sources & status */
.kh-src{margin-top:var(--lra-spacing-lg);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm)}
.kh-src__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.kh-src__cell{padding:var(--lra-spacing-lg);border-block-end:1px solid var(--lra-color-gray-200)}
.kh-src__cell:nth-child(odd){border-inline-end:1px solid var(--lra-color-gray-200)}
.kh-src__cell--wide{grid-column:1/-1;border-block-end:0}
.kh-src__label{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--lra-color-gray-600)}
.kh-src__val{margin-top:8px;font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}
.kh-src__val strong{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);display:block}
.kh-refs{list-style:none;counter-reset:r;margin:var(--lra-spacing-sm) 0 0;padding:0;display:grid;gap:12px;font-size:var(--lra-font-size-base);line-height:1.55}
.kh-refs li{counter-increment:r;display:grid;grid-template-columns:26px minmax(0,1fr)}
.kh-refs li::before{content:counter(r);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-gray-500);padding-top:3px}
.kh-refs span{display:block;font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
.kh-refs em{display:block;font-style:normal;font-size:var(--lra-font-size-xs);color:var(--lra-color-gray-500);word-break:break-all;margin-top:2px}
.kh-src__foot{padding:var(--lra-spacing-md) var(--lra-spacing-lg);background:var(--lra-color-gray-100);font-size:var(--lra-font-size-sm);line-height:1.6;color:var(--lra-color-gray-700);border-radius:0 0 4px 4px}
/* bridge + page foot */
.kh-bridge{margin-top:var(--lra-spacing-3xl);background:var(--lra-color-gray-100);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-xl);display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--lra-spacing-lg)}
.kh-page .kh-bridge h3{margin-top:var(--lra-spacing-sm);font-size:var(--lra-font-size-2xl);letter-spacing:var(--lra-letter-spacing-base);line-height:1.25}
.kh-bridge p{margin-top:var(--lra-spacing-sm);max-width:46ch;font-size:var(--lra-font-size-base);line-height:1.65;color:var(--lra-color-gray-700)}
.kh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:1px solid var(--lra-color-primary);border-radius:var(--lra-border-radius-sm);background:var(--lra-color-primary);color:var(--lra-color-white);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);font-weight:var(--lra-font-weight-semibold);line-height:1.4;text-decoration:none;white-space:nowrap;cursor:pointer;transition:var(--lra-transition-fast)}
.kh-btn:hover{background:var(--lra-color-primary-dark);border-color:var(--lra-color-primary-dark);color:var(--lra-color-white)}
.kh-pagefoot{border-top:1px solid var(--lra-color-gray-200);padding-block:var(--lra-spacing-md);font-size:var(--lra-font-size-xs);color:var(--lra-color-gray-500)}
/* rail */
/* Header + hub bar + air, tracking the measured header for the same reason
   `.kh-hubbar` does: against the static token the rail rides up under a
   wrapped header and its first box is unreadable. */
.kh-rail{position:sticky;top:calc(var(--lra-header-height-live,var(--lra-header-height)) + 80px);align-self:start;display:grid;gap:var(--lra-spacing-lg);font-size:var(--lra-font-size-sm)}
.kh-rail__box{border-top:2px solid var(--lra-color-primary);padding-top:var(--lra-spacing-md)}
.kh-rail__h{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--lra-color-primary)}
.kh-toc{list-style:none;margin:var(--lra-spacing-md) 0 0;padding:0;display:grid;gap:9px;counter-reset:t}
.kh-toc a{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;text-decoration:none;color:var(--lra-color-gray-700);line-height:1.4}
.kh-toc a::before{counter-increment:t;content:counter(t,decimal-leading-zero);color:var(--lra-color-gray-400);font-size:var(--lra-font-size-xs);padding-top:2px}
.kh-toc a:hover{color:var(--lra-color-teal)}
.kh-kv{margin:var(--lra-spacing-md) 0 0;display:grid;gap:10px}
.kh-kv div{display:grid;gap:2px;padding-bottom:9px;border-bottom:1px solid var(--lra-color-gray-200)}
.kh-kv div:last-child{border-bottom:0;padding-bottom:0}
.kh-kv dt{font-size:var(--lra-font-size-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--lra-color-gray-600)}
.kh-kv dd{margin:0;color:var(--lra-color-gray-900);line-height:1.45}
.kh-ladder{list-style:none;margin:var(--lra-spacing-md) 0 0;padding:0}
.kh-ladder li{position:relative;padding-inline-start:var(--lra-spacing-lg);padding-bottom:var(--lra-spacing-md);line-height:1.4}
.kh-ladder li:last-child{padding-bottom:0}
.kh-ladder li::before{content:"";position:absolute;inset-inline-start:3px;top:5px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--lra-color-gray-400);background:var(--lra-color-white);box-sizing:border-box}
.kh-ladder li::after{content:"";position:absolute;inset-inline-start:6px;top:14px;bottom:-2px;width:1px;background:var(--lra-color-gray-300)}
.kh-ladder li:last-child::after{display:none}
.kh-ladder a{color:var(--lra-color-gray-700);text-decoration:none}
.kh-ladder a:hover{color:var(--lra-color-teal)}
.kh-ladder em{font-style:normal;font-size:10px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;color:var(--lra-color-gray-500);display:block}
.kh-ladder li.is-here::before{background:var(--lra-color-teal);border-color:var(--lra-color-teal)}
.kh-ladder li.is-here span{color:var(--lra-color-primary);font-weight:var(--lra-font-weight-semibold)}
.kh-rail__url{margin-top:var(--lra-spacing-md);padding-top:10px;border-top:1px solid var(--lra-color-gray-200);font-size:11px;line-height:1.5;color:var(--lra-color-gray-500);word-break:break-all}
@media (max-width:1024px){
.kh-grid{grid-template-columns:minmax(0,1fr)}
.kh-rail{position:static}
}
@media (max-width:776px){
.kh-passport__cells,.kh-split,.kh-src__grid,.kh-check{grid-template-columns:minmax(0,1fr)}
.kh-rev{grid-template-columns:minmax(0,1fr);gap:var(--lra-spacing-md);justify-items:start}
.kh-rev__av{width:60px;height:60px}
.kh-passport__cell{border-inline-start:0;border-bottom:1px solid var(--lra-color-gray-200)}
.kh-why__row{grid-template-columns:minmax(0,1fr);gap:6px}
.kh-src__cell:nth-child(odd){border-inline-end:0}
}

/* ===== LAYER 2 — colour system ==========================================
   Colour encodes the KIND of block. It is never decoration.
   teal = explains · navy = normative · blue = do-this-next
   steel = compare · grey = reference · amber = risk (two places only)
   ======================================================================== */
.kh-hero{background:var(--lra-color-bg-gradient),var(--lra-color-gray-100)}
/* kickers carry a colour-coded swatch so a block's type is legible at a glance;
   the hue lives in the swatch, the label stays navy so 12px type keeps contrast */
.kh-kicker{display:flex;align-items:center;gap:8px;color:var(--lra-color-primary)}
.kh-kicker::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--v-fam,var(--lra-color-teal));flex:none}
.kh-fam--explain{--v-fam:var(--lra-color-teal)}
.kh-fam--normative{--v-fam:var(--lra-color-primary)}
.kh-fam--next{--v-fam:var(--lra-color-accent-dark)}
.kh-fam--compare{--v-fam:var(--lra-color-primary-light)}
.kh-fam--reference{--v-fam:var(--lra-color-gray-600)}
.kh-answer .kh-kicker,.kh-selfc .kh-kicker,.kh-bridge .kh-kicker{color:var(--lra-color-accent);--v-fam:var(--lra-color-accent)}
/* tinted bands break the column into readable stretches */
.kh-band{border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-lg) var(--lra-spacing-lg) var(--lra-spacing-xl)}
.kh-band--blue{background:var(--v-blue);border:1px solid var(--v-blue-line)}
.kh-band--grey{background:var(--v-grey);border:1px solid var(--lra-color-gray-300)}
.kh-band--teal{background:var(--v-teal);border:1px solid var(--v-teal-line)}
.kh-band--blue .kh-why{border-top-color:var(--v-blue-line)}
.kh-band--blue .kh-why__row{border-bottom-color:var(--v-blue-line)}
.kh-band--grey .kh-steps,.kh-band--grey .kh-steps li{border-color:var(--lra-color-gray-300)}
/* cards inside a band stay white so the band reads as a container */
.kh-band .kh-fig,.kh-band .kh-note{background:var(--lra-color-white)}
.kh-band--grey .kh-note--soft{background:var(--lra-color-white)}
/* callouts: a coloured top rule and tag per kind */
.kh-note--rule{border-top:3px solid var(--lra-color-primary);background:var(--lra-color-white)}
.kh-note--rule .kh-note__tag{color:var(--lra-color-primary)}
.kh-note--caution{border-top:3px solid var(--lra-color-warning);background:var(--v-amber);border-color:var(--v-amber-line)}
.kh-note--caution .kh-note__tag{color:var(--v-amber-ink)}
.kh-note--soft{border-top:3px solid var(--lra-color-gray-400)}
.kh-note--status{border-top:3px solid var(--lra-color-gray-600);background:var(--lra-color-gray-100)}
.kh-note--status .kh-note__tag{color:var(--lra-color-gray-600)}
.kh-note__tag::after{background:currentColor;opacity:.28}
.kh-fig{border-top:3px solid var(--lra-color-teal)}
/* the reviewer is the load-bearing claim of the passport, so it gets the one
   hover state on the page: paper tint, gold hairline, a 2px lift */
.kh-rev:hover{background:var(--v-amber);box-shadow:0 0 0 1px var(--v-amber-line),0 10px 24px rgba(13,48,104,.10);transform:translateY(-2px)}
.kh-rev:hover .kh-rev__av{box-shadow:0 0 0 3px var(--lra-color-white),0 0 0 4px #E0C88A}
.kh-rev:hover .kh-rev__li{background:var(--lra-color-linkedin);color:var(--lra-color-white)}
.kh-rev:focus-visible{background:var(--v-amber)}
.kh-rev--pending{cursor:default}
.kh-rev--pending:hover{background:transparent;box-shadow:none;transform:none}
@media (prefers-reduced-motion:reduce){.kh-rev{transition:none}.kh-rev:hover{transform:none}}
/* tables: banded header, and colour used to teach — old vs new, risk vs fix */
.kh-tbl th{padding:10px 12px;background:var(--lra-color-gray-100);color:var(--lra-color-primary)}
.kh-tbl td{padding:13px 12px}
.kh-tbl th:last-child,.kh-tbl td:last-child{padding-inline-end:12px}
.kh-tbl--evidence tbody tr:nth-child(even) td{background:#FAFBFC}
.kh-tbl--map td:first-child{background:var(--v-grey);color:var(--lra-color-gray-700)}
.kh-tbl--map td:first-child b{color:var(--lra-color-gray-700)}
.kh-tbl--map td:nth-child(2){background:var(--v-teal)}
.kh-tbl--map th:nth-child(2){background:#E3F0F2}
.kh-tbl--risk td:nth-child(2){background:var(--v-amber)}
.kh-tbl--risk td:last-child{background:var(--v-teal)}
/* required / not required, myth / reality: same two-colour grammar */
.kh-split--taught .kh-split__col{background:var(--v-teal)}
.kh-split--taught .kh-split__col--opt{background:var(--v-grey)}
.kh-band--teal .kh-check li::before{border-color:var(--lra-color-teal);background:var(--lra-color-white)}
/* self-check closes the read on navy, mirroring the answer card that opened it */
.kh-selfc{background:var(--lra-color-primary)}
.kh-selfc li{color:var(--lra-color-white)}
.kh-selfc li::before{color:var(--lra-color-accent-light)}
/* relation type gets a colour, not just a word */
.kh-rel__tag{display:flex;align-items:center;gap:7px}
.kh-rel__tag::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.kh-rel__tag--direct{color:var(--lra-color-teal)}
.kh-rel__tag--historical{color:var(--lra-color-gray-500)}
.kh-rel__tag--supporting{color:var(--lra-color-accent-dark)}
.kh-rel__tag--interdependency{color:var(--lra-color-primary)}
.kh-rel__tag--implementation{color:var(--lra-color-primary-light)}
.kh-rel__tag--comparison{color:var(--lra-color-primary-light)}
/* course bridge is the one CTA on the page, so it takes the strongest fill */
.kh-bridge{background:var(--lra-color-primary)}
.kh-page .kh-bridge h3{color:var(--lra-color-white)}
.kh-bridge p{color:rgba(255,255,255,.82)}
.kh-bridge .kh-btn{background:var(--lra-color-accent);border-color:var(--lra-color-accent);color:var(--lra-color-primary)}
.kh-bridge .kh-btn:hover{background:var(--lra-color-white);border-color:var(--lra-color-white);color:var(--lra-color-primary)}
/* rail boxes echo the same coding */
.kh-rail__box:nth-child(1){border-top-color:var(--lra-color-primary)}
.kh-rail__box:nth-child(2){border-top-color:var(--lra-color-teal)}
.kh-rail__box:nth-child(3){border-top-color:var(--lra-color-accent)}

/* ===== LAYER 3 — blocks the handoff does not cover =======================
   The bundle designs the article. These three exist on the live page and had
   to be drawn in the same grammar rather than left in the old preview styles:
   FAQ (reference family, grey), the Ask panel and the worksheet download
   (both "do this next", so they take the navy/accent treatment the answer card
   and the bridge already use). Nothing here invents a new colour.
   ======================================================================== */
/* Child lists on a pillar page — articles, FAQ cards and expert notes under
   the pillar that owns them. The handoff designs the article, not its parent;
   this is the same row grammar as `.kh-rel__row` so the two read as one tier. */
.kh-list{margin-top:var(--lra-spacing-lg);border-top:1px solid var(--lra-color-gray-300)}
.kh-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--lra-spacing-lg);align-items:baseline;padding-block:var(--lra-spacing-md);border-bottom:1px solid var(--lra-color-gray-200);text-decoration:none}
.kh-list a:hover{background:var(--lra-color-gray-100)}
.kh-list b{display:block;font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.35}
.kh-list p{margin-top:5px;font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-700)}
.kh-list em{font-style:normal;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--lra-color-gray-600);white-space:nowrap}
.kh-list__empty{margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-base);color:var(--lra-color-gray-600)}
@media (max-width:776px){.kh-list a{grid-template-columns:minmax(0,1fr);gap:6px}}

/* FAQ — collapsed, but the answers stay in the DOM because the page's
   FAQPage structured data declares them. */
.kh-faq{margin-top:var(--lra-spacing-lg);border-top:1px solid var(--lra-color-gray-300)}
.kh-faq__i{border-bottom:1px solid var(--lra-color-gray-200)}
.kh-faq__i summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:var(--lra-spacing-md);padding-block:var(--lra-spacing-md);font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.35}
.kh-faq__i summary::-webkit-details-marker{display:none}
.kh-faq__i summary::after{content:"+";flex:none;font-family:var(--lra-font-primary);font-size:var(--lra-font-size-lg);font-weight:var(--lra-font-weight-regular);color:var(--lra-color-teal)}
.kh-faq__i[open] summary::after{content:"\2013"}
.kh-faq__i summary:hover{color:var(--lra-color-teal)}
.kh-faq__i p{padding-bottom:var(--lra-spacing-md);font-size:var(--lra-font-size-base);line-height:1.65;color:var(--lra-color-gray-800);max-width:72ch}

/* Worksheet download — a quiet sibling of the bridge, not a second CTA
   shouting over it, so it takes the grey band rather than the navy fill. */
.kh-take{margin-top:var(--lra-spacing-lg);background:var(--v-grey);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-lg);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--lra-spacing-lg)}
.kh-take p{margin-top:6px;font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-700);max-width:52ch}
.kh-take .kh-btn{background:var(--lra-color-white);color:var(--lra-color-primary)}
.kh-take .kh-btn:hover{background:var(--lra-color-primary);color:var(--lra-color-white)}

/* Ask panel — navy, because it belongs to the same "next step" family as the
   answer card that opened the page and the bridge that closes it. */
.kh-ask{margin-top:var(--lra-spacing-3xl);background:var(--lra-color-primary);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-xl)}
.kh-ask__badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--lra-border-radius-lg);background:var(--lra-color-accent);color:var(--lra-color-primary);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase}
.kh-ask__head{display:flex;align-items:flex-start;gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-md)}
.kh-ask__head img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--lra-color-primary-light)}
.kh-page .kh-ask h2{font-size:var(--lra-font-size-xl);color:var(--lra-color-white)}
.kh-ask__sub{margin-top:6px;font-size:var(--lra-font-size-base);line-height:1.6;color:rgba(255,255,255,.82);max-width:60ch}
.kh-ask__chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lra-spacing-sm);margin-top:var(--lra-spacing-lg)}
.kh-ask__try{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.kh-ask__chip{padding:7px 13px;border:1px solid rgba(255,255,255,.24);border-radius:var(--lra-border-radius-lg);background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);cursor:pointer;transition:var(--lra-transition-fast)}
.kh-ask__chip:hover{background:rgba(255,255,255,.15);border-color:var(--lra-color-accent)}
.kh-ask__thread{display:grid;gap:12px;margin-top:var(--lra-spacing-lg);max-width:640px}
.kh-ask__thread[hidden]{display:none}
.kh-ask__b{font-size:var(--lra-font-size-base);line-height:1.65;word-break:break-word;overflow-wrap:anywhere}
.kh-ask__b--you{justify-self:end;max-width:90%;padding:10px 14px;border:1px solid rgba(255,255,255,.16);border-radius:10px 10px 3px 10px;background:rgba(255,255,255,.1);color:#fff}
.kh-ask__b--ai{justify-self:start;max-width:95%;padding:14px 16px;border-radius:10px 10px 10px 3px;background:var(--lra-color-white);color:var(--lra-color-gray-800)}
.kh-ask__b--ai p+p{margin-top:8px}
.kh-ask__b--ai strong{font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary)}
.kh-ask__b--ai ul,.kh-ask__b--ai ol{margin:8px 0 0;padding-inline-start:19px}
.kh-ask__b--err{color:#ffd7d7}
.kh-ask__wait{display:flex;align-items:center;gap:10px;color:var(--lra-color-gray-700);font-size:var(--lra-font-size-sm)}
.kh-ask__spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--lra-color-gray-300);border-top-color:var(--lra-color-teal);animation:kh-spin .8s linear infinite;flex:none}
@keyframes kh-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.kh-ask__spin{animation-duration:2.4s}}
.kh-ask__form{display:flex;align-items:flex-end;gap:10px;margin-top:var(--lra-spacing-lg);max-width:640px;padding:8px 8px 8px 16px;border:1px solid rgba(255,255,255,.18);border-radius:var(--lra-border-radius-sm);background:rgba(255,255,255,.06)}
.kh-ask__form textarea{flex:1;min-width:0;min-height:38px;max-height:150px;padding-block:8px;border:0;outline:0;resize:none;overflow-y:auto;background:transparent;font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);line-height:1.45;color:#fff}
.kh-ask__form textarea::placeholder{color:rgba(255,255,255,.45)}
.kh-ask__send{flex:none;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:var(--lra-border-radius-sm);background:var(--lra-color-accent);color:var(--lra-color-primary);font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);cursor:pointer}
.kh-ask__send:disabled{opacity:.5;cursor:default}
.kh-ask__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-md)}
.kh-ask__free{padding:5px 9px;border-radius:4px;background:rgba(98,181,225,.16);color:var(--lra-color-accent);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase}
.kh-ask__fine{font-size:var(--lra-font-size-xs);color:rgba(255,255,255,.55)}
.kh-ask__src{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px}
.kh-ask__src>span{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--lra-color-gray-600)}
.kh-ask__src a{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-medium);color:var(--lra-color-teal);text-decoration:none}

/* The Ask panel and the course bridge are the two blocks the handoff does not
   design, and the Disclosure Library card already has a better answer for
   both: warm gold on a navy gradient with a cyan glow, rather than the page's
   cool accent on a flat fill. Those exact values are reused here so the two
   tiers carry the same assistant and the same course bridge — the same reason
   the reviewer block is shared rather than re-invented per surface. */
.kh-page{--kh-gold:#e8c766; --kh-gold-ink:#0d2438; --kh-navy-2:#10243a;
         --kh-dim:#93aeb8; --kh-dim-2:#cfe0e5; --kh-dim-3:#8fa6b5; --kh-dim-4:#5f7681;
         --kh-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.kh-ask__badge,.kh-ask__try,.kh-ask__free,.kh-ask .kh-kicker,.kh-bridge .kh-kicker{font-family:var(--kh-mono)}
.kh-ask__badge{font-size:9.5px;letter-spacing:.08em}
.kh-ask__try,.kh-ask__free{font-size:10px}
.kh-ask .kh-kicker::before,.kh-bridge .kh-kicker::before{display:none}
.kh-bridge .kh-kicker{font-size:10px;letter-spacing:.14em}
.kh-ask,.kh-bridge{background:linear-gradient(135deg,var(--lra-color-primary) 0%,var(--kh-navy-2) 100%);position:relative;overflow:hidden}
.kh-ask::before,.kh-bridge::before{content:"";position:absolute;top:-40px;inset-inline-end:-30px;width:420px;height:280px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,144,167,.6),rgba(0,144,167,0) 70%)}
.kh-ask>*,.kh-bridge>*{position:relative}
.kh-ask__badge{background:var(--kh-gold);color:var(--kh-gold-ink)}
.kh-ask__sub{color:var(--kh-dim)}
.kh-ask__try{color:var(--kh-dim-4)}
.kh-ask__chip{color:var(--kh-dim-2);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.13)}
.kh-ask__chip:hover{background:rgba(255,255,255,.15);border-color:var(--kh-gold)}
.kh-ask__send{background:var(--kh-gold);color:var(--kh-gold-ink)}
.kh-ask__free{color:var(--kh-gold);background:rgba(232,199,102,.12)}
.kh-ask__fine{color:var(--kh-dim-3)}
.kh-ask .kh-kicker{color:var(--kh-gold);--v-fam:var(--kh-gold)}
.kh-bridge .kh-kicker{color:var(--kh-gold);--v-fam:var(--kh-gold)}
.kh-bridge p{color:var(--kh-dim-2)}
.kh-bridge__formats{margin-top:6px;font-size:var(--lra-font-size-xs);line-height:1.5;color:var(--kh-dim-3)}
.kh-bridge .kh-btn{height:44px;padding:0 20px;border-radius:var(--lra-border-radius-md);background:var(--kh-gold);border-color:var(--kh-gold);color:var(--kh-gold-ink)}
.kh-bridge .kh-btn:hover{background:#f2dc9a;border-color:#f2dc9a;color:var(--kh-gold-ink)}