/* The one stylesheet for the whole site. Add new pages as a new section at
 * the bottom; reuse the tokens below instead of hard-coding colours.
 *
 * Sections: tokens / base / auth pages / app pages.
 * Fonts: DM Sans, Manrope, Roboto Mono.
 */

/* === tokens ============================================================ */

:root {
  --background: oklch(0.985 0.004 270);
  --foreground: oklch(0.195 0.048 271);
  --muted-fg: oklch(0.48 0.027 267);
  --surface: oklch(0.986 0.004 270);
  --surface-raised: oklch(1 0 0);
  --field: oklch(1 0 0);
  --border: oklch(0.9 0.012 270);
  --input-border: oklch(0.86 0.018 270);
  --field-icon: oklch(0.56 0.025 265);
  --placeholder: oklch(0.66 0.018 270);

  --brand: oklch(0.49 0.22 285);
  --brand-strong: oklch(0.42 0.2 285);
  --brand-soft: oklch(0.955 0.03 292);
  --ring: oklch(0.55 0.2 285);
  --shadow-primary: 0 12px 28px color-mix(in oklab, var(--brand) 22%, transparent);

  --panel: oklch(0.15 0.05 262);
  --panel-fg: oklch(0.97 0.01 275);
  --panel-muted: oklch(0.74 0.04 263);
  --panel-subtle: oklch(0.61 0.04 263);
  --brand-accent: oklch(0.75 0.18 289);

  --security: oklch(0.93 0.045 168);
  --security-fg: oklch(0.48 0.13 165);
  --success: oklch(0.64 0.15 164);
  --destructive: oklch(0.577 0.245 27.325);

  --radius: 0.55rem;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;

  /* entity colours, same as the knowledge-graph diagram */
  --entity-gene: oklch(0.63 0.15 255);
  --entity-disease: oklch(0.62 0.2 350);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-pill: 999px;
  --shadow-row: 0 6px 18px color-mix(in oklab, var(--foreground) 8%, transparent);

  /* type scale: Manrope for headings and figures, DM Sans for text, Roboto Mono for ids and gene symbols */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.75rem;
  --text-4xl: 2rem;

  /* chart palette, read by app.js as "token:<name>" */
  --chart-text: var(--foreground);
  --chart-axis: var(--muted-fg);
  --chart-grid: var(--border);
  --chart-grid-soft: oklch(0.94 0.008 270);
  --chart-surface: var(--surface-raised);
  /* Series colour stays the v2 purple. The app accent below is teal and must not leak into charts. */
  --chart-status-active: oklch(0.49 0.22 285);
  --chart-status-inactive: oklch(0.8 0.02 270);
  --chart-status-discontinued: oklch(0.6 0.17 32);
  --chart-status-withdrawn: oklch(0.36 0.09 25);
  --chart-status-unknown: oklch(0.91 0.008 270);
  --chart-phase-1: oklch(0.88 0.05 285);
  --chart-phase-2: oklch(0.78 0.1 285);
  --chart-phase-3: oklch(0.67 0.15 285);
  --chart-phase-4: oklch(0.56 0.19 285);
  --chart-phase-5: oklch(0.45 0.19 285);
  --chart-phase-6: oklch(0.32 0.13 285);
  --chart-phase-7: oklch(0.86 0.01 270);
  --chart-heat-low: oklch(0.97 0.015 285);
  --chart-heat-high: oklch(0.72 0.13 285);
  --chart-heat-label: var(--foreground);

  --warning: oklch(0.55 0.16 45);

  /* app shell */
  --hover: oklch(0.955 0.01 275);
  --rail-width: 15rem;
  --rail-width-collapsed: 4rem;
  --radius-lg: 0.875rem;
  --shadow-panel: 0 0 0 1px color-mix(in oklab, var(--foreground) 3%, transparent), 0 1px 2px -1px color-mix(in oklab, var(--foreground) 8%, transparent);

  /* dashboard (v2's look): KPI hues by position, teal table heads */
  --kpi-1: oklch(0.55 0.2 262);
  --kpi-2: var(--brand);
  --kpi-3: oklch(0.56 0.1 182);
  --kpi-4: oklch(0.6 0.16 58);
  --kpi-5: oklch(0.57 0.21 15);
  --kpi-6: oklch(0.45 0.035 257);
  --table-head: oklch(0.5 0.09 185);
  --table-head-fg: oklch(1 0 0);

  /* Status and phase chips. Same classes everywhere; chart series stay on --chart-*. */
  --tag-active-bg: #d1fae5; --tag-active-fg: #047857;
  --tag-inactive-bg: #f1f5f9; --tag-inactive-fg: #475569;
  --tag-discontinued-bg: #ffedd5; --tag-discontinued-fg: #9a3412;
  --tag-withdrawn-bg: #ffe4e6; --tag-withdrawn-fg: #9f1239;
  --tag-unknown-bg: #f3f4f6; --tag-unknown-fg: #4b5563;
  --tag-preclinical-bg: #f1f5f9; --tag-preclinical-fg: #334155;
  --tag-phase-1-bg: #e0f2fe; --tag-phase-1-fg: #0369a1;
  --tag-phase-2-bg: #dbeafe; --tag-phase-2-fg: #1d4ed8;
  --tag-phase-3-bg: #e0e7ff; --tag-phase-3-fg: #3730a3;
  --tag-prereg-bg: #ccfbf1; --tag-prereg-fg: #0f766e;
  --tag-approved-bg: #dcfce7; --tag-approved-fg: #166534;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #94a3b8;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--brand);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* --- split shell ------------------------------------------------------- */

.auth-split {
  display: grid;
  min-height: 100dvh;
  background: var(--background);
}
@media (min-width: 64rem) {
  .auth-split {
    grid-template-columns: minmax(0, 1.08fr) minmax(31rem, 0.92fr);
    height: 100dvh;
    overflow: hidden;
  }
}

/* --- brand panel ------------------------------------------------------- */

.auth-panel {
  position: relative;
  display: none;
  overflow: hidden;
  color: var(--panel-fg);
  background:
    radial-gradient(circle at 49% 37%, color-mix(in oklab, var(--brand-accent) 13%, transparent), transparent 32%),
    linear-gradient(145deg, oklch(0.18 0.055 268), oklch(0.135 0.045 255) 54%, oklch(0.16 0.07 282));
}
@media (min-width: 64rem) {
  .auth-panel {
    display: block;
    height: 100dvh;
  }
}

.auth-panel-grid {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(color-mix(in oklab, var(--panel-muted) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--panel-muted) 9%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, black 24%, black 70%, transparent);
  pointer-events: none;
}

.auth-panel-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 2.5rem 2.5rem;
}
@media (min-width: 80rem) {
  .auth-panel-inner { padding: 2.5rem 3rem 2.75rem; }
}

.auth-brand {
  display: inline-flex;
  width: fit-content;
  position: relative;
  z-index: 2;
}
.auth-brand img {
  display: block;
  height: 30px;
  width: auto;
}

/* Molecule sits in the upper band so headline copy can sit below it. */
.auth-molecule {
  position: absolute;
  left: 0;
  right: 0;
  top: 7%;
  height: 52%;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}
.auth-molecule-canvas {
  width: 100%;
  height: 100%;
}
.auth-molecule-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.auth-panel-copy {
  position: relative;
  z-index: 2;
  max-width: 35rem;
  margin-top: auto;
  flex-shrink: 0;
  padding-bottom: 0.25rem;
}
.auth-panel-eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--panel-muted);
}
.auth-panel-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.02;
  color: var(--panel-fg);
}
.auth-panel-copy h1 span { color: var(--brand-accent); }
.auth-panel-lede {
  margin: 1.5rem 0 0;
  max-width: 31rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--panel-muted);
}

.auth-perks {
  display: grid;
  gap: 0.85rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 32rem;
}
.auth-perks li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: color-mix(in oklab, var(--panel-fg) 78%, transparent);
}
.auth-perks svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  margin-top: 0.2rem;
  color: var(--brand-accent);
}

.auth-panel-foot {
  margin: 1.15rem 0 0;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--panel-subtle);
}

/* --- mobile brand header ----------------------------------------------- */

.auth-mobile-brand {
  display: block;
  padding: 1.15rem 1.5rem;
  background: linear-gradient(120deg, oklch(0.17 0.06 268), oklch(0.2 0.09 283));
}
@media (min-width: 64rem) {
  .auth-mobile-brand { display: none; }
}

/* --- form column ------------------------------------------------------- */

.auth-form-col {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--surface);
}
@media (min-width: 64rem) {
  .auth-form-col {
    min-height: 0;
    height: 100dvh;
    overflow: auto;
  }
}

.auth-form-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
  animation: auth-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (min-width: 40rem) {
  .auth-form-wrap { padding-inline: 2rem; }
}
@media (min-width: 64rem) {
  .auth-form-wrap { padding-inline: 3rem; }
}

.auth-form {
  width: 100%;
  max-width: 27rem;
}
.auth-form.is-wide { max-width: 29rem; }

.auth-form > .auth-brand {
  display: none;
  margin: 0 auto 2.5rem;
}
@media (min-width: 64rem) {
  .auth-form > .auth-brand { display: flex; }
}

.auth-intro { margin: 0 0 2rem; }
.auth-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand);
}
.auth-intro h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--foreground);
}
.auth-intro p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted-fg);
}

/* --- fields ------------------------------------------------------------ */

.login-form { display: grid; gap: 1.25rem; }

.login-field { display: grid; gap: 0.5rem; min-width: 0; }
.login-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--foreground);
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.auth-forgot {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--brand);
  cursor: pointer;
  text-underline-offset: 4px;
}
.auth-forgot:hover { text-decoration: underline; }

.login-input {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 3.15rem;
  padding-inline: 0.875rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--field);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.login-input:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 15%, transparent);
}
.login-input.is-invalid {
  border-color: color-mix(in oklab, var(--destructive) 70%, transparent);
}
.login-input.is-invalid:focus-within {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 12%, transparent);
}

.login-input-icon {
  width: 1.05rem;
  height: 1.05rem;
  margin-right: 0.75rem;
  flex: 0 0 auto;
  color: var(--field-icon);
}
.login-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--foreground);
}
.login-input input:focus { outline: none; }
.login-input input::placeholder { color: var(--placeholder); }

.login-reveal {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-right: -0.35rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted-fg);
  cursor: pointer;
}
.login-reveal:hover { color: var(--foreground); }
.login-reveal svg { width: 1.05rem; height: 1.05rem; }
.login-reveal svg[hidden] { display: none; }

.login-error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.75rem;
  color: var(--destructive);
}

.login-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
}
@media (max-width: 30rem) {
  .login-row { grid-template-columns: 1fr; }
}

.login-optional {
  margin-left: 0.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 3.15rem;
  margin-top: 0.15rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand);
  color: oklch(0.99 0.002 280);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-primary);
  transition: background-color 150ms ease, transform 150ms ease;
}
.login-submit svg { width: 1rem; height: 1rem; }
.login-submit:hover {
  background: var(--brand-strong);
  transform: translateY(-1px);
}
.login-submit:active { transform: none; }
.login-submit.is-quiet {
  background: var(--surface-raised);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--border);
}
.login-submit.is-quiet:hover {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 25%, transparent);
}

.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid color-mix(in oklab, var(--destructive) 20%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--destructive) 5%, transparent);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--destructive);
}
.login-alert svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 0.1rem; }

.login-note {
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--brand-soft) 55%, transparent);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--brand-strong);
}

.login-switch {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-fg);
}
.login-switch a {
  margin-left: 0.25rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.login-switch a:hover { text-decoration: underline; }

.auth-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted-fg);
}
.auth-secure-badge {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--security);
  color: var(--security-fg);
}
.auth-secure-badge svg { width: 0.7rem; height: 0.7rem; }

/* --- status content (pending / expired) -------------------------------- */

.auth-status-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  background: color-mix(in oklab, var(--brand-soft) 70%, transparent);
  color: var(--brand-strong);
}
.auth-status-mark.is-muted {
  background: var(--field);
  color: var(--muted-fg);
  border-color: var(--border);
}
.auth-status-mark svg { width: 1.75rem; height: 1.75rem; }

.login-meta {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field);
}
.login-meta > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.login-meta dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.login-meta dd {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.login-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--success);
}
.login-dot.is-stopped { background: var(--destructive); }
.login-dot.is-waiting {
  background: oklch(0.72 0.15 75);
  animation: login-dot-breathe 2.4s ease-in-out infinite;
}

/* --- motion ------------------------------------------------------------ */

@keyframes auth-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes login-dot-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

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

@media (min-width: 64rem) and (max-height: 48rem) {
  .auth-molecule { top: 6%; height: 44%; }
  .auth-panel-copy h1 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
  .auth-panel-lede { margin-top: 1rem; }
  .auth-perks { gap: 0.55rem; margin-top: 1rem; }
  .auth-perks li { font-size: 0.85rem; }
  .auth-panel-foot { margin-top: 0.75rem; }
}


/* === app pages (signed in) ============================================= */

/* Dricenta signed-in product. Login stays on the :root purple. */
body.app {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --background: #f0f4f8;
  --foreground: #1e293b;
  --muted-fg: #6b7280;
  --surface: #f0f4f8;
  --surface-raised: #ffffff;
  --border: #e2e8f0;
  --hover: #f1f5f9;
  --brand: #0d9488;
  --brand-strong: #0f766e;
  --brand-soft: #ccfbf1;
  /* Icon tiles, in the order dricenta-ui.mdc gives them: pathway groups read their colour from these. */
  --tile-blue-bg: #dbeafe; --tile-blue-fg: #2563eb;
  --tile-violet-bg: #ede9fe; --tile-violet-fg: #7c3aed;
  --tile-green-bg: #d1fae5; --tile-green-fg: #059669;
  --tile-amber-bg: #fef3c7; --tile-amber-fg: #d97706;
  --tile-red-bg: #fee2e2; --tile-red-fg: #dc2626;
  --tile-cyan-bg: #e0f2fe; --tile-cyan-fg: #0891b2;
  --ring: #0d9488;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
}

/* --- shell: sidebar, top bar, breadcrumbs, footer ------------------------ */

.app-shell { display: flex; min-height: 100dvh; }
.app-column { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app .icon { width: 1.125rem; height: 1.125rem; flex: none; }
svg[hidden] { display: none; } /* the icon sprite; [hidden] alone does not hide an svg */

.app-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: var(--rail-width);
  flex: 0 0 var(--rail-width);
  height: 100dvh;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  background: var(--surface-raised);
  border-right: 0;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
}
.rail-brand { display: flex; align-items: center; min-height: 2.5rem; padding: 0 var(--space-2); border-radius: var(--radius); }
.rail-logo { display: block; width: auto; max-width: 100%; height: 1.5rem; }
.rail-mark { display: none; width: 2rem; height: 2rem; }
.rail-module {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 4px 12px 8px;
  border: 0;
  background: none;
}
.rail-module-name {
  max-width: 100%;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rail-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius);
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}
.rail-switch:hover { text-decoration: underline; }
.rail-switch .icon { width: 0.875rem; height: 0.875rem; }

.rail-nav { display: flex; flex-direction: column; gap: var(--space-4); }
.nav-group { display: flex; flex-direction: column; }
.nav-section {
  margin: 0;
  padding: 8px 12px 4px;
  color: var(--muted-fg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--foreground);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-link .icon { color: var(--muted-fg); }
a.nav-link:hover { background: var(--hover); }
a.nav-link:active { background: var(--border); }
.nav-link.is-active { background: var(--brand); color: var(--surface-raised); }
.nav-link.is-active .icon,
.nav-link.is-active .nav-count { color: var(--surface-raised); }
a.nav-link.is-active:hover { background: var(--brand-strong); }
.nav-link.is-soon { color: var(--muted-fg); cursor: default; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { margin-left: auto; color: var(--muted-fg); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.nav-count.is-warning { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--warning) 14%, transparent); color: var(--warning); font-weight: 700; }

/* Desktop: the toggle collapses the sidebar to icons. Labels stay in title="" for the tooltip. */
@media (min-width: 64rem) {
  .nav-collapsed .app-rail { width: var(--rail-width-collapsed); flex-basis: var(--rail-width-collapsed); padding-inline: var(--space-2); }
  .nav-collapsed .rail-logo,
  .nav-collapsed .rail-module-name,
  .nav-collapsed .rail-module .app-badge,
  .nav-collapsed .nav-section,
  .nav-collapsed .nav-label,
  .nav-collapsed .nav-count { display: none; }
  .nav-collapsed .rail-mark { display: block; }
  .nav-collapsed .rail-brand { justify-content: center; padding: 0; }
  .nav-collapsed .rail-module { justify-items: center; padding: 0; border: 0; background: none; }
  .nav-collapsed .rail-switch,
  .nav-collapsed .nav-link { justify-content: center; width: 100%; min-height: 2.5rem; padding: 0; }
  .app-brand.is-narrow-only,
  .nav-scrim { display: none; }
}

/* Below 1024px the sidebar is an overlay the toggle opens; hidden from tab order while closed. */
@media (max-width: 63.99rem) {
  .app-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(var(--rail-width), 85vw);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 200ms ease-in, visibility 0s linear 200ms;
  }
  .nav-open .app-rail { transform: none; visibility: visible; box-shadow: var(--shadow-row); transition: transform 240ms ease-out; }
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 30;
    border: 0;
    background: color-mix(in oklab, var(--foreground) 35%, transparent);
  }
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-6);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}
.app-brand { display: block; border-radius: var(--radius); }
.app-brand img { display: block; height: 1.6rem; }
.app-spacer { flex: 1; }
.app-account { display: flex; align-items: center; gap: var(--space-1); margin: 0; }
.app-user { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-fg); font-size: var(--text-sm); }
.trial-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted-fg);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.trial-chip .icon { width: 0.875rem; height: 0.875rem; }
.trial-chip.is-urgent {
  border-color: color-mix(in oklab, var(--destructive) 35%, transparent);
  background: color-mix(in oklab, var(--destructive) 8%, transparent);
  color: var(--destructive);
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--foreground);
  cursor: pointer;
}
.icon-btn:hover { background: var(--hover); border-color: var(--border); }
.icon-btn:active { background: var(--border); }
.app-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  color: var(--brand);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.app-link:hover { background: var(--hover); }
.app-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  background: var(--field);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.app-button:hover { border-color: var(--brand); }
.app-button:active { background: var(--hover); }

.app-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); color: var(--muted-fg); font-size: var(--text-xs); }
.app-crumbs a { border-radius: var(--radius); color: var(--muted-fg); text-decoration: none; }
.app-crumbs a:hover { color: var(--foreground); text-decoration: underline; }
.app-crumbs [aria-current] { color: var(--foreground); font-weight: 600; }

.app-footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--muted-fg);
  font-size: var(--text-xs);
}
.app-footer-logo { display: block; height: 1.5rem; }
.app-footer-note { flex: 1 1 16rem; margin: 0; font-size: var(--text-sm); }
.app-footer-legal { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .app-rail, .nav-open .app-rail, .nav-link { transition: none; }
}

.app-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--surface-raised);
  z-index: 10;
}
.skip-link:focus { top: var(--space-3); }
.app :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.app-main { max-width: 72rem; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-10); }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.page-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
}
.page-lede { color: var(--muted-fg); margin: var(--space-1) 0 0; max-width: 65ch; }
.section-title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.75rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.section-lede { color: var(--muted-fg); font-size: var(--text-sm); margin: var(--space-1) 0 0; max-width: 65ch; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.btn-primary { background: var(--brand); color: var(--surface-raised); }
.btn-primary:hover { background: var(--brand-strong); }
.btn-secondary { background: var(--surface-raised); border-color: var(--input-border); color: var(--foreground); }
.btn-secondary:hover { border-color: var(--brand); }

/* --- module picker ------------------------------------------------------ */

.module-group + .module-group { margin-top: var(--space-10); }
.module-group-head { margin-bottom: var(--space-4); }
.module-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.module-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.module-row:hover { border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); box-shadow: var(--shadow-row); }
.module-row:hover .btn-open { background: var(--brand); color: var(--surface-raised); }
.module-row:has(.module-link:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }

.module-name { font-size: 1rem; line-height: 1.5rem; font-weight: 600; margin: 0; }
.module-link { color: inherit; text-decoration: none; }
.module-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.app .module-link:focus-visible { outline: none; }
.module-desc { color: var(--muted-fg); font-size: 0.875rem; margin: var(--space-1) 0 0; }

.seed-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.seed-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  color: var(--foreground);
}
.seed-chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--seed-colour); }
.seed-gene { --seed-colour: var(--entity-gene); font-family: var(--font-mono); font-size: 0.75rem; }
.seed-disease { --seed-colour: var(--entity-disease); }

.module-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.module-stats dt { color: var(--muted-fg); font-size: 0.75rem; }
.module-stats dd { margin: 0; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.module-pending { color: var(--muted-fg); font-size: 0.875rem; margin: 0; }

.module-side { display: grid; justify-items: end; gap: var(--space-1); }
.role-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.module-fresh { color: var(--muted-fg); font-size: 0.75rem; white-space: nowrap; }
.btn-open { margin-top: var(--space-1); min-width: 5rem; background: var(--brand-soft); color: var(--brand-strong); }

.empty-state {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  max-width: 42rem;
  padding: var(--space-8);
  border: 1px dashed var(--input-border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.empty-state .section-lede { margin: 0 0 var(--space-2); }
.app code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: 0 var(--space-1);
  border-radius: 0.25rem;
  background: var(--brand-soft);
}

@media (max-width: 960px) {
  .app-user { display: none; }
  .module-row { grid-template-columns: minmax(0, 1fr) auto; }
  .module-stats { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .app-topbar { padding: var(--space-2) var(--space-4); gap: var(--space-2); }
  .app-footer { padding: var(--space-6) var(--space-4); }
  .app-brand img { height: 1.25rem; }
  /* icon-only on phones; the text stays for screen readers */
  .app-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-link, .app-button { justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0; }
  .app-main { padding: var(--space-6) var(--space-4) var(--space-8); }
  .page-head .btn { width: 100%; }
  .module-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); }
  .module-stats { grid-row: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .module-side { display: flex; align-items: center; gap: var(--space-2); }
  .btn-open { margin: 0 0 0 auto; min-height: 2.75rem; }
  .btn { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .module-row { transition: none; }
}

/* --- module dashboard --------------------------------------------------- */

.app-main:has(> :is(.dash-head, .explorer-head)) {
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: stretch;
  padding: var(--space-6);
}
.app-main:has(> :is(.dash-head, .explorer-head)) .app-crumbs { margin-bottom: var(--space-2); }
.dash-head { align-items: flex-start; margin-bottom: var(--space-6); }
/* Nine figure columns squeeze the disease name to one word a line; it keeps room, the figures scroll instead. */
.burden-table tbody th { min-width: 16rem; }
.dash-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dash-head .page-lede { margin-top: var(--space-1); }
.dash-scope { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 0 auto; }
/* Several diseases can be in scope: a disclosure of checkboxes, applied together. */
.dash-scope-menu { position: relative; }
.dash-scope-menu summary {
  display: flex;
  align-items: center;
  min-width: 16rem;
  max-width: 100%;
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--foreground);
  font-size: 13px;
  list-style: none;
  cursor: pointer;
}
.dash-scope-menu summary::-webkit-details-marker { display: none; }
.dash-scope-menu summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dash-scope-menu fieldset {
  position: absolute;
  z-index: 20;
  right: 0;
  display: grid;
  gap: 2px;
  min-width: 100%;
  margin: 6px 0 0;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.dash-scope-menu label { display: flex; align-items: center; gap: var(--space-2); padding: 6px; border-radius: 8px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.dash-scope-menu label:hover { background: var(--hover); }
.dash-scope-note { margin: var(--space-1) 6px 0; color: var(--muted-fg); font-size: 12px; }
.dash-scope-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-2); }
/* The gene menu searches ~16k genes instead of listing them: picked ticks on top, then the box, then matches. */
.dash-gene-picker { width: min(24rem, calc(100vw - 32px)); }
.dash-gene-picker [data-gene-picked]:not(:has(label)) { display: none; }
.dash-gene-picker [data-gene-picked] { display: grid; gap: 2px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); }
.dash-scope-menu .dash-gene-search-label { padding: var(--space-1) 6px 0; font-weight: 500; cursor: default; }
.dash-scope-menu .dash-gene-search-label:hover { background: none; }
.dash-gene-search { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: var(--foreground); font: inherit; font-size: 13px; }
.dash-gene-search:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.dash-gene-results { display: grid; gap: 2px; max-height: 16rem; overflow-y: auto; }
.dash-gene-results[aria-busy="true"] { opacity: 0.6; }
.dash-gene-picker label { white-space: normal; }
.dash-gene-name { overflow: hidden; color: var(--muted-fg); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dash-head .page-title,
.explorer-head .page-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--brand);
}
.dash-head .page-lede,
.explorer-head .page-lede { font-size: 14px; color: var(--muted-fg); }
.dash-section .section-title {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--foreground);
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
}
.segmented a {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
.segmented a:hover { border-color: var(--brand); color: var(--brand); }
.segmented a[aria-current="page"] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--surface-raised);
  box-shadow: 0 2px 6px rgba(47, 105, 155, 0.25);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.chip.is-aka {
  border-color: transparent;
  background: color-mix(in oklab, var(--brand) 14%, var(--surface-raised));
  color: var(--brand);
  font-weight: 600;
}
.chip.is-mention-gene { border-color: transparent; background: color-mix(in oklab, var(--brand) 16%, #fff); color: var(--brand); font-weight: 600; }
.chip.is-mention-disease { border-color: transparent; background: var(--tag-approved-bg); color: var(--tag-approved-fg); font-weight: 600; }
.chip.is-mention-drug { border-color: transparent; background: var(--tag-phase-2-bg); color: var(--tag-phase-2-fg); font-weight: 600; }
.chip.is-mention-trial,
.chip.is-mention-company { border-color: transparent; background: var(--tag-phase-3-bg); color: var(--tag-phase-3-fg); font-weight: 600; }
.chip.is-mention-concept { border-color: transparent; background: var(--surface-sunken, #f1f5f9); color: var(--muted-fg); }

.kpi-panel { margin-bottom: var(--space-4); }
.kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
/* six, three or two across, never five and an orphan */
@media (max-width: 79.99rem) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Each card takes three of the row's tracks (icon, label, figure), so a label that wraps under its "i" moves every
   figure in that row down together instead of leaving one out of line. */
.kpi {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 2px;
  justify-items: start;
  align-content: start;
  overflow: hidden;
  padding: 14px 12px 12px;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  min-height: 148px;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), #5ba3d9);
}
.kpi-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 8px;
  border-radius: 10px;
}
.kpi-icon .icon { width: 18px; height: 18px; }
.kpi-row > .kpi:nth-child(6n + 1) .kpi-icon { background: #dbeafe; color: #2563eb; }
.kpi-row > .kpi:nth-child(6n + 2) .kpi-icon { background: #ede9fe; color: #7c3aed; }
.kpi-row > .kpi:nth-child(6n + 3) .kpi-icon { background: #d1fae5; color: #059669; }
.kpi-row > .kpi:nth-child(6n + 4) .kpi-icon { background: #fef3c7; color: #d97706; }
.kpi-row > .kpi:nth-child(6n + 5) .kpi-icon { background: #fee2e2; color: #dc2626; }
.kpi-row > .kpi:nth-child(6n + 6) .kpi-icon { background: #e0f2fe; color: #0891b2; }
.kpi dt {
  font-size: 11px;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-fg);
}
.kpi dd { display: grid; align-content: start; gap: 2px; margin: 0; }
.kpi-figure {
  color: var(--foreground);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kpi-note { font-size: 12px; line-height: 1rem; color: var(--muted-fg); }
.kpi-row + .kpi-row { margin-top: var(--space-3); }

/* sticky section bar; app.js marks the section in view */
.dash-tabs {
  position: sticky;
  top: 3.5rem;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: 0;
  padding: var(--space-2) 0;
  border: 0;
  background: var(--background);
}
.dash-tabs a {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
  color: var(--foreground);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
.dash-tabs a:hover { border-color: var(--brand); color: var(--brand); }
.dash-tabs a.is-active {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--surface-raised);
  box-shadow: 0 2px 6px rgba(47, 105, 155, 0.25);
}

.dash-section { margin-top: var(--space-8); scroll-margin-top: 7rem; }
.dash-section-head { margin-bottom: var(--space-3); }
.dash-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-12 { grid-column: span 12; }

.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
}
.panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.panel-head-text { flex: 1; min-width: 0; }
.panel-download { flex: none; margin: calc(-1 * var(--space-1)) 0; color: var(--muted-fg); }
.panel-download:hover { color: var(--brand); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; background: none; border-color: transparent; }
/* Literature's three cards share a row on wide screens only. */
@media (max-width: 1200px) { .dash-grid > .span-4 { grid-column: span 6; } }
.panel-title { font-size: 16px; line-height: 1.5rem; font-weight: 600; margin: 0; }
.panel-lede { margin: 0; font-size: var(--text-xs); line-height: 1rem; color: var(--muted-fg); }
.panel-insight {
  margin: var(--space-4) var(--space-6) 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--brand);
  font-size: var(--text-sm);
  line-height: 1.25rem;
  font-weight: 500;
}
.panel-insight:empty { display: none; }
.panel-body { flex: 1; min-height: 0; padding: var(--space-4) var(--space-6) var(--space-6); }
.panel-body.is-flush { padding: 0; }
.panel-body.is-flush > .skeleton-table,
.panel-body.is-flush > .panel-state { margin: var(--space-4) var(--space-6); }
.panel-body.is-flush > .table-scroll { border: 0; border-radius: 0; }
.panel-foot { margin: var(--space-3) 0 0; font-size: var(--text-xs); line-height: 1rem; color: var(--muted-fg); }
.panel-body.is-flush > .panel-foot { margin: 0; padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border); }
.chart { height: 20rem; }

.panel-state {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  min-height: 12rem;
  height: 100%;
  padding: var(--space-6);
  border: 1px dashed var(--input-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--muted-fg);
}
.panel-state p { margin: 0; max-width: 42ch; }
.panel-state.is-error { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 35%, transparent); }
.kpi-panel .panel-state { min-height: 7rem; background: var(--surface-raised); }

.skeleton {
  display: block;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, var(--chart-grid-soft) 25%, var(--background) 50%, var(--chart-grid-soft) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 0.75rem; }
.skeleton-line.is-short { width: 50%; }
.skeleton-figure { height: 2rem; width: 70%; }
.skeleton-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  height: calc(20rem + 2.25rem);
  padding: var(--space-8) var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.skeleton-chart .skeleton { flex: 1; border-radius: 0.25rem 0.25rem 0 0; }
.skeleton-chart .skeleton:nth-child(1) { height: 55%; }
.skeleton-chart .skeleton:nth-child(2) { height: 85%; }
.skeleton-chart .skeleton:nth-child(3) { height: 40%; }
.skeleton-chart .skeleton:nth-child(4) { height: 68%; }
.skeleton-chart .skeleton:nth-child(5) { height: 30%; }
.skeleton-chart .skeleton:nth-child(6) { height: 50%; }
.skeleton-table { display: grid; gap: var(--space-4); padding-top: var(--space-2); }
.skeleton-table .skeleton-line:nth-child(odd) { width: 85%; }
@keyframes skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.table-scroll { max-height: 26rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: 1.25rem; }
.data-table th,
.data-table td { padding: var(--space-2) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(135deg, var(--brand), #3a7ab5);
  font-size: 13px;
  font-weight: 600;
  color: var(--surface-raised);
  white-space: nowrap;
}
.data-table tbody th { font-weight: 600; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody tr:hover > * { background: color-mix(in oklab, var(--brand-soft) 50%, transparent); }
.data-table .is-number { text-align: right; font-variant-numeric: tabular-nums; }
.cell-sub { display: block; font-size: var(--text-xs); line-height: 1rem; font-weight: 400; color: var(--muted-fg); }
.cell-sub.is-danger { color: var(--destructive); font-weight: 600; }
/* "+2 more" as a button: hover, focus or tap shows what it stands for in the info tooltip (app.js, [data-info]). */
.cell-more { padding: 0; border: 0; background: none; color: var(--muted-fg); font-family: inherit; font-size: var(--text-xs); text-align: left; text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.cell-more:hover, .cell-more:focus-visible, .cell-more[aria-describedby] { color: var(--brand); }
.cell-more:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
.chip-more { font-family: inherit; cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
.chip-more:hover, .chip-more:focus-visible, .chip-more[aria-describedby] { border-color: var(--brand); color: var(--brand); }
.chip-more:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.is-muted { color: var(--muted-fg); }
.is-nowrap { white-space: nowrap; }
.gene-symbol { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; }
.tag {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: var(--tag-unknown-bg);
  color: var(--tag-unknown-fg);
  font-size: 12px;
  line-height: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
}
.tag.is-active { background: var(--tag-active-bg); color: var(--tag-active-fg); }
.tag.is-inactive { background: var(--tag-inactive-bg); color: var(--tag-inactive-fg); }
.tag.is-discontinued { background: var(--tag-discontinued-bg); color: var(--tag-discontinued-fg); }
.tag.is-withdrawn { background: var(--tag-withdrawn-bg); color: var(--tag-withdrawn-fg); }
.tag.is-unknown { background: var(--tag-unknown-bg); color: var(--tag-unknown-fg); }
.tag.is-preclinical { background: var(--tag-preclinical-bg); color: var(--tag-preclinical-fg); }
.tag.is-phase-1 { background: var(--tag-phase-1-bg); color: var(--tag-phase-1-fg); }
.tag.is-phase-2 { background: var(--tag-phase-2-bg); color: var(--tag-phase-2-fg); }
.tag.is-phase-3 { background: var(--tag-phase-3-bg); color: var(--tag-phase-3-fg); }
.tag.is-prereg { background: var(--tag-prereg-bg); color: var(--tag-prereg-fg); }
.tag.is-approved { background: var(--tag-approved-bg); color: var(--tag-approved-fg); }

.empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; }
.empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--background); color: var(--muted-fg); }
.empty-icon .icon { width: 1.375rem; height: 1.375rem; }
.empty h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-base); }
.empty p { margin: 0; max-width: 52ch; color: var(--muted-fg); font-size: var(--text-sm); }

@media (max-width: 960px) {
  .dash-grid > [class*="span-"] { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .app-workspace, .app-switch { display: none; }
  .dash-scope { margin-left: 0; width: 100%; }
  .dash-scope-menu summary { width: 100%; min-width: 0; }
  .dash-scope-menu fieldset { left: 0; right: auto; }
  .segmented { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; contain: inline-size; }
  .segmented a { flex: 0 0 auto; min-height: 2.75rem; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-figure { font-size: 22px; line-height: 1; }
  .dash-tabs { flex-wrap: nowrap; overflow-x: auto; contain: inline-size; }
  .panel-head, .panel-body { padding-inline: var(--space-4); }
  .panel-insight { margin-inline: var(--space-4); }
  .panel-body.is-flush { padding-inline: 0; }
  .panel-body.is-flush > .panel-foot { padding-inline: var(--space-4); }
  .trial-chip { padding: var(--space-2); }
  .chart { height: 18rem; }
  .skeleton-chart { height: calc(18rem + 2.25rem); }
}
.data-table a { color: var(--brand); font-weight: 600; text-decoration: none; }
.data-table a:hover { text-decoration: underline; }
.kpi-row.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-row.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.disease-tabs { margin-bottom: var(--space-4); }
.disease-block { margin-top: var(--space-4); }
.disease-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.panel > .disease-search {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
/* .panel is a flex column; a filter form that is also the panel must still lay out as a row. */
form.disease-search.panel { flex-direction: row; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); }
.disease-search select,
.disease-search input {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
}
.disease-search input { flex: 1 1 14rem; max-width: 22rem; }
.disease-search input.topic-query { flex: 1 1 8rem; max-width: 11rem; }
.disease-search select { flex: 0 1 12rem; max-width: 16rem; }
/* Compact: many filters on one row at desktop width, wrapping below it. 36px, the knowledge graph's control height. */
.disease-search.is-compact { gap: var(--space-1); }
.disease-search.is-compact select,
.disease-search.is-compact input { min-width: 0; min-height: 2.25rem; padding: 0 var(--space-2); font-size: var(--text-xs); }
.disease-search.is-compact input { flex: 1 1 8rem; max-width: 18rem; }
.disease-search.is-compact input.topic-query { flex: 0 1 6rem; }
.disease-search.is-compact select { flex: 0 1 7.5rem; max-width: 12rem; }
.disease-search.is-compact select.is-narrow { flex-basis: 5rem; }
.disease-search.is-compact .btn { min-height: 2.25rem; padding-block: 0; font-size: var(--text-xs); }
/* Each filter with its label above it (docs/DESIGN.md: a placeholder is not a label); the button lines up with the
   controls, not the labels. */
.disease-search.has-labels { align-items: flex-end; }
.filter-field { display: grid; gap: var(--space-1); flex: 1 1 7rem; min-width: 0; max-width: 10rem; }
.filter-field.is-wide { flex: 2 1 12rem; max-width: 18rem; }
.filter-field label { font-size: var(--text-xs); font-weight: 600; color: var(--muted-fg); }
.disease-search .filter-field select,
.disease-search .filter-field input { width: 100%; max-width: none; }
@media (max-width: 640px) {
  .filter-field, .filter-field.is-wide { flex-basis: calc(50% - var(--space-1)); max-width: none; }
  .filter-field.is-wide { flex-basis: 100%; }
}
.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--muted-fg);
}
.pager a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--foreground);
  font-weight: 600;
  text-decoration: none;
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.disease-search select:focus-visible,
.disease-search input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.aka-names { min-width: 0; max-width: 100%; }
.aka-names .chip { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
@media (max-width: 79.99rem) {
  .kpi-row.is-four,
  .kpi-row.is-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.dash-tabs) { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .segmented a, .dash-tabs a { transition: none; }
  .skeleton { animation: none; }
}

/* --- explorer tables: filter chips, sortable heads, clipped cells; gene pages ------------------------ */

.table-scroll.is-tall { max-height: 40rem; }
.cell-clip { max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.filter-chips-label { font-size: var(--text-xs); font-weight: 600; color: var(--muted-fg); }
.chip.is-removable { gap: var(--space-2); text-decoration: none; }
.chip.is-removable span { font-size: 14px; line-height: 1; color: var(--muted-fg); }
.chip.is-removable:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-removable:hover span { color: var(--brand); }
.chip.is-removable:focus-visible,
.filter-clear:focus-visible,
.data-table th.is-sortable a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.filter-clear { font-size: var(--text-xs); font-weight: 600; color: var(--brand); }

.data-table th.is-sortable a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.data-table th.is-number.is-sortable a { flex-direction: row-reverse; }
.data-table th.is-sortable a:hover { text-decoration: underline; }
.sort-icon::after { content: "↕"; opacity: 0.55; }
th[aria-sort="ascending"] .sort-icon::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .sort-icon::after { content: "↓"; opacity: 1; }

.tab-count {
  margin-left: var(--space-2);
  padding: 0 6px;
  border-radius: 10px;
  background: var(--background);
  color: var(--muted-fg);
  font-size: 10px;
  line-height: 1rem;
  font-weight: 700;
}
.dash-tabs a.is-active .tab-count { background: color-mix(in oklab, var(--surface-raised) 25%, transparent); color: var(--surface-raised); }

.drug-head { align-items: flex-start; }
.drug-aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.panel > .drug-structure { display: flex; justify-content: center; margin: 0; padding: var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface-raised); }
.panel > .drug-structure img { display: block; width: 16rem; height: 12rem; object-fit: contain; }
.drug-more { margin-top: var(--space-2); }
.drug-more summary { cursor: pointer; color: var(--brand); font-size: var(--text-sm); font-weight: 600; }
.drug-description { margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: 1.5rem; color: var(--muted-fg); }
.drug-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); margin: 0; }
.drug-facts .is-wide { grid-column: 1 / -1; padding-top: var(--space-3); border-top: 1px solid var(--border); }
.drug-facts dt { font-size: 11px; line-height: 1rem; font-weight: 600; color: var(--muted-fg); }
.drug-facts dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.drug-facts .cell-sub { display: block; }
.drug-synonyms .chip { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Every target is listed now that the drug page has no Targets tab; a long list scrolls inside the card. */
.target-list { max-height: 28rem; overflow-y: auto; list-style: none; margin: 0; padding: 0; }
.target-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
.target-list a { color: var(--brand); font-weight: 600; text-decoration: none; }
.target-list a:hover { text-decoration: underline; }
.target-list li > span:nth-child(2) { flex: 1; min-width: 8rem; color: var(--muted-fg); font-size: var(--text-sm); }
.dash-grid.is-start { align-items: start; }
@media (max-width: 900px) {
  .drug-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .drug-facts { grid-template-columns: 1fr; }
}
.gene-about p { margin: 0; font-size: var(--text-sm); line-height: 1.5rem; }
.gene-about-head {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 13px;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}
@media (max-width: 640px) {
  .filter-chips { padding-inline: var(--space-4); }
  .cell-clip { max-width: 28ch; }
}

/* --- trial detail: stop note, timeline, facts, criteria ----------------------------------------------------- */

.trial-head .page-title { max-width: 72ch; font-size: 22px; line-height: 1.3; }
.trial-head .page-lede { margin-bottom: var(--space-2); }
.trial-tags { margin-top: var(--space-3); align-items: center; }
.gene-about .trial-official { margin-bottom: var(--space-3); color: var(--muted-fg); font-style: italic; }

.trial-stopped {
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent);
  border-left: 3px solid var(--destructive);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--destructive) 6%, var(--surface-raised));
  font-size: var(--text-sm);
}
.trial-stopped strong { color: var(--destructive); }
.trial-stopped p { margin: var(--space-1) 0 0; }

.trial-timeline { position: relative; height: 5.5rem; margin: 0 var(--space-6); }
.trial-timeline-track {
  position: absolute;
  inset: 2.5rem 0 auto;
  height: 8px;
  border-radius: 4px;
  background: var(--hover);
  overflow: hidden;
}
.trial-timeline-fill { display: block; height: 100%; background: var(--brand); }
.trial-timeline-mark {
  position: absolute;
  top: calc(2.5rem - 4px);
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 3px solid var(--surface-raised);
  border-radius: 50%;
  background: var(--brand-strong);
  box-shadow: 0 0 0 1px var(--border);
}
.trial-timeline-label {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  display: grid;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  line-height: 1rem;
  color: var(--muted-fg);
  text-align: center;
  white-space: nowrap;
}
.trial-timeline-label strong { color: var(--foreground); font-weight: 600; }
.trial-timeline-mark:first-of-type .trial-timeline-label { left: 0; transform: none; text-align: left; }
.trial-timeline-mark:nth-last-child(1 of .trial-timeline-mark) .trial-timeline-label { left: auto; right: 0; transform: none; text-align: right; }
.trial-timeline-today {
  position: absolute;
  top: 1.75rem;
  height: 1.75rem;
  border-left: 2px dashed var(--destructive);
}
.trial-timeline-today span {
  position: absolute;
  bottom: 100%;
  left: 0;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--destructive);
}

.trial-facts { display: grid; gap: var(--space-2); margin: 0; }
.trial-facts div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--space-3); font-size: var(--text-sm); }
.trial-facts dt { color: var(--muted-fg); }
.trial-facts dd { margin: 0; font-weight: 500; }
.trial-links { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.trial-links a { color: var(--brand); font-weight: 600; text-decoration: none; margin-right: var(--space-2); }
.trial-links a:hover { text-decoration: underline; }
.gene-about .chip-row a.chip { text-decoration: none; }
.gene-about .chip-row a.chip:hover { border-color: var(--brand); color: var(--brand); }
.trial-criteria { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); line-height: 1.4rem; }
form.disease-search.panel > label:not(.visually-hidden) { font-size: var(--text-sm); font-weight: 600; }
@media (max-width: 640px) {
  .trial-facts div { grid-template-columns: 1fr; gap: 0; }
  .trial-timeline { margin: 0 var(--space-2); }
}

/* --- gene list: one leading drug per line ----------------------------------------------------------------- */

.leading-drug { display: block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leading-drug .cell-sub { display: inline; }

/* --- literature: paper list and reader -------------------------------------------------------------------------- */

.span-8 { grid-column: span 8; }
.paper-title { color: var(--foreground); font-size: 15px; line-height: 1.4; font-weight: 600; text-decoration: none; }
.paper-title:hover { color: var(--brand); text-decoration: underline; }
.paper-title:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.paper-meta { margin: 0; font-size: var(--text-xs); line-height: 1rem; color: var(--muted-fg); }
.paper-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.paper-tags:empty { display: none; }
.paper-snippet { margin: 0; font-size: var(--text-sm); line-height: 1.4rem; color: var(--foreground); }
.paper-snippet mark { padding: 0 2px; border-radius: 3px; background: var(--brand-soft); color: var(--brand-strong); }
.paper-where { font-size: var(--text-xs); font-weight: 600; color: var(--muted-fg); }
.paper-mentions { margin-top: var(--space-1); }
.paper-mentions .chip { padding: 2px 10px; text-decoration: none; }
.paper-mentions a.chip:hover { border-color: var(--brand); color: var(--brand); }
.gene-about .paper-authors { margin-bottom: var(--space-3); color: var(--muted-fg); font-size: var(--text-xs); }
.paper-side { display: grid; align-content: start; gap: 0; }
@media (max-width: 960px) {
  .paper-layout > .span-8,
  .paper-layout > .span-4 { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
}

/* Reader: the contents list beside the text, as in v2. The number sits in a fixed column so titles line up at
   any depth; the left border carries "you are here". Nested sections get a rule down their left edge, because
   past the third level the type scale has run out of steps. */
.reader { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.reader-toc {
  position: sticky;
  top: 4.5rem;
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
}
.reader-toc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.reader-toc-head span { font-size: var(--text-xs); color: var(--muted-fg); }
.reader-label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-fg); }
.reader-label.is-accent { color: var(--brand); }
.reader-num { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--muted-fg); }
.reader-toc ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.reader-toc a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding: 6px var(--space-2);
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted-fg);
  text-decoration: none;
}
.reader-toc a:hover { background: var(--hover); color: var(--foreground); }
.reader-toc a:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.reader-toc a.is-active { border-left-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.reader-toc a.is-active .reader-num { color: var(--brand-strong); }
.reader-toc li.is-depth-1 a { padding-left: var(--space-4); }
.reader-toc li.is-depth-2 a { padding-left: var(--space-8); }
.reader-toc li.is-aside a { font-style: italic; }

.reader-doc { min-width: 0; padding: var(--space-8); border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }
.reader-lead { display: grid; gap: var(--space-1); margin-bottom: var(--space-8); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.reader-lead p { margin: 0; font-size: var(--text-sm); color: var(--muted-fg); }
.reader-lead .reader-licence { overflow: hidden; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.reader-section { scroll-margin-top: 4.5rem; }
.reader-section + .reader-section { margin-top: var(--space-6); }
.reader-section.is-level-1,
.reader-section.is-level-2 { padding-left: var(--space-4); border-left: 2px solid var(--border); }
.reader-section.is-level-2 { margin-left: var(--space-3); }
.reader-section-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-3); }
.reader-section-head h3,
.reader-section-head h4,
.reader-section-head h5 { margin: 0; line-height: 1.3; color: var(--foreground); overflow-wrap: anywhere; }
.reader-section-head h3 { font-size: var(--text-xl); font-weight: 700; }
.reader-section-head h4 { font-size: var(--text-lg); font-weight: 600; }
.reader-section-head h5 { font-size: var(--text-base); font-weight: 600; }
/* A permalink beside every heading is noise until someone wants one: shown on hover, reachable by keyboard. */
.reader-anchor { color: var(--muted-fg); text-decoration: none; opacity: 0; }
.reader-section-head:hover .reader-anchor,
.reader-anchor:focus-visible { opacity: 1; }
.reader-anchor:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.reader-copy p { margin: 0 0 var(--space-3); font-size: var(--text-base); line-height: 1.78; color: var(--foreground); overflow-wrap: anywhere; }
.reader-copy p:last-child { margin-bottom: 0; }
.reader-aside { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); scroll-margin-top: 4.5rem; }
.reader-aside > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); cursor: pointer; font-weight: 600; color: var(--foreground); }
.reader-aside > summary:hover { color: var(--brand); }
.reader-aside > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.reader-aside .reader-copy { margin-top: var(--space-3); }
.reader-aside .reader-copy p { font-size: var(--text-sm); line-height: 1.65; color: var(--muted-fg); }
/* Narrow screens: the contents list sits above the text, capped so it does not own the first screen. */
@media (max-width: 1024px) {
  .reader { grid-template-columns: minmax(0, 1fr); }
  .reader-toc { position: static; max-height: 18rem; }
}
@media (max-width: 640px) {
  .reader-doc { padding: var(--space-4); }
}

/* === knowledge graph ===================================================== */

.app-column:has(.kg) .app-footer { display: none; }
.app-main:has(> .kg) {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: stretch;
  padding: var(--space-4) 20px 20px;
}
.kg { --kg-edge: #7c3aed; display: flex; flex: 1; flex-direction: column; gap: var(--space-3); min-height: 0; }
.kg [hidden] { display: none !important; }
.kg button:disabled { opacity: 0.45; cursor: not-allowed; }

/* header and filter bar */
.kg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.kg-head .page-title { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: 0; color: var(--brand); }
.kg-head .page-lede { margin: var(--space-1) 0 0; font-size: 14px; }
.kg-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.kg-add { position: relative; flex: 1 1 220px; max-width: 320px; }
.kg-add input, .kg-pop input[type="search"], .kg-pop select, .kg-panel-empty input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
}
.kg-pop select { margin-bottom: var(--space-2); }
.kg :is(input, select, button, a):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.kg-hits {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.kg-hits button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.kg-hits button:hover, .kg-checks label:hover { background: var(--hover); }
.kg-trigger, .kg-explored .kg-seg, .kg-zoom button, .kg-tabs button {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.kg-trigger { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); }
.kg-trigger:hover, .kg-tabs button:hover, .kg-explored .kg-seg:hover { border-color: var(--brand); }
.kg-trigger[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.kg-count {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.kg-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; min-height: 28px; }
.kg-text { border: 0; background: none; color: var(--brand); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

/* filter popovers: draft until Apply */
.kg-menu { position: relative; }
.kg-pop {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  width: min(360px, 86vw);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(15, 23, 42, 0.12);
}
/* Menus grow sideways, not into a scroll box; the max-height is only a guard for very short windows. */
.kg-menu[data-group="genes"] .kg-pop { width: min(880px, 94vw); }
.kg-menu[data-group="drugs"] .kg-pop { width: min(920px, 94vw); }
.kg-menu[data-group="trials"] .kg-pop { width: min(755px, 94vw); }
.kg-menu[data-group="layers"] .kg-pop { width: min(460px, 94vw); }
.kg-pop-body { max-height: calc(100dvh - 220px); overflow: auto; }
.kg-grid { display: grid; gap: var(--space-4) var(--space-6); }
.kg-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kg-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kg-span { grid-column: 1 / -1; }
.kg-pop-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.kg-pop-foot .btn { min-height: 34px; }
.kg-dirty { flex: 1; margin: 0; color: #b45309; font-size: 12px; font-weight: 500; }
.kg-label { display: block; margin: var(--space-3) 0 6px; font-size: 12px; font-weight: 600; color: var(--muted-fg); }
.kg-label:first-child { margin-top: 0; }
.kg-label span { margin-left: 6px; font-weight: 500; }
.kg-muted { margin: 0; color: var(--muted-fg); font-size: 13px; }
.kg-checks { display: grid; gap: 2px; }
.kg-checks label { display: flex; align-items: center; gap: var(--space-2); padding: 4px 6px; border-radius: 8px; font-size: 13px; }
.kg-checks label .kg-count { margin-left: auto; background: var(--hover); color: var(--muted-fg); }
.kg-checks label.is-empty { color: var(--muted-fg); cursor: not-allowed; }
.kg-checks label.is-empty:hover { background: none; }
[data-facet][aria-busy="true"] { opacity: 0.6; } /* the Drugs menu's boxes while they re-count for a new pick */
.kg-checks.is-wrap { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); column-gap: var(--space-2); }
.kg-span .kg-checks.is-wrap { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kg-checks.is-wrap label { padding-block: 2px; }
.kg-list { display: grid; margin-top: 6px; }
.kg-tabs button[aria-pressed="true"], .kg-explored .kg-seg:has([aria-pressed="true"]) {
  border-color: transparent;
  background: var(--brand);
  color: #fff;
}
.kg-hist { display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.kg-hist i { flex: 1; border-radius: 2px 2px 0 0; background: color-mix(in oklab, var(--kg-edge) 55%, white); }
.kg-dual { position: relative; height: 28px; }
.kg-dual input[type="range"] { position: absolute; inset: 6px 0 auto; width: 100%; margin: 0; pointer-events: none; appearance: none; background: transparent; }
.kg-dual input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--border); }
/* The inputs are stacked: only the first draws the line, or the max input's track covers the min dot. */
.kg-dual input[type="range"] + input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.kg-dual input[type="range"] + input[type="range"]::-moz-range-track { background: transparent; }
.kg-dual input[type="range"]::-webkit-slider-thumb {
  margin-top: -6px;
  pointer-events: auto;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.kg-dual input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: var(--brand); }
.kg-ends { display: flex; justify-content: space-between; margin: 0; color: var(--muted-fg); font-size: 12px; }
.kg-ends b { color: var(--foreground); }

/* canvas */
.kg-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  /* A fixed row: the inspector scrolls inside it, so its content can never stretch the canvas. */
  grid-template-rows: minmax(0, 1fr);
  gap: var(--space-3);
  height: max(640px, calc(100dvh - 220px));
}
.kg-stage { position: relative; min-height: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); overflow: hidden; }
.kg-sigma {
  position: absolute;
  inset: 0;
  background-color: #fbfcfe;
  background-image: radial-gradient(circle, #dfe5ee 1px, transparent 1px);
  background-size: 18px 18px;
  isolation: isolate; /* keeps the node canvas above this background when .is-spotlit drops it under the lines */
}
.kg-sigma.is-spotlit .sigma-nodes { z-index: -1; }
.kg-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  background: color-mix(in oklab, var(--surface-raised) 88%, transparent);
  color: var(--muted-fg);
  font-size: 14px;
}
.kg-skel { display: block; width: 180px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--border), #fff, var(--border)); background-size: 200% 100%; animation: kg-shimmer 1.2s linear infinite; }
@keyframes kg-shimmer { to { background-position: -200% 0; } }
.kg-top {
  position: absolute;
  z-index: 2;
  top: var(--space-3);
  left: var(--space-2);
  right: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}
.kg-top > * { pointer-events: auto; }
.kg-banner {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: 6px var(--space-3);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}
.kg-banner button { border: 0; background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.kg-banner.is-dark { background: #1e293b; color: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2); }
.kg-banner.is-dark button { color: #fff; font-size: 16px; line-height: 1; }
.kg-zoom, .kg-hint { position: absolute; z-index: 2; }
.kg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-2); /* tight enough for the explored filter to share its row */
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted-fg);
  font-size: 12px;
}
/* Legend, then the explored filter on the same row; it wraps under the legend only when the canvas is narrow. */
.kg-top-left { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; max-width: 100%; }
.kg-legend span { display: inline-flex; align-items: center; gap: 5px; }
.kg-legend b { color: var(--foreground); font-weight: 600; }
.kg-legend-note { padding-left: var(--space-2); border-left: 1px solid var(--border); }
.kg-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--swatch, #64748b); }
.kg-zoom { bottom: var(--space-4); left: var(--space-3); display: grid; gap: 4px; }
.kg-zoom button { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }
.kg-hint {
  left: 64px;
  right: var(--space-3);
  bottom: 14px;
  margin: 0;
  overflow: hidden;
  color: var(--muted-fg);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kg-hint b { color: var(--foreground); }
/* Most explored / less explored: a canvas-only filter over the genes drawn. */
.kg-explored, .kg-settling {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0;
  padding: 3px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}
.kg-explored[hidden], .kg-settling[hidden] { display: none; }
.kg-explored .kg-seg { display: inline-flex; align-items: center; height: 28px; padding: 0 6px; border-radius: 8px; font-size: 12px; }
.kg-seg [data-explored] { height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.kg-seg .info-btn { margin-left: 3px; color: inherit; }
.kg-explored b { margin-left: 3px; font-weight: 600; }
.kg-settling { padding: 4px 10px; color: var(--muted-fg); font-size: 12px; }

/* hover card */
.kg-hover {
  position: absolute;
  z-index: 3;
  width: 320px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  pointer-events: none;
}
.kg-hover h3 { margin: 6px 0 0; font-size: 16px; line-height: 1.3; }
.kg-hover-summary { margin: 4px 0 0; color: var(--muted-fg); font-size: 13px; line-height: 1.4; }
.kg-hover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); margin: 10px 0 0; }
.kg-hover-grid div { min-width: 0; }
.kg-hover-grid dt { color: var(--muted-fg); font-size: 11px; }
.kg-hover-grid dd { margin: 1px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.kg-hover-grid .is-good dd { color: var(--brand-strong); }
.kg-hover-grid .is-warn dd { color: #b45309; }
.kg-hover-links { display: grid; gap: 2px; margin: 10px 0 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--border); list-style: none; color: var(--muted-fg); font-size: 12px; }
.kg-hover-links b { margin-right: 4px; color: var(--foreground); font-weight: 600; }
.kg-hover-foot { margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--border); color: var(--muted-fg); font-size: 12px; }
.kg-hover-foot b { color: var(--foreground); }
.kg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px 8px;
  border-radius: 20px;
  background: color-mix(in oklab, var(--badge) 12%, white);
  color: var(--badge);
  font-size: 11px;
  font-weight: 600;
}
.kg-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--badge); }
.kg-note { margin: var(--space-2) 0 0; padding: var(--space-2) 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; }
.kg-note.is-good { background: #ecfdf5; color: #047857; }
.kg-note.is-warn { background: #fffbeb; color: #92400e; }
.kg-note.is-shared { background: #f0fdfa; color: #0f766e; font-weight: 600; }
.kg-formula { background: var(--hover); color: var(--foreground); font-weight: 600; }

/* inspector panel */
.kg-panel {
  min-height: 0;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: auto;
}
.kg-panel h2 { margin: 6px 0 0; font-size: 18px; line-height: 1.3; }
.kg-panel h3 { margin: var(--space-4) 0 var(--space-2); font-size: 13px; font-weight: 600; }
.kg-panel h3 small { color: var(--muted-fg); font-weight: 500; }
.kg-panel p { font-size: 13px; }
.kg-panel-empty h2 { margin: 0; font-size: 16px; }
.kg-panel-empty p { margin: var(--space-1) 0 0; color: var(--muted-fg); }
.kg-panel-empty .kg-label { margin-top: var(--space-4); }
.kg-panel-empty input { width: 100%; }
.kg-panel-empty h3 b { margin-left: 4px; color: var(--muted-fg); font-weight: 500; }
.kg-index { margin: 0; padding: 0; list-style: none; }
.kg-index li { display: flex; justify-content: space-between; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.kg-index li span { flex: none; color: var(--muted-fg); font-size: 12px; font-variant-numeric: tabular-nums; }
.kg-index .kg-link { min-width: 0; overflow-wrap: anywhere; }
/* Genes: name, association bar, score, the same three columns as Strongest links. */
.kg-index.is-scored li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 36px; align-items: center; }
.kg-index.is-scored b { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.kg-status:empty { display: none; }
.kg-panel-name { margin: 2px 0 0; color: var(--muted-fg); }
.kg-ids { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0 0; }
.kg-id { padding: 2px 8px; border-radius: 6px; background: var(--hover); color: var(--muted-fg); font-family: ui-monospace, monospace; font-size: 11px; }
.kg-aliases { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.kg-prose { margin: var(--space-3) 0 0; color: var(--foreground); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.kg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.kg-tabs button { height: 30px; padding: 0 10px; font-size: 12px; }
.kg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-3) 0 0; }
.kg-stats div { padding: var(--space-2) 10px; border: 1px solid var(--border); border-radius: 10px; }
.kg-stats dt { color: var(--muted-fg); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.kg-stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.kg-score { margin: var(--space-2) 0; font-size: 28px; font-weight: 700; }
.kg-score small { display: block; color: var(--muted-fg); font-size: 12px; font-weight: 500; }
.kg-strong, .kg-rows { margin: 0; padding: 0; list-style: none; }
.kg-strong li, .kg-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: var(--space-2); align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.kg-strong small { display: block; color: var(--muted-fg); font-size: 11px; }
.kg-rows li { grid-template-columns: minmax(0, 1fr) auto; }
.kg-rows span { color: var(--muted-fg); font-size: 12px; }
/* Papers: the title gets the full width, journal and year sit under it. */
.kg-rows.is-stacked li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--space-2) 0; }
.kg-panel a:not(.btn), .kg-link { padding: 0; border: 0; background: none; color: var(--foreground); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.kg-panel a:not(.btn):hover, .kg-link:hover { color: var(--brand); }
.kg-bar { display: block; height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.kg-bar i { display: block; height: 100%; border-radius: inherit; background: var(--kg-edge); }
.kg-mini-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.kg-mini { width: 100%; border-collapse: collapse; font-size: 12px; }
.kg-mini th { padding: 6px var(--space-2); background: #f8fafc; color: var(--muted-fg); font-size: 11px; font-weight: 600; text-align: left; }
.kg-mini td { padding: 6px var(--space-2); border-top: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.kg-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.kg-actions .btn { min-height: 34px; }

/* drugs, trials and literature under the canvas: the explorer's own tables */
.kg-strip .panel-head { align-items: center; }
.kg-strip .panel-lede { font-size: 13px; line-height: 1.25rem; }
.kg-total { color: var(--foreground); font-weight: 600; }
.kg-pager { display: flex; gap: 4px; align-items: center; color: var(--muted-fg); font-size: 12px; font-variant-numeric: tabular-nums; }
.kg-pager span { margin-right: var(--space-2); }
.kg-pager .icon-btn { width: 32px; height: 32px; border: 1px solid var(--border); font-size: 16px; }
.kg-table-wrap { max-height: 32rem; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.kg-table-wrap > .skeleton-table, .kg-table-wrap > .panel-state { margin: var(--space-4) var(--space-6); }

@media (max-width: 1100px) {
  .kg-body { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .kg-stage { height: 70dvh; min-height: 440px; }
  .kg-panel { max-height: none; }
}
@media (max-width: 800px) {
  .kg-grid.is-2, .kg-grid.is-3 { grid-template-columns: 1fr; }
  .kg-hint { display: none; }
  .kg-stage { min-height: 440px; }
  .kg-explored { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; }
  .kg-explored .kg-seg { flex: none; }
  .kg-strip .panel-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .kg-skel { animation: none; }
}

/* --- paper table: a few mentions per row, the abstract and the rest in the expanded row ------------------------- */
.paper-table-wrap { overflow-x: auto; }
.paper-table td { vertical-align: top; }
.paper-table .paper-title { display: block; margin-bottom: var(--space-1); }
.paper-table .paper-meta { margin-bottom: var(--space-1); }
.paper-toggle-col { width: 3rem; padding-right: 0; }
.paper-toggle { width: 32px; height: 32px; }
.paper-toggle .icon { transition: transform 160ms ease-out; }
.paper-toggle[aria-expanded="true"] .icon { transform: rotate(90deg); }
.paper-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.paper-row:has(+ .paper-more:not([hidden])) td { border-bottom: 0; }
.paper-more > td { background: var(--surface-raised); }
.paper-more-count { align-self: center; font-size: var(--text-xs); color: var(--muted-fg); }
.paper-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); }
.paper-detail-head { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--muted-fg); }
.paper-detail-side .paper-detail-head:not(:first-child) { margin-top: var(--space-3); }
.paper-abstract { margin: 0; max-width: 80ch; font-size: var(--text-sm); line-height: 1.6rem; }
@media (max-width: 800px) {
  .paper-detail { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .paper-toggle .icon { transition: none; }
}

/* --- molecular tabs: variants, biomarkers and reactions on gene, drug and disease pages ----------------------------- */
/* Equations are long chemistry strings; let them wrap in the cell, never widen the table. */
.equation-cell { min-width: 16rem; max-width: 48rem; overflow-wrap: anywhere; font-size: var(--text-xs); line-height: 1.25rem; }
.biomarker-genes { gap: var(--space-1); min-width: 10rem; }
.biomarker-genes .chip { gap: var(--space-1); }
.biomarker-state { color: var(--muted-fg); font-weight: 400; }

/* === search: top-bar box, typeahead panel, /search/ page ================== */

.topbar-search { position: relative; flex: 1; min-width: 0; max-width: 36rem; margin: 0 auto 0 0; }
.topbar-search > .icon { position: absolute; top: 50%; left: var(--space-3); transform: translateY(-50%); color: var(--muted-fg); pointer-events: none; }
.topbar-search input {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--space-8) 0 calc(var(--space-3) + 1.125rem + var(--space-2));
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.topbar-search input::placeholder { color: var(--muted-fg); }
.topbar-search input:hover { border-color: var(--input-border); }
.topbar-search input:focus { border-color: var(--brand); background: var(--surface-raised); }
.topbar-search input::-webkit-search-cancel-button { cursor: pointer; }
.topbar-search kbd {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--muted-fg);
  font: 500 var(--text-xs) / 1.25rem var(--font-mono);
  pointer-events: none;
}
.topbar-search input:focus ~ kbd,
.topbar-search input:not(:placeholder-shown) ~ kbd { display: none; }

.topbar-search-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 25;
  width: max(100%, 26rem);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.topbar-search-panel > .skeleton-table { padding: var(--space-3); }
.topbar-search-panel .search-group + .search-group { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }

.search-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--muted-fg);
  font-size: var(--text-xs);
  font-weight: 600;
}
.search-count { font-weight: 500; font-variant-numeric: tabular-nums; }
.search-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  color: var(--foreground);
  text-decoration: none;
}
.search-option:hover,
.search-option[aria-selected="true"] { background: var(--hover); }
.search-option[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--brand); }
.search-option:active { background: var(--border); }
.search-option .chip.is-mention-literature { border-color: transparent; background: var(--hover); color: var(--muted-fg); font-weight: 600; }
.search-option .chip { flex: none; justify-content: center; min-width: 4.75rem; padding: 2px 8px; font-size: 11px; }
.search-text { display: grid; min-width: 0; }
.search-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: 500; }
.search-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-fg); font-size: var(--text-xs); }
.search-more { min-height: 2.25rem; color: var(--brand); font-size: var(--text-sm); font-weight: 600; }
.search-state { display: grid; justify-items: start; gap: var(--space-3); margin: 0; padding: var(--space-3); color: var(--muted-fg); font-size: var(--text-sm); }
.search-state p { margin: 0; }
.search-state.is-error { color: var(--destructive); }

/* Columns, not a grid: groups differ in height and a grid row would leave holes under the short ones. */
.search-results { columns: 2; column-gap: var(--space-4); }
.search-results .search-group { break-inside: avoid; margin-bottom: var(--space-4); padding: var(--space-3); border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); }
.search-results .search-group-head { padding-bottom: var(--space-2); color: var(--foreground); font-size: var(--text-base); }
.search-results > .search-state { column-span: all; }
.app kbd { font-family: var(--font-mono); font-size: var(--text-xs); }

@media (max-width: 63.99rem) {
  .search-results { columns: 1; }
}
@media (max-width: 640px) {
  /* The box needs the room more than the logo does; the menu's rail still links home. */
  .app-topbar:has(.topbar-search) .app-brand { display: none; }
  .topbar-search kbd { display: none; }
  .topbar-search input { padding-right: var(--space-3); }
  /* Full width under the bar: a phone has no room for a 26rem dropdown hanging off the box. */
  .topbar-search-panel { position: fixed; top: 3.75rem; left: var(--space-4); right: var(--space-4); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-search input { transition: none; }
}

/* --- "i" buttons: what a figure, column or chart means (explorer/info.py, app.js) ---------------------------------- */
.info-btn {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--muted-fg);
  font: 600 10px/1 Georgia, "Times New Roman", serif;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
  cursor: help;
  opacity: 0.8;
}
/* The glyph is drawn, not typed: a CSV built from a table's text never picks up a stray "i". */
.info-btn::before { content: "i"; }
.info-btn:hover, .info-btn:focus-visible, .info-btn[aria-describedby] { color: var(--brand); opacity: 1; }
.info-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.data-table thead .info-btn { color: inherit; }
.info-tip {
  position: fixed;
  z-index: 1000;
  max-width: min(320px, calc(100vw - 16px));
  padding: var(--space-2) var(--space-3);
  border-radius: 8px;
  background: #1e293b;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.24);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  pointer-events: none;
}

/* === research chat (apps/chat, static/js/chat.js) ======================================================== */
/* v2's chat layout on Dricenta tokens. Desktop: the page is the app, full height, no footer; a white conversation
   rail and one white panel whose thread scrolls while the composer stays put. The answer is typography, not a
   card; the question is a soft teal pill on the right; the evidence strip sits under each answer. Below 1024px
   the page scrolls normally and the composer sticks to the bottom. */

.chat { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }

@media (min-width: 64rem) {
  html:has(body.is-chat), body.is-chat { height: 100%; overflow: hidden; }
  .is-chat .app-shell { height: 100dvh; }
  .is-chat .app-column { height: 100dvh; min-height: 0; }
  .is-chat .app-main { display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; max-width: none; padding: var(--space-4) var(--space-6); }
  .is-chat .app-crumbs { margin-bottom: var(--space-3); }
  .is-chat .chat { flex: 1; min-height: 0; align-items: stretch; }
  .is-chat .chat-rail, .is-chat .chat-main { min-height: 0; }
  .is-chat .chat-main { display: flex; flex-direction: column; overflow: hidden; }
  .is-chat .chat-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
}

/* --- conversation rail --- */
.chat-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
  overflow-y: auto;
}
.chat-new { justify-content: flex-start; gap: var(--space-2); width: 100%; }
.chat-rail-title { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--muted-fg); cursor: pointer; list-style: none; }
.chat-rail-title::-webkit-details-marker { display: none; }
.chat-rail-title .nav-count { margin-left: 0; }
.chat-history { display: grid; gap: 2px; margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.chat-history-row { position: relative; display: flex; align-items: center; border-radius: 8px; }
.chat-history-row:hover, .chat-history-row:focus-within { background: var(--hover); }
.chat-history-row.is-active { background: var(--brand); }
.chat-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  padding: 7px 4px 7px 10px;
  border-radius: 8px;
  color: var(--foreground);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none;
}
.chat-history-row.is-active .chat-history-item { color: var(--surface-raised); font-weight: 500; }
.chat-history-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-history-when { color: var(--muted-fg); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-history-row.is-active .chat-history-when { color: color-mix(in oklab, var(--surface-raised) 80%, transparent); }
.chat-history-delete {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted-fg);
  cursor: pointer;
  opacity: 0;
}
.chat-history-delete .icon { width: 0.9rem; height: 0.9rem; }
/* Hidden until the row is hovered or focused: forty delete icons read as forty ways to lose work. */
.chat-history-row:hover .chat-history-delete, .chat-history-delete:focus-visible { opacity: 1; }
.chat-history-row.is-active .chat-history-delete { color: var(--surface-raised); }
.chat-history-delete:hover { background: color-mix(in oklab, var(--destructive) 12%, transparent); color: var(--destructive); }
.chat-rail-empty { padding: var(--space-2); color: var(--muted-fg); font-size: var(--text-xs); }
@media (hover: none) { .chat-history-delete { opacity: 1; } }

/* --- main panel --- */
.chat-main {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
}
/* A slim bar: the thread below is the page, the header only says where you are (owner's call, smaller than h1 24px). */
.chat-head { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; padding: var(--space-2) var(--space-6); border-bottom: 1px solid var(--border); }
.chat-head .page-title { flex: none; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: 0; color: var(--brand); }
.chat-head-title { min-width: 0; margin: 0; overflow: hidden; color: var(--muted-fg); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread { display: flex; flex-direction: column; gap: var(--space-6); width: min(70rem, 100%); min-height: 100%; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-8); }

/* --- welcome --- */
.chat-welcome { display: grid; justify-items: start; gap: var(--space-3); margin: auto 0; padding: var(--space-8) 0; }
.chat-welcome-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--brand-soft); color: var(--brand-strong); }
.chat-welcome-mark .icon { width: 1.4rem; height: 1.4rem; }
.chat-welcome-title { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: 600; color: var(--foreground); }
.chat-welcome-lede { max-width: 38rem; margin: 0 0 var(--space-3); color: var(--muted-fg); font-size: 15px; line-height: 1.6; }
.chat-suggestions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-3); width: 100%; margin: 0; padding: 0; list-style: none; }
.chat-suggestion {
  display: grid;
  gap: 2px;
  width: 100%;
  height: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--foreground);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.chat-suggestion:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(13, 148, 136, 0.12); }
.chat-suggestion:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-suggestion-title { font-size: var(--text-sm); font-weight: 600; }
.chat-suggestion-sub { color: var(--muted-fg); font-size: 13px; line-height: 1.4; }

/* --- turns --- */
.chat-question { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.chat-question-text {
  max-width: min(40rem, 85%);
  margin: 0;
  padding: 10px 16px;
  border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent);
  border-radius: 18px 18px 4px 18px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.chat-question .app-badge[hidden] { display: none; }

/* minmax(0, 1fr): a wide answer table scrolls in its own box instead of widening the whole answer. */
.chat-answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.chat-answer-head { display: flex; align-items: center; gap: var(--space-2); }
.chat-answer-mark { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 8px; background: var(--brand); color: var(--surface-raised); }
.chat-answer-mark .icon { width: 1rem; height: 1rem; }
.chat-answer-title { margin: 0 auto 0 0; font-size: var(--text-sm); font-weight: 600; }
.chat-answer-meta { color: var(--muted-fg); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.chat-answer.is-pending .chat-answer-mark { animation: chat-pulse 1.2s ease-in-out infinite; }
.chat-note { margin: 0; padding: var(--space-2) var(--space-3); border-radius: 8px; background: var(--hover); color: var(--muted-fg); font-size: var(--text-sm); }
.chat-note.is-warning { background: color-mix(in oklab, var(--warning) 10%, transparent); color: var(--warning); }

/* Prose: the answer is the page. */
.chat-prose { color: color-mix(in oklab, var(--foreground) 88%, var(--surface-raised)); font-size: 15px; line-height: 1.72; overflow-wrap: anywhere; }
.chat-prose > :first-child { margin-top: 0; }
.chat-prose > :last-child { margin-bottom: 0; }
.chat-prose h3 {
  margin: var(--space-6) 0 var(--space-2);
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in oklab, var(--brand) 16%, var(--border));
  color: var(--brand-strong);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
}
.chat-prose > h3:first-child { margin-top: 0; }
.chat-prose h4 { margin: var(--space-4) 0 var(--space-1); color: var(--foreground); font-size: 15px; font-weight: 600; }
.chat-prose p { margin: 0 0 var(--space-3); }
.chat-prose strong { color: var(--foreground); font-weight: 600; }
.chat-prose ul, .chat-prose ol { margin: 0 0 var(--space-3); padding-left: 1.3rem; }
.chat-prose li { margin: 4px 0; }
.chat-prose li::marker { color: color-mix(in oklab, var(--brand) 60%, var(--muted-fg)); }
.chat-prose code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--hover); color: var(--foreground); font-family: var(--font-mono); font-size: 0.85em; }
.chat-prose .answer-table { max-height: none; margin: var(--space-2) 0 var(--space-4); }
.chat-prose .data-table { font-size: var(--text-sm); }
.chat-prose .data-table tbody td:first-child { color: var(--foreground); font-weight: 600; }
.cites { white-space: nowrap; }
.cite {
  display: inline-grid;
  place-items: center;
  min-width: 1.1rem;
  height: 1.1rem;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--brand-strong);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.3em;
}
a.cite:hover { background: var(--brand); color: var(--surface-raised); }
.cite.is-external { background: color-mix(in oklab, var(--warning) 14%, transparent); color: var(--warning); }
.cite:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
/* The card a citation number opens on hover or focus (chat.js), placed above the number, or below near the top. */
.cite-card {
  position: fixed;
  z-index: 60;
  width: min(22rem, calc(100vw - 24px));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  line-height: 1.5;
}
.cite-card[hidden] { display: none; }
.cite-card p { margin: 0; }
.cite-card-kind { margin-bottom: 2px; color: var(--muted-fg); font-size: 11px; font-weight: 600; }
.cite-card-title { display: block; margin-bottom: var(--space-1); color: var(--foreground); font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; }
a.cite-card-title:hover { color: var(--brand); text-decoration: underline; }
.cite-card .cite-card-meta { margin-bottom: var(--space-1); color: var(--muted-fg); font-size: 12px; }
.cite-card-snippet {
  display: -webkit-box;
  overflow: hidden;
  color: var(--foreground);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* enough to judge the source, short enough not to cover the paragraph it came from */
}

/* Live steps (v2's tool timeline): one muted line each, the running one marked. */
.chat-steps { display: grid; gap: 2px; margin: var(--space-3) 0 0; padding: 0; list-style: none; color: var(--muted-fg); font-size: 13px; }
.chat-steps li { min-width: 0; padding: 3px 10px; border-left: 2px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-steps.is-live { margin: 0; }
.chat-steps.is-live:empty { display: none; }
.chat-steps.is-live li:last-child { border-left-color: var(--brand); color: var(--foreground); }
.chat-steps.is-live li:last-child::after { content: "…"; }

/* Evidence strip */
.chat-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chat-chips .chip { text-decoration: none; }
.chat-chips .chip:hover { filter: brightness(0.96); }
.chat-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--space-4); }
.chat-chart .chart { height: 17rem; }
.chat-chart .skeleton-chart { height: calc(17rem + 2.25rem); }
/* Timelines and the answer's own figures carry long labels: they take the full row. */
.chat-chart.is-wide { grid-column: 1 / -1; }
.chat-chart.is-wide .chart { height: 22rem; }
.chat-chart.is-wide .skeleton-chart { height: calc(22rem + 2.25rem); }
.chat-chart-kicker { margin: 0; font-size: var(--text-xs); line-height: 1rem; font-weight: 500; color: var(--muted-fg); }
.chat-table .table-scroll { max-height: 22rem; }
/* Short cells stay on one line and the table scrolls sideways; the second column (a title or name) wraps. */
.chat-table .data-table td { white-space: nowrap; }
.chat-table .data-table td:nth-child(2) { min-width: 18rem; white-space: normal; }

/* References (v2's refs card) */
.chat-refs { border: 1px solid var(--border); border-radius: 12px; background: color-mix(in oklab, var(--background) 55%, var(--surface-raised)); }
.chat-refs > summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); color: var(--muted-fg); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.chat-refs > summary::-webkit-details-marker { display: none; }
.chat-refs > summary::before { content: "▸"; font-size: 0.7rem; transition: transform 150ms ease; }
.chat-refs[open] > summary::before { transform: rotate(90deg); }
.chat-refs > summary:hover { color: var(--foreground); }
.chat-refs > summary .nav-count { margin-left: 0; }
.chat-refs > :not(summary) { margin-inline: var(--space-3); }
.chat-refs > :last-child { margin-bottom: var(--space-3); }
.chat-refs-list { display: grid; gap: 2px; margin-top: 0; padding: 0; list-style: none; }
.chat-ref { display: flex; gap: var(--space-2); padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.45; }
.chat-ref:target { background: color-mix(in oklab, var(--brand) 12%, transparent); }
.chat-ref-n { flex: none; min-width: 1.1rem; color: var(--brand-strong); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chat-ref a { color: var(--foreground); font-weight: 500; text-decoration: none; }
.chat-ref a:hover { color: var(--brand-strong); text-decoration: underline; }
.chat-ref-meta { display: block; color: var(--muted-fg); font-size: 12px; }
.chat-refs-more { color: var(--muted-fg); font-size: var(--text-xs); }
.chat-refs-more a { color: var(--brand-strong); }

.chat-answer-foot { display: flex; gap: var(--space-2); opacity: 0; transition: opacity 150ms ease; }
.chat-answer:hover .chat-answer-foot, .chat-answer:focus-within .chat-answer-foot { opacity: 1; }
@media (hover: none) { .chat-answer-foot { opacity: 1; } }
.chat-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted-fg);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chat-action .icon { width: 0.85rem; height: 0.85rem; }
.chat-action:hover { border-color: var(--brand); color: var(--brand-strong); }

/* --- dock: status, composer, hint --- */
.chat-dock { display: grid; gap: var(--space-2); width: min(70rem, 100% - 2 * var(--space-6)); margin: 0 auto; padding: var(--space-2) 0 var(--space-4); }
.chat-status { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0 4px; color: var(--muted-fg); font-size: 13px; }
.chat-status[hidden] { display: none; }
.chat-status::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand); animation: chat-pulse 1.1s ease-in-out infinite; }
@keyframes chat-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
.chat-composer {
  display: grid;
  gap: var(--space-1);
  padding: 10px 12px 8px;
  border: 1px solid var(--input-border);
  border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.chat-composer:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 14%, transparent); }
.chat-composer [hidden] { display: none; }
.chat-input {
  width: 100%;
  max-height: 12rem;
  padding: 4px 6px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 15px;
  line-height: 1.55;
  overflow-y: auto;
}
.chat-input::placeholder { color: var(--placeholder); }
.chat-input:disabled { cursor: not-allowed; }
.chat-input[aria-invalid="true"] { color: var(--destructive); }
.chat-error { margin: 0 6px; color: var(--destructive); font-size: var(--text-xs); font-weight: 600; }
.chat-composer-bar { display: flex; align-items: center; gap: var(--space-2); }
.chat-modes { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 auto 0 0; padding: 0; border: 0; }
.chat-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--muted-fg);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.chat-mode .icon { width: 0.85rem; height: 0.85rem; }
.chat-mode:hover { border-color: var(--brand); color: var(--brand-strong); }
.chat-mode:has(input:checked) { border-color: var(--brand); background: var(--brand); color: var(--surface-raised); box-shadow: 0 2px 6px rgba(47, 105, 155, 0.25); }
.chat-mode:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.chat-modes:disabled .chat-mode { opacity: 0.5; cursor: not-allowed; }
.chat-send, .chat-stop {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease;
}
.chat-send { background: var(--brand); color: var(--surface-raised); }
.chat-send:hover:not(:disabled) { background: var(--brand-strong); transform: translateY(-1px); }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-stop { background: var(--foreground); color: var(--surface-raised); }
.chat-send .icon, .chat-stop .icon { width: 1.05rem; height: 1.05rem; }
.chat-hint { margin: 0; color: var(--muted-fg); font-size: 11.5px; line-height: 1.4; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .chat-status::before, .chat-answer.is-pending .chat-answer-mark { animation: none; }
  .chat-suggestion, .chat-send, .chat-mode, .chat-composer, .chat-answer-foot { transition: none; }
}

@media (max-width: 63.99rem) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat-rail { flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding: var(--space-2); }
  .chat-new { width: auto; }
  .chat-history-box { flex: 1 1 12rem; min-width: 0; }
  .chat-history { max-height: 14rem; overflow-y: auto; }
  .chat-main { overflow: visible; }
  .chat-dock { position: sticky; bottom: 0; z-index: 2; width: auto; margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); border-top: 1px solid var(--border); border-radius: 0 0 14px 14px; background: var(--surface-raised); }
}
@media (max-width: 40rem) {
  .chat-head { padding: var(--space-2) var(--space-4); }
  .chat-head-title { display: none; }
  .chat-thread { padding: var(--space-4); }
  .chat-question-text { max-width: 92%; }
  .chat-mode { padding: 5px 10px; }
  .chat-hint { display: none; } /* still read out: the textarea's aria-describedby points at it */
}

/* === pathways (explorer/pathways): card explorer, detail with navigator, diagram ============================ */

.pw-layout { display: grid; gap: var(--space-4); }
.pw-main, .pw-rail, .pw-nav, .pw-center, .pw-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
@media (min-width: 80rem) {
  .pw-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}
/* Filters fill the row: the search takes the most room, the selects share the rest, the button sits at the end.
   The group chips line up with the fields above them. */
.pw-filter-form .filter-field { flex: 1 1 10rem; max-width: none; }
.pw-filter-form .filter-field.is-wide { flex: 3 1 18rem; max-width: none; }
/* The explorer's four filters and its button share one row; under 48rem the search takes a row of its own. */
.pw-filter-form.is-explorer { display: grid; grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(7.5rem, 1fr)) auto; }
.pw-filter-form.is-explorer .filter-field { min-width: 0; }
@media (max-width: 48rem) {
  .pw-filter-form.is-explorer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-filter-form.is-explorer .filter-field.is-wide { grid-column: 1 / -1; }
}
/* One line of chips that scrolls sideways when it runs out of room, as in the reference explorer. */
.pw-groups {
  position: static;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: none;
  scrollbar-width: thin;
}
.pw-count { margin: 0; font-size: var(--text-sm); color: var(--muted-fg); }

.pw-tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--tile-cyan-bg); color: var(--tile-cyan-fg); }
.pw-tile.is-signaling { background: var(--tile-blue-bg); color: var(--tile-blue-fg); }
.pw-tile.is-metabolism { background: var(--tile-green-bg); color: var(--tile-green-fg); }
.pw-tile.is-immune { background: var(--tile-red-bg); color: var(--tile-red-fg); }
.pw-tile.is-disease { background: var(--tile-amber-bg); color: var(--tile-amber-fg); }
.pw-tile.is-cell { background: var(--tile-violet-bg); color: var(--tile-violet-fg); }

.pw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pw-card:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08); }
.pw-card:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.pw-card-top { display: flex; align-items: flex-start; gap: var(--space-3); }
.pw-card-title { margin: 0 0 var(--space-1); font-size: 15px; font-weight: 600; line-height: 1.35; }
.pw-card-title a { color: var(--foreground); text-decoration: none; }
.pw-card-title a:focus-visible { outline: none; }
.pw-card-title a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; } /* the whole card opens it */
.pw-card-lead {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted-fg);
  font-size: var(--text-sm);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.pw-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; padding: 0; list-style: none; font-size: 13px; }
.pw-card-meta li { display: inline-flex; align-items: center; gap: 6px; }
.pw-card-meta .icon { width: 16px; height: 16px; color: var(--muted-fg); }
.pw-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--muted-fg); font-size: 12px; }

.pw-rank { display: grid; margin: 0; padding: 0 var(--space-6) var(--space-2); list-style: none; counter-reset: rank; }
.pw-rank li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 2px var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--border); counter-increment: rank; }
.pw-rank li::before { content: counter(rank); grid-row: span 2; color: var(--muted-fg); font-size: 12px; font-weight: 600; }
.pw-rank a { color: var(--brand); font-size: 13px; font-weight: 600; text-decoration: none; }
.pw-rank a:hover { text-decoration: underline; }
.pw-rank li > span { grid-column: 2; color: var(--muted-fg); font-size: 12px; }
.pw-rank-more { display: inline-block; padding: var(--space-2) var(--space-6) var(--space-4); color: var(--brand); font-size: 13px; font-weight: 600; text-decoration: none; }
.pw-rank-more:hover { text-decoration: underline; }
.panel-body .pw-rank-more { padding: var(--space-3) 0 0; }

.pw-head { display: flex; align-items: flex-start; justify-content: flex-start; gap: var(--space-3); }
.pw-head .pw-tile { margin-top: 2px; }
.pw-head .page-lede .tag { margin-right: var(--space-1); }
.pw-detail { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.pw-center { order: -1; } /* one column: the diagram first, the navigator under it */
@media (min-width: 64rem) {
  .pw-detail { grid-template-columns: 16rem minmax(0, 1fr); }
  .pw-center { order: 0; }
  .pw-side { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 90rem) {
  .pw-detail { grid-template-columns: 16rem minmax(0, 1fr) 19rem; }
  .pw-side { grid-column: auto; grid-template-columns: none; }
}

.pw-tree { margin: 0; padding: 0 var(--space-4) var(--space-3); list-style: none; font-size: 13px; }
.pw-tree li { padding: 5px var(--space-2); border-radius: 6px; }
.pw-tree li > span { color: var(--muted-fg); font-size: 12px; }
.pw-tree a { color: var(--foreground); text-decoration: none; }
.pw-tree a:hover { color: var(--brand); text-decoration: underline; }
.pw-tree .is-current { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
.pw-tree .is-depth-1 { padding-left: calc(var(--space-2) + 10px); }
.pw-tree .is-depth-2 { padding-left: calc(var(--space-2) + 20px); }
.pw-tree .is-depth-3 { padding-left: calc(var(--space-2) + 30px); }
.pw-tree .is-depth-4 { padding-left: calc(var(--space-2) + 40px); }
.pw-tree [class*="is-depth-"]:not(.is-depth-1, .is-depth-2, .is-depth-3, .is-depth-4) { padding-left: calc(var(--space-2) + 50px); }

.pw-diagram .chart { height: 34rem; }
.pw-diagram .skeleton-chart { height: calc(34rem + 2.25rem); }
.pw-side-lead { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.5; }
.pw-facts { display: grid; margin: 0; font-size: 13px; }
.pw-facts div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-top: 1px solid var(--border); }
.pw-facts dt { color: var(--muted-fg); }
.pw-facts dd { margin: 0; font-weight: 500; text-align: right; }

@media (max-width: 40rem) {
  .pw-diagram .chart { height: 26rem; }
  .pw-diagram .skeleton-chart { height: calc(26rem + 2.25rem); }
}
@media (prefers-reduced-motion: reduce) {
  .pw-card { transition: none; }
}

/* --- pathway layout: the curated diagram (pathways/partials/layout.html) ---------------------------------------- */
/* Fills and strokes are tokens, so the PNG (app.js copies the drawn styles) matches the page. */
.pw-map { display: grid; gap: var(--space-2); }
.pw-map-tools { display: flex; justify-content: flex-end; gap: var(--space-2); }
.pw-map-tools .icon-btn { width: 32px; height: 32px; border: 1px solid var(--border); }
.pw-map-fit { min-height: 32px; padding: 0 var(--space-3); }
.pw-map-view {
  height: 34rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  touch-action: none; /* a drag moves the diagram, not the page */
}
.pw-map-svg { display: block; width: 100%; height: 100%; cursor: grab; font-family: var(--font-sans); }
.pw-map-svg:active { cursor: grabbing; }
.lay-compartment { fill: color-mix(in oklab, var(--tile-amber-bg) 45%, var(--surface-raised)); stroke: color-mix(in oklab, var(--tile-amber-fg) 35%, transparent); stroke-width: 2; }
.lay-compartment-name { fill: var(--tile-amber-fg); font-size: 14px; font-weight: 600; }
.lay-region { fill: color-mix(in oklab, var(--brand) 8%, transparent); stroke: var(--brand); stroke-width: 2; stroke-dasharray: 8 6; }
.lay-reaction polyline, .lay-connector polyline { fill: none; stroke: var(--muted-fg); stroke-width: 1.2; }
.lay-reaction rect, .lay-reaction circle { fill: var(--surface-raised); stroke: var(--muted-fg); stroke-width: 1.2; }
.lay-reaction circle.is-filled, .lay-end { fill: var(--muted-fg); stroke: var(--muted-fg); stroke-width: 1.2; }
.lay-end.is-empty { fill: var(--surface-raised); }
.lay-connector.is-inhibitor polyline, .lay-connector.is-inhibitor .lay-end { stroke: var(--tile-red-fg); stroke-width: 2; }
.lay-node rect, .lay-node polygon, .lay-node ellipse { stroke-width: 1.2; }
.lay-node text { fill: var(--foreground); pointer-events: none; }
.lay-node.is-protein rect { fill: var(--tile-green-bg); stroke: color-mix(in oklab, var(--tile-green-fg) 55%, transparent); }
.lay-node.is-complex polygon { fill: var(--tile-blue-bg); stroke: color-mix(in oklab, var(--tile-blue-fg) 55%, transparent); }
.lay-node.is-set rect { fill: var(--tile-violet-bg); stroke: color-mix(in oklab, var(--tile-violet-fg) 55%, transparent); }
.lay-node.is-chemical ellipse { fill: var(--tile-amber-bg); stroke: color-mix(in oklab, var(--tile-amber-fg) 55%, transparent); }
.lay-node.is-pathway rect { fill: var(--surface-raised); stroke: var(--tile-cyan-fg); stroke-width: 2.5; }
.lay-node.is-module rect, .lay-node.is-module polygon, .lay-node.is-module ellipse { stroke: var(--brand); stroke-width: 3; }
.lay-node.is-module .lay-set-inner { stroke-width: 1.2; }
.lay-node.is-module text { font-weight: 600; }
.lay-node.is-drugged rect, .lay-node.is-drugged polygon, .lay-node.is-drugged ellipse { stroke: var(--tile-red-fg); stroke-dasharray: 6 3; }
a.lay-node { cursor: pointer; }
a.lay-node:hover rect, a.lay-node:hover polygon, a.lay-node:hover ellipse,
a.lay-node:focus-visible rect, a.lay-node:focus-visible polygon, a.lay-node:focus-visible ellipse { stroke-width: 5; }
a.lay-node:focus-visible { outline: none; }
.is-dim { opacity: 0.22; }
.pw-map-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--muted-fg); font-size: var(--text-xs); }
.pw-map-legend li { display: inline-flex; align-items: center; gap: 6px; }
.pw-key { width: 18px; height: 12px; border: 1.5px solid transparent; border-radius: 4px; }
.pw-key.is-module { border: 2.5px solid var(--brand); }
.pw-key.is-drugged { border: 2px dashed var(--tile-red-fg); }
.pw-key.is-protein { background: var(--tile-green-bg); border-color: var(--tile-green-fg); }
.pw-key.is-complex { background: var(--tile-blue-bg); border-color: var(--tile-blue-fg); border-radius: 1px; }
.pw-key.is-chemical { background: var(--tile-amber-bg); border-color: var(--tile-amber-fg); border-radius: 50%; }
.pw-key.is-pathway { background: var(--surface-raised); border: 2px solid var(--tile-cyan-fg); border-radius: 1px; }
.pw-key-line { width: 24px; height: 10px; }
.pw-key-line line { stroke: var(--muted-fg); stroke-width: 1.5; }
.pw-key-line polygon { fill: var(--muted-fg); }
.pw-key-line circle { fill: none; stroke: var(--muted-fg); stroke-width: 1.5; }
.pw-key-line.is-inhibitor line { stroke: var(--tile-red-fg); stroke-width: 2; }
@media (max-width: 767px) {
  .pw-map-view { height: 24rem; }
}

/* ---- KPI details modal (partials/kpi_modal.html, opened by {% kpi_open %} on any KPI card) ---- */
.kpi:has(.kpi-open) { transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.kpi:has(.kpi-open:hover) { border-color: var(--brand); box-shadow: var(--shadow-panel); transform: translateY(-2px); }
.kpi:has(.kpi-open:active) { transform: translateY(0); }
/* Covers the whole card; the "i" button sits above it so its tooltip still works. */
.kpi-open {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.kpi-open:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.kpi .info-btn { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .kpi:has(.kpi-open) { transition: none; }
  .kpi:has(.kpi-open:hover) { transform: none; }
}

html:has(.kpi-modal[open]) { overflow: hidden; }
.kpi-modal {
  width: min(1600px, calc(100vw - 2 * var(--space-6)));
  height: calc(100dvh - 2 * var(--space-6));
  max-width: none;
  max-height: none;
  padding: 0; /* clicks on the dialog itself are the backdrop (app.js); the padding lives on its children */
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24);
}
.kpi-modal[open] { display: flex; flex-direction: column; }
.kpi-modal::backdrop { background: rgba(15, 23, 42, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .kpi-modal[open] { animation: kpi-modal-in 180ms ease-out; }
}
@keyframes kpi-modal-in { from { opacity: 0; transform: translateY(8px); } }
.kpi-modal-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.kpi-modal-head .kpi-icon { flex: none; margin: 0; background: var(--brand-soft); color: var(--brand-strong); }
.kpi-modal-titles { flex: 1; min-width: 0; }
.kpi-modal-title { margin: 0; font-size: var(--text-xl); font-weight: 600; color: var(--brand); }
.kpi-modal-figure { margin: var(--space-1) 0 0; color: var(--muted-fg); font-size: var(--text-sm); }
.kpi-modal-figure strong { color: var(--foreground); font-size: var(--text-lg); font-weight: 700; }
.kpi-modal-about { max-width: 70ch; margin: var(--space-2) 0 0; color: var(--muted-fg); font-size: var(--text-sm); }
.kpi-modal-actions { display: flex; flex: none; align-items: center; gap: var(--space-2); }
/* max-content rows: a panel's body may shrink, so plain auto rows would squeeze the list instead of scrolling. */
.kpi-modal-body { display: grid; grid-auto-rows: max-content; gap: var(--space-4); min-height: 0; overflow-y: auto; padding: var(--space-6); }
.kpi-modal-body .panel { margin: 0; }
.kpi-modal [hidden] { display: none; } /* .dash-grid sets display: grid, which would show the empty chart row */
@media (max-width: 767px) {
  .kpi-modal { width: calc(100vw - 2 * var(--space-2)); height: calc(100dvh - 2 * var(--space-2)); }
  .kpi-modal-head { flex-wrap: wrap; padding: var(--space-4); }
  .kpi-modal-actions { width: 100%; justify-content: space-between; }
  .kpi-modal-body { padding: var(--space-4); }
}

/* Genes list: the knowledge graph's gene groups as links above the table, each with its count and an "i". */
.gene-standings {
  display: flex;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.gene-standing { display: inline-flex; align-items: center; gap: var(--space-1); }
.segmented a[aria-current="page"] .tab-count { background: color-mix(in oklab, var(--surface-raised) 25%, transparent); color: var(--surface-raised); }
.segmented a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 767px) {
  .gene-standings { flex-wrap: nowrap; overflow-x: auto; }
  .gene-standing { flex: none; }
}

/* Filter menus (templates/explorer/partials/filter_menu.html): a table's multi-select columns, one under each column
   head in the table's filter row. Each is a disclosure of checkboxes the wrapping form submits; open, its list floats
   over the table, fixed and placed by app.js so the table's scroll box does not clip it. */
.table-filters { display: contents; }
/* The whole head sticks, so the filter row stays under the column names. */
.data-table.has-filters thead { position: sticky; top: 0; z-index: 2; }
.data-table.has-filters thead th { position: static; }
.data-table .filter-row td {
  padding: 6px var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  vertical-align: middle;
}
.filter-search,
.filter-menu .filter-menu-search {
  width: 100%;
  min-width: 7rem;
  min-height: 2rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-xs);
}
.filter-search:focus-visible,
.filter-menu .filter-menu-search:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.filter-menu { position: relative; min-width: 6.5rem; }
.filter-menu > summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2rem;
  padding: 0 24px 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center;
  color: var(--muted-fg);
  font-size: var(--text-xs);
  font-weight: 400;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-menu > summary:hover,
.filter-menu[open] > summary { border-color: var(--brand); }
.filter-menu > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.filter-menu > summary.is-picked { border-color: var(--brand); color: var(--foreground); font-weight: 500; }
.filter-menu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-menu-count {
  flex: none;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--surface-raised);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.filter-menu > fieldset {
  position: fixed;
  z-index: 20;
  display: grid;
  gap: var(--space-1);
  width: min(20rem, calc(100vw - 2 * var(--space-4)));
  margin: 6px 0 0;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
/* A legend is drawn across its fieldset's top border; floated, it is an ordinary first row inside the card. */
.filter-menu-legend { float: left; width: 100%; padding: var(--space-1) 6px 0; color: var(--muted-fg); font-size: 12px; font-weight: 600; }
.filter-menu-find { padding: 0 6px; color: var(--muted-fg); font-size: 12px; font-weight: 500; }
.filter-menu-options { display: grid; gap: 2px; max-height: 18rem; overflow-y: auto; }
.filter-menu-options[aria-busy="true"] { opacity: 0.6; }
.filter-menu-options label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px;
  border-radius: 8px;
  color: var(--foreground);
  font-size: 13px;
  cursor: pointer;
}
.filter-menu-options label[hidden] { display: none; }
.filter-menu-options label:hover { background: var(--hover); }
.filter-menu-options label span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.filter-menu-options label b { flex: none; color: var(--muted-fg); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.filter-menu input[type="checkbox"] { flex: none; margin: 0; accent-color: var(--brand); }
.filter-menu-note { margin: 0; padding: 0 6px; color: var(--muted-fg); font-size: 12px; }
.filter-menu-note:empty { display: none; }
.filter-menu-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
/* Range filters (templates/explorer/partials/range_menu.html): two range inputs share one track; only their thumbs
   take the pointer, so either can be dragged. */
.range-slider { position: relative; height: 28px; margin: var(--space-1) 6px 0; }
.range-slider::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  transform: translateY(-50%);
}
.range-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none;
  accent-color: var(--brand);
}
.range-slider input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--surface-raised);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
  pointer-events: auto;
  cursor: pointer;
  appearance: none;
}
.range-slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--surface-raised);
  border-radius: 50%;
  background: var(--brand);
  pointer-events: auto;
  cursor: pointer;
}
.range-slider input[type="range"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.range-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: 0 6px; }
.range-fields label { display: block; margin-bottom: 2px; color: var(--muted-fg); font-size: 12px; font-weight: 500; }
.range-fields input { width: 100%; min-height: 2rem; padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); color: var(--foreground); font: inherit; font-size: var(--text-xs); }
.range-fields input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .filter-menu > fieldset { animation: filter-menu-in 120ms ease-out; }
}
@keyframes filter-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
}