/* Siftraq design tokens — the one place brand colours, surfaces and the typeface are defined.
   Linked by layout.ejs, dashboard.ejs and index.html. Brand palette: brand kit v2. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/geist-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  /* Brand kit v2 */
  --navy: #042C53;
  --blue: #185FA5;
  --sky: #378ADD;
  --mist: #B5D4F4;
  /* The logo's own colours, for the animated mark (SiftraqUI.siftMark): raw data, filtered, refined, the result. */
  --mark-raw: rgba(55, 138, 221, 0.35);
  --mark-mid: #378ADD;
  --mark-fine: #B5D4F4;
  --mark-ring: rgba(255, 255, 255, 0.9);
  --offwhite: #F1EFE8;

  /* Surfaces */
  --page: #070a12;
  --page-tint: rgba(7, 10, 18, 0.55);
  --panel: rgba(255, 255, 255, 0.055);
  --panel-2: rgba(255, 255, 255, 0.09);
  --panel-solid: rgba(11, 15, 26, 0.80);
  --panel-raised: #131a2a;
  --panel-head: #0f1524;    /* sticky table headers */
  --fill: #263048;          /* tracks, chips and tooltips that need an opaque fill */
  --fill-soft: #1c2438;
  --border: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.20);

  /* Ink */
  --text-strong: #fff;      /* headings, big numbers, text on the accent */
  --text: #f3f6fb;
  --text-2: #b9c3d6;
  --muted: #8b95aa;

  /* Accent: Sky on dark surfaces (Blue is too weak for text there) */
  --accent: #378ADD;
  --accent-hover: #5aa2e8;
  --accent-light: #4d9dea;  /* top of the accent gradient */
  --accent-strong: #185FA5;
  --accent-bg: rgba(55, 138, 221, 0.16);
  --accent-border: rgba(55, 138, 221, 0.35);

  /* Status — pair with an icon or label, never colour alone */
  --good: #2bbf5b;
  --good-strong: #1f8f47;
  --good-bg: rgba(43, 191, 91, 0.14);
  --good-border: rgba(43, 191, 91, 0.35);
  --warning: #fab219;
  --warning-bg: rgba(250, 178, 25, 0.12);
  --warning-border: rgba(250, 178, 25, 0.40);
  --critical: #e66767;
  --critical-bg: rgba(230, 103, 103, 0.12);
  --critical-border: rgba(230, 103, 103, 0.45);

  /* Chart roles (validated on --chart-surface) */
  --chart-surface: #131a2a;
  --series-1: #378ADD;
  --series-2: #d95926;
  --series-1-deep: #1f4f8f;
  --deemph: #5d6880;

  --radius: 22px;
  --radius-sm: 12px;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 28px 50px -28px rgba(0, 0, 0, 0.65);
  --glass-blur: blur(26px) saturate(150%);
  --panel-blur: blur(12px);
  --overlay-blur: blur(4px);

  /* States and depth. Named, not written out in the styles, so a theme can change them. */
  --hover: rgba(255, 255, 255, 0.035);        /* a row or step under the pointer */
  --total-row: rgba(255, 255, 255, 0.06);   /* the Overall row of a table: a soft band */
  --sticky-cell: #0f1320;   /* a table's frozen first column: the card's colour, solid (rows slide under it) */
  --sticky-total: #181c29;  /* …and on the Overall row */
  --hover-strong: rgba(255, 255, 255, 0.08);
  --pressed: rgba(255, 255, 255, 0.14);       /* the chosen one of a group */
  --pressed-edge: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --head-tint: rgba(255, 255, 255, 0.03);     /* a table's heading row */
  --track: rgba(55, 138, 221, 0.18);          /* the empty part of a bar */
  --panel-opaque: rgba(20, 26, 42, 0.95);     /* where a browser cannot blur */
  --tooltip-bg: rgba(12, 16, 28, 0.94);
  --tooltip-border: rgba(255, 255, 255, 0.12);
  --overlay: rgba(4, 6, 12, 0.6);             /* behind a side panel */
  --accent-glow: 0 8px 20px -8px rgba(55, 138, 221, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  --shadow-card: 0 28px 50px -28px rgba(0, 0, 0, 0.65);
  --shadow-pop: 0 14px 34px rgba(0, 0, 0, 0.5);
  --shadow-panel: 0 28px 60px -20px rgba(0, 0, 0, 0.8);
  --page-glow:
    radial-gradient(52vw 46vh at 10% 4%, rgba(55, 138, 221, 0.42), transparent 62%),
    radial-gradient(40vw 40vh at 72% 0%, rgba(24, 95, 165, 0.38), transparent 60%),
    radial-gradient(46vw 48vh at 92% 88%, rgba(217, 89, 38, 0.26), transparent 62%),
    radial-gradient(40vw 40vh at 30% 100%, rgba(4, 44, 83, 0.70), transparent 65%);
  --wordmark-strong: #fff;
  --wordmark-mid: var(--mist);
  --on-accent: #fff;                          /* text and icons on an accent fill */
  --ink-accent: var(--mist);                  /* the accent as ink: small icons, the focus ring */
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-axis: rgba(255, 255, 255, 0.14);
  --chart-pointer: rgba(255, 255, 255, 0.28);
  --chart-glow: 0.7;
}

/* ── Dark (its key stays "black"), switched off 2026-10-24 (Shamim): kept here, not offered by
   partials/theme.ejs; a browser that had it gets Midnight. To bring it back, add its row there.
   Flat charcoal surfaces, panels a step lighter than the page,
   hairline borders, no glow and no glass. For long sessions in tables. Not pure black: the
   page is a dark grey with a little blue in it, as the dark modes people sit in all day are
   (Shamim, 2026-10-13). Chosen by the reader (partials/theme.ejs sets data-theme on <html>);
   the theme above stays the one a page has when nothing is chosen. ── */
:root[data-theme="black"] {
  --page: #16171b;
  --page-tint: rgba(22, 23, 27, 0.7);
  --panel: #1e1f24;
  --panel-2: #27282e;
  --panel-solid: #1e1f24;
  --panel-raised: #25262c;
  --panel-head: #1e1f24;
  --fill: #36373f;
  --fill-soft: #2b2c33;
  --border: rgba(255, 255, 255, 0.10);
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.20);

  --text: #ececf1;
  --text-2: #b7b8c2;
  --muted: #8e8f9b;

  --chart-surface: #1e1f24;
  --deemph: #666772;

  --radius: 14px;
  --radius-sm: 10px;
  --glass-bg: #1e1f24;
  --glass-shadow: none;
  --glass-blur: none;
  --panel-blur: none;
  --overlay-blur: none;

  --hover: rgba(255, 255, 255, 0.04);
  --total-row: #27282e;
  --sticky-cell: #1e1f24;
  --sticky-total: #27282e;
  --hover-strong: rgba(255, 255, 255, 0.07);
  --pressed: rgba(255, 255, 255, 0.10);
  --pressed-edge: none;
  --head-tint: transparent;
  --panel-opaque: #1e1f24;
  --tooltip-bg: #2b2c33;
  --tooltip-border: rgba(255, 255, 255, 0.14);
  --overlay: rgba(8, 9, 12, 0.6);
  --accent-glow: none;
  --shadow-card: none;
  --shadow-pop: 0 12px 28px rgba(0, 0, 0, 0.45);
  --shadow-panel: 0 20px 48px rgba(0, 0, 0, 0.55);
  --page-glow: none;
  --chart-glow: 0;
}

/* ── Midnight: a second dark theme, set beside "Dark" for Shamim to choose between (2026-10-13;
   the one not chosen is to be removed). Its colours were read off the screenshot he sent of
   Mercury's site: a navy-violet page, panels in two lighter steps, and ink with the same
   faint lavender in it — bright for headings, a soft grey for running text. The accent stays
   the brand's Sky. Shape as the other flat themes. ── */
:root[data-theme="midnight"] {
  --page: #171821;
  --page-tint: rgba(23, 24, 33, 0.7);
  --panel: #1e1d29;
  --panel-2: #272735;
  --panel-solid: #1e1d29;
  --panel-raised: #272735;
  --panel-head: #1e1d29;
  --fill: #3b3b4b;
  --fill-soft: #2d2d3c;
  --border: rgba(205, 205, 232, 0.12);
  --border-soft: rgba(205, 205, 232, 0.08);
  --border-strong: rgba(205, 205, 232, 0.24);

  --text-strong: #f4f5fe;
  --text: #e9eaf3;
  --text-2: #c3c4cf;
  --muted: #9697a6;

  --chart-surface: #1e1d29;
  --deemph: #6a6a7b;

  --radius: 14px;
  --radius-sm: 10px;
  --glass-bg: #1e1d29;
  --glass-shadow: none;
  --glass-blur: none;
  --panel-blur: none;
  --overlay-blur: none;

  --hover: rgba(205, 205, 232, 0.05);
  --total-row: #272735;
  --sticky-cell: #1e1d29;
  --sticky-total: #272735;
  --hover-strong: rgba(205, 205, 232, 0.08);
  --pressed: rgba(205, 205, 232, 0.12);
  --pressed-edge: none;
  --head-tint: transparent;
  --panel-opaque: #1e1d29;
  --tooltip-bg: #2d2d3c;
  --tooltip-border: rgba(205, 205, 232, 0.16);
  --overlay: rgba(10, 10, 16, 0.6);
  --accent-glow: none;
  --shadow-card: none;
  --shadow-pop: 0 12px 28px rgba(0, 0, 0, 0.42);
  --shadow-panel: 0 20px 48px rgba(0, 0, 0, 0.5);
  --page-glow: none;
  --wordmark-strong: #f4f5fe;
  --chart-grid: rgba(205, 205, 232, 0.08);
  --chart-axis: rgba(205, 205, 232, 0.16);
  --chart-pointer: rgba(205, 205, 232, 0.30);
  --chart-glow: 0;
}

/* ── White: the same flat surfaces on light, for bright rooms and for anyone who reads better
   dark-on-light. Ink and status colours are darker here so they keep their contrast. ── */
:root[data-theme="white"] {
  --mark-ring: #185FA5;             /* the logo's light drawing */
  color-scheme: light;
  --page: #f5f6f8;
  --page-tint: rgba(245, 246, 248, 0.8);
  --panel: #ffffff;
  --panel-2: #f0f2f5;
  --panel-solid: #ffffff;
  --panel-raised: #ffffff;
  --panel-head: #fafbfc;
  --fill: #dfe3ea;
  --fill-soft: #eceff3;
  --border: rgba(15, 23, 42, 0.12);
  --border-soft: rgba(15, 23, 42, 0.07);
  --border-strong: rgba(15, 23, 42, 0.26);

  --text-strong: #0b1220;
  --text: #1b2434;
  --text-2: #465165;
  --muted: #687386;

  --accent: #1f6fc9;
  --accent-hover: #2a7bd6;
  --accent-light: #3a8ae0;
  --accent-strong: #185FA5;
  --accent-bg: rgba(31, 111, 201, 0.10);
  --accent-border: rgba(31, 111, 201, 0.32);

  --good: #15803d;
  --good-strong: #166534;
  --good-bg: rgba(21, 128, 61, 0.10);
  --good-border: rgba(21, 128, 61, 0.30);
  --warning: #b45309;
  --warning-bg: rgba(180, 83, 9, 0.10);
  --warning-border: rgba(180, 83, 9, 0.32);
  --critical: #c0392b;
  --critical-bg: rgba(192, 57, 43, 0.09);
  --critical-border: rgba(192, 57, 43, 0.34);

  --chart-surface: #ffffff;
  --series-1: #1f6fc9;
  --series-2: #c2410c;
  --series-1-deep: #17528f;
  --deemph: #a2abb9;

  --radius: 14px;
  --radius-sm: 10px;
  --glass-bg: #ffffff;
  --glass-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --glass-blur: none;
  --panel-blur: none;
  --overlay-blur: none;

  --hover: rgba(15, 23, 42, 0.035);
  --total-row: #f0f2f5;
  --sticky-cell: #ffffff;
  --sticky-total: #f0f2f5;
  --hover-strong: rgba(15, 23, 42, 0.06);
  --pressed: rgba(15, 23, 42, 0.08);
  --pressed-edge: none;
  --head-tint: rgba(15, 23, 42, 0.025);
  --track: rgba(31, 111, 201, 0.14);
  --panel-opaque: #ffffff;
  --tooltip-bg: #ffffff;
  --tooltip-border: rgba(15, 23, 42, 0.14);
  --overlay: rgba(15, 23, 42, 0.32);
  --accent-glow: 0 1px 2px rgba(15, 23, 42, 0.16);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-pop: 0 10px 28px rgba(15, 23, 42, 0.16);
  --shadow-panel: 0 20px 48px rgba(15, 23, 42, 0.22);
  --page-glow: none;
  --wordmark-strong: #042C53;
  --wordmark-mid: #185FA5;
  --ink-accent: #185FA5;
  --chart-grid: rgba(15, 23, 42, 0.07);
  --chart-axis: rgba(15, 23, 42, 0.16);
  --chart-pointer: rgba(15, 23, 42, 0.30);
  --chart-glow: 0;
}

/* ── Buttons: the main button (.btn-primary) and the quiet one (.btn-quiet) as one set per theme
   (Shamim, 2026-10-24; the options side by side: /design/primary-buttons). Each set reads the
   theme's own colours, so it works in any theme. A theme takes its set below; a set can also be
   tried on any element with data-buttons="<name>" (that wins over the theme's).
   In use:
   · glow  — A, the original: a round pill, the blue gradient with its glow, the quiet button raised.
             Glow's, and Dark's (kept): Shamim finds Glow looks best with exactly this, not with Ink.
   · ink   — D: the main button in the strongest ink (white on dark, near-black on White), 8px corners,
             34px; the quiet button raised in the same rectangle. Midnight's and White's.
   Kept for later, used by no theme:
   · flat         — B: one flat blue, 8px corners; the quiet button an edge only.
   · flat-raised  — B+: B's flat blue with ink's raised quiet button.
   · pressable    — C: B+ with depth on the blue too: a darker edge, a thin light line on top. ── */
:where(:root), [data-buttons="glow"] {
  --btn-h: 38px; --btn-sm-h: 30px; --btn-radius: 999px; --btn-sm-radius: 999px;
  /* The menu's rows (the page you are on is filled in this shape) and search boxes: the same corners as the buttons. */
  --btn-row-radius: 22px; --btn-field-radius: 999px;
  --btn-pad: 0 18px; --btn-pad-quiet: 0 16px; --btn-sm-pad: 0 12px;
  --btn-primary-bg: linear-gradient(160deg, var(--accent-hover), var(--blue));
  --btn-primary-bg-hover: linear-gradient(160deg, var(--accent-hover), var(--blue));
  --btn-primary-hover-filter: brightness(1.08);
  --btn-primary-ink: var(--on-accent);
  --btn-primary-border: transparent;
  --btn-primary-shadow: var(--accent-glow);
  --btn-primary-press: none;
  --btn-quiet-bg: var(--panel-raised); --btn-quiet-bg-hover: var(--panel-2);
  --btn-quiet-ink: var(--text-strong); --btn-quiet-icon: var(--text-2); --btn-quiet-border: var(--border-strong);
  --btn-quiet-shadow: 0 1px 0 var(--border-strong), inset 0 1px 0 var(--hover-strong);
  --btn-quiet-lift: translateY(-1px);
}
:where(:root[data-theme="midnight"], :root[data-theme="white"]), [data-buttons="ink"] {
  --btn-h: 34px; --btn-sm-h: 30px; --btn-radius: 8px; --btn-sm-radius: 7px;
  --btn-row-radius: 10px; --btn-field-radius: 10px;
  --btn-pad: 0 14px; --btn-pad-quiet: 0 14px; --btn-sm-pad: 0 11px;
  --btn-primary-bg: var(--text-strong);
  --btn-primary-bg-hover: color-mix(in srgb, var(--text-strong) 86%, var(--panel-raised));
  --btn-primary-hover-filter: none;
  --btn-primary-ink: var(--panel-raised);
  --btn-primary-border: transparent;
  --btn-primary-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-raised) 18%, transparent), 0 1px 2px color-mix(in srgb, var(--text-strong) 25%, transparent);
  --btn-primary-press: translateY(1px);
  --btn-quiet-bg: var(--panel-raised); --btn-quiet-bg-hover: var(--panel-2);
  --btn-quiet-ink: var(--text-strong); --btn-quiet-icon: var(--text-2); --btn-quiet-border: var(--border-strong);
  --btn-quiet-shadow: 0 1px 0 var(--border-strong), inset 0 1px 0 var(--hover-strong);
  --btn-quiet-lift: translateY(-1px);
}
[data-buttons="flat"], [data-buttons="flat-raised"], [data-buttons="pressable"] {
  --btn-h: 34px; --btn-sm-h: 30px; --btn-radius: 8px; --btn-sm-radius: 7px;
  --btn-row-radius: 10px; --btn-field-radius: 10px;
  --btn-pad: 0 14px; --btn-pad-quiet: 0 14px; --btn-sm-pad: 0 11px;
  --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-strong);
  --btn-primary-hover-filter: none;
  --btn-primary-ink: var(--on-accent);
  --btn-primary-border: transparent;
  --btn-primary-shadow: none;
  --btn-primary-press: none;
  --btn-quiet-bg: var(--panel-raised); --btn-quiet-bg-hover: var(--panel-2);
  --btn-quiet-ink: var(--text-strong); --btn-quiet-icon: var(--text-2); --btn-quiet-border: var(--border-strong);
  --btn-quiet-shadow: 0 1px 0 var(--border-strong), inset 0 1px 0 var(--hover-strong);
  --btn-quiet-lift: translateY(-1px);
}
[data-buttons="flat"] { --btn-quiet-bg: transparent; --btn-quiet-bg-hover: var(--hover-strong); --btn-quiet-shadow: none; --btn-quiet-lift: none; }
[data-buttons="pressable"] {
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-border: var(--accent-strong);
  --btn-primary-shadow: inset 0 1px 0 color-mix(in srgb, var(--on-accent) 28%, transparent), 0 1px 2px color-mix(in srgb, var(--accent-strong) 60%, transparent);
  --btn-primary-press: translateY(1px);
}

html { background-color: var(--page); }
body {
  font-family: var(--font);
  color: var(--text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}
/* The glow field every page sits on: brand blues and one warm accent. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--page-glow), var(--page);
}
:root[data-theme="black"] body::before, :root[data-theme="midnight"] body::before, :root[data-theme="white"] body::before { background: var(--page); }

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--panel-opaque); }
}

.wordmark { letter-spacing: .5px; line-height: 1; white-space: nowrap; }
.wordmark .wm-a { font-weight: 200; color: var(--sky); }
.wordmark .wm-b { font-weight: 500; color: var(--wordmark-mid); }
.wordmark .wm-c { font-weight: 800; color: var(--wordmark-strong); }

svg.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.icon.icon-sm { width: 16px; height: 16px; }
svg.icon.icon-inline { vertical-align: -3px; }

:focus-visible { outline: 2px solid var(--ink-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }