/* Visual system: a cool, clinical neutral palette paired with the medical-teal
   lead colour (deliberately NOT the old warm-paper default), a deep teal-ink
   sidebar as the signature anchor, and a three-role type system that encodes the
   medicine↔AI bridge: Schibsted Grotesk (display/UI), Source Serif 4 (clinical
   reading), IBM Plex Mono (IDs, ICHD-3 codes, data). All fonts are self-hosted
   (static/fonts/, OFL) — nothing is fetched from a third-party CDN at runtime. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-600.979c93d531b9.woff2") format("woff2");
}
/* Static weights, kept explicit so the cascade picks the right file per weight. */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-display: swap; src: url("../fonts/schibsted-grotesk-400.5386d37a2778.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/schibsted-grotesk-500.28e9c39982c3.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 600; font-display: swap; src: url("../fonts/schibsted-grotesk-600.979c93d531b9.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-display: swap; src: url("../fonts/schibsted-grotesk-700.70a47f952873.woff2") format("woff2"); }

@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/source-serif-4-400.95bbd98f2b3c.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/source-serif-4-600.beb0c8d8bee8.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/source-serif-4-400-italic.fa10869cc45e.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.79936b18df9f.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.b1c8a895f5fd.woff2") format("woff2"); }

:root {
  /* Cool clinical neutrals */
  --surface: #f2f6f5;     /* app background (cool off-white) */
  --panel: #ffffff;       /* content surface + cards */
  --ink: #13211f;         /* primary text — cool near-black */
  --muted: #5d6b68;       /* secondary text */
  --line: #d7e0de;        /* hairline borders */
  --card-line: #e3eae8;   /* lighter hairline on tinted panels */
  --card-bg: #eef3f2;     /* tinted panel fill */

  /* Teal scale (lead colour kept) */
  --accent: #0f766e;
  --accent-dark: #0b5d56;
  --accent-soft: #e2efec;
  --teal-ink: #0a3b37;    /* deep anchor — sidebar */
  --teal-ink-2: #072e2b;  /* deeper, sidebar foot */

  /* Signals */
  --danger: #a23333;
  --ok: #1a7a3a;

  /* Soft banner (disclaimer / caution notices) — kept warm on purpose so a
     caution never reads as part of the cool chrome. */
  --banner-bg: #fbf4ea;
  --banner-line: #ecdcc2;

  /* Type roles */
  --font-display: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Shape */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(16, 40, 37, .07);

  /* Dark sidebar — local tokens (text/markers on the deep teal) */
  --side-ink: #d3e6e2;        /* nav text */
  --side-ink-strong: #ffffff; /* wordmark / active */
  --side-muted: #84aaa4;      /* footer + secondary */
  --side-hover: rgba(255, 255, 255, .08);
  --side-active: rgba(255, 255, 255, .13);
  --side-line: rgba(255, 255, 255, .13);
}

* { box-sizing: border-box; }

/* Reserve the scrollbar gutter permanently so the content-area width is the same
   on every page whether or not it scrolls. Without this, tall pages (with a
   vertical scrollbar) are 15px narrower than short ones, which shifts the centred
   content column and makes the layout look misaligned between subpages. */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--surface);
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-soft); }

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Quality floor — honour a user's reduced-motion preference (the only motion on
   the site is small hover transitions/transforms, but respect it regardless). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover { transform: none; }
}

/* App shell — persistent left sidebar + content column.
   Built with CSS grid only; works fully without JavaScript (P-4). The constant
   sidebar anchors every page identically, so the layout no longer "jumps"
   between subpages. */

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 50;
  padding: 0.4rem 0.7rem;
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 6px;
}

.app-shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.1rem 0.85rem;
  color: var(--side-ink);
  background: var(--teal-ink);
  background: linear-gradient(180deg, var(--teal-ink) 0%, var(--teal-ink-2) 100%);
  border-right: 1px solid var(--teal-ink-2);
}

.sidebar .wordmark {
  display: block;
  padding: 0.25rem 0.6rem 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--side-line);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--side-ink-strong);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.wordmark-sub {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--side-muted);
  letter-spacing: 0;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.side-nav a {
  display: block;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--side-ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}

.side-nav a:hover { background: var(--side-hover); color: var(--side-ink-strong); }

/* Active item: brighter, with a teal marker bar at the left edge. */
.side-nav a.is-active {
  position: relative;
  background: var(--side-active);
  color: var(--side-ink-strong);
  font-weight: 600;
}

.side-nav a.is-active::before {
  content: "";
  position: absolute;
  left: -0.1rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 3px;
  border-radius: 3px;
  background: #5fd0c4;
}

.sidebar-account {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--side-line);
}

.sidebar-signin {
  display: block;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--side-line);
  border-radius: var(--radius-sm);
  color: var(--side-ink-strong);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease;
}

.sidebar-signin:hover { background: var(--side-hover); border-color: var(--side-muted); }

/* The user menu sits inline in the sidebar; recolour it for the dark surface
   and give its items the same row affordance as the main nav. */
.sidebar .user-menu-name { color: var(--side-ink-strong); }

.sidebar .user-menu-items a,
.sidebar .user-menu-items .link-button {
  display: block;
  width: 100%;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--side-ink);
  text-align: left;
  text-decoration: none;
}

.sidebar .user-menu-items a:hover,
.sidebar .user-menu-items .link-button:hover {
  background: var(--side-hover);
  color: var(--side-ink-strong);
}

/* On the dark sidebar the teal focus ring would barely show — brighten it. */
.sidebar :focus-visible { outline-color: #5fd0c4; }

.content-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
}


/* Content surface — a single flat panel (no floating card). Every page's body
   lives in one centred content column of identical width, so the layout reads
   the same on every subpage regardless of how much each page fills. */

main {
  width: 100%;
  padding: 2.25rem 2.5rem 3.5rem;
}

/* The one content column: every page and every block inside it (lead, prose,
   notices, forms, tables) shares this width, so nothing jumps between pages. */
.page {
  max-width: 62.5rem;
  margin: 0 auto;
}

/* Narrow screens: the sidebar collapses to a top bar; nav wraps horizontally.
   Still no JavaScript required. */
@media (max-width: 52rem) {
  .app-shell { grid-template-columns: 1fr; }

  .sidebar {
    position: static;
    height: auto;
    gap: 0.5rem;
    border-right: none;
    border-bottom: 1px solid var(--teal-ink-2);
  }

  .side-nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; }

  .sidebar-account { margin-top: 0; padding-top: 0; border-top: none; }

  .sidebar-footer { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 0.9rem; }

  main { padding: 1.5rem 1.15rem 2.5rem; }

  .page { max-width: none; }

}

/* Standardized page scaffold — rendered once in base.html, filled via blocks.
   .page gives every page the same vertical rhythm; pages never set their own
   top-level spacing. */

.page > * + * { margin-top: 1.5rem; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; }
h2 { font-size: 1.2rem; letter-spacing: -0.01em; }

.page-header { margin: 0; }
.page-header h1 { margin: 0; }

.lead {
  margin: 0.5rem 0 0;
  font-family: var(--font-serif);
  color: #3a4a47;
  font-size: 1.12rem;
  line-height: 1.5;
}

/* Standard grouped section: heading + body, hairline between consecutive ones. */
.content-section { margin: 0; }
.content-section > h2:first-child,
.content-section > h3:first-child { margin-top: 0; }
.content-section + .content-section {
  border-top: 1px solid var(--card-line);
  padding-top: 1.25rem;
}

.placeholder-note { color: var(--muted); }

/* Signature — the ICHD-3 code treated as a typographic system element. The
   eyebrow is mono + teal because the classification code is real, structural
   information in this domain (not decorative numbering). */
.eyebrow {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Mono data: IDs, ICHD-3 codes, checksums, metric numerals. */
.code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.code--ichd {
  color: var(--accent-dark);
  font-weight: 500;
}

/* Home landing hero — the one deliberate page-header variant. */
.hero { padding: 0.5rem 0 0; }
.hero h1 { margin: 0 0 0.4rem; font-size: 2.35rem; letter-spacing: -0.025em; }
.hero .lead { font-size: 1.18rem; }

/* Entry cards */

.entry-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.card {
  display: block;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.card h2 { margin: 0 0 0.25rem; font-size: 1.05rem; color: var(--accent-dark); }
.card p { margin: 0; color: var(--muted); }

.secondary-links { color: var(--muted); }

/* Legal/secondary links — live at the bottom of the sidebar. */

.sidebar-footer {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--side-line);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.82rem;
}

.sidebar-footer a {
  padding: 0.15rem 0.65rem;
  color: var(--side-muted);
  text-decoration: none;
}

.sidebar-footer a:hover { color: var(--side-ink-strong); text-decoration: underline; }

/* Buttons */

button,
.button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* .button is used as a secondary/link-style action throughout */
.button {
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

.button:hover { background: var(--card-bg); border-color: var(--muted); }

button.danger { background: var(--danger); border-color: var(--danger); }
button.danger:hover { background: #7d2828; border-color: #7d2828; }

button.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-weight: 400;
  text-decoration: underline;
}
button.link-button:hover { background: none; color: var(--accent-dark); }

/* Forms (stacked, no-JS) */

.stacked-form { max-width: 28rem; }

.stacked-form div { margin-bottom: 0.9rem; }

.stacked-form label { display: block; font-weight: 600; margin-bottom: 0.2rem; }

.stacked-form input,
.stacked-form select,
.stacked-form textarea {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f7faf9;
  font: inherit;
}

.stacked-form input:focus,
.stacked-form select:focus,
.stacked-form textarea:focus,
.filter-bar input:focus,
.filter-bar select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Checkboxes and radios must NOT stretch full width or sit on their own line —
   the box belongs beside its label. (as_div emits label → helptext → input and
   the rules above make every input width:100% + every label block, which pushes
   the box below the text.) :has() lets us special-case those rows; browsers
   without :has() just fall back to the still-usable stacked layout (P-4). */
.stacked-form input[type="checkbox"],
.stacked-form input[type="radio"] {
  width: auto;
  margin: 0;
}

/* Single checkbox field: box at the left, bold label + helptext to its right.
   Source order is label, helptext, input — so place each cell explicitly. */
.stacked-form div:has(> input[type="checkbox"]) {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.55rem;
  align-items: start;
}
.stacked-form div:has(> input[type="checkbox"]) > input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0.2rem;
}
.stacked-form div:has(> input[type="checkbox"]) > label {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}
.stacked-form div:has(> input[type="checkbox"]) > .helptext {
  grid-column: 2;
  grid-row: 2;
}

/* RadioSelect / CheckboxSelectMultiple option rows: box then label, inline. */
.stacked-form div:has(> input[type="radio"]) {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
}
.stacked-form div:has(> input[type="radio"]) > label {
  margin-bottom: 0;
}

/* Grouped form sections (fieldset + legend), hairline-separated. */
.form-section {
  margin: 0 0 1.4rem;
  padding: 1rem 0 0;
  border: none;
  border-top: 1px solid var(--line);
}

.form-section legend {
  padding: 0 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
}

.form-section > .form-note { margin: 0.2rem 0 0.9rem; }

/* Radio options with a definition each: one bordered card per option. */
.stacked-form .choice-cards { display: grid; gap: 0.45rem; }
.stacked-form label.choice-card {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.65rem;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 400;
  cursor: pointer;
}
.stacked-form label.choice-card > input[type="radio"] { align-self: start; padding: 0; margin-top: 0.3rem; }
.stacked-form label.choice-card:hover { border-color: var(--muted); }
.stacked-form label.choice-card:has(> input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice-card .choice-desc { display: block; color: var(--muted); font-size: 0.88rem; line-height: 1.4; }

.stacked-form .helptext,
.form-note { color: var(--muted); font-size: 0.9rem; }

/* Standard actions row for every form: primary <button> + secondary links. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.1rem;
}

.form-actions a { font-size: 0.95rem; }

.stacked-form ul.errorlist {
  margin: 0.2rem 0;
  padding-left: 1.1rem;
  color: #8c1d1d;
  font-size: 0.9rem;
}

/* Messages, notices */

.messages { list-style: none; margin: 0 0 1rem; padding: 0; }

.message {
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.5rem;
  border: 1px solid #cfe0cf;
  border-radius: 6px;
  background: #eef4ea;
}

/* Notices — one component, three intents. .notice = info (default),
   .notice--warning / .warning = caution, .notice--error = problem. */
.notice,
.warning {
  padding: 0.65rem 0.9rem;
  border: 1px solid #cfe0dd;
  border-radius: 6px;
  background: #eef4f3;
}

.notice strong { color: var(--ink); }

.warning,
.notice--warning {
  border-color: var(--banner-line);
  background: var(--banner-bg);
}

.notice--error {
  border-color: #e3b8b8;
  background: #fbecec;
  color: #7d2828;
}

.error { color: var(--danger); }

.muted { color: var(--muted); }

/* User menu — always shown in the sidebar (no toggle, no JS). */

.user-menu-name {
  margin: 0 0 0.15rem;
  padding: 0.5rem 0.65rem 0.1rem;
  font-weight: 600;
}

.user-menu-items {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.account-facts dt { font-weight: 600; }
.account-facts dd { margin: 0 0 0.5rem; }

.action-list { padding-left: 1.1rem; }

/* Key figures (stat cards) */

.key-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 0.85rem;
  margin: 1.75rem 0;
  padding: 0;
}

.key-figures > div {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  text-align: left;
  padding: 1rem 1.15rem;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.key-figures dt { color: var(--muted); font-size: 0.82rem; margin-top: 0.35rem; }

.key-figures dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 2.05rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
}

.key-figures .of-total { font-size: 1rem; font-weight: 400; color: var(--muted); }

/* Reading surfaces — Source Serif 4, the clinical-journal voice. */
.prose {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.62;
}

.prose h2,
.prose h3 { font-family: var(--font-display); }
.prose h2 { margin-top: 1.8rem; }

.prose blockquote {
  margin: 1rem 0;
  padding: 0.4rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 6px 6px 0;
}

/* Case browser */

.case-browser {
  display: grid;
  grid-template-columns: minmax(16rem, 1.2fr) 2fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 50rem) {
  .case-browser { grid-template-columns: 1fr; }
}

.ichd-tree h2 { font-size: 1rem; }

.ichd-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 0.9rem;
}

.ichd-tree > ul { padding-left: 0; }

.ichd-tree li { margin: 0.15rem 0; }

.ichd-tree summary { cursor: pointer; }

.ichd-tree a { text-decoration: none; }
.ichd-tree a:hover { text-decoration: underline; }

.ichd-tree .selected-node { font-weight: 700; }

.node-count { font-family: var(--font-mono); color: var(--muted); font-size: 0.78rem; }

.tree-controls { margin: 0 0 0.5rem; display: flex; gap: 0.5rem; }
.tree-controls button { padding: 0.15rem 0.5rem; font-size: 0.85rem; font-weight: 400; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 7px;
}

.filter-bar label { font-weight: 600; font-size: 0.9rem; flex: 1 1 9rem; min-width: 0; }

/* Text fields and selects share one width (the label's flex share) and height. */
.filter-bar input,
.filter-bar select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 2.3rem;
  font: inherit;
  font-weight: 400;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.case-list { list-style: none; margin: 0; padding: 0; }

.case-list > li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--card-line);
}

.case-list > li a { font-weight: 600; }

.case-meta { color: var(--muted); font-size: 0.85rem; margin-left: 0.5rem; }

.case-snippet { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9rem; }

.pagination { display: flex; gap: 1rem; margin-top: 1rem; }

.breadcrumb { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--muted); }

.diagnosis-list { margin: 0; padding-left: 1.1rem; }

.case-text {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.62;
}

/* Submission and review */

.stacked-form.wide-form { max-width: none; }

/* Table widget — wraps any .data-table in a bordered, scrollable card. */
.table-card {
  border: 1px solid var(--card-line);
  border-radius: 7px;
  overflow-x: auto;
}

.table-card .data-table { margin: 0; }
.table-card .data-table thead th { background: var(--card-bg); }
.table-card .data-table th:first-child,
.table-card .data-table td:first-child { padding-left: 0.9rem; }
.table-card .data-table th:last-child,
.table-card .data-table td:last-child { padding-right: 0.9rem; }
.table-card .data-table tbody tr:last-child td { border-bottom: none; }

.data-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid #f0f0ec;
  vertical-align: top;
}

.data-table thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.data-table tbody tr:hover { background: #f3f7f6; }

.status-pending { color: var(--muted); }
.status-published { color: #1a7a3a; }
.status-rejected { color: var(--danger); }
.status-retracted { color: var(--danger); }

/* Dataset releases */

.release-meta dt { font-weight: 600; margin-top: 0.6rem; color: var(--muted); font-size: 0.9rem; }
.release-meta dd { margin: 0.1rem 0 0; }

.download-list { padding-left: 1.1rem; }
.download-list li { margin-bottom: 0.4rem; }

.checksum { display: block; font-family: var(--font-mono); color: var(--muted); font-size: 0.78rem; word-break: break-all; }

/* Leaderboard */

.action-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.leaderboard-table { font-size: 0.9rem; }
.leaderboard-table .metric { white-space: nowrap; }

.sort-link { text-decoration: none; }
.sort-link:hover { text-decoration: underline; }
th[aria-sort="ascending"] .sort-link::after { content: " ▲"; }
th[aria-sort="descending"] .sort-link::after { content: " ▼"; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-verified { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid #bfe0da; }
.badge-unverified { background: #f5eddd; color: #8a6d2e; border: 1px solid #e7d6b4; }
.badge-reported { background: var(--card-bg); color: var(--muted); border: 1px solid var(--line); }
a.badge-reported { text-decoration: none; color: var(--accent-dark); }
/* Peer-reviewed publication: a property of the source, separate from verification. */
a.badge-peer { background: #eaf1fa; color: #24527f; border: 1px solid #c4d7ee; text-decoration: none; }
a.badge-peer:hover { border-color: #2f6db3; }
a.badge-reported:hover { border-color: var(--accent); background: var(--accent-soft); }
/* Disclosure, not a quality mark: results produced by the platform team itself. */
button.badge-team {
  padding: 0.1rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
  background: #f1edf6;
  color: #5b4a78;
  border: 1px solid #d9cfe6;
}
button.badge-team:hover { background: #f1edf6; border-color: #9c88bd; }
button.badge-team:focus-visible { outline: 2px solid #9c88bd; outline-offset: 2px; }

/* Dataset alias in the leaderboard: a compact mono chip that opens the
   dataset's details in a native popover (no JS, P-4). */
button.dataset-chip {
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--accent-dark);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}

button.dataset-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
button.dataset-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Approach flag: category pill (coloured dot) that opens the method details. */
button.approach-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.12rem 0.55rem 0.12rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

button.approach-flag::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--flag, var(--muted));
}

button.approach-flag:hover { border-color: var(--flag, var(--accent)); background: var(--card-bg); }
button.approach-flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.approach-flag--prompting { --flag: #0f766e; }
.approach-flag--rag { --flag: #2f6db3; }
.approach-flag--neuro_symbolic { --flag: #7a4fb0; }
.approach-flag--symbolic { --flag: #b07a1a; }
.approach-flag--fine_tuned { --flag: #2e8a4a; }
.approach-flag--other { --flag: #8a9592; }

.approach-method { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.82rem; line-height: 1.35; }

.dataset-chip-note { color: var(--accent); font-family: var(--font-mono); margin-left: 0.1rem; }

.info-pop {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 1.25rem 1.4rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(10, 59, 55, .22);
  font-size: 0.95rem;
  line-height: 1.5;
}

.info-pop::backdrop { background: rgba(10, 59, 55, .25); }

.info-pop .eyebrow { margin: 0 0 0.3rem; }
.info-pop-title { margin: 0 0 0.6rem; font-size: 1.15rem; }
.info-pop-subtitle { margin: 1rem 0 0.3rem; font-size: 0.95rem; }
.info-pop p { margin: 0 0 0.6rem; }

.info-pop-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 1rem;
  margin: 0.8rem 0;
  padding: 0.7rem 0;
  border-top: 1px solid var(--card-line);
  border-bottom: 1px solid var(--card-line);
}

.info-pop-meta dt { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.info-pop-meta dd { margin: 0; overflow-wrap: anywhere; }

.info-pop-actions { display: flex; justify-content: flex-end; margin: 0.8rem 0 0; }

.status-received { color: var(--muted); }
.status-in_evaluation { color: #8a6d1a; }
.status-declined { color: var(--danger); }

/* Leaderboard size chart (inline SVG from leaderboard/chart.py). Fill encodes
   how reliable the size is: filled = disclosed, hollow = estimate, dashed = a
   related model's estimate. Text stays in text tokens, never the mark colour. */
.size-chart { margin: 0 0 1.5rem; }
.size-chart-title { font-family: var(--font-display); font-weight: 600; margin: 0.2rem 0 0.5rem; }
.size-chart-plot { display: block; width: 100%; height: auto; }
.size-chart-plot .grid { stroke: var(--line); stroke-width: 1; }
.size-chart-plot .grid--minor { stroke: #edf1f0; }
.size-chart-plot .tick--minor { font-size: 9.5px; }
.size-chart-plot .axis { stroke: var(--muted); stroke-width: 1; }
.size-chart-plot .tick,
.size-chart-plot .axis-title { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.point-hover .hit { fill: transparent; }
.point-hover { outline: none; }
.point-hover .tip { visibility: hidden; pointer-events: none; }
.point-hover:hover .tip,
.point-hover:focus-visible .tip { visibility: visible; }
.point-hover .ring { fill: none; stroke: var(--accent-dark); stroke-width: 2; }
.point-hover rect { fill: var(--panel); stroke: var(--line); filter: drop-shadow(0 4px 10px rgba(10, 59, 55, .18)); }
.point-hover text { font-family: var(--font-display); font-size: 12px; fill: var(--muted); }
.point-hover .tip-head { fill: var(--ink); font-weight: 600; }
.size-chart-plot .empty-note { font-family: var(--font-display); font-size: 13px; fill: var(--muted); }
.size-chart-plot .point-label { font-family: var(--font-display); font-size: 11px; fill: var(--muted); }
.size-chart .mark { fill: var(--flag, var(--accent)); stroke: var(--panel); stroke-width: 2; }
.size-chart .mark--unverified { fill: var(--panel); stroke: var(--flag, var(--accent)); stroke-width: 1.75; stroke-dasharray: 2.5 2; }
.size-chart .mark--neutral { --flag: var(--muted); }
.size-chart-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.85rem; }
.size-chart-legend li { display: flex; align-items: center; gap: 0.4rem; }
.size-chart-legend svg { width: 16px; height: 16px; }
.size-chart-note { font-size: 0.85rem; margin: 0.5rem 0 0; }
.size-chart-controls {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem 1rem;
  margin: 0 0 0.75rem; padding: 0.75rem 1rem; font-size: 0.9rem;
  background: var(--card-bg); border: 1px solid var(--card-line); border-radius: 7px;
}
.size-chart-scope { flex: 1 1 100%; margin: 0; font-size: 0.85rem; }
.size-chart-metric { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.size-chart-controls .form-actions { margin: 0; }
.size-chart-zoom { flex: 1 1 100%; }
.size-chart-zoom summary { cursor: pointer; font-weight: 600; }
.size-chart-zoom-hint { margin: 0.3rem 0; font-size: 0.85rem; }
.size-chart-zoom-fields { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.size-chart-zoom-fields label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.size-chart-zoom-fields input {
  width: 6.5rem; font: inherit; font-weight: 400; padding: 0.3rem 0.5rem;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.size-chart-controls select {
  font: inherit;
  font-weight: 400;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}
.size-chart-controls select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.size-chart-controls button { padding: 0.35rem 0.8rem; }
/* Drag-to-zoom (leaderboard.js) and points that open the model page. */
.size-chart-plot.js-zoom { cursor: crosshair; touch-action: none; }
.size-chart-plot .brush { fill: var(--accent-soft); fill-opacity: 0.5; stroke: var(--accent); stroke-dasharray: 4 3; }
.size-chart-plot a.point-hover { cursor: pointer; }

/* On/off filter chips (datasets, badges, chart approaches): a checkbox
   inside a label, so they work as a plain form without JavaScript (P-4). */
.toggle-group {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  flex: 1 1 100%; min-width: 0; margin: 0; padding: 0; border: 0;
}
.toggle-group legend { float: left; margin: 0 0.4rem 0 0; padding: 0; font-weight: 600; font-size: 0.9rem; }
.toggle-group legend .muted { font-weight: 400; font-size: 0.8rem; }
.filter-bar .toggle-chip,
.toggle-chip { position: relative; flex: 0 0 auto; font-weight: 400; font-size: 0.82rem; }
.filter-bar .toggle-chip input,
.toggle-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-chip span {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--muted); cursor: pointer;
  text-decoration: line-through; text-decoration-color: var(--line);
}
.toggle-chip span::before { content: "○"; font-size: 0.75rem; }
.toggle-chip input:checked + span {
  color: var(--accent-dark); border-color: var(--accent); background: var(--accent-soft);
  text-decoration: none;
}
.toggle-chip input:checked + span::before { content: "●"; }
.toggle-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.toggle-chip svg { width: 13px; height: 13px; }
/* Approach chips carry the chart's marker shape instead of the on/off dot. */
.toggle-chip--approach span::before,
.toggle-chip--approach input:checked + span::before { content: none; }
.toggle-chip--approach input:not(:checked) + span svg { opacity: 0.35; }
.toggle-chip .mark { fill: var(--flag, var(--accent)); stroke: none; }
.toggle-chip--team input:checked + span { color: #5b4a78; border-color: #9c88bd; background: #f1edf6; }
.toggle-chip--peer_reviewed input:checked + span { color: #24527f; border-color: #c4d7ee; background: #eaf1fa; }
.toggle-chip--unverified input:checked + span { color: #8a6d2e; border-color: #e7d6b4; background: #f5eddd; }
.toggle-chip--reported input:checked + span { color: var(--ink); border-color: var(--muted); background: var(--card-bg); }
.filter-bar .form-actions { margin: 0; }

/* Model page: all results of one model. */
.model-link { color: inherit; text-decoration: none; }
.model-link:hover strong { text-decoration: underline; color: var(--accent-dark); }
.model-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.2rem; margin: 0.5rem 0 1rem; }
.model-facts dt { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.model-facts dd { margin: 0; }
.model-best {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem;
  list-style: none; margin: 0; padding: 0;
}
.model-best li { padding: 0.6rem 0.75rem; border: 1px solid var(--card-line); border-radius: 7px; background: var(--card-bg); font-size: 0.82rem; }
.model-best-label { display: block; color: var(--muted); font-weight: 600; }
.model-best-value { display: block; font-family: var(--font-mono); font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.model-best-value:hover { color: var(--accent-dark); }
.model-publications { margin: 0; padding-left: 1.1rem; }
.model-publications a { overflow-wrap: anywhere; }
.model-results tr:target td { background: var(--accent-soft); }

.info-pop--wide { width: min(56rem, calc(100vw - 2rem)); }
.info-pop--wide .data-table td { vertical-align: top; font-size: 0.85rem; }
.size-chart-title .dataset-chip { margin-left: 0.5rem; font-size: 0.72rem; vertical-align: middle; }

/* Metric definitions on the leaderboard header: CSS-only tooltip on hover or
   keyboard focus of the header link (aria-describedby carries it to screen readers). */
.data-table th.has-help { position: relative; }
.data-table th.has-help .sort-link { text-decoration: underline dotted; text-underline-offset: 3px; }
.col-help {
  position: absolute;
  top: calc(100% - 0.3rem);
  left: 0.4rem;
  z-index: 5;
  width: 17rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(10, 59, 55, .18);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  visibility: hidden;
  pointer-events: none;
}
.col-help--end { left: auto; right: 0.4rem; }
.data-table th.has-help:hover .col-help,
.data-table th.has-help:focus-within .col-help { visibility: visible; }