/* ============================================================================
   KB Builder — canonical design tokens + shared primitives.
   Single source of truth for the metallic light/dark system (docs/07).
   Loaded FIRST via <link>; a page's own inline <style> may override specifics.
   ========================================================================== */

:root{
  color-scheme: dark;
  --bg:#0b0c10; --surface:#171a22; --surface-2:#20242f;
  --plate:linear-gradient(165deg,#1d212b 0%,#12141a 100%);
  --plate-2:linear-gradient(180deg,#262b36 0%,#191c24 100%);
  --text:#e9ebf2; --muted:#878ea2; --line:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.28);
  --accent:#7c8cff; --accent2:#a78bfa; --accentbg:rgba(124,140,255,.16); --steel:hsl(210,100%,70%);
  --ok:#4ade80; --good:#4ade80; --warn:#fbbf24; --risk:#fb7185; --gold:#f5c451; --radius:16px;
  --bevel: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.55);
  --plate-shadow: 0 1px 0 rgba(255,255,255,.04), 0 14px 36px rgba(0,0,0,.55);
  --elevate: var(--plate-shadow);
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#e9ebf1; --surface:#ffffff; --surface-2:#eef1f6;
  --plate:linear-gradient(165deg,#ffffff 0%,#dee2ea 100%);
  --plate-2:linear-gradient(180deg,#f6f8fb 0%,#e4e8f0 100%);
  --text:#1a1d27; --muted:#5b6275; --line:rgba(20,25,45,.22); --line-strong:rgba(20,25,45,.34);
  /* Semantic colours are darkened vs the dark theme so they clear WCAG AA (4.5:1)
     on every light ground they land on: #ffffff, #eef1f6, #e9ebf1 and the page
     gradient #eef0f5 -> #e1e4eb. Do not lighten these without re-checking. */
  --accent:#4052ee; --accent2:#733bf4; --accentbg:rgba(64,82,238,.14);
  --bevel: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(20,25,45,.10);
  --plate-shadow: 0 1px 0 rgba(255,255,255,.7), 0 10px 26px rgba(30,40,70,.13);
  --ok:#107635; --good:#107635; --warn:#9a5404; --risk:#c71a40; --gold:#846008;
}
:root[data-theme="light"] body{
  background:
    radial-gradient(900px 480px at 50% -12%, rgba(91,107,240,.10), transparent 60%),
    radial-gradient(700px 420px at 92% -4%, rgba(139,92,246,.06), transparent 55%),
    linear-gradient(180deg,#eef0f5,#e1e4eb); }
:root[data-theme="light"] .brand .mark{ background:linear-gradient(160deg,#d6dbe6,#aeb5c8);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -2px 3px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.18); color:#2a2e3a; }
:root[data-theme="light"] .brand h1{ background-image:linear-gradient(180deg,#2a2e3a,#12151d); }
:root[data-theme="light"] header{ box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 3px 14px rgba(30,40,70,.12); }
:root[data-theme="light"] pre{ background:#eef0f6; box-shadow: inset 0 2px 6px rgba(20,25,45,.10); }

* { box-sizing: border-box; }
html, body { height:100%; }
body { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; margin:0; line-height:1.5;
  color:var(--text); -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 480px at 50% -12%, rgba(124,140,255,.11), transparent 60%),
    radial-gradient(700px 420px at 92% -4%, rgba(167,139,250,.07), transparent 55%),
    linear-gradient(180deg,#0d0e13,#08090c);
  background-attachment:fixed; }

/* ---- shared primitives (metallic) ---- */
.pill { font-size:.75rem; padding:.32rem .68rem; border-radius:999px; border:1px solid var(--line); background:var(--plate-2); box-shadow:var(--bevel); }
.ok { color:var(--ok); } .bad { color:var(--risk); } .muted { color:var(--muted); }

button { font:inherit; cursor:pointer; border-radius:11px; border:1px solid var(--line); color:var(--text);
  background:var(--plate-2); padding:.52rem .95rem; font-weight:550;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 6px rgba(0,0,0,.45);
  transition: transform .12s, box-shadow .2s, border-color .2s, filter .2s; }
button:hover:not(:disabled) { filter:brightness(1.14); border-color:rgba(255,255,255,.2); }
button:active:not(:disabled) { transform:translateY(1px); box-shadow: inset 0 2px 5px rgba(0,0,0,.55); }
button.primary { color:#fff; border:1px solid var(--accent);
  background:linear-gradient(180deg,var(--accent2),var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 16px var(--accentbg); }
button:disabled { opacity:.5; cursor:not-allowed; }

/* ---- keyboard focus (a11y) ----
   One visible ring for every interactive element, everywhere. :focus-visible so
   it appears for keyboard/AT users without ringing on mouse clicks. */
:where(button, a[href], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Elements that are semantically buttons but styled as cards/rows. Strips the
   UA button chrome so a <button> renders exactly like the <div> it replaced. */
.btn-reset {
  appearance: none; -webkit-appearance: none;
  font: inherit; color: inherit; text-align: left;
  background: none; border: none; border-radius: 0;
  padding: 0; margin: 0; width: 100%; box-shadow: none;
}

/* ---- reduced motion ----
   Honour the OS setting: no idle loops, no long transitions, no confetti.
   JS also checks this query before firing celebrations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* metallic surface cards (shared) */
.plate { background:var(--plate); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--bevel), var(--plate-shadow); }

/* inline line icons */
.licon { width:1.15em; height:1.15em; display:inline-block; vertical-align:-0.22em; flex:none; }
.licon.spin { animation:licon-spin .9s linear infinite; }
@keyframes licon-spin { to { transform:rotate(360deg); } }
button .licon { vertical-align:-0.2em; margin-right:.05rem; }

.nav-badge { min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--accent); color:#fff;
  font-size:.7rem; font-weight:800; display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px var(--accentbg); }
.nav-badge.show { display:inline-flex; }

.tag { font-size:.66rem; padding:.12rem .45rem; border-radius:6px; background:var(--plate-2); border:1px solid var(--line); text-transform:capitalize; box-shadow:var(--bevel); }
.status-approved { color:var(--ok); font-weight:600; } .status-draft { color:var(--muted); }
.status-policy_missing { color:var(--warn); font-weight:600; } .status-disputed { color:var(--risk); font-weight:600; }
.risk-high, .risk-critical { color:var(--risk); font-weight:600; } .risk-medium { color:var(--warn); } .risk-low { color:var(--muted); }

/* ---- rendered markdown (assets/kb-markdown.js) — shared by every page ---- */
.metacard { display:flex; flex-wrap:wrap; gap:.4rem; padding:.8rem; border:1px solid var(--line); border-radius:12px; background: linear-gradient(180deg, var(--accentbg), transparent); margin-bottom:1.1rem; }
.mchip { font-size:.72rem; padding:.2rem .55rem; border-radius:999px; background: rgba(127,127,127,.1); border:1px solid var(--line); }
.mchip b { color: var(--accent); font-weight:700; margin-right:.25rem; text-transform:capitalize; }
.md { font-size:.92rem; line-height:1.65; }
.md h1 { font-size:1.5rem; margin:.2rem 0 .8rem; padding-bottom:.3rem; border-bottom:1px solid var(--line); }
.md h2 { font-size:1.15rem; margin:1.4rem 0 .5rem; } .md h3 { font-size:1rem; margin:1.1rem 0 .4rem; opacity:.9; }
.md p { margin:.6rem 0; } .md ul, .md ol { margin:.5rem 0; padding-left:1.4rem; } .md li { margin:.25rem 0; }
.md a { color: var(--accent); text-decoration:none; border-bottom:1px solid var(--accentbg); }
.md code { background: rgba(127,127,127,.15); padding:.1em .4em; border-radius:5px; font-size:.86em; }
.md pre.code { background: rgba(127,127,127,.12); padding:.9rem 1rem; border-radius:10px; overflow:auto; }
.md pre.code code { background:none; padding:0; }
.md blockquote { margin:.7rem 0; padding:.4rem 0 .4rem 1rem; border-left:3px solid var(--accent); opacity:.85; }
.md hr { border:none; border-top:1px solid var(--line); margin:1.2rem 0; }
.md table { border-collapse:collapse; width:100%; margin:.8rem 0; font-size:.86rem; display:block; overflow-x:auto; }
.md th, .md td { border:1px solid var(--line); padding:.45rem .6rem; text-align:left; }
.md th { background: rgba(127,127,127,.08); }
.mermaid-block { margin:1rem 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.mermaid-label { font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; padding:.4rem .8rem; background: var(--accentbg); color: var(--accent); font-weight:700; }
.mermaid-block pre { margin:0; border-radius:0; background: rgba(127,127,127,.06); font-size:.8rem; }
.mermaid-block .mermaid-svg { padding:1rem; display:flex; justify-content:center; background:var(--surface); }
.mermaid-block .mermaid-svg svg { max-width:100%; height:auto; }

/* milestone confetti (true-milestone celebrations only — docs/05) */
#kbConfetti { position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
#kbConfetti i { position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:kbfall linear forwards; }
@keyframes kbfall { to { transform:translateY(105vh) rotate(560deg); opacity:.9; } }

/* recent-activity feed row (social proof) */
.act-row { display:flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--muted); padding:.3rem 0; }
.act-row .licon { width:.95rem; height:.95rem; flex:none; }