/* The unbranded design tokens. docs/design-system.md, verbatim.
 *
 * The whole palette: the application is fully operational with nothing else
 * loaded. No component reads a colour directly, only these custom properties.
 *
 * Dark-first, per docs/design-system.md section 2.4: --tf-bg #0F172A, --tf-surface
 * #1E293B, --tf-text #F8FAFC, --tf-text-muted #94A3B8, brand #3370D4, accent
 * #06B6D4. The light palette below is the same system at light-mode contrast,
 * and the theme toggle moves between the two.

 */

/* ============================ 1. the base ============================== */
/* The dark palette is docs/design-system.md section 2.4 verbatim: --tf-bg #0F172A,
   --tf-surface #1E293B, --tf-text #F8FAFC, --tf-text-muted #94A3B8, brand
   #3370D4 and accent cyan #06B6D4. It is the palette the interactive demo
   ships, so the two artefacts look like one product rather than two.
   Dark is the default, per the design system.

   Two departures, both measured. Rose is lifted from #F43F5E to #FB7185
   because the shipped rose is 3.98:1 on --tf-surface and carries small text
   here. And light mode is not the same hexes at lower contrast: cyan is
   2.43:1 on white, so light gets a darker teal. Every ink and status colour
   below clears 4.5:1 on every surface it is printed on, in both themes. A
   figure a reader has to squint at is a figure he takes on trust, which is
   the one thing this document exists to avoid. */
:root{
  --bg:#0F172A; --panel:#1E293B; --sunk:#172032;
  --line:#33415580; --line2:#33415547;
  --ink:#F8FAFC; --ink2:#CBD5E1; --ink3:#94A3B8;
  --brand:#3370D4; --accent:#06B6D4; --accent-line:#06B6D4;
  --ok:#34D399; --warn:#F59E0B; --bad:#FB7185; --void:#94A3B8;
  --glow:rgba(51,112,212,.25);
  --hi:#0E2D42; --hi-ink:#06B6D4;
  --l0:#60A5FA;--l1:#5EEAD4;--l2:#34D399;--l3:#C084FC;--l4:#FBBF24;--l5:#F472B6;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,monospace;
  --rail:16rem;
}
/* One light palette, defined once and applied by both the system preference
   and the explicit override, so neither can drift from the other. */
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#F4F6F8;--panel:#FFF;--sunk:#EDF0F3;--line:#CBD3DC;--line2:#DFE4EA;
    --ink:#0F1720;--ink2:#4A5563;--ink3:#5A6675;
    --accent:#0E7490;--accent-line:#0E7490;
    --ok:#047857;--warn:#92610A;--bad:#B91C1C;--void:#5A6675;
    --glow:rgba(51,112,212,.22);--hi:#D6E6EC;--hi-ink:#0B6076;
    --l0:#1D4ED8;--l1:#0E7490;--l2:#047857;--l3:#7E22CE;--l4:#92610A;--l5:#BE185D;}
}
:root[data-theme="light"]{
  --bg:#F4F6F8;--panel:#FFF;--sunk:#EDF0F3;--line:#CBD3DC;--line2:#DFE4EA;
  --ink:#0F1720;--ink2:#4A5563;--ink3:#5A6675;
  --accent:#0E7490;--accent-line:#0E7490;
  --ok:#047857;--warn:#92610A;--bad:#B91C1C;--void:#5A6675;
  --glow:rgba(51,112,212,.22);--hi:#D6E6EC;--hi-ink:#0B6076;
    --l0:#1D4ED8;--l1:#0E7490;--l2:#047857;--l3:#7E22CE;--l4:#92610A;--l5:#BE185D;}
:root[data-theme="dark"]{
  --bg:#0F172A;--panel:#1E293B;--sunk:#172032;--line:#33415580;--line2:#33415547;
  --ink:#F8FAFC;--ink2:#CBD5E1;--ink3:#94A3B8;
  --accent:#06B6D4;--accent-line:#06B6D4;
  --ok:#34D399;--warn:#F59E0B;--bad:#FB7185;--void:#94A3B8;
  --glow:rgba(51,112,212,.25);--hi:#0E2D42;--hi-ink:#06B6D4;
  --l0:#60A5FA;--l1:#5EEAD4;--l2:#34D399;--l3:#C084FC;--l4:#FBBF24;--l5:#F472B6;}

/* Somebody who has asked their operating system for more contrast gets
   harder borders, not just the same page again. */
@media(prefers-contrast:more){
  :root{--line:#5A6675;--line2:#4A5563;--ink2:var(--ink);--ink3:var(--ink2)}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* Sized in rem so a reader who has raised their browser's default font size
   gets a larger document rather than the same 15px we happened to pick. */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;text-underline-offset:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- shell ------------------------------------------------------------ */
.shell{display:block}
@media(min-width:1040px){
  .shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
    gap:clamp(2rem,4vw,4rem);max-width:1400px;margin:0 auto;
    padding:0 clamp(1rem,3vw,2.5rem)}
}
/* Trailing space so the final chapters can be scrolled to the top of the
   viewport like any other. Without it the document ends while the last two
   are still stranded in the lower half of the screen, which means the
   contents rail can never mark them however the marking is computed. */
.doc{max-width:60rem;margin:0 auto;min-width:0;
  padding:0 clamp(1rem,4vw,2rem) calc(60vh + 4rem)}
@media(min-width:1040px){.doc{padding-left:0;padding-right:0;margin:0}}

/* ---- contents rail ---------------------------------------------------- */
.rail{display:none}
@media(min-width:1040px){
  .rail{display:block;position:sticky;top:0;align-self:start;height:100vh;
    overflow-y:auto;padding:2.5rem 0 3rem;border-right:1px solid var(--line2)}
}

/* ==================== 3. spacing, type, radius, elevation ============== */
/* The 4px base grid of docs/design-system.md section 4, plus the type, radius and
 * elevation steps the application actually uses. None of this is brand
 * identity -- it is geometry -- and app.css depends on it in more than thirty
 * places.
 *
 * Not applied wholesale: retrofitting every existing value would be a large
 * change with no visual gain and a real chance of breaking a layout that is
 * already correct. New work uses these, and the most visible surfaces have
 * been moved onto them.
 */
:root{
  --space-3xs:.125rem; --space-2xs:.25rem; --space-xs:.5rem;
  --space-sm:.75rem;   --space-md:1rem;    --space-lg:1.25rem;
  --space-xl:1.5rem;   --space-2xl:2rem;   --space-3xl:2.5rem;
  --space-4xl:3rem;    --space-5xl:4rem;   --space-6xl:8rem;

  --text-100:.75rem;  --text-200:.875rem; --text-300:1rem;
  --text-400:1.125rem; --text-500:1.25rem; --text-600:1.5rem;
  --text-700:1.75rem; --text-800:2rem;    --text-900:2.25rem;
  --text-1000:2.5rem; --text-1100:3rem;   --text-1200:3.5rem;

  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px;
  --radius-rounded:9999px;

  --elevation-01:0 1px 4px 0 rgba(0,0,0,.2);
  --elevation-02:0 2px 8px 0 rgba(0,0,0,.2);
  --elevation-03:0 4px 16px 0 rgba(0,0,0,.2);
  --elevation-04:0 6px 24px 0 rgba(0,0,0,.2);
  --elevation-05:0 12px 32px 0 rgba(0,0,0,.2);

  --tracking-tight:-.031rem; --tracking-default:0rem; --tracking-wide:.031rem;
}

/* ==================== 4. data visualization series ===================== */
/* Six categorical slots for figures, in the validated order (blue, orange,
 * aqua, yellow, magenta, green). Validated with the data-viz palette checker
 * against this app's own panel surfaces on 1 October 2026:
 *   dark  on #1E293B: band, chroma, adjacent CVD (worst 8.4) and the
 *                     normal-vision floor (worst 19.3) pass; green #008300 is
 *                     2.96:1, so figures carry labels and a table view.
 *   light on #FFFFFF: all hard checks pass (worst CVD 9.1, normal 19.6);
 *                     aqua, yellow and magenta are under 3:1, same relief.
 * Each figure assigns a slot to a drug, never to a rank, so a drug keeps its
 * colour in every figure. */
:root{
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
  --series-4:#c98500; --series-5:#d55181; --series-6:#008300;
  --viz-grid:#2c3a4f; --viz-axis:#475569;
}
@media(prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
    --series-4:#eda100; --series-5:#e87ba4; --series-6:#008300;
    --viz-grid:#e5e9ee; --viz-axis:#b8c2cd;
  }
}
:root[data-theme="light"]{
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --series-4:#eda100; --series-5:#e87ba4; --series-6:#008300;
  --viz-grid:#e5e9ee; --viz-axis:#b8c2cd;
}
:root[data-theme="dark"]{
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
  --series-4:#c98500; --series-5:#d55181; --series-6:#008300;
  --viz-grid:#2c3a4f; --viz-axis:#475569;
}