/* SectorTrace public portal: a dense, modern research desk. */

@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo Narrow'; src: url('/fonts/archivo-narrow-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Archivo Narrow'; src: url('/fonts/archivo-narrow-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Backgrounds */
  --bg-base:        #08111f;
  --bg-surface:     #101d2e;
  --bg-elevated:    #17283d;

  /* Accents */
  --accent-teal:    #21d4d0;
  --accent-amber:   #fbbf24;
  --accent-green:   #4ade80;
  --accent-red:     #fb7185;
  --accent-purple:  #a78bfa;

  /* Text */
  --text-primary:   #f4f8ff;
  --text-secondary: #b2c0d3;
  --text-muted:     #8293aa;

  /* Borders */
  --border-subtle:  #24364d;
  --border-accent:  #38516f;

  /* Semantic */
  --caveat-bg:      rgba(245, 158, 11, 0.08);
  --caveat-border:  rgba(245, 158, 11, 0.40);
  --unverified-bg:  repeating-linear-gradient(45deg,
                      rgba(245, 158, 11, 0.06), rgba(245, 158, 11, 0.06) 4px,
                      transparent 4px, transparent 12px);

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-12: 48px; --space-16: 64px;

  /* Radii */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;

  /* Glass */
  --glass-bg:     rgba(22, 27, 34, 0.72);
  --glass-blur:   blur(12px);
  --glass-border: 1px solid rgba(48, 54, 61, 0.60);

  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Space Grotesk", "Manrope", system-ui, sans-serif;
  --display: "Archivo Narrow", "Space Grotesk", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg-base); overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--space-3); }
h1 { font-family: var(--serif); font-size: clamp(32px, 5vw, 56px); font-weight: 700; letter-spacing: -0.045em; }
h2 { font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 var(--space-3); }
a { color: var(--accent-teal); text-decoration-color: rgba(56, 189, 248, 0.4); }
a:hover { text-decoration-color: currentColor; }
.muted { color: var(--text-secondary); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 13px; }
.spacer { flex: 1; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent-teal); color: #04121d; padding: var(--space-2) var(--space-4);
}
.skip:focus { left: var(--space-4); top: var(--space-2); }

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

/* --- top bar ------------------------------------------------------------- */

.topbar {
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 40;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; }
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent-teal), #4f8cff 52%, var(--accent-amber));
  box-shadow: 0 0 20px rgba(33, 212, 208, .25);
}
.brand-text { font-family: var(--serif); font-size: 18px; letter-spacing: -0.035em; font-weight: 500; }
.brand-text strong { font-weight: 750; }

.mainnav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.mainnav a {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: var(--text-secondary); text-decoration: none; font-size: 14px;
  border: 1px solid transparent;
}
.mainnav a:hover { color: var(--text-primary); background: var(--bg-elevated); }
.mainnav a[aria-current="page"] {
  color: var(--text-primary); background: var(--bg-elevated);
  border-color: var(--border-accent); font-weight: 600;
}
.lens-menu { position: relative; align-self: center; }
.lens-menu summary { cursor: pointer; list-style: none; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-accent); border-radius: var(--radius-md); color: var(--accent-amber); font-size: 13px; }
.lens-menu summary::-webkit-details-marker { display: none; }
.lens-menu-panel { position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: var(--space-4); width: min(760px, calc(100vw - 32px)); padding: var(--space-4); background: var(--bg-surface); border: 1px solid var(--border-accent); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.lens-menu-panel div { display: flex; flex-direction: column; gap: 4px; }
.lens-menu-panel strong, .eyebrow, .finding-kicker { font: 700 13px/1.2 var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--accent-amber); }
.lens-menu-panel a { color: var(--text-secondary); text-decoration: none; font-size: 13px; }
.lens-menu-panel a:hover { color: var(--text-primary); }

/* De-emphasised on purpose: the operator tools are for whoever runs the
   pipeline, not for the researchers this portal is built for. */
.adminlink {
  font-size: 12.5px; color: var(--text-muted);
  text-decoration: none; padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
}
.adminlink:hover { color: var(--text-secondary); border-color: var(--border-accent); }

/* "Find your council" (W-17): a navigator in the top bar, not a filter.
   Right-aligned with the admin links; the list drops below the input. */
.findcouncil { position: relative; margin-left: auto; }
.findcouncil input { min-width: 190px; }
.findcouncil .typeahead-list { min-width: 260px; right: 0; left: auto; }

/* --- filter bar ---------------------------------------------------------- */

.filterbar {
  display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 57px; z-index: 30;
}
.filter { display: flex; flex-direction: column; gap: var(--space-1); }
.filter label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.filter-note { font-size: 12.5px; color: var(--text-muted); }
.yearrange { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.yearrange input { width: 76px; }

input, select, button, textarea { font: inherit; color: inherit; }
input[type="search"], input[type="number"], input[type="text"], select {
  background: var(--bg-base); border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text-primary);
  min-width: 150px;
}

.typeahead { position: relative; }
.typeahead-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  margin: 0; padding: var(--space-1); list-style: none; max-height: 280px; overflow: auto;
  background: var(--bg-elevated); border: 1px solid var(--border-accent);
  border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.typeahead-list li { padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; }
.typeahead-list li:hover, .typeahead-list li[aria-selected="true"] { background: var(--bg-surface); }
.typeahead-list .target { color: var(--accent-amber); }

.btn {
  background: var(--bg-elevated); border: 1px solid var(--border-accent);
  color: var(--text-primary); border-radius: var(--radius-sm);
  padding: 6px 12px; cursor: pointer; font-size: 14px;
}
.btn:hover { border-color: var(--accent-teal); }
.btn.ghost { background: none; color: var(--text-secondary); }
.btn.primary { background: var(--accent-teal); border-color: var(--accent-teal); color: #04121d; font-weight: 600; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn.tiny { padding: 2px 8px; font-size: 12px; }

/* --- layout -------------------------------------------------------------- */

main { padding: var(--space-8) var(--space-6) var(--space-16); max-width: 1440px; margin: 0 auto; }
.route-lens { display: flex; align-items: center; gap: 10px; margin-bottom: calc(var(--space-4) * -1); color: var(--text-muted); }
.route-lens .eyebrow { color: var(--text-muted); font-size: 11px; }
.route-lens.lens-money .eyebrow, .route-lens.lens-accountability .eyebrow { color: var(--accent-amber); }
main:focus { outline: none; }
.section { margin-bottom: var(--space-12); }
.section > header { margin-bottom: var(--space-4); }
.section > header p { color: var(--text-secondary); max-width: 76ch; }
.section-action { margin: 0 0 var(--space-4); }

.panel {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: 0 18px 55px rgba(0, 0, 0, .12);
}
.grid { display: grid; gap: var(--space-4); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.snapshot-bands { display: grid; gap: var(--space-6); }
.snapshot-band { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
.snapshot-band:first-child { border-top: 0; padding-top: 0; }
.snapshot-band > header { margin-bottom: var(--space-3); }
.snapshot-band h3 { font-size: 15px; margin: 0; }
.snapshot-band header p { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: 13px; max-width: 68ch; }

/* --- hero ---------------------------------------------------------------- */

.hero { padding: var(--space-12) 0 var(--space-8); }
.hero h1 { max-width: 20ch; }
.hero .lede { font-size: 18px; color: var(--text-secondary); max-width: 68ch; }
.hero .lede strong { color: var(--text-primary); font-weight: 600; }
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.hero-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); color: var(--text-muted); font: 700 13px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.lens-badge, .timing-badge { display: inline-flex; align-items: center; width: fit-content; padding: 3px 8px; border: 1px solid var(--border-accent); border-radius: 999px; font: 700 12px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.lens-accountability, .timing-current { color: var(--accent-amber); border-color: var(--caveat-border); background: var(--caveat-bg); }
.timing-snapshot, .timing-historical { color: var(--text-secondary); background: var(--bg-elevated); }
.timing-live { color: var(--accent-teal); border-color: rgba(33,212,208,.4); }
.evidence-strip { margin: var(--space-6) 0 var(--space-8); padding: var(--space-4); border: 1px solid var(--caveat-border); border-top: 3px solid var(--accent-amber); background: linear-gradient(120deg, var(--bg-surface), var(--bg-elevated)); }
.evidence-strip-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; }
.evidence-strip h2 { margin: 4px 0 0; font-size: 20px; }
.evidence-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
.evidence-strip-grid div { padding: var(--space-3); border-left: 1px solid var(--border-accent); }
.evidence-strip-grid strong { display: block; font: 700 clamp(25px, 3vw, 36px)/1 var(--display); color: var(--text-primary); }
.evidence-strip-grid span { color: var(--text-secondary); font-size: 12px; }
.finding-block { margin: var(--space-4) 0; padding: var(--space-4); border-left: 3px solid var(--accent-amber); background: var(--caveat-bg); }
.finding-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.finding-kicker .timing-badge, .finding-kicker .badge { font-family: var(--sans); font-size: 11px; letter-spacing: .02em; text-transform: none; }
.finding-text { margin: var(--space-2) 0; color: var(--text-primary); font-weight: 600; max-width: 78ch; }
.finding-caveat, .finding-meta { margin: 0; color: var(--text-secondary); font-size: 13px; }
.finding-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }
.briefing-copy { padding: 4px 8px; font-size: 12px; }
.thin-evidence-control { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; }
.clipboard-fallback { position: fixed; left: -10000px; }
.read-first {
  margin-top: var(--space-6); max-width: 78ch;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-surface); padding: var(--space-3) var(--space-4);
}
.read-first summary { cursor: pointer; color: var(--accent-teal); font-weight: 650; }
.read-first p { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: 14px; }
.read-first p + p { margin-top: var(--space-2); }
.share-button { min-width: 126px; }
.section-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.section-links button { border: 1px solid var(--border-accent); border-radius: 999px; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 13px; padding: 5px 10px; }
.section-links button:hover, .section-links button:focus-visible { border-color: var(--accent-teal); color: var(--text-primary); }
.takeaway { display: flex; align-items: flex-start; gap: var(--space-3); max-width: 78ch; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border-left: 3px solid var(--accent-teal); border-radius: var(--radius-sm); }
.takeaway .badge { flex: 0 0 auto; margin-top: 2px; }
.takeaway p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.context-note { margin: var(--space-3) 0; max-width: 78ch; }
.context-note summary { cursor: pointer; color: var(--accent-teal); font-size: 13px; font-weight: 650; }
.context-note p { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: 13px; }

.explore-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.explore-card {
  min-height: 132px; display: flex; flex-direction: column; gap: var(--space-2);
  position: relative; padding: var(--space-5); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-primary);
  text-decoration: none; transition: border-color .15s, transform .15s, background .15s;
}
.explore-card:hover, .explore-card:focus-visible {
  border-color: var(--accent-teal); background: var(--bg-elevated); color: var(--text-primary);
  transform: translateY(-2px);
}
.explore-card-title { font-size: 17px; font-weight: 700; }
.explore-card-description { color: var(--text-secondary); font-size: 13.5px; max-width: 34ch; }
.explore-card-arrow { margin-top: auto; color: var(--accent-teal); font-size: 20px; line-height: 1; }

.status-key { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: calc(var(--space-2) * -1) 0 var(--space-4); }
.evidence-status-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: stretch; }
.status-panel { height: 100%; }
.status-panel h3 { margin-bottom: var(--space-2); }
.status-footnote { margin-top: var(--space-4); }
.source-details { margin-top: var(--space-3); }
.source-details summary, .chart-data summary { cursor: pointer; color: var(--accent-teal); font-size: 13px; font-weight: 650; }
.chart-data { margin-top: var(--space-5); }
.chart-data .tablecard { margin-top: var(--space-3); }

.statcard {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative; overflow: hidden;
}
.statcard::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent-teal); opacity: .85; }
.statcard .value {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
  background: linear-gradient(135deg, var(--accent-teal), var(--accent-amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statcard .value.plain { background: none; color: var(--text-primary); -webkit-text-fill-color: currentColor; }
.statcard .label { font-size: 13px; color: var(--text-secondary); margin-top: var(--space-1); }
.statcard .sub { font-size: 12px; color: var(--text-muted); margin-top: var(--space-1); }
.statcard > .badge { margin-top: var(--space-3); }
.statcard.unverified { background-image: var(--unverified-bg); }
.statcard-actions { margin-top: var(--space-3); }
.statcard-actions .share-button { min-width: 0; padding: 4px 8px; font-size: 12px; }
.evidence-summary-card { cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.evidence-summary-card:hover, .evidence-summary-card:focus-visible { transform: translateY(-2px); border-color: var(--accent-amber); }
.evidence-modal { width: min(960px, calc(100vw - 32px)); max-width: none; max-height: min(780px, calc(100vh - 32px)); padding: var(--space-6); color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border-accent); border-radius: var(--radius-lg); box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.evidence-modal::backdrop { background: rgba(3, 8, 16, .72); backdrop-filter: blur(3px); }
.evidence-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.evidence-modal-head h2 { margin-top: 4px; }
.evidence-modal .tablecard { margin-top: var(--space-3); }

/* --- caveats ------------------------------------------------------------- */

.caveat-badge {
  background: none; border: none; cursor: pointer; padding: 0 var(--space-1);
  color: var(--accent-amber); font-size: 13px; line-height: 1;
  vertical-align: middle;
}
.caveat-badge:hover { color: var(--text-primary); }
.caveat-body {
  display: block; margin-top: var(--space-2);
  background: var(--caveat-bg); border: 1px solid var(--caveat-border);
  border-radius: var(--radius-sm); padding: var(--space-3);
  font-size: 13px; color: var(--text-primary); max-width: 78ch;
}
.caveat-body[hidden] { display: none; }

/* A caveat that cannot be dismissed, for figures that are routinely
   misread. Pinned open, not a popover. */
.caveat-pinned {
  background: var(--caveat-bg); border-left: 3px solid var(--accent-amber);
  border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
  font-size: 14px; margin: var(--space-4) 0; max-width: 88ch;
}
.caveat-pinned strong { color: var(--accent-amber); }

.badge {
  display: inline-block; border-radius: var(--radius-sm); padding: 1px 7px;
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.02em;
  border: 1px solid transparent; vertical-align: middle;
}
.badge.target { background: rgba(245,158,11,0.15); color: var(--accent-amber); border-color: var(--caveat-border); }
.badge.unverified { background: rgba(245,158,11,0.12); color: var(--accent-amber); border-color: var(--caveat-border); }
.badge.good { background: rgba(52,211,153,0.12); color: var(--accent-green); }
.badge.bad { background: rgba(248,113,113,0.12); color: var(--accent-red); }
.badge.neutral { background: var(--bg-elevated); color: var(--text-secondary); border-color: var(--border-accent); }

/* --- charts -------------------------------------------------------------- */

.chartwrap { position: relative; min-height: 320px; }

/* Always shown rather than revealed on hover: a control that only exists for
   a mouse is a control a touch reader does not have. Faded until wanted. */
.chart-save {
  position: absolute; top: 0; right: 0; z-index: 5;
  opacity: 0.45; transition: opacity 0.15s;
}
.chartwrap:hover .chart-save, .chart-save:focus-visible { opacity: 1; }
.chart { width: 100%; height: 380px; }
.chart.tall { height: 520px; }
.chart.short { height: 260px; }

.chart-empty, .chart-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); min-height: 260px; text-align: center;
  border: 1px dashed var(--border-accent); border-radius: var(--radius-md);
  color: var(--text-secondary); padding: var(--space-6);
}
.chart-error { border-color: rgba(248,113,113,0.4); color: var(--accent-red); }
.chart-empty code {
  background: var(--bg-base); border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm); padding: 2px 8px; color: var(--accent-teal);
}

.shimmer {
  min-height: 260px; border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--bg-surface) 20%, var(--bg-elevated) 40%, var(--bg-surface) 60%);
  background-size: 250% 100%; animation: shimmer 1.6s linear infinite;
}
.loading-state { display: grid; gap: var(--space-3); padding: var(--space-4) 0; }
.loading-state p { margin: 0; }
@keyframes shimmer { to { background-position: -250% 0; } }
@media (prefers-reduced-motion: reduce) { .shimmer { animation: none; } }

/* --- provenance ---------------------------------------------------------- */

.provenance { margin-top: var(--space-4); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.provenance summary { cursor: pointer; font-size: 12.5px; color: var(--text-muted); }
.provenance summary:hover { color: var(--text-secondary); }
.provenance dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: var(--space-3) 0 0; font-size: 12.5px; }
.provenance dt { color: var(--text-muted); }
.provenance dd { margin: 0; overflow-wrap: anywhere; }
.provenance .hash { font-family: var(--mono); }

/* A licence that is not a plain open one gets the caveat colour, because that
   is what it is: a condition on reuse that a reader who skims will miss. */
.provenance .licence-caution { color: var(--accent-amber); margin-top: var(--space-1); }

/* --- tables -------------------------------------------------------------- */

.tablecard { margin-top: var(--space-4); }
.tablecard .toolbar { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); flex-wrap: wrap; }
.tablecard .toolbar h3 { margin: 0; }

/* The row count, and the one case worth colouring: rows the page was not sent.
   "1,000 of 98,636" in amber is the honest half of a table that stops. */
.rowcount { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rowcount.truncated { color: var(--accent-amber); }

.tabulator { background: var(--bg-base); border-color: var(--border-subtle); font-size: 13px; }
.tabulator .tabulator-header { background: var(--bg-elevated); border-color: var(--border-subtle); }
.tabulator-row.unverified-row { background-image: var(--unverified-bg); }
.tabulator .tabulator-header-filter input {
  min-width: 0; width: 100%; padding: 2px 6px; font-size: 12px;
}
.tabulator .tabulator-footer { background: var(--bg-elevated); border-color: var(--border-subtle); }

/* --- map ----------------------------------------------------------------- */

.maplayout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.maplayout > * { min-width: 0; }
@media (max-width: 1100px) { .maplayout { grid-template-columns: 1fr; } }
.map { width: 100%; height: 620px; }
.map-workspace { min-width: 0; max-width: 100%; border: 1px solid var(--border-accent); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-base); box-shadow: 0 20px 55px rgba(0, 0, 0, .22); }
.map-canvas { width: 100%; min-width: 0; height: 620px; }
.map-preview { border-top: 1px solid var(--border-subtle); background: var(--bg-surface); padding: var(--space-4); }
.map-preview h3 { margin-bottom: var(--space-1); }
.map-preview-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.maplibregl-popup-content { font: 13px/1.45 var(--sans); color: #142033; padding: 12px 14px; border-radius: 8px; }
.maplibregl-popup-content strong { display: block; font-family: var(--serif); font-size: 15px; margin-bottom: 3px; }
.maplibregl-ctrl-group { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.maplibregl-ctrl button:focus-visible { outline: 3px solid var(--accent-teal); outline-offset: -3px; }
.map-cluster { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: #102a43; color: white; border: 2px solid var(--accent-amber); font: 700 13px/1 var(--sans); box-shadow: 0 5px 15px rgba(8, 17, 31, .35); }
.map path { stroke: var(--bg-base); stroke-width: 0.4; cursor: pointer; }
.map path:hover { stroke: var(--text-primary); stroke-width: 1.2; }
.map.cqc-location-map path { fill: var(--bg-elevated) !important; stroke: var(--border-accent); stroke-width: .7; }
.map.cqc-location-map .overlay circle { r: 4.5; }
.map path.nodata { fill: var(--bg-elevated); }
.maptip {
  position: fixed; pointer-events: none; z-index: 60; max-width: 280px;
  background: rgba(13, 17, 23, 0.94); border: 1px solid var(--accent-teal);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: 13px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
.legend { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--text-secondary); margin-top: var(--space-2); }
.legend-scale { height: 10px; flex: 1; border-radius: 999px; border: 1px solid var(--border-subtle); }

.metrictabs { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-3); }
.metrictabs button { border-radius: 999px; }
.metrictabs button[aria-pressed="true"] { background: var(--accent-teal); border-color: var(--accent-teal); color: #04121d; font-weight: 600; }

/* An offer to go and check, not a claim that the register agrees. Styled as a
   quiet aside rather than as a badge for that reason. */
.registers { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: baseline; }
.registerlink { white-space: nowrap; }

/* --- authority page -------------------------------------------------------- */

/* W-12: which evidence kinds the warehouse holds for one authority. A chip
   per kind, filled when rows exist; the empty state must read as "not
   collected" rather than as a zero figure, which is what the pinned caveat
   next to the row says in prose. */
.coverage-ticks { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.coverage-tick {
  display: inline-flex; align-items: baseline; gap: 6px;
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.coverage-tick.yes { border-color: var(--border-accent); color: var(--text-primary); }
.coverage-tick.yes .tick-mark { color: var(--accent-green); }
.coverage-tick .tick-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* W-27: grant and budget sit side by side on the same page and are never
   combined into one axis — the caveat pinned above both is why the section
   exists. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }

/* --- compare page (W-11) ---------------------------------------------------- */

/* The selection: a chip per chosen entity, removable, with the URL as the
   state. The chips and the pickers sit in one panel so the reader sees the
   selection and the way to change it together. */
.compare-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 12.5px;
  border: 1px solid var(--border-accent); color: var(--text-primary);
  background: var(--bg-surface);
}
.chip-remove {
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 50%;
}
.chip-remove:hover { color: var(--accent-red); background: var(--bg-elevated); }
.compare-pickers { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* --- geography layers (W-19) ------------------------------------------------ */

/* Each overlay layer is a checkbox with its caveat pinned underneath it the
   moment it is checked — a layer never appears without the warning that
   governs it, which is the finding's own test. */
.layerpanel { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.layer-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--text-secondary); width: fit-content;
}
.layer-toggle input { accent-color: var(--accent-teal); }
.layer-caveat { margin-left: 24px; }

/* --- timeline ------------------------------------------------------------ */

.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-6); border-left: 1px solid var(--border-accent); }
.timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-4); }
.timeline li::before {
  content: ""; position: absolute; left: calc(var(--space-4) * -1 - 5px); top: 7px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-teal);
  box-shadow: 0 0 0 3px var(--bg-base);
}
.timeline li.contract_award::before { background: var(--accent-teal); }
.timeline li.tribunal::before { background: var(--accent-red); }
.timeline li.charity_accounts::before { background: var(--accent-green); }
.timeline li.nhs_job_advert::before { background: var(--accent-amber); }
.timeline .when { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.timeline .what { font-weight: 600; }
.timeline .detail { color: var(--text-secondary); font-size: 13.5px; }

/* --- pipeline status ----------------------------------------------------- */

.sourcestrip { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sourcechip {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px;
}
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
  .dot.green { background: var(--accent-green); }
  .dot.amber { background: var(--accent-amber); }

  /* The overview's flow bars (verification funnel and freshness). A plain
   * div track rather than a chart on purpose: a zero renders as the text
   * "0" next to an empty track, which an empty canvas would not say. */
  .flowrows { display: grid; gap: var(--space-3); }
  .flowrow { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr;
    gap: var(--space-3); align-items: center; }
  .flowlabel { display: flex; justify-content: space-between; gap: var(--space-2);
    font-size: 13.5px; }
  .flowvalue { color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .flowbar { height: 10px; border-radius: 5px; background: var(--bg-elevated);
    border: 1px solid var(--border-subtle); overflow: hidden; }
  .flowbar-fill { height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #1f6feb, #38bdf8); }
  .flowbar-fill.never { background: var(--border-subtle); }
  @media (max-width: 720px) {
    .flowrow { grid-template-columns: 1fr; gap: var(--space-1); }
  }
  
.sitefoot {
  border-top: 1px solid var(--border-subtle); padding: var(--space-8) var(--space-6);
  color: var(--text-secondary); font-size: 13px; max-width: 1440px; margin: 0 auto;
}
.sitefoot-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.sitefoot-nav a { color: var(--text-primary); text-decoration: none; font-weight: 600; }
.sitefoot-nav a:hover { color: var(--accent-teal); }

/* Bootstrap is the layout foundation; these tokens keep its components in
 * the portal's evidence palette. The application rules below remain the
 * authority for the intentionally distinctive SectorTrace cards and tables. */
:root {
  --bs-body-bg: var(--bg-base);
  --bs-body-color: var(--text-primary);
  --bs-secondary-color: var(--text-secondary);
  --bs-border-color: var(--border-subtle);
  --bs-primary: var(--accent-teal);
  --bs-warning: var(--accent-amber);
  --bs-danger: var(--accent-red);
  --bs-success: var(--accent-green);
  --bs-font-sans-serif: var(--sans);
  --bs-border-radius: var(--radius-md);
  --bs-link-color: var(--accent-teal);
}

html[data-bs-theme="light"] {
  --bg-base: #f4f7fb; --bg-surface: #ffffff; --bg-elevated: #e8eef7;
  --text-primary: #132238; --text-secondary: #455a73; --text-muted: #5e7188;
  --border-subtle: #d3dfed; --border-accent: #aebfd3;
  --glass-bg: rgba(255, 255, 255, .88); --glass-border: 1px solid rgba(184,197,208,.8);
  --caveat-bg: rgba(245,158,11,.10); --unverified-bg: repeating-linear-gradient(45deg, rgba(245,158,11,.10), rgba(245,158,11,.10) 4px, transparent 4px, transparent 12px);
}

html[data-bs-theme="light"] .topbar { background: rgba(244,247,251,.92); }
.topbar { min-height: 64px; flex-wrap: nowrap; }
.portal-nav { display: flex; flex: 1 1 auto; min-width: 0; }
.portal-nav .offcanvas-body { display: flex; align-items: center; padding: 0; }
.mainnav { align-items: center; min-width: 0; }
.nav-tools { display: flex; gap: var(--space-1); margin-left: var(--space-3); padding-left: var(--space-3); border-left: 1px solid var(--border-subtle); }
.nav-tools a { color: var(--text-muted); font-size: 12.5px; }
.menu-toggle { display: none; }
.theme-control { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.theme-control select { min-width: 0; width: auto; padding: 5px 24px 5px 7px; font-size: 12px; }
.search-icon { color: var(--accent-teal); font-size: 20px; line-height: 1; }
.findcouncil { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.findcouncil input { min-width: 175px; }

.filterbar.offcanvas { z-index: 45; }
.filterbar.offcanvas:not(.is-mobile-filter) { position: sticky; top: 64px; visibility: visible; transform: none; width: auto; height: auto; max-width: none; flex-direction: row; }
.filterbar-body { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; padding: var(--space-3) var(--space-6); }
.filterbar .offcanvas-header { display: none; }
.filters-toggle { display: none; }
.filter-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1440px; margin: 16px auto -16px; padding: 0 24px; }
.filter-summary-label { color: var(--text-muted); font-size: 12px; }
.filter-chip, .filter-clear { border: 1px solid var(--border-accent); border-radius: 999px; background: var(--bg-elevated); color: var(--text-primary); padding: 4px 10px; font-size: 12px; cursor: pointer; }
.filter-clear { background: transparent; color: var(--accent-teal); border-color: transparent; }

@media (max-width: 1100px) {
  .topbar { gap: var(--space-3); }
  .mainnav a { padding-left: 8px; padding-right: 8px; }
  .findcouncil input { min-width: 145px; }
}

@media (max-width: 720px) {
  .topbar { min-height: 58px; padding: 8px 16px; }
  .menu-toggle { display: block; order: 4; }
  .portal-nav { position: fixed; flex: 0 0 auto; max-width: 100vw; }
  /* Bootstrap parks a closed offcanvas one viewport to the right. That
     transformed box still increases document scrollWidth in Chromium, so
     remove it from layout until Bootstrap marks it open. */
  .portal-nav:not(.show) { display: none; }
  .portal-nav .offcanvas-body { display: block; padding: 16px; }
  .portal-nav .mainnav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .portal-nav .mainnav a { padding: 10px 12px; font-size: 15px; }
  .portal-nav .lens-menu { order: 0; }
  .portal-nav .lens-menu-panel { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 100%; margin: 4px 0 8px; box-shadow: none; }
  .portal-nav .nav-tools { display: block; margin: 16px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border-subtle); }
  .portal-nav .nav-tools a { display: block; }
  .findcouncil { order: 3; margin-left: auto; }
  .findcouncil input { min-width: 0; width: min(35vw, 150px); }
  .theme-control { display: none; }
  .filterbar.offcanvas.is-mobile-filter { position: fixed; top: 0; right: 0; bottom: 0; visibility: hidden; transform: translateX(100%); width: min(92vw, 380px); height: 100%; flex-direction: column; }
  .filterbar.offcanvas.is-mobile-filter:not(.show) { display: none; }
  .filterbar.offcanvas.is-mobile-filter.show { visibility: visible; transform: none; }
  .filterbar .offcanvas-header { display: flex; }
  .filterbar-body { display: flex; flex-direction: column; align-items: stretch; padding: 0 24px 24px; }
  .filterbar-body .filter { width: 100%; }
  .filterbar-body input { width: 100%; }
  .filters-toggle { display: inline-flex; margin: 12px 16px 0 auto; }
  .filter-summary { margin: 12px 0 -12px; padding: 0 16px; }
  main { padding-top: 24px; }
  .evidence-strip-grid { grid-template-columns: 1fr 1fr; }
  .evidence-strip-head { flex-direction: column; }
}

@media (min-width: 721px) and (max-width: 900px) {
  .topbar { min-height: 58px; padding: 8px 16px; }
  .menu-toggle { display: block; order: 4; }
  .portal-nav { position: fixed; flex: 0 0 auto; max-width: 100vw; }
  .portal-nav:not(.show) { display: none; }
  .portal-nav .offcanvas-body { display: block; padding: 16px; }
  .portal-nav .mainnav { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
  .portal-nav .mainnav a { padding: 10px 12px; font-size: 15px; }
  .portal-nav .lens-menu-panel { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 100%; margin: 4px 0 8px; box-shadow: none; }
  .portal-nav .nav-tools { display: block; margin: 16px 0 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border-subtle); }
  .portal-nav .nav-tools a { display: block; }
  .findcouncil { order: 3; margin-left: auto; }
  .findcouncil input { min-width: 0; width: min(24vw, 170px); }
  .theme-control { display: none; }
}

@media (max-width: 340px) {
  .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .brand-text { font-size: 16px; }
  .findcouncil input { width: 88px; }
  .menu-toggle { padding-left: 6px; padding-right: 6px; }
}

.busybar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; overflow: hidden; contain: paint; }
.busybar-run { width: 40%; height: 100%; background: var(--accent-teal); animation: busyslide 1.1s ease-in-out infinite; }
@keyframes busyslide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) { .busybar-run { animation: none; width: 100%; opacity: 0.5; } }

@media (max-width: 720px) {
  .topbar { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .filterbar { top: 0; position: static; padding: var(--space-3) var(--space-4); }
  main { padding: var(--space-6) var(--space-4) var(--space-12); }
  .hero { padding-top: var(--space-6); }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }
  .explore-grid, .evidence-status-grid { grid-template-columns: 1fr; }
  .explore-card { min-height: 112px; }
  .chart { height: 300px; }
  .map, .map-canvas { height: 420px; }
}

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

/* No JavaScript. The page is rendered entirely from /api/v1/, so without it
 * the reader gets chrome and nothing else -- on a site whose whole purpose is
 * to be citable. This says where the evidence actually is. */
.noscript {
  max-width: 70ch; margin: 0 auto; padding: var(--space-8) var(--space-6);
  color: var(--text-secondary); font-size: 14.5px; line-height: 1.6;
}
.noscript h1 { color: var(--text-primary); font-size: 20px; margin: 0 0 var(--space-4); }
/* --space-6, not --space-5: there is no --space-5 token, and an undefined
 * custom property makes the whole declaration invalid, so this list had no
 * indent at all. Found while adding the API page's list beside it. */
.noscript ul { padding-left: var(--space-6); }
.noscript li { margin-bottom: var(--space-2); }
.noscript code { font-family: var(--mono); color: var(--accent-teal); }
.noscript strong { color: var(--accent-amber); }

/* The API documentation at /api.
 *
 * A document rather than an application: no script on that page at all, so
 * everything here is layout for prose, and it reuses the portal's tokens so
 * the two do not look like different sites. Measure is capped at ~78ch —
 * these are paragraphs a researcher reads, not a dashboard they scan. */
.apidoc { max-width: 900px; }
.apidoc .lede { font-size: 17px; color: var(--text-secondary); max-width: 72ch; }
.apidoc p, .apidoc li { max-width: 78ch; }
.apidoc h1 { margin-bottom: var(--space-4); }
.apisection { margin: var(--space-12) 0 0; }
.apisection > h2 {
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle);
}
.apisection > ul { padding-left: var(--space-6); color: var(--text-secondary); }
.apisection > ul li { margin-bottom: var(--space-2); }

.apiroute {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-surface); padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}
.apiroute h3 { margin-bottom: var(--space-2); font-size: 15px; }
.apiroute h3 code { font-size: 15px; color: var(--text-primary); }
.apiroute code { font-family: var(--mono); font-size: 13px; color: var(--accent-teal); }
.apiroute p { color: var(--text-secondary); }

.params { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-3); }
.params th, .params td {
  text-align: left; padding: 6px 10px 6px 0; vertical-align: top;
  border-bottom: 1px solid var(--border-subtle); font-size: 13.5px;
}
.params th { color: var(--text-muted); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em; }
.params td:first-child { white-space: nowrap; width: 1%; padding-right: var(--space-4); }

/* What we can say — the claims index (Phase 17).
 *
 * A claim is a statement, so it is set as a quotation rather than as data:
 * the blockquote is the claim, the citations list is what it rests on, and
 * the caveats underneath are the lines that govern it. Nothing here is
 * computed, and the page's job is to make that visible — the reader should
 * see at a glance which parts of the card are the campaign's words and which
 * are the evidence rows behind them. */
.claim {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--bg-surface); padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}
.claim-text {
  margin: 0; padding: 0 0 var(--space-2) var(--space-3);
  border-left: 3px solid var(--accent-teal);
  font-size: 17px; line-height: 1.5; color: var(--text-primary);
}
.claim-caveats { margin: var(--space-2) 0; }
.claim-caveats .caveat-pinned { margin-bottom: var(--space-2); }
.claim-citations { margin-top: var(--space-3); }
.claim-citations h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin: 0 0 var(--space-2);
}
.claim-citations ul { list-style: none; margin: 0; padding: 0; }
.claim-citations li { padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); }
.claim-citations li:first-child { border-top: none; }
.citation-unresolved {
  color: var(--accent-red); font-family: var(--mono); font-size: 12.5px;
  word-break: break-all;
}

/* Coverage is deliberately prose-first: it explains the boundary around the
   evidence before showing recency. The status terms are not controls, so they
   read as a compact reference list on a phone as well as on a wide display. */
.coverage-statuses { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.coverage-status { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); padding: var(--space-3); }
.coverage-status h3 { margin-bottom: var(--space-1); }
.coverage-status p { margin: 0; color: var(--text-secondary); font-size: 13px; }
.freshness-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-3); }
.freshness-item { border-left: 3px solid var(--accent-teal); background: var(--bg-surface); padding: var(--space-3) var(--space-4); }
.freshness-item .small { display: block; color: var(--text-secondary); }

/* Print.
 *
 * This evidence gets printed and carried into rooms, and the failure this
 * guards against is specific: a figure arriving on paper without the caveat
 * that governs it. So caveat bodies are forced open regardless of the
 * disclosure state they were left in on screen, provenance drawers print
 * expanded, and link targets are written out -- a citation whose URL only
 * existed as an href is not a citation once it is on paper.
 *
 * Backgrounds are dropped rather than fought with: the screen palette is dark
 * by design and printing it wastes toner and reads worse.
 */
@media print {
  :root {
    --bg-base: #fff; --bg-surface: #fff; --bg-elevated: #fff;
    --text-primary: #000; --text-secondary: #1a1a1a; --text-muted: #333;
    --border-subtle: #bbb; --border-accent: #888;
    --caveat-bg: transparent; --caveat-border: #000; --unverified-bg: none;
  }
  body { background: #fff; color: #000; }

  /* Navigation, filters and the busy indicator are controls, not content. */
  .topbar, .filterbar, .busybar, .skip, .adminlink, .btn { display: none !important; }

  main { padding: 0; max-width: none; }
  .panel { border: 1px solid #bbb; break-inside: avoid; page-break-inside: avoid; }

  /* The point of the whole block: a caveat that was collapsed on screen is
   * still the caveat that belongs to the number above it. */
  .caveat-body[hidden] { display: block !important; }
  .caveat-badge { display: none; }
  .caveat-pinned { border: 1px solid #000; }
  .provenance[open] > *, .provenance > * { display: revert; }
  .provenance summary { list-style: none; font-weight: 600; color: #000; }

  /* A table's search boxes and page buttons are controls. Its row counter is
     not: "showing 1-25 of 98,636" is the fact that the printed page is a
     fraction of the corpus, which is exactly what must survive printing. */
  .tabulator-header-filter,
  .tabulator-paginator > button,
  .tabulator-paginator > .tabulator-pages,
  .tabulator-paginator > select { display: none !important; }

  /* A link is only a citation on paper if its target is on the paper. */
  .provenance a[href]::after,
  .sitefoot a[href]::after { content: " (" attr(href) ")"; word-break: break-all; }

  /* Charts are canvas and print as an opaque block; the table or the figures
   * beside them carry the same values, and the provenance drawer names the
   * source either way. */
  .chart, .map { display: none; }
  .chart-empty { display: block; border: 1px dashed #888; }
}