/* ============================================================================
   Medcue — VITALS app skin. Loads AFTER verdict.css + app-verdict.css on the
   app shell (Today · Practice · Learning · Review · Verdict · Partners) and
   remaps the VERDICT registry tokens to the Vitals dark clinical monitor:
   deep navy ground, mint signal, amber alerts, hairline rules.

   No component is restructured and no JS contract changes — this is a token
   reskin. The two white paper artefacts (.vd-report, .vd-specimen) are
   deliberately re-scoped back to the light registry palette: the printed
   document never darkens.
   Contrast (verified on #12222E): #E9F1F5 14.2:1 · #A7BCC8 8.3:1 ·
   mint #5EEAD4 11:1 · amber #F4B740 9:1.
   ========================================================================== */

body.vd.av-app {
  /* ground */
  --chalk: #0B1620;      /* page ground → deepest navy                   */
  --chalk-2: #183041;    /* recessed bands / hovers → raised panel       */
  --paper: #FFFFFF;      /* the printed artefacts — sacred, unchanged    */

  /* text */
  --ink: #E9F1F5;        /* primary text (light on dark)                 */
  --ink-2: #A7BCC8;      /* secondary text                               */
  --hairline: #22394A;   /* 1px inner rules                              */
  --slate: #6E8595;      /* INSUFFICIENT DATA + disabled (large only)    */

  /* signals */
  --theatre: #5EEAD4;    /* the single accent → mint “alive / ready”     */
  --theatre-hover: #8AF0E1;
  --theatre-tint: #123B33; /* READY fills on the dark ground             */
  --amber: #F4B740;      /* NOT YET — alert amber for dark panels        */

  /* local Vitals extras for the overrides below */
  --vt-panel: #12222E;
  --vt-panel-2: #183041;
  --vt-line: #22394A;
  --vt-line-2: #2E4E63;
  --vt-accent-ink: #072019;

  /* rules — Vitals hairline discipline (1px, low-emission) */
  --rule: 1px solid var(--vt-line-2);
  --rule-hairline: 1px solid var(--vt-line);

  /* type — the three Vitals roles */
  --font-display: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', 'Hanken Grotesk Fallback', -apple-system, 'Segoe UI', Arial,
    sans-serif;

  /* paper shadow gains depth on the dark ground */
  --sh-paper: 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px -18px rgba(0, 0, 0, 0.75);

  color-scheme: dark;
  /* Space Grotesk tops out at 700 — never fake an 800 */
  font-synthesis: none;
  background:
    radial-gradient(1100px 560px at 82% -10%, rgba(94, 234, 212, 0.06), transparent 60%),
    radial-gradient(820px 480px at 4% 2%, rgba(244, 183, 64, 0.04), transparent 55%),
    var(--chalk);
}

body.vd.av-app ::selection {
  background: rgba(94, 234, 212, 0.28);
  color: var(--ink);
}

/* visible focus — 2px mint ring on the dark ground */
body.vd.av-app :focus-visible {
  outline: 2px solid var(--theatre);
  outline-offset: 3px;
}

/* headings sit tighter in Space Grotesk */
body.vd.av-app h1,
body.vd.av-app h2,
body.vd.av-app h3,
body.vd.av-app h4,
body.vd.av-app .av-title,
body.vd.av-app .av-next-title,
body.vd.av-app .av-focus-title,
body.vd.av-app .av-signoff {
  letter-spacing: -0.02em;
}

/* ---------------- buttons: mint fill needs dark text ---------------- */
body.vd.av-app .vd-btn-primary {
  color: var(--vt-accent-ink);
  border-radius: 10px;
  box-shadow: 0 8px 24px -12px rgba(94, 234, 212, 0.65);
}
body.vd.av-app .vd-btn-primary:hover {
  color: var(--vt-accent-ink);
}
body.vd.av-app .vd-btn-quiet {
  border: 1px solid var(--vt-line-2);
  border-radius: 10px;
  color: var(--ink);
}
body.vd.av-app .vd-btn-quiet:hover {
  border-color: var(--theatre);
  color: var(--theatre);
  background: rgba(94, 234, 212, 0.07);
}
body.vd.av-app .vd-btn[disabled],
body.vd.av-app .vd-btn.is-disabled {
  border-color: var(--vt-line-2);
  color: var(--slate);
}

/* ---------------- verdict flags on the dark ground ---------------- */
body.vd.av-app .vd-flag--notyet {
  background: color-mix(in srgb, var(--amber) 10%, var(--vt-panel));
}
body.vd.av-app .vd-flag--insufficient {
  color: var(--ink-2);
  background: color-mix(in srgb, var(--slate) 14%, var(--vt-panel));
}

/* ---------------- range bar (never a gauge) ---------------- */
body.vd.av-app .rb-track {
  background: var(--vt-panel-2);
  border-color: var(--vt-line);
  border-radius: 5px;
  overflow: hidden;
}
body.vd.av-app .rb-ci {
  background: color-mix(in srgb, var(--theatre) 32%, var(--vt-panel-2));
}
body.vd.av-app .rb-dot {
  border-color: var(--chalk);
}
body.vd.av-app .vd-rangebar.is-insufficient .rb-ci {
  background: color-mix(in srgb, var(--slate) 22%, var(--vt-panel-2));
}
body.vd.av-app .vd-rangebar.is-insufficient .rb-dot {
  background: var(--vt-panel);
  border-color: var(--slate);
}

/* ---------------- ledgers, strips, panels ---------------- */
body.vd.av-app a.led-row:hover,
body.vd.av-app .led-row.is-hover {
  background: var(--vt-panel);
}
body.vd.av-app .av-day.is-active {
  background: var(--vt-panel);
}
body.vd.av-app .av-day.is-today {
  box-shadow: inset 0 -2px 0 var(--theatre);
}
body.vd.av-app .vd-band {
  background: var(--vt-panel);
}

/* ---------------- the printed artefacts stay light ----------------
   Inside the white report/specimen every registry token reverts, so all
   descendants (flags, range bars, meta, rules) read as printed ink. */
body.vd.av-app .vd-report,
body.vd.av-app .vd-specimen {
  --chalk: #EBE8E1;
  --chalk-2: #E0DDD3;
  --ink: #201F1A;
  --ink-2: #5A574E;
  --hairline: #CFCBC0;
  --slate: #8B877C;
  --theatre: #0B5B44;
  --theatre-hover: #07452F;
  --theatre-tint: #DEE8E0;
  --amber: #A6590C;
  --rule: 1.5px solid var(--ink);
  --rule-hairline: 1px solid var(--hairline);
  --font-display: 'Besley', 'Besley Fallback', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  color-scheme: light;
  border: var(--rule-hairline);
}
body.vd.av-app .vd-report :focus-visible,
body.vd.av-app .vd-specimen :focus-visible {
  outline-color: var(--ink);
}
body.vd.av-app .vd-report .rb-track {
  background: var(--chalk-2);
  border-color: var(--hairline);
  border-radius: 0;
  overflow: visible;
}
body.vd.av-app .vd-report .rb-ci {
  background: color-mix(in srgb, var(--theatre) 24%, var(--paper));
}
body.vd.av-app .vd-report .rb-dot {
  border-color: var(--paper);
}
body.vd.av-app .vd-report .vd-flag--notyet {
  background: color-mix(in srgb, var(--amber) 8%, var(--paper));
}
body.vd.av-app .vd-report .vd-flag--insufficient {
  color: var(--slate);
  background: color-mix(in srgb, var(--slate) 10%, var(--paper));
}
body.vd.av-app .vd-report .vd-btn-primary {
  color: #ffffff;
  box-shadow: none;
}

/* ---------------- app footer ---------------- */
body.vd.av-app .av-foot {
  border-top: 1px solid var(--vt-line);
}

/* ---------------- reduced motion: nothing here animates anyway ------------ */
@media (prefers-reduced-motion: reduce) {
  body.vd.av-app * {
    transition-duration: 0.01ms !important;
  }
}