@import url("fonts.css");

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --border: #e4e7ec;
  --border-strong: #cfd4dc;
  --text: #101828;
  --text-2: #475467;
  --text-3: #667085;
  --accent: #1849a9;
  --accent-soft: #eff4ff;
  --black: #0f1115;

  --red: #b42318;
  --red-soft: #fef3f2;
  --green: #067647;
  --green-soft: #ecfdf3;
  --amber: #b54708;
  --amber-soft: #fffaeb;
  --blue: #175cd3;
  --blue-soft: #eff8ff;
  --grey: #344054;
  --grey-soft: #f2f4f7;

  --sans: "Inter", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --wrap: 1240px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01", "tnum";
}

main {
  flex: 1;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.2;
}

h1,
.serif {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.005em;
}

h3 {
  font-size: 0.95rem;
  font-weight: 600;
}

p {
  margin: 0 0 0.85rem;
}

code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--surface-2);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}

.muted {
  color: var(--text-3);
}

.small {
  font-size: 0.8125rem;
}

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-3);
}

.wrap {
  width: min(var(--wrap), calc(100% - 2.5rem));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--black);
  color: #fff;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm);
  z-index: 100;
}

.skip-link:focus {
  left: 0.5rem;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  text-decoration: none;
  background: var(--black);
  color: #fff;
  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
  border-radius: 999px;
  flex: none;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 20px;
  height: 20px;
  color: #fff;
}

.brand-word {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}

.brand-word span {
  opacity: 0.6;
}

.pill-nav {
  display: inline-flex;
  gap: 0.15rem;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0.2rem;
}

.pill-nav a {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.pill-nav a:hover {
  color: var(--text);
  text-decoration: none;
}

.pill-nav a[aria-current="page"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.locale-switch {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0.2rem;
}

.locale-switch a {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  color: var(--text-3);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
}

.locale-switch a[aria-current="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

@media (max-width: 800px) {
  .site-header .wrap {
    height: auto;
    flex-wrap: wrap;
    padding: 0.6rem 0;
    gap: 0.6rem;
  }

  .pill-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .header-right .tag {
    display: none;
  }
}

/* Tags / pills */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--grey-soft);
  color: var(--grey);
  line-height: 1.5;
  white-space: nowrap;
}

.tag--burden {
  background: var(--red-soft);
  color: var(--red);
}

.tag--favour {
  background: var(--green-soft);
  color: var(--green);
}

.tag--amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.tag--sim {
  background: var(--blue-soft);
  color: var(--blue);
}

.tag--ink {
  background: var(--black);
  color: #fff;
}

.tag--outline {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-2);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Shell: sidebar + content */

.shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 2.5rem;
  padding: 2rem 0 4rem;
  align-items: start;
}

.sidenav {
  position: sticky;
  top: 5rem;
}

.sidenav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.sidenav li a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.25rem;
  color: var(--text-3);
  font-size: 0.8125rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.sidenav li a::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--border-strong);
  border-radius: 1px;
}

.sidenav li a:hover {
  color: var(--text);
}

.sidenav li a.is-active {
  color: var(--text);
  font-weight: 600;
}

.sidenav li a.is-active::before {
  background: var(--black);
}

.sidenav .tag {
  margin-left: auto;
}

.content {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .sidenav {
    position: static;
  }

  .sidenav ul {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    border-top: 0;
    padding-bottom: 0.25rem;
  }

  .sidenav li a {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    white-space: nowrap;
    background: var(--surface);
  }

  .sidenav li a::before {
    display: none;
  }

  .sidenav .tag {
    display: none;
  }
}

/* Page title */

.page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.page-title h1 {
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.page-title h1::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--black);
  border-radius: 2px;
  flex: none;
}

.page-lead {
  color: var(--text-2);
  max-width: 52rem;
  font-size: 0.975rem;
  margin: 0 0 0.5rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0.25rem 0 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.btn--primary {
  background: var(--black);
  border-color: var(--black);
  color: #fff;
}

.btn--primary:hover {
  background: #23262d;
}

/* Cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
  scroll-margin-top: 5rem;
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card-head .titles {
  min-width: 0;
}

.card-head h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.card-head .desc {
  color: var(--text-3);
  font-size: 0.8125rem;
  margin: 0.3rem 0 0;
  max-width: 48rem;
}

.card-head .actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.card-foot {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text-3);
  font-size: 0.78rem;
}

.card--notice {
  border-left: 3px solid var(--amber);
}

.card--notice p {
  margin: 0;
  color: var(--text-2);
}

/* Layer columns */

.layers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.layer {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  background: var(--surface);
}

.layer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.layer-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-3);
}

.layer h3 {
  margin-bottom: 0.35rem;
}

.layer p {
  color: var(--text-2);
  font-size: 0.85rem;
  margin: 0;
}

@media (max-width: 760px) {
  .layers {
    grid-template-columns: 1fr;
  }
}

/* Scenario rows (home + index) */

.scenario-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  background: var(--surface);
}

.scenario-row:hover {
  border-color: var(--border-strong);
  background: #fafbfc;
  text-decoration: none;
}

.scenario-row h3 {
  font-size: 1rem;
  margin: 0.15rem 0 0.25rem;
}

.scenario-row p {
  color: var(--text-2);
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}

.stats {
  display: flex;
  gap: 1.25rem;
}

.stat {
  text-align: right;
}

.stat b {
  display: block;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat span {
  font-size: 0.7rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat--burden b {
  color: var(--red);
}

@media (max-width: 760px) {
  .scenario-row {
    grid-template-columns: 1fr;
  }

  .stats {
    justify-content: flex-start;
  }

  .stat {
    text-align: left;
  }
}

.card-list {
  display: grid;
  gap: 0.75rem;
}

/* Rules */

.rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}

.rules li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}

.rules li:first-child {
  border-top: 0;
  padding-top: 0;
}

.rules .num {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-3);
  padding-top: 0.15rem;
}

.rules h3 {
  margin-bottom: 0.2rem;
}

.rules p {
  color: var(--text-2);
  font-size: 0.875rem;
  margin: 0;
}

/* Tables */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.table th,
.table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.table th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface-2);
  border-bottom-color: var(--border);
}

.table th:first-child,
.table td:first-child {
  padding-left: 0.75rem;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table td.right,
.table th.right {
  text-align: right;
}

.table td.id {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-3);
  white-space: nowrap;
  width: 3rem;
}

.table td.dash {
  color: var(--text-3);
}

.table--rounded {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Facts */

.fact-row td:first-child {
  border-left: 3px solid var(--border-strong);
}

.fact-row[data-label="belastend"] td:first-child {
  border-left-color: var(--red);
}

.fact-row[data-label="gunstig"] td:first-child {
  border-left-color: var(--green);
}

.fact-row[data-label="onzeker"] td:first-child {
  border-left-color: var(--amber);
}

.kv {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
  margin: 0;
}

.kv dt {
  color: var(--text-3);
}

.kv dd {
  margin: 0;
}

@media (max-width: 600px) {
  .kv {
    grid-template-columns: 1fr;
    gap: 0.1rem 0;
  }

  .kv dd {
    margin-bottom: 0.6rem;
  }
}

.quote {
  border-left: 3px solid var(--border-strong);
  padding: 0.25rem 0 0.25rem 0.9rem;
  color: var(--text-2);
  margin: 0;
  font-style: italic;
}

details.fold summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

details.fold summary::before {
  content: "+";
  font-family: var(--mono);
  color: var(--text-3);
}

details.fold[open] summary::before {
  content: "–";
}

details.fold .body {
  margin-top: 0.75rem;
}

/* Segmented controls */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: flex-end;
}

.control-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.35rem;
}

.seg {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0.2rem;
}

.seg button {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  padding: 0.35rem 0.8rem;
}

.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.seg button:hover:not([aria-pressed="true"]) {
  color: var(--text);
}

.condition-note {
  color: var(--text-2);
  font-size: 0.85rem;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  margin: 1rem 0 1.1rem;
}

.condition-note strong {
  color: var(--text);
  font-weight: 600;
}

/* Sheets */

.sheets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.sheet {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.sheet--control {
  border-style: dashed;
  background: #fbfcfd;
}

.sheet--placeholder {
  border-style: dashed;
  color: var(--text-3);
}

.sheet-head {
  padding: 0.8rem 1rem 0.65rem;
  border-bottom: 1px solid var(--border);
}

.sheet-head .who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.sheet-head h3 {
  font-size: 0.875rem;
  font-weight: 600;
  word-break: break-all;
}

.sheet-head .family {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 0.15rem;
}

.sheet-body {
  padding: 0.9rem 1rem 1rem;
  white-space: pre-wrap;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-2);
  flex: 1;
}

.sheet-body .kop {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}

.sheet-foot {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-3);
}

.sheet-notes {
  padding: 0.65rem 1rem 0.85rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.claim-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.claim-list li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.78rem;
  color: var(--text-2);
}

.transcript-body {
  padding: 0.75rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.turn {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
}

.turn-who {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.2rem;
}

.turn--journalist {
  padding-left: 0.65rem;
  border-left: 2px solid var(--border-strong);
}

.turn--woordvoerder {
  padding-left: 0.65rem;
  border-left: 2px solid var(--text);
}

.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 1.4rem;
  text-align: center;
  color: var(--text-3);
  font-size: 0.875rem;
  margin: 0;
}

/* Prose in cards */

.prose p {
  color: var(--text-2);
}

.prose ul {
  padding-left: 1.2rem;
  color: var(--text-2);
  margin: 0 0 0.85rem;
}

.prose li {
  margin-bottom: 0.35rem;
}

.prose li strong,
.prose p strong {
  color: var(--text);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: 1rem;
}

.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem;
  padding: 2rem 0 1.5rem;
  font-size: 0.8125rem;
  color: var(--text-2);
}

.site-footer h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 0.3rem;
}

.site-footer a {
  color: var(--text-2);
}

.footer-line {
  border-top: 1px solid var(--border);
}

.footer-line .wrap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0 1rem;
  font-size: 0.75rem;
  color: var(--text-3);
}

@media (max-width: 760px) {
  .site-footer .wrap {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .footer-line .wrap {
    flex-direction: column;
    gap: 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ---------------------------------------------------------------- Grafieken */

.chart {
  margin: 0;
}

.chart-controls {
  margin-bottom: 1rem;
}

.chart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 860px) {
  .chart-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chart-plot {
  position: relative;
  min-width: 0;
}

.chart-empty {
  margin: 0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 2.5rem 1rem;
  text-align: center;
}

.chart-caption {
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  color: var(--text-3);
}

.axes {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--sans);
  overflow: visible;
}

.axes .axis {
  stroke: var(--text);
  stroke-width: 1.2;
}

.axes .grid {
  stroke: var(--border);
  stroke-width: 1;
}

.axes .grid--zero {
  stroke: var(--border-strong);
  stroke-dasharray: 3 3;
}

.axes .tick {
  font-size: 9px;
  font-family: var(--mono);
  fill: var(--text-3);
}

.axes .quadrant {
  font-size: 10.5px;
  font-weight: 500;
  fill: var(--text-3);
}

.axes .quadrant--good {
  fill: var(--green);
}

.axes .quadrant--bad {
  fill: var(--red);
}

.axes .axis-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--text-2);
  letter-spacing: 0.02em;
}

.axes .note {
  font-size: 12px;
  fill: var(--text-2);
}

.axes .frontier {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
}

.axes .frontier--live {
  stroke-dasharray: none;
  stroke: var(--border-strong);
  stroke-width: 1.4;
}

.axes .threshold-zone {
  fill: var(--red);
  fill-opacity: 0.06;
  stroke: var(--red);
  stroke-opacity: 0.35;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* Eén model uitlichten: de rest dooft, de gekozen komt naar voren. */
.axes .series {
  cursor: pointer;
  transition: opacity 120ms ease;
}

.axes .series.is-dim {
  opacity: 0.16;
}

.axes .dot-hit,
.axes .track-hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 14;
}

.axes .err {
  stroke-width: 1.2;
  opacity: 0.65;
}

.axes .dot {
  stroke: var(--surface);
  stroke-width: 1.5;
  transition: r 120ms ease;
}

.axes .dot--pareto {
  stroke: var(--text);
  stroke-width: 2;
}

.axes .dot--start {
  stroke-width: 1.6;
}

.axes .track {
  fill: none;
  stroke-width: 1.6;
  opacity: 0.75;
}

.axes .track-head {
  opacity: 0.85;
}

/* Legenda naast de grafiek: tegelijk het bedieningspaneel. */
.chart-legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.legend-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: var(--text-2);
}

.legend-row:hover,
.legend-row.is-active {
  background: var(--surface-2);
  color: var(--text);
}

.legend-row[aria-pressed="true"] {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

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

.legend-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--swatch);
  flex: none;
  margin-top: 0.22rem;
}

/* Vorm en kleur van het model, dezelfde markering als in het vlak. */
.legend-glyph {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  margin-top: 0.15rem;
  overflow: visible;
}

.legend-swatch.is-ring {
  background: var(--surface);
  border: 2px solid var(--swatch);
}

/* Twee regels per model: naam en rang naast elkaar, de waarden eronder. Met
   vier regels per model werd de legenda bij tien modellen twee keer zo hoog als
   de grafiek, met een leeg vlak eronder. */
.legend-text {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.05rem;
}

.legend-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.legend-sub {
  font-size: 0.7rem;
  color: var(--text-3);
}

.legend-values {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.1rem 0.55rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
}

.legend-key {
  opacity: 0.75;
}

.legend-hint {
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  color: var(--text-3);
}

/* Tooltip in HTML, geplaatst op viewBox-coördinaten als percentage. */
.chart-tip {
  position: absolute;
  transform: translate(0.75rem, -50%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--swatch);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 0.5rem 0.65rem;
  min-width: 11rem;
  pointer-events: none;
  z-index: 2;
}

.chart-tip.is-flipped {
  transform: translate(calc(-100% - 0.75rem), -50%);
}

.chart-tip-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.chart-tip dl {
  margin: 0;
  display: grid;
  gap: 0.12rem;
}

.chart-tip dl > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.72rem;
}

.chart-tip dt {
  color: var(--text-3);
}

.chart-tip dd {
  margin: 0;
  font-family: var(--mono);
  color: var(--text);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .axes .series,
  .axes .dot {
    transition: none;
  }
}

/* Alleen voor schermlezers: meldt welk model is uitgelicht. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.axes .grid--gain {
  stroke: var(--red);
  stroke-opacity: 0.4;
  stroke-dasharray: 4 4;
}

/* IJkpunt van de controletekst en de sleutel bij de stipgrootte */
.axes .anchor-line {
  stroke: var(--text-3);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0.7;
}

.axes .anchor-dot {
  fill: var(--surface);
  stroke: var(--text-2);
  stroke-width: 1.4;
}

.axes .anchor-label {
  fill: var(--text-2);
}

.size-key {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

/* Onder het vlak: titel, sleutel en uitleg naast elkaar. */
.chart-main .size-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.chart-main .size-key .control-label,
.chart-main .size-key .legend-hint {
  margin: 0;
}

.chart-main {
  min-width: 0;
}

.size-key-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
}

.size-key-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.size-key-row svg {
  width: 1.5rem;
  height: 1.5rem;
  overflow: visible;
}

.size-key-row circle {
  fill: var(--text-3);
  opacity: 0.5;
}

/* Tekstkaartjes inklappen: vijf persberichten naast elkaar zijn anders een muur */
.sheet-body.is-clamped {
  max-height: 16rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}

.sheet-more {
  align-self: flex-start;
  margin: 0 1rem 0.9rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0.15rem 0;
  cursor: pointer;
}

.sheet-more:hover {
  text-decoration: underline;
}

.sheet-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Kruisverhoor staat dicht; de kop blijft klikbaar */
details.transcript > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

details.transcript > summary::-webkit-details-marker {
  display: none;
}

details.transcript > summary::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 1.1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform 120ms ease;
}

details.transcript[open] > summary::after {
  transform: rotate(-135deg);
  top: 1.3rem;
}

details.transcript > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  details.transcript > summary::after {
    transition: none;
  }
}

/* Wat het publiek uit een tekst haalde: dicht, want detail bij de tekst */
.panel-block {
  border-top: 1px solid var(--border);
  padding: 0 1rem 0.9rem;
}

.panel-block > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.65rem 1.6rem 0.65rem 0;
  position: relative;
}

.panel-block > summary::-webkit-details-marker {
  display: none;
}

.panel-block > summary::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: 0.95rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
}

.panel-block[open] > summary::after {
  transform: rotate(-135deg);
  top: 1.1rem;
}

.panel-block > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.panel-title {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-2);
}

.panel-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.75rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 0.15rem;
}

.panel-block h4 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0.8rem 0 0.4rem;
}

.panel-block .table {
  font-size: 0.75rem;
}

.panel-block .table td,
.panel-block .table th {
  padding: 0.35rem 0.5rem;
}

.meter {
  display: inline-block;
  width: 3.5rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  vertical-align: middle;
}

.meter-fill {
  display: block;
  height: 100%;
  background: var(--text-3);
}

.meter-fill--favour {
  background: var(--green);
}

.meter-fill--burden {
  background: var(--red);
}

.answers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}

.answer {
  font-size: 0.68rem;
  font-family: var(--mono);
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.35rem;
}

.answer--right {
  color: var(--green);
  background: var(--green-soft);
}

/* Beoordeelde beweringen: dicht, met dezelfde greep als de andere details */
.claims-block > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-3);
  padding: 0.3rem 1.2rem 0.3rem 0;
  position: relative;
  display: inline-block;
}

.claims-block > summary::-webkit-details-marker {
  display: none;
}

.claims-block > summary::after {
  content: "";
  position: absolute;
  right: 0.2rem;
  top: 0.55rem;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
}

.claims-block[open] > summary::after {
  transform: rotate(-135deg);
  top: 0.65rem;
}

.claims-block > summary:hover {
  color: var(--text);
}

.claims-block > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Kenmerken van een leespositie, als een rij kleine labels */
.trait-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.trait-row .tag {
  font-size: 0.68rem;
}


/* ================================================================ Beweging
 *
 * Eén laag voor alle beweging op de site. De regels hierboven bepalen hoe de
 * pagina eruitziet; deze laag bepaalt alleen hoe hij van de ene toestand naar
 * de andere komt. Dat is met opzet gescheiden: beweging is het eerste wat je
 * wilt kunnen uitzetten, en het laatste waar je een lay-out van wilt laten
 * afhangen.
 *
 * Twee afspraken:
 *  - Niets hangt af van beweging. Elke eindtoestand is ook de toestand die je
 *    krijgt zonder JavaScript en met bewegingsvoorkeur "minder".
 *  - Korte tijden. 120–260 ms voor bediening, 420 ms voor binnenkomen. Langer
 *    voelt traag op een pagina waar je vooral leest.
 */

:root {
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
  --t-1: 120ms;
  --t-2: 180ms;
  --t-3: 260ms;
  --t-4: 420ms;
}

/* -- Binnenkomen: pas zichtbaar zodra het in beeld komt ------------------ *
 *
 * De verbergende regel staat alleen in deze media-query en wordt alleen
 * toegepast op elementen die JavaScript zelf van de klasse `reveal` heeft
 * voorzien. Zonder JavaScript, en bij bewegingsvoorkeur "minder", bestaat de
 * verborgen toestand dus niet en staat alles er gewoon.
 */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity var(--t-4) var(--ease-out),
      transform var(--t-4) var(--ease-out);
  }

  .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .reveal--soft {
    transform: translateY(5px);
    transition-duration: var(--t-3);
  }

  /* Balkjes in de paneelblokken groeien mee met het kaartje eromheen. */
  .reveal .meter-fill,
  .reveal.meter-fill {
    transform: scaleX(0);
    transition: transform 640ms var(--ease-out) 120ms;
  }

  .reveal.is-in .meter-fill,
  .reveal.is-in.meter-fill {
    transform: scaleX(1);
  }
}

/* -- Bediening: kleur, rand en schaduw lopen, nooit de lay-out ------------ */

a {
  transition: color var(--t-1) var(--ease);
}

.btn {
  transition:
    background-color var(--t-2) var(--ease),
    border-color var(--t-2) var(--ease),
    color var(--t-2) var(--ease),
    box-shadow var(--t-2) var(--ease),
    transform var(--t-1) var(--ease);
}

.btn:hover {
  box-shadow: 0 1px 6px rgba(16, 24, 40, 0.07);
}

.btn:active {
  transform: scale(0.975);
  transition-duration: 60ms;
}

.btn--primary:hover {
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18);
}

.pill-nav a,
.locale-switch a {
  transition:
    background-color var(--t-2) var(--ease),
    color var(--t-2) var(--ease),
    box-shadow var(--t-2) var(--ease);
}

.pill-nav a:hover:not([aria-current="page"]),
.locale-switch a:hover:not([aria-current="true"]) {
  background: rgba(16, 24, 40, 0.04);
}

.brand {
  transition: transform var(--t-2) var(--ease-spring), box-shadow var(--t-2) var(--ease);
}

.brand:hover {
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.22);
}

.brand:active {
  transform: scale(0.98);
}

/* Het merkteken is een grafiek: bij aanwijzen tekent de baan zich af en tilt
   het punt zich op. Eén beweging, geen tweede betekenis. */
.brand-mark path,
.brand-mark circle {
  transition:
    opacity var(--t-3) var(--ease),
    transform var(--t-3) var(--ease-spring),
    stroke-dashoffset var(--t-4) var(--ease-out);
  transform-box: view-box;
}

.brand-mark path[stroke-dasharray] {
  stroke-dashoffset: 0;
}

.brand:hover .brand-mark path[stroke-dasharray] {
  opacity: 1;
  stroke-dashoffset: -9;
}

.brand:hover .brand-mark circle {
  transform-origin: 23px 9.5px;
  transform: translateY(-1.2px) scale(1.12);
}

.skip-link {
  transition: left var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease);
}

.sidenav li a {
  transition: color var(--t-2) var(--ease), transform var(--t-2) var(--ease-out);
}

.sidenav li a:hover {
  transform: translateX(2px);
}

.sidenav li a::before {
  transition:
    background-color var(--t-3) var(--ease),
    transform var(--t-3) var(--ease-spring),
    border-radius var(--t-3) var(--ease);
}

.sidenav li a.is-active::before {
  transform: scale(1.25);
  border-radius: 2px;
}

@media (max-width: 900px) {
  .sidenav li a:hover {
    transform: none;
  }
}

/* Een titel van meer dan één regel liet het vierkantje ernaast in het midden
   zweven. Het hoort bij de eerste regel te staan, dus lijnt het op de bovenkant
   uit met een insprong ter hoogte van een halve regel. */
.page-title h1 {
  align-items: flex-start;
}

.page-title h1::before {
  margin-top: 0.33em;
}

/* -- Kaarten en rijen: één millimeter optillen, meer niet ----------------- */

.card {
  transition: box-shadow var(--t-3) var(--ease), border-color var(--t-3) var(--ease);
}

.layer,
.sheet {
  transition: border-color var(--t-3) var(--ease), box-shadow var(--t-3) var(--ease);
}

.layer:hover,
.sheet:hover {
  border-color: var(--border-strong);
  box-shadow: 0 1px 8px rgba(16, 24, 40, 0.05);
}

.scenario-row {
  transition:
    border-color var(--t-2) var(--ease),
    background-color var(--t-2) var(--ease),
    box-shadow var(--t-3) var(--ease),
    transform var(--t-3) var(--ease-out);
}

.scenario-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.07);
}

.scenario-row:active {
  transform: translateY(0);
  transition-duration: 60ms;
}

.table tbody tr {
  transition: background-color var(--t-1) var(--ease);
}

.table tbody tr:hover {
  background: var(--surface-2);
}

.table--rounded .table tbody tr:hover td.id,
.table--rounded .table tbody tr:hover td.dash {
  color: var(--text-2);
}

.meter-fill {
  transform-origin: left center;
}

/* -- Kop: krimpt bij scrollen en draagt de leesvoortgang ------------------ */

.site-header {
  transition:
    box-shadow var(--t-3) var(--ease),
    background-color var(--t-3) var(--ease);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 14px rgba(16, 24, 40, 0.07);
}

@media (min-width: 801px) {
  .site-header .wrap {
    transition: height var(--t-3) var(--ease);
  }

  .site-header.is-scrolled .wrap {
    height: 52px;
  }
}

.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  overflow: hidden;
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.85;
}

/* -- Segmentknop: de witte pil schuift mee ------------------------------- *
 *
 * De pil is een los element dat JavaScript erin zet en over de ingedrukte knop
 * legt. Lukt dat niet, dan houdt de knop zijn eigen witte achtergrond; de
 * klasse `has-thumb` schakelt die pas uit zodra de pil er echt is.
 */

.seg {
  position: relative;
}

.seg button {
  position: relative;
  z-index: 1;
  transition: color var(--t-2) var(--ease), background-color var(--t-2) var(--ease);
}

.seg button:active {
  transform: scale(0.97);
}

.seg.has-thumb button[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
}

.seg-thumb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
}

.seg.is-ready .seg-thumb {
  transition:
    transform var(--t-3) var(--ease-spring),
    width var(--t-3) var(--ease-spring),
    height var(--t-3) var(--ease-spring),
    opacity var(--t-1) linear;
}

/* -- Uitklappen ---------------------------------------------------------- */

.claims-block > summary::after,
.panel-block > summary::after {
  transition: transform var(--t-2) var(--ease), top var(--t-2) var(--ease);
}

.claims-block > summary,
.panel-block > summary,
.sheet-more {
  transition: color var(--t-2) var(--ease);
}

/* Hoogte van een uitklapblok laten lopen. Vraagt `interpolate-size`, want
   `auto` is anders geen waarde waar je naartoe kunt animeren. Browsers die het
   niet kennen klappen open zoals altijd. */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  @media (prefers-reduced-motion: no-preference) {
    details.transcript::details-content,
    details.panel-block::details-content,
    details.claims-block::details-content,
    details.fold::details-content {
      block-size: 0;
      overflow: clip;
      transition:
        block-size var(--t-3) var(--ease),
        content-visibility var(--t-3) allow-discrete;
    }

    details.transcript[open]::details-content,
    details.panel-block[open]::details-content,
    details.claims-block[open]::details-content,
    details.fold[open]::details-content {
      block-size: auto;
    }
  }
}

/* -- Grafieken ----------------------------------------------------------- */

.axes .series {
  transition: opacity var(--t-2) var(--ease);
}

.axes .dot {
  transition: r var(--t-2) var(--ease-spring), stroke-width var(--t-2) var(--ease);
}

.legend-row {
  transition:
    background-color var(--t-2) var(--ease),
    border-color var(--t-2) var(--ease),
    color var(--t-2) var(--ease),
    transform var(--t-2) var(--ease-out);
}

.legend-row:hover {
  transform: translateX(2px);
}

.legend-swatch {
  transition: transform var(--t-2) var(--ease-spring), box-shadow var(--t-2) var(--ease);
}

.legend-glyph {
  transition: transform var(--t-2) var(--ease-spring);
}

.legend-row:hover .legend-swatch,
.legend-row.is-active .legend-swatch,
.legend-row:hover .legend-glyph,
.legend-row.is-active .legend-glyph {
  transform: scale(1.25);
}

@media (prefers-reduced-motion: no-preference) {
  /* Elk model komt kort na het vorige binnen. `backwards` en niet `both`: na
     afloop mag de animatie niets meer vasthouden, anders wint zij van het
     doven van de niet-uitgelichte modellen. */
  .axes .series {
    animation: series-in var(--t-4) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 55ms);
  }

  @keyframes series-in {
    from {
      opacity: 0;
      transform: translateY(7px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Het Pareto-front tekent zichzelf. `pathLength="1"` maakt de streeplengte
     onafhankelijk van de werkelijke lengte van het pad. */
  .axes .frontier--live {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw-line 900ms var(--ease-out) 200ms forwards;
  }

  @keyframes draw-line {
    to {
      stroke-dashoffset: 0;
    }
  }

  .axes .threshold-zone,
  .axes .anchor,
  .axes .quadrant,
  .axes .axis-label {
    animation: soft-in 600ms var(--ease-out) backwards;
  }

  .axes .threshold-zone {
    animation-delay: 80ms;
  }

  @keyframes soft-in {
    from {
      opacity: 0;
    }
  }

  .chart-tip {
    animation: tip-in var(--t-2) var(--ease-out) backwards;
  }

  @keyframes tip-in {
    from {
      opacity: 0;
      transform: translate(0.35rem, -50%);
    }
  }

  .chart-tip.is-flipped {
    animation-name: tip-in-flipped;
  }

  @keyframes tip-in-flipped {
    from {
      opacity: 0;
      transform: translate(calc(-100% - 0.35rem), -50%);
    }
  }
}

/* -- Bewegingsvoorkeur "minder": alles stil ------------------------------ */

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

  .scroll-progress {
    display: none;
  }
}


/* ========================================================== Smalle schermen
 *
 * De site was voor een beeldscherm gemaakt en week op een telefoon zijwaarts
 * uit: de pagina werd tot vier keer breder dan het venster, en je las alles
 * half. De oorzaak zat niet in de inhoud maar in twee dingen die geen grens
 * hadden. Deze laag zet die grenzen en maakt daarna wat écht breed is
 * afzonderlijk schuifbaar, in plaats van de hele pagina mee te sleuren.
 */

/* -- De grens ------------------------------------------------------------ *
 *
 * `main` is een flexitem van `body` en een rastercel is `.sidenav`; allebei
 * krijgen ze van zichzelf `min-width: auto` en groeien dus mee met hun breedste
 * kind. Eén regel per stuk houdt ze binnen het venster. Zonder dit helpt geen
 * enkele media-query, want de breedte ontstaat een niveau hoger.
 */

main,
.shell,
.sidenav,
.content,
.card {
  min-width: 0;
}

/* Hetzelfde geldt een niveau dieper. Een rastercel krijgt van zichzelf
   `min-width: auto` en kan dus niet smaller worden dan zijn breedste kind. Eén
   scenariorij met vier cijfers naast elkaar maakte op die manier de hele kolom
   327 pixels breed, en daarmee de kaart, de inhoud en de pagina. Met een nul
   krimpt de kolom gewoon mee en is het aan de inhoud zelf om te vouwen of te
   schuiven, wat hieronder geregeld is. */
.content > *,
.card-list > *,
.sheets > *,
.layers > *,
.rules > li,
.chart-layout > *,
.scenario-row > * {
  min-width: 0;
}

/* Een afbeelding die breder is dan zijn kolom hoort te krimpen, niet uit te
   steken. Dit ontbrak nog helemaal. */
img {
  max-width: 100%;
  height: auto;
}

/* Laatste vangnet: raakt er ooit toch iets buiten beeld, dan mag dat de pagina
   niet zijwaarts laten schuiven. `clip` en niet `hidden`, want `hidden` maakt
   van de pagina een schuifvlak en breekt `position: sticky` in de kop. */
html {
  overflow-x: clip;
}

/* -- Wat breed is, schuift zelf ----------------------------------------- */

/* Een tabel werd afgeknipt: het omhulsel stond op `overflow: hidden` om de
   ronde hoeken te maken, en alles buiten de rand was onbereikbaar. Nu schuift
   hij horizontaal en blijven de hoeken rond. */
.table--rounded {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}

/* Getallen met hun interval horen op één regel; anders wordt een kolom van
   "0.76 (0.70–0.82)" drie regels hoog en lijkt de tabel te passen terwijl hij
   onleesbaar is geworden. */
.table td.dash,
.table td.id {
  white-space: nowrap;
}

.chart-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* De kaartjes met perstekst stonden op minimaal 19rem. Op een smal scherm past
   dat niet en liep de rij buiten beeld. `min()` laat ze daar de volle breedte
   nemen en verder gewoon naast elkaar staan. */
.sheets {
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}

/* -- Onder de 900 pixels: de kop is hoger, dus ankers ook --------------- */

@media (max-width: 900px) {
  /* De kop is hier twee regels hoog; een anker moet daar onderlangs landen. */
  html {
    scroll-padding-top: 8.5rem;
  }

  .card {
    scroll-margin-top: 8.5rem;
  }

  /* Compacter, want een vaste kop van 123 pixels eet een zevende van een
     telefoonscherm op. */
  .site-header .wrap {
    padding: 0.45rem 0;
    gap: 0.45rem;
  }

  .pill-nav {
    padding: 0.15rem;
  }

  .sidenav ul {
    scrollbar-width: none;
  }

  .sidenav ul::-webkit-scrollbar {
    display: none;
  }
}

/* -- Onder de 700 pixels: de grafiek op ware grootte -------------------- *
 *
 * Het spreidingsdiagram is 600 bij 400 eenheden. Geschaald naar 350 pixels
 * wordt een aslabel van 9 eenheden zo'n 5 pixels hoog, en dat leest niemand.
 * Hij houdt daarom een minimumbreedte en schuift zelf. De tooltip verlaat dan
 * de zwevende plaatsing: die hoort bij een stip die weggeschoven kan zijn, dus
 * hij gaat als blokje onder de grafiek staan.
 */

@media (max-width: 700px) {
  .axes {
    min-width: 32rem;
  }

  .chart-tip {
    position: static;
    transform: none;
    margin-top: 0.75rem;
    min-width: 0;
  }

  .chart-tip.is-flipped {
    transform: none;
  }

  .chart-tip dl > div {
    font-size: 0.78rem;
  }
}

/* -- Onder de 640 pixels: ruimte terugwinnen ---------------------------- */

@media (max-width: 640px) {
  .wrap {
    width: calc(100% - 1.6rem);
  }

  /* Vier cijfers naast elkaar passen niet op een telefoon; ze gaan op twee
     regels in plaats van de rij breder te maken dan het scherm. */
  .stats {
    flex-wrap: wrap;
    gap: 0.65rem 1.1rem;
  }

  .seg {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .controls {
    width: 100%;
  }

  .card {
    padding: 1rem 1.05rem;
  }

  .shell {
    padding: 1.25rem 0 3rem;
  }

  .page-title h1 {
    font-size: 1.5rem;
  }

  .card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .card-head .actions {
    flex-wrap: wrap;
  }

  .card-foot {
    flex-direction: column;
    gap: 0.25rem;
  }

  .cta-row .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .rules li {
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: 0.5rem;
  }

  .sheet-head,
  .sheet-body,
  .sheet-foot,
  .panel-block {
    padding-inline: 0.85rem;
  }

  .sheet-more {
    margin-inline: 0.85rem;
  }

  /* Een invoerveld onder 16 pixels laat iOS bij aanraken inzoomen, en dan staat
     de pagina scheef zonder dat je iets fout deed. */
  .veld textarea,
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* -- Aanraakschermen: knoppen waar een vinger op past ------------------- *
 *
 * Op een muis is een doel van 33 pixels prima, op een vingertop niet. Dit geldt
 * alleen voor een grof aanwijsapparaat, zodat de dichte opmaak op een
 * beeldscherm blijft zoals hij is.
 */

@media (pointer: coarse) {
  .pill-nav a,
  .locale-switch a,
  .seg button,
  .sidenav li a,
  .legend-row,
  .btn,
  .sheet-more {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
  }

  .legend-row,
  .sidenav li a {
    display: flex;
  }

  /* De stip hoort naast de modelnaam te staan, niet naast het midden van het
     hele blokje; `align-items: center` hierboven zette hem scheef. */
  .legend-row {
    align-items: flex-start;
  }

  .btn {
    padding-block: 0.65rem;
  }

  .claims-block > summary,
  .panel-block > summary,
  details.fold summary {
    min-height: 38px;
    display: flex;
    align-items: center;
  }

  /* Een selectievakje van 13 pixels is met een vinger niet te raken. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px;
    height: 22px;
  }

  /* Zwevende toestanden hebben op een aanraakscherm geen betekenis; ze blijven
     na een tik hangen en lijken dan een selectie. */
  .scenario-row:hover {
    transform: none;
    box-shadow: none;
  }

  .legend-row:hover {
    transform: none;
  }
}

/* Condities buiten de drukreeks: los ruitje, geen punt op de lijn */
.axes .dot--aside {
  stroke-width: 1.6;
}