/* Theme tokens. Light is the default; dark follows the system preference unless the
   user forces a theme with the toggle (stored in localStorage, applied as data-theme). */
:root {
  color-scheme: light;
  --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --muted:#5b6470; --line:#d9dee5;
  --accent:#1d4f91; --accent-ink:#fff; --link:#1d4f91;
  --brand:#1d4f91; --brand-ink:#fff; --brand-dot:#f2c46d;
  --chip:#eef1f5; --thead:#f0f3f7; --hover:#fafbfd; --input-bg:#fff; --code-bg:#eef1f5;
  --warn-bg:#fff4e0; --warn-ink:#7a4b00; --warn-line:#f1d6a5;
  --ok-bg:#e3f4e8; --ok-ink:#1d5b2f;
  --danger-bg:#fde2e1; --danger-ink:#8a1c1c;
  --special-bg:#f7e3f0; --special-ink:#7a1e5c;
  --grade-bg:#e6eef7; --grade-ink:#1d4f91;
  --notice-bg:#e9f1fa; --notice-line:#c9dcef;
  --shadow: none;
  --g-r4:#c9646b; --g-r3:#d08a5a; --g-r2:#b8a75f; --g-r1:#8e97a3; --g-r0:#6c7480;
  --c-good:#8fae6a; --c-mid:#d3a35c; --c-low:#c9646b; --c-warn:#c9a24a; --c-bad:#b85b5b; --c-none:#9aa3ad;
  --c-1:#5d8fc7; --c-2:#7e9e6a; --c-3:#b98a5e; --c-4:#8f7cc1; --c-5:#c37a9d; --c-6:#6f9ea8;
  --bar-ink:#fff; --bar-track:#e3e7ec;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#12161b; --card:#1a1f26; --ink:#e6e9ee; --muted:#9aa4b1; --line:#2c343e;
  --accent:#78a9e8; --accent-ink:#0b1420; --link:#8fbcf2;
  --brand:#2a63ad; --brand-ink:#f4f7fb; --brand-dot:#f2c46d;
  --chip:#262d37; --thead:#20272f; --hover:#1f252d; --input-bg:#12161b; --code-bg:#262d37;
  --warn-bg:#3a2b10; --warn-ink:#f2c46d; --warn-line:#5a4318;
  --ok-bg:#15301f; --ok-ink:#8fd3a5;
  --danger-bg:#3c1a1a; --danger-ink:#f0a1a1;
  --special-bg:#3a1a30; --special-ink:#e8a4d2;
  --grade-bg:#1c2b3d; --grade-ink:#8fc1f0;
  --notice-bg:#172433; --notice-line:#264260;
  --g-r4:#d17a80; --g-r3:#d9945f; --g-r2:#b6a56a; --g-r1:#8d97a4; --g-r0:#5d6572;
  --c-good:#8fb56d; --c-mid:#d7a95d; --c-low:#d17a80; --c-warn:#cfae56; --c-bad:#c46a6a; --c-none:#586170;
  --c-1:#6b9bd1; --c-2:#8aad74; --c-3:#c29466; --c-4:#9b89cf; --c-5:#cb86a8; --c-6:#7aaab3;
  --bar-ink:#f4f6f8; --bar-track:#252c35;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#12161b; --card:#1a1f26; --ink:#e6e9ee; --muted:#9aa4b1; --line:#2c343e;
    --accent:#78a9e8; --accent-ink:#0b1420; --link:#8fbcf2;
    --brand:#2a63ad; --brand-ink:#f4f7fb; --brand-dot:#f2c46d;
    --chip:#262d37; --thead:#20272f; --hover:#1f252d; --input-bg:#12161b; --code-bg:#262d37;
    --warn-bg:#3a2b10; --warn-ink:#f2c46d; --warn-line:#5a4318;
    --ok-bg:#15301f; --ok-ink:#8fd3a5;
    --danger-bg:#3c1a1a; --danger-ink:#f0a1a1;
    --special-bg:#3a1a30; --special-ink:#e8a4d2;
    --grade-bg:#1c2b3d; --grade-ink:#8fc1f0;
    --notice-bg:#172433; --notice-line:#264260;
    --g-r4:#d17a80; --g-r3:#d9945f; --g-r2:#b6a56a; --g-r1:#8d97a4; --g-r0:#5d6572;
    --c-good:#8fb56d; --c-mid:#d7a95d; --c-low:#d17a80; --c-warn:#cfae56; --c-bad:#c46a6a; --c-none:#586170;
    --c-1:#6b9bd1; --c-2:#8aad74; --c-3:#c29466; --c-4:#9b89cf; --c-5:#cb86a8; --c-6:#7aaab3;
    --bar-ink:#f4f6f8; --bar-track:#252c35;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin:0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
a { color: var(--link); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.small { font-size: 12px; } .muted { color: var(--muted); } .nowrap { white-space: nowrap; }
.site-header { background:var(--card); border-bottom:1px solid var(--line); }
.nav { display:flex; gap:16px; align-items:center; padding:10px 20px; max-width:1600px; margin:0 auto; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; text-decoration:none; color:var(--ink); letter-spacing:-.01em; margin-right:6px; }
.brand-mark { flex:none; }
.brand-word { font-size:17px; }
.brand-dot { color: var(--brand-dot); font-weight:900; }
.login-brand { display:flex; justify-content:center; margin: 6px 0 4px; }
.login-brand .brand-word { font-size: 26px; }
.tagline { text-align:center; color: var(--muted); margin: 0 0 18px; font-style: italic; }
.footer-brand { color: var(--ink); }
.nav .case-switch { font-size:12px; color: var(--muted); display:inline-flex; gap:6px; align-items:center; }
.nav .case-switch select { width:auto; padding:2px 6px; font-size:12px; }
.spacer { flex:1; }
.inline { display:inline; }
.linklike { background:none; border:0; color:var(--link); cursor:pointer; padding:0; font:inherit; text-decoration:underline; }
/* Navbar buttons */
.nav { gap: 8px; padding: 8px 20px; }
.nav-group { display:inline-flex; align-items:center; gap:4px; }
.nav-btn { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:8px; border:1px solid transparent; background:transparent; color:var(--ink); text-decoration:none; font:inherit; font-size:13px; line-height:1; cursor:pointer; white-space:nowrap; }
.nav-btn:hover { background: var(--chip); }
.nav-btn.active { background: var(--grade-bg); color: var(--grade-ink); border-color: transparent; }
.nav-btn.icon-only { padding:6px; }
.nav-btn .icon { width:17px; height:17px; flex:none; stroke: currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.nav-user { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); }
.nav-user-name { color: var(--muted); font-size:13px; margin-right:4px; max-width: 180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.case-switch .icon { width:16px; height:16px; stroke: var(--muted); fill:none; stroke-width:1.8; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.theme-toggle .theme-sun, .theme-toggle .theme-moon, .theme-toggle .theme-auto { display:none; }
.theme-toggle[data-mode="light"] .theme-sun, .theme-toggle[data-mode="dark"] .theme-moon, .theme-toggle[data-mode="auto"] .theme-auto, .theme-toggle:not([data-mode]) .theme-auto { display:inline; }
@media (max-width: 900px) { .nav-label { display:none; } .nav-btn { padding:6px 8px; } .nav-user-name { display:none; } }
.main { max-width:1600px; margin:0 auto; padding:16px 20px 40px; }
.site-footer { max-width:1600px; margin:0 auto; padding:16px 20px 30px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); }
h1 { font-size: 22px; margin: 8px 0 12px; } h2 { font-size:18px; margin:0 0 10px; } h3 { font-size:14px; margin:16px 0 6px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
h3 small { text-transform:none; letter-spacing:0; font-weight:normal; }
.card { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:14px 16px; }
.narrow { max-width: 480px; margin: 40px auto; }
.stack { display:flex; flex-direction:column; gap:12px; }
.stack label { display:flex; flex-direction:column; gap:4px; }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], select, textarea { font:inherit; padding:5px 7px; border:1px solid var(--line); border-radius:4px; background:var(--input-bg); color:var(--ink); width:100%; max-width:100%; }
textarea { min-height: 72px; resize: vertical; }
input::placeholder { color: var(--muted); }
.btn { display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:4px; background:var(--card); color:var(--ink); text-decoration:none; font:inherit; cursor:pointer; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.filters { margin-bottom: 12px; }
.filter-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:8px 12px; }
.filter-grid label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.filter-grid label small { color: var(--muted); font-size: 11px; }
.filter-grid .wide { grid-column: span 3; }
.actions { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.result-count { color: var(--muted); margin: 6px 0; }
.result-count code { background:var(--code-bg); padding:1px 4px; border-radius:3px; }
code { background: var(--code-bg); padding:1px 4px; border-radius:3px; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:6px; background:var(--card); }
/* A sticky header only sticks inside its nearest scrolling ancestor. On screens wide enough for the
   table, the wrapper stops being a scroll container so the header sticks to the viewport instead. */
@media (min-width: 1200px) { .table-wrap:not(.scroll-x) { overflow: visible; } }
table.register { border-collapse: separate; border-spacing: 0; width:100%; min-width: 1100px; }
table.register th, table.register td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--line); }
table.register thead th { position: sticky; top:0; background:var(--thead); z-index:2; font-size:12px; text-transform:uppercase; letter-spacing:.03em; box-shadow: 0 1px 0 var(--line); }
table.compact { min-width: 0; }
table.register thead th a { color: var(--ink); text-decoration:none; }
table.register tbody tr:hover { background:var(--hover); }
tr.status-superseded td, tr.status-withdrawn td { color: var(--muted); }
.desc-col { min-width: 320px; max-width: 520px; } .title-col { min-width:180px; }
.empty { text-align:center; color:var(--muted); padding:30px !important; }
.finding-aid .fa-text { white-space: pre-wrap; }
.finding-aid .fa-meta { margin-top:4px; font-size:12px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
.basis { color: var(--muted); font-size: 12px; }
.basis-small { font-size: 11px; color: var(--muted); }
.badge { display:inline-block; font-size:11px; padding:1px 6px; border-radius:10px; background:var(--chip); color:var(--ink); white-space:nowrap; }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.muted { color: var(--muted); }
.badge.special { background:var(--special-bg); color:var(--special-ink); }
.badge.grade { background:var(--grade-bg); color:var(--grade-ink); font-weight:600; }
.badge.priv-privileged, .badge.priv-part_privileged, .badge.priv-without_prejudice { background:var(--danger-bg); color:var(--danger-ink); }
.badge.priv-unassessed { background: var(--warn-bg); color: var(--warn-ink); }
.badge.priv-not_privileged, .badge.priv-waived { background: var(--ok-bg); color: var(--ok-ink); }
a.party { text-decoration:none; color: var(--ink); }
a.party:hover { background: var(--grade-bg); color: var(--grade-ink); }
.party, .head { display:inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; background:var(--chip); padding:0 5px; border-radius:3px; margin:0 3px 3px 0; }
.party.cc { opacity:.7; }
.pagination { display:flex; gap:12px; justify-content:center; padding:14px; color:var(--muted); flex-wrap:wrap; }
.notice { padding:10px 12px; border-radius:6px; background:var(--notice-bg); border:1px solid var(--notice-line); margin:10px 0; }
.notice.warn { background: var(--warn-bg); border-color:var(--warn-line); color: var(--warn-ink); }
.error { color:var(--danger-ink); }
.messages { list-style:none; padding:0; margin:0 0 10px; } .msg { padding:8px 12px; border-radius:6px; background:var(--notice-bg); border:1px solid var(--notice-line); }
.two-col { display:grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap:16px; align-items:start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } .filter-grid .wide { grid-column: span 2; } }
.facts { display:grid; grid-template-columns: max-content 1fr; gap:4px 14px; margin:6px 0; }
.facts dt { color: var(--muted); } .facts dd { margin:0; overflow-wrap:anywhere; }
.plain { list-style:none; padding:0; margin:4px 0; } .plain li { margin:2px 0; }
.party-role { margin-bottom:8px; }
.dl { display:grid; gap:6px; padding:8px 0; border-top:1px solid var(--line); }
.crumbs { color: var(--muted); margin:0; }
h1 .type { font-size:14px; color:var(--muted); font-weight:normal; font-family: system-ui, sans-serif; }
.badges { margin: 0 0 10px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.badges .badge { line-height:1.5; align-self:center; }
.badges .btn { margin-right:6px; }
table.compact td, table.compact th { padding: 5px 8px; font-size: 12px; }
.access-log { margin-top: 16px; }
.badge.case { text-decoration:none; color: var(--muted); }

/* Overview charts: stacked bars whose bands are filters */
.charts { display:grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap:14px 24px; margin: 6px 0 14px; }
.chart { min-width:0; }
.chart-title { margin: 0 0 8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); font-weight:600; }
.chart-sub { text-transform:none; letter-spacing:0; font-weight:normal; }
.bar { display:flex; height:40px; border-radius:6px; overflow:hidden; background: var(--bar-track); gap:3px; }
.seg { flex: 0 1 0; min-width: 5px; display:flex; align-items:center; justify-content:center; text-decoration:none; color: var(--bar-ink); font: 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow:hidden; white-space:nowrap; transition: filter .12s; }
.seg:hover { filter: brightness(1.12); }
.seg.active { outline: 2px solid var(--ink); outline-offset: -2px; }
.seg-text { padding: 0 8px; overflow:hidden; text-overflow:ellipsis; }
.g-r4 { background: var(--g-r4); } .g-r3 { background: var(--g-r3); } .g-r2 { background: var(--g-r2); } .g-r1 { background: var(--g-r1); } .g-r0 { background: var(--g-r0); }
.c-good { background: var(--c-good); } .c-mid { background: var(--c-mid); } .c-low { background: var(--c-low); } .c-warn { background: var(--c-warn); } .c-bad { background: var(--c-bad); } .c-none { background: var(--c-none); }
.c-1 { background: var(--c-1); } .c-2 { background: var(--c-2); } .c-3 { background: var(--c-3); } .c-4 { background: var(--c-4); } .c-5 { background: var(--c-5); } .c-6 { background: var(--c-6); }
.chart-summary { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.legend { list-style:none; padding:0; margin: 6px 0 0; display:flex; flex-wrap:wrap; gap: 4px 18px; font-size: 13px; }
.legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px; }
@media (max-width: 700px) { .charts { grid-template-columns: 1fr; } }

/* Users and invitations */
.field { display:flex; flex-direction:column; gap:4px; }
.field-cases ul { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
/* Checkboxes and radios: the control sits left of its own text, on one line, whatever the form's
   label layout is. A label that directly wraps such an input is laid out as a row. */
input[type=checkbox], input[type=radio] { width:16px; height:16px; margin:0; flex:none; accent-color: var(--accent); }
label:has(> input[type=checkbox]), label:has(> input[type=radio]), .check { display:flex; flex-direction:row; align-items:flex-start; gap:8px; font-weight:normal; line-height:1.35; color: var(--ink); }
label:has(> input[type=checkbox]) > input, label:has(> input[type=radio]) > input, .check > input { margin-top:2px; }
.choice-text { display:flex; flex-direction:column; gap:2px; }
.choice-text small { line-height:1.4; }
.field-cases > div > div, .field-cases li { margin:3px 0; }
.field-check small, .field-check .error { margin-left:24px; }
.access-form { display:grid; gap:4px; }
.btn.small { padding:3px 8px; font-size:12px; }
table.users td { vertical-align: top; }

/* Insights */
.insight { margin-bottom: 22px; }
.insight h2 { font-size: 16px; margin: 0 0 4px; }
.insight .lede { color: var(--muted); margin: 0 0 10px; font-size: 13px; }
.insight svg { width: 100%; height: auto; display: block; }
.scroll-x { overflow-x:auto; }
.insight .table-wrap.scroll-x { padding-bottom: 6px; }
.insight .axis text { fill: var(--muted); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.insight .axis line, .insight .axis path { stroke: var(--line); }
.tl-bar rect { transition: opacity .12s; } .tl-bar:hover rect { opacity: .8; }
.g-r4 rect, rect.g-r4 { fill: var(--g-r4); } .g-r3 rect, rect.g-r3 { fill: var(--g-r3); } .g-r2 rect, rect.g-r2 { fill: var(--g-r2); }
.g-r1 rect, rect.g-r1 { fill: var(--g-r1); } .g-r0 rect, rect.g-r0 { fill: var(--g-r0); }
rect.c-1 { fill: var(--c-1); } rect.c-2 { fill: var(--c-2); } rect.c-3 { fill: var(--c-3); } rect.c-4 { fill: var(--c-4); } rect.c-5 { fill: var(--c-5); } rect.c-6 { fill: var(--c-6); } rect.c-none { fill: var(--c-none); }
.heat-cell { fill: var(--accent); stroke: var(--card); stroke-width: 1; }
.heat-empty { fill: var(--bar-track); stroke: var(--card); stroke-width: 1; }
.heat-label text { fill: var(--ink); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.heat-total text { fill: var(--muted); font-size: 11px; }
.heat-count { fill: var(--muted); font-size: 10px; }
.net-edge { stroke: var(--muted); stroke-opacity: .35; fill: none; }
.net-edge:hover { stroke: var(--accent); stroke-opacity: .9; }
.net-node circle { fill: var(--accent); fill-opacity: .85; stroke: var(--card); stroke-width: 1.5; }
.net-node:hover circle { fill-opacity: 1; }
.net-node text { fill: var(--ink); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.insight-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.insight-controls input[type=number] { width: 70px; }
.two-up { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 1100px) { .two-up { grid-template-columns: 1fr; } }
.range-bar { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.range-bar label { display:inline-flex; gap:6px; align-items:center; font-size:12px; color: var(--muted); }
.range-bar input[type=date] { width:auto; }

/* Multi-select filters rendered as inline checkboxes */
.filter-grid .multi { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.filter-grid .multi > div { display:flex; flex-wrap:wrap; gap:2px 10px; padding:5px 0 0; }
.filter-grid .multi > div > div { display:inline; }
.filter-grid .multi label { display:inline-flex; flex-direction:row; gap:5px; align-items:center; color:var(--ink); font-size:13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.filter-grid .multi input[type=checkbox] { margin-top:0; }
.file-dot { display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:middle; margin-left:2px; }
.file-dot.present { background: var(--c-good); } .file-dot.bad { background: var(--c-bad); }

/* Small screens: phones and narrow tablets. Verified by rendering every page at 390px wide. */
@media (pointer: coarse) {
  .nav-btn { padding: 9px; }                 /* 40px tap targets */
  .btn.small { padding: 6px 10px; }
  .check, .field-cases label { min-height: 32px; align-items: center; }
}
@media (max-width: 760px) {
  .nav { padding: 6px 12px; gap: 6px; row-gap: 6px; }
  .brand { margin-right: 0; }
  .brand-word { display: none; }                  /* the mark alone; the word is in the title */
  .nav .spacer { display: none; }
  /* Two rows: brand and section buttons, then the case switcher stretched beside the user buttons. */
  .nav .case-switch { flex: 1 1 60%; order: 5; min-width: 0; }
  .nav .case-switch select { flex: 1; width: auto; min-width: 0; }
  .nav-user { order: 6; margin-left: auto; padding-left: 6px; }
  .main { padding: 12px 12px 32px; }
  .site-footer { padding: 12px 12px 24px; }
  h1 { font-size: 20px; }
  .narrow { margin: 16px auto; }
  .card { padding: 12px; }
  .filter-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .filter-grid .wide { grid-column: 1 / -1; }
  /* 16px inputs stop iOS from zooming into a focused field */
  input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], select, textarea { font-size: 16px; }
  .facts { grid-template-columns: minmax(80px, max-content) minmax(0, 1fr); }
  /* Wide tables become a stack of cards; each cell shows its column name from data-label. */
  .table-wrap.stackable { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .stackable table, .stackable tbody, .stackable tr, .stackable td { display: block; min-width: 0; width: auto; max-width: none; }
  .stackable thead { display: none; }
  .stackable tr { background: var(--card); border: 1px solid var(--line); border-radius: 6px; margin: 0 0 10px; padding: 6px 0; }
  .stackable tbody tr:hover { background: var(--card); }
  .stackable td { border: 0; padding: 4px 12px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; align-items: start; white-space: normal; overflow-wrap: anywhere; }
  .stackable td::before { content: attr(data-label); color: var(--muted); font: 600 11px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-transform: uppercase; letter-spacing: .03em; padding-top: 3px; }
  .stackable td:empty, .stackable td:not([data-label])::before { display: none; }
  .stackable td:not([data-label]), .stackable td.desc-col { grid-template-columns: minmax(0, 1fr); }
  .stackable td.empty { padding: 20px 12px !important; }
  .stackable .desc-col, .stackable .title-col { min-width: 0; max-width: none; }
  .stackable .access-form { gap: 6px; }
  /* Charts drawn to a fixed width stay legible and scroll sideways instead of shrinking. */
  .timeline-wrap svg { min-width: var(--natural-w, 640px); max-width: none; }
  .badges .btn { margin-bottom: 4px; }
  .range-bar { gap: 6px 8px; }
}
@media (max-width: 420px) {
  .filter-grid { grid-template-columns: 1fr 1fr; }
}