@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/source-sans-3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --color-paper: #f4f6f8;
  --color-surface: #fbfcfd;
  --color-sunken: #e9eef3;
  --color-rule: #d5dee7;
  --color-rule-strong: #a8b6c4;
  --color-ink: #1c2b39;
  --color-ink-muted: #526170;
  --color-accent: #1c4fb0;
  --color-accent-strong: #133b8a;
  --color-accent-ink: var(--color-surface);
  --color-accent-wash: #dfe7f6;
  --color-warn: #7a4300;
  --color-warn-wash: #f6e8c8;
  --color-warn-rule: #d9b46a;
  --color-danger: #9a2a1e;
  --color-danger-wash: #f5dcd5;
  --color-danger-rule: #d79a8f;
  --color-success: #1d6a3b;
  --color-success-wash: #dcefe2;
  --color-success-rule: #8dc19f;
  --color-info: var(--color-accent-strong);
  --color-info-wash: var(--color-accent-wash);
  --color-info-rule: #9db5e0;
  --color-neutral: var(--color-ink-muted);
  --color-neutral-wash: var(--color-sunken);
  --color-neutral-rule: var(--color-rule-strong);
  --series-detection: var(--color-accent);
  --series-update: #62778b;
  --series-manual: #a15e0e;
  --series-other: #725d82;
  --color-focus: var(--color-accent);

  --radius: 4px;
  --radius-panel: 6px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --control-height: 2.75rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scrollbar-color: var(--color-rule-strong) var(--color-paper);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 1rem/1.5 var(--font-sans);
}

[hidden] { display: none !important; }

::selection { background: var(--color-accent-wash); color: var(--color-ink); }

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

h1, h2, h3, p, dl, dd, figure, ul { margin: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; }

a { color: var(--color-accent); text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent-strong); }

.muted { color: var(--color-ink-muted); }
.mono { font-family: var(--font-mono); font-size: 0.875em; font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--space-2); top: -4rem; z-index: 20;
  padding: var(--space-2) var(--space-3);
  background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius);
}
.skip:focus { top: var(--space-2); }
.skip:hover { color: var(--color-paper); }

/* Controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 0 var(--space-4);
  border: 1px solid var(--color-rule-strong); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-ink);
  font: 600 0.9375rem/1 var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.btn:hover:not(:disabled) { background: var(--color-sunken); }
.btn:active:not(:disabled) { background: var(--color-rule); }
.btn:disabled { color: var(--color-ink-muted); background: var(--color-paper); border-color: var(--color-rule); cursor: not-allowed; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-strong); border-color: var(--color-accent-strong); }
.btn-primary:active:not(:disabled) { background: var(--color-accent-strong); }
.btn-primary:disabled { background: var(--color-accent-wash); border-color: var(--color-accent-wash); color: var(--color-ink-muted); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--color-accent); }
.btn-quiet:hover:not(:disabled) { background: var(--color-accent-wash); }
.btn-block { width: 100%; }
.btn-small { min-height: 2rem; padding: 0 var(--space-3); }
.icon { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn[aria-busy="true"] .icon { opacity: 0.6; }

input[type="text"], input[type="password"], input[type="search"], select {
  width: 100%; min-width: 0; min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-rule-strong); border-radius: var(--radius);
  background: var(--color-surface); color: var(--color-ink);
  font: 400 1rem/1.25 var(--font-sans);
  text-overflow: ellipsis;
}
input::placeholder { color: var(--color-ink-muted); opacity: 1; }
input:hover, select:hover { border-color: var(--color-ink-muted); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus); }
input[type="checkbox"] { width: 1.125rem; height: 1.125rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--color-accent); }

.field { display: grid; gap: var(--space-1); min-width: 0; }
.field label, .inline-field > span { font-size: 0.875rem; font-weight: 600; color: var(--color-ink-muted); }
.inline-field { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.inline-field select { width: auto; max-width: 100%; }

/* Boot and login */
.boot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); }
.login { max-width: 25rem; margin: 0 auto; padding: clamp(1.5rem, 12vh, 6rem) var(--space-4) var(--space-5); }
.panel { background: var(--color-surface); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-panel); padding: var(--space-5); }
.panel h1 { font-size: 1.625rem; letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.panel form { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.form-error {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-danger-rule); border-radius: var(--radius);
  background: var(--color-danger-wash); color: var(--color-danger); font-weight: 600;
}

/* App chrome */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-bottom: 1px solid var(--color-rule-strong);
}
.brand { font-size: 1.125rem; letter-spacing: -0.01em; margin-right: auto; }
.session { font-size: 0.9375rem; min-width: 0; overflow-wrap: anywhere; }
.session .sep { margin: 0 var(--space-1); color: var(--color-ink-muted); }
.session time { font-variant-numeric: tabular-nums; }
.session time.stale { color: var(--color-danger); font-weight: 600; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }

.progress { height: 3px; background: var(--color-accent); }

.shell {
  display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); column-gap: 2rem;
  max-width: 92rem; margin: 0 auto; padding: 0 var(--space-4);
}
.sidenav { position: sticky; top: 0; align-self: start; padding: var(--space-5) 0; }
.sidenav ul { list-style: none; padding: 0; display: grid; gap: 0.125rem; }
.sidenav a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  color: var(--color-ink); text-decoration: none; white-space: nowrap; font-weight: 500;
}
.sidenav a:hover { background: var(--color-sunken); }
.sidenav a[aria-current] { background: var(--color-accent-wash); color: var(--color-accent-strong); font-weight: 700; }

main { min-width: 0; padding: var(--space-5) 0 4rem; }
main:focus { outline: none; }

.banners { display: grid; gap: var(--space-2); }
.banners:not(:empty) { margin-bottom: var(--space-4); }
.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-3); border: 1px solid; border-radius: var(--radius);
}
.banner p { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.banner-danger { background: var(--color-danger-wash); border-color: var(--color-danger-rule); color: var(--color-danger); }
.banner-warn { background: var(--color-warn-wash); border-color: var(--color-warn-rule); color: var(--color-warn); }

.filters {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) auto;
  gap: var(--space-3) var(--space-4); align-items: end;
  margin-top: var(--space-4); padding: var(--space-4);
  background: var(--color-sunken); border-radius: var(--radius-panel);
}
.check { display: flex; gap: var(--space-2); align-items: flex-start; cursor: pointer; min-height: var(--control-height); padding-top: 0.15rem; }
.check-hint { display: block; font-size: 0.8125rem; color: var(--color-ink-muted); line-height: 1.3; max-width: 52ch; }
.overview-controls { margin-top: var(--space-4); }
.test-toggle { align-items: center; width: fit-content; max-width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-surface); }
.test-toggle:has(input:checked) { background: var(--color-warn-wash); border-style: solid; }
.test-toggle input { margin-top: 0; }
.protection-tools { margin-top: var(--space-4); max-width: 28rem; }
.filter-results { margin-top: var(--space-3); max-width: 75ch; font-size: 0.9375rem; }
.filter-results:empty { display: none; }

#overview { margin-top: 0; padding-top: 0; border-top: 0; }
section {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule-strong); scroll-margin-top: 1rem;
}
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); }
.section-meta { color: var(--color-ink-muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.lede { margin-top: var(--space-2); color: var(--color-ink-muted); max-width: 65ch; }
section > .note, section > .empty, section > .table-wrap, section > .pager, section > .protection-summary:not(:empty), .scenarios > .table-wrap, .scenarios > .empty { margin-top: var(--space-4); }

.note { max-width: 75ch; font-size: 0.9375rem; color: var(--color-ink-muted); }
.note-warn, .note.warn {
  padding: var(--space-2) var(--space-3); border: 1px solid var(--color-warn-rule); border-radius: var(--radius);
  background: var(--color-warn-wash); color: var(--color-warn); font-weight: 600; max-width: none;
}
.empty {
  padding: var(--space-4); border: 1px dashed var(--color-rule-strong); border-radius: var(--radius);
  color: var(--color-ink-muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
}
.empty p { min-width: 0; overflow-wrap: anywhere; }
.empty-title { flex: 1 1 100%; font-size: 1rem; font-weight: 700; color: var(--color-ink); }
.empty-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.empty-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.error-text { color: var(--color-danger); font-weight: 600; }

/* Summary */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
  margin-top: var(--space-4); border-top: 1px solid var(--color-rule);
}
.stat { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-rule); min-width: 0; }
.stat dt { font-size: 0.875rem; font-weight: 600; color: var(--color-ink-muted); }
.stat .value { font-size: 2rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat .def { font-size: 0.8125rem; line-height: 1.35; color: var(--color-ink-muted); max-width: 28ch; }
#summary-note { margin-top: var(--space-3); }

.overview-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5) 2.5rem; margin-top: var(--space-6); align-items: start;
}
.chart { min-width: 0; }
figcaption h3 + p, .scenarios h3 + p { margin-top: var(--space-1); font-size: 0.9375rem; max-width: 60ch; }

/* Timeline: one stacked bar per period, one colour per record type */
.timeline-legend { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 0.875rem; }
.legend-key { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.legend-key::before { content: ""; width: 0.75rem; height: 0.75rem; flex: none; border-radius: 2px; background: var(--series, var(--color-ink-muted)); }
.timeline-series-detection { --series: var(--series-detection); }
.timeline-series-update { --series: var(--series-update); }
.timeline-series-manual { --series: var(--series-manual); }
.timeline-series-other { --series: var(--series-other); }
#hist-plot { min-width: 0; margin-top: var(--space-3); }
.timeline-svg { display: block; width: 100%; max-width: 100%; height: 12rem; background: var(--color-surface); border: 1px solid var(--color-rule); }
.timeline-svg [class*="timeline-series-"] { fill: var(--series); stroke: var(--color-surface); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.timeline-grid { stroke: var(--color-rule); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.timeline-label { font: 400 0.75rem/1 var(--font-sans); fill: var(--color-ink-muted); }
.timeline-hit { fill: transparent; cursor: pointer; }
.timeline-hit:hover, .timeline-hit[aria-pressed="true"], .timeline-hit[aria-current="true"], .timeline-hit.active { fill: var(--color-accent-wash); fill-opacity: 0.6; }
.timeline-hit:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; fill: var(--color-accent-wash); fill-opacity: 0.6; }
.axis { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-1); font: 0.75rem/1.3 var(--font-mono); color: var(--color-ink-muted); }
.axis span { min-width: 0; }
.chart-inspect { margin-top: var(--space-3); min-height: 3.25rem; padding: var(--space-2) var(--space-3); background: var(--color-sunken); border-radius: var(--radius); font-size: 0.9375rem; overflow-wrap: anywhere; }
.chart > .note { margin-top: var(--space-2); }
.counts { margin-top: var(--space-3); }
.counts summary { cursor: pointer; display: flex; align-items: center; min-height: var(--control-height); color: var(--color-accent); font-weight: 600; width: fit-content; }
.counts .table-wrap { margin-top: var(--space-2); max-height: 22rem; overflow-y: auto; }

.meter, .rank-bar { display: block; height: 0.5rem; min-width: 3rem; background: var(--color-sunken); border-radius: 2px; overflow: hidden; }
.meter > span, .rank-bar > span { display: block; height: 100%; background: var(--color-accent); }
.share { display: grid; grid-template-columns: minmax(3rem, 1fr) auto; gap: var(--space-2); align-items: center; }
.share .pct { font-size: 0.8125rem; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }
.rank-label { display: block; font-weight: 600; overflow-wrap: anywhere; }
.rank-description { display: block; margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.35; color: var(--color-ink-muted); }

/* Tables */
.table-wrap { max-width: 100%; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.table th {
  padding: var(--space-2) var(--space-3); text-align: left; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 600; color: var(--color-ink-muted);
  border-bottom: 1px solid var(--color-rule-strong);
}
.table td { padding: 0.625rem var(--space-3); border-bottom: 1px solid var(--color-rule); vertical-align: top; overflow-wrap: anywhere; }
.table .num { text-align: right; }
.table tbody tr:hover:not(.detail-row) td { background: var(--color-surface); }
.table td .sub { display: block; font-size: 0.8125rem; color: var(--color-ink-muted); }
.table td.actions { text-align: right; white-space: nowrap; }
.scn { font-weight: 600; }

.tag {
  display: inline-block; margin-left: var(--space-2); padding: 0 0.4rem;
  border: 1px solid var(--color-warn-rule); border-radius: 3px; background: var(--color-warn-wash); color: var(--color-warn);
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; vertical-align: 0.08em; white-space: nowrap;
}

.btn-link {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-2);
  border: 0; border-radius: var(--radius); background: transparent; color: var(--color-accent);
  font: 600 0.9375rem/1 var(--font-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em;
}
.btn-link:hover { background: var(--color-accent-wash); color: var(--color-accent-strong); }
.btn-link.scenario-pick { text-align: left; min-height: 0; padding: 0.125rem 0; text-decoration-thickness: 1px; font-weight: 600; overflow-wrap: anywhere; white-space: normal; line-height: 1.3; }
.btn-link.scenario-pick[aria-pressed="true"] { background: var(--color-accent-wash); }
.disclose::after {
  content: ""; width: 0.45rem; height: 0.45rem; margin-top: -0.2rem;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
  transition: transform 120ms ease-out;
}
.disclose[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 0.15rem; }

/* Detail disclosure */
.table tr.detail-row td { padding: 0 var(--space-3) var(--space-3); }
.detail { padding: var(--space-4); background: var(--color-sunken); min-width: 0; }
.detail > * + * { margin-top: var(--space-4); }
.detail h3 { margin-bottom: var(--space-2); }
.kv { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); gap: var(--space-1) var(--space-4); }
.kv dt { font-size: 0.875rem; font-weight: 600; color: var(--color-ink-muted); }
.kv dd { overflow-wrap: anywhere; }
.plain { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.plain li { overflow-wrap: anywhere; }
.events { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--color-rule-strong); }
.events > li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule-strong); min-width: 0; }
.events .kv { margin-top: var(--space-2); grid-template-columns: minmax(6rem, 12rem) minmax(0, 1fr); }
.events .kv dt { font-size: 0.8125rem; }

/* Pager */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pager-status { font-size: 0.9375rem; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.pager-buttons { display: flex; gap: var(--space-2); }

/* Dynamic status labels and record kinds */
.status-label, .record-kind {
  display: inline-flex; align-items: center; gap: var(--space-1); width: fit-content; max-width: 100%;
  padding: 0 0.5rem; border: 1px solid var(--color-neutral-rule); border-radius: var(--radius);
  background: var(--color-neutral-wash); color: var(--color-neutral);
  font-size: 0.8125rem; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere;
}
.tone-info { background: var(--color-info-wash); border-color: var(--color-info-rule); color: var(--color-info); }
.tone-warn { background: var(--color-warn-wash); border-color: var(--color-warn-rule); color: var(--color-warn); }
.tone-success { background: var(--color-success-wash); border-color: var(--color-success-rule); color: var(--color-success); }
.tone-neutral { background: var(--color-neutral-wash); border-color: var(--color-neutral-rule); color: var(--color-neutral); }

/* Briefing */
.briefing:not(:empty) { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-panel); display: grid; gap: var(--space-2); justify-items: start; }
.briefing-title { font-size: 1.375rem; letter-spacing: -0.01em; max-width: 40ch; }
.briefing-copy { max-width: 65ch; font-size: 1.0625rem; line-height: 1.55; overflow-wrap: anywhere; }
.briefing-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); }
.briefing-links a { display: inline-flex; align-items: center; min-height: var(--control-height); font-weight: 600; }
.briefing-links .btn { min-height: var(--control-height); }

/* Activity and protection rows */
.activity-title { display: block; font-weight: 700; overflow-wrap: anywhere; }
.activity-description { display: block; margin-top: 0.125rem; max-width: 60ch; font-size: 0.875rem; line-height: 1.4; color: var(--color-ink-muted); }
.source-location { display: block; font-size: 0.8125rem; color: var(--color-ink-muted); overflow-wrap: anywhere; }
.record-kind { margin-top: var(--space-1); }

/* Row explanation */
.explanation { display: grid; gap: var(--space-4); min-width: 0; }
.explanation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4) var(--space-5); }
.explanation-step { min-width: 0; margin: 0; padding-top: var(--space-2); border-top: 2px solid var(--color-rule-strong); }
.explanation > h3 { font-size: 1.0625rem; max-width: 60ch; }
.explanation-step h3, .explanation-step h4 { font-size: 0.9375rem; margin-bottom: var(--space-1); }
.explanation-step p, .explanation-step li { overflow-wrap: anywhere; }
.explanation-step ol, .explanation-step ul:not(.plain) { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-1); }
.technical-details { padding-top: var(--space-3); border-top: 1px solid var(--color-rule-strong); }
.technical-summary { cursor: pointer; display: flex; align-items: center; min-height: var(--control-height); width: fit-content; color: var(--color-accent); font-weight: 600; }
.technical-details[open] > .technical-summary { margin-bottom: var(--space-2); }

/* Protection summary */
.protection-breakdown { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3) var(--space-5); }
.protection-key { min-width: 0; padding-top: var(--space-2); border-top: 2px solid var(--color-rule-strong); font-size: 0.875rem; color: var(--color-ink-muted); overflow-wrap: anywhere; }
.protection-key strong, .protection-key .value { display: block; font-size: 1.25rem; line-height: 1.3; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.protection-key .meter, .protection-key .rank-bar { margin-top: var(--space-1); }
.protection-summary > p { max-width: 65ch; margin-bottom: var(--space-3); }

/* Log visibility */
.visibility-summary:not(:empty) { margin-top: var(--space-4); display: grid; gap: var(--space-4); }
.visibility-intro { max-width: 65ch; }
.source-title { display: block; font-weight: 700; overflow-wrap: anywhere; }
.source-description { display: block; font-size: 0.8125rem; color: var(--color-ink-muted); max-width: 60ch; overflow-wrap: anywhere; }
.source-progress { display: block; width: 100%; height: 0.5rem; background: var(--color-sunken); border-radius: 2px; overflow: hidden; }
.source-progress > span { display: block; height: 100%; background: var(--color-accent); }
progress.source-progress { appearance: none; border: 0; accent-color: var(--color-accent); }
progress.source-progress::-webkit-progress-bar { background: var(--color-sunken); }
progress.source-progress::-webkit-progress-value { background: var(--color-accent); }
progress.source-progress::-moz-progress-bar { background: var(--color-accent); }
#collection-body { margin-top: var(--space-4); }
.source-health { font-size: 0.875rem; line-height: 1.45; color: var(--color-ink-muted); max-width: 45ch; }

/* Guide */
.guide-heading { margin-top: var(--space-5); font-size: 1.125rem; }
.guide-types { display: grid; grid-template-columns: minmax(10rem, max-content) minmax(0, 65ch); gap: var(--space-3) var(--space-5); margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-rule); }
.guide-types dt { padding-top: 0.0625rem; }
.guide-types dd { overflow-wrap: anywhere; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.guide-item { min-width: 0; padding-top: var(--space-2); border-top: 2px solid var(--color-rule-strong); }
.guide-item h3 { margin-bottom: var(--space-1); }
.guide-item p { max-width: 65ch; overflow-wrap: anywhere; }
.guide-checks { margin: var(--space-3) 0 0; padding-left: 1.5rem; display: grid; gap: var(--space-2); max-width: 65ch; }
.guide-checks li { padding-left: var(--space-1); overflow-wrap: anywhere; }

/* Tablet and below */
@media (max-width: 62rem) {
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .field:first-child { grid-column: 1 / -1; }
  .filters #clear { justify-self: start; }
  .guide-types { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .guide-types dd { margin-bottom: var(--space-3); }
}

/* Nav becomes a compact top strip */
@media (max-width: 56rem) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-3); }
  .sidenav {
    top: 0; z-index: 10; margin: 0 calc(var(--space-3) * -1); padding: 0 var(--space-3);
    background: var(--color-paper); border-bottom: 1px solid var(--color-rule-strong);
  }
  .sidenav ul { display: flex; gap: var(--space-1); padding: var(--space-1) 0; overflow-x: auto; }
  .sidenav a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; font-size: 0.9375rem; }
  section { scroll-margin-top: 4rem; }
  main { padding-top: var(--space-4); }
  .topbar { padding: var(--space-3); gap: var(--space-2) var(--space-3); }
  .brand { flex: 1 1 100%; }
  .session { flex: 1 1 100%; }
}

/* Wide tables: give the time and the description room */
@media (min-width: 52.0625rem) {
  #alerts-body > tr:not(.detail-row) > td:nth-child(1) { width: 1%; white-space: nowrap; }
  #alerts-body > tr:not(.detail-row) > td:nth-child(2) { width: 38%; }
}

/* Tables become stacked records */
@media (max-width: 52rem) {
  .table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tbody tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-rule-strong); }
  .table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-2); padding: 0.1875rem 0; border: 0; text-align: left; }
  .table .num { text-align: left; }
  .table td[data-label]::before { content: attr(data-label); font-size: 0.8125rem; font-weight: 600; color: var(--color-ink-muted); padding-top: 0.15rem; }
  .table td:not([data-label]) { grid-template-columns: minmax(0, 1fr); }
  .table td.actions { text-align: left; padding-top: var(--space-2); }
  .table td.actions .btn-link { padding-left: 0; }
  .table tbody tr:hover:not(.detail-row) td { background: transparent; }
  .table tr.detail-row { padding: 0 0 var(--space-3); border-bottom: 1px solid var(--color-rule-strong); }
  .table tr.detail-row td { padding: 0; }
  .detail { padding: var(--space-3); }
  .share { grid-template-columns: minmax(2rem, 1fr) auto; }
}

/* Phone */
@media (max-width: 47.5rem) {
  .filters { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
  .filters #clear { grid-column: 1; justify-self: stretch; }
  .toolbar { width: 100%; }
  .toolbar .inline-field { flex: 1 1 100%; }
  .toolbar .inline-field select { flex: 1; width: 100%; }
  .toolbar .btn { flex: 1 1 0; }
  .kv, .events .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dd { margin-bottom: var(--space-2); }
  .stat .def { max-width: none; }
  .panel { padding: var(--space-4); }
  .pager-buttons { width: 100%; }
  .pager-buttons .btn { flex: 1; }
  .briefing:not(:empty) { padding: var(--space-3); }
  .timeline-svg { height: 10rem; }
  .test-toggle { width: 100%; }
}

/* Narrow phone: the nav is a static grid so every label stays one line and 44px tall */
@media (max-width: 30rem) {
  .sidenav { position: static; }
  .sidenav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .sidenav li:last-child { grid-column: 1 / -1; }
  .sidenav a { justify-content: center; text-align: center; padding: 0 var(--space-2); }
  section { scroll-margin-top: 1rem; }
}

@media (pointer: coarse) {
  .btn-small { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .disclose::after { transition: none; }
}