/* Iridescent design tokens, shared by the website and the app.
   Thesis: a calm reading-room instrument. Solid tonal surfaces, one typeface with tabular figures,
   a teal accent reserved for actions and selection, semantic colours for clinical states, and a
   dark viewing panel for radiographs. */
:root {
  --bg: #f3f5f5;
  --surface: #ffffff;
  --surface-2: #eceff0;
  --line: #dde3e4;
  --line-2: #c9d2d3;
  --ink: #142021;
  --ink-2: #465557;
  --ink-3: #6e7b7d;
  --accent: #0e7a6c;
  --accent-ink: #ffffff;
  --accent-soft: #e2f1ee;
  /* clinical states */
  --finding: #b3261e;      --finding-soft: #fbeae8;
  --possible: #a15c07;     --possible-soft: #fcf1e1;
  --clear: #1d6b43;        --clear-soft: #e5f2ea;
  --note: #4b5f82;         --note-soft: #e9eef7;
  /* explanation maps (match the engine's overlays) */
  --map-for: #e63946;
  --map-against: #3884f4;
  /* the radiograph viewing panel is always dark, as on a reading station */
  --stage: #0c1112;
  --stage-ink: #d9e1e2;
  --stage-line: #243033;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 28, 30, 0.06);
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1213; --surface: #141b1c; --surface-2: #1b2425; --line: #263133; --line-2: #34423f;
    --ink: #e6eded; --ink-2: #a9b5b6; --ink-3: #7a8788;
    --accent: #3fc1aa; --accent-ink: #04201b; --accent-soft: #15302b;
    --finding: #f0746a; --finding-soft: #3a1d1b; --possible: #eeb35c; --possible-soft: #33260f;
    --clear: #62c690; --clear-soft: #16291f; --note: #9db2d8; --note-soft: #1c2433;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1213; --surface: #141b1c; --surface-2: #1b2425; --line: #263133; --line-2: #34423f;
  --ink: #e6eded; --ink-2: #a9b5b6; --ink-3: #7a8788;
  --accent: #3fc1aa; --accent-ink: #04201b; --accent-soft: #15302b;
  --finding: #f0746a; --finding-soft: #3a1d1b; --possible: #eeb35c; --possible-soft: #33260f;
  --clear: #62c690; --clear-soft: #16291f; --note: #9db2d8; --note-soft: #1c2433;
  --shadow: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.6 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 16px; }
.brand-mark { width: 24px; height: 24px; flex: none; }

/* buttons: one primary per view, quiet secondary */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px;
  border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: 14.5px; text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-soft { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-soft:hover { border-color: var(--ink-3); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.muted { color: var(--ink-3); }

/* status: a static dot, coloured by meaning (no pulsing) */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.live { background: var(--clear); }
.dot.warn { background: var(--possible); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; }
}