/* GENERATED by build/tokens.mjs from seed #2457A7 — do not edit by hand. */
:root, :root[data-theme="light"] {
  --md-sys-color-primary: #2b5cad;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d8e2ff;
  --md-sys-color-on-primary-container: #001a41;
  --md-sys-color-secondary: #565e71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dbe2f9;
  --md-sys-color-on-secondary-container: #141b2c;
  --md-sys-color-error: #ba1a1a;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-surface: #fefbff;
  --md-sys-color-on-surface: #1b1b1f;
  --md-sys-color-surface-variant: #e1e2ec;
  --md-sys-color-on-surface-variant: #44474f;
  --md-sys-color-outline: #74777f;
  --md-sys-color-outline-variant: #c4c6d0;
  --md-sys-color-inverse-surface: #303033;
  --md-sys-color-inverse-on-surface: #f2f0f4;
  --md-sys-color-inverse-primary: #adc6ff;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  --md-sys-color-tertiary: #00696d;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #6ff6fd;
  --md-sys-color-on-tertiary-container: #002021;
  --md-sys-color-surface-dim: #dbd9dd;
  --md-sys-color-surface-bright: #faf9fd;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f3f7;
  --md-sys-color-surface-container: #efedf1;
  --md-sys-color-surface-container-high: #e9e7ec;
  --md-sys-color-surface-container-highest: #e3e2e6;
  --md-sys-color-warning: #974806;
  --md-sys-color-on-warning: #ffffff;
  --md-sys-color-warning-container: #ffdbc8;
  --md-sys-color-on-warning-container: #321300;
  --md-sys-color-success: #006d44;
  --md-sys-color-on-success: #ffffff;
  --md-sys-color-success-container: #91f7bd;
  --md-sys-color-on-success-container: #002111;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --md-sys-color-primary: #adc6ff;
  --md-sys-color-on-primary: #002e69;
  --md-sys-color-primary-container: #004493;
  --md-sys-color-on-primary-container: #d8e2ff;
  --md-sys-color-secondary: #bfc6dc;
  --md-sys-color-on-secondary: #293041;
  --md-sys-color-secondary-container: #3f4759;
  --md-sys-color-on-secondary-container: #dbe2f9;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000a;
  --md-sys-color-on-error-container: #ffb4ab;
  --md-sys-color-surface: #1b1b1f;
  --md-sys-color-on-surface: #e3e2e6;
  --md-sys-color-surface-variant: #44474f;
  --md-sys-color-on-surface-variant: #c4c6d0;
  --md-sys-color-outline: #8e9099;
  --md-sys-color-outline-variant: #44474f;
  --md-sys-color-inverse-surface: #e3e2e6;
  --md-sys-color-inverse-on-surface: #303033;
  --md-sys-color-inverse-primary: #2b5cad;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  --md-sys-color-tertiary: #4cd9e0;
  --md-sys-color-on-tertiary: #003739;
  --md-sys-color-tertiary-container: #004f52;
  --md-sys-color-on-tertiary-container: #6ff6fd;
  --md-sys-color-surface-dim: #121316;
  --md-sys-color-surface-bright: #38393c;
  --md-sys-color-surface-container-lowest: #0d0e11;
  --md-sys-color-surface-container-low: #1b1b1f;
  --md-sys-color-surface-container: #1f1f23;
  --md-sys-color-surface-container-high: #292a2d;
  --md-sys-color-surface-container-highest: #343538;
  --md-sys-color-warning: #ffb68a;
  --md-sys-color-on-warning: #522300;
  --md-sys-color-warning-container: #743400;
  --md-sys-color-on-warning-container: #ffdbc8;
  --md-sys-color-success: #75daa3;
  --md-sys-color-on-success: #003921;
  --md-sys-color-success-container: #005232;
  --md-sys-color-on-success-container: #91f7bd;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-sys-color-primary: #adc6ff;
    --md-sys-color-on-primary: #002e69;
    --md-sys-color-primary-container: #004493;
    --md-sys-color-on-primary-container: #d8e2ff;
    --md-sys-color-secondary: #bfc6dc;
    --md-sys-color-on-secondary: #293041;
    --md-sys-color-secondary-container: #3f4759;
    --md-sys-color-on-secondary-container: #dbe2f9;
    --md-sys-color-error: #ffb4ab;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000a;
    --md-sys-color-on-error-container: #ffb4ab;
    --md-sys-color-surface: #1b1b1f;
    --md-sys-color-on-surface: #e3e2e6;
    --md-sys-color-surface-variant: #44474f;
    --md-sys-color-on-surface-variant: #c4c6d0;
    --md-sys-color-outline: #8e9099;
    --md-sys-color-outline-variant: #44474f;
    --md-sys-color-inverse-surface: #e3e2e6;
    --md-sys-color-inverse-on-surface: #303033;
    --md-sys-color-inverse-primary: #2b5cad;
    --md-sys-color-scrim: #000000;
    --md-sys-color-shadow: #000000;
    --md-sys-color-tertiary: #4cd9e0;
    --md-sys-color-on-tertiary: #003739;
    --md-sys-color-tertiary-container: #004f52;
    --md-sys-color-on-tertiary-container: #6ff6fd;
    --md-sys-color-surface-dim: #121316;
    --md-sys-color-surface-bright: #38393c;
    --md-sys-color-surface-container-lowest: #0d0e11;
    --md-sys-color-surface-container-low: #1b1b1f;
    --md-sys-color-surface-container: #1f1f23;
    --md-sys-color-surface-container-high: #292a2d;
    --md-sys-color-surface-container-highest: #343538;
    --md-sys-color-warning: #ffb68a;
    --md-sys-color-on-warning: #522300;
    --md-sys-color-warning-container: #743400;
    --md-sys-color-on-warning-container: #ffdbc8;
    --md-sys-color-success: #75daa3;
    --md-sys-color-on-success: #003921;
    --md-sys-color-success-container: #005232;
    --md-sys-color-on-success-container: #91f7bd;
    color-scheme: dark;
  }
}

/* ============================================================
   base.css — reset, fonts, type scale, spacing, shape, motion,
   elevation, focus, reduced-motion. Consumes tokens.css roles.
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subset, variable) ---------- */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url('/phd-thesis/assets/fonts/roboto-flex-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Serif';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/phd-thesis/assets/fonts/roboto-serif-latin.woff2') format('woff2');
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Roboto Flex', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: var(--md-sys-color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, pre, kbd { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 0.9em; }
pre { overflow-x: auto; padding: var(--sp-4); background: var(--md-sys-color-surface-container); border-radius: var(--shape-md); }
table { border-collapse: collapse; }
:target { scroll-margin-top: 88px; }

/* ---------- Design tokens: spacing (8px base, 4px fine) ---------- */
:root {
  --sp-1: 0.25rem;  /* 4  */
  --sp-2: 0.5rem;   /* 8  */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */

  /* Shape scale */
  --shape-xs: 8px;    /* small controls */
  --shape-sm: 12px;   /* chips, compact cards */
  --shape-md: 16px;   /* standard cards */
  --shape-lg: 24px;   /* large panels */
  --shape-xl: 28px;   /* hero containers */
  --shape-pill: 999px;

  /* Motion */
  --motion-fast: 180ms;
  --motion-med: 280ms;
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph: cubic-bezier(0.3, 0, 0, 1);

  /* Elevation (reserved for floating elements only) */
  --elev-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
  --elev-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);

  /* Layout */
  --content-max: 1440px;
  --prose-max: 72ch;
  --appbar-h: 64px;
  --rail-w: 88px;
  --target-min: 44px;
}

/* ---------- Type scale (Material 3, brief-specified) ---------- */
.t-hero        { font-family: 'Roboto Serif', Georgia, serif; font-size: 3rem; line-height: 3.5rem; font-weight: 560; letter-spacing: -0.5px; }
.t-display     { font-size: 2.5rem; line-height: 3rem; font-weight: 480; letter-spacing: -0.25px; }
.t-headline-lg { font-size: 2rem; line-height: 2.5rem; font-weight: 440; }
.t-headline-md { font-size: 1.75rem; line-height: 2.25rem; font-weight: 440; }
.t-title-lg    { font-size: 1.375rem; line-height: 1.75rem; font-weight: 480; }
.t-title-md    { font-size: 1rem; line-height: 1.5rem; font-weight: 560; }
.t-body-lg     { font-size: 1rem; line-height: 1.625rem; }
.t-body-md     { font-size: 0.875rem; line-height: 1.375rem; }
.t-label-lg    { font-size: 0.875rem; line-height: 1.25rem; font-weight: 560; }
.t-caption     { font-size: 0.75rem; line-height: 1.125rem; color: var(--md-sys-color-on-surface-variant); }
.t-serif       { font-family: 'Roboto Serif', Georgia, serif; }

@media (max-width: 599px) {
  .t-hero        { font-size: 2.25rem; line-height: 2.75rem; }
  .t-display     { font-size: 2rem; line-height: 2.5rem; }
  .t-headline-lg { font-size: 1.75rem; line-height: 2.25rem; }
  .t-headline-md { font-size: 1.5rem; line-height: 2rem; }
}

h1, h2, h3, h4 { font-weight: 480; text-wrap: balance; }
.prose { max-width: var(--prose-max); }
.prose p + p { margin-top: var(--sp-4); }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--shape-sm) 0;
  font-weight: 560; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Utility ---------- */
/* An explicit display in author CSS beats the UA sheet's [hidden] rule, so
   assert it once here: anything marked hidden must actually be hidden. */
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   components.css — Material 3 component set for the companion.
   Tonal surfaces for containment; shadows only on floating UI.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--target-min); padding: 0 var(--sp-5);
  border: none; border-radius: var(--shape-pill); cursor: pointer;
  font-size: 0.875rem; font-weight: 560; line-height: 1.25rem;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-std), box-shadow var(--motion-fast) var(--ease-std);
}
.btn:hover { text-decoration: none; }
.btn-filled { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn-filled:hover { box-shadow: var(--elev-1); filter: brightness(1.08); }
.btn-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.btn-tonal:hover { filter: brightness(1.04); }
.btn-outlined { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.btn-outlined:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.btn-text { background: transparent; color: var(--md-sys-color-primary); padding: 0 var(--sp-3); }
.btn-text:hover { background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); }
.btn-icon {
  width: var(--target-min); height: var(--target-min); padding: 0;
  border-radius: var(--shape-pill); background: transparent; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--md-sys-color-on-surface-variant);
  transition: background-color var(--motion-fast) var(--ease-std);
}
.btn-icon:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.btn svg, .btn-icon svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }

/* ---------- Cards ---------- */
.card {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--shape-md);
  padding: var(--sp-5);
}
.card-outlined { background: var(--md-sys-color-surface); border: 1px solid var(--md-sys-color-outline-variant); }
.card-filled { background: var(--md-sys-color-surface-container); }
.card-hero { border-radius: var(--shape-xl); padding: var(--sp-6); }
a.card { display: block; color: inherit; text-decoration: none; transition: background-color var(--motion-fast) var(--ease-std); }
a.card:hover, a.card:focus-visible { background: var(--md-sys-color-surface-container-high); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 32px; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--shape-xs); border: 1px solid var(--md-sys-color-outline-variant);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-std);
}
.chip:hover { background: var(--md-sys-color-surface-container); }
.chip[aria-pressed="true"], .chip.selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}
.chip svg { width: 18px; height: 18px; fill: currentColor; }
.chip-status { cursor: default; border-radius: var(--shape-pill); font-size: 0.75rem; min-height: 24px; }
.chip-status.published, .chip-status.accepted { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); border-color: transparent; }
.chip-status.preprint { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-color: transparent; }
.chip-status.under-review, .chip-status.in-preparation { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); border-color: transparent; }

/* ---------- Segmented buttons ---------- */
.segmented { display: inline-flex; border: 1px solid var(--md-sys-color-outline); border-radius: var(--shape-pill); overflow: hidden; }
.segmented button {
  min-height: 40px; padding: 0 var(--sp-4); border: none; background: transparent; cursor: pointer;
  font-size: 0.875rem; font-weight: 500; color: var(--md-sys-color-on-surface);
  border-left: 1px solid var(--md-sys-color-outline);
}
.segmented button:first-child { border-left: none; }
.segmented button[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-weight: 560; }

/* ---------- Select ---------- */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }
.field label { font-size: 0.75rem; font-weight: 560; color: var(--md-sys-color-on-surface-variant); }
.field select, .field input[type="search"], .field input[type="text"] {
  width: 100%; max-width: 100%;
  min-height: var(--target-min); padding: 0 var(--sp-3);
  border: 1px solid var(--md-sys-color-outline); border-radius: var(--shape-xs);
  background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface);
}

/* ---------- Top app bar ---------- */
.appbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--appbar-h); padding: 0 var(--sp-4);
  background: color-mix(in srgb, var(--md-sys-color-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease-std), background-color var(--motion-fast) var(--ease-std);
}
.appbar.scrolled { border-bottom-color: var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container-low); }
.appbar-home { font-weight: 560; text-decoration: none; color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; white-space: nowrap; }
.appbar-title { font-weight: 560; font-size: 1rem; color: var(--md-sys-color-on-surface); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar-spacer { flex: 1; }
.appbar-actions { display: flex; align-items: center; gap: var(--sp-1); }

/* ---------- Navigation rail (expanded+) ---------- */
.nav-rail {
  position: fixed; inset: var(--appbar-h) auto 0 0; width: var(--rail-w); z-index: 40;
  display: none; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) 0; background: var(--md-sys-color-surface);
}
.nav-rail a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 72px; padding: var(--sp-2) 0; border-radius: var(--shape-md);
  text-decoration: none; color: var(--md-sys-color-on-surface-variant);
  font-size: 0.75rem; font-weight: 500; text-align: center;
}
.nav-rail a .nav-ind { display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: var(--shape-pill); }
.nav-rail a svg { width: 24px; height: 24px; fill: currentColor; }
.nav-rail a:hover .nav-ind { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.nav-rail a[aria-current="page"] { color: var(--md-sys-color-on-surface); font-weight: 560; }
.nav-rail a[aria-current="page"] .nav-ind { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* ---------- Bottom navigation (compact) ---------- */
.nav-bottom {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; justify-content: space-around;
  background: var(--md-sys-color-surface-container);
  padding: var(--sp-2) 0 max(var(--sp-2), env(safe-area-inset-bottom));
  border-top: 1px solid var(--md-sys-color-outline-variant);
}
.nav-bottom a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 56px; padding: 2px var(--sp-2); text-decoration: none;
  color: var(--md-sys-color-on-surface-variant); font-size: 0.6875rem; font-weight: 500;
}
.nav-bottom a .nav-ind { display: flex; align-items: center; justify-content: center; width: 56px; height: 28px; border-radius: var(--shape-pill); }
.nav-bottom a svg { width: 22px; height: 22px; fill: currentColor; }
.nav-bottom a[aria-current="page"] { color: var(--md-sys-color-on-surface); font-weight: 600; }
.nav-bottom a[aria-current="page"] .nav-ind { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

/* ---------- Drawer (secondary nav) ---------- */
.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(320px, 85vw); z-index: 90;
  background: var(--md-sys-color-surface-container-low);
  padding: var(--sp-5); transform: translateX(-105%);
  transition: transform var(--motion-med) var(--ease-emph);
  overflow-y: auto; border-radius: 0 var(--shape-md) var(--shape-md) 0;
  box-shadow: var(--elev-2);
}
.drawer[data-open="true"] { transform: translateX(0); }
.drawer nav { display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-4); }
.drawer nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 48px; padding: 0 var(--sp-4); border-radius: var(--shape-pill);
  text-decoration: none; color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; font-weight: 500;
}
.drawer nav a:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.drawer nav a[aria-current="page"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.drawer nav a svg { width: 22px; height: 22px; fill: currentColor; }
.scrim {
  position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--md-sys-color-scrim) 40%, transparent);
  opacity: 0; pointer-events: none; transition: opacity var(--motion-med) var(--ease-std);
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ---------- Dialog ---------- */
dialog.dlg {
  border: none; border-radius: var(--shape-lg); padding: 0;
  background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface);
  max-width: min(560px, calc(100vw - var(--sp-6))); width: 100%;
  box-shadow: var(--elev-3);
}
dialog.dlg::backdrop { background: rgba(0,0,0,.4); }
.dlg-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); }
.dlg-body { padding: 0 var(--sp-5) var(--sp-5); overflow-y: auto; max-height: 70vh; }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) var(--sp-5); }

/* ---------- Side sheet (provenance / citation detail) ---------- */
.sheet {
  position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); z-index: 90;
  background: var(--md-sys-color-surface-container-low);
  transform: translateX(105%); transition: transform var(--motion-med) var(--ease-emph);
  overflow-y: auto; box-shadow: var(--elev-2);
  border-radius: var(--shape-md) 0 0 var(--shape-md);
}
.sheet[data-open="true"] { transform: translateX(0); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); position: sticky; top: 0; background: inherit; border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.sheet-body { padding: var(--sp-5); }

/* ---------- Bottom sheet (compact filters) ---------- */
@media (max-width: 839px) {
  .sheet { inset: auto 0 0 0; width: 100%; max-height: 80vh; border-radius: var(--shape-xl) var(--shape-xl) 0 0; transform: translateY(105%); }
  .sheet[data-open="true"] { transform: translateY(0); }
}

/* ---------- Tooltip ---------- */
.tip {
  position: absolute; z-index: 100; pointer-events: none;
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  font-size: 0.75rem; line-height: 1.1rem; padding: var(--sp-1) var(--sp-2);
  border-radius: 4px; max-width: 260px; box-shadow: var(--elev-1);
  opacity: 0; transition: opacity var(--motion-fast) var(--ease-std);
}
.tip[data-show="true"] { opacity: 1; }

/* ---------- Snackbar ---------- */
.snackbar {
  position: fixed; left: 50%; bottom: var(--sp-6); transform: translate(-50%, 20px); z-index: 110;
  background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--shape-xs);
  font-size: 0.875rem; box-shadow: var(--elev-2);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-std), transform var(--motion-fast) var(--ease-std);
}
.snackbar[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 599px) { .snackbar { bottom: 88px; } }

/* ---------- Stepper ---------- */
.stepper { display: flex; gap: var(--sp-2); counter-reset: step; }
.stepper-item {
  flex: 1; display: block; text-decoration: none; color: inherit;
  background: var(--md-sys-color-surface-container-low); border-radius: var(--shape-md);
  padding: var(--sp-4); position: relative; counter-increment: step;
  transition: background-color var(--motion-fast) var(--ease-std);
}
.stepper-item:hover, .stepper-item:focus-visible { background: var(--md-sys-color-surface-container-high); }
.stepper-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font-size: 0.8125rem; font-weight: 600; margin-bottom: var(--sp-2);
}
@media (max-width: 839px) { .stepper { flex-direction: column; } }

/* ---------- Data tables ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--shape-sm); }
table.tbl { width: 100%; font-size: 0.875rem; }
.tbl caption { text-align: left; padding: var(--sp-3) var(--sp-4); font-weight: 560; }
.tbl th, .tbl td { text-align: left; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--md-sys-color-outline-variant); }
.tbl thead th { border-top: none; background: var(--md-sys-color-surface-container); font-weight: 560; color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--md-sys-color-outline-variant); overflow-x: auto; }
.tabs [role="tab"] {
  min-height: var(--target-min); padding: 0 var(--sp-4); border: none; background: none; cursor: pointer;
  font-size: 0.875rem; font-weight: 500; color: var(--md-sys-color-on-surface-variant);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--md-sys-color-primary); border-bottom-color: var(--md-sys-color-primary); font-weight: 560; }

/* ---------- Metric cards ---------- */
.metric-card { display: flex; flex-direction: column; gap: var(--sp-1); }
.metric-value { font-size: 2rem; line-height: 2.4rem; font-weight: 560; font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface); }
.metric-label { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); }
.metric-src { font-size: 0.75rem; margin-top: auto; padding-top: var(--sp-2); }

/* ---------- Callouts ---------- */
.callout { border-radius: var(--shape-sm); padding: var(--sp-4); font-size: 0.875rem; line-height: 1.4rem; }
.callout-caveat { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.callout-info { background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); }
.callout-danger { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.callout strong:first-child { display: block; margin-bottom: var(--sp-1); }

/* ---------- Footer ---------- */
.footer {
  margin-top: var(--sp-8); padding: var(--sp-6) var(--sp-5) var(--sp-7);
  background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
}
.footer-grid { max-width: var(--content-max); margin: 0 auto; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer h2 { font-size: 0.875rem; font-weight: 600; color: var(--md-sys-color-on-surface); margin-bottom: var(--sp-2); }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.footer a { color: var(--md-sys-color-on-surface-variant); }
@media (max-width: 599px) { .footer { padding-bottom: 112px; } }

/* ============================================================
   layout.css — responsive shell across the five Material 3
   breakpoint families: compact <600, medium 600–839,
   expanded 840–1199, large 1200–1599, extra-large ≥1600.
   ============================================================ */

.page { min-height: calc(100vh - var(--appbar-h)); }
.content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}
.section { margin-top: var(--sp-7); }
.section-head { margin-bottom: var(--sp-5); }

/* Grid helpers */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Two-pane explorer: filters + results (+ detail sheet).
   Grid and flex children default to min-width:auto, so a wide child (a chart's
   min-width, a long table) would burst the track instead of scrolling inside
   its own container. min-width:0 lets the track shrink and the child scroll. */
.explorer { display: grid; gap: var(--sp-5); align-items: start; }
.explorer > *,
.grid > *,
.chart-list > *,
.filterable,
.chart-panel > *,
.case-detail > * { min-width: 0; }
.explorer-filters { position: sticky; top: calc(var(--appbar-h) + var(--sp-4)); }

/* ---------- Compact: 0–599 ---------- */
@media (max-width: 599px) {
  .content { padding: var(--sp-4) var(--sp-4) var(--sp-8); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .nav-rail { display: none; }
  .nav-bottom { display: flex; }
  .appbar-home { display: none; }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer-filters { position: static; }
  .hide-compact { display: none !important; }
}

/* ---------- Medium: 600–839 ---------- */
@media (min-width: 600px) and (max-width: 839px) {
  .content { padding: var(--sp-5) var(--sp-5) var(--sp-7); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-rail { display: none; }
  .nav-bottom { display: flex; }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer-filters { position: static; }
}

/* ---------- Expanded and up: 840+ ---------- */
@media (min-width: 840px) {
  .nav-bottom { display: none; }
  .nav-rail { display: flex; }
  .page { padding-left: var(--rail-w); }
  .explorer { grid-template-columns: 280px minmax(0, 1fr); }
}

/* ---------- Large: 1200+ ---------- */
@media (min-width: 1200px) {
  .content { padding-left: var(--sp-6); padding-right: var(--sp-6); }
}

/* ---------- Extra large: 1600+ ---------- */
@media (min-width: 1600px) {
  .content { max-width: var(--content-max); }
}

/* Hover-capable devices only */
@media (hover: none) {
  .tip { display: none; }
}

/* Print: strip chrome */
@media print {
  .appbar, .nav-rail, .nav-bottom, .footer, .skip-link, .drawer, .scrim { display: none !important; }
  .page { padding-left: 0; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   pages.css — page-specific composition on top of the system.
   ============================================================ */

/* ---------- Shared page furniture ---------- */
.page-head { max-width: 62ch; margin-bottom: var(--sp-6); }
.page-head .t-caption { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: var(--sp-2); }
.page-head h1 { margin-bottom: var(--sp-3); }
.breadcrumb { margin-bottom: var(--sp-4); }
.breadcrumb a { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); text-decoration: none; min-height: var(--target-min); }
.breadcrumb a:hover { color: var(--md-sys-color-primary); }
.breadcrumb svg { width: 18px; height: 18px; fill: currentColor; }
.section-label { margin: var(--sp-6) 0 var(--sp-4); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: var(--sp-2); vertical-align: baseline; }

/* ---------- Provenance list ---------- */
.prov { display: grid; gap: var(--sp-2); font-size: 0.875rem; }
.prov > div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: var(--sp-3); align-items: start; }
.prov dt { color: var(--md-sys-color-on-surface-variant); font-weight: 560; }
.prov dd { margin: 0; }
.prov code { background: var(--md-sys-color-surface-container-high); padding: 1px 5px; border-radius: 4px; word-break: break-all; font-size: 0.8125rem; }
.prov-details { margin-top: var(--sp-4); }
.prov-details summary { cursor: pointer; font-size: 0.875rem; font-weight: 560; color: var(--md-sys-color-primary); padding: var(--sp-2) 0; min-height: var(--target-min); display: flex; align-items: center; }
.prov-details[open] summary { margin-bottom: var(--sp-3); }
@media (max-width: 599px) { .prov > div { grid-template-columns: 1fr; gap: 0; } }

/* ---------- Hero ---------- */
.hero { background: var(--md-sys-color-surface-container-low); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.hero-inner { padding-top: var(--sp-7); padding-bottom: var(--sp-7); max-width: 1100px; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 700; color: var(--md-sys-color-primary); margin-bottom: var(--sp-3); }
.hero h1 { max-width: 20ch; }
.hero-sub { color: var(--md-sys-color-on-surface-variant); margin-top: var(--sp-3); max-width: 30ch; }
.hero-thesis {
  margin: var(--sp-6) 0; padding: var(--sp-5); max-width: 62ch;
  border-left: 4px solid var(--md-sys-color-tertiary);
  background: var(--md-sys-color-surface-container);
  border-radius: 0 var(--shape-md) var(--shape-md) 0;
  font-size: 1.25rem; line-height: 1.9rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.hero-meta { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); line-height: 1.6; }
.hero-draft { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); border-radius: var(--shape-sm); font-size: 0.8125rem; max-width: 70ch; }
.hero-draft svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; margin-top: 2px; }
@media (max-width: 599px) { .hero-thesis { font-size: 1.0625rem; line-height: 1.7rem; padding: var(--sp-4); } }

/* ---------- Four-quadrant visual ---------- */
.quadrant-wrap { display: grid; gap: var(--sp-5); }
.quadrant { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 1fr 32px; gap: var(--sp-2); max-width: 720px; }
.quadrant-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--sp-2); aspect-ratio: 1.35 / 1; }
.quadrant-axis { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: 0.75rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); text-transform: uppercase; letter-spacing: 0.06em; }
.quadrant-axis-y { flex-direction: column-reverse; writing-mode: vertical-rl; transform: rotate(180deg); }
.quadrant-axis-x { grid-column: 2; }
.axis-ends { font-weight: 400; opacity: 0.75; letter-spacing: 0; text-transform: none; }
.quadrant-cell {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--sp-1);
  padding: var(--sp-4); border-radius: var(--shape-md); cursor: pointer; text-align: left;
  border: 2px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  transition: background-color var(--motion-fast) var(--ease-std), border-color var(--motion-fast) var(--ease-std);
}
.quadrant-cell:hover, .quadrant-cell.active { background: var(--md-sys-color-surface-container-high); }
.quadrant-cell .q-mark svg { width: 22px; height: 22px; fill: currentColor; }
.q-label { font-size: 1.125rem; font-weight: 600; }
.q-meaning { font-size: 0.8125rem; color: var(--md-sys-color-on-surface-variant); }
.q-dangerous { border-color: var(--md-sys-color-error); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.q-dangerous .q-meaning { color: inherit; }
.q-dangerous:hover, .q-dangerous.active { background: var(--md-sys-color-error-container); filter: brightness(1.06); }
.q-ideal { border-color: var(--md-sys-color-success); background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.q-ideal .q-meaning { color: inherit; }
.q-fragile { border-color: var(--md-sys-color-warning); }
.q-worst { border-style: dashed; }
.quadrant-detail { min-height: 3.5rem; padding: var(--sp-4); background: var(--md-sys-color-surface-container); border-radius: var(--shape-sm); max-width: 720px; }
.quadrant-list summary { cursor: pointer; font-weight: 560; padding: var(--sp-2) 0; min-height: var(--target-min); display: flex; align-items: center; color: var(--md-sys-color-primary); }
.quadrant-list .prov { margin-top: var(--sp-3); }
@media (max-width: 599px) {
  .quadrant-grid { aspect-ratio: auto; }
  .quadrant-cell { padding: var(--sp-3); }
  .q-label { font-size: 1rem; }
}

/* ---------- Stepper ---------- */
.stepper { list-style: none; padding: 0; }
.stepper li { display: flex; flex: 1; }
.stepper-item { display: flex; flex-direction: column; width: 100%; }
.stepper-title { margin-bottom: var(--sp-1); }
.stepper-q { color: var(--md-sys-color-on-surface-variant); }

/* ---------- Metric + result cards ---------- */
.metric-card { min-height: 148px; }
.result-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.result-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.result-head .metric-value { font-size: 1.75rem; line-height: 2.1rem; }
.chip-status.denom { background: var(--md-sys-color-surface-container-high); border-color: transparent; color: var(--md-sys-color-on-surface-variant); text-transform: lowercase; }
.result-pop { margin-top: calc(var(--sp-2) * -1); }
.result-card .callout { margin-top: auto; }
.card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.card-actions .btn-text { padding-left: var(--sp-2); padding-right: var(--sp-2); }

/* ---------- Claim cards ---------- */
.claim-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.claim-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.chip-status.strength-ok { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); border-color: transparent; }
.chip-status.strength-warn { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); border-color: transparent; }
.chip-status.strength-neg { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); border-color: transparent; }

/* ---------- Reading paths ---------- */
.path-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); max-width: 640px; }
.path-list a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); min-height: var(--target-min);
  background: var(--md-sys-color-surface-container-low); border-radius: var(--shape-sm);
  text-decoration: none; color: var(--md-sys-color-on-surface); font-weight: 500;
}
.path-list a:hover { background: var(--md-sys-color-surface-container-high); }
.path-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: 0.8125rem; font-weight: 600; flex-shrink: 0; }
.path-arrow { width: 18px; height: 18px; fill: currentColor; margin-left: auto; opacity: .6; }

/* ---------- Thesis map ---------- */
.map-view-picker { margin-bottom: var(--sp-6); }
.map-list { list-style: none; padding: 0; }
.map-because { max-width: 62ch; margin: 0 0 var(--sp-3) 0; padding-left: var(--sp-6); color: var(--md-sys-color-on-surface-variant); }
.map-because p { display: flex; gap: var(--sp-2); align-items: flex-start; font-style: italic; }
.because-arrow { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; margin-top: 3px; transform: rotate(90deg); opacity: .6; }
.map-step { display: grid; grid-template-columns: 48px 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.map-marker { display: flex; align-items: flex-start; justify-content: center; position: relative; }
.map-marker span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); font-weight: 700; z-index: 1; }
.map-marker::after { content: ''; position: absolute; top: 44px; bottom: calc(var(--sp-6) * -1 - 8px); width: 2px; background: var(--md-sys-color-outline-variant); }
.map-list > li:last-child .map-marker::after { display: none; }
.map-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.map-card h2 a { color: inherit; text-decoration: none; }
.map-card h2 a:hover { color: var(--md-sys-color-primary); }
.map-q { color: var(--md-sys-color-primary); }
.map-prov { margin: var(--sp-2) 0; }
.map-results { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.map-result { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border-radius: var(--shape-sm); background: var(--md-sys-color-surface-container-high); text-decoration: none; color: inherit; flex: 1; min-width: 150px; }
.map-result:hover { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.map-result-value { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.map-result-label { font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.map-result:hover .map-result-label { color: inherit; }
.map-claims { display: grid; gap: var(--sp-2); }
.map-claim { display: flex; gap: var(--sp-2); align-items: baseline; flex-wrap: wrap; font-size: 0.875rem; }
.map-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.map-links svg { width: 16px; height: 16px; fill: currentColor; }
.synthesis { background: var(--md-sys-color-surface-container); }
.synthesis-quote { margin: var(--sp-5) 0; padding-left: var(--sp-5); border-left: 4px solid var(--md-sys-color-tertiary); max-width: 54ch; }
.thrust-nav { display: flex; justify-content: space-between; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--md-sys-color-outline-variant); }
.thrust-nav svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 599px) {
  .map-step { grid-template-columns: 32px 1fr; gap: var(--sp-3); }
  .map-marker span { width: 32px; height: 32px; font-size: 0.875rem; }
  .map-because { padding-left: var(--sp-4); }
}

/* ---------- Charts ---------- */
/* Every chart is server-rendered SVG plus a full data table, so the explorer
   ships a lot of DOM. content-visibility lets the browser skip layout and paint
   for panels that are still offscreen; the markup stays in the accessibility
   tree and in find-in-page, so nothing is traded away for the speed. */
.chart-panel, .result-card { content-visibility: auto; }
.chart-panel { contain-intrinsic-size: auto 720px; }
.result-card { contain-intrinsic-size: auto 420px; }
.chart-panel { display: flex; flex-direction: column; gap: var(--sp-4); }
.chart-head h3 { margin-bottom: var(--sp-1); }
.chart-figure { margin: 0; overflow-x: auto; }
.chart-svg { width: 100%; height: auto; min-width: 520px; }
.chart-svg .grid { stroke: var(--md-sys-color-outline-variant); stroke-width: 1; }
.chart-svg .axis { stroke: var(--md-sys-color-outline); stroke-width: 1.5; }
.chart-svg .tick { fill: var(--md-sys-color-on-surface-variant); font-size: 11px; }
.chart-svg .axis-label { fill: var(--md-sys-color-on-surface-variant); font-size: 11px; font-weight: 600; }
.chart-svg .flag { fill: var(--md-sys-color-error); font-size: 12px; font-weight: 700; }
.chart-svg .err { stroke: var(--md-sys-color-on-surface); stroke-width: 1.5; }
.chart-svg .line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .bar, .chart-svg .dot { transition: opacity var(--motion-fast) var(--ease-std); }
.chart-svg .bar:hover, .chart-svg .dot:hover, .chart-svg .bar:focus-visible, .chart-svg .dot:focus-visible { opacity: .78; }
.chart-svg :focus-visible { outline: 3px solid var(--md-sys-color-on-surface); outline-offset: 1px; }
.chart-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.chart-legend li { display: flex; align-items: center; }
.chart-actions { border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: var(--sp-3); }
.chart-actions svg { width: 16px; height: 16px; fill: currentColor; }
.chart-list { display: grid; gap: var(--sp-5); }

/* ---------- Evidence explorer ---------- */
.evidence-warning { max-width: 100%; margin-bottom: var(--sp-5); }
.filters { display: grid; gap: var(--sp-4); padding: var(--sp-4); background: var(--md-sys-color-surface-container-low); border-radius: var(--shape-md); }
.filters-head { display: flex; align-items: center; justify-content: space-between; }
.filters-inline { max-height: calc(100vh - var(--appbar-h) - var(--sp-8)); overflow-y: auto; }
.explorer-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.explorer-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.explorer-actions svg { width: 16px; height: 16px; fill: currentColor; }
.active-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.active-filters:empty { display: none; }
.active-filters .chip span[aria-hidden] { margin-left: var(--sp-1); font-size: 1rem; line-height: 1; }
.explorer-empty { padding: var(--sp-6); text-align: center; background: var(--md-sys-color-surface-container-low); border-radius: var(--shape-md); display: grid; gap: var(--sp-3); justify-items: center; }
.filterable[hidden] { display: none; }
.filters-open { width: 100%; margin-bottom: var(--sp-4); }
.filters-open svg { width: 18px; height: 18px; fill: currentColor; }
@media (min-width: 840px) { .filters-open { display: none; } .hide-expanded { display: none !important; } }
@media (max-width: 839px) { .hide-compact-medium { display: none !important; } }

/* ---------- Cases ---------- */
.cases-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-5); align-items: start; margin-top: var(--sp-5); }
.case-nav { position: sticky; top: calc(var(--appbar-h) + var(--sp-4)); background: var(--md-sys-color-surface-container-low); border-radius: var(--shape-md); padding: var(--sp-4); }
.case-tablist { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.case-nav button {
  display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-2) var(--sp-3); width: 100%;
  padding: var(--sp-3); border: none; background: transparent; cursor: pointer; text-align: left;
  border-radius: var(--shape-sm); color: var(--md-sys-color-on-surface); min-height: var(--target-min);
}
.case-nav button:hover { background: var(--md-sys-color-surface-container-high); }
.case-nav button[aria-selected="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.case-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--md-sys-color-primary); }
.case-nav button[aria-selected="true"] .case-num { color: inherit; }
.case-nav-title { font-weight: 560; }
.case-nav-sum { grid-column: 2; }
.case-nav button[aria-selected="true"] .case-nav-sum { color: inherit; }
.case-filter { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--md-sys-color-outline-variant); }
.switch { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; font-size: 0.875rem; min-height: var(--target-min); }
.switch input { width: 20px; height: 20px; accent-color: var(--md-sys-color-primary); }
.case-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.case-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.case-body { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.case-image img { width: 100%; height: auto; border-radius: var(--shape-md); background: #000; max-height: 460px; object-fit: contain; }
.case-image .t-caption { margin-top: var(--sp-2); }
.case-detail { display: grid; gap: var(--sp-4); }
.case-question .t-serif { margin-top: var(--sp-1); }
.pill { display: inline-block; padding: 2px var(--sp-3); border-radius: var(--shape-pill); font-size: 0.8125rem; font-weight: 600; }
.pill-yes { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.pill-no { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.case-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); }
.case-models > * { min-width: 0; }
.case-model { display: flex; flex-direction: column; gap: var(--sp-3); }
.case-model-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.para-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.para { padding: var(--sp-3); border-radius: var(--shape-sm); background: var(--md-sys-color-surface-container); border-left: 3px solid var(--md-sys-color-outline-variant); }
.para-flipped { border-left-color: var(--md-sys-color-error); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.para-text { font-size: 0.9375rem; }
.para-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: 0.75rem; }
.para-status, .para-truth { display: inline-flex; align-items: center; gap: 4px; }
/* No opacity here: on the error container it drops below the 4.5:1 minimum.
   Separate this line by style instead of by dimming it. */
.para-truth { font-style: italic; }
.para-icon { width: 14px; height: 14px; fill: currentColor; }
.chip-status.transform { background: var(--md-sys-color-surface-container-highest); border-color: transparent; }
.para-empty { font-size: 0.875rem; color: var(--md-sys-color-on-surface-variant); font-style: italic; }
.case-links { padding-top: var(--sp-3); border-top: 1px solid var(--md-sys-color-outline-variant); }
@media (max-width: 1199px) { .case-body { grid-template-columns: 1fr; } .case-image img { max-height: 380px; } }
@media (max-width: 839px) { .cases-shell { grid-template-columns: 1fr; } .case-nav { position: static; } .case-tablist { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }

/* ---------- Papers ---------- */
.paper-legend { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.paper-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.paper-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.paper-authors { font-style: italic; }
.paper-links { padding-top: var(--sp-3); border-top: 1px solid var(--md-sys-color-outline-variant); margin-top: auto; }
.resource-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.resource-head { display: flex; align-items: center; justify-content: space-between; }
.resource-head svg { width: 24px; height: 24px; fill: var(--md-sys-color-primary); }

/* ---------- Read ---------- */
.draft-banner { margin-bottom: var(--sp-6); }
.read-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); align-items: start; }
.read-meta { display: grid; gap: var(--sp-4); }
.read-actions { border-top: 1px solid var(--md-sys-color-outline-variant); padding-top: var(--sp-4); }
.read-actions svg { width: 18px; height: 18px; fill: currentColor; }
.hash { font-size: 0.6875rem; word-break: break-all; }
.abstract-body p + p { margin-top: var(--sp-4); }
.abstract-body { font-size: 1.0625rem; line-height: 1.8; }
.pdf-frame { display: grid; gap: var(--sp-2); justify-items: center; padding: var(--sp-6); background: var(--md-sys-color-surface-container); border-radius: var(--shape-md); margin-top: var(--sp-4); }
.pdf-frame object, .pdf-frame iframe { width: 100%; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--shape-sm); }
.read-toc { position: sticky; top: calc(var(--appbar-h) + var(--sp-4)); background: var(--md-sys-color-surface-container-low); border-radius: var(--shape-md); padding: var(--sp-5); max-height: calc(100vh - var(--appbar-h) - var(--sp-6)); overflow-y: auto; }
.toc-list { list-style: none; padding: 0; display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.toc-list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); }
.toc-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--md-sys-color-primary); }
.toc-body { display: grid; gap: 2px; }
.toc-title { font-weight: 560; font-size: 0.9375rem; }
.toc-link { font-size: 0.75rem; display: inline-flex; align-items: center; gap: 4px; margin-top: var(--sp-1); }
.toc-link svg { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 1199px) { .read-layout { grid-template-columns: 1fr; } .read-toc { position: static; max-height: none; } }

/* ---------- Cite ---------- */
.cite-card { display: grid; gap: var(--sp-4); }
.cite-text {
  white-space: pre-wrap; word-break: break-word; font-size: 0.8125rem; line-height: 1.6;
  background: var(--md-sys-color-surface-container-high); padding: var(--sp-4);
  border-radius: var(--shape-sm); margin-top: var(--sp-4);
}
.cite-small { font-size: 0.75rem; }
.cite-paper { display: flex; flex-direction: column; gap: var(--sp-2); }
.cite-paper .card-actions { margin-top: auto; }
.dlg .cite-text { max-height: 40vh; overflow-y: auto; }

/* ---------- Search dialog ---------- */
.dlg-search { max-width: min(680px, calc(100vw - var(--sp-6))); position: fixed; top: 10vh; margin: 0 auto; }
.dlg-search .dlg-head { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
.search-glyph { width: 22px; height: 22px; fill: var(--md-sys-color-on-surface-variant); flex-shrink: 0; }
#search-input { flex: 1; border: none; background: transparent; font-size: 1rem; min-height: var(--target-min); outline: none; color: var(--md-sys-color-on-surface); }
#search-results { display: grid; gap: var(--sp-4); }
.search-group h3 { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: var(--sp-2); }
.search-hit { display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--shape-sm); text-decoration: none; color: var(--md-sys-color-on-surface); }
.search-hit:hover, .search-hit:focus-visible { background: var(--md-sys-color-surface-container-highest); }
.search-hit-title { font-weight: 560; font-size: 0.9375rem; }
.search-hit mark { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); padding: 0 2px; border-radius: 2px; }
.search-none { padding: var(--sp-4); color: var(--md-sys-color-on-surface-variant); }

/* ---------- Theme toggle icon swap ---------- */
#theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-light { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme-toggle .icon-light { display: none; }
  :root:not([data-theme="light"]) #theme-toggle .icon-dark { display: block; }
}

/* ---------- Drawer bits ---------- */
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-sep, .nav-rail-sep { border: none; border-top: 1px solid var(--md-sys-color-outline-variant); margin: var(--sp-3) var(--sp-2); width: 100%; }
.nav-rail-sep { width: 56px; margin: var(--sp-2) auto; }

/* ---------- Interactive demos ---------- */
.demo { scroll-margin-top: calc(var(--appbar-h) + var(--sp-4)); }
.demo-shell { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-5); align-items: start; margin-top: var(--sp-5); }
.demo-shell > * { min-width: 0; }
.demo-controls { position: sticky; top: calc(var(--appbar-h) + var(--sp-4)); display: grid; gap: var(--sp-4); }
.demo-control-head { display: grid; gap: var(--sp-3); }
.demo-readout { display: grid; gap: var(--sp-4); }
.demo-stats { gap: var(--sp-3); }
.demo-stats .metric-card { min-height: 0; padding: var(--sp-4); }
.demo-stats .metric-value { font-size: 1.75rem; line-height: 2.1rem; }
.demo-stats .metric-label { font-size: 0.8125rem; }
.danger-card { border-color: var(--md-sys-color-error); }
.danger-card .metric-value { color: var(--md-sys-color-error); }
.demo-chart { gap: var(--sp-3); }
.demo-chart .chart-head { display: block; }

/* Slider */
.slider-field { gap: var(--sp-2); }
.slider-field input[type="range"] {
  width: 100%; min-height: var(--target-min); accent-color: var(--md-sys-color-primary); cursor: pointer;
}
.slider-out { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1rem; color: var(--md-sys-color-primary); }
.demo-presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* The rule sentence */
.rule-line { font-size: 0.9375rem; line-height: 1.9; padding: var(--sp-3); background: var(--md-sys-color-surface-container-high); border-radius: var(--shape-sm); }
.rule-tok { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); padding: 2px 6px; border-radius: 4px; white-space: normal; }
.rule-op { font-weight: 700; color: var(--md-sys-color-primary); text-transform: uppercase; font-size: 0.75rem; }
.gate-conditions { border: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.gate-conditions legend { padding: 0; margin-bottom: var(--sp-2); }
.gate-conditions .switch { align-items: flex-start; gap: var(--sp-2); font-size: 0.8125rem; line-height: 1.4; }
.gate-conditions .switch input { margin-top: 2px; flex-shrink: 0; }
.gate-conditions em { color: var(--md-sys-color-on-surface-variant); font-size: 0.75rem; }

/* Flow bar */
.gate-flow { display: grid; gap: var(--sp-3); }
.flow-bar { display: flex; height: 44px; border-radius: var(--shape-xs); overflow: hidden; background: var(--md-sys-color-surface-container-high); }
.flow-seg { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; white-space: nowrap; transition: width var(--motion-med) var(--ease-std); overflow: hidden; }
.flow-admit { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.flow-escalate { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.flow-legend { list-style: none; padding: 0; display: flex; gap: var(--sp-4); font-size: 0.75rem; color: var(--md-sys-color-on-surface-variant); }
.flow-legend li { display: flex; align-items: center; }
.swatch.flow-admit { background: var(--md-sys-color-primary); }
.swatch.flow-escalate { background: var(--md-sys-color-warning-container); border: 1px solid var(--md-sys-color-outline-variant); }

/* Worked examples */
.example-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.example-list > * { min-width: 0; }
.example { display: flex; flex-direction: column; gap: var(--sp-2); }
.example-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.example-detail summary { cursor: pointer; font-size: 0.8125rem; font-weight: 560; color: var(--md-sys-color-primary); padding: var(--sp-2) 0; min-height: var(--target-min); display: flex; align-items: center; }
.sig-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.sig { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: 0.8125rem; line-height: 1.45; padding: var(--sp-2); border-radius: var(--shape-xs); }
.sig-mark { font-weight: 700; flex-shrink: 0; }
.sig-on { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.sig-off { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface-variant); }
.ok-tag { color: var(--md-sys-color-success); font-weight: 600; }
.bad-tag { color: var(--md-sys-color-error); font-weight: 600; }

@media (max-width: 1199px) {
  .demo-shell { grid-template-columns: 1fr; }
  .demo-controls { position: static; }
}
@media (max-width: 839px) {
  .demo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .demo-stats { grid-template-columns: 1fr; }
  .example-list { grid-template-columns: 1fr; }
}

/* The demo control column is narrow: let the segmented picker wrap into a
   grid rather than clipping its last option, and keep long source paths inside. */
.demo-controls .segmented {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: var(--shape-sm); width: 100%;
}
.demo-controls .segmented button {
  padding: var(--sp-2) var(--sp-1); font-size: 0.75rem; line-height: 1.2;
  min-height: 44px; hyphens: auto;
}
.demo-controls code { word-break: break-all; font-size: 0.6875rem; }
.demo-controls .t-caption { overflow-wrap: anywhere; }

/* A case with no radiograph: the licence notice stands in for the image. */
.no-image {
  display: grid; gap: var(--sp-3); padding: var(--sp-5);
  background: var(--md-sys-color-surface-container-high);
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--shape-md);
}
.legend-line { width: 28px; height: 10px; margin-right: var(--sp-2); flex-shrink: 0; }

/* A thrust's limitation belongs next to its claim, but five amber panels down
   one page reads as apology. State it plainly; the limitations section carries
   the full set. */
.map-limit {
  font-size: 0.875rem; line-height: 1.5; color: var(--md-sys-color-on-surface-variant);
  padding-left: var(--sp-4); border-left: 3px solid var(--md-sys-color-outline-variant);
}
.map-limit-label {
  font-weight: 600; color: var(--md-sys-color-on-surface);
}
.limitation { display: flex; flex-direction: column; gap: var(--sp-2); }
.limitation .t-caption { margin-top: auto; }