/* ═══════════════════════════════════════════════════════════
   Wiki Economics — Editorial Design System
   Aesthetic: Research publication meets data journalism
   ═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Framework caps the whole page (body, header, main, TOC) at this width
     and centers it, which wastes most of the screen on wide monitors.
     Let the page use the full viewport instead — #observablehq-center's own
     margin still keeps sensible breathing room on the sides. */
  --observablehq-max-width: 100vw;

  /* System font stacks — no network fetch, no font-swap layout shift.
     Chosen to echo the IBM Plex family's proportions: a humanist sans,
     an old-style serif, and a code-native mono. */
  --wk-serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --wk-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wk-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* warm palette */
  --wk-teal: #3d9b82;
  --wk-coral: #d45d47;
  --wk-blue: #5b8cbf;
  --wk-amber: #c99a2e;
  --wk-lavender: #8b7ec0;

  --wk-radius: 6px;
  --wk-radius-lg: 10px;
  --wk-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --wk-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --wk-transition: 0.2s ease;
}

/* dark mode tokens (Observable default is dark with near-midnight) */
@media (prefers-color-scheme: dark) {
  :root {
    --wk-surface: #171b22;
    --wk-surface-raised: #1e222b;
    --wk-border: rgba(255,255,255,0.07);
    --wk-border-accent: rgba(255,255,255,0.12);
    --wk-text-primary: #e2ddd3;
    --wk-text-secondary: #9e9889;
    --wk-text-tertiary: #8d8880;
    --wk-shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
    --wk-shadow-md: 0 2px 10px rgba(0,0,0,0.3);
    --wk-bar-bg: rgba(17,19,24,0.88);
  }
}

/* light mode tokens */
@media (prefers-color-scheme: light) {
  :root {
    --wk-surface: #ffffff;
    --wk-surface-raised: #f7f5f0;
    --wk-border: rgba(0,0,0,0.08);
    --wk-border-accent: rgba(0,0,0,0.22);
    --wk-text-primary: #1c1c1e;
    --wk-text-secondary: #636360;
    --wk-text-tertiary: #706e6b;
    --wk-blue: #3674a8;
    --wk-bar-bg: rgba(248,246,241,0.92);
  }
}

/* force dark tokens when Observable uses near-midnight theme */
[data-theme="dark"], .observablehq--dark {
  --wk-surface: #171b22;
  --wk-surface-raised: #1e222b;
  --wk-border: rgba(255,255,255,0.07);
  --wk-border-accent: rgba(255,255,255,0.12);
  --wk-text-primary: #e2ddd3;
  --wk-text-secondary: #9e9889;
  --wk-text-tertiary: #8d8880;
  --wk-shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
  --wk-shadow-md: 0 2px 10px rgba(0,0,0,0.3);
  --wk-bar-bg: rgba(17,19,24,0.88);
  --wk-blue: #5b8cbf;
}

/* ── Manual theme overrides (for theme toggle) ────────── */

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-foreground: #e0e0e0;
  --theme-background: #15171e;
  --theme-foreground-muted: color-mix(in srgb, #e0e0e0 60%, #15171e);
  --theme-foreground-faint: color-mix(in srgb, #e0e0e0 50%, #15171e);
  --theme-foreground-faintest: color-mix(in srgb, #e0e0e0 14%, #15171e);
  --theme-foreground-fainter: color-mix(in srgb, #e0e0e0 30%, #15171e);
  --theme-foreground-focus: #5b8ff9;
  --theme-background-alt: color-mix(in srgb, #e0e0e0 4%, #15171e);
}

html[data-theme="light"] {
  color-scheme: light;
  --theme-foreground: #1b1e23;
  --theme-background: #ffffff;
  --theme-foreground-muted: color-mix(in srgb, #1b1e23 60%, #ffffff);
  --theme-foreground-faint: color-mix(in srgb, #1b1e23 50%, #ffffff);
  --theme-foreground-faintest: color-mix(in srgb, #1b1e23 14%, #ffffff);
  --theme-foreground-fainter: color-mix(in srgb, #1b1e23 30%, #ffffff);
  --theme-foreground-focus: #3b5fc0;
  --theme-background-alt: color-mix(in srgb, #1b1e23 4%, #ffffff);
  --wk-surface: #ffffff;
  --wk-surface-raised: #f7f5f0;
  --wk-border: rgba(0,0,0,0.08);
  --wk-border-accent: rgba(0,0,0,0.22);
  --wk-text-primary: #1c1c1e;
  --wk-text-secondary: #636360;
  --wk-text-tertiary: #706e6b;
  --wk-blue: #3674a8;
  --wk-bar-bg: rgba(248,246,241,0.92);
  --wk-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --wk-shadow-md: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Sticky footer ───────────────────────────────────────
   Framework's default layout only approximates a sticky footer: it gives
   #observablehq-main a min-height of `100vh - 20rem` and hopes that's
   roughly the height of the header/footer chrome. On short pages (the
   short dashboards such as Edit Variation and Legal) that heuristic falls short on
   taller viewports, leaving the footer stranded mid-page with blank
   space beneath it instead of pinned to the bottom of the screen. Turn
   body into a real flex column so the footer always lands at the
   viewport's bottom edge, and only gets pushed further down once page
   content actually needs the room. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
#observablehq-center {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#observablehq-main {
  flex: 1;
  min-height: 0;
}
#observablehq-footer {
  margin-top: 4rem;
  flex-shrink: 0;
}
/* Framework's own margin: 1rem auto (for #observablehq-main/header/footer)
   sets auto side-margins meant to center a block-level element under the
   old max-width layout. On a flex item, auto cross-axis margins disable
   align-items: stretch and shrink the item to its content width instead —
   collapsing #observablehq-main to a sliver. Neutralize the side margins;
   #observablehq-center's own margin already provides the side gutter. */
#observablehq-main,
#observablehq-header,
#observablehq-footer {
  margin-left: 0;
  margin-right: 0;
}

/* ── Remove Observable's max-width constraints ──────────── */

#observablehq-main p,
#observablehq-main table,
#observablehq-main figure,
#observablehq-main figcaption,
#observablehq-main h1,
#observablehq-main h2,
#observablehq-main h3,
#observablehq-main h4,
#observablehq-main h5,
#observablehq-main h6,
#observablehq-main blockquote,
#observablehq-main ol,
#observablehq-main ul,
#observablehq-main .katex-display,
#observablehq-main .note,
#observablehq-main .warning {
  max-width: none;
}

/* ── Typography ─────────────────────────────────────────── */

#observablehq-main h1 {
  font-family: var(--wk-serif);
  font-weight: 500;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.25rem;
  font-optical-sizing: auto;
}

#observablehq-main h2 {
  font-family: var(--wk-serif);
  font-weight: 450;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.6rem;
}

#observablehq-main h3 {
  font-family: var(--wk-sans);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  margin-top: 0;
  margin-bottom: 0.5rem;
}

#observablehq-main p,
#observablehq-main li,
#observablehq-main td {
  font-family: var(--wk-sans);
}

/* ── Page intro ─────────────────────────────────────────── */

.page-intro {
  font-family: var(--wk-serif);
  font-size: 1.05rem;
  font-weight: 350;
  font-style: italic;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  max-width: none;
  line-height: 1.65;
  margin: -0.25rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wk-border, var(--theme-foreground-faintest));
}

/* ── Portfolio homepage ─────────────────────────────────── */

.portfolio-hero {
  margin: -1rem -1rem 2.5rem;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 5vw, 5rem) 2.25rem;
  background:
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--wk-teal) 22%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--wk-blue) 8%, var(--theme-background)), var(--theme-background) 58%);
  border-bottom: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
}

.portfolio-eyebrow,
.portfolio-scope-label {
  font-family: var(--wk-mono);
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.portfolio-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  margin-top: 1.2rem;
}

#observablehq-main .portfolio-hero h1 {
  font-size: clamp(3rem, 7vw, 6.8rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
  margin: 0;
  max-width: 10ch;
}

.portfolio-hero h1 em {
  color: var(--wk-blue);
  font-weight: 450;
}

.portfolio-deck {
  max-width: 64ch !important;
  font-family: var(--wk-serif) !important;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  margin: 1.5rem 0 0;
}

.portfolio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.portfolio-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0.65rem 1rem;
  border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-radius: 999px;
  font: 600 0.78rem/1 var(--wk-sans);
  text-decoration: none !important;
}

.portfolio-action.primary {
  color: #fff;
  border-color: var(--wk-blue);
  background: var(--wk-blue);
}

.portfolio-scope {
  border-top: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  padding-top: 1rem;
}

.portfolio-code-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0 1rem;
}

.portfolio-code-rail span {
  min-width: 2.2rem;
  padding: 0.24rem 0.42rem;
  text-align: center;
  font: 600 0.68rem/1 var(--wk-mono);
  border: 1px solid var(--wk-border, var(--theme-foreground-faintest));
  background: var(--wk-surface, var(--theme-background));
}

.portfolio-scope p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
}

.portfolio-ledger,
.portfolio-figure,
.portfolio-explore,
.portfolio-wikis {
  margin: 0 0 3rem;
}

.portfolio-section-heading {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 1.1rem;
}

.portfolio-section-heading > span {
  padding-top: 0.25rem;
  color: var(--wk-coral);
  font: 600 0.68rem/1 var(--wk-mono);
}

.portfolio-section-heading h2,
.portfolio-section-heading p {
  margin: 0;
}

.portfolio-section-heading p {
  margin-top: 0.2rem;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  font-size: 0.8rem;
}

.portfolio-ledger-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) repeat(3, minmax(110px, 1fr)) auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
}

.portfolio-ledger-row:last-child {
  border-bottom: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
}

.portfolio-ledger-name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font: 650 0.88rem/1.2 var(--wk-sans);
}

.portfolio-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--wk-blue);
}

.portfolio-dot.community { background: var(--wk-teal); }
.portfolio-dot.governance { background: var(--wk-amber); }

.portfolio-ledger-stat strong,
.portfolio-ledger-stat span {
  display: block;
}

.portfolio-ledger-stat strong {
  font: 650 clamp(1rem, 2vw, 1.35rem)/1.1 var(--wk-sans);
  font-variant-numeric: tabular-nums;
}

.portfolio-ledger-stat span {
  margin-top: 0.2rem;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  font: 0.66rem/1.3 var(--wk-sans);
}

.portfolio-ledger-row > a,
.portfolio-text-link {
  font: 600 0.72rem/1.3 var(--wk-sans);
  text-decoration: none;
  white-space: nowrap;
}

.portfolio-figure {
  padding: 1.5rem;
  border: 1px solid var(--wk-border, var(--theme-foreground-faintest));
  background: var(--wk-surface, var(--theme-background));
}

.portfolio-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 3rem;
  background: var(--wk-border-accent, var(--theme-foreground-fainter));
  border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
}

.portfolio-concentration,
.portfolio-movements {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--theme-background);
}

.portfolio-section-heading.compact {
  margin-bottom: 1.5rem;
}

.portfolio-theil {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.portfolio-theil strong {
  font: 500 clamp(3rem, 7vw, 5rem)/0.9 var(--wk-serif);
  color: var(--wk-blue);
  font-variant-numeric: tabular-nums;
}

.portfolio-theil span,
.portfolio-concentration > p {
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  font-size: 0.76rem;
  line-height: 1.5;
}

.portfolio-movements ol {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
}

.portfolio-movements li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  padding: 0.65rem 0;
  border-top: 1px solid var(--wk-border, var(--theme-foreground-faintest));
  font-size: 0.75rem;
}

.portfolio-movements li > span {
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  font-family: var(--wk-mono);
}

.portfolio-movements li > a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-dimensions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-left: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
}

.portfolio-dimensions a {
  min-height: 8rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: 2rem 1fr;
  grid-template-rows: auto 1fr;
  gap: 0.35rem 0.5rem;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-bottom: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  transition: background var(--wk-transition);
}

.portfolio-dimensions a:hover,
.portfolio-wiki-grid a:hover {
  background: color-mix(in srgb, var(--wk-blue) 8%, transparent);
}

.portfolio-dimensions span {
  color: var(--wk-coral);
  font: 600 0.65rem/1 var(--wk-mono);
}

.portfolio-dimensions strong {
  font: 600 0.88rem/1.2 var(--wk-sans);
}

.portfolio-dimensions small {
  grid-column: 2;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  font: 0.72rem/1.45 var(--wk-sans);
}

.portfolio-wiki-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-left: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
}

.portfolio-wiki-grid a {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.2rem 0.65rem;
  padding: 0.85rem;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-bottom: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
}

.portfolio-wiki-grid span {
  grid-row: 1 / span 2;
  color: var(--wk-blue);
  font: 650 0.7rem/1.3 var(--wk-mono);
}

.portfolio-wiki-grid strong {
  font: 600 0.78rem/1.2 var(--wk-sans);
}

.portfolio-wiki-grid small {
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  font: 0.62rem/1.2 var(--wk-sans);
}

.portfolio-method-note {
  margin: 0 0 2rem;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--wk-teal);
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  background: color-mix(in srgb, var(--wk-teal) 7%, transparent);
  font: 0.76rem/1.55 var(--wk-sans);
}

@media (max-width: 900px) {
  .portfolio-hero-grid,
  .portfolio-split { grid-template-columns: 1fr; }
  .portfolio-ledger-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-ledger-name,
  .portfolio-ledger-row > a { grid-column: 1 / -1; }
  .portfolio-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-wiki-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .portfolio-hero { margin-inline: -0.5rem; }
  .portfolio-ledger-row { grid-template-columns: 1fr 1fr; }
  .portfolio-ledger-stat:nth-of-type(3) { grid-column: 1 / -1; }
  .portfolio-dimensions,
  .portfolio-wiki-grid { grid-template-columns: 1fr; }
}

/* ── Sticky filter bar ──────────────────────────────────── */

.filters-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wk-bar-bg, var(--theme-background));
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--wk-border, var(--theme-foreground-faintest));
  padding: 0.6rem 1rem 0.5rem;
  margin: 0 -1rem 0;
}

/* fade-out gradient at bottom of filter bar */
.filters-bar::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: linear-gradient(to bottom, var(--theme-background), transparent);
  pointer-events: none;
  z-index: 99;
}

.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: start;
}

.filters-row > * {
  min-width: 0;
  flex: 0 0 auto;
  width: auto !important;
  max-width: none;
}

.filters-row > .observablehq--block {
  margin: 0 !important;
}

/* When filter bar is rendered via view(createFilterBar()), remove wrapper margin */
.observablehq--block:has(> .filters-bar) {
  margin: 0 !important;
}

/* ── Modern input controls inside filter bar ────────────── */

/* All forms: kill margins, inline layout, shrink to content, left-align */
.filters-bar form,
.filters-row form {
  margin: 0 !important;
  font-family: var(--wk-sans);
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  vertical-align: top;
  width: auto !important;
  max-width: none !important;
}

/* Top-level labels (e.g. "Wiki", "User types", "Time scale") */
.filters-bar form > label,
.filters-row form > label {
  font-family: var(--wk-sans) !important;
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint)) !important;
  margin-bottom: 0;
  line-height: 1;
  padding: 0;
  width: auto !important;
}

/* ── Pill-chip checkboxes (User types) ──────────────────── */

.filters-bar form div > label:has(input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  margin: 0.05rem 0.1rem;
  font-family: var(--wk-sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  background: var(--wk-surface, var(--theme-background));
  border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.35;
}

.filters-bar form div > label:has(input[type="checkbox"]):hover {
  border-color: var(--wk-blue);
  color: var(--wk-text-primary, var(--theme-foreground));
}

.filters-bar form div > label:has(input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--wk-blue) 15%, transparent);
  border-color: color-mix(in srgb, var(--wk-blue) 50%, transparent);
  color: var(--wk-text-primary, var(--theme-foreground));
  font-weight: 600;
}

/* hide the native checkbox, replace with dot indicator */
.filters-bar form div > label > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--wk-text-tertiary, var(--theme-foreground-faint));
  margin: 0;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.filters-bar form div > label > input[type="checkbox"]:checked {
  background: var(--wk-blue);
  border-color: var(--wk-blue);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--wk-blue) 30%, transparent);
}

/* focus ring on the pill label when checkbox is keyboard-focused */
.filters-bar form div > label:has(input[type="checkbox"]:focus-visible) {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
}

/* ── Segmented control (radios — Time scale) ─────────────── */

.filters-bar form:has(input[type="radio"]) > div {
  display: inline-flex;
  background: var(--wk-surface, var(--theme-background));
  border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-radius: 100px;
  padding: 2px;
  gap: 0;
}

.filters-bar form div > label:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  font-family: var(--wk-sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  border-radius: 100px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.35;
  margin: 0;
}

.filters-bar form div > label:has(input[type="radio"]):hover {
  color: var(--wk-text-primary, var(--theme-foreground));
}

.filters-bar form div > label:has(input[type="radio"]:checked) {
  background: var(--wk-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* hide native radio visually but keep it focusable */
.filters-bar form div > label > input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  opacity: 0;
}

/* focus ring on the label when radio is keyboard-focused */
.filters-bar form div > label:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
}

/* ── Styled select (Wiki dropdown) ───────────────────────── */

.filters-bar form select {
  font-family: var(--wk-sans);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.25rem 1.6rem 0.25rem 0.5rem;
  background: var(--wk-surface, var(--theme-background));
  border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-radius: 100px;
  color: var(--wk-text-primary, var(--theme-foreground));
  cursor: pointer;
  transition: border-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239e9889' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  line-height: 1.35;
  min-width: 0;
  width: auto;
}

.filters-bar form select:hover {
  border-color: var(--wk-blue);
}

.filters-bar form select:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
  border-color: var(--wk-blue);
}

/* ── Date range wrapper (From + To in one flex item) ────── */

.date-range {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: end;
  flex-shrink: 0;
}

.date-range > .observablehq--block {
  margin: 0 !important;
}

/* ── Compact text inputs (From / To) ─────────────────────── */

.filters-bar form input[type="text"] {
  font-family: var(--wk-mono);
  font-size: 0.72rem;
  font-weight: 400;
  padding: 0.25rem 0.45rem;
  width: 5rem;
  background: var(--wk-surface, var(--theme-background));
  border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-radius: 100px;
  color: var(--wk-text-primary, var(--theme-foreground));
  transition: border-color 0.15s ease;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.filters-bar form input[type="text"]:hover {
  border-color: var(--wk-blue);
}

.filters-bar form input[type="text"]:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
  border-color: var(--wk-blue);
}

/* ── Toggle switch (Breakdown toggle on GDP) ─────────────── */

/* Observable Inputs.toggle produces: <form><label>Label</label><input type="checkbox" name="input"></form> */
.filters-bar form:has(> input[type="checkbox"]) {
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem;
}

.filters-bar form:has(> input[type="checkbox"]) > label {
  font-size: 0.58rem !important;
  white-space: nowrap;
  max-width: none !important;
  width: auto !important;
}

.filters-bar form > input[type="checkbox"] {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 16px;
  border-radius: 100px;
  background: var(--wk-border-accent, var(--theme-foreground-fainter));
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  vertical-align: middle;
  margin: 0;
  flex-shrink: 0;
}

.filters-bar form > input[type="checkbox"]:checked {
  background: var(--wk-blue);
}

.filters-bar form > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 2px;
}

.filters-bar form > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.filters-bar form > input[type="checkbox"]:checked::after {
  transform: translateX(14px);
}

/* ── Namespace row (summary + select/clear inline) ────────── */

.ns-row {
  display: flex;
  align-items: baseline;
  gap: 0 0.35rem;
  margin-top: 0.25rem;
}

.ns-row > details {
  flex: 0 1 auto;
}

.ns-row > .observablehq--block {
  margin: 0 !important;
  flex: 0 0 auto;
}

.filters-bar details > summary {
  font-family: var(--wk-sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.filters-bar details > summary:hover {
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  background: color-mix(in srgb, var(--wk-blue) 6%, transparent);
}

.filters-bar details > summary:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
}

.filters-bar details > summary::marker,
.filters-bar details > summary::-webkit-details-marker {
  display: none;
}

.filters-bar details > summary::before {
  content: "▸";
  font-size: 0.7em;
  transition: transform 0.2s ease;
  display: inline-block;
}

.filters-bar details[open] > summary::before {
  transform: rotate(90deg);
}

/* Namespace checkboxes get pill style too */
.filters-bar details form div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.25rem 0;
}

/* Select all / Clear all links (inline next to summary) */
.ns-actions {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.ns-actions a {
  font-family: var(--wk-sans);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--wk-blue);
  text-decoration: none;
  padding: 0.15rem 0.4rem;
  border-radius: 100px;
  transition: background 0.12s ease;
  white-space: nowrap;
}

.ns-actions a:hover {
  background: color-mix(in srgb, var(--wk-blue) 10%, transparent);
}

.ns-actions a:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
}

.ns-actions a + a::before {
  content: "·";
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  margin-right: 0.15rem;
  font-weight: 400;
}

/* ── Filter description sentence (inside sticky bar) ───── */

.filter-desc {
  font-family: var(--wk-sans);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  margin: 0.3rem 0 0;
  line-height: 1.4;
  letter-spacing: 0.005em;
  padding: 0.15rem 0;
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

/* Fold / unfold toggle for filter bar */
.filters-toggle {
  flex-shrink: 0;
  margin-left: auto;
  background: none;
  border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-radius: 100px;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.3;
  font-family: var(--wk-sans);
}

.filters-toggle:hover {
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  border-color: var(--wk-blue);
  background: color-mix(in srgb, var(--wk-blue) 6%, transparent);
}

.filters-toggle:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
}

/* Collapsed state: hide controls, keep description visible */
.filters-bar.filters-collapsed .filters-row,
.filters-bar.filters-collapsed .ns-row {
  display: none;
}

/* ── KPI cards ──────────────────────────────────────────── */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0.65rem;
  margin: 1rem 0 1.75rem;
}

.kpi-card {
  background: var(--wk-surface, var(--theme-background));
  border: 1px solid var(--wk-border, var(--theme-foreground-faintest));
  border-radius: var(--wk-radius-lg);
  padding: 0.9rem 1rem 0.75rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--wk-shadow-sm);
  transition: box-shadow var(--wk-transition), border-color var(--wk-transition);
}

.kpi-card:hover {
  box-shadow: var(--wk-shadow-md);
  border-color: var(--wk-border-accent, var(--theme-foreground-fainter));
}

/* Accent stripe at top of each KPI card */
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--wk-blue);
  opacity: 0.6;
}

.kpi-card:nth-child(2)::before { background: var(--wk-teal); }
.kpi-card:nth-child(3)::before { background: var(--wk-amber); }
.kpi-card:nth-child(4)::before { background: var(--wk-coral); }

.kpi-card .kpi-value {
  font-family: var(--wk-sans);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--wk-text-primary, var(--theme-foreground));
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.kpi-card .kpi-label {
  font-family: var(--wk-sans);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.3rem;
}

.kpi-card .kpi-sub {
  font-family: var(--wk-sans);
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}

/* ── Chart sections ─────────────────────────────────────── */

.chart-section {
  margin: 1.75rem 0;
  padding: 1.4rem 1.3rem 1.1rem;
  border: 1px solid var(--wk-border, var(--theme-foreground-faintest));
  border-radius: var(--wk-radius-lg);
  background: var(--wk-surface, var(--theme-background));
  box-shadow: var(--wk-shadow-sm);
  position: relative;
}

/* ── Loading overlay (shown while DuckDB computes) ─────── */

body.wk-loading .chart-section::after {
  content: "Loading…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--wk-surface, var(--theme-background)) 82%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--wk-radius-lg);
  z-index: 10;
  font-family: var(--wk-sans);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  letter-spacing: 0.03em;
  text-align: center;
  animation: wk-loading-pulse 1.8s ease-in-out infinite;
}

body.wk-loading[data-wk-stage="engine"] .chart-section::after {
  content: "Initializing query engine (first load, ~8s)…";
}

body.wk-loading .kpi-card .kpi-value {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

@keyframes wk-loading-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ── Top progress bar + status pill (real stages, not a fake timer) ──
   "start" = fast precomputed-defaults path; "engine" = cold-starting
   DuckDB-WASM, the one step that actually takes ~8s. */

.wk-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  transition: opacity 0.2s ease;
}

body.wk-loading .wk-progress {
  opacity: 1;
}

.wk-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--wk-teal);
  transition: width 0.3s ease;
}

.wk-progress-bar.wk-progress-trickle {
  transition: width 8s cubic-bezier(0.1, 0.7, 0.3, 1);
  width: 85% !important;
}

.wk-progress-status {
  position: fixed;
  top: 8px;
  right: 14px;
  z-index: 1000;
  font-family: var(--wk-sans);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  background: var(--wk-surface, var(--theme-background));
  border: 1px solid var(--wk-border, var(--theme-foreground-faintest));
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  box-shadow: var(--wk-shadow-sm);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

body.wk-loading .wk-progress-status {
  opacity: 1;
  transform: translateY(0);
}

.chart-section h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* subtle decorative line before chart headings */
.chart-section h2::before {
  content: "";
  width: 4px;
  height: 1.1em;
  background: var(--wk-blue);
  border-radius: 2px;
  flex-shrink: 0;
  opacity: 0.7;
}

.chart-section:nth-of-type(2) h2::before { background: var(--wk-teal); }
.chart-section:nth-of-type(3) h2::before { background: var(--wk-coral); }
.chart-section:nth-of-type(4) h2::before { background: var(--wk-amber); }
.chart-section:nth-of-type(5) h2::before { background: var(--wk-lavender); }
.chart-section:nth-of-type(6) h2::before { background: var(--wk-teal); }
.chart-section:nth-of-type(7) h2::before { background: var(--wk-blue); }

/* ── Notes ──────────────────────────────────────────────── */

.note {
  font-family: var(--wk-sans);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  border-left: 3px solid var(--wk-border-accent, var(--theme-foreground-faintest));
  padding: 0.5rem 0.85rem;
  margin: 0.6rem 0 1rem;
  line-height: 1.55;
  background: color-mix(in srgb, var(--wk-surface-raised, var(--theme-background)) 60%, transparent);
  border-radius: 0 var(--wk-radius) var(--wk-radius) 0;
}

.note strong {
  color: var(--wk-text-primary, var(--theme-foreground));
  font-weight: 600;
}

/* ── Methodology collapsibles ───────────────────────────── */

.methodology {
  font-family: var(--wk-sans);
  font-size: 0.75rem;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  margin: 0.75rem 0 0.25rem;
  line-height: 1.55;
}

.methodology summary {
  font-family: var(--wk-sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0;
  transition: color var(--wk-transition);
}

.methodology summary:hover {
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
}

.methodology p {
  margin: 0.35rem 0;
  font-style: italic;
  max-width: 72ch;
}

/* ── Warning / empty state ──────────────────────────────── */

.warning {
  font-family: var(--wk-sans);
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  background: color-mix(in srgb, var(--wk-amber) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--wk-amber) 25%, transparent);
  border-radius: var(--wk-radius);
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.warning code {
  background: color-mix(in srgb, var(--wk-amber) 12%, transparent);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.9em;
}

/* ── Sidebar refinements ────────────────────────────────── */

#observablehq-sidebar {
  /* Framework grows this to keep sidebar content aligned with the centered
     main column on wide viewports, but that also inflates the sidebar's own
     background well past its content — pin it to 0 so the sidebar stays a
     fixed-width rail flush against the left edge instead. */
  --observablehq-sidebar-padding-left: 0px;
  font-family: var(--wk-sans);
  width: 200px;
  left: -200px;
}

.mobile-masthead,
.mobile-menu-button,
.mobile-nav-toolbar {
  display: none;
}

#observablehq-sidebar .observablehq-link a {
  font-family: var(--wk-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  padding-left: 1rem;
  padding-right: 0.5rem;
}

/* hide original close button (moved to sidebar bottom) */
#observablehq-sidebar-close {
  display: none !important;
}

/* ── Sidebar bottom controls ─────────────────────────────── */

.sidebar-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--wk-border, var(--theme-foreground-faintest));
  background: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Theme segmented control */
.sidebar-theme {
  display: flex;
  background: var(--wk-surface, var(--theme-background));
  border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-radius: 100px;
  padding: 2px;
  gap: 0;
}

.theme-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem 0.35rem;
  font-family: var(--wk-sans);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  background: transparent;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.3;
}

.theme-btn:hover {
  color: var(--wk-text-primary, var(--theme-foreground));
}

.theme-btn:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
}

.theme-btn.active {
  background: var(--wk-blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Admin link */
.sidebar-admin-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  font-family: var(--wk-sans);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  text-decoration: none;
  cursor: pointer;
  border-radius: 100px;
  transition: all 0.15s ease;
  user-select: none;
}

.sidebar-admin-link:hover {
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  background: color-mix(in srgb, var(--wk-blue) 6%, transparent);
}

.sidebar-admin-link:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
}

/* Collapse button */
.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  font-family: var(--wk-sans);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  cursor: pointer;
  border-radius: 100px;
  transition: all 0.15s ease;
  user-select: none;
}

.sidebar-collapse-btn:hover {
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
  background: color-mix(in srgb, var(--wk-blue) 6%, transparent);
}

.sidebar-collapse-btn:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
}

/* Give sidebar room for bottom controls */
#observablehq-sidebar {
  padding-bottom: 5.5rem;
}

/* match Observable's responsive breakpoints but with narrower sidebar */
@media (min-width: calc(840px + 6rem)) {
  #observablehq-sidebar-toggle:checked ~ #observablehq-center,
  #observablehq-sidebar-toggle:indeterminate ~ #observablehq-center {
    --observablehq-inset-left: calc(200px + 1rem);
  }
}

/* ── Mobile publication masthead and navigation drawer ─── */

@media (max-width: 1007px) {
  :root {
    --wk-mobile-masthead-height: 3.5rem;
    --wk-mobile-menu-surface: color-mix(in srgb, var(--theme-background-alt) 72%, var(--theme-background));
  }

  html.mobile-nav-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .mobile-masthead {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100vw;
    max-width: 100vw;
    min-height: var(--wk-mobile-masthead-height);
    padding: max(0.4rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.4rem max(1rem, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    box-sizing: border-box;
    color: var(--wk-text-primary, var(--theme-foreground));
    background: color-mix(in srgb, var(--theme-background) 94%, transparent);
    border-bottom: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
    backdrop-filter: blur(14px) saturate(1.35);
    -webkit-backdrop-filter: blur(14px) saturate(1.35);
  }

  .mobile-masthead-context {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
  }

  .mobile-masthead-brand {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font: 500 1rem/1.1 var(--wk-serif);
    letter-spacing: -0.015em;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-masthead-page {
    min-width: 0;
    overflow: hidden;
    color: var(--wk-text-tertiary, var(--theme-foreground-faint));
    font: 600 0.58rem/1 var(--wk-mono);
    letter-spacing: 0.08em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mobile-nav-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-sizing: border-box;
    color: var(--wk-text-primary, var(--theme-foreground));
    background: transparent;
    border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
    border-radius: 999px;
    cursor: pointer;
    font: 650 0.66rem/1 var(--wk-sans);
  }

  .mobile-menu-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    color: var(--wk-text-primary, var(--theme-foreground));
    background: transparent;
    border: 0;
    border-radius: var(--wk-radius);
    box-shadow: none;
    cursor: pointer;
    transition: color var(--wk-transition), background var(--wk-transition);
  }

  .mobile-menu-button:hover {
    color: var(--wk-blue);
    background: color-mix(in srgb, var(--wk-blue) 7%, transparent);
  }

  .mobile-nav-close:hover {
    color: var(--wk-blue);
    border-color: var(--wk-blue);
    background: color-mix(in srgb, var(--wk-blue) 7%, transparent);
  }

  .mobile-menu-button:focus-visible,
  .mobile-nav-close:focus-visible {
    outline: 2px solid var(--wk-blue);
    outline-offset: 2px;
  }

  .mobile-menu-icon {
    width: 1.25rem;
    height: 0.875rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .mobile-menu-line {
    width: 100%;
    height: 2px;
    display: block;
    background: currentColor;
    border-radius: 999px;
  }

  .mobile-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  /* The framework checkbox remains the drawer state engine, but the real
     mobile control is the semantic masthead button above. */
  #observablehq-sidebar-toggle {
    width: 1px;
    height: 1px;
    padding: 0;
    clip-path: inset(50%);
    overflow: hidden;
    pointer-events: none;
    white-space: nowrap;
  }

  #observablehq-sidebar {
    z-index: 901;
    width: min(20rem, 86vw);
    left: calc(-1 * min(20rem, 86vw));
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--wk-mobile-menu-surface);
    overscroll-behavior: contain;
    transition: visibility 0.18s 0ms, left 0.18s ease;
  }

  #observablehq-sidebar-backdrop {
    z-index: 900;
    background: color-mix(in srgb, #0d1620 42%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .mobile-nav-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: var(--wk-mobile-masthead-height);
    padding: 0.4rem 0.5rem 0.4rem 1rem;
    display: flex;
    order: -1;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-sizing: border-box;
    background: var(--wk-mobile-menu-surface);
    border-bottom: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  }

  .mobile-nav-toolbar strong {
    font: 650 0.65rem/1 var(--wk-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mobile-nav-close {
    padding: 0 0.7rem;
    border-color: transparent;
  }

  .mobile-nav-close > span {
    font: 400 1.15rem/1 var(--wk-sans);
  }

  #observablehq-sidebar .observablehq-link a,
  #observablehq-sidebar summary {
    min-height: 44px;
    box-sizing: border-box;
  }

  #observablehq-sidebar > ol:first-of-type {
    position: relative;
    top: auto;
  }

  #observablehq-sidebar .sidebar-bottom {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    flex-shrink: 0;
    background: var(--wk-mobile-menu-surface);
  }

  #observablehq-sidebar .theme-btn,
  #observablehq-sidebar .sidebar-admin-link {
    min-height: 44px;
    box-sizing: border-box;
  }

  #observablehq-sidebar .sidebar-collapse-btn {
    display: none;
  }

  .filters-bar {
    top: var(--wk-mobile-masthead-height);
    z-index: 400;
  }

}

/* ── Observable input refinements ───────────────────────── */

#observablehq-main form > label {
  font-family: var(--wk-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── Tables ─────────────────────────────────────────────── */

#observablehq-main table {
  font-family: var(--wk-sans);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.wide-table {
  overflow-x: auto;
}

/* ── Code blocks in admin page ──────────────────────────── */

#observablehq-main pre {
  font-family: var(--wk-mono);
  font-size: 0.8rem;
  border-radius: var(--wk-radius);
}

/* ── Plot chart tweaks ──────────────────────────────────── */

/* Plot tooltips */
[class*="plot"] [aria-label="tip"] {
  font-family: var(--wk-sans) !important;
  font-size: 0.78rem !important;
  font-variant-numeric: tabular-nums;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 640px) {
  #observablehq-center {
    margin: 1rem;
  }

  .kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .filters-row {
    gap: 0.3rem 0.6rem;
  }

  .filters-row > *,
  .filters-bar form,
  .filters-row form {
    max-width: 100% !important;
  }

  .filters-bar form:has(input[type="checkbox"]):not(:has(> input[type="checkbox"])) {
    width: 100% !important;
  }

  .filters-bar form:has(input[type="checkbox"]):not(:has(> input[type="checkbox"])) > div {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .filters-bar form div > label:has(input[type="checkbox"]),
  .filters-bar form div > label:has(input[type="radio"]),
  .filters-bar form select,
  .filters-bar form input[type="text"],
  .filters-bar details > summary,
  .filters-toggle {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }

  .filters-bar form:has(input[type="radio"]) > div {
    min-height: 44px;
    align-items: stretch;
  }

  .filters-bar form > input[type="checkbox"] {
    width: 44px;
    height: 26px;
  }

  .filters-bar form > input[type="checkbox"]::after {
    width: 20px;
    height: 20px;
    top: 3px;
    left: 3px;
  }

  .filters-bar form > input[type="checkbox"]:checked::after {
    transform: translateX(18px);
  }

  .ns-actions a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .chart-section {
    padding: 1rem 0.85rem;
    margin: 1.25rem 0;
  }

  #observablehq-main h1 {
    font-size: 1.65rem;
  }

  .page-intro {
    font-size: 0.95rem;
  }

  .filter-desc {
    font-size: 0.67rem;
  }
}

@media (max-width: 360px) {
  .mobile-masthead-page {
    display: none;
  }

  .portfolio-concentration,
  .portfolio-movements {
    min-width: 0;
  }

  .portfolio-theil {
    min-width: 0;
    flex-wrap: wrap;
  }

  .portfolio-text-link {
    white-space: normal;
  }
}

/* ── Export buttons ─────────────────────────────────────── */

.chart-export-wrap {
  position: relative;
}

.chart-export-bar {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.35rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.chart-section:hover .chart-export-bar,
.chart-export-bar:focus-within {
  opacity: 1;
}

.export-btn {
  font-family: var(--wk-sans);
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.18rem 0.45rem;
  background: var(--wk-surface, var(--theme-background));
  border: 1px solid var(--wk-border-accent, var(--theme-foreground-fainter));
  border-radius: 100px;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.export-btn:hover {
  color: var(--wk-blue);
  border-color: var(--wk-blue);
  background: color-mix(in srgb, var(--wk-blue) 6%, transparent);
}

.export-btn:focus-visible {
  outline: 2px solid var(--wk-blue);
  outline-offset: 1px;
}

.page-export-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.75rem 0 1.25rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--wk-border, var(--theme-foreground-faintest));
}

.page-export-label {
  font-family: var(--wk-sans);
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  margin-right: 0.15rem;
}

/* ── Print / screenshot refinements ─────────────────────── */

/* ── Site footer ─────────────────────────────────────── */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--wk-border, var(--theme-foreground-faintest));
}

.site-footer p {
  flex: 1 1 28rem;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
}

.site-footer p strong {
  color: var(--wk-text-secondary, var(--theme-foreground-muted));
}

.site-footer p a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}

.site-footer-links a {
  font-size: 0.75rem;
  color: var(--wk-text-tertiary, var(--theme-foreground-faint));
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  white-space: nowrap;
}

.site-footer-legal {
  font-weight: 600;
  color: var(--wk-text-primary, var(--theme-foreground)) !important;
  text-decoration-color: currentColor !important;
}

.site-footer p a:hover,
.site-footer-links a:hover {
  color: var(--wk-blue);
}

/* Framework's TOC aside is `position: fixed` spanning the full viewport
 * height, even though its visible content (the heading list) only fills the
 * top of that box. The empty remainder still intercepts clicks, which on
 * pages with a TOC swallows the right-aligned footer links (About,
 * Meta-Wiki, GitHub) that sit underneath it. Restrict hit-testing to the
 * nav's actual content so clicks fall through everywhere else. */
#observablehq-toc {
  pointer-events: none;
}

#observablehq-toc nav {
  pointer-events: auto;
}

@media print {
  #observablehq-sidebar,
  #observablehq-sidebar-toggle {
    display: none !important;
  }

  #observablehq-toc {
    display: none !important;
  }

  body {
    max-width: none !important;
  }

  #observablehq-center {
    margin: 0 !important;
    padding: 0 1rem !important;
    --observablehq-inset-left: 0px !important;
    --observablehq-inset-right: 0px !important;
  }

  #observablehq-main {
    padding-right: 0 !important;
  }

  .filters-bar {
    position: static;
    backdrop-filter: none;
  }

  .filters-bar .filters-row,
  .filters-bar .ns-row,
  .filters-bar .filters-toggle {
    display: none !important;
  }

  .filters-bar .filter-desc {
    margin: 0;
    padding: 0.25rem 0;
    font-size: 0.8rem;
  }

  .methodology {
    display: none;
  }

  .chart-export-bar,
  .page-export-bar {
    display: none !important;
  }

  /* ── Single-chart print mode ──────────────────────────── */
  /* When printing a single chart, hide everything else and
     show the target chart section with methodology unfolded. */

  body.wk-print-chart {
    visibility: hidden;
  }

  body.wk-print-chart .wk-print-target {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 1.5rem 1rem !important;
    background: white !important;
  }

  body.wk-print-chart .wk-print-target * {
    visibility: visible;
  }

  body.wk-print-chart .wk-print-target .chart-export-bar {
    display: none !important;
  }

  body.wk-print-chart .wk-print-target .methodology {
    display: block !important;
  }
}