:root {
  color-scheme: light;
  --surface-0: #f4f4f2;
  --surface-1: #fcfcfb;
  --border:    #dedcd5;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #78766f;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --accent:   #2a78d6;
  --warn-bg:  #fdf3e3;
  --warn-ink: #7a4a05;
  --grid:     #e7e5df;
  --ramp-1: #c6dbef; --ramp-2: #9ecae1; --ramp-3: #6baed6;
  --ramp-4: #4292c6; --ramp-5: #2171b5; --ramp-6: #08519c;
  /* The five bands of the 1-to-10 score, running from far below the
     average ring to far above it. Diverging, because 5 is a middle
     and not a low end. */
  --score-1: #d4653a; --score-2: #e7a06f; --score-3: #cfcabc;
  --score-4: #6fbe9a; --score-5: #1f9e73;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #111110;
    --surface-1: #1a1a19;
    --border:    #34332f;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #96948a;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --accent:   #3987e5;
    --warn-bg:  #2e2513;
    --warn-ink: #f0c274;
    --grid:     #2b2a27;
    --ramp-1: #16365c; --ramp-2: #1d4f86; --ramp-3: #2c6fb0;
    --ramp-4: #4292c6; --ramp-5: #74b3dd; --ramp-6: #a9d0ea;
    --score-1: #c2542c; --score-2: #b87a4d; --score-3: #565349;
    --score-4: #3f8f70; --score-5: #17a375;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #111110;
  --surface-1: #1a1a19;
  --border:    #34332f;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #96948a;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --accent:   #3987e5;
  --warn-bg:  #2e2513;
  --warn-ink: #f0c274;
  --grid:     #2b2a27;
  --ramp-1: #16365c; --ramp-2: #1d4f86; --ramp-3: #2c6fb0;
  --ramp-4: #4292c6; --ramp-5: #74b3dd; --ramp-6: #a9d0ea;
  --score-1: #c2542c; --score-2: #b87a4d; --score-3: #565349;
  --score-4: #3f8f70; --score-5: #17a375;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font: 15px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
}
h1 { font-size: 19px; margin: 0; letter-spacing: -0.01em; }
header p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
main { max-width: 1100px; margin: 0 auto; padding: 24px; }

.filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 20px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--wide { flex: 1 1 420px; }
.field label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 600;
}
select {
  font: inherit; font-size: 14px; padding: 7px 9px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface-0); color: var(--text-primary);
}
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.tile {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
}
.tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.tile .v { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; margin-top: 3px; }
.tile .s { font-size: 12px; color: var(--text-secondary); }

.panel {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px; margin-bottom: 20px;
}
.panel h2 { font-size: 15px; margin: 0 0 2px; letter-spacing: -0.01em; }
.panel .sub { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 14px; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.scroller { overflow-x: auto; }
svg { display: block; max-width: 100%; }
svg text { fill: var(--text-secondary); font-size: 11px; }
svg .axis-line { stroke: var(--grid); stroke-width: 1; }
svg .bar { rx: 4; ry: 4; }

table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
th, td { padding: 6px 7px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; white-space: normal; min-width: 150px; width: 26%; }
thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
/* The last row of most tables is a total. Tables that end on an ordinary
   row opt out with .table--plain. */
tbody tr:last-child td { border-bottom: none; font-weight: 600; }
.table--plain tbody tr:last-child td { font-weight: inherit; }

.note {
  background: var(--warn-bg); color: var(--warn-ink);
  border-radius: 8px; padding: 10px 13px; font-size: 13px; margin-bottom: 14px;
}
.empty { color: var(--text-secondary); font-size: 13.5px; padding: 8px 0; }
footer { color: var(--text-muted); font-size: 12px; padding: 8px 24px 32px; max-width: 1100px; margin: 0 auto; }
.tooltip {
  position: fixed; pointer-events: none; z-index: 10; opacity: 0;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 7px; padding: 7px 10px; font-size: 12.5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.14); transition: opacity .1s;
}

/* ---------- site chrome shared by every report ---------- */

.site-nav {
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  margin-top: 12px;
}
.site-nav a {
  padding: 6px 12px; border-radius: 7px; text-decoration: none;
  color: var(--text-secondary); font-size: 13.5px; font-weight: 500;
}
.site-nav a:hover { background: var(--surface-0); color: var(--text-primary); }
.site-nav a[aria-current="page"] {
  background: var(--accent); color: #fff;
}
.site-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- landing page ---------- */

.lede {
  font-size: 16.5px; line-height: 1.6; color: var(--text-secondary);
  max-width: 62ch; margin: 0 0 24px;
}
.lede strong { color: var(--text-primary); }
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-bottom: 28px;
}
.card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
}
.card:hover { border-color: var(--accent); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.card h3 { margin: 0 0 5px; font-size: 15px; letter-spacing: -0.01em; }
.card p { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; }
.card .card-meta {
  margin-top: 9px; font-size: 11.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.prose { max-width: 68ch; }
.prose h2 { font-size: 15px; margin: 26px 0 8px; letter-spacing: -0.01em; }
.prose p, .prose li { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.prose ul { padding-left: 20px; margin: 8px 0; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
}

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

#map { height: 620px; border-radius: 8px; background: var(--surface-0); }
#map:focus-visible { outline: 2px solid var(--accent); }
.leaflet-container { background: var(--surface-0) !important; font: inherit !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface-1); color: var(--text-primary);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.leaflet-popup-content b { color: var(--text-primary); }
.leaflet-bar a {
  background: var(--surface-1); color: var(--text-primary); border-color: var(--border);
}
/* The default tiles are light; in dark mode take their glare down without
   losing the road and place names the map is there for. */
:root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .leaflet-tile-pane { filter: none; }
}

.legend-scale { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); }
.legend-dot { border-radius: 50%; border: 2px solid var(--surface-1); flex: none; }
.map-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }

/* ---------- charts shared by the ministers reports ---------- */

.chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.stacked-key { display: flex; flex-wrap: wrap; gap: 12px; margin: 2px 0 12px; }

/* Numbers read best right-aligned, prose does not. */
td.col-text, th.col-text { text-align: left; white-space: normal; }

.export-pptx {
  float: right; margin: -30px 0 0 12px;
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: 7px; cursor: pointer;
  background: var(--surface-0); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.export-pptx:hover:not(:disabled) { color: var(--text-primary); border-color: var(--accent); }
.export-pptx:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.export-pptx:disabled { opacity: .6; cursor: default; }

/* ---------- the ABR code multi-select ---------- */

details.codes {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 20px;
}
details.codes > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-primary);
  list-style: none; display: flex; align-items: center; gap: 7px;
}
details.codes > summary::-webkit-details-marker { display: none; }
details.codes > summary::before {
  content: "▸"; color: var(--text-muted); transition: transform .12s;
}
details.codes[open] > summary::before { transform: rotate(90deg); }
details.codes > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.codes-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 10px;
}
.codes-actions button {
  font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px;
  cursor: pointer; background: var(--surface-0); color: var(--text-secondary);
  border: 1px solid var(--border);
}
.codes-actions button:hover { color: var(--text-primary); border-color: var(--accent); }
.codes-hint { font-size: 12px; color: var(--text-muted); }
.codes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 3px 14px;
}
.codes-grid label {
  display: flex; gap: 7px; align-items: baseline; font-size: 12.5px;
  color: var(--text-secondary); padding: 3px 0; cursor: pointer;
}
.codes-grid input { margin: 0; flex: none; position: relative; top: 1px; }
.codes-grid .code { font-weight: 600; color: var(--text-primary); flex: none; }
.codes-grid .n { margin-left: auto; color: var(--text-muted); flex: none; }

/* ---------- Kerkprofiel ---------- */

/* A tile whose value is a name rather than a number needs to sit down a
   size, or "Leierskapskultuur" runs off the card. */
.tile .v--text { font-size: 1.15rem; line-height: 1.25; }

.circle-name { font-size: 12.5px; font-weight: 600; fill: var(--text-primary); }
.circle-score { font-size: 12px; fill: var(--text-muted); }
.circle-lead { font-size: 11px; letter-spacing: 0.06em;
               text-transform: uppercase; fill: var(--text-muted); }
.circle-lead-name { font-size: 17px; font-weight: 700; fill: var(--text-primary); }

.row-name { font-size: 12.5px; fill: var(--text-primary); }
.row-value { font-size: 12px; fill: var(--text-muted); }

#detail h3 { margin: 1.6rem 0 0.15rem; font-size: 1.02rem; }
#detail h3:first-of-type { margin-top: 0.8rem; }
.quality-sub { font-weight: 400; color: var(--text-muted); font-size: 0.9rem; }
.quality-score { float: right; font-variant-numeric: tabular-nums;
                 color: var(--text-muted); font-size: 0.9rem; }
.quality-blurb { margin: 0 0 0.6rem; color: var(--text-muted);
                 font-size: 0.88rem; max-width: 62ch; }
/* A value that had to move inside its own bar. */
.row-value--in { fill: #fff; }
.scale-band { font-size: 11px; font-weight: 600; fill: var(--text-primary); }
.scale-share { font-size: 10.5px; fill: var(--text-muted); }
.scale-tick { font-size: 10.5px; fill: var(--text-muted); }
.scale-note {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--text-secondary); max-width: 78ch;
}
.score-chip {
  display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 5px;
  color: #16150f; font-weight: 650; font-variant-numeric: tabular-nums;
}

/* ---------- the Opsomming entrance ---------- */

#sections h3 { margin: 1.3rem 0 0.3rem; font-size: 0.98rem; }
#sections h3:first-child { margin-top: 0.2rem; }
.set-list { margin: 0; padding-left: 20px; }
.set-list li {
  font-size: 13.5px; color: var(--text-secondary); line-height: 1.55;
  margin-bottom: 2px;
}
.set-codes {
  color: var(--text-muted); font-size: 11.5px; white-space: nowrap;
  margin-left: 6px;
}
.th-note { font-weight: 400; text-transform: none; letter-spacing: 0; }