/* Titan UI -- the token stylesheet (UI refresh, Thunder 2 Oct 2026). THE ONE SOURCE OF EVERY COLOUR.
   Pages use the variables below and never a colour of their own. Applied by attributes on <html>, which the server
   writes from the user's saved appearance before the first paint (ui_shell.apply_shell):
     data-theme   light | dark | contrast
     data-accent  gold | blue | green | violet
     data-size    standard | large | larger
     data-density comfortable | compact
   tests/ui_shell computes the contrast of every text pair below from THIS FILE, per theme and per accent (>= 4.5:1),
   so a token is changed here and the test re-measures it.

   STATUS: always a symbol AND a word, never colour alone. Six pairs, each a text colour on its own background:
     ok (green: cleared, acceptable)  warn (amber: needs a person -- review, open, not computed)
     bad (red: real problems only -- not accepted, refused, blocking)  info (blue: guidance, what to obtain, links)
     review (violet: needs underwriter review)  none (grey: not assessed, not applicable)                          */

@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/static/ui/fonts/IBMPlexSans-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/static/ui/fonts/IBMPlexSans-Medium.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/static/ui/fonts/IBMPlexSans-SemiBold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/static/ui/fonts/IBMPlexSans-Bold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/static/ui/fonts/IBMPlexMono-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/static/ui/fonts/IBMPlexMono-Medium.woff2") format("woff2")}

/* ---- LIGHT (the default) -------------------------------------------------------------------------------------- */
:root{
  --tn-bg:#F3F5F8;
  --tn-card:#FFFFFF;
  --tn-card-border:#DCE2EA;
  --tn-control-border:#C9D2DE;
  --tn-hover:#EEF2F7;
  --tn-backdrop:rgba(15,39,66,.45);
  --tn-text:#1B2430;
  --tn-text-2:#4A5565;
  --tn-navy:#0F2742;
  --tn-on-navy:#FFFFFF;
  --tn-on-navy-2:#C9D5E3;
  --tn-wordmark:#E8B730;
  --tn-link:#1D5FA8;
  --tn-focus:#1D5FA8;
  --tn-ok-fg:#1E6B43;     --tn-ok-bg:#E6F4EC;
  --tn-warn-fg:#8A4B00;   --tn-warn-bg:#FFF4DE;
  --tn-bad-fg:#B42318;    --tn-bad-bg:#FDECEA;
  --tn-info-fg:#123F73;   --tn-info-bg:#E8F1FB;
  --tn-review-fg:#4B3BA3; --tn-review-bg:#EDE9FB;
  --tn-none-fg:#4A5565;   --tn-none-bg:#EEF1F4;
  --tn-radius:12px;
  --tn-radius-sm:8px;
  --tn-border-w:1px;
  --tn-shadow:0 1px 2px rgba(15,39,66,.06),0 4px 12px rgba(15,39,66,.06);
  --tn-font:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --tn-font-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --tn-fs:14px;
  --tn-pad:18px;
  --tn-gap:16px;
  --tn-control-h:44px;
  /* accent: gold. --tn-accent is the HUE (swatches, borders, rings); a filled control uses --tn-accent-fill with
     --tn-on-accent text, which is the pair the contrast test checks. */
  --tn-accent:#E8B730;
  --tn-accent-fill:#E8B730;
  --tn-on-accent:#1B2430;
}

/* ---- DARK: a refined version of today's look ------------------------------------------------------------------ */
[data-theme="dark"]{
  --tn-bg:#0E1726;
  --tn-card:#17233A;
  --tn-card-border:#2A3A55;
  --tn-control-border:#3A4C6B;
  --tn-hover:#1F2D47;
  --tn-backdrop:rgba(0,0,0,.6);
  --tn-text:#E6ECF3;
  --tn-text-2:#AAB7C8;
  --tn-navy:#0A1B30;
  --tn-on-navy:#FFFFFF;
  --tn-on-navy-2:#C9D5E3;
  --tn-wordmark:#E8B730;
  --tn-link:#8FC1F5;
  --tn-focus:#8FC1F5;
  --tn-ok-fg:#86E0AE;     --tn-ok-bg:#123524;
  --tn-warn-fg:#FFD27A;   --tn-warn-bg:#4A3500;
  --tn-bad-fg:#FFA49A;    --tn-bad-bg:#4A1712;
  --tn-info-fg:#A6CCFF;   --tn-info-bg:#12304F;
  --tn-review-fg:#CFC4FF; --tn-review-bg:#2E2560;
  --tn-none-fg:#C4CDD8;   --tn-none-bg:#243248;
  --tn-shadow:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25);
}

/* ---- HIGH CONTRAST: black on white, 2 px borders -------------------------------------------------------------- */
[data-theme="contrast"]{
  --tn-bg:#FFFFFF;
  --tn-card:#FFFFFF;
  --tn-card-border:#000000;
  --tn-control-border:#000000;
  --tn-hover:#EFEFEF;
  --tn-backdrop:rgba(0,0,0,.6);
  --tn-text:#000000;
  --tn-text-2:#000000;
  --tn-navy:#000000;
  --tn-on-navy:#FFFFFF;
  --tn-on-navy-2:#FFFFFF;
  --tn-wordmark:#E8B730;
  --tn-link:#0B3D91;
  --tn-focus:#000000;
  --tn-ok-fg:#0B5D2E;     --tn-ok-bg:#FFFFFF;
  --tn-warn-fg:#6B3900;   --tn-warn-bg:#FFFFFF;
  --tn-bad-fg:#9B1C12;    --tn-bad-bg:#FFFFFF;
  --tn-info-fg:#0B3A70;   --tn-info-bg:#FFFFFF;
  --tn-review-fg:#3B2B93; --tn-review-bg:#FFFFFF;
  --tn-none-fg:#333333;   --tn-none-bg:#FFFFFF;
  --tn-border-w:2px;
  --tn-shadow:none;
}

/* ---- ACCENTS (any theme): the hue for swatches and borders; a darker fill with white text where needed -------- */
[data-accent="gold"]  {--tn-accent:#E8B730;--tn-accent-fill:#E8B730;--tn-on-accent:#1B2430}
[data-accent="blue"]  {--tn-accent:#2E7FD3;--tn-accent-fill:#1D5FA8;--tn-on-accent:#FFFFFF}
[data-accent="green"] {--tn-accent:#2E9E6A;--tn-accent-fill:#1E6B43;--tn-on-accent:#FFFFFF}
[data-accent="violet"]{--tn-accent:#7A5CC9;--tn-accent-fill:#5B45B5;--tn-on-accent:#FFFFFF}

/* ---- TEXT SIZE and DENSITY ------------------------------------------------------------------------------------ */
[data-size="standard"]{--tn-fs:14px}
[data-size="large"]   {--tn-fs:16px}
[data-size="larger"]  {--tn-fs:18px}
[data-density="comfortable"]{--tn-pad:18px;--tn-gap:16px}
[data-density="compact"]    {--tn-pad:12px;--tn-gap:10px}

/* ---- BASE ----------------------------------------------------------------------------------------------------- */
html[data-theme]{background:var(--tn-bg);color:var(--tn-text);font-family:var(--tn-font);font-size:var(--tn-fs)}
html[data-theme] body{background:var(--tn-bg);color:var(--tn-text);font-family:var(--tn-font)}
:where(html[data-theme]) a{color:var(--tn-link)}
html[data-theme] code,html[data-theme] kbd,html[data-theme] .tn-mono{font-family:var(--tn-font-mono)}
html[data-theme] :focus-visible{outline:3px solid var(--tn-focus);outline-offset:2px}

/* ---- HEADER --------------------------------------------------------------------------------------------------- */
.tn-header{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 20px;background:var(--tn-navy);
  color:var(--tn-on-navy);font-family:var(--tn-font);box-sizing:border-box;border-bottom:var(--tn-border-w) solid var(--tn-navy)}
.tn-wordmark{display:inline-flex;align-items:center;min-height:var(--tn-control-h);color:var(--tn-wordmark)!important;font-weight:700;letter-spacing:.14em;font-size:calc(18rem / 14);text-decoration:none}
.tn-role{color:var(--tn-on-navy-2);font-size:calc(13rem / 14);font-weight:500}
.tn-user{color:var(--tn-on-navy-2);font-size:calc(13rem / 14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.tn-spacer{flex:1}
.tn-nav{display:flex;align-items:stretch;gap:4px;align-self:stretch;margin-left:12px;flex-wrap:wrap}
.tn-nav a,.tn-nav button{display:inline-flex;align-items:center;min-height:var(--tn-control-h);padding:0 12px;background:transparent;border:0;border-bottom:3px solid transparent;color:var(--tn-on-navy-2);font:inherit;font-size:calc(14rem / 14);cursor:pointer;text-decoration:none}
.tn-nav a:hover,.tn-nav button:hover{color:var(--tn-on-navy)}
.tn-nav [aria-current="page"],.tn-nav .active{color:var(--tn-on-navy);border-bottom-color:var(--tn-wordmark);font-weight:600}
.tn-header .tn-nav .tabs{display:flex;align-items:stretch;gap:2px;background:transparent;border:0;margin:0;padding:0}
.tn-header .tn-nav .tabs[hidden]{display:none}
.tn-header .tn-nav .tab{display:inline-flex;align-items:center;min-height:var(--tn-control-h);padding:0 12px;margin:0;background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;color:var(--tn-on-navy-2);font:inherit;font-size:calc(14rem / 14);cursor:pointer}
.tn-header .tn-nav .tab:hover{color:var(--tn-on-navy);background:transparent}
.tn-header .tn-nav .tab.active{color:var(--tn-on-navy);border-bottom-color:var(--tn-wordmark);font-weight:600;background:transparent}
.tn-gear,.tn-signout{min-height:var(--tn-control-h);min-width:var(--tn-control-h);display:inline-flex;align-items:center;
  justify-content:center;border-radius:var(--tn-radius-sm);color:var(--tn-on-navy)!important;background:transparent;
  border:1px solid rgba(255,255,255,.28);font:inherit;font-size:calc(14rem / 14);cursor:pointer;text-decoration:none;box-sizing:border-box}
.tn-signout{padding:0 14px}
.tn-gear:hover,.tn-signout:hover{background:rgba(255,255,255,.08)}
html[data-theme] .tn-header :focus-visible{outline-color:var(--tn-wordmark)}

/* ---- CARDS, BUTTONS, STATUS ----------------------------------------------------------------------------------- */
.tn-card{background:var(--tn-card);border:var(--tn-border-w) solid var(--tn-card-border);border-radius:var(--tn-radius);
  box-shadow:var(--tn-shadow);padding:var(--tn-pad);color:var(--tn-text)}
.tn-text-2{color:var(--tn-text-2)}
.tn-btn{min-height:var(--tn-control-h);padding:0 16px;border-radius:var(--tn-radius-sm);font:inherit;font-weight:600;
  cursor:pointer;border:var(--tn-border-w) solid var(--tn-control-border);background:var(--tn-card);color:var(--tn-text)}
.tn-btn-primary{background:var(--tn-accent-fill);color:var(--tn-on-accent);border-color:var(--tn-accent-fill)}
.tn-status{display:inline-flex;align-items:center;gap:6px;font-size:calc(12rem / 14);font-weight:600;padding:3px 10px;
  border-radius:999px;border:var(--tn-border-w) solid transparent}
[data-theme="contrast"] .tn-status{border-color:currentColor}
.tn-ok{color:var(--tn-ok-fg);background:var(--tn-ok-bg)}
.tn-warn{color:var(--tn-warn-fg);background:var(--tn-warn-bg)}
.tn-bad{color:var(--tn-bad-fg);background:var(--tn-bad-bg)}
.tn-info{color:var(--tn-info-fg);background:var(--tn-info-bg)}
.tn-review{color:var(--tn-review-fg);background:var(--tn-review-bg)}
.tn-none{color:var(--tn-none-fg);background:var(--tn-none-bg)}

/* ---- APPEARANCE SETTINGS (titan-ui.js builds it) -------------------------------------------------------------- */
.tn-settings-backdrop{position:fixed;inset:0;background:var(--tn-backdrop);z-index:9998}
.tn-settings{position:fixed;z-index:9999;top:72px;right:20px;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 96px);
  overflow:auto;box-sizing:border-box;background:var(--tn-card);color:var(--tn-text);border:var(--tn-border-w) solid var(--tn-card-border);
  border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:22px;font-family:var(--tn-font);box-shadow:var(--tn-shadow)}
.tn-settings h2{margin:0;font-size:calc(20rem / 14);font-weight:600}
.tn-settings .tn-row{display:flex;align-items:center;justify-content:space-between}
.tn-settings .tn-group{display:flex;flex-direction:column;gap:10px;border:0;margin:0;padding:0}
.tn-settings legend{font-size:calc(13rem / 14);font-weight:600;color:var(--tn-text-2);padding:0;margin-bottom:10px}
.tn-settings .tn-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tn-settings .tn-theme{min-height:96px;border-radius:10px;cursor:pointer;font:inherit;font-weight:600;color:var(--tn-text);
  background:var(--tn-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--tn-control-border)}
.tn-settings .tn-theme[aria-pressed="true"]{border:2px solid var(--tn-text)}
.tn-settings .tn-swatch{width:64px;height:36px;border-radius:6px;border:1px solid var(--tn-control-border)}
.tn-settings .tn-accents{display:flex;gap:12px}
.tn-settings .tn-accent{width:44px;height:44px;border-radius:999px;cursor:pointer;border:1px solid var(--tn-control-border)}
.tn-settings .tn-accent[aria-pressed="true"]{border:3px solid var(--tn-text);box-shadow:0 0 0 3px var(--tn-card) inset}
.tn-settings .tn-seg{display:flex;border:1px solid var(--tn-control-border);border-radius:8px;overflow:hidden}
.tn-settings .tn-seg button{flex:1;min-height:var(--tn-control-h);border:none;cursor:pointer;font:inherit;background:var(--tn-card);color:var(--tn-text)}
.tn-settings .tn-seg button+button{border-left:1px solid var(--tn-control-border)}
.tn-settings .tn-seg button[aria-pressed="true"]{background:var(--tn-accent-fill);color:var(--tn-on-accent);font-weight:600}
html[data-theme] .tn-settings .tn-seg button:focus-visible{outline-offset:-4px}
.tn-settings .tn-close{width:44px;height:44px;border-radius:8px;border:1px solid var(--tn-card-border);background:var(--tn-card);
  color:var(--tn-text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:calc(20rem / 14)}
.tn-settings .tn-note{font-size:calc(13rem / 14);color:var(--tn-text-2)}
.tn-settings .tn-done{min-height:var(--tn-control-h);padding:0 20px;border-radius:8px;border:none;background:var(--tn-accent-fill);
  color:var(--tn-on-accent);font:inherit;font-weight:600;cursor:pointer}
[data-theme="contrast"] .tn-settings .tn-done{border:2px solid #000000}