/* ============================================================================
   GVN · Design tokens
   ----------------------------------------------------------------------------
   SINGLE HOME. Every application surface (sign in · API token · cabinet · lookup
   · versions · admin · API reference) imports THIS file — one source of truth,
   no drift. Direction: deep-ink navy, indigo trust-accent, glass layers,
   semantic status colour. --bg / --accent / --ok / --danger / --ink are the
   canonical values — change them ONLY in lockstep. Sharp geometry, hairline
   borders carry elevation, monospace for ALL machine data, one accent, restrained
   motion.
   ============================================================================ */

/* Vendored Geist / Geist Mono — served at /demo/fonts, no runtime CDN.
   Inter / JetBrains Mono stay as fallback. */
@font-face { font-family:"Geist"; src:url("/demo/fonts/Geist-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Geist"; src:url("/demo/fonts/Geist-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Geist"; src:url("/demo/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/demo/fonts/GeistMono-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("/demo/fonts/GeistMono-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; }

:root {

  /* ── COLOR · backgrounds (deep-ink navy, layered by elevation) ───────────── */
  --bg:          #0b0e14;   /* page                                            */
  --bg-subtle:   #0e1320;   /* elevated surface / card / table                 */
  --bg-hover:    #131a2b;   /* row / control hover                             */
  --bg-active:   #182136;   /* pressed / selected                             */

  /* ── COLOR · foreground (text) ───────────────────────────────────────────── */
  --ink:         #eef1f7;   /* alias — primary text                           */
  --fg:          #eef1f7;   /* primary text (= --ink)                          */
  --fg-muted:    #9aa6b8;   /* secondary text                                 */
  --fg-subtle:   #5d6678;   /* tertiary / placeholder (decor + input hints)   */
  /* AA-ink for tertiary CONTENT text (not placeholders): --fg-subtle #5d6678 is 3.21:1
     on the card — a WCAG-AA fail for meaningful copy (timestamps, the not_verified status
     badge). This paired ink is ≥5.0:1 on all four surface backgrounds yet still dimmer than
     --fg-muted, so the tertiary<secondary hierarchy holds. Deliberately NOT a global
     --fg-subtle change (that would over-brighten input placeholders). */
  --fg-subtle-ink: #8591a6;

  /* ── COLOR · borders (HAIRLINE carries elevation) ────────────────────────── */
  --border:        rgba(255,255,255,.14); /* default 1px hairline              */
  --border-subtle: rgba(255,255,255,.08); /* row separators                    */
  --border-strong: rgba(255,255,255,.22); /* hover / focus border              */
  --glass:         rgba(255,255,255,.035);/* glass layer                       */
  --glass-2:       rgba(255,255,255,.055);

  /* ── COLOR · accent (single indigo trust-accent) ─────────────────────────── */
  --accent:      #6d8bff;
  --accent-fg:   #8aa2ff;                /* bright hover                          */
  --accent-deep: #4d6bef;                /* gradient base                         */
  --focus:     rgba(109,139,255,.30);    /* keyboard focus ring / accent glow  */
  --grid:      rgba(255,255,255,.025);   /* subtle technical backdrop grid     */

  /* ── COLOR · inverse (primary-on-light) ──────────────────────────────────── */
  --inverse-bg:       #ffffff;
  --inverse-fg:       #0b0e14;
  --inverse-bg-hover: #e5e9f2;

  /* ── COLOR · semantic status (badge = dot + text + border; NEVER color-only) ─
     Lifecycle statuses are semantically coloured (no bare B&W): In review = amber,
     Submitted/Processing = calm replay-blue, Locked = muted.
     --ok / --danger are the semantic success / error pair.
     🔴 --pending/--verified/--rejected stay RESERVED for the later review-gate /
     seal / badge stages — never a "verified/approved" colour story before it is
     earned. Do not use them on a surface yet.                                  */
  --ok:       #5ee0b0;  /* success                                             */
  --danger:   #ff7a85;  --danger-bg:   rgba(255,122,133,0.08);  --danger-border: rgba(255,122,133,0.45);
                        /* --danger: error / destructive; the -bg/-border tones
                           are the SAME rgb triple (keep in sync) — rgba() form so
                           computed styles stay machine-parseable (rgb-form)      */
  --replay:   #79b8ff;  /* calm neutral — Submitted/Processing                  */
  --review:   #f5a623;  --review-border:   rgba(245,166, 35,0.35);  --review-bg: rgba(245,166, 35,0.08);
  /* Flag-badge / drill-in triplets (12-U): the -bg/-border tones share each base
     colour's rgb triple (kept in sync, rgba() form so computed styles stay
     machine-parseable). --ok = consistent · --accent(-fg) = resolved / engine —
     🔴 NEVER the reserved --verified/--pending/--rejected (governance §6). */
  --ok-bg:     rgba( 94,224,176,0.08);  --ok-border:     rgba( 94,224,176,0.35);
  --accent-bg: rgba(109,139,255,0.10);  --accent-border: rgba(109,139,255,0.35);
  --locked:   #eef1f7;  --locked-bg:   #182136;  --locked-border: rgba(255,255,255,.14);
  --pending:  #3291ff;  --pending-bg:  rgba( 50,145,255,0.10);  --pending-border:  rgba( 50,145,255,0.30);
  --verified: #3fb950;  --verified-bg: rgba( 63,185, 80,0.10);  --verified-border: rgba( 63,185, 80,0.30);
  --rejected: #f85149;  --rejected-bg: rgba(248, 81, 73,0.10);  --rejected-border: rgba(248, 81, 73,0.30);

  /* ── TYPOGRAPHY (Geist vendored) ─────────────────────────────────────────── */
  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Mono is MANDATORY for machine data: dates, region codes, periods, record ids,
     digital fingerprints, tokens, revision counters. Sans for prose/labels.      */
  /* Size scale (px / line):  xs 12/16 · sm 13/18 · base 14/20 · md 16/24 ·
     lg 18/26 · xl 20/28 · 2xl 24/32 · 3xl 30/36   — UI base = 14.                */
  /* Weights: 400 normal · 500 medium (UI default) · 600 semibold (headings).
     Avoid 700. Heading letter-spacing -0.02em; mono 0.                            */

  /* ── SPACING (4px base scale) ────────────────────────────────────────────── */
  /* 1=4  2=8  3=12  4=16  5=20  6=24  8=32  10=40  12=48  16=64                  */

  /* ── RADIUS (SHARP — the console keeps sharp edges; the shared DNA is the
        palette, not the corner radius) ──────────────────────────────────────── */
  --radius:      2px;   /* buttons · inputs · badges                            */
  --radius-md:   3px;   /* cards · panels                                       */
  --radius-none: 0;

  /* ── ELEVATION (minimal — hairline borders do the work) ──────────────────── */
  --shadow-sm: 0 1px 2px rgba(4,6,10,0.45);
  --shadow-md: 0 4px 12px rgba(4,6,10,0.55);

  /* ── MOTION (restrained, premium) ────────────────────────────────────────── */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur:      200ms;
}

/* ============================================================================
   BASE LAYER — shared by ALL surfaces. Each surface links THIS file; nothing
   below is redefined per-surface (machine-checkable consistency, zero drift).
   ============================================================================ */

html, body { background: var(--bg); color: var(--fg); font-feature-settings: "cv11","ss01"; }
body {
  font-family: var(--font-sans);
  /* technical grid backdrop — structure reads as trust, restrained */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* PRIMARY CALL-TO-ACTION — the ONE main action per surface. Single indigo tone
   via the token house (NOT per-surface hex). 🔴 background is NOT transitioned:
   the colour must resolve from var(--accent) instantly (the computed colour is
   read synchronously after a token override). */
.btn-primary {
  background: var(--accent);
  color: var(--inverse-bg);
  border: 1px solid var(--accent);
  box-shadow: 0 4px 14px var(--focus);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              filter var(--dur) var(--ease);
}
/* hover feedback = brightness, NOT a colour swap — the computed background must keep
   resolving from var(--accent) in every state (it is read under a token override,
   and the pointer may legitimately rest on the control) */
.btn-primary:hover { filter: brightness(1.12); border-color: var(--accent-fg); }

/* utility bridge — legacy raw-black utilities used by the surface markup map
   onto the navy token family (the surface markup is a pinned artefact; the
   palette shift happens HERE, in the one token home) */
.bg-black\/80 { background-color: rgba(11,14,20,.82) !important; }
.divide-\[\#1a1a1d\] > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-subtle) !important; }

/* brandmark chip — an indigo glow chip on the console "G" (the surfaces ship it
   as a B&W hairline square; the utility combo below is the brandmark's unique
   signature across all surfaces — serving-layer restyle, surface markup untouched). */
.h-6.w-6.border.hairline.mono, .h-7.w-7.border.hairline.mono {
  border-color: transparent !important;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--accent-fg), var(--accent-deep));
  box-shadow: 0 0 18px var(--focus);
  color: #fff;
}

/* monospace for ALL machine data (dates · ids · hashes · tokens · counters) */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tracking-tightish { letter-spacing: -0.01em; }
.hairline { border-color: var(--border); }

/* LOAD-ERROR ALERT — the ONE danger-alert formula for failure states, the same
   tone the login error carries: danger text + 45% border + 8% wash, tokens only
   (var(--danger*), no per-surface hex). A failed load must READ as an error,
   never as muted body copy. */
.alert-danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

table tbody tr:hover { background: var(--bg-hover); }

/* keyboard focus = single accent ring (a11y; mouse pointer unaffected) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

::selection { background: var(--accent); color: var(--inverse-bg); }

/* ============================================================================
   12-U ADMIN READ SURFACES — flag badge · actor chip · timeline rail · radio card.
   BASE layer (one home, not inline in the page JS): the admin list badges each
   report with its report-level verdict at a glance, the drill-in log weaves an
   actor-attributed timeline, and the resolve modal offers two radio-card choices.
   🔴 a11y: every badge/chip carries the human LABEL beside the colour (dot + text),
   never colour-only. 🔴 governance §6: resolved/reviewer/Reviewed ride only
   --ok / --accent-fg / --fg-muted — NEVER the reserved --verified/--pending/--rejected.
   ============================================================================ */

/* ── FLAG BADGE — report-level verdict (mismatch/unverifiable/not_verified/
      consistent/resolved). Dot + TEXT + border, mono uppercase, sharp (--radius). */
.flag {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1px 7px; font-family: var(--font-mono); font-size: 10px; line-height: 16px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted);
  white-space: nowrap;
}
.flag::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; }
.flag-mismatch    { color: var(--danger);    border-color: var(--danger-border); background: var(--danger-bg); }
.flag-unverif     { color: var(--review);    border-color: var(--review-border); background: var(--review-bg); }
.flag-notverified { color: var(--fg-subtle-ink); border-color: var(--border); }
/* Fill encodes an OPEN problem (mismatch/unverif only); the calm/done states are
   border-only, so a resolved/consistent report never out-weighs an open attention flag
   in the Flag column. --ok-bg/--accent-bg definitions stay (.radio-card.sel uses
   --accent-bg). Removing the accent-bg wash also keeps a "verified"-blue win off a
   resolved badge before it's earned (governance rule 6). */
.flag-clean       { color: var(--ok);        border-color: var(--ok-border); }
.flag-resolved    { color: var(--accent-fg); border-color: var(--accent-border); }

/* ── ACTOR CHIP — every timeline event is attributed (engine/client/reviewer). */
.actor {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: 9px; line-height: 1; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 5px; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--fg-muted);
}
.actor-engine   { color: var(--accent-fg); border-color: var(--accent-border); }
.actor-client   { color: var(--fg-muted); }
.actor-reviewer { color: var(--ok); border-color: var(--ok-border); }

/* ── TIMELINE RAIL — the A-rich per-report log, chronological (v1 at top). */
.tl { position: relative; margin-left: 6px; padding-left: 22px; border-left: 1px solid var(--border); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -27px; top: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--fg-subtle);
}
.tl-dot.engine   { border-color: var(--accent-fg); background: var(--accent-fg); }
.tl-dot.client   { border-color: var(--fg-muted); }
.tl-dot.reviewer { border-color: var(--ok); background: var(--ok); }
.tl-dot.now      { border-color: var(--fg); background: var(--fg); }
/* the ONE red dot per report — a mismatch flag, with a soft glow */
.tl-dot.flag     { border-color: var(--danger); background: var(--danger);
                   box-shadow: 0 0 0 3px var(--danger-bg); }
.tl-time   { font-family: var(--font-mono); font-size: 11px; color: var(--fg-subtle-ink); }
.tl-title  { font-size: 13px; color: var(--fg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-detail { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }

/* ── RADIO CARD — the resolve modal's two choices (corrected vs confirm). */
.radio-card {
  display: block; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 14px; cursor: pointer; transition: border-color var(--dur) var(--ease);
}
.radio-card:hover { border-color: var(--border-strong); }
.radio-card.sel { border-color: var(--accent); background: var(--accent-bg); }