/* ============================================================================
   Disclosure Card — LAYER 3, loaded after knowledge-card.css.
   London Reporting Academy
   ----------------------------------------------------------------------------
   Ported from design_handoff_knowledge_card/card-layer.css (LRA-2.zip), plus
   the card-specific families and bands the reference carried inline.

   Section ids stay ids here, unlike the article. On a card each block appears
   exactly once — it is a rendered payload, not a StreamField an editor can
   reorder — so the handoff's "promote to classes if it can repeat" rule does
   not bite.

   Tokens come from knowledge-card.css, which declares them on .kh-page. This
   file must load after it.
   ========================================================================== */

/* ── card layer ───────────────────────────────────────────────────────────
   Blocks that exist only on a Disclosure Card, in the same vocabulary as the
   article page: tokens for glue, colour only where it encodes a kind.       */
.kh-actions{display:flex;flex-wrap:wrap;gap:var(--lra-spacing-sm);margin-top:var(--lra-spacing-lg)}
.kh-actions .kh-btn{font-size:var(--lra-font-size-base);padding:8px 16px;line-height:24px;gap:8px}
.kh-actions button.kh-btn{font-family:var(--lra-font-primary)}
/* hero evidence covers — real reports where the disclosure appears */
.kh-covers{align-self:start;border-top:2px solid var(--lra-color-primary);padding-top:var(--lra-spacing-md)}
.kh-covers__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-covers__main{position:relative;display:block;margin-top:var(--lra-spacing-md);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);overflow:hidden;background:var(--lra-color-gray-100);text-decoration:none;transition:var(--lra-transition-base)}
.kh-covers__main img{display:block;width:100%;height:auto}
.kh-covers__main:hover{border-color:var(--lra-color-teal);box-shadow:0 8px 20px rgba(13,48,104,.12)}
.kh-covers__badge{position:absolute;top:8px;inset-inline-start:8px;font-size:10px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--lra-color-white);background:var(--lra-color-teal);border-radius:3px;padding:3px 7px}
.kh-covers__jump{display:block;padding:8px 10px;font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);background:var(--lra-color-white);border-top:1px solid var(--lra-color-gray-200)}
.kh-covers__cap{margin-top:6px;font-size:var(--lra-font-size-xs);color:var(--lra-color-gray-700)}
.kh-covers__list{margin-top:var(--lra-spacing-md);padding-top:var(--lra-spacing-sm);border-top:1px solid var(--lra-color-gray-300);display:grid;gap:8px}
.kh-covers__list>span{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-covers__list a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;text-decoration:none;font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-800);line-height:1.35}
.kh-covers__list a:hover{color:var(--lra-color-teal)}
.kh-covers__list img{width:34px;height:auto;border:1px solid var(--lra-color-gray-300);border-radius:2px;display:block}
.kh-covers__main{max-width:220px}
@media (max-width:1024px){
.kh-covers{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--lra-spacing-lg) var(--lra-spacing-xl);align-items:start}
.kh-covers__h{grid-column:1/-1}
.kh-covers__cap{grid-column:1;margin-top:6px}
.kh-covers__list{grid-column:2;grid-row:2/4;margin-top:0;padding-top:0;border-top:0}
}
@media (max-width:576px){
.kh-covers{grid-template-columns:minmax(0,1fr)}
.kh-covers__list{grid-column:1;grid-row:auto;padding-top:var(--lra-spacing-sm);border-top:1px solid var(--lra-color-gray-300)}
}
/* jump strip */
.kh-jump{background:var(--lra-color-primary);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-md) var(--lra-spacing-lg);display:flex;flex-wrap:wrap;align-items:center;gap:var(--lra-spacing-md)}
.kh-jump>span{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--lra-color-accent);max-width:130px;line-height:1.4}
.kh-jump__set{display:flex;flex-wrap:wrap;gap:var(--lra-spacing-sm);flex:1}
.kh-jump a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:var(--lra-border-radius-sm);background:rgba(255,255,255,.06);font-size:var(--lra-font-size-sm);color:var(--lra-color-white);text-decoration:none;cursor:pointer;transition:var(--lra-transition-fast)}
.kh-jump a:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:var(--lra-color-white)}
/* the count. The handoff styles a <b>, the reference markup ships a <span>;
   both are matched so the number reads the same either way — and the span form
   is what the motion script counts up from. */
.kh-jump b,.kh-jump a>span:first-child{font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-accent-light)}
/* checkbox cards + plain checklists */
.kh-chk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lra-spacing-sm);margin-top:var(--lra-spacing-md)}
.kh-chk label{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);padding:13px 15px;font-size:var(--lra-font-size-base);line-height:1.5;color:var(--lra-color-gray-800);cursor:pointer;transition:var(--lra-transition-fast)}
.kh-chk label:hover{border-color:var(--lra-color-teal)}
.kh-chk input[type=checkbox],.kh-chklist input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--lra-color-teal)}
.kh-chklist{display:grid;gap:10px;margin-top:var(--lra-spacing-md)}
.kh-chklist label{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;font-size:var(--lra-font-size-base);line-height:1.5;color:var(--lra-color-gray-800);cursor:pointer}
/* numbered steps, 2 columns */
.kh-numsteps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lra-spacing-lg) var(--lra-spacing-xl);margin-top:var(--lra-spacing-md);counter-reset:n}
.kh-numsteps>div{counter-increment:n;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}
.kh-numsteps>div::before{content:counter(n);width:30px;height:30px;border-radius:50%;background:var(--lra-color-primary);color:var(--lra-color-white);display:grid;place-items:center;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold)}
/* the business question */
.kh-q{margin-top:var(--lra-spacing-md);background:var(--v-teal,#F0F7F8);border:1px solid var(--v-teal-line,#C8E2E6);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-md) var(--lra-spacing-lg);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);line-height:1.4;color:var(--lra-color-primary)}
/* disclosure-text / template disclosure blocks */
.kh-det{display:grid;gap:8px;margin-top:var(--lra-spacing-md)}
.kh-det details{border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);overflow:hidden;background:var(--lra-color-white)}
.kh-det summary{padding:12px 16px;cursor:pointer;font-size:var(--lra-font-size-base);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.kh-det summary::-webkit-details-marker{display:none}
.kh-det summary::after{content:"+";font-size:var(--lra-font-size-lg);font-weight:var(--lra-font-weight-light);color:var(--lra-color-gray-600)}
.kh-det details[open] summary::after{content:"−"}
.kh-det summary:hover{color:var(--lra-color-teal)}
.kh-det pre{white-space:pre-wrap;margin:0;padding:var(--lra-spacing-md);border-top:1px solid var(--lra-color-gray-200);background:var(--lra-color-gray-100);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);line-height:1.65;color:var(--lra-color-gray-800)}
.kh-det details>div{padding:0 var(--lra-spacing-md) var(--lra-spacing-md);font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}
.kh-det details>div p{margin-top:8px}
.kh-det details>div b{color:var(--lra-color-primary)}
.kh-subhead{margin-top:var(--lra-spacing-xl);font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--lra-color-gray-700)}
/* note cards grid (method / context / index entry) */
.kh-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-md)}
.kh-notes>div{background:var(--lra-color-white);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-md) var(--lra-spacing-lg)}
.kh-notes__k{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);margin-bottom:9px}
.kh-notes p{font-size:var(--lra-font-size-base);line-height:1.65;color:var(--lra-color-gray-800)}
.kh-notes code{display:block;margin-top:8px;padding:10px 12px;background:var(--lra-color-gray-100);border:1px solid var(--lra-color-gray-200);border-radius:3px;font-family:var(--lra-font-primary);font-size:var(--lra-font-size-sm);line-height:1.5;color:var(--lra-color-primary)}
/* download centre */
.kh-dl__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;gap:var(--lra-spacing-md)}
.kh-dl__access{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);white-space:nowrap}
.kh-dl__access::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lra-color-teal)}
.kh-dl{display:grid;gap:8px;margin-top:var(--lra-spacing-lg)}
.kh-dl a{display:grid;grid-template-columns:26px 46px minmax(0,1fr) auto;gap:var(--lra-spacing-md);align-items:center;padding:14px var(--lra-spacing-md);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);text-decoration:none;background:var(--lra-color-white);transition:var(--lra-transition-fast)}
.kh-dl a:hover{border-color:var(--lra-color-teal);background:var(--lra-color-gray-100)}
.kh-dl a.is-primary{border-color:var(--lra-color-primary)}
.kh-dl__no{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-gray-400)}
.kh-dl__badge{font-size:10px;font-weight:var(--lra-font-weight-bold);letter-spacing:.06em;text-align:center;padding:5px 0;border-radius:3px;background:var(--lra-color-gray-200);color:var(--lra-color-gray-700)}
.kh-dl__badge.is-pdf{background:rgba(220,53,69,.1);color:#a52834}
.kh-dl__badge.is-xls{background:rgba(0,144,167,.12);color:#0b6f80}
.kh-dl__t{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.3}
.kh-dl__d{display:block;margin-top:3px;font-size:var(--lra-font-size-sm);line-height:1.45;color:var(--lra-color-gray-700)}
.kh-dl__cta{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-teal);white-space:nowrap}
/* claim / risk / evidence rows reuse .kh-tbl; gap callouts */
.kh-gaps{display:grid;gap:8px;margin-top:var(--lra-spacing-md)}
.kh-gaps>div{border:1px solid var(--v-amber-line,#EFE2C2);background:var(--v-amber,#FFFCF2);border-radius:var(--lra-border-radius-sm);padding:13px var(--lra-spacing-md);font-size:var(--lra-font-size-base);line-height:1.55;color:var(--lra-color-gray-800)}
.kh-gaps 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);margin-bottom:4px}
.kh-gaps--judge>div{border-color:var(--v-blue-line,#D5E5F4);background:var(--v-blue,#F2F7FC)}
.kh-more{display:inline-block;margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-teal);text-decoration:none;cursor:pointer}
/* illustrative examples */
.kh-ex{display:grid;gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-md)}
.kh-ex>div{border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-lg)}
.kh-ex__tag{display:inline-block;font-size:10px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:var(--lra-color-gray-700);background:var(--lra-color-gray-100);border-radius:3px;padding:5px 9px;margin-bottom:12px}
.kh-ex p{font-size:var(--lra-font-size-md);line-height:1.68;color:var(--lra-color-gray-800)}
.kh-ex__why{margin-top:8px;font-size:var(--lra-font-size-sm)!important;line-height:1.55;color:var(--lra-color-gray-700)!important;font-style:italic}
/* company report rows */
.kh-reports{display:grid;gap:var(--lra-spacing-lg);margin-top:var(--lra-spacing-md)}
.kh-report{display:grid;grid-template-columns:78px minmax(0,1fr);gap:var(--lra-spacing-md);padding-top:var(--lra-spacing-md);border-top:1px solid var(--lra-color-gray-200)}
.kh-reports>.kh-report:first-child{border-top:0;padding-top:0}
.kh-report img{width:78px;height:auto;border:1px solid var(--lra-color-gray-300);border-radius:3px;display:block}
.kh-report__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--lra-spacing-md)}
.kh-report__n{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-report__m{margin-top:2px;font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
.kh-report__s{margin-top:8px;font-size:var(--lra-font-size-base);line-height:1.6;color:var(--lra-color-gray-800)}
.kh-report a.kh-report__src{font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-teal);text-decoration:none;white-space:nowrap}
/* company reports — printed-report treatment: paper ground, warm hairlines,
   covers framed like book/report covers with a spine shadow */
#company{background:#FFFDF7;border:1px solid #E5D7BD;border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-lg) var(--lra-spacing-lg) var(--lra-spacing-xl)}
#company .kh-report{border-top-color:#EDE0C8}
#company .kh-lead,#company .kh-report__m{color:#6B6250}
#company .kh-report__s{color:#3E3A31}
.kh-report__fig{position:relative;display:block;width:82px;aspect-ratio:1/1.414;background:#FFFDF7;border:1px solid #DCCDAF;border-radius:2px;box-shadow:2px 3px 8px rgba(76,60,30,.16);overflow:hidden}
.kh-report__fig img{width:100%;height:100%;object-fit:cover;display:block;border:0;border-radius:0}
.kh-report__fig::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:5px;background:linear-gradient(90deg,rgba(60,45,20,.22),rgba(60,45,20,0));pointer-events:none}
.kh-report{grid-template-columns:82px minmax(0,1fr)}
.kh-covers__main{border-color:#DCCDAF;background:#FFFDF7;box-shadow:2px 3px 8px rgba(76,60,30,.16)}
.kh-covers__main::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:0;width:5px;background:linear-gradient(90deg,rgba(60,45,20,.22),rgba(60,45,20,0));pointer-events:none;z-index:1}
.kh-covers__list img{border-color:#DCCDAF;box-shadow:1px 2px 4px rgba(76,60,30,.14)}
/* AI assistant panel — matches the live LRA AI block: navy gradient, teal glow,
   gold badge/send, pill chips. Gold #e8c766 is the site's AI/CTA accent. */
.kh-ask{--v-gold:#e8c766;position:relative;overflow:hidden;background:linear-gradient(135deg,#0D3068 0%,#10243a 100%);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-xl)}
.kh-ask::after{content:"";position:absolute;top:-40px;inset-inline-end:-30px;width:420px;height:280px;background:radial-gradient(closest-side,rgba(0,144,167,.55),rgba(0,144,167,0) 70%);pointer-events:none}
.kh-ask>*{position:relative;z-index:1}
.kh-ask__badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.09em;text-transform:uppercase;color:#0d2438;background:var(--v-gold);border-radius:20px;padding:6px 12px}
.kh-ask__head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;margin-top:var(--lra-spacing-lg)}
.kh-ask__head img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#12456a}
.kh-ask__head h2{font-size:var(--lra-font-size-lg);line-height:1.25;letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-white)}
.kh-ask__head p{margin-top:5px;font-size:var(--lra-font-size-base);line-height:1.6;color:#cfe0e5}
.kh-ask__chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:var(--lra-spacing-lg)}
.kh-ask__chips>span:first-child{font-size:11px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-inline-end:2px}
.kh-ask__chips .dc-ask-chip{font-size:var(--lra-font-size-sm);color:#dbe8ec;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 15px;cursor:pointer;transition:var(--lra-transition-fast)}
.kh-ask__chips .dc-ask-chip:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);color:var(--lra-color-white)}
#dc-ask-thread{display:none;flex-direction:column;gap:12px;margin-top:var(--lra-spacing-md)}
#dc-ask-register{display:none;margin-top:12px}
#dc-ask-register button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border:0;border-radius:9px;background:var(--v-gold);color:#0d2438;font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);font-weight:var(--lra-font-weight-semibold);cursor:pointer}
.kh-ask form{display:flex;align-items:flex-end;gap:10px;margin-top:var(--lra-spacing-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:8px 8px 8px 16px}
.kh-ask textarea{flex:1;background:none;border:0;resize:none;color:var(--lra-color-white);font-family:var(--lra-font-primary);font-size:var(--lra-font-size-md);line-height:1.5;padding:12px 0;outline:none}
.kh-ask textarea::placeholder{color:rgba(255,255,255,.45)}
.kh-ask button[type=submit]{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:9px;background:var(--v-gold);color:#0d2438;font-size:var(--lra-font-size-lg);font-weight:var(--lra-font-weight-semibold);cursor:pointer;transition:var(--lra-transition-fast)}
.kh-ask button[type=submit]:hover{background:#f0d68a}
.kh-ask__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:var(--lra-spacing-md)}
.kh-ask__free{font-size:10px;font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--v-gold);background:rgba(232,199,102,.14);border-radius:6px;padding:6px 10px}
.kh-ask__join{background:none;border:0;padding:0;cursor:pointer;font-family:var(--lra-font-primary);font-size:var(--lra-font-size-base);color:rgba(255,255,255,.66);text-align:start}
.kh-ask__join span{color:var(--v-gold);text-decoration:underline;text-underline-offset:2px}
/* faq */
.kh-faq{margin-top:var(--lra-spacing-md);border-top:1px solid var(--lra-color-gray-300)}
.kh-faq>div{border-bottom:1px solid var(--lra-color-gray-200)}
.kh-faq a[data-toggle]{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;cursor:pointer;text-decoration:none}
.kh-faq a[data-toggle] span:first-child{font-size:var(--lra-font-size-md);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);line-height:1.4}
.kh-faq a[data-toggle] span:last-child{flex:none;font-size:var(--lra-font-size-lg);color:var(--lra-color-gray-600)}
.kh-faq .dc-cond{padding-bottom:var(--lra-spacing-md);font-size:var(--lra-font-size-base);line-height:1.7;color:var(--lra-color-gray-800)}
.kh-faq__more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px var(--lra-spacing-lg);margin-top:var(--lra-spacing-md)}
.kh-faq__more a{font-size:var(--lra-font-size-base);line-height:1.5;color:var(--lra-color-primary);text-decoration:none;cursor:pointer}
.kh-faq__more a:hover{color:var(--lra-color-teal);text-decoration:underline}
/* framework reference head + library stats */
.kh-fwref{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;gap:var(--lra-spacing-md);margin-top:var(--lra-spacing-md);background:var(--v-teal,#F0F7F8);border:1px solid var(--v-teal-line,#C8E2E6);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-md) var(--lra-spacing-lg)}
.kh-fwref__code{font-family:var(--lra-font-secondary);font-size:var(--lra-font-size-2xl);font-weight:var(--lra-font-weight-semibold);letter-spacing:var(--lra-letter-spacing-base);color:var(--lra-color-primary);line-height:1.1}
.kh-fwref__t{margin-top:4px;font-size:var(--lra-font-size-base);line-height:1.5;color:var(--lra-color-gray-800)}
.kh-libstats{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--lra-spacing-lg);margin-top:var(--lra-spacing-3xl);padding:14px var(--lra-spacing-md);background:var(--lra-color-gray-100);border-radius:var(--lra-border-radius-sm);font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700)}
.kh-libstats>span:first-child{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.1em;text-transform:uppercase;color:var(--lra-color-gray-600)}
.kh-libstats strong{color:var(--lra-color-primary)}
/* rail: at-a-glance link + actions list */
.kh-rail__acts{display:grid;gap:9px;margin-top:var(--lra-spacing-md)}
.kh-rail__acts a{font-size:var(--lra-font-size-sm);color:var(--lra-color-gray-700);text-decoration:none;cursor:pointer;line-height:1.4}
.kh-rail__acts a:hover{color:var(--lra-color-teal)}
@media (max-width:1024px){.kh-covers{border-top-color:var(--lra-color-gray-300)}}
@media (max-width:776px){
.kh-chk,.kh-numsteps,.kh-notes,.kh-faq__more{grid-template-columns:minmax(0,1fr)}
.kh-report{grid-template-columns:minmax(0,1fr)}
.kh-jump>span{max-width:none}
}

/* v3 fixes — quiz + sub-element panels + contrast + specificity */
#quiz .kh-ex>div>div:first-of-type{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin-top:var(--lra-spacing-md);padding-top:var(--lra-spacing-md);border-top:1px solid var(--lra-color-gray-200)}
#quiz .kh-ex>div>div:first-of-type>span:first-child{font-size:var(--lra-font-size-xs);font-weight:var(--lra-font-weight-semibold);letter-spacing:.06em;color:var(--lra-color-teal);padding-top:3px}
#quiz .kh-ex>div>div:first-of-type>span:last-child{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);line-height:1.45;color:var(--lra-color-primary)}
#quiz a[data-toggle]{display:inline-block;margin-top:var(--lra-spacing-md);font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);cursor:pointer;text-decoration:none}
#quiz a[data-toggle]:hover{color:var(--lra-color-teal)}
#quiz .dc-cond>div{margin-top:var(--lra-spacing-sm);padding-top:var(--lra-spacing-sm);border-top:1px solid var(--lra-color-gray-200);font-size:var(--lra-font-size-base);line-height:1.65;color:var(--lra-color-gray-800)}
.kh-det>a[data-toggle]{display:inline-block;font-size:var(--lra-font-size-sm);font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary);cursor:pointer;text-decoration:none}
.kh-det>a[data-toggle]:hover{color:var(--lra-color-teal)}
.kh-det .dc-cond>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px var(--lra-spacing-lg);margin-top:var(--lra-spacing-md);background:var(--v-grey);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-sm);padding:var(--lra-spacing-md)}
.kh-det .dc-cond>div>span{display:block;font-size:var(--lra-font-size-base);line-height:1.5;color:var(--lra-color-gray-800)}
@media (max-width:776px){.kh-det .dc-cond>div{grid-template-columns:minmax(0,1fr)}}
/* small-type contrast: hue stays on glyphs, text goes dark */
.kh-dl__no{color:var(--lra-color-gray-700)}
.kh-covers__list>span,.kh-libstats>span:first-child{color:var(--lra-color-gray-700)}
.kh-dl__cta,.kh-more,.kh-report a.kh-report__src,.kh-dl__access{color:var(--lra-color-primary)}
.kh-dl a:hover .kh-dl__cta,.kh-more:hover,.kh-report a.kh-report__src:hover{color:var(--lra-color-teal)}
p.kh-notes__k{font-size:var(--lra-font-size-xs);color:var(--lra-color-teal);line-height:1}

/* card-specific colour coding, same grammar as the article */
#focus .kh-kicker{--v-fam:var(--lra-color-accent)}
#start .kh-kicker,#preparation .kh-kicker,#request .kh-kicker,#draft .kh-kicker{--v-fam:var(--lra-color-accent-dark)}
#assurance .kh-kicker,#pitfalls .kh-kicker{--v-fam:var(--lra-color-primary)}
#examples .kh-kicker,#company .kh-kicker,#quiz .kh-kicker{--v-fam:var(--lra-color-teal)}
#downloads .kh-kicker,#references .kh-kicker,#faq .kh-kicker{--v-fam:var(--lra-color-gray-600)}
#start{background:var(--v-blue);border:1px solid var(--v-blue-line);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-lg) var(--lra-spacing-lg) var(--lra-spacing-xl)}
#request{background:var(--v-grey);border:1px solid var(--lra-color-gray-300);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-lg) var(--lra-spacing-lg) var(--lra-spacing-xl)}
#draft,#quiz{background:var(--v-teal);border:1px solid var(--v-teal-line);border-radius:var(--lra-border-radius-md);padding:var(--lra-spacing-lg) var(--lra-spacing-lg) var(--lra-spacing-xl)}
#request .kh-det details,#draft .kh-notes>div,#quiz .kh-ex>div{background:var(--lra-color-white)}
.kh-hero .kh-jump{grid-column:1/-1;margin-top:calc(-1 * var(--lra-spacing-lg))}

/* ── added by the port ────────────────────────────────────────────────────
   Everything above came from the handoff. These rules exist because the
   handoff's reference markup carries them as inline styles, or because it
   assumes design-system classes this repo does not build. No new colours —
   every value is a token already declared on .kh-page.                     */

/* The handoff's hero controls are `btn btn--primary/--outline btn--sm`. The
   served app.css has a bare `.btn` and no `--lra-*`, so the page uses .kh-btn
   from layer 1 and this outline variant rather than shipping classes that
   would render unstyled. */
/* The `hidden` attribute is only a UA `display:none`, so any block here that
   declares its own display would ignore it. The accordions and the assistant
   both toggle `hidden` from JS — `.kh-ask__chips` is display:flex and is
   hidden the moment a question is asked. The old card stylesheet carried this
   guard; it has to survive the port. */
.kh-page [hidden]{display:none!important}

.kh-btn--outline{background:var(--lra-color-white);color:var(--lra-color-primary)}
.kh-btn--outline:hover{background:var(--lra-color-primary);border-color:var(--lra-color-primary);color:var(--lra-color-white)}

/* `.kh-skip` moved up into knowledge-card.css: the guide tier needs the same
   utility, and the copy here would only have fixed the card. */

/* Scroll-spy marks the current section on the rail's contents list. */
.kh-toc a.is-active{color:var(--lra-color-primary);font-weight:var(--lra-font-weight-semibold)}
.kh-toc a.is-active::before{color:var(--lra-color-teal)}

/* Blocks the reference carries as inline style. */
.kh-answer__fine{font-size:var(--lra-font-size-sm);border:0;padding-top:0;margin-top:var(--lra-spacing-sm);color:rgba(255,255,255,.62)}
.kh-prose--pad{margin-top:var(--lra-spacing-md)}
.kh-page h2.kh-h2--rule{margin-top:var(--lra-spacing-xl);padding-top:var(--lra-spacing-lg);border-top:1px solid var(--lra-color-gray-200)}
.kh-morerow{display:flex;flex-wrap:wrap;gap:var(--lra-spacing-lg);margin-top:var(--lra-spacing-lg)}
.kh-morerow .kh-more{margin-top:0}
.kh-split__body p+p{margin-top:var(--lra-spacing-sm)}
.kh-split__body p>span{font-weight:var(--lra-font-weight-semibold);color:var(--lra-color-primary)}

/* Layer 1 already draws a glow on .kh-ask::before; this layer draws its own on
   ::after, so the ::before is switched off rather than stacked. */
.kh-ask::before{content:none}