/* 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;
  --focus-ring: rgba(29,79,145,.22); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%235b6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
: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;
  --focus-ring: rgba(120,169,232,.30); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239aa4b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@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;
  --focus-ring: rgba(120,169,232,.30); --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239aa4b1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { 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 .dropdown { width: 230px; font-size: 12px; }
.nav .case-switch .dropdown > summary { min-height: 30px; padding: 4px 26px 4px 8px; font-size: 12px; border-radius: 6px; background-position: right 8px center; background-size: 10px; }
.nav .case-switch .dropdown-panel { min-width: 280px; }
.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; }
/* Seven entries plus the case switcher fit one row on a laptop: the switcher truncates long
   case titles and the user name gives way first. */
@media (max-width: 1280px) { .nav-user-name { display:none; } }
@media (max-width: 1240px) { .nav-label { display:none; } .nav-btn { padding:6px 8px; } }
@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; }
/* Form controls: one quiet, consistent look everywhere. */
input[type=text], input[type=password], input[type=date], input[type=number], input[type=email], input[type=search], input[type=url], select, textarea {
  font: inherit; font-size: 14px; line-height: 1.3; color: var(--ink); background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-height: 38px; width: 100%; max-width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
textarea { min-height: 84px; line-height: 1.45; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }
select[multiple] { background-image: none; padding-right: 10px; }
:is(input, select, textarea):hover { border-color: var(--muted); }
:is(input, select, textarea):focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
:is(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }
/* A text box with a control attached to its right edge (the Topic bar and its match level). */
.input-group { display: flex; align-items: stretch; width: 100%; }
.input-group > input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :focus-visible { position: relative; z-index: 1; }
.btn { display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); text-decoration:none; font:inherit; font-size:13px; line-height:1.3; cursor:pointer; transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease; }
.btn:hover { border-color: var(--muted); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.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 .field { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.filter-grid .field > label { font-size:12px; color:var(--muted); }
.filter-grid .field 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. Wherever the table is shown as
   a table (phones stack it instead), the wrapper stops being a scroll container so the header sticks
   to the viewport; on mid-sized screens the columns squeeze to fit rather than scroll sideways. */
@media (min-width: 1080px) { .table-wrap:not(.scroll-x) { overflow: visible; } }
table.register { border-collapse: separate; border-spacing: 0; width:100%; min-width: 1100px; }
/* Between a laptop and a wide desktop the register squeezes to fit the viewport: shorter minimum
   widths, tighter padding, and dates and headers allowed to wrap. Narrower than that, the wrapper
   scrolls sideways as before (and phones stack the rows). */
@media (min-width: 1080px) and (max-width: 1199px) {
  table.register { min-width: 0; }
  table.register .desc-col { min-width: 190px; max-width: none; } table.register .title-col { min-width: 115px; }
  table.register th, table.register td { padding: 6px 6px; }
  table.register td.nowrap, table.register thead th a { white-space: normal; }
}
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; white-space:nowrap; }
/* Column sort indicators: a faint double arrow on sortable columns, a solid one on the sorted column. */
.sort-mark { display:inline-block; margin-left:4px; font-size:10px; opacity:.35; transform: translateY(-1px); }
th.sorted .sort-mark { opacity:1; color: var(--accent); }
table.register thead th a:hover .sort-mark { opacity:.8; }
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); }
/* Toast cards, top right */
.toasts { position: fixed; top: 64px; right: 16px; z-index: 50; display:flex; flex-direction:column; gap:10px; width: min(380px, calc(100vw - 32px)); pointer-events:none; }
.toast { pointer-events:auto; display:flex; align-items:stretch; gap:10px; background: var(--card); color: var(--ink); border:1px solid var(--line); border-radius:8px; box-shadow: 0 6px 24px rgba(0,0,0,.14); overflow:hidden; animation: toast-in .22s ease-out; }
.toast-out { opacity:0; transform: translateX(12px); transition: opacity .25s, transform .25s; }
@keyframes toast-in { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform:none; } }
.toast-bar { width:5px; flex:none; background: var(--accent); }
.toast-success .toast-bar { background: var(--c-good); } .toast-warning .toast-bar { background: var(--c-warn); } .toast-error .toast-bar { background: var(--c-bad); } .toast-info .toast-bar { background: var(--accent); }
.toast-body { padding:10px 4px 10px 6px; flex:1; min-width:0; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.toast-title { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); margin-bottom:2px; }
.toast-success .toast-title { color: var(--ok-ink); } .toast-warning .toast-title { color: var(--warn-ink); } .toast-error .toast-title { color: var(--danger-ink); }
.toast-close { flex:none; align-self:flex-start; margin:6px 6px 0 0; width:26px; height:26px; border:0; border-radius:6px; background:transparent; color: var(--muted); font-size:18px; line-height:1; cursor:pointer; }
.toast-close:hover { background: var(--chip); color: var(--ink); }
@media (max-width: 600px) { .toasts { top: 8px; right: 8px; left: 8px; width:auto; } }
.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); }
/* Disclosure membership badges and the register's "Add to" bar. */
.badge.disc { text-decoration:none; }
.badge.disc.locked { background: var(--ok-bg); color: var(--ok-ink); }
.badge.disc.preparing { background: var(--warn-bg); color: var(--warn-ink); }
.badge.disc.superseded, .badge.disc.withdrawn { color: var(--muted); text-decoration: line-through; }
.disclose-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 10px; margin:6px 0; border:1px solid var(--line); border-radius:6px; background:var(--card); }
.disclose-bar .disclose-label { font-weight:600; font-size:13px; }
.disclose-bar .dropdown { min-width: 220px; }
th.tick, td.tick { width: 28px; text-align:center; padding-left:8px; padding-right:4px; }
th.tick input, td.tick input { margin:0; }

/* 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:5px 10px; 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 */
/* Dropdown components (components/dropdown.html, components/multiselect.html): a <details> whose
   summary reads like a select and whose panel holds the real radios or checkboxes. Opens without
   script and by keyboard; controls.js adds live summaries, close-on-choose, type-to-filter and
   on-demand loading. */
.dropdown { position: relative; min-width: 0; }
.filter-grid > *, .filter-grid .field { min-width: 0; }
.dropdown > summary { list-style: none; display: flex; align-items: center; min-width: 0; min-height: 38px; padding: 8px 30px 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 14px; line-height: 1.3; cursor: pointer; user-select: none;
  background: var(--input-bg) var(--select-arrow) no-repeat right 10px center / 12px; transition: border-color .12s ease, box-shadow .12s ease; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown > summary:hover { border-color: var(--muted); }
.dropdown > summary:focus-visible, .dropdown[open] > summary { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.dropdown-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; max-width: min(440px, 92vw);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.14); padding: 6px; }
.dropdown-options { max-height: 260px; overflow: auto; overscroll-behavior: contain; }
.dropdown-search { min-height: 32px; padding: 5px 8px; margin: 0 0 6px; font-size: 13px; border-radius: 6px; }
.dropdown-status { padding: 6px 8px 2px; }
.dropdown-options label { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--ink);
  font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-options label:hover { background: var(--chip); }
.dropdown-options label.is-selected { background: var(--grade-bg); color: var(--grade-ink); }
.dropdown-options input[type=checkbox], .dropdown-options input[type=radio] { margin-top: 0; }
.multiselect .dropdown-options label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* attached to the right edge of a text box */
.input-group > .dropdown { flex: 0 0 auto; }
.input-group > .dropdown > summary { min-width: 84px; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0;
  background-color: var(--chip); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.input-group > .dropdown .dropdown-panel { left: auto; right: 0; min-width: 120px; }
.access-form .dropdown { min-width: 200px; }
/* Case grant matrix: one row per case, three ticks. */
.grants { border-collapse: collapse; margin: 0 0 6px; font-size: 13px; }
.grants th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 2px 8px; text-align: center; }
.grants th:first-child, .grants td.grant-case { text-align: left; padding-left: 0; }
.grants td { padding: 4px 8px; text-align: center; border-top: 1px solid var(--line); }
.grants tr:first-child td { border-top: 0; }
.grants input[type=checkbox]:disabled { opacity: .55; }
@media (pointer: coarse) { .dropdown-options label { min-height: 40px; } }
.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 45%; order: 5; min-width: 0; }
  .nav .case-switch .dropdown { 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, .stackable td.grant-cell { 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; }
  /* The grant matrix nested in a stacked row stays a real table: its column names are the point. */
  .stackable .grants { display: table; width: 100%; }
  .stackable .grants thead { display: table-header-group; }
  .stackable .grants tbody { display: table-row-group; }
  .stackable .grants tr { display: table-row; background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; }
  .stackable .grants th { padding: 2px 4px; white-space: nowrap; font-size: 10px; letter-spacing: 0; }
  .stackable .grants td { display: table-cell; padding: 4px; border-top: 1px solid var(--line); }
  .stackable .grants td::before { content: none; }
  /* 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; }
}

/* Help manual */
.help-layout { display:grid; grid-template-columns: 220px minmax(0, 1fr); gap:16px; align-items:start; }
.help-toc { position: sticky; top: 16px; align-self: start; font-size:13px; }
.help-toc li { padding: 3px 0; }
.help-toc li.current a { font-weight:600; }
.help-body { max-width: 860px; }
.help-section { scroll-margin-top: 16px; }
.help-section.came-for, .help-section:target { border-color: var(--accent); }
.help-section h2 { font-size: 18px; margin: 0 0 8px; display:flex; align-items:center; gap:8px; }
.prose { max-width: 72ch; line-height: 1.55; }
.prose p { margin: 0 0 10px; }
.prose code { font-size: 12px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 10px; }
.prose strong { font-weight: 600; }
@media (max-width: 1000px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; } }

/* Confirmation modal: a card in the middle of a dimmed page, sized to its text. */
dialog.modal { border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
dialog.modal::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(1px); }
dialog.modal .modal-body { margin: 0; padding: 18px 20px 16px; }
dialog.modal .modal-title { margin: 0 0 8px; font-size: 16px; }
dialog.modal .modal-text { margin: 0 0 16px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; }
dialog.modal .modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
dialog.modal [hidden] { display: none !important; }
.btn.danger { background: var(--danger-bg); border-color: var(--danger-bg); color: var(--danger-ink); }

/* Sharing a disclosure version: the step-up fieldset and the neutral recipient header. */
fieldset.stepup { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset.stepup legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.shared-title { font-size: 15px; }