/* ============================================================================
   Design tokens — THE one place to change the look of the whole app.
   Every page links this before its own <style>. Colours, corners, spacing,
   and shadows all live here; components reference the tokens, never raw hex.
   Re-theming = edit these values. Accent-derived tints use color-mix off
   --accent, so changing the accent re-tints everything automatically.
   Settled 2026-07-11 via the design lab: Cobalt · sharp corners · elevated.
   ============================================================================ */
:root {
  /* accent (kept the alias --blue for existing component styles) */
  --accent: #144a9c;
  --blue: var(--accent);
  --on-accent: #ffffff;
  /* accent used as TEXT/icon on a surface (chips, links, the ↗ arrow). Same
     as --accent in light; dark mode lightens it so it stays legible on a dark
     ground — where the button-background accent would be too dim to read. */
  --accent-text: var(--accent);

  /* cool-biased neutrals (chosen to sit under a blue accent) */
  --ink: #101828;
  --muted: #667085;
  --faint: #98a2b3;
  --line: #e4e8ef;
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f5f7fa;

  /* semantic — independent of the accent, so state always reads at a glance */
  --ok:   #0f9d58;  --warn: #b7791f;  --stop: #d4444f;

  /* accent- and semantic-derived tints (auto-follow the base colours) */
  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-tint: color-mix(in srgb, var(--accent) 6%,  #ffffff);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);
  --good-soft:   color-mix(in srgb, var(--ok)   13%, transparent);
  --warn-soft:   color-mix(in srgb, var(--warn) 14%, transparent);
  --stop-soft:   color-mix(in srgb, var(--stop) 12%, transparent);

  /* --- hand-tuned state colours (dark mode overrides these; see the block
     at the bottom of this file). Light values are the originals, so light
     mode renders byte-for-byte the same. --- */
  --knob:       #ffffff;   /* toggle knob */
  --track-off:  #c7d0d8;   /* toggle track, off */
  --hover-tint: #eef2f5;   /* subtle hover fill (hide button) */
  /* swipe-left "hide/log" amber (also the notice + in-progress banner) */
  --amber-bg:   #fff3d6; --amber-fg:   #8a5a00;
  --amber-bg-2: #f5c26b; --amber-fg-2: #5c3c00;   /* armed */
  /* swipe-right "log" green */
  --green-bg:   #d9f0e1; --green-fg:   #136c38;
  --green-bg-2: #7fd3a1; --green-fg-2: #0b4a25;   /* armed */
  /* swipe-left-on-logged "delete" red (also the delete-log button) */
  --red-bg:     #fdeceb; --red-fg:     #a93226;
  --red-bg-2:   #e74c3c; --red-fg-2:   #ffffff;   /* armed */
  --danger:     #c0392b; --danger-bg:  #fdf0ee;   /* delete-log button */
  /* history / temporal-proximity guess chips (gold, dashed) */
  --guess-bg:   #fbf8f1; --guess-line: #c8a24d; --guess-fg: #7a5d17;
  --dashed-line: #b6c2cc;  /* create-chip + unselected-bubble dashed outline */

  /* shape — sharper corners read more professional */
  --r: 8px;      /* cards, menus */
  --r-sm: 5px;   /* inputs, chips, buttons */

  /* elevation */
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 14px -6px rgba(16,24,40,.14);
  --shadow-open: 0 8px 26px -8px color-mix(in srgb, var(--accent) 40%, transparent);

  /* 'Segoe UI Variable Text' first: Windows 11's refined Segoe (optical
     sizing, tighter at small sizes — what modern Office renders in).
     Browsers won't pick it unless it's named; classic 'Segoe UI' reads soft
     and rounded on standard-DPI desktops. Apple devices keep San Francisco. */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- shared components (used across pages) --------------------------------- */

/* status pill — the at-a-glance state marker (Ready / 2 cases / Lead / Logged) */
.pill { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.01em;
        padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill.good { background:var(--good-soft); color:var(--ok); }
.pill.warn { background:var(--warn-soft); color:var(--warn); }
.pill.stop { background:var(--stop-soft); color:var(--stop); }
.pill.done { background:var(--surface-2); color:var(--muted); }
.pill.live { background:var(--accent-soft); color:var(--accent-text); }
.pill.neutral { background:var(--surface-2); color:var(--muted); border:1px solid var(--line); }

/* direction / type icon tile */
.dir-tile { flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
            font-size:15px; font-weight:700; line-height:1; }
.dir-tile.in   { background:var(--good-soft);   color:var(--ok); }
.dir-tile.out  { background:var(--accent-soft); color:var(--accent-text); }
.dir-tile.lead { background:var(--warn-soft);   color:var(--warn); }

/* matched-matter chip (blue case identity; green is reserved for actions) */
.matched-pill { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:650;
  color:var(--accent-text); background:var(--accent-soft);
  border:1px solid var(--accent-line);
  padding:5px 11px; border-radius:999px; }

/* filter chip (toolbar toggles) */
.fchip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  color:var(--muted); background:var(--surface); border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; cursor:pointer; user-select:none; }
.fchip .fdot { width:7px; height:7px; border-radius:50%; background:var(--faint); }
.fchip.on { color:var(--ink); border-color:var(--accent-line); background:var(--accent-soft); }
.fchip.on .fdot { background:var(--accent); }
.fchip.count { color:var(--warn); border-color:var(--warn-soft); background:var(--warn-soft); font-weight:700; }
.fchip.count.clear { color:var(--ok); border-color:var(--good-soft); background:var(--good-soft); }

/* ============================================================================
   DARK MODE  (fully removable — delete this fenced block, the theme-init.js
   snippet in each page <head>, and the `theme` registry entry to undo dark
   mode entirely; light mode is unaffected either way).

   The theme-init snippet resolves the user's choice (System / Light / Dark)
   to a concrete data-theme on <html>, so this block only needs to handle
   the resolved "dark" case — no prefers-color-scheme media query here.

   Every rule is a TOKEN override. Components already reference the tokens, so
   re-colouring the whole app happens here without touching component CSS.
   ============================================================================ */
:root[data-theme="dark"] {
  /* accent (filled surfaces: buttons, selected pills, header). The Google/
     Chrome button blue — a touch deeper than cobalt so it doesn't glare
     against the dark ground, and white label text clears AA-normal (4.5:1)
     on it, not just AA-large. Text/line accents use --accent-text below. */
  --accent: #1a73e8;
  --on-accent: #ffffff;
  /* accent-as-text needs to be LIGHTER than the button accent to read on a
     dark surface (the mid-cobalt would disappear into a tinted pill) */
  --accent-text: #8fb6f6;

  /* cool-biased dark neutrals (sit under the blue accent) */
  --ink: #e6eaf2;
  --muted: #97a2b6;
  --faint: #6b7688;
  --line: #2a3345;
  --bg: #0e1420;
  --surface: #161d2b;
  --surface-2: #1e2637;

  /* semantic: brighter so state still reads at a glance on dark */
  --ok: #35c07a;  --warn: #d9a441;  --stop: #f06a72;

  /* accent-tint mixes with a hardcoded white in light — repoint at the dark
     surface so the "suggested matter" row isn't a bright slab */
  --accent-tint: color-mix(in srgb, var(--accent) 14%, var(--surface));

  /* state colours — dark grounds with light legends (not inversions;
     hand-picked so amber/green/red still read as amber/green/red) */
  --knob:       #e6eaf2;
  --track-off:  #3a4560;
  --hover-tint: #222b3d;
  --amber-bg:   #38300f; --amber-fg:   #e8c27a;
  --amber-bg-2: #6b5210; --amber-fg-2: #ffe0a3;
  --green-bg:   #10311d; --green-fg:   #7fd3a1;
  --green-bg-2: #1c7a45; --green-fg-2: #d9f0e1;
  --red-bg:     #391a1a; --red-fg:     #f0a0a0;
  --red-bg-2:   #c0392b; --red-fg-2:   #ffffff;
  --danger:     #f06a72; --danger-bg:  #391a1a;
  --guess-bg:   #2a2410; --guess-line: #a8863a; --guess-fg: #d9c07a;
  --dashed-line: #3a4560;

  /* shadows read as depth, not smudge, on dark — deepen the ambient one */
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px -6px rgba(0,0,0,.55);
}
/* the browser's own form controls, scrollbars and autofill follow suit */
:root[data-theme="dark"] { color-scheme: dark; }

/* component nudges — a few spots where light-mode "lighter = raised" inverts
   on dark and needs an explicit lift (kept minimal; tokens do the rest) */
:root[data-theme="dark"] .tab.active {   /* active tab must sit ABOVE the strip */
  background: var(--surface-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
/* the floating status menu melted into the cards on dark (same --surface on
   both + a light-tuned shadow that vanishes on a dark ground) — Tom
   2026-07-21: options seemed to hang detached over the content. Elevation on
   dark = LIGHTER surface, crisp edge, deep shadow. */
:root[data-theme="dark"] .sys-menu {
  background: var(--surface-2);
  border-color: var(--track-off);
  box-shadow: 0 12px 34px -6px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .sys-menu [role="option"]:hover { background: var(--hover-tint); }
:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=number],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .creator input {  /* fields read as wells, not card-flat */
  background: var(--bg);
}
/* ===================== END DARK MODE (removable) ===================== */