/* Dark mode for the portal and the console (session 3, 3 Oct 2026; docs/dark-mode.md).
 *
 * Each page keeps its LIGHT colours as tokens on its own :root. This file only redefines those tokens, and only when
 * the page carries data-theme="dark" on <html>. public/portal/theme.mjs sets that attribute, and only when
 * UI_DARK_MODE is on AND the person chose dark, or chose "match my device" on a device set to dark. With the switch
 * off nothing here ever applies, so the pages look exactly as they did.
 *
 * Printed reviews never use this file: print.mjs draws its own window, on white.
 */
html[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces */
  --bg:#0e131d; --card:#161c28; --surface-2:#1c2331; --input-bg:#111723; --line:#2a3242; --code-bg:#111723;
  --bubble-bg:#1e2737; --chip-hover:#233049; --shadow:rgba(0,0,0,.35);
  /* text */
  --text:#cfd5df; --muted:#8e98a8; --brand-ink:#eef1f7;
  /* blues: buttons keep white text at 5:1; links and table headings are lighter for dark backgrounds */
  --brand:#3d6fc4; --brand-dark:#335fa9; --link:#8db1f2; --th-ink:#a9bfe9;
  /* "navy" is used as a TEXT colour across the pages, so in dark it becomes a light blue; solid navy has its own token */
  --brand-navy:#b4c9ef; --header-bg:#0b2650; --navy-solid:#0b3777;
  /* states: the same three as light, quiet on dark */
  --ok:#82d6b0; --ok-bg:#10271d; --ok-line:#1f4a36; --ok-ink:#82d6b0; --accent:#4cbf92;
  --warn-bg:#2a2313; --warn-line:#4a3d1b; --warn-ink:#e7c47e;
  --bad-bg:#2b1618; --bad-line:#532a2e; --bad-ink:#f2a7aa;
  /* "not applicable" text, which in light is a pale grey */
  --faint:#5d6675;
  /* the brand (docs/brand.md): headings near-white, eyebrows and "mint" text lighter, the gradient and tiles deeper */
  --heading:#eef1f7; --eyebrow:#8db1f2; --mint-tint:#11261f; --mint-ink:#62d9b5; --tile-bg:#1b4389;
  --btn:#3d6fc4; --btn-ink:#ffffff; --btn-hover:#335fa9; --foot-bg:#0a0e16;
  --hero-grad:linear-gradient(135deg, #0b2650 0%, #173f80 100%);
  --signature:linear-gradient(90deg, #00f1b6, #3d6fc4, #00f1b6);
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
}

/* Native controls and anything a module left white. */
html[data-theme="dark"] body { background:var(--bg); color:var(--text); }
html[data-theme="dark"] input[type=checkbox], html[data-theme="dark"] input[type=radio] { accent-color:var(--link); }
html[data-theme="dark"] ::placeholder { color:var(--muted); opacity:1; }
html[data-theme="dark"] hr { border-color:var(--line); }
/* The full-colour logo on the sign-in, loading and error screens is drawn for a white page: in dark it sits on a light
   tile, or its navy lettering would disappear into the card. */
html[data-theme="dark"] img.mark { background:#fff; border-radius:.5rem; padding:.4rem .6rem; }

/* ------------------------------------------------------------------ what the two pages colour directly */
html[data-theme="dark"] a, html[data-theme="dark"] button.link, html[data-theme="dark"] .disclaimer button,
html[data-theme="dark"] nav.subnav button.active { color:var(--link); }
html[data-theme="dark"] button.secondary, html[data-theme="dark"] .ws-tabs button:not(.active) { background:var(--card); color:var(--text); }
html[data-theme="dark"] button.secondary:hover { background:var(--surface-2); }
html[data-theme="dark"] button.cta { color:var(--navy-solid); }
html[data-theme="dark"] .panel, html[data-theme="dark"] .signin-card { box-shadow:0 1px 2px var(--shadow); }
html[data-theme="dark"] .pill { background:var(--surface-2); color:var(--muted); border-color:var(--line); }
html[data-theme="dark"] .pill.ok, html[data-theme="dark"] .pill.active { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink); }
html[data-theme="dark"] .pill.warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink); }
html[data-theme="dark"] .pill.bad { background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad-ink); }
html[data-theme="dark"] .notice, html[data-theme="dark"] .pending { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink); }
html[data-theme="dark"] .details { background:var(--surface-2); color:var(--text); }
html[data-theme="dark"] .msg.bot, html[data-theme="dark"] .msg.rm, html[data-theme="dark"] .msg.assistant { background:var(--bubble-bg); color:var(--brand-ink); }
html[data-theme="dark"] .msg.bot code, html[data-theme="dark"] .pending pre, html[data-theme="dark"] code, html[data-theme="dark"] pre { background:var(--code-bg); color:var(--text); }
html[data-theme="dark"] .chip { background:var(--surface-2); color:var(--link); }
html[data-theme="dark"] .chip:hover { background:var(--chip-hover); }
html[data-theme="dark"] form.chat input { background:var(--input-bg); color:var(--text); }
html[data-theme="dark"] tbody tr.clickable:hover, html[data-theme="dark"] nav button:not(.active):hover { background:var(--surface-2); }
/* The masthead stays navy in dark, so its areas keep the light page's hover, not the dark strip's. */
html[data-theme="dark"] .masthead nav button:not(.active):hover { background:rgba(255,255,255,.08); }
/* On the navy band and the foot, links keep their light colours (the dark page's link blue is for dark grey cards). */
html[data-theme="dark"] .b-band a { color:var(--brand-mint); }
html[data-theme="dark"] .b-band a.b-call { color:#f0faf6; }
html[data-theme="dark"] .b-foot a, html[data-theme="dark"] .b-gate-foot a { color:#fff; }
html[data-theme="dark"] li::marker { color:var(--link); }

/* ------------------------------------------------------------------ session 4's report screens
 * public/portal/reports.mjs and public/console/reports.mjs colour their own classes. They are darkened here, so those
 * files stay exactly as session 4 left them. Their printed and downloaded copies are not touched (white, as before). */
html[data-theme="dark"] .rp-sub button.on { background:var(--navy-solid); border-color:var(--navy-solid); }
html[data-theme="dark"] .rp-link { color:var(--link); }
html[data-theme="dark"] .rp-finding, html[data-theme="dark"] .rp-confirm, html[data-theme="dark"] .cr-shared,
html[data-theme="dark"] .cr-finding, html[data-theme="dark"] .cr-internal { background:var(--surface-2); }
html[data-theme="dark"] .rp-finding.save, html[data-theme="dark"] .cr-finding.save { border-color:var(--accent); }
html[data-theme="dark"] .rp-table .done td, html[data-theme="dark"] .cr-set { background:var(--ok-bg); }
html[data-theme="dark"] .rp-note { background:var(--warn-bg); border-color:var(--warn-line); }
html[data-theme="dark"] .rp-tag.warn, html[data-theme="dark"] .cr-chip.draft { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn-ink); }
html[data-theme="dark"] .cr-chip.published { background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink); }

/* ------------------------------------------------------------------ session 9's view-as banner (public/portal/viewas.css)
 * The slate frame stays slate in both themes; the amber banner and its read-only note go dark amber. */
html[data-theme="dark"] { --va-bg:#3a2f12; --va-ink:#f6e2a8; --va-line:#6b5a26; --va-field:#2b2410; --va-hover:rgba(246,226,168,.1);
  --va-note-bg:var(--warn-bg); --va-note-line:var(--warn-line); --va-note-ink:var(--warn-ink); --va-person-bg:transparent; }