/* suite.css — the shared design-system layer for the FHE System Design Toolkit.
 * Single source of truth for the brand colour tokens, the base reset, the
 * accessibility skip-link / focus ring, and the shared dark topbar chrome.
 *
 * Loaded on every page IMMEDIATELY AFTER vendor/fonts.css and BEFORE the page's
 * own inline <style>, so any page that genuinely needs a different value can
 * still override it inline (same selector, later in source = wins). That makes
 * adoption non-destructive: a page links this file and removes only the rules
 * that are identical to the canonical ones below; anything bespoke stays inline.
 *
 * House style: navy #1e3a5f / deep-navy #0f1e31 / cyan #3bb3d9 / slate #334155;
 * Inter + JetBrains Mono; UK spelling; no emoji in UI.
 * Plain CSS, no build step. Inlined automatically into standalone.html.
 */

/* ---- Brand + semantic tokens (canonical light theme) -------------------- */
:root{
  /* brand */
  --navy:#1e3a5f; --navy-900:#0f1e31; --cyan:#3bb3d9; --cyan-700:#1d6580;
  /* ink + surfaces */
  --ink:#0f172a; --text:#334155; --muted:#3e4d62; --faint:#5b6776;
  --bg:#f4f7fb; --bg-2:#eef3f9; --card:#fff; --line:#e2e8f0; --line-2:#cbd5e1;
  /* heading / emphasis TEXT colour. Navy in light, light ink in dark — this is the
     de-overload of --navy: --navy stays a brand BACKGROUND in both themes, while
     headings that used to be color:var(--navy) move to --head so they flip. */
  --head:#1e3a5f;
  /* semantic — WCAG-AA darkened foregrounds + soft tints (consolidated from
     the crosswalk/reference pages so every tool can use one palette) */
  --ok:#0d5c2f; --ok-bg:rgba(34,197,94,0.12);
  --approx:#7a2f08; --approx-bg:rgba(245,158,11,0.14);
  --none:#b91c1c; --none-bg:rgba(239,68,68,0.10);
  --amber:#b45309; --amber-bg:#fffbeb; --amber-line:#fde68a;
  --green:#15803d; --green-bg:#f0fdf4; --red:#b91c1c; --red-bg:#fef2f2;
}

/* ---- Dark theme tokens (flipped when html[data-theme="dark"]) ----------------
   Reuses the proven process-editor dark palette (global/process.css ~line 18) so
   we ship colours that have been used in production, not invented for this round.
   Brand tokens (--navy/--navy-900/--cyan/--cyan-700) are deliberately UNCHANGED:
   they are brand identity and stay the same in both themes (the dark topbar
   already uses --navy-900 against #fff text, which works in both modes).
   Only surface + ink + semantic-tint tokens flip. ----------------------------- */
html[data-theme="dark"]{
  /* surfaces + ink */
  --ink:#eef4fb; --text:#c0d0e4; --muted:#8aa2c0; --faint:#5f779a;
  --bg:#0a1422; --bg-2:#0f1e31; --card:#10203a; --line:#1e3454; --line-2:#274064;
  /* headings flip to a bright tint of the brand cyan so they read on dark surfaces */
  --head:#9fd4ec;
  /* semantic — keep AA-darkened foregrounds, but flip the soft tints to
     darker translucent overlays that work over the dark surface (the
     coloured fg+bg pairs were validated for contrast in the process editor) */
  --ok-bg:rgba(34,197,94,0.16);
  --approx-bg:rgba(245,158,11,0.18);
  --none-bg:rgba(239,68,68,0.14);
  --amber-bg:rgba(245,158,11,0.14); --amber-line:rgba(245,158,11,0.35);
  --green-bg:rgba(34,197,94,0.14); --red-bg:rgba(239,68,68,0.12);
  /* lift coloured foregrounds slightly so they read on the dark surface */
  --ok:#5fd28a; --approx:#f3b561; --none:#f87171;
  --amber:#fbbf24; --green:#34d399; --red:#f87171;
}

/* ---- Base reset (universal across the suite) ---------------------------- */
*{box-sizing:border-box;}
html,body{margin:0;}

/* ---- Shared layout container ------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}

/* ---- Dark topbar chrome (the .top family — shared by 21 pages) ---------- */
.top{background:var(--navy-900);color:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(255,255,255,.04);}
.top .wrap{display:flex;align-items:center;gap:12px;padding:14px 28px;flex-wrap:wrap;}
.top img{height:30px;width:30px;border-radius:7px;}
.top .bn{font-weight:700;font-size:15px;letter-spacing:-.01em;}
.top .bn small{display:block;font-weight:500;font-size:11px;color:#8badd0;letter-spacing:0;}
.top .sp{flex:1;}
.top a.nav{color:#cfe0f2;text-decoration:none;font-size:13px;font-weight:600;padding:7px 12px;border-radius:8px;border:1px solid rgba(181,201,225,.2);display:inline-flex;align-items:center;}
.top a.nav:hover{background:rgba(255,255,255,.09);color:#fff;}
.top a.nav[aria-current="page"]{background:var(--cyan);border-color:var(--cyan);color:#06202c;}

/* ---- Accessibility: skip link + visible keyboard focus (identical on all
        26 pages — byte-for-byte the block each page used to inline) -------- */
.fhe-skip{position:absolute;left:8px;top:-48px;z-index:2000;background:#1e3a5f;color:#fff;padding:10px 16px;border-radius:0 0 8px 8px;font:600 14px/1 'Inter',system-ui,sans-serif;text-decoration:none;transition:top .15s ease;}
.fhe-skip:focus{top:0;}
:focus-visible{outline:3px solid #3bb3d9;outline-offset:2px;}

/* ---- Theme picker (Light / Dark / Auto) — used inside the dark .top topbar
        but styled neutrally so it can also sit on a light surface. --------- */
.fhe-theme-pick{display:inline-flex;background:rgba(255,255,255,.06);border:1px solid rgba(181,201,225,.22);border-radius:8px;overflow:hidden;}
.fhe-theme-pick-btn{display:inline-flex;align-items:center;gap:5px;font:600 12px 'Inter',system-ui,sans-serif;color:#cfe0f2;background:transparent;border:0;padding:6px 9px;cursor:pointer;line-height:1;}
.fhe-theme-pick-btn:hover{background:rgba(255,255,255,.09);color:#fff;}
.fhe-theme-pick-btn.on{background:var(--cyan);color:#06202c;}
.fhe-theme-pick-btn.on:hover{background:#52c2e6;color:#06202c;}
.fhe-theme-pick-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px;}
.fhe-theme-pick-btn svg{flex:none;}
/* Compact: only the icon on narrow screens — icons carry an aria-label so the picker stays readable */
@media (max-width:720px){ .fhe-theme-pick-btn .lbl{display:none;} .fhe-theme-pick-btn{padding:7px;} }
/* On a light surface (any page that mounts the picker outside the dark topbar) the
   inverted variant is opted in by adding class "on-light" to the picker host. */
.fhe-theme-pick.on-light{background:var(--card);border-color:var(--line-2);}
.fhe-theme-pick.on-light .fhe-theme-pick-btn{color:var(--text);}
.fhe-theme-pick.on-light .fhe-theme-pick-btn:hover{background:var(--bg-2);color:var(--ink);}
.fhe-theme-pick.on-light .fhe-theme-pick-btn.on{background:var(--cyan);color:#06202c;}