/* ════════════════════════════════════════════════
   Checked.be — Veritas Intelligence design system
   Clean · Light · Inter + JetBrains Mono · "The Truth in the Data"
   ────────────────────────────────────────────────
   NOTE (Phase 1, 2026-05-29): the legacy :root block that previously lived
   here (defining --bg / --ink / --fg-mid / --line / --risk-* / --shadow-*
   etc. with hardcoded Veritas hex values) was DELETED. Those tokens are
   now defined exclusively in wwwroot/Tokens.css's legacy-aliases block,
   which maps them onto the new --ds-* M scale. See Tokens.css for details.
   ════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); color-scheme: light; }
/* Clip stray horizontal overflow (off-canvas AI/compare drawers sit at
   right:0 + translateX(100%); on mobile that widened the layout and pushed the
   fixed "Vraag AI" FAB off the right edge). `clip` (not `hidden`) clips without
   creating a scroll container, so the sticky dossier tabs keep working. */
html, body { overflow-x: clip; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11" 1, "ss01" 1;
  /* Crisp warm-white surface — NO tinted gradients (light doctrine 2026-06). */
  background: var(--bg);
}

/* Serif voice for the "editorial intelligence" headlines */
.serif { font-family: var(--serif); }
.serif-italic { font-family: var(--serif); font-style: italic; font-variation-settings: "SOFT" 80; }

/* Premium hero numeric — Fraunces variable axes for soft optical weight */
.mega-num {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

/* Subtle dotted-grid backdrop you can drop on any section */
.grid-dots {
  background-image: radial-gradient(rgba(19, 27, 46, 0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: -1px -1px;
}
.grid-dots-soft {
  background-image: radial-gradient(rgba(19, 27, 46, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }

/* ───── typography helpers ───── */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1;
  letter-spacing: -0.005em;
}
.tnum { font-variant-numeric: tabular-nums; }

.h-display {
  font-family: var(--serif);
  font-size: var(--ds-fs-48);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.h1 {
  font-family: var(--serif);
  font-size: var(--ds-fs-31);
  line-height: 1.12;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.h2 {
  font-family: var(--serif);
  font-size: var(--ds-fs-25);
  line-height: 1.18;
  letter-spacing: -0.014em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.h3 {
  font-size: var(--ds-fs-18);
  line-height: 24px;
  letter-spacing: -0.005em;
  font-weight: 600;
  margin: 0;
  color: var(--ink-soft);
}
.body-lg { font-size: var(--ds-fs-16); line-height: 24px; }
.body-md { font-size: 14px; line-height: 20px; }
.body-sm { font-size: 12px; line-height: 16px; }
.label-caps {
  font-size: 11px; font-weight: 600; line-height: 16px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-mute);
}
.data-mono {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500; line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--fg-mute); }
.mid { color: var(--fg-mid); }

/* ───── app shell ───── */
.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

/* ───── chrome (top nav) ───── */
.chrome {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 249, 251, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.chrome .brand {
  font-family: var(--serif);
  font-size: var(--ds-fs-20);
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.chrome-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.chrome .brand {
  font-family: var(--sans);
  font-size: var(--ds-fs-18);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.chrome nav { display: flex; gap: 24px; align-items: center; flex-shrink: 0; }
.chrome nav button {
  font-size: 14px;
  color: var(--fg-mid);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-1) var(--ds-ease-out);
  font-weight: 500;
  white-space: nowrap;
}
.chrome nav button:hover { color: var(--ink); }
.chrome nav button.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

.chrome .spacer { flex: 1; }

.chrome-search {
  position: relative;
  width: 240px;
  flex-shrink: 1;
  min-width: 0;
}
.chrome-search input {
  width: 100%;
  background: var(--bg-low);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  outline: none;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), background var(--ds-dur-1) var(--ds-ease-out);
}
.chrome-search input:focus { border-color: var(--ink); background: var(--bg-lowest); }
.chrome-search input::placeholder { color: var(--fg-mute); }
.chrome-search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-mute); display: inline-flex; }

.lang-switch {
  display: inline-flex;
  background: var(--bg-low);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2px;
}
.lang-switch button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 3px;
  color: var(--fg-mute);
  font-weight: 500;
}
.lang-switch button.active { background: var(--bg-lowest); color: var(--ink); box-shadow: var(--shadow-1); }

/* ───── container ───── */
.page {
  max-width: var(--ds-content-max, 1440px);
  margin: 0 auto;
  padding: 32px;
  width: 100%;
  /* border-box, or the padding is ADDED to the 100 per cent. Measured 2026-09-03
     on /live at a 360px viewport: .page rendered 380px wide (padding 10px each
     side, content-box) with a -20px right margin from `margin: 0 auto`, so every
     page's content sat 10px into the zone html/body clip away, and the last
     filter chip ("Einde") ended at x=366 where nobody could reach it. The same
     arithmetic overflows at every viewport narrower than max-width plus padding;
     the clip just hid it, and it blinded the scrollWidth probe as well. */
  box-sizing: border-box;
}
.page.narrow { max-width: 920px; }
.page.wide { max-width: 1600px; }

/* ───── cards ───── */
.card {
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.card-h {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-h .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.card-h .meta {
  font-size: 12px;
  color: var(--fg-mute);
  font-family: var(--mono);
}
.card-b { padding: 20px; }

/* ───── chips ───── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--line);
  background: var(--bg-lowest);
  color: var(--fg-mid);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--fg-mute); }
/* Outline doctrine: coloured text + border + dot on white — no tinted fills. */
.chip.low, .chip.ok { color: #047857; background: var(--bg-lowest); border-color: var(--risk-low-border); }
.chip.low .dot, .chip.ok .dot { background: var(--risk-low); }
.chip.med, .chip.warn { color: #b45309; background: var(--bg-lowest); border-color: var(--risk-med-border); }
.chip.med .dot, .chip.warn .dot { background: var(--risk-med); }
.chip.high, .chip.bad { color: #b91c1c; background: var(--bg-lowest); border-color: var(--risk-high-border); }
.chip.high .dot, .chip.bad .dot { background: var(--risk-high); }
.chip.info { color: #1d4ed8; background: var(--bg-lowest); border-color: #bfdbfe; }
.chip.info .dot { background: var(--data-blue); }
.chip.solid { background: var(--bg-lowest); color: var(--ink); border-color: var(--ink); font-weight: 600; }
.chip.solid .dot { background: var(--ds-accent); }
.chip.mono { font-family: var(--mono); font-size: 11px; }

/* ───── buttons ─────
   Doctrine: primary = solid emerald with white text; secondary = white
   with an ink border; ghost = quiet text button. No black/navy fills. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--ink);
  background: var(--bg-lowest);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-1) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-low); }
.btn:active { transform: translateY(0.5px); }
.btn.primary {
  background: var(--ds-accent); color: var(--fg-inv); border-color: var(--ds-accent);
}
.btn.primary:hover { background: var(--ds-accent-deep); border-color: var(--ds-accent-deep); }
.btn.alert {
  background: var(--ds-accent); color: var(--fg-inv); border-color: var(--ds-accent);
}
.btn.alert:hover { background: var(--ds-accent-deep); border-color: var(--ds-accent-deep); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--fg-mid); }
.btn.ghost:hover { background: var(--bg-low); color: var(--ink); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.lg { padding: 11px 18px; font-size: 14px; }

.btn .ico { width: 16px; height: 16px; display: inline-flex; }

/* ───── KPI ───── */
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi .label {
  font-size: 12px; font-weight: 500; color: var(--fg-mute);
  letter-spacing: -0.005em;
}
.kpi .value {
  font-family: var(--mono);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi .value.lg { font-size: var(--ds-fs-39); }
.kpi .sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
}
.kpi .delta {
  font-family: var(--mono);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
}
.kpi .delta.up { color: var(--risk-low); }
.kpi .delta.down { color: var(--risk-high); }
.kpi .delta.flat { color: var(--fg-mute); }

/* ───── table ───── */
table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.t thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  background: var(--bg-lowest);
  border-bottom: 2px solid var(--ink);
}
table.t th.num, table.t td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.t tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--fg);
}
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--bg); }

/* ───── divider ───── */
.hr { height: 1px; background: var(--line-soft); margin: 16px 0; }

/* ───── grid helpers ───── */
.row { display: flex; gap: 16px; }
.col { display: flex; flex-direction: column; gap: 16px; }
.g-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.g-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.g-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ───── metric chart wall (financials sparklines) ───── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.metric-tile {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 12px 14px 11px;
  background: var(--bg-lowest);
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.metric-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.metric-tile .m-label {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 500;
}
.metric-tile .m-value {
  font-family: var(--mono); font-size: var(--ds-fs-20); font-weight: 600;
  color: var(--ink-soft); margin-top: 3px; line-height: 1.1;
}
.metric-tile .sparkline { display: block; width: 100%; height: 34px; margin-top: 8px; }
.metric-tile .m-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px;
}
.metric-tile .m-yoy { font-family: var(--mono); font-size: 11px; font-weight: 600; white-space: nowrap; }
.metric-tile .m-range { font-family: var(--mono); font-size: 10px; color: var(--fg-dim); white-space: nowrap; }
.m-up   { color: var(--risk-low); }
.m-down { color: var(--risk-high); }
.m-flat { color: var(--fg-dim); }

/* ───── health barometer ───── */
.barometer {
  position: relative;
  height: 12px;
  margin-top: 16px;
  border-radius: var(--r-full);
  /* red → amber → green: position on the track reads as health */
  background: linear-gradient(90deg,
    var(--risk-high) 0%,
    var(--risk-med) 50%,
    var(--risk-low) 100%);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.06);
}
.barometer-marker {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  transform: translateY(-50%);
  border-radius: var(--r-full);
  background: var(--bg-lowest);
  border: 2.5px solid var(--ink-soft);
  box-shadow: var(--shadow-1);
}
.barometer-scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--fg-dim);
  margin-top: 5px;
}
.health-components {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 18px;
}
.health-comp {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
  /* A grid item defaults to min-width:auto, so a row of nowrap spans pushed
     this 16px past a 360px viewport and the +10/-60 deltas fell off the right
     edge (measured at a true 360 via CDP device metrics, 2026-08-11). Both this
     and the min-width:0 on .hc-detail below are needed: the grid item has to be
     allowed to shrink before the flex child inside it can. */
  min-width: 0;
}
/* An insolvency row is what a credit reader opened this card for, and it carries
   the longest detail in the breakdown ("Open faillissement in de
   KBO-rechtstoestand", "3 WER Boek XX-event(s)"). One third of a grid row plus
   an ellipsis is the wrong place to economise, so it spans the full width. */
.health-comp.hc-insolvency { grid-column: 1 / -1; }
.health-comp .hc-label { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.health-comp .hc-detail { color: var(--fg-mute); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-comp .hc-delta { font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ───── ownership structure ───── */
.own-list { display: flex; flex-direction: column; gap: 8px; }
.own-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.own-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.own-name { font-weight: 500; color: var(--ink-soft); font-size: 14px; text-decoration: none; }
a.own-name:hover { color: var(--ds-accent-deep); }
.own-meta { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; font-size: 11px; color: var(--fg-mute); margin-top: 3px; }
.own-meta .mono { font-size: 11px; }
.own-arrow { color: var(--fg-mute); font-size: 14px; }

/* ───── establishment units (vestigingseenheden) ───── */
.estab-list { display: flex; flex-direction: column; gap: 8px; }
.estab-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.estab-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.estab-name { font-weight: 500; color: var(--ink-soft); font-size: 14px; }
.estab-meta { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; font-size: 11px; color: var(--fg-mute); margin-top: 3px; }
/* A NACE label is a sentence, not a status chip. .ds-pill is nowrap by design,
   so 47990 ("zoeken, selecteren, verwijzen en plaatsen van personeel...") left
   its card by 1.260px at a 360px viewport on 2026-08-15 while
   documentElement.scrollWidth stayed equal to clientWidth, because the panel
   clipped it. Same fix the home hero verdict chip already carries. */
.estab-nace { min-width: 0; max-width: 100%; margin-left: 6px; }
.estab-nace .ds-pill {
  white-space: normal;
  max-width: 100%;
  text-align: left;
  line-height: 1.35;
  /* And once it wraps, drop the chip typography with it. A NACE label runs to
     three lines here ("KRUIDENTEELT : KAPPERS, VENKELZAAD, PETERSELIE, KERVEL,
     DRAGON, MARJOLEIN, ENZ"), and three lines of letter-spaced capitals is a
     shout, not a label. Uppercase earns its place on a two-word status chip. */
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 9px;
}
.estab-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; }
.estab-since { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.estab-num { font-size: 11px; color: var(--fg-mute); }
@media (max-width: 560px) {
  .estab-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .estab-side { flex-direction: row; align-items: baseline; justify-content: space-between; text-align: left; }
}

/* ───── KBO registry card (activities / names / office / history) ───── */
.reg-section { margin-bottom: 18px; }
.reg-section:last-of-type { margin-bottom: 8px; }
.reg-section .label-caps { margin-bottom: 8px; }
.reg-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.reg-acts .chip { gap: 5px; }
.reg-nace-code { font-family: var(--mono); font-size: 10px; color: var(--fg-mute); margin-left: 6px; }
.reg-acts .chip.info .reg-nace-code { color: #1d4ed8; opacity: .7; }
.reg-legend { font-size: 11px; color: var(--fg-mute); margin-top: 7px; }
.reg-office { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.reg-timeline { list-style: none; margin: 0; padding: 0; }
.reg-event {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft);
}
.reg-event:last-child { border-bottom: 0; }
.reg-event-dot {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--fg-mute); transform: translateY(-1px);
}
.reg-event-date { flex: 0 0 auto; font-size: 12px; color: var(--fg-mute); min-width: 84px; }
.reg-event-kind { font-size: 13px; color: var(--ink-soft); }

/* ───── financieel profiel (5-axis radar) ───── */
.finprofile-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.finprofile-fig { flex: 0 0 auto; max-width: 100%; }
/* The SVG ships fixed width/height attrs + a viewBox; let it scale down with
   its container on narrow screens while preserving aspect ratio. */
.radar-chart { max-width: 100%; height: auto; }
.radar-chart .radar-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
.radar-chart .radar-score { font-family: var(--mono); font-size: 10px; }
.finprofile-side { flex: 1; min-width: 220px; }
/* Compact: stacked under the Checked score in the hero aside. Radar centred,
   legend full width beneath it, no verdict prose. */
.finprofile-wrap.compact { flex-direction: column; align-items: stretch; gap: 12px; }
.finprofile-wrap.compact .finprofile-fig { align-self: center; }
.finprofile-wrap.compact .finprofile-side { min-width: 0; }
/* Compact: the radar already prints every axis label and score at its vertices,
   so the legend beneath it was the same five numbers a second time (seen on the
   r230 render: "Gezondheid 94 ... Stabiliteit 100" twice within 200px). */
.finprofile-wrap.compact .finprofile-legend { display: none; }
.finprofile-avg { display: flex; align-items: baseline; gap: 6px; }
.finprofile-avg .fp-avg-num { font-family: var(--mono); font-size: var(--ds-fs-39); font-weight: 600; line-height: 1; }
.finprofile-avg .fp-avg-den { font-family: var(--mono); color: var(--fg-mute); }
.finprofile-verdict { font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--ink-soft); margin: 10px 0 16px; }
.finprofile-legend { display: flex; flex-direction: column; gap: 7px; }
.fp-legend-row { display: flex; align-items: center; gap: 10px; }
.fp-legend-bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--bg-mid); overflow: hidden; }
.fp-legend-bar > span { display: block; height: 100%; border-radius: var(--r-full); }
.fp-legend-label { font-size: 12px; color: var(--fg-mid); width: 96px; flex-shrink: 0; }
.fp-legend-score { font-size: 12px; color: var(--ink-soft); width: 26px; text-align: right; }
@media (max-width: 560px) {
  /* Stack the radar over its read-out panel and keep both centered. */
  .finprofile-wrap { gap: 18px; justify-content: center; flex-direction: column; align-items: stretch; }
  .finprofile-fig { align-self: center; }
  .finprofile-side { min-width: 0; width: 100%; }
  .finprofile-avg { justify-content: center; }
  .finprofile-avg .fp-avg-num { font-size: var(--ds-fs-31); }
  .finprofile-verdict { font-size: 15.5px; line-height: 1.4; text-align: center; margin: 8px 0 14px; }
  /* Let the axis label flex instead of a fixed width so long FR labels wrap. */
  .fp-legend-label { width: auto; flex: 1; }
}

/* ───── Belgium province grid-cartogram ───── */
.cartogram { display: flex; flex-direction: column; gap: 16px; }
.cartogram-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cartogram-title { font-family: var(--serif); font-size: 17px; color: var(--ink-soft); }
.cartogram-total { font-size: 13px; color: var(--fg-mute); }
.cartogram-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  grid-template-rows: repeat(5, auto);
  gap: 8px;
  max-width: 560px;
  margin-inline: auto;
}
.cartogram-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.cartogram-tile:hover { box-shadow: var(--shadow-1); }
.cartogram-tile.is-empty { opacity: 0.55; }
.cartogram-tile .ct-name { font-size: 11px; font-weight: 600; line-height: 1.15; letter-spacing: 0.005em; }
.cartogram-tile .ct-abbr { display: none; font-size: 11px; font-weight: 600; }
.cartogram-tile .ct-value { font-size: var(--ds-fs-16); font-weight: 600; line-height: 1; margin-top: 2px; }
.cartogram-legend { display: flex; align-items: center; gap: 8px; }
.cartogram-legend .cl-label { font-size: 11px; color: var(--fg-mute); }
.cartogram-legend .cl-ramp { display: inline-flex; gap: 0; border-radius: var(--r-sm); overflow: hidden; }
.cartogram-legend .cl-ramp i { display: block; width: 22px; height: 10px; }
.cartogram-legend .cl-max { margin-left: auto; font-size: 11px; color: var(--fg-mute); }
@media (max-width: 560px) {
  /* minmax(0,1fr) lets the 5-col grid shrink to fit the card instead of
     overflowing on the narrowest phones; abbreviations keep tiles legible. */
  .cartogram-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; max-width: 100%; }
  .cartogram-tile { min-height: 52px; padding: 6px 4px; align-items: center; text-align: center; }
  .cartogram-tile .ct-name { display: none; }
  .cartogram-tile .ct-abbr { display: block; }
  .cartogram-tile .ct-value { font-size: 13px; }
  /* Legend can crowd at this width — let the max-count label drop to a new row. */
  .cartogram-legend { flex-wrap: wrap; row-gap: 4px; }
}

/* ───── tabs ───── */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;       /* snap each tab to the start edge on scroll */
  scrollbar-width: none;               /* Firefox: hide the horizontal scrollbar */
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
}
.tabs::-webkit-scrollbar { display: none; }   /* WebKit/Blink: hide the scrollbar */
.tabs button, .tabs a {
  font-size: 14px;
  color: var(--fg-mute);
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-settle);
  white-space: nowrap;
  font-weight: 500;
  /* anchor resets so routed <a> tabs match the original button look exactly */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: none;
  cursor: pointer;
  scroll-snap-align: start;
}
.tabs button:hover, .tabs a:hover { color: var(--ink-soft); }
.tabs button.active, .tabs a.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tabs button .count, .tabs a .count {
  font-family: var(--mono); font-size: 11px; color: var(--fg-mute);
  margin-left: 6px; background: var(--bg-low); padding: 1px 6px; border-radius: var(--r-full);
}

/* ───── segmented ───── */
.seg {
  display: inline-flex;
  background: var(--bg-low);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2px;
}
.seg button {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 3px;
  color: var(--fg-mute);
  font-weight: 500;
}
.seg button.active { background: var(--bg-lowest); color: var(--ink); box-shadow: var(--shadow-1); }

/* ───── distress signal row ─────
   White rows; the risk colour rides on a 3px left accent + the icon —
   never on the row fill (light doctrine). */
.signal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  font-size: 13px;
}
.signal .ico {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.signal.low { border-left-color: var(--risk-low); }
.signal.med { border-left-color: var(--risk-med); }
.signal.high { border-left-color: var(--risk-high); }
.signal.low .ico { color: #047857; }
.signal.med .ico { color: #b45309; }
.signal.high .ico { color: #b91c1c; }
.signal .src { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); margin-left: auto; }

/* ───── timeline ───── */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line);
}
.tl-row {
  position: relative;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: center;
}
.tl-row:last-child { border-bottom: 0; }
.tl-row::before {
  content: ""; position: absolute; left: -19px; top: 22px;
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: var(--bg-lowest); border: 2px solid var(--fg-mute);
}
.tl-row.low::before { border-color: var(--risk-low); }
.tl-row.med::before { border-color: var(--risk-med); }
.tl-row.high::before { border-color: var(--risk-high); background: var(--risk-high); }
.tl-date { font-family: var(--mono); font-size: 12px; color: var(--fg-mute); }
.tl-body { font-size: 13px; }
.tl-body .name { font-weight: 500; color: var(--ink-soft); }
.tl-body .meta { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); margin-top: 3px; }

/* ───── benchmark bar ───── */
.bench { display: grid; grid-template-columns: 160px 1fr 70px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.bench:last-child { border-bottom: 0; }
.bench .label { font-size: 13px; color: var(--fg); }
.bench .num { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--ink-soft); }
.bench .track { position: relative; height: 8px; background: var(--bg-mid); border-radius: var(--r-full); overflow: visible; }
.bench .track .median { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }
.bench .track .you { position: absolute; top: -2px; width: 12px; height: 12px; border-radius: var(--r-full); background: var(--ink); transform: translateX(-6px); border: 2px solid var(--bg-lowest); box-shadow: 0 0 0 1px var(--ink); }
.bench .track .range { position: absolute; top: 1px; bottom: 1px; background: var(--data-blue-bg); border-radius: var(--r-full); border: 1px solid #bfdbfe; }

/* ───── donut gauge ───── */
.gauge { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.gauge .ring { transform: rotate(-90deg); }
.gauge .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge .num {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.gauge .of { font-size: 10px; color: var(--fg-mute); font-family: var(--mono); margin-top: 2px; }

/* ───── ribbon (small horizontal stats) ───── */
.ribbon {
  display: flex; gap: 0;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
}
.ribbon .seg-r {
  padding: 0 22px;
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 4px;
  flex: 1; min-width: 0;
}
.ribbon .seg-r:first-child { padding-left: 0; }
.ribbon .seg-r:last-child { border-right: 0; padding-right: 0; }
.ribbon .seg-r .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--fg-mute); }
.ribbon .seg-r .value { font-size: var(--ds-fs-20); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ribbon .seg-r .sub { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); }

/* ───── hero search ───── */
.hero-search {
  width: 100%;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 8px 8px 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out);
}
.hero-search:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(16, 24, 40, 0.06);
}
.hero-search .ico { color: var(--fg-mute); display: inline-flex; }
.hero-search input {
  flex: 1; min-width: 0;
  padding: 14px 4px;
  font-size: var(--ds-fs-16);
  background: transparent;
  border: 0; outline: none;
  letter-spacing: -0.005em;
}
.hero-search input::placeholder { color: var(--fg-mute); }
.hero-search .btn { padding: 12px 20px; font-size: 14px; }

/* ───── value-prop tile ───── */
.tile {
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px;
  text-align: left;
  cursor: pointer;
  transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle);
  display: flex; flex-direction: column;
  gap: 14px;
}
.tile:hover { background: var(--bg); border-color: var(--line-strong); transform: translateY(-1px); }
.tile .ico-wrap {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--bg-low);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
}
.tile .head { font-size: var(--ds-fs-18); font-weight: 600; color: var(--ink-soft); letter-spacing: -0.005em; }
.tile .body { font-size: 14px; color: var(--fg-mid); line-height: 1.5; }
.tile .footer-row {
  margin-top: auto;
  padding: 12px 14px;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: space-between;
}

/* ───── landing-page value props (.lp-*) ───── */
.lp-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lp-vcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  text-decoration: none;
  transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle), box-shadow var(--ds-dur-2) var(--ds-ease-settle);
}
.lp-vcard:hover {
  background: var(--bg);
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--ds-elev-3);
}
.lp-vcard .ico-wrap {
  width: 38px; height: 38px;
  border-radius: var(--r-full);
  background: var(--bg-low);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
}
.lp-vhead {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.lp-vbody {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-mid);
  flex: 1;
}
.lp-vlink {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.lp-vcard:hover .lp-vlink { color: var(--ds-accent-deep); }

@media (max-width: 1024px) {
  .lp-value-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .lp-value-grid { grid-template-columns: 1fr; gap: 12px; }
  .lp-vcard { padding: 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   Pricing page — 2026-07 editorial redesign (.pricing-v2)
   ────────────────────────────────────────────────────────────────────
   Replaces the rejected 3-column tier grid with a narrative page built
   around a philosophy: a full-bleed FREE band (the wedge), a warm
   first-person philosophy note, a "support us + unlock" PLUS section and
   a bespoke consultation block. LIGHT doctrine throughout — white/warm
   surfaces, hairlines, ONE emerald accent, generous air, no dark fills.
   All transform/entrance motion is gated behind prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* Section rhythm — generous whitespace between movements. */
.pricing-v2 .pr-head { max-width: 720px; padding: 12px 0 0; }
.pricing-v2 .pr-head-title {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-39);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ds-ink);
  margin: 12px 0 0;
}
.pricing-v2 .pr-head-sub {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-16);
  color: var(--ds-fg-mid);
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 60ch;
}

/* ── FREE — full-bleed band. The negative-margin bleed reaches the viewport
   edges; html/body { overflow-x: clip } (top of this file) absorbs the
   scrollbar-width overflow so the page never scrolls sideways. ── */
.pricing-v2 .pr-free {
  width: 100vw;
  margin: 40px 0 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 52px 0;
  background: var(--ds-accent-soft);
  border-top: 1px solid var(--ds-good-border);
  border-bottom: 1px solid var(--ds-good-border);
}
.pricing-v2 .pr-free-inner {
  max-width: var(--ds-content-max);
  margin: 0 auto;
  padding: 0 32px;
}
.pricing-v2 .pr-free-top {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.pricing-v2 .pr-free-price {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-48);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ds-accent-deep);
  line-height: 1;
}
.pricing-v2 .pr-free-title {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ds-ink);
  margin: 12px 0 0;
  max-width: 24ch;
}
.pricing-v2 .pr-free-lead {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-fg-mid);
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 58ch;
}

/* Feature grid — airy, scannable, light (shared by Free + Plus). */
.pricing-v2 .pr-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 28px;
  margin: 32px 0 28px;
}
.pricing-v2 .pr-plus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 26px;
  margin: 24px 0;
}
.pricing-v2 .pr-feat { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.pricing-v2 .pr-feat-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-good-border);
  color: var(--ds-accent);
  box-shadow: var(--ds-elev-1);
}
.pricing-v2 .pr-feat-ico-plus { border-color: var(--ds-line); }
.pricing-v2 .pr-feat-txt { min-width: 0; }
.pricing-v2 .pr-feat-label {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.3;
}
.pricing-v2 .pr-feat-desc {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  line-height: 1.45;
  margin-top: 3px;
}

/* CTA rows — button + honest microcopy inline. */
.pricing-v2 .pr-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pricing-v2 .pr-cta-note {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.5;
  max-width: 44ch;
}

/* ── Philosophy — centred, warm, first-person. ── */
.pricing-v2 .pr-philo {
  max-width: 760px;
  margin: 64px auto 0;
  text-align: center;
}
.pricing-v2 .pr-philo-quote {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-25);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 14px 0 0;
}
.pricing-v2 .pr-philo-quote em { font-style: italic; color: var(--ds-accent-deep); font-weight: 600; }
.pricing-v2 .pr-philo-sign {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mute);
  margin-top: 18px;
}

/* ── PLUS — support + unlock. A single warm panel (NOT a compare column):
   emerald left accent, soft elevation. ── */
.pricing-v2 .pr-plus {
  margin: 56px 0 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-accent);
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-elev-2);
  padding: 32px;
  transition: box-shadow var(--ds-dur-2) var(--ds-ease-out);
}
.pricing-v2 .pr-plus-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.pricing-v2 .pr-plus-title {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ds-ink);
  margin: 0;
  max-width: 30ch;
}
.pricing-v2 .pr-plus-price {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  white-space: nowrap;
}
.pricing-v2 .pr-plus-price span { font-size: var(--ds-fs-13); color: var(--ds-fg-mute); font-weight: 500; }
.pricing-v2 .pr-plus-lead {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-fg-mid);
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 66ch;
}
/* The billing terms under the Plus CTA: what recurs, which VAT, where to
   cancel. Quiet by design (it is reassurance, not a sales claim) but never
   hidden, and set on a readable measure rather than squeezed next to the
   button like the short CTA note. */
.pricing-v2 .pr-plus-terms {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.6;
  margin: 18px 0 0;
  max-width: 78ch;
}
.pricing-v2 .pr-plus-terms a {
  color: var(--ds-ink);
  font-weight: 500;
  text-decoration: underline;
}

/* ── THE OFFICE LADDER: three plans sized on monitored companies, plus the
   yearly/monthly switch. Still LIGHT doctrine: white surfaces, hairlines, one
   emerald accent on the anchor card only. The anchor is emphasised by a
   thicker accent border and a badge, never by a dark fill. ── */
.pricing-v2 .pr-office { margin: 56px 0 0; }
.pricing-v2 .pr-office-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  flex-wrap: wrap;
}

/* Billing-period switch. Two links, not a control: the page is static SSR. */
.pricing-v2 .pr-interval {
  display: inline-flex;
  background: var(--ds-line-soft);
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.pricing-v2 .pr-interval-opt {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-fg-mid);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-v2 .pr-interval-on {
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: var(--ds-elev-1);
}

.pricing-v2 .pr-plan-grid {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.pricing-v2 .pr-plan {
  position: relative;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-elev-1);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pricing-v2 .pr-plan-anchor {
  border-color: var(--ds-accent);
  border-top: 3px solid var(--ds-accent);
  box-shadow: var(--ds-elev-2);
}
.pricing-v2 .pr-plan-badge {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--ds-accent);
  color: var(--ds-inv);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
}
.pricing-v2 .pr-plan-name {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-24);
  font-weight: 600;
  color: var(--ds-ink);
  letter-spacing: -0.01em;
}
.pricing-v2 .pr-plan-monitor {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  margin-top: 4px;
}
.pricing-v2 .pr-plan-price {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.pricing-v2 .pr-plan-amount {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
}
.pricing-v2 .pr-plan-per {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mute);
  font-weight: 500;
}
.pricing-v2 .pr-plan-vat {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  margin-top: 2px;
}
/* Bounce-back notice from /billing/checkout when no Session could be created.
   States plainly that nothing was charged, which is the buyer's first question. */
.pricing-v2 .pr-notice {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-ink);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  line-height: 1.6;
  padding: 12px 14px;
  margin: 0 0 18px;
}
/* Shown instead of a pay button when the plan has no Stripe Price configured.
   Muted, not alarming: the plan is real, only the self-serve till is not open. */
.pricing-v2 .pr-plan-unavailable {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.5;
  margin: 8px 0 0;
}
.pricing-v2 .pr-plan-save {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-accent-deep);
  margin-top: 8px;
}
.pricing-v2 .pr-plan-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.pricing-v2 .pr-plan-list li {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.pricing-v2 .pr-plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ds-accent-soft, var(--ds-line));
  border: 1px solid var(--ds-accent);
}
.pricing-v2 .pr-plan-cta { margin-top: 22px; }
.pricing-v2 .pr-plan-cta .btn { width: 100%; justify-content: center; }

/* ── What "per office" means: the three sentences that carry the whole
   packaging decision. ── */
.pricing-v2 .pr-seats {
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--ds-line);
}
.pricing-v2 .pr-seats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pricing-v2 .pr-seat-item strong {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 4px;
}
.pricing-v2 .pr-seat-item span {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  line-height: 1.55;
}

@media (max-width: 860px) {
  .pricing-v2 .pr-plan-grid,
  .pricing-v2 .pr-seats-grid { grid-template-columns: 1fr; }
}

/* ── CUSTOM — bespoke consultation block (a conversation, not a price). ── */
.pricing-v2 .pr-custom {
  margin: 40px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-elev-1);
  padding: 28px 32px;
}
.pricing-v2 .pr-custom-txt { max-width: 640px; }
.pricing-v2 .pr-custom-title {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 0 0 8px;
}
.pricing-v2 .pr-custom-body {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-fg-mid);
  line-height: 1.6;
  margin: 0;
}

/* ── Closing reassurance strip. ── */
.pricing-v2 .pr-trust {
  margin: 40px 0 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-top: 26px;
  border-top: 1px solid var(--ds-line);
}
.pricing-v2 .pr-trust-item { display: flex; gap: 11px; align-items: flex-start; }
.pricing-v2 .pr-trust-ico { flex: 0 0 auto; color: var(--ds-fg-mid); margin-top: 1px; }
.pricing-v2 .pr-trust-item strong {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 3px;
}
.pricing-v2 .pr-trust-item span {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  line-height: 1.5;
}

/* Entrance — staggered fade+rise, reuses the shared ck-card-in keyframe.
   STRICTLY gated: under reduced motion every block is simply present. */
@media (prefers-reduced-motion: no-preference) {
  .pricing-v2 .pr-head,
  .pricing-v2 .pr-free,
  .pricing-v2 .pr-philo,
  .pricing-v2 .pr-plus,
  .pricing-v2 .pr-office,
  .pricing-v2 .pr-seats,
  .pricing-v2 .pr-custom,
  .pricing-v2 .pr-trust {
    animation: ck-card-in var(--ds-dur-3) var(--ds-ease-out) both;
  }
  .pricing-v2 .pr-free { animation-delay: 60ms; }
  .pricing-v2 .pr-philo { animation-delay: 120ms; }
  .pricing-v2 .pr-plus { animation-delay: 160ms; }
  .pricing-v2 .pr-office { animation-delay: 160ms; }
  .pricing-v2 .pr-seats { animation-delay: 200ms; }
  .pricing-v2 .pr-custom { animation-delay: 240ms; }
  .pricing-v2 .pr-trust { animation-delay: 280ms; }
  .pricing-v2 .pr-plan:hover { box-shadow: var(--ds-elev-3); transform: translateY(-2px); }
  .pricing-v2 .pr-plan { transition: box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle); }
  .pricing-v2 .pr-plus:hover { box-shadow: var(--ds-elev-3); transform: translateY(-2px); }
  .pricing-v2 .pr-plus { transition: box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle); }
}

/* Responsive — the full-bleed band and every grid stack cleanly. */
@media (max-width: 960px) {
  .pricing-v2 .pr-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-v2 .pr-plus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-v2 .pr-trust { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .pricing-v2 .pr-feat-grid { grid-template-columns: 1fr; }
  .pricing-v2 .pr-plus-grid { grid-template-columns: 1fr; }
  .pricing-v2 .pr-free { padding: 36px 0; }
  .pricing-v2 .pr-free-inner { padding: 0 20px; }
  .pricing-v2 .pr-plus { padding: 24px 20px; }
  .pricing-v2 .pr-custom { padding: 22px 20px; }
  .pricing-v2 .pr-head-title { font-size: var(--ds-fs-31); }
}

/* ───── sparkline ───── */
.spark { display: block; width: 100%; height: 32px; }

/* ───── progress (thin sector benchmark) ───── */
.bar-track {
  width: 100%; height: 6px; background: var(--bg-mid);
  border-radius: var(--r-full); overflow: hidden;
  position: relative;
}
.bar-track .fill { height: 100%; border-radius: var(--r-full); }

/* ───── analyzer (live demo) ───── */
.analyzer {
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.analyzer-h {
  background: var(--bg-lowest);
  color: var(--fg-mid);
  border-bottom: 1px solid var(--line);
  padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.analyzer-h .dots { display: flex; gap: 5px; }
.analyzer-h .dots span { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--line); }
.analyzer-body { padding: 26px; }
.analyzer-q {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mid);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.analyzer-q .p { color: var(--data-blue); margin-right: 8px; }
.analyzer-q .v { color: var(--ink); }
.cursor { display: inline-block; width: 7px; height: 13px; background: var(--ink); margin-left: 2px; vertical-align: middle; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ───── ticker ───── */
.ticker-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  padding: 10px 0;
  overflow: hidden;
  position: relative;
}
.ticker {
  display: flex; gap: 36px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mid);
  white-space: nowrap;
  animation: ticker 48s linear infinite;
  width: max-content;
}
.ticker .item { display: inline-flex; gap: 8px; align-items: center; }
.ticker .item .dot { width: 6px; height: 6px; border-radius: var(--r-full); }
.ticker .item .label { color: var(--ink-soft); font-weight: 500; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ───── small ui ───── */
.kbo { font-family: var(--mono); font-size: 12px; color: var(--fg-mute); }
.dot-sep { color: var(--fg-dim); margin: 0 8px; }

/* Company monogram avatar — deterministic colour/initials are set inline by
   CompanyAvatar.razor (background + color + size + font-size). This rule only
   owns the static, design-token presentation. */
.company-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
  font-family: var(--serif, Fraunces, Georgia, serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  user-select: none;
}

/* KBO number + copy button live together so the icon hugs the number. */
.kbo-wrap { display: inline-flex; align-items: center; gap: 4px; }
.kbo-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg-mute);
  cursor: pointer;
  transition: color var(--ds-dur-1) var(--ds-ease-out), background var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-1) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out);
}
.kbo-copy:hover { color: var(--ink-soft); background: var(--bg-low); border-color: var(--line-soft); }
.kbo-copy:active { transform: scale(0.92); }
.kbo-copy svg { display: block; }
/* Confirmation state — the JS swaps the icon for a localized "Copied!" label
   and toggles .copied for ~1.5s. Render it as a compact emerald pill. */
.kbo-copy.copied {
  width: auto;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--data-emerald);
  background: var(--bg-low);
  border-color: var(--line-soft);
}
.kbd {
  display: inline-flex; font-family: var(--mono); font-size: 11px;
  background: var(--bg-lowest); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 3px; color: var(--fg-mid);
  box-shadow: 0 1px 0 var(--line);
}

/* ───── focus ───── */
:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: 2px; }

/* ───── animations ───── */
@keyframes aiPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* range inputs */
input[type="range"] {
  height: 22px;
  cursor: pointer;
}

/* ───── scrollbars ─────
   Owner pref (2026-06-12): hidden site-wide. Content still scrolls via
   wheel / trackpad / keyboard — we just never paint a bar. Paired with
   `color-scheme: light` on the root so browser dark-mode can't render a
   dark/black OS bar on the light surface. */
* { scrollbar-width: none; -ms-overflow-style: none; }   /* Firefox + legacy Edge */
::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* WebKit / Blink */

/* ───── density (compact tweak) ───── */
.density-compact .card-b { padding: 14px; }
.density-compact table.t tbody td { padding: 8px 12px; }
.density-compact table.t thead th { padding: 8px 12px; }

/* ───── footer ───── */
footer.app-footer {
  margin-top: 56px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
footer.app-footer .inner {
  max-width: 1440px; margin: 0 auto; padding: 0 32px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}
footer.app-footer .brand { font-weight: 700; font-size: var(--ds-fs-16); letter-spacing: -0.015em; color: var(--ink); }
footer.app-footer .links {
  display: flex; gap: 22px; flex-wrap: wrap;
}
footer.app-footer .links a {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--fg-mute);
}
footer.app-footer .links a:hover { color: var(--ds-accent-deep); }
footer.app-footer .copy { font-size: 12px; color: var(--fg-mid); margin-top: 4px; }
/* Footer column headers — a short accent dash so each group reads as a column.
   Markup-free: targets the existing .label-caps directly inside footer columns. */
footer.app-footer .label-caps {
  display: flex;
  align-items: center;
  gap: 7px;
}
footer.app-footer .label-caps::before {
  content: "";
  width: 12px; height: 2px;
  border-radius: var(--r-full);
  background: var(--ds-accent);
  opacity: 0.65;
}

/* ───── locked skeleton (paywall reveal) ──────────────────────────────────── */
.locked-skeleton {
  display: inline-block;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--bg-mid) 0%, var(--bg-high) 50%, var(--bg-mid) 100%);
  background-size: 200% 100%;
  border-radius: 3px;
  cursor: not-allowed;
  padding: 0 6px;
  position: relative;
  border: 1px dashed var(--line-strong);
  user-select: none;
  animation: skel-shimmer 4s ease-in-out infinite;
  filter: blur(0.4px);
}
.locked-skeleton:hover {
  background: linear-gradient(90deg, var(--bg-high), var(--bg-highest), var(--bg-high));
  filter: none;
}
/* Neutral lock affordance — a small dot marker, no emoji (owner doctrine:
   NO emoji as UI icons). The dashed border + shimmer already read as "locked";
   this is just a subtle corner tick. */
.locked-skeleton::after {
  content: "";
  position: absolute;
  right: -3px; top: -3px;
  width: 6px; height: 6px;
  background: var(--fg-mute);
  border: 1px solid var(--bg-lowest);
  border-radius: var(--r-full);
}

@keyframes skel-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ───── streaming dossier skeleton (perf-life wave) ───────────────────────
   Shown by CompanyDetail during [StreamRendering] while the heavy panels
   stream in. The hero is REAL (name + KBO from the synchronously-resolved
   spine); the panels are neutral placeholder blocks — NO emoji, no lock —
   swapped for content when the stream completes. Shimmer is reduced-motion
   gated; under reduced motion the blocks are simply a static light surface. */
.ck-skel-hero { padding: 4px 0 2px; }
.ck-skel-hero-title {
  font-family: var(--serif);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}
.ck-skel-hero-meta { margin-top: 8px; font-size: 13px; color: var(--fg-mute); }
.ck-skel-dot { margin: 0 6px; color: var(--fg-dim); }
.ck-skel-kbo { font-family: var(--mono); font-size: 11px; }
.ck-skel-stack { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.ck-skel-panel {
  height: 150px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-high);
}
.ck-skel-panel-tall { height: 240px; }
.ck-skel-note { margin-top: 16px; font-size: 12px; color: var(--fg-mute); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .ck-skel-panel {
    background: linear-gradient(90deg, var(--bg-mid) 0%, var(--bg-high) 50%, var(--bg-mid) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 4s ease-in-out infinite;
  }
}

/* ════════════════════════════════════════════════
   Responsive — three breakpoints
   ──────────────────────────────────────────────────
   ≤ 1024px  tablet  — collapse 4-col grids to 2, 3-col to 2
   ≤  768px  mobile  — collapse all grids to 1, scroll the nav,
                       wrap stat ribbons, shrink hero typography
   ≤  480px  phone   — tighten paddings, drop secondary chrome bits
   ════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Page chrome — give back horizontal breathing room */
  .page { padding: 24px 20px; }
  .chrome-inner { padding: 0 20px; gap: 16px; }

  /* Wider grids collapse to 2 cols */
  .g-4 { grid-template-columns: 1fr 1fr; }
  .g-3 { grid-template-columns: 1fr 1fr; }

  /* Hero stat ribbon (5 segments inline) — wrap to 3+2 */
  .ribbon { flex-wrap: wrap; }
  .ribbon .seg-r { min-width: 140px; padding: 10px 16px; }
}

@media (max-width: 768px) {
  body { font-size: 13.5px; }

  .page { padding: 16px 14px; }
  .page.narrow { padding: 16px 14px; }

  /* Chrome — let it scroll horizontally instead of wrapping
     awkwardly. Logo + lang switch + auth button stay sticky-left. */
  .chrome-inner {
    padding: 0 14px;
    height: 56px;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chrome-inner::-webkit-scrollbar { display: none; }
  .chrome nav {
    gap: 14px;
    flex-shrink: 0;
  }
  .chrome nav a {
    font-size: 13px;
    white-space: nowrap;
  }
  .chrome .spacer { display: none; }
  /* Hide the in-chrome search on mobile — header is already crowded
     and ⌘K palette + the /companies search input cover this. */
  .chrome-search { display: none; }
  /* Brand stays visible but tighter */
  .chrome > a:first-child {
    font-size: var(--ds-fs-18) !important;
  }

  /* Display headings — Fraunces at 64px breaks on small screens */
  .h-display { font-size: var(--ds-fs-31); line-height: 1.1; }
  .h1        { font-size: var(--ds-fs-25); line-height: 1.15; }
  .h2        { font-size: var(--ds-fs-20); line-height: 1.2; }

  /* All multi-col grid helpers collapse */
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; gap: 12px; }
  .row { flex-direction: column; }

  /* Stat ribbon — wrap segments to 2 per row */
  .ribbon {
    padding: 14px 16px;
    gap: 12px;
  }
  .ribbon .seg-r {
    flex: 0 0 calc(50% - 6px);
    padding: 8px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .ribbon .seg-r:nth-last-child(-n+2) { border-bottom: 0; }
  .ribbon .seg-r .value { font-size: var(--ds-fs-18); }

  /* Tables — horizontal scroll instead of wrapping cells.
     Wrap call sites with .table-scroll if you want this without
     full-width container assumptions. */
  table.t {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.t thead th,
  table.t tbody td { padding: 8px 10px; font-size: 12.5px; }

  /* Cards — reduce padding */
  .card-h { padding: 12px 14px; }
  .card-b { padding: 14px; }

  /* Financial sparkline wall — guarantee a clean 2-up at tablet/large-phone
     instead of auto-fill cramming 3 narrow tiles. */
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-tile { padding: 11px 12px 10px; }

  /* Health component breakdown → single column so labels never truncate. */
  .health-components { grid-template-columns: 1fr; gap: 0 14px; }

  /* Hero search — full width, smaller padding */
  .hero-search { padding: 6px 6px 6px 12px; }
  .hero-search input { font-size: 15px; padding: 12px 4px; }
  .hero-search .btn { padding: 10px 14px; font-size: 13px; }

  /* Tile padding */
  .tile { padding: 18px; }

  /* KPI value font shrinks */
  .kpi .value { font-size: var(--ds-fs-20); }
  .kpi .value.lg { font-size: var(--ds-fs-25); }

  /* Tabs — already horizontal-scroll, just shrink */
  .tabs button, .tabs a { padding: 10px 12px; font-size: 13px; }

  /* Timeline grid (110px date col) is too wide */
  .tl-row {
    grid-template-columns: 80px 1fr;
    gap: 10px;
  }
  .tl-row > :nth-child(3) { display: none; }

  /* Footer — stack columns, smaller links */
  footer.app-footer .inner { padding: 0 14px; gap: 16px; }
  footer.app-footer .links { gap: 12px; }
  footer.app-footer .links a { font-size: 10.5px; }

  /* Force inline 2-col hero layouts (Home, etc.) to stack on mobile.
     The Home hero uses inline grid-template-columns; this overrides. */
  section[style*="grid-template-columns: 1.05fr 0.95fr"],
  section[style*="grid-template-columns:1.05fr 0.95fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Inline section grids inside the hero need the same treatment */
  section > div[style*="grid-template-columns: 1.05fr 0.95fr"],
  section > div[style*="grid-template-columns:1.05fr 0.95fr"],
  section > div[style*="grid-template-columns: repeat(5"],
  section > div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  /* Hero serif headline — inline 64px override */
  .serif[style*="font-size:64px"] { font-size: var(--ds-fs-39) !important; line-height: 1.05 !important; }

  /* Analyzer card (live preview in Home hero) — give it breathing room */
  .analyzer-body { padding: 18px; }

  /* Lang switch is 3 chips — let it stay but on phones drop it */
  .lang-switch { flex-shrink: 0; }

  /* Company monogram avatar shrinks so the dossier header name block keeps
     its breathing room on narrow screens. The inline width/height/font-size
     are overridden here. */
  .company-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: var(--ds-fs-18) !important;
  }
}

@media (max-width: 480px) {
  .page { padding: 12px 10px; }
  .chrome-inner { padding: 0 10px; height: 52px; }
  .chrome nav { gap: 10px; }

  /* Lang switch + sign-in button cumulatively crowd; drop the lang
     switch in favor of URL-prefix navigation */
  .lang-switch { display: none; }

  /* Editorial heading further down */
  .h-display { font-size: var(--ds-fs-25); }
  .h1        { font-size: var(--ds-fs-20); }

  /* Hero stats: single column on phones */
  section > div[style*="grid-template-columns: repeat(5"],
  section > div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr !important;
  }

  /* Card padding */
  .card-h { padding: 10px 12px; }
  .card-b { padding: 12px; }

  /* Chips smaller on phone */
  .chip { font-size: 11px; padding: 2px 7px; }

  /* Sparkline tiles go 1-up on phones — two tiles would leave the 20px mono
     value cramped at ~150px wide. */
  .metric-grid { grid-template-columns: 1fr; }
}

/* ───── gated / paywall block (GatedSection) ─────
   Light + inviting: white card, dashed hairline, readable slate hint,
   the CTA (an emerald .btn.primary passed by the caller) carries the
   colour. Never a gray box. */
.gated-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px 24px;
  background: var(--bg-lowest);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.gated-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-mid);
  max-width: 52ch;
}

/* CTA strip under a locked card body */
.locked-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-lowest);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--fg-mid);
}
.locked-cta .text { display: inline-flex; gap: 6px; align-items: center; }

/* ───── LockedInsight: the paid gate on a dossier section ─────
   Left-aligned and prose-shaped rather than a centred CTA box, because this
   panel has to READ: it names the section, the question it answers and the
   measured size of what sits behind it. A centred one-liner cannot carry that.

   No status colour anywhere on purpose. A lock is not a finding: painting it
   amber would manufacture worry to drive a signup, and painting it green would
   make a gate look like a clean result, which is the exact defect the absence
   sweep removed. Neutral slate, dashed hairline, accent only on the button. */
.locked-insight {
  padding: 18px 20px;
  background: var(--bg-lowest);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.locked-insight .li-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.locked-insight .li-ico { display: inline-flex; color: var(--fg-mute); line-height: 0; }
.locked-insight .li-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.locked-insight .li-answers {
  margin: 0 0 6px; font-size: 13px; line-height: 1.55;
  color: var(--fg-mid); max-width: 62ch;
}
.locked-insight .li-facts {
  margin: 0; font-size: 13px; line-height: 1.55;
  color: var(--fg-mute); max-width: 62ch;
}
.locked-insight .li-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
}
.locked-insight .li-plan { font-size: 13px; color: var(--fg-mid); }

/* At 360px the plan line and the button cannot share a row without the button
   losing its label, so the footer stacks and the button goes full width. */
@media (max-width: 480px) {
  .locked-insight { padding: 16px 14px; }
  .locked-insight .li-foot { flex-direction: column; align-items: stretch; }
  .locked-insight .li-foot .btn { justify-content: center; }
}

/* Hard-red top banner (Beroepsverbod and similar) — white surface,
   red carried by the left accent + icon + title (indicator doctrine). */
.alert-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--risk-high-border);
  border-left: 4px solid var(--risk-high);
  background: var(--bg-lowest);
  color: #7f1d1d;
  border-radius: var(--r-lg);
  margin-bottom: 20px;
}
.alert-banner .ico {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--risk-high);
}
.alert-banner .title { font-weight: 600; font-size: 14px; color: var(--risk-high); margin-bottom: 4px; }
.alert-banner .body { font-size: 13px; line-height: 1.5; }

/* Reading coverage: how much of a company's gazette we have actually read.

   Replaces the green accent-washed ".exn" strip that used to sit under the hero.
   That strip was a bordered, shadowed, icon-led banner and it rendered on every
   dossier that was not fully processed, which on 2026-08-15 was 1.248.195 of
   1.257.190 companies. A banner on 99,3% of pages is furniture; this is a caption.

   Two forms, one voice. The LINE is the count only, under the hero, linked to
   Publicaties. The NOTE carries the full statement and the action, and it borrows
   the mig-211 truncation note's exact skin (hairline box, 3px neutral left rule,
   --ds-line-soft) because both say the same kind of thing: here is a limit on our
   evidence. Neutral tokens throughout, never --risk-*: an unread act is a fact
   about us, not a finding about the company. */
.ds-actcov-line {
  /* The margin lives here, not on a wrapper in the page, so a fully read dossier
     renders no element AND no gap where one would have been. */
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ds-fg-mute);
}
.ds-actcov-line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ds-line);
  padding-bottom: 1px;
}
.ds-actcov-line a:hover,
.ds-actcov-line a:focus-visible { color: var(--ds-ink); border-bottom-color: var(--ds-fg-dim); }
.ds-actcov-label { font-weight: 500; }
.ds-actcov-count { font-variant-numeric: tabular-nums; color: var(--ds-fg-mid); }
.ds-actcov-line a:hover .ds-actcov-count { color: var(--ds-ink); }

.ds-actcov-note {
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-fg-dim);
  border-radius: var(--ds-r-md);
  background: var(--ds-line-soft);
}
.ds-actcov-note-text {
  margin: 0;
  font-size: var(--ds-fs-12);
  line-height: 1.5;
  color: var(--ds-fg-mid);
  max-width: 78ch;
}
.ds-actcov-note-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  font-size: var(--ds-fs-12);
  line-height: 1.5;
  color: var(--ds-fg-mid);
}
.ds-actcov-note-action form { display: inline; margin: 0; }
.ds-actcov-hint { color: var(--ds-fg-mute); }
.ds-actcov-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

/* ════════════════════════════════════════════════
   Accessibility
   ════════════════════════════════════════════════ */

/* ───── screen-reader-only ───── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Make skip-link visible on focus so keyboard users can activate it */
.sr-only:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--bg-lowest);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-pop);
}

/* ───── focus-visible outlines ───── */
/* Remove the global rule already present and replace with explicit interactive targets */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ───── reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  /* Disable decorative keyframe animations that can trigger vestibular issues */
  @keyframes aiPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
  }
  @keyframes skel-shimmer {
    0%, 100% { background-position: 0% 50%; }
  }
  /* Also freeze the ticker and cursor blink */
  .ticker { animation: none; }
  .cursor { animation: none; opacity: 1; }
}

/* ───── AI due-diligence brief (Analyse tab) ───── */
.dd-results {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dd-block {
  padding: 14px 16px;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--line-strong);
}
.dd-block.dd-flag {
  border-color: var(--risk-high-border);
  border-left-color: var(--risk-high);
}
.dd-block-h {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.dd-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.dd-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dd-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dd-flag .dd-list li::marker {
  color: var(--risk-high);
}

/* ───── /radar — sector-contagion radar ───── */
.radar-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.radar-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--bg-lowest);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.radar-stat .rs-num {
  font-size: var(--ds-fs-25);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.radar-stat .rs-lbl {
  font-size: 12px;
  color: var(--fg-mute);
}
.radar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* heating-sector ranked list */
.heat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.heat-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.heat-row:last-child { border-bottom: 0; }
.heat-rank {
  font-size: 12px;
  color: var(--fg-mute);
  text-align: right;
}
.heat-sector {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.heat-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heat-name:hover { color: var(--ds-accent-deep); }
.heat-code {
  font-size: 11px;
  color: var(--fg-mute);
}
.heat-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
}
.heat-delta {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  min-width: 64px;
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.heat-delta {
  border: 1px solid var(--line);
  background: var(--bg-lowest);
}
.heat-delta.delta-up,
.rs-num.delta-up {
  color: var(--risk-high);
  border-color: var(--risk-high-border);
}
.heat-delta.delta-down,
.rs-num.delta-down {
  color: #047857;
  border-color: var(--risk-low-border);
}
.heat-delta.delta-flat,
.heat-delta.delta-new {
  color: var(--fg-mute);
}
.rs-num.delta-flat,
.rs-num.delta-new { color: var(--fg-mid); background: transparent; }

@media (max-width: 820px) {
  .radar-grid { grid-template-columns: 1fr; }
  .radar-stats { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* Tighten the ranked heating-sector row so the name keeps room next to the
     rank, count and delta pill on phones. */
  .heat-row { gap: 8px; }
  .heat-delta { min-width: 52px; padding: 2px 6px; }
}

/* ───── portfolio risk console (/portfolio) ───── */
.port-stat {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-lowest);
  padding: 16px 18px;
}
.port-stat .m-label {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 500;
}
.port-stat .m-value {
  font-family: var(--mono); font-size: var(--ds-fs-31); font-weight: 600;
  color: var(--ink); margin-top: 4px; line-height: 1.05;
}
.port-stat .m-sub { font-size: 12px; color: var(--fg-mute); margin-top: 3px; }
.port-stat.warn { border-color: var(--risk-med-border); border-left: 3px solid var(--risk-med); }
.port-stat.warn .m-value { color: #b45309; }
.port-stat.bad { border-color: var(--risk-high-border); border-left: 3px solid var(--risk-high); }
.port-stat.bad .m-value { color: #b91c1c; }

.port-band { display: flex; align-items: center; gap: 12px; }
.port-band-label {
  flex: 0 0 auto; min-width: 110px; max-width: 150px;
  font-size: 13px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.port-band-n {
  flex: 0 0 auto; min-width: 28px; text-align: right;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-soft);
}

@media (max-width: 720px) {
  .port-band-label { min-width: 88px; }
  .port-stat .m-value { font-size: var(--ds-fs-25); }
}

/* ───── printable / PDF dossier (/c/{slug}/print) ─────
 * The page is readable on screen (people preview before printing) AND
 * optimised for the browser's own print-to-PDF. The @media print block
 * strips site chrome, forces a single column, and keeps cards from
 * splitting across page boundaries. No JS, no libraries — CSP-safe.
 */
.print-doc {
  max-width: 880px;
  margin: 0 auto;
}
.print-doc .print-section { margin-bottom: 20px; }
.print-doc .print-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--ink);
}
.print-doc .print-brand {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.024em;
  font-size: var(--ds-fs-25);
  color: var(--ink);
}
.print-doc .print-brand .dot { color: var(--risk-low); }
.print-doc .print-brand .be { color: var(--fg-mute); font-weight: 400; font-size: var(--ds-fs-20); }
.print-doc .print-meta { text-align: right; }
.print-doc .print-doctype {
  font-family: var(--serif);
  font-size: var(--ds-fs-16);
  color: var(--ink-soft);
}
.print-doc .print-date { font-size: 12px; color: var(--fg-mute); margin-top: 2px; }
.print-doc .print-id { margin-bottom: 20px; }
.print-doc .print-foot {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--fg-mute);
  text-align: center;
}

@media print {
  /* Drop the live site shell — header nav, search, footer, floating UI.
     M-shell ("ds-*") hooks first, then the legacy selectors kept as a
     harmless safety net for any non-M page. */
  .ds-shell-nav, .ds-shell-footer, .ds-shell-skip,
  .ds-ai-fab, #ai-drawer-toggle, #ai-drawer, #ai-drawer-backdrop, .ds-ai-drawer, .ds-ai-backdrop,
  .ds-cmp-fab, .ds-cmp-tray, .ds-cmp-backdrop, #cmp-tray-toggle,
  .chrome, footer.app-footer, .cmd-palette, .cmdk-trigger,
  .sr-only { display: none !important; }

  /* Neutralise screen layout: white background, no card shadows/tints,
     full-bleed page so the PDF uses the printer's own margins. The M body
     is .ds-shell / #ds-shell-body; .app / main kept for legacy pages. */
  html, body { background: #fff !important; }
  .ds-shell, .ds-shell-body, #ds-shell-body,
  .app, main { display: block !important; padding: 0 !important; }
  .page { max-width: none; padding: 0; margin: 0; }
  .print-doc { max-width: none; margin: 0; }

  /* Force the whole report into a single column regardless of the
     screen-layout grids the reused cards normally use. */
  .print-doc .row,
  .print-doc .g-2,
  .print-doc .g-3 { display: block !important; }
  .print-doc .row > *,
  .print-doc .g-2 > *,
  .print-doc .g-3 > * { width: auto !important; flex: none !important; margin-bottom: 12px; }

  /* Black-on-white friendly: flatten the warm-white surface + borders so
     cards read cleanly on paper and don't waste ink on background fills. */
  .print-doc .card {
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px;
    box-shadow: none !important;
  }

  /* Avoid splitting a card (or a report section) across a page break. */
  .print-doc .print-section,
  .print-doc .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Sensible page margins for the printed sheet. */
  @page { margin: 16mm 14mm; }
}

/* ───── director track record (/p/{slug}) ───── */
.dtr-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.dtr-stat {
  flex: 1 1 140px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--bg-lowest);
}
.dtr-stat.bad {
  border-color: var(--risk-high-border);
  border-left: 3px solid var(--risk-high);
}
.dtr-stat .value {
  display: block;
  font-size: var(--ds-fs-25);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-soft);
}
.dtr-stat.bad .value { color: var(--risk-high); }
.dtr-stat .label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-mute);
}
.dtr-seq {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--bg-lowest);
}
.dtr-seq-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.dtr-seq-row a { color: var(--ink-soft); font-weight: 500; }
.dtr-seq-icon {
  flex: 0 0 auto;
  color: var(--fg-mute);
  font-size: 14px;
  line-height: 1.4;
}
.dtr-disclaimer {
  margin: 6px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--fg-mute);
  line-height: 1.45;
}

/* ════════════════════════════════════════════════
   Data-viz: entrance animations, hover, tooltip
   Every rule is scoped to a specific chart class —
   never a bare svg/circle/polygon/polyline selector.
   ════════════════════════════════════════════════ */

/* ───── floating tooltip (created + positioned by sibling JS) ─────
   Contract for the JS:
     • One <div class="chart-tooltip"> appended to <body>.
     • Position with inline `left`/`top` (px); it is position:fixed.
     • Toggle visibility by adding/removing the `.hidden` class.
       Default (no .hidden) = visible & fully opaque.
     • Set the pill text via textContent / innerHTML.            */
.chart-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  max-width: 240px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  color: var(--ink);
  border: 1px solid var(--line);
  font: 11px/1.4 var(--mono);
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-pop);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--ds-dur-1) var(--ds-ease-out);
}
.chart-tooltip.hidden {
  opacity: 0;
  visibility: hidden;
}

/* ───── hover affordances (always on; no motion preference needed) ───── */
.sparkline,
.metric-tile .sparkline { cursor: default; }
/* lift already on .metric-tile:hover; add a touch more under reduced-motion-safe */
.radar-chart { cursor: default; }
/* cartogram province tiles read as data points — brighten + outline on hover */
.cartogram-tile:not(.is-empty) { cursor: default; transition: box-shadow var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-1) var(--ds-ease-out), filter var(--ds-dur-1) var(--ds-ease-out); }
.cartogram-tile:not(.is-empty):hover {
  border-color: var(--line-strong);
  filter: brightness(1.04);
}
/* legend / band bars become inspectable */
.fp-legend-row:hover .fp-legend-label,
.fp-legend-row:hover .fp-legend-score { color: var(--ink-soft); }

/* ── Stress-network: nodes read as inspectable entities ──
   `.sn-node` is on each <g>/<a> (company, mandate, cross-mandate). Hover lifts
   the whole node so the rect inside reads as the active one. transform-box keeps
   the scale origin at the node's own center inside the SVG.                  */
.stress-network .sn-node {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--ds-dur-2) var(--ds-ease-out), filter var(--ds-dur-2) var(--ds-ease-out);
}
.stress-network .sn-node:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 6px rgba(19, 27, 46, 0.18));
}
.stress-network .sn-node-center { cursor: default; }

/* ── Time-machine: event dots enlarge + brighten on hover ── */
.time-machine .tm-event {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--ds-dur-2) var(--ds-ease-out), opacity var(--ds-dur-2) var(--ds-ease-out);
}
.time-machine .tm-event:hover {
  transform: scale(1.5);
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

  /* ── Sparkline: "draw" the polyline, fade the area fill, pop the dot ──
     The dash length (1000) just needs to exceed any realistic path length;
     it animates to 0 offset to reveal the stroke left-to-right.            */
  .sparkline polyline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ck-spark-draw .6s ease-out forwards;
  }
  .sparkline path {
    opacity: 0;
    animation: ck-fade-in .5s ease-out .15s forwards;
  }
  .sparkline circle {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    animation: ck-dot-pop .3s ease-out .5s forwards;
  }
  /* dashed reference line, if present, eases in last */
  .sparkline line {
    opacity: 0;
    animation: ck-fade-in .4s ease-out .3s forwards;
  }

  /* P2-T9: scroll-triggered draw-in (progressive enhancement).
     animate.js tags each sparkline with .js-spark-defer, which PAUSES the
     draw/fade/pop animations above so they hold at their first keyframe
     (dashoffset 1000 / opacity 0 / scale 0) instead of playing on load. When
     the chart scrolls into view the script adds .ck-in-view, which resumes them.
     If animate.js never runs, .js-spark-defer is absent and the on-load
     animation plays as before — so this is strictly additive. */
  .sparkline.js-spark-defer polyline,
  .sparkline.js-spark-defer path,
  .sparkline.js-spark-defer circle,
  .sparkline.js-spark-defer line {
    animation-play-state: paused;
  }
  .sparkline.js-spark-defer.ck-in-view polyline,
  .sparkline.js-spark-defer.ck-in-view path,
  .sparkline.js-spark-defer.ck-in-view circle,
  .sparkline.js-spark-defer.ck-in-view line {
    animation-play-state: running;
  }

  /* ── FinancialProfile radar: data polygon grows from center + fades; dots stagger ── */
  .radar-chart polygon:last-of-type {
    opacity: 0;
    transform: scale(.4);
    transform-box: fill-box;
    transform-origin: center;
    animation: ck-radar-in .5s var(--ds-ease-settle) .1s forwards;
  }
  .radar-chart circle {
    opacity: 0;
    animation: ck-fade-in .35s ease-out forwards;
  }
  .radar-chart circle:nth-of-type(1) { animation-delay: .42s; }
  .radar-chart circle:nth-of-type(2) { animation-delay: .50s; }
  .radar-chart circle:nth-of-type(3) { animation-delay: .58s; }
  .radar-chart circle:nth-of-type(4) { animation-delay: .66s; }
  .radar-chart circle:nth-of-type(5) { animation-delay: .74s; }

  /* ── Risk donut gauge: sweep the arc in from 0 ──
     .gauge .ring is the rotated <svg>; the value arc is its 2nd <circle>.   */
  .gauge .ring circle:nth-of-type(2) {
    animation: ck-gauge-sweep .7s ease-out forwards;
  }

  /* ── Health barometer: slide the marker from the left edge to its spot ── */
  .barometer-marker {
    animation: ck-marker-slide .6s var(--ds-ease-settle) both;
  }

  /* ── Bars: grow width from 0 (legend band bars + thin benchmark fill) ── */
  .fp-legend-bar > span,
  .bar-track .fill {
    animation: ck-bar-grow .5s ease-out both;
    transform-origin: left center;
  }

  /* ── Metric + cartogram tiles: subtle fade / translate-up ── */
  .metric-tile {
    animation: ck-tile-in .3s ease-out both;
  }
  .cartogram-tile {
    animation: ck-tile-in .3s ease-out both;
  }

  /* ── Stress-network: nodes scale-fade in from their own center, staggered
     so the graph "assembles" left-to-right; edge lines ease in underneath. ── */
  .stress-network .sn-node {
    opacity: 0;
    transform: scale(.6);
    transform-box: fill-box;
    transform-origin: center;
    animation: ck-node-in .4s var(--ds-ease-settle) both;
  }
  .stress-network .sn-node-center { animation-delay: .05s; }
  .stress-network .sn-node-mandate:nth-of-type(1) { animation-delay: .14s; }
  .stress-network .sn-node-mandate:nth-of-type(2) { animation-delay: .20s; }
  .stress-network .sn-node-mandate:nth-of-type(3) { animation-delay: .26s; }
  .stress-network .sn-node-mandate:nth-of-type(4) { animation-delay: .32s; }
  .stress-network .sn-node-mandate:nth-of-type(5) { animation-delay: .38s; }
  .stress-network .sn-node-mandate:nth-of-type(6) { animation-delay: .44s; }
  .stress-network .sn-node-cross { animation-delay: .5s; }
  .stress-network line {
    opacity: 0;
    animation: ck-fade-in .5s ease-out .1s forwards;
  }

  /* ── Time-machine: event dots pop in after the baseline settles ── */
  .time-machine .tm-event {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    animation: ck-dot-pop .35s ease-out .25s forwards;
  }
}

@keyframes ck-spark-draw   { to { stroke-dashoffset: 0; } }
@keyframes ck-fade-in      { to { opacity: 1; } }
@keyframes ck-dot-pop      { to { opacity: 1; transform: scale(1); } }
@keyframes ck-radar-in     { to { opacity: 1; transform: scale(1); } }
@keyframes ck-gauge-sweep  { from { stroke-dashoffset: 999; } }
@keyframes ck-marker-slide { from { left: 0; } }
@keyframes ck-bar-grow     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ck-tile-in      { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ck-node-in      { to { opacity: 1; transform: scale(1); } }

/* ───────────────────────────────────────────────────────────────
   Pricing page (/pricing) — marketing cards built from PlanCatalog.
   4-up on desktop, 2-up on tablet, stacked on mobile. The featured
   tier lifts with a ring + ribbon; the user's current tier gets a
   soft data-blue ring.
   ─────────────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 8px;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-1);
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle);
}
.pricing-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* Featured (recommended) tier — emerald ring + ribbon. */
.pricing-card.featured {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 1px var(--ds-accent) inset, var(--shadow-pop);
}
.pricing-card.featured:hover { transform: translateY(-3px); }

/* Current plan ring — quiet hairline emphasis under the featured ring. */
.pricing-card.current {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px var(--line-strong) inset, var(--shadow-1);
}

.pricing-ribbon {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ds-accent);
  color: var(--fg-inv);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.pricing-card-top { padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }

.pricing-plan-name {
  font-family: var(--serif);
  font-size: var(--ds-fs-20);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}

.pricing-positioning {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-mute);
  margin-top: 6px;
  min-height: 36px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 16px;
}
.pricing-price-amount {
  font-family: var(--mono);
  font-size: var(--ds-fs-39);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.pricing-price-custom {
  font-size: var(--ds-fs-25);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  line-height: 1;
}
.pricing-price-period { font-size: 13px; color: var(--fg-mute); }

.pricing-features {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.pricing-features li.off { color: var(--fg-dim); }
.pricing-features li > span { padding-top: 0.5px; }

.pricing-check { color: var(--risk-low); flex-shrink: 0; margin-top: 1px; }
.pricing-x     { color: var(--fg-dim);  flex-shrink: 0; margin-top: 1px; }

.pricing-cta { margin-top: 22px; }
.pricing-current-badge {
  background: var(--bg-lowest);
  border-color: var(--line-strong);
  color: var(--fg-mid);
  font-weight: 600;
  cursor: default;
}
.pricing-current-badge:hover { background: var(--bg-lowest); border-color: var(--line-strong); }

/* ── Reassurance / trust row (legacy, unreferenced — kept for reference) ── */
.pricing-trust-legacy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.pricing-trust-item { display: flex; flex-direction: column; gap: 4px; }
.pricing-trust-item strong { font-size: 14px; color: var(--ink); }
.pricing-trust-item span { font-size: 13px; line-height: 1.5; color: var(--fg-mid); }

@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 14px; }
  .pricing-trust-legacy { grid-template-columns: 1fr; gap: 18px; }
  .pricing-positioning { min-height: 0; }
}

/* ════════════════════════════════════════════════
   Interaction polish — micro-interactions + motion
   ──────────────────────────────────────────────────
   A cohesive, *tasteful* pass on top of the existing
   component rules. Principles:
     • Subtle, fast (.12–.18s), editorial — never bouncy.
     • Named properties only; never `transition: all`.
     • All TRANSFORM/lift motion is gated behind
       prefers-reduced-motion: no-preference (color /
       background / border / shadow changes stay on for
       everyone — they're affordances, not motion).
     • Additive: tightens existing rules, breaks nothing.
   ════════════════════════════════════════════════ */

/* ───── crisp, consistent focus ring (accessibility) ─────
   A single keyboard-focus treatment for every interactive target.
   Mirrors the existing data-blue token; 2px ring, 2px offset. */
.btn:focus-visible,
.chip[role="button"]:focus-visible,
.tabs button:focus-visible,
.tabs a:focus-visible,
.seg button:focus-visible,
.lang-switch button:focus-visible,
.chrome nav button:focus-visible,
.kbo-copy:focus-visible,
.hero-search input:focus-visible,
.chrome-search input:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Inputs read better with a soft halo than a hard outline — keep the
   accessible ring but pair it with a tinted glow + border shift. */
.chrome-search input:focus-visible {
  outline-offset: 1px;
  border-color: var(--ds-accent);
  background: var(--bg-lowest);
  box-shadow: 0 0 0 3px rgba(11, 138, 93, 0.12);
}
/* Home "Antwoordmachine" search (AnswerHome .hc2-search pill).
   The borderless input would otherwise inherit the global
   `input:focus-visible { outline: 2px solid var(--ink) }` (dark) rule and
   show a hard dark border the moment it is clicked/focused (owner feedback
   2026-06-11). The visible focus indicator is the pill's own
   `.hc2-search:focus-within` accent ring + accent border, so the inner input
   carries NO outline of its own — a second ring inside the pill reads as a
   double border. Focus is still clearly indicated (the whole pill lights
   up), so keyboard navigation stays accessible. */
.hc2-search-input:focus-visible {
  outline: none;
}

/* ───── links ─────
   Inline text links pick up a gentle colour ease so hovers don't snap. */
a:not(.btn):not(.chip):not(.tabs a):not(.own-name):not(.heat-name) {
  transition: color var(--ds-dur-2) var(--ds-ease-out);
}

/* ───── chips ─────
   Status chips are often clickable filters/links — give a soft warm shift. */
.chip {
  transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out),
              color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out);
}
a.chip:hover,
button.chip:hover,
.chip[role="button"]:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-1);
}

/* ───── buttons ─────
   Refine the existing hover; add a crisp press + (motion-gated) press-scale. */
.btn { transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out),
                   color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out); }
.btn:hover { box-shadow: var(--shadow-1); }
.btn.ghost:hover { box-shadow: none; }
.btn:active { transform: none; }   /* reset; motion variant re-adds below */
.kbo-copy { transition: color var(--ds-dur-1) var(--ds-ease-out), background var(--ds-dur-1) var(--ds-ease-out),
                        border-color var(--ds-dur-1) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out); }

/* ───── tabs — smooth active underline slide + hover tint ─────
   The 2px bottom-border is the indicator; easing border-color + color
   makes the active state glide rather than jump as you switch tabs. */
.tabs button, .tabs a {
  transition: color var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-settle);
}
.tabs button .count, .tabs a .count {
  transition: background var(--ds-dur-2) var(--ds-ease-out), color var(--ds-dur-2) var(--ds-ease-out);
}
.tabs button:hover .count, .tabs a:hover .count {
  background: var(--bg-mid);
  color: var(--fg-mid);
}

/* ───── table rows ─────
   Hover background already exists; ease it so scanning rows feels fluid. */
table.t tbody tr td { transition: background var(--ds-dur-1) var(--ds-ease-out); }
/* Result/clickable rows (rows that wrap an <a> or carry an onclick) get a
   pointer + a faint left-edge accent so they read as navigable. */
table.t tbody tr.is-link,
table.t tbody tr[onclick] { cursor: pointer; }

/* ───── list / data rows — gentle hover affordance ─────
   These already transition border + shadow; add the missing ones and a
   warm background lift so the whole row responds, not just its frame. */
.own-row, .estab-row {
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out),
              background var(--ds-dur-2) var(--ds-ease-out);
}
.own-row:hover, .estab-row:hover { background: var(--bg-low); }

/* Ranked / stat rows that didn't have any transition before. */
.heat-row, .fp-legend-row, .health-comp, .bench, .signal, .tl-row {
  transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out);
}
.heat-row:hover { background: var(--bg-low); }
.fp-legend-row { border-radius: var(--r-sm); }
.fp-legend-row:hover { background: var(--bg-low); }

/* Snapshot stat tiles — subtle warm border + shadow on hover, no bounce
   (these are content, not links, so keep it understated). */
.radar-stat, .dtr-stat, .port-stat {
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out);
}
.radar-stat:hover, .dtr-stat:hover, .port-stat:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

/* ───── cards ─────
   Static content cards stay calm: only a warm border + soft shadow on hover
   (no lift) so pages don't bounce. Cards that are genuinely clickable opt in
   via `.card.is-link` / an anchor wrapper and get the premium lift below. */
.card {
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle);
}
.card:hover { border-color: var(--line); }   /* baseline: no jump */
a > .card, a.card, .card.is-link {
  cursor: pointer;
}
a > .card:hover, a.card:hover, .card.is-link:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

/* ───── count-up numerics (sibling agent animates the value) ─────
   Tabular figures + JetBrains-Mono feature so a number ticking 0→1.234
   never reflows width mid-animation. Pure styling; no JS here. */
.countup {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variation-settings: normal;
}

/* ════════════════════════════════════════════════
   Motion layer — TRANSFORM-based lift/press only.
   Everything below is suppressed when the user asks
   for reduced motion (the colour/shadow affordances
   above remain, so the UI is still clearly responsive).
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Button press — barely-there tactile feedback. */
  .btn:active { transform: translateY(0.5px) scale(.99); }
  .kbo-copy:active { transform: scale(0.92); }

  /* Linked cards lift on hover — the one "premium" gesture, kept to -2px
     and a single tuned pop shadow so it feels expensive, not springy. */
  a > .card:hover, a.card:hover, .card.is-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
  }

  /* Clearly-clickable data rows nudge up a hair on hover. */
  .own-row:hover, .estab-row:hover {
    transform: translateY(-1px);
  }
}

/* ════════════════════════════════════════════════
   Page polish — the shared "premium editorial" layer
   ──────────────────────────────────────────────────
   Used by every secondary page through PageHeader + the
   .section-head / .empty-state / .feature-tile helpers.
   Warm-white surface, Fraunces headlines, accent dashes;
   all motion is gated behind prefers-reduced-motion.
   ════════════════════════════════════════════════ */

/* ───── page hero (PageHeader) ───── */
.page-hero {
  position: relative;
  margin-bottom: 24px;
  padding: 34px 0 22px;
  border-bottom: 1px solid var(--line);
  /* Clean white hero — no dotted texture, no tinted gradients. */
}
.page-hero::after {
  /* thin accent hairline riding on top of the bottom border */
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 56px; height: 2px;
  border-radius: var(--r-full);
  background: var(--ds-accent);
}
.page-hero-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.page-hero-text { flex: 1 1 420px; min-width: 0; max-width: 760px; }
.page-hero-kicker {
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.page-hero-title {
  font-size: var(--ds-fs-39);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.page-hero-title .serif-italic { font-weight: 500; color: var(--ink); }
.page-hero-sub {
  color: var(--fg-mid);
  margin: 8px 0 0;
  line-height: 1.55;
  max-width: 70ch;
}
.page-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
  /* nudge the CTA row to baseline with the title */
  padding-top: 4px;
}

/* ───── eyebrow (accent label) ───── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-accent-deep);
  margin-bottom: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: 0.8;
}
.eyebrow.alert { color: var(--alert-deep); }

/* ───── icon badge ───── */
.icon-badge {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  color: var(--ds-accent-deep);
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.icon-badge.lg {
  width: 56px; height: 56px;
  border-radius: var(--r-xl);
}
.icon-badge.lg svg { width: 28px; height: 28px; }
/* tonal variants so different page families can self-colour their anchor —
   white ground, the colour rides on the glyph + border (indicator doctrine) */
.icon-badge.violet { color: var(--data-violet); background: var(--bg-lowest); border-color: #b6ebe8; }
.icon-badge.alert  { color: var(--alert-deep); background: var(--bg-lowest); border-color: var(--risk-med-border); }
.icon-badge.danger { color: var(--risk-high); background: var(--bg-lowest); border-color: var(--risk-high-border); }
.icon-badge.ok     { color: #047857; background: var(--bg-lowest); border-color: var(--risk-low-border); }
.icon-badge.ink    { color: var(--ink-soft); background: var(--bg-lowest); border-color: var(--line); }
/* a small variant for inline section heads */
.icon-badge.sm { width: 32px; height: 32px; border-radius: var(--r-md); }
.icon-badge.sm svg { width: 18px; height: 18px; }

/* ───── section head (in-page anchors) ───── */
.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.section-head .section-title {
  font-family: var(--serif);
  font-size: var(--ds-fs-20);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0;
}
.section-head .section-sub {
  font-size: 12.5px;
  color: var(--fg-mute);
  margin: 2px 0 0;
  line-height: 1.4;
}
.section-head .section-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
  white-space: nowrap;
}

/* ───── empty state (replaces bare "geen resultaten") ───── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 48px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--bg-lowest);
}
.empty-state .icon-badge { margin-bottom: 8px; }
.empty-state .empty-title {
  font-family: var(--serif);
  font-size: var(--ds-fs-20);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  margin: 0;
}
.empty-state .empty-sub {
  font-size: 13.5px;
  color: var(--fg-mute);
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
}
.empty-state .empty-cta { margin-top: 10px; }

/* ───── accent rule (decorative divider) ───── */
.accent-rule {
  height: 1px;
  border: 0;
  margin: 24px 0;
  background: linear-gradient(90deg,
    transparent,
    var(--line-strong) 12%,
    var(--line-strong) 88%,
    transparent);
  position: relative;
}
.accent-rule::before {
  content: "";
  position: absolute;
  left: 0; top: -0.5px;
  width: 48px; height: 2px;
  border-radius: var(--r-full);
  background: var(--ds-accent);
}

/* ───── feature tile (value-prop grids) ───── */
.feature-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  text-decoration: none;
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle);
}
.feature-tile .feature-title {
  font-size: var(--ds-fs-16);
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
}
.feature-tile .feature-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-mid);
  flex: 1;
}
a.feature-tile:hover { border-color: var(--line-strong); }

/* ───── card-header refinement — optional accent on a card-h title ───── */
.card-h .title.with-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card-h .title.with-accent::before {
  content: "";
  width: 3px; height: 14px;
  border-radius: var(--r-full);
  background: var(--ds-accent);
}

/* ───── page-polish responsive ───── */
@media (max-width: 768px) {
  .page-hero { padding: 22px 0 18px; }
  .page-hero-title { font-size: var(--ds-fs-25); }
  .page-hero-actions { margin-left: 0; width: 100%; }
  .section-head .section-title { font-size: var(--ds-fs-18); }
  .empty-state { padding: 36px 18px; }
}

/* ───── page-polish motion (gated) ───── */
@media (prefers-reduced-motion: no-preference) {
  a.feature-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--ds-elev-3);
  }
}

/* ───── dark mode placeholder ───── */
/*
 * Dark mode is planned for a later release.
 * When implemented, override the :root custom properties here inside:
 *   @media (prefers-color-scheme: dark) { :root { ... } }
 * All component rules use CSS variables and will adapt automatically.
 */

/* === vastgoed tab === */
/* Vastgoedvoetafdruk dossier tab: honesty lead, regional split bar, parcel
   table accents and the methodology block. Region colours are the neutral
   categorical ramp (semantic g/a/r stays reserved for risk). */
.vg-lead {
  margin: 0 0 16px;
  font-size: var(--ds-fs-13);
  line-height: 1.55;
  color: var(--ds-fg-mid);
}
.vg-regionbar {
  display: flex;
  height: 14px;
  border-radius: var(--ds-r-full, 999px);
  overflow: hidden;
  background: var(--ds-line-soft);
}
.vg-regionbar-seg { display: block; height: 100%; }
.vg-regionbar-seg + .vg-regionbar-seg { border-left: 2px solid var(--ds-surface); }
.vg-region-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
}
.vg-region-item { display: inline-flex; align-items: center; gap: 6px; }
.vg-region-swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.vg-region-count { font-weight: 600; color: var(--ds-ink); }
.vg-region-pct { color: var(--ds-fg-mute); }
.vg-dim { color: var(--ds-fg-mute); font-size: var(--ds-fs-12); }
.vg-note { font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }
/* Heritage badge on a parcel row (mig 199 overlay): neutral, informational,
   never a risk colour. Sits under the capakey, no layout jump when absent. */
.vg-heritage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 5px;
  font-size: var(--ds-fs-12);
  line-height: 1.4;
}
.vg-heritage-kind { color: var(--ds-fg-mid); }
.vg-heritage-name { color: var(--ds-fg-mute); font-style: italic; }
.vg-heritage-src { color: var(--ds-accent, #2563eb); text-decoration: none; white-space: nowrap; }
.vg-heritage-src:hover { text-decoration: underline; }
.vg-method {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
}
.vg-method-title {
  display: block;
  font-size: var(--ds-fs-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-fg-mute);
  margin-bottom: 6px;
}
.vg-method-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--ds-fs-12);
  line-height: 1.5;
  color: var(--ds-fg-mid);
}
/* Linked KPI tile value (KpiRail.KpiItem.Href) — e.g. the hero vastgoed fact. */
.ds-kpirail-link {
  color: var(--ds-ink);
  text-decoration: none;
}
.ds-kpirail-link:hover { text-decoration: underline; }
/* === landing wave === */
/* Freshness proof strip (home) — live "laatste Staatsblad-verwerking" stamp */
.fs-strip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto 8px; padding: 6px 14px; width: fit-content;
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: 99px; box-shadow: var(--shadow-1);
  font-family: var(--ds-sans); font-size: var(--ds-fs-12);
}
.fs-strip-dot {
  width: 7px; height: 7px; border-radius: 99px; background: var(--ds-good);
  animation: fsPulse 2s ease-out infinite;
}
@keyframes fsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.45); }
  100% { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
}
.fs-strip-label { color: var(--ds-fg-mid); }
.fs-strip-label::after { content: ":"; }
.fs-strip-value { color: var(--ds-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Why-Checked differentiator rail (home) */
.why-rail { margin: 36px 0 44px; }
.why-title {
  font-family: var(--ds-serif); font-size: var(--ds-fs-25); font-weight: 600;
  letter-spacing: -0.015em; color: var(--ds-ink); margin: 0 0 18px;
}
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-sp-16);
  align-items: stretch;
}
.why-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg); padding: var(--ds-sp-18);
}
.why-card-title {
  font-family: var(--ds-sans); font-size: var(--ds-fs-14); font-weight: 600;
  letter-spacing: -0.01em; color: var(--ds-ink); margin: 0; line-height: 1.35;
}
.why-card-body {
  font-family: var(--ds-sans); font-size: var(--ds-fs-13); color: var(--ds-fg-mid);
  line-height: 1.55; margin: 0; flex: 1;
}
.why-example {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 2px;
  padding: 10px 12px; background: var(--ds-page-bg);
  border: 1px solid var(--ds-line-soft); border-radius: var(--ds-r-md);
  font-family: var(--ds-sans); font-size: var(--ds-fs-12); line-height: 1.45;
  color: var(--ds-fg-mid); text-align: left;
}
.why-example-ico { flex: 0 0 auto; line-height: 1.45; }
@media (max-width: 1024px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .why-grid { grid-template-columns: 1fr; } }

/* Pricing comparison table — "Checked vs. typische alternatieven" */
.cmp-wrap { border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); overflow-x: auto; background: var(--ds-surface); }
.cmp-table .cmp-col-checked { background: var(--ds-page-bg); }
.cmp-table th.cmp-col-checked { color: var(--ds-ink); }
.cmp-yes  { color: var(--ds-good); font-weight: 600; white-space: nowrap; }
.cmp-no   { color: var(--ds-fg-dim); white-space: nowrap; }
.cmp-part { color: var(--ds-fg-mid); }
@media (prefers-reduced-motion: reduce) { .fs-strip-dot { animation: none; } }
/* === end landing wave === */
/* === alerts wave === */
/* /alerts filter chips (kind + severity) and pagination links — SSR <a> chips,
   no JS. .alert-chip-on marks the active filter. */
.alert-chip-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.alert-chip-label {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11, 11px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  margin-right: 4px;
}
.alert-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-fg-mid);
  text-decoration: none;
  padding: 4px 11px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-surface);
  white-space: nowrap;
}
.alert-chip:hover { color: var(--ds-ink); border-color: var(--ds-fg-mute); }
.alert-chip-on {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-inv);
}
.alert-chip-on:hover { color: var(--ds-inv); }

/* /alerts/rules — filter-rule kind checkbox grid */
.alert-kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.alert-kind-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg);
  cursor: pointer;
}
.alert-kind-opt:hover { border-color: var(--ds-fg-mute); }
.alert-kind-opt input { accent-color: var(--ds-accent); }

/* FilteredEventsPanel — what a watcher's own filter rules are holding back.
   Deliberately colourless: a filtered event is a thing the reader asked not to
   see, not a warning, so no --ds-warn / --ds-bad anywhere in this block. The
   row is a wrapping flex line rather than a table because it carries four short
   facts and has to survive a 360px viewport without a horizontal scroller. */
.fep { margin-bottom: var(--ds-sp-18, 18px); }
.fep-list {
  list-style: none;
  margin: var(--ds-sp-14, 14px) 0 0;
  padding: 0;
  border-top: 1px solid var(--ds-line);
}
.fep-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ds-line);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  line-height: 1.45;
  min-width: 0;
}
.fep-row:last-child { border-bottom: 0; }
.fep-date {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  white-space: nowrap;
}
.fep-what { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.fep-kind { font-weight: 600; color: var(--ds-ink); }
.fep-sev { font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }
.fep-who { color: var(--ds-fg-mid); min-width: 0; overflow-wrap: anywhere; }
.fep-who a { color: var(--ds-fg-mid); text-decoration: none; font-weight: 600; }
.fep-who a:hover { color: var(--ds-ink); text-decoration: underline; }
.fep-rule {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
/* Compact form, inside the filter-rule panel on /alerts/rules. */
.fep-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: var(--ds-sp-14, 14px);
  padding-top: var(--ds-sp-14, 14px);
  border-top: 1px solid var(--ds-line);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  line-height: 1.5;
}
.fep-note a { color: var(--ds-fg-mid); font-weight: 600; text-decoration: none; white-space: nowrap; }
.fep-note a:hover { color: var(--ds-ink); text-decoration: underline; }
/* === end alerts wave === */
/* === semantic events === */
/* Narrated BS-act feed (ActsCard) + freshness stamps (FreshnessBadge).
   Severity language: info = grey (routine), notable = amber (money/structure
   moved), warning = red (company in trouble / winding down). */

.sem-feed { display: flex; flex-direction: column; gap: 6px; }

.sem-year {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-fg-mute);
  letter-spacing: 0.06em;
  padding: 4px 0 2px;
  margin-top: 8px;
  border-bottom: 1px solid var(--ds-line);
}
.sem-feed .sem-year:first-child { margin-top: 0; }

.sem-act {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
}
.sem-act-summary {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  list-style: none;
}
.sem-act-summary::-webkit-details-marker { display: none; }

.sem-dot {
  flex: none;
  align-self: center;
  width: 9px; height: 9px;
  border-radius: 99px;
  background: var(--ds-fg-dim);
}
.sem-dot--info    { background: var(--ds-fg-dim); }
.sem-dot--notable { background: var(--ds-warn); }
.sem-dot--warning { background: var(--ds-bad); }

.sem-act-date {
  color: var(--ds-fg-mute);
  font-size: var(--ds-fs-12);
  min-width: 84px;
  white-space: nowrap;
}
.sem-act-icon { flex: none; display: inline-flex; align-items: center; color: var(--ds-fg-dim); }

.sem-act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sem-act-sentence {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.35;
}
.sem-act-meta {
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}
.sem-sep { margin: 0 5px; color: var(--ds-fg-dim); }
.sem-numac { color: var(--ds-accent-deep); text-decoration: none; }
.sem-numac:hover { text-decoration: underline; }

.sem-act-body {
  padding: 14px;
  border-top: 1px solid var(--ds-line);
  font-size: var(--ds-fs-13);
}
.sem-detail-list {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--ds-ink-soft);
  font-size: var(--ds-fs-12);
  line-height: 1.6;
}

.freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 500;
  color: var(--ds-fg-mute);
  background: var(--ds-line-soft);
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 640px) {
  .sem-act-date { min-width: 0; }
  .sem-act-summary { flex-wrap: wrap; }
}
/* === network graph === */
/* NetworkGraph.razor — SSR radial network graph on the dossier structuur tab.
   Pure SVG, no JS: hover affordances are CSS-only on the SVG anchor groups. */
.ds-netgraph { margin: 0 0 16px; }
.ds-netgraph-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
}
.ds-ng-node { cursor: default; }
a.ds-ng-node { cursor: pointer; text-decoration: none; outline: none; }
.ds-ng-bubble { transition: stroke-width var(--ds-dur-1) var(--ds-ease-out); }
a.ds-ng-node:hover .ds-ng-bubble,
a.ds-ng-node:focus-visible .ds-ng-bubble { stroke-width: 2.6; }
a.ds-ng-node:hover .ds-ng-label,
a.ds-ng-node:focus-visible .ds-ng-label { fill: var(--ds-ink); }
.ds-netgraph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--ds-line-soft);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}
.ds-netgraph-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ds-netgraph-key svg { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .ds-ng-bubble { transition: none; }
}
/* === financials wave ===
   Financial-dossier excellence layer: provenance line, CSS-only metric
   tooltips (fin-tip), the ?y= value-mode toggle, direction-aware delta
   chips, the grouped bar chart + balance-composition strips, the gated
   Gezondheidsbarometer score-history, and the free hero health badge. */

/* ── filing provenance line ("Jaarrekening neergelegd op … bij NBB") ── */
.fin-provenance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ds-line-soft);
  font-variant-numeric: tabular-nums;
}

/* ── fin-tip — CSS-only hover/focus tooltip on metric labels ──
   No JS, CSP-safe, keyboard-reachable (tabindex=0). The bubble opens BELOW
   the label: the tables live inside overflow-x:auto wrappers, and an
   upward bubble would clip against the scroll container on the top rows.
   display (not opacity) toggling keeps the hidden bubble out of the
   scrollable-overflow area. white-space:pre-line renders the optional
   second line (sector median P50). */
.fin-tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--ds-fg-dim);
}
.fin-tip::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 45;
  width: max-content;
  max-width: 320px;
  padding: 9px 11px;
  background: var(--ds-surface);
  color: var(--ds-fg);
  border: 1px solid var(--ds-line);
  font-size: var(--ds-fs-12);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  white-space: pre-line;
  border-radius: var(--ds-r-md);
  box-shadow: var(--shadow-pop);
}
.fin-tip::before {
  /* caret */
  content: "";
  display: none;
  position: absolute;
  left: 14px;
  top: calc(100% + 2px);
  border: 5px solid transparent;
  border-bottom-color: var(--ds-line);
  z-index: 46;
}
.fin-tip:hover::after, .fin-tip:focus-visible::after,
.fin-tip:hover::before, .fin-tip:focus-visible::before { display: block; }
@media print { .fin-tip { border-bottom: 0; } .fin-tip::after, .fin-tip::before { display: none !important; } }

/* ── value-mode toggle (?y=abs|delta) — plain SSR links ── */
.fin-mode {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  overflow: hidden;
}
.fin-mode a {
  padding: 4px 11px;
  font-size: var(--ds-fs-12);
  font-weight: 500;
  color: var(--ds-fg-mute);
  text-decoration: none;
  background: var(--ds-surface);
  border-right: 1px solid var(--ds-line);
  transition: background var(--ds-dur-1) var(--ds-ease-out), color var(--ds-dur-1) var(--ds-ease-out);
}
.fin-mode a:last-child { border-right: 0; }
.fin-mode a:hover { color: var(--ds-ink); background: var(--ds-line-soft); }
.fin-mode a.on {
  color: var(--ds-inv);
  background: var(--ds-accent);
  font-weight: 600;
}
@media print { .fin-mode { display: none; } }

/* ── direction-neutral "notable move" delta chip (amber) ──
   Complements ds-delta-up/-dn for polarity-0 metrics (e.g. DPO): a big
   move is worth an eye, but neither green nor red would be honest. */
.ds-delta-note { color: var(--ds-warn); }

/* ── BarChart (DesignSystem/Charts/BarChart.razor) ── */
.ds-barchart { margin: 0 0 4px; }
.ds-barchart svg { width: 100%; height: auto; }
.ds-barchart-legend {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-16);
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
}
.ds-barchart-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ds-barchart-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

/* ── Horizontal scroller for a table that cannot shrink further ───────
   A .ds-table with fixed-percentage columns and unshrinkable content (a NACE
   description, an IBR number, a dd-mm-yyyy range) is wider than the 328px a
   panel leaves at a 360px viewport. Without this the table simply LEAVES its
   card: measured 2026-08-15, the auditor table by 105px and the legal-structure
   table by 36px, both with documentElement.scrollWidth == clientWidth because
   the panel clipped the overflow. Named rather than re-inlined, because
   `style="overflow-x:auto"` was already copied into FinancialsCard four times. */
.ds-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* A scroller is the safety net, not the goal: prefer the table to FIT. Its
   header row is nowrap by design (year columns must not break), which is what
   pushed the three-column auditor table past the viewport in the first place.
   On a phone let those headers wrap, so the swipe is only needed when the data
   itself genuinely cannot fit. Scoped to wrapped tables so no other table's
   header geometry changes. */
@media (max-width: 560px) {
  .ds-tablewrap .ds-table thead th { white-space: normal; }
}

/* ── Trend wall (FinancialsCard) ──────────────────────────────────────
   The multi-year sparkline tiles. Was an inline style on one grid; it is a
   class now because the wall renders TWICE, the open head and the disclosed
   tail, and two copies of a grid definition is how the two drift apart. */
.fin-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--ds-sp-12);
}

/* ── StackedBar composition strip (DesignSystem/Charts/StackedBar.razor) ── */
.fin-comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sp-22);
}
@media (max-width: 720px) { .fin-comp-grid { grid-template-columns: 1fr; } }
.ds-stackbar { min-width: 0; }
.ds-stackbar-title {
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  margin-bottom: 7px;
}
.ds-stackbar-track {
  display: flex;
  height: 22px;
  border-radius: var(--ds-r-md);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  background: var(--ds-line-soft);
}
.ds-stackbar-seg { height: 100%; min-width: 1px; }
.ds-stackbar-seg + .ds-stackbar-seg { border-left: 1px solid rgba(255, 255, 255, 0.65); }
.ds-stackbar-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}
.ds-stackbar-key {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
}
.ds-stackbar-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  flex: 0 0 auto;
  align-self: center;
}
.ds-stackbar-lbl { min-width: 0; }
.ds-stackbar-val {
  margin-left: auto;
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
  white-space: nowrap;
}

/* ── Gezondheidsbarometer score history (gated depth) ── */
.health-history {
  display: flex;
  align-items: flex-end;
  gap: var(--ds-sp-12);
}
.health-history-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hh-score {
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-12);
  font-weight: 600;
  line-height: 1;
}
.hh-bar {
  display: block;
  width: 14px;
  height: 44px;
  background: var(--ds-line-soft);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.hh-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-radius: 3px 3px 0 0;
}
.hh-year {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-10);
  color: var(--ds-fg-mute);
  line-height: 1;
}

/* ── free hero health badge (the wedge, visible to everyone) ── */
.ds-health-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  background: var(--ds-surface);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.ds-health-badge:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.ds-health-badge .hb-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  align-self: center;
  flex: 0 0 auto;
}
.ds-health-badge strong {
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-13);
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-health-badge .hb-denom {
  font-size: var(--ds-fs-10);
  font-weight: 500;
  color: var(--ds-fg-mute);
}
.ds-health-badge .hb-band { font-weight: 600; }

/* === trajectory === */
/* Trajectorie (indicatief) — the 3-year projection on the financieel tab.
   Light analyst register: white surface, hairline borders, ink text. */
.tj-section {
  border-bottom: 1px solid var(--ds-line);
  padding-bottom: 16px;
  margin-bottom: 14px;
}
.tj-sub {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  margin: 2px 0 10px;
}
.tj-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  margin: 0 0 10px;
}
.tj-tabs a {
  padding: 4px 11px;
  border-radius: calc(var(--ds-r-md) - 3px);
  font-size: var(--ds-fs-12);
  font-weight: 500;
  color: var(--ds-fg-mute);
  text-decoration: none;
  white-space: nowrap;
}
.tj-tabs a:hover { color: var(--ds-ink); }
.tj-tabs a.on {
  color: var(--ds-ink);
  font-weight: 600;
  border: 1px solid var(--ds-line);
  background: var(--ds-line-soft);
}
.tj-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.tj-pill {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--ds-surface);
}
.tj-pill-up   { color: var(--ds-good); }
.tj-pill-dn   { color: var(--ds-bad); }
.tj-pill-flat { color: var(--ds-fg-mid); }
.tj-pill-vol  { color: var(--ds-warn); }
.tj-insight {
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
}
.tj-chart { margin: 0; }
.tj-legend {
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-dim);
  margin-top: 6px;
}
.tj-method { margin-top: 10px; }
.tj-method summary {
  cursor: pointer;
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-fg-mid);
}
.tj-method summary:hover { color: var(--ds-ink); }
.tj-method p {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.55;
  margin: 8px 0 0;
  max-width: 70ch;
}

/* === decision tools ===
   Krediet-advies (/tools/kredietcheck + dossier card) and Portefeuille-scan
   (/tools/portefeuille). LIGHT doctrine: white surfaces, hairline --ds-line
   borders, ink text, no panel fills; the only colour is the semantic verdict
   band + the emerald action accents already defined by the token scale. */

/* ── krediet-advies verdict panel ── */
.cv-panel { font-family: var(--ds-sans); }
.cv-verdict {
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-18) var(--ds-sp-18);
}
.cv-verdict-head {
  font-size: var(--ds-fs-16);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cv-verdict-sub {
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  line-height: 1.5;
  margin-top: 4px;
  max-width: 560px;
}
.cv-lowconf {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ds-line);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  line-height: 1.5;
}
.cv-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding: var(--ds-sp-12) var(--ds-sp-14);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
}
.cv-headline-text {
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink-soft);
  line-height: 1.5;
}
.cv-suggested { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.cv-suggested-num {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  color: var(--ds-ink-soft);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cv-suggested-note { font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }
.cv-advice ul, .cv-reasons ul {
  margin: 6px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-advice li { font-size: var(--ds-fs-13); color: var(--ds-fg); line-height: 1.5; }
.cv-reasons { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-line-soft); }
.cv-reasons li { font-size: var(--ds-fs-12); color: var(--ds-fg-mid); line-height: 1.5; }
.cv-disclaimer {
  margin-top: 14px;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.5;
}
/* Emerald action accent (light doctrine: ink is never a fill). */
.cv-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: var(--ds-r-md);
  background: var(--ds-accent);
  border: 1px solid var(--ds-accent);
  color: var(--fg-inv);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cv-cta:hover { background: var(--ds-accent-deep); border-color: var(--ds-accent-deep); }

/* ── krediet-advies form ── */
.cv-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--ds-sp-14);
}
@media (max-width: 640px) { .cv-form-grid { grid-template-columns: 1fr; } }
.cv-company-fixed {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
}
.cv-how {
  margin-top: var(--ds-sp-26);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
}
.cv-how summary {
  cursor: pointer;
  padding: var(--ds-sp-14) var(--ds-sp-18);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  list-style: none;
}
.cv-how summary::before { content: "▸ "; color: var(--ds-fg-mute); }
.cv-how[open] summary::before { content: "▾ "; }
.cv-how-body {
  padding: 0 var(--ds-sp-18) var(--ds-sp-18);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  line-height: 1.6;
}
.cv-how-body ol { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ── portefeuille-scan table ── */
.pf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg);
}
.pf-table thead th {
  text-align: left;
  padding: 10px var(--ds-sp-14);
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-surface);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  white-space: nowrap;
}
.pf-table tbody td {
  padding: var(--ds-sp-12) var(--ds-sp-14);
  border-bottom: 1px solid var(--ds-line-soft);
  vertical-align: top;
}
.pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-table tbody tr:hover td { background: var(--ds-line-soft); }
.pf-table th.num, .pf-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-sort {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.pf-sort:hover { color: var(--ds-ink); text-decoration: underline; }
.pf-sort-on { color: var(--ds-ink); }
.pf-sort-on::after { content: " ↓"; }

/* ── /tools index cards ── */
.tool-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-sp-16);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-18) var(--ds-sp-22);
  text-decoration: none;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out);
}
.tool-card:hover { border-color: var(--ds-fg-dim); }
.tool-card-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-16);
  font-weight: 600;
  color: var(--ds-ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-card-q {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-ink-soft);
  font-style: italic;
  margin-top: 4px;
}
.tool-card-body {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mute);
  line-height: 1.5;
  margin-top: 6px;
  max-width: 560px;
}
.tool-card-arrow { color: var(--ds-fg-dim); font-size: var(--ds-fs-18); flex-shrink: 0; }
/* === ux wave === */
/* 2026-06 usability pass. Light doctrine: white surfaces, hairline #e6e8ec
   borders, ink text, emerald accent — no dark fills anywhere below. */

/* ── Fully-clickable rows ──
   [data-row-href] rows (search results, browse tables, /live feed, prospects)
   are convenience click targets via js/row-link.js; the inner name <a> stays
   the canonical link. Pointer + a calm emerald-tint hover, and the same tint
   on :focus-within so keyboard users see where they are. */
[data-row-href] { cursor: pointer; }
tr[data-row-href]:hover td,
tr[data-row-href]:focus-within td { background: rgba(11, 138, 93, 0.05); }
li[data-row-href]:hover,
li[data-row-href]:focus-within { background: rgba(11, 138, 93, 0.04); }
tr[data-row-href] a:focus-visible,
li[data-row-href] a:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: 2px; }

/* ── Map panel chrome — used by the /kaart national density map
   (DensityMap.razor). (Was shared with the /companies seat map until that
   sparse, useless dot map was removed 2026-07.) ── */
.cmap-panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-16) var(--ds-sp-18);
  margin-bottom: var(--ds-sp-18);
}
.cmap-head {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sp-12);
  margin-bottom: var(--ds-sp-8);
  flex-wrap: wrap;
}
.cmap-sub {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}

/* ── BelgiumMap (DesignSystem/Charts/BelgiumMap.razor) ──
   Pure-SSR SVG pin map. The country shape is a MAP surface, so it may carry
   the light #f7f8f9 fill (doctrine exception for maps); everything else stays
   hairline + accent. */
.bm-wrap { margin: 0; }
.bm-svg { display: block; width: 100%; height: auto; max-height: 340px; }
.bm-outline {
  fill: #f7f8f9;
  stroke: var(--ds-line);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.bm-pin {
  fill: var(--ds-accent);
  stroke: #ffffff;
  stroke-width: 1.2;
  transition: r var(--ds-dur-1) var(--ds-ease-out);
}
.bm-pin-approx { fill: var(--ds-warn); }
.bm-pin-link:hover .bm-pin,
.bm-pin-link:focus-visible .bm-pin { r: 7; stroke-width: 1.6; }
.bm-pin-link:focus-visible { outline: none; }
.bm-foot {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-16);
  flex-wrap: wrap;
  margin-top: var(--ds-sp-8);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.bm-key { display: inline-flex; align-items: center; gap: 6px; }
.bm-key-dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--ds-accent);
  flex: 0 0 auto;
}
.bm-key-dot-approx { background: var(--ds-warn); }
.bm-more { font-family: var(--ds-mono); font-size: var(--ds-fs-11); }

/* ══ Real maps (Components/Shared/LocationMap.razor + js/map-engine.js) ══
   Leaflet over OSM tiles, self-hosted, lazily loaded.

   THE FIRST SECOND is the whole design here. The frame reserves its box with
   aspect-ratio so nothing can ever jump, and an opaque placeholder sits ON TOP
   of the map until real tiles have painted. That placeholder is what a reader
   sees while Leaflet downloads, what they keep if JavaScript never runs, and
   what stays put (with an honest note) if tiles fail. Leaflet's own #ddd
   never becomes visible. */
.ckmap-wrap { margin: 0; }

.ckmap-frame {
  position: relative;
  width: 100%;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  overflow: hidden;
  background: var(--ds-page-bg);
}

/* Leaflet takes this element over; z-index makes it its own stacking context
   so every Leaflet pane and control stays underneath the placeholder. */
.ckmap { position: absolute; inset: 0; z-index: 1; }

.ckmap-ph {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--ds-sp-8);
  padding: var(--ds-sp-12);
  pointer-events: none;
  /* An abstract grid: legible as "a map is coming" without drawing a shape
     that claims to be anywhere. */
  background-color: var(--ds-page-bg);
  background-image:
    linear-gradient(to right, var(--ds-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ds-line-soft) 1px, transparent 1px);
  background-size: 34px 34px;
  transition: opacity var(--ds-dur-2) var(--ds-ease-out), visibility var(--ds-dur-2);
}
.ckmap[data-ck-map-state="ready"] + .ckmap-ph { opacity: 0; visibility: hidden; }

.ckmap-ph-pin { display: inline-flex; flex: 0 0 auto; }
.ckmap-ph-pin.is-exact { color: var(--ds-good); }
.ckmap-ph-pin.is-approx { color: var(--ds-warn); }
.ckmap-ph-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.ckmap-ph-txt strong {
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ckmap-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  flex-wrap: wrap;
  margin-top: var(--ds-sp-8);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.ckmap-precision { display: inline-flex; align-items: center; gap: 6px; }
.ckmap-dot { width: 9px; height: 9px; border-radius: 99px; flex: 0 0 auto; }
.ckmap-dot.is-exact { background: var(--ds-good); }
.ckmap-dot.is-approx { background: var(--ds-warn); }
.ckmap-out {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ds-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--ds-line);
}
.ckmap-out:hover { color: var(--ds-ink); border-bottom-color: var(--ds-ink); }

/* ── Leaflet chrome, restyled to the design system ── */
.ckmap .leaflet-container {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  background: var(--ds-page-bg);
}
.ckmap .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.86);
  color: var(--ds-fg-mute);
  font-size: var(--ds-fs-10);
  padding: 1px 6px;
}
.ckmap .leaflet-control-attribution a { color: var(--ds-fg-mid); }
.ckmap .leaflet-bar,
.ckmap .leaflet-control-zoom {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  box-shadow: var(--ds-elev-1);
}
.ckmap .leaflet-bar a {
  color: var(--ds-ink);
  background: var(--ds-surface);
  border-bottom-color: var(--ds-line);
}
.ckmap .leaflet-bar a:hover { background: var(--ds-page-bg); color: var(--ds-ink); }

/* Street/satellite toggle (map-engine createBasemapController) */
.ck-basemap { display: flex; overflow: hidden; background: var(--ds-surface); }
.ck-basemap__btn {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--ds-line);
  background: var(--ds-surface);
  color: var(--ds-ink-soft);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1.4;
}
.ck-basemap__btn:first-child { border-left: 0; }
/* Accent, not ink: ink is a text/hairline colour and never a surface. */
.ck-basemap__btn.is-active { background: var(--ds-accent); color: var(--ds-inv); }
.ck-basemap__btn:hover:not(.is-active) { background: var(--ds-page-bg); }

/* Marker + accuracy ring (divIcon / L.circle from map-engine) */
.ck-pin-wrap { background: none; border: 0; }
.ck-pin {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.45);
}
.ck-pin--exact { background: var(--ds-good); }
.ck-pin--approx { background: var(--ds-warn); }
.ck-accuracy {
  stroke: var(--ds-warn);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  fill: var(--ds-warn);
  fill-opacity: 0.12;
}

/* ── Seat without coordinates (SeatLocatorCard.razor) ──
   Says why there is no map. An absent panel used to read as "nothing to
   report", which is the one thing a missing geocode never means. */
.seatmap { display: flex; flex-direction: column; gap: var(--ds-sp-8); }
.seatmap-none {
  display: flex;
  gap: var(--ds-sp-12);
  padding: var(--ds-sp-14);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-page-bg);
}
.seatmap-none-icon { flex: 0 0 auto; color: var(--ds-fg-mute); margin-top: 1px; }
.seatmap-none-body { min-width: 0; }
.seatmap-none-body strong {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
}
.seatmap-none-body p {
  margin: var(--ds-sp-4) 0 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.5;
}
.seatmap-none-addr {
  display: flex;
  flex-direction: column;
  margin-top: var(--ds-sp-8);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-style: normal;
  color: var(--ds-ink-soft);
}

/* ── /kaart: the density choropleth on a real basemap ──
   Here the placeholder is the SSR choropleth itself, so the reader gets the
   real picture immediately and the basemap arrives underneath it. No abstract
   grid, and no white flash between the two states. */
/* Belgium's bounding box is roughly 1.2:1 (only a little wider than tall), so
   a 16:10 frame leaves the country floating in a sea of France and Germany.
   These ratios track the country's own shape; the max-height stops it from
   eating a whole 2560px screen. */
.ckmap-frame--density { aspect-ratio: 4 / 3; }
@media (min-width: 720px) {
  .ckmap-frame--density { aspect-ratio: 3 / 2; max-height: 720px; }
}
.ckmap-ph--chart {
  background-image: none;
  align-items: center;
  justify-content: center;
  padding: var(--ds-sp-8);
}
.ckmap-ph--chart .bdm-svg { width: auto; max-width: 100%; max-height: 100%; }

@media (max-width: 480px) {
  .ck-basemap__btn { font-size: var(--ds-fs-10); padding: 4px 8px; }
  .ckmap-foot { font-size: var(--ds-fs-11); }
}

/* ── BelgiumDensityMap (DesignSystem/Charts/BelgiumDensityMap.razor) ──
   Pure-SSR national choropleth. Cell fills are computed server-side from the
   light emerald ramp (BelgiumDensityGrid.Ramp, white → --ds-accent-deep) and
   land as inline SVG fill attributes; only the chrome lives here. The base
   country shape keeps the light MAP surface (#f7f8f9 doctrine exception). */
.bdm-wrap { margin: 0; }
.bdm-svg { display: block; width: 100%; height: auto; max-height: 560px; }
.bdm-base {
  fill: #f7f8f9;
  stroke: none;
}
.bdm-outline {
  fill: none;
  stroke: var(--ds-line);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.bdm-cell { shape-rendering: crispEdges; }
.bdm-cell:hover { stroke: var(--ds-accent-deep); stroke-width: 0.8; }
.bdm-foot {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-12);
  flex-wrap: wrap;
  margin-top: var(--ds-sp-12);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.bdm-legend { display: inline-flex; border: 1px solid var(--ds-line); border-radius: 3px; overflow: hidden; }
.bdm-swatch { display: block; width: 22px; height: 12px; }
.bdm-legend-bounds {
  display: inline-flex;
  gap: 6px;
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-11);
}

/* ══ /companies — search-first redesign (2026-07) ══════════════════════
   The page reads top-to-bottom as SEARCH → EXPLORE. A prominent hero search is
   the centrepiece; below it two calm discovery streams sit side by side. (The
   seat map that used to close the page was removed 2026-07 — sparse and
   useless.) Light doctrine throughout — white surfaces, hairlines, a single
   emerald accent — and every motion is gated on prefers-reduced-motion. Design
   tokens only, no hardcoded scales. */

/* ── Hero search (the star) ── */
.cs-hero {
  position: relative;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xl);
  background:
    radial-gradient(115% 130% at 50% -30%, var(--ds-accent-soft) 0%, rgba(233, 245, 240, 0) 60%),
    var(--ds-surface);
  box-shadow: var(--ds-elev-2);
  padding: 44px var(--ds-sp-32) var(--ds-sp-32);
  margin: var(--ds-sp-12) 0 var(--ds-sp-26);
  text-align: center;
  overflow: hidden;
}
.cs-hero-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ds-ink);
  margin: var(--ds-sp-8) 0 0;
}
.cs-hero-sub {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-fg-mid);
  line-height: 1.5;
  margin: var(--ds-sp-8) auto 0;
  max-width: 500px;
}
.cs-search {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-8);
  max-width: 640px;
  margin: var(--ds-sp-22) auto 0;
  background: var(--ds-surface);
  border: 1.5px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: 7px 7px 7px var(--ds-sp-16);
  box-shadow: var(--ds-elev-1);
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.cs-search:focus-within {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 4px rgba(11, 138, 93, 0.12);
}
.cs-search-ico { color: var(--ds-fg-mute); flex: 0 0 auto; display: inline-flex; }
.cs-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-16);
  color: var(--ds-ink);
  padding: 12px 4px;
}
.cs-search input::placeholder { color: var(--ds-fg-dim); }
.cs-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ds-accent);
  color: var(--ds-inv);
  border: 0;
  border-radius: var(--ds-r-md);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  padding: 11px 20px;
  cursor: pointer;
  transition: background var(--ds-dur-1) var(--ds-ease-out);
}
.cs-search-btn:hover { background: var(--ds-accent-deep); }
.cs-search-btn:focus-visible { outline: 2px solid var(--ds-accent-deep); outline-offset: 2px; }
/* Quick-start row: famous names as one-tap shortcuts into a dossier. */
.cs-quick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-8);
  margin: var(--ds-sp-16) auto 0;
  max-width: 660px;
}
.cs-quick-label { font-family: var(--ds-sans); font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }
.cs-quick-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 500;
  color: var(--ds-fg-mid);
  text-decoration: none;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  padding: 4px 12px;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), color var(--ds-dur-1) var(--ds-ease-out);
}
.cs-quick-chip:hover { border-color: var(--ds-accent); color: var(--ds-ink); }
.cs-quick-chip:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .cs-hero { padding: var(--ds-sp-26) var(--ds-sp-18) var(--ds-sp-22); }
  .cs-search-btn { padding: 11px 14px; }
}

/* ── Results head (query view): compact prefilled bar + refine filters ── */
.cs-resulthead { margin: var(--ds-sp-8) 0 var(--ds-sp-22); }
.cs-result-form { display: flex; flex-direction: column; gap: var(--ds-sp-12); }
.cs-result-form .cs-search { margin: 0; max-width: 560px; box-shadow: none; }
.cs-filters { display: flex; align-items: center; gap: var(--ds-sp-8); flex-wrap: wrap; }
.cs-filter {
  padding: 8px 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg);
}
.cs-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  cursor: pointer;
}
.cs-filter-check input { accent-color: var(--ds-accent); }
.cs-result-query { font-family: var(--ds-sans); font-size: var(--ds-fs-13); color: var(--ds-fg-mute); margin: 0; }
.cs-result-query .q { font-family: var(--ds-mono); color: var(--ds-fg-mid); }

/* ── Discovery streams (two calm scannable lists under the hero) ── */
.cb-band { margin: 0 0 var(--ds-sp-26); }
.cb-band-head { margin-bottom: var(--ds-sp-14); }
.cb-band-sub { font-family: var(--ds-sans); font-size: var(--ds-fs-13); color: var(--ds-fg-mute); margin: var(--ds-sp-4) 0 0; }
.cb-streams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-18);
  align-items: start;
}
@media (max-width: 860px) { .cb-streams { grid-template-columns: 1fr; } }
.cb-panel {
  display: flex;
  flex-direction: column;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-elev-1);
  overflow: hidden;
}
.cb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  padding: var(--ds-sp-14) var(--ds-sp-18);
  border-bottom: 1px solid var(--ds-line-soft);
  background: color-mix(in srgb, var(--ds-ink) 2%, #ffffff);
}
.cb-panel-headmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-panel-eyebrow-dot { width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto; }
.cb-panel-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ds-ink);
  margin: 0;
}
.cb-panel-count {
  flex: 0 0 auto;
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.cb-list { display: flex; flex-direction: column; }
.cb-row {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-12);
  padding: 10px var(--ds-sp-18);
  border-top: 1px solid var(--ds-line-soft);
  text-decoration: none;
  color: var(--ds-fg);
  transition: background var(--ds-dur-1) var(--ds-ease-out);
}
.cb-row:first-child { border-top: 0; }
.cb-row:hover { background: var(--ds-accent-soft); }
.cb-row:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
.cb-row-main { flex: 1 1 auto; min-width: 0; }
.cb-row-name {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-row-meta {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-row-meta .kbo { font-family: var(--ds-mono); font-size: var(--ds-fs-11); }
.cb-row-meta .cb-dot { margin: 0 5px; color: var(--ds-fg-dim); }
.cb-row-aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.cb-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  color: var(--ds-fg-mid);
  white-space: nowrap;
}
.cb-tag-dot { width: 7px; height: 7px; border-radius: 99px; flex: 0 0 auto; background: var(--ds-fg-dim); }
.cb-tag-dot.high { background: var(--ds-bad); }
.cb-tag-dot.med { background: var(--ds-warn); }
.cb-row-datelabel {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-10);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-dim);
}
.cb-row-date {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cb-panel-foot {
  margin-top: auto;
  padding: var(--ds-sp-12) var(--ds-sp-18);
  border-top: 1px solid var(--ds-line-soft);
}
.cb-panel-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-accent);
  text-decoration: none;
}
.cb-panel-more:hover { color: var(--ds-accent-deep); }
.cb-panel-more .arw { transition: transform var(--ds-dur-2) var(--ds-ease-settle); }
.cb-panel-more:hover .arw { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .cb-panel-more .arw { transition: none; }
  .cb-panel-more:hover .arw { transform: none; }
}

/* ── Ownership & control structure (Components/Shared/ControlStructureCard.razor)
   Layered, NOT radial. Every edge in this data runs between the subject and one
   counterparty; there is not a single counterparty-to-counterparty edge. Per-node
   spokes would therefore spend all their ink encoding nothing, and pay for it
   twice: they cannot survive 30 nodes, and a fixed-viewBox SVG scaled to a 360px
   screen renders its labels at about a third size. The panel this replaced used a
   1000x480 viewBox at width:100%, so its 14px names came out near 5px on a phone.
   One labelled arrow per LAYER carries the same information and keeps carrying it.

   Ordinary DOM on a responsive grid, so type stays type: selectable, translatable,
   and it reflows instead of shrinking. ── */
.cstruct { display: flex; flex-direction: column; }

/* The band header carries the label, the shared BASIS phrase, and the count. The
   basis lives here rather than on every card: when a band's nodes all rest on the
   same evidence, repeating it twelve times is twelve lines that say nothing. */
.cstruct-band-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--ds-sp-8);
  margin-bottom: var(--ds-sp-8);
}
.cstruct-band-h .basis {
  flex: 1 1 auto;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}
.cstruct-band-h .n {
  margin-left: auto;
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  font-variant-numeric: tabular-nums;
}

/* auto-fill + minmax is the whole responsive story: one column at 360px, as many
   as fit at 2560px, never a horizontal scrollbar, never a squeezed label. The
   cards are two lines now, so a partial last row reads as a row that happens to
   end, not as an orphan under a wall of taller cards. */
.cstruct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--ds-sp-8);
}

.cstruct-node {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--ds-sp-8) var(--ds-sp-12);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  min-width: 0;
}
.cstruct-node .hd { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cstruct-node .nm {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  color: var(--ds-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cstruct-node a.nm:hover { color: var(--ds-accent-deep); }
.cstruct-node .nm.plain { color: var(--ds-fg-mid); }
.cstruct-node .rel {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-fg-mid);
}
.cstruct-node .ev,
.cstruct-node .reach {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}
.cstruct-node .dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--ds-r-sm);
  background: var(--ds-bad);
}
.cstruct-node.is-distressed { border-left-color: var(--ds-bad); }

/* The subject is the anchor of the whole panel, so it has to win the eye against
   two bands of cards. It does that on WEIGHT, not on a dark fill: a heavier border,
   a solid left rule and the largest type in the panel. The light doctrine is
   test-enforced (DesignDoctrineTests.No_dark_panel_fills) and ink is a text and
   hairline colour here, never a surface. */
.cstruct-subject {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-sp-8);
  padding: var(--ds-sp-14) var(--ds-sp-16);
  background: var(--ds-surface);
  border: 1px solid var(--ds-ink);
  border-left: 5px solid var(--ds-ink);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-elev-1);
}
.cstruct-subject .nm {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-18);
  font-weight: 700;
  color: var(--ds-ink);
  overflow-wrap: anywhere;
}
.cstruct-subject .kbo { font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }

/* One connector per LAYER, carrying the direction and the verb. */
.cstruct-flow {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-8);
  padding: var(--ds-sp-12) 0;
  color: var(--ds-fg-dim);
}
.cstruct-flow .line { flex: 1 1 auto; height: 1px; background: var(--ds-line); }
.cstruct-flow .lbl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
}
.cstruct-flow .arrow { font-size: var(--ds-fs-10); line-height: 1; }

.cstruct-more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--ds-sp-12);
  border: 1px dashed var(--ds-line);
  border-radius: var(--ds-r-md);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-fg-mid);
}
.cstruct-more .sub { font-size: var(--ds-fs-11); font-weight: 400; color: var(--ds-fg-mute); }

.cstruct-foot {
  margin: var(--ds-sp-16) 0 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  line-height: 1.5;
  color: var(--ds-fg-mute);
}

.cstruct-empty { padding: var(--ds-sp-8) 0; }
.cstruct-empty .lead {
  margin: 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  color: var(--ds-fg-mid);
}
.cstruct-empty .sub {
  margin: var(--ds-sp-8) 0 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  line-height: 1.55;
  color: var(--ds-fg-mute);
  max-width: 68ch;
}
.cstruct-empty .note {
  padding: var(--ds-sp-12);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-warn-border);
  border-radius: var(--ds-r-md);
  background: var(--ds-warn-bg);
  color: var(--ds-fg-mid);
}


/* ── "In elk kantoorplan": the features every office tier shares ──────
   Printed once under the three cards rather than repeated in each, see
   PlanCatalog.OfficeSharedFeatures. Two columns where there is room, one
   on a phone, so nine short lines do not become a nine-screen list. */
.pr-shared {
  margin-top: var(--ds-sp-24, 24px);
  padding: var(--ds-sp-20, 20px);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg, 14px);
  background: var(--ds-surface);
}
.pr-shared-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
}
@media (min-width: 700px) {
  .pr-shared-list { grid-template-columns: 1fr 1fr; }
}
.pr-shared-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13, 13px);
  color: var(--ds-fg-mid);
  line-height: 1.5;
}
.pr-shared-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: 1.5px solid var(--ds-accent);
}

/* The one forward-looking line on the timeline: the next statutory filing
   deadline. Caption weight, sits above the source filters so "what is coming"
   reads before "what happened". */
.tlx-next {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  margin:0 0 14px; padding:9px 12px;
  border:1px solid var(--ds-line); border-left:3px solid var(--ds-accent);
  border-radius:var(--ds-r-md); background:var(--ds-good-bg);
  font-size:var(--ds-fs-13); color:var(--ds-ink-soft); line-height:1.45;
}
.tlx-next-k { font-weight:600; color:var(--ds-ink); }

/* The Checked score in the hero aside, where the kerncijfers tiles used to be.
   The barometer card brings its own layout; the wrapper only supplies the
   eyebrow spacing the aside expects. */
.ds-kern-score .ds-kern-eyebrow { margin-bottom:6px; }
.ds-kern-score .card-b { padding:0; }
/* Radar directly under the score, then one sector sentence. Compact by design:
   the owner wants score and shape together at the top, and nothing else. */
.ds-kern-radar { flex:0 0 auto; margin:0; padding:0; border:0; }
.ds-kern-sector { font-size:var(--ds-fs-12); color:var(--ds-fg-mid); line-height:1.5; margin:12px 0 0; }
/* Hero Checked score, ONE row (2026-09-03): number + band + thin gauge left, radar right.
   The stacked version was 570px tall with a red-to-green rainbow under a 94. */
.ds-score-row { display:flex; align-items:center; gap:18px; }
.ds-score-main { flex:1 1 200px; min-width:0; }
.hb-compact-top { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.hb-compact-num { font-family:var(--ds-mono); font-size:38px; font-weight:600; line-height:1; letter-spacing:-0.02em; }
.hb-compact-den { font-family:var(--ds-mono); font-size:var(--ds-fs-13); color:var(--ds-fg-mute); }
.hb-gauge { position:relative; height:6px; margin-top:10px; border-radius:999px; background:var(--ds-line-soft); overflow:hidden; }
.hb-gauge-fill { display:block; height:100%; border-radius:inherit; }
@media (max-width: 720px) {
  .ds-score-row { flex-direction:column; align-items:stretch; }
  /* flex-basis 200px is a WIDTH in the row and a HEIGHT once the row turns into a
     column: the 360 render had 200px of white between the gauge and the radar. */
  .ds-score-main { flex:0 0 auto; }
  .ds-kern-radar { align-self:center; }
}
/* Hero conclusie: the paragraph and its tone dot, flat under the identity block. */
.ds-hero-conclusie { display:flex; align-items:flex-start; gap:10px; margin-top:14px; max-width:62ch; }
.ds-hero-conclusie-dot { flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:7px; }
.ds-hero-conclusie-text { margin:0; font-size:var(--ds-fs-14); line-height:1.6; color:var(--ds-ink-soft); }
/* Faillissementskans footer: the methodology link alone, the caveat lives behind it. */
.pd-foot { margin:14px 0 0; font-size:var(--ds-fs-12); text-align:right; }
.pd-foot a { color:var(--ds-fg-mid); text-decoration:underline; text-underline-offset:2px; }
.pd-foot a:hover { color:var(--ds-ink); }
/* Radar with HTML labels: each axis is a button that explains itself on hover and focus. */
.radar-wrap { position:relative; display:inline-block; line-height:0; }
.radar-lab { position:absolute; line-height:1.2; white-space:nowrap; }
.radar-lab.radar-start { transform:translate(0,-50%); }
.radar-lab.radar-end { transform:translate(-100%,-50%); }
.radar-lab.radar-middle { transform:translate(-50%,-50%); }
.radar-lab-btn { all:unset; display:flex; flex-direction:column; gap:1px; cursor:help; color:var(--ds-fg-mid); }
.radar-start .radar-lab-btn { align-items:flex-start; }
.radar-end .radar-lab-btn { align-items:flex-end; }
.radar-middle .radar-lab-btn { align-items:center; }
.radar-lab-name { font-size:11px; font-weight:600; border-bottom:1px dotted var(--ds-fg-dim); }
.radar-lab-score { font-family:var(--ds-mono); font-size:11px; color:var(--ds-fg-mute); }
.radar-lab-btn:hover .radar-lab-name, .radar-lab-btn:focus-visible .radar-lab-name { color:var(--ds-ink); border-bottom-color:var(--ds-ink); }
.radar-tip { position:absolute; z-index:5; top:calc(100% + 6px); width:240px; padding:8px 10px; border-radius:8px; background:var(--bg-lowest); color:var(--ds-ink); border:1px solid var(--ds-line); font-size:12px; font-weight:400; line-height:1.45; white-space:normal; text-align:left; opacity:0; visibility:hidden; transform:translateY(-2px); transition:opacity .12s ease, transform .12s ease; pointer-events:none; box-shadow:0 6px 20px rgba(16,24,40,.18); }
.radar-start .radar-tip { left:0; }
.radar-end .radar-tip { right:0; }
.radar-middle .radar-tip { left:50%; margin-left:-120px; }
.radar-bottom .radar-tip { top:auto; bottom:calc(100% + 6px); transform:translateY(2px); }
.radar-lab-btn:hover .radar-tip, .radar-lab-btn:focus-visible .radar-tip, .radar-lab-btn:focus .radar-tip { opacity:1; visibility:visible; transform:none; }
/* ───── address page (omgevingsanalyse) ───────────────────────────────
   The page is about a PLACE and had no map, and a bare "124 companies"
   that the reader had no scale for. Tiles carry the numbers, the note
   carries the reading, and the map carries the place. */
.addr-tiles {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  gap:10px; margin-bottom:16px;
}
.addr-tile {
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r-md); padding:13px 14px;
}
.addr-tile-n {
  font-family:var(--ds-sans); font-size:20px; font-weight:640;
  letter-spacing:-0.02em; color:var(--ds-ink); line-height:1.15;
}
.addr-tile-l {
  font-size:11.5px; color:var(--ds-fg-mute); margin-top:3px; line-height:1.35;
}
.addr-note {
  display:flex; flex-direction:column; gap:5px;
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-left:3px solid var(--ds-fg-mute);
  border-radius:var(--ds-r-md); padding:12px 14px; margin-bottom:18px;
}
.addr-note strong { color:var(--ds-ink); font-size:var(--ds-fs-13); }
.addr-note span   { color:var(--ds-fg-mid); font-size:var(--ds-fs-13); line-height:1.55; }
.addr-note.elevated { border-left-color:var(--ds-warn); }
.addr-note.high     { border-left-color:var(--ds-accent); }
.addr-h2 {
  font-family:var(--ds-sans); font-size:var(--ds-fs-16); font-weight:600;
  color:var(--ds-ink); margin:0 0 10px;
}

/* ── Person dossier (PersonDossierView, .pd-*) and curator page (PersonPage, .pp-*)
   ribbons, 2026-09-03. Tiles auto-fit at desktop; under 480 px ONE column,
   because at 360 the caps label INSOLVENTIEPROCEDURES was wider than half the
   viewport minus padding and ran past its tile edge (seen on r238). Labels may
   wrap, and as a backstop break inside a word rather than overflow. */
.pd-kpis, .pp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.pd-kpis .ds-caps, .pp-kpis .ds-caps { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .pd-kpis, .pp-kpis { grid-template-columns: 1fr; gap: 12px; }
}
/* The mandates table has percentage columns, so inside ds-table-scroll it
   squeezed to the viewport and wrapped every role word by word, with the
   Periode header cut (r238 at 360). A floor on the table width makes the
   wrapper scroll instead, and a period never breaks across lines. */
.pd-mandates .ds-table { min-width: 620px; }
.pd-mandates .pd-period { white-space: nowrap; }

/* ───── listing pages: the filter disclosure (2026-09-03, r239 follow-up) ─────
   Under 640px the seven selects of /faillissementen and its nine siblings sit
   behind one "Filters" summary, so the count and the first rows stay in the
   first screen at 360. From 640px the same <details> is forced open and its
   summary hidden, so the desktop form is unchanged. ::details-content is the
   CSS-only way to show a closed details' content (Chrome 131, Safari 18.4,
   Firefox 138); a browser without it keeps the summary and toggles normally,
   which is a usable fallback, never a hidden form. The nested "Eigen periode"
   details inside the body is untouched by this rule (direct child only). */
.live-filters > summary { margin-bottom: 0; }
.live-filters[open] > summary { margin-bottom: var(--ds-sp-12); }
@media (min-width: 640px) {
  @supports selector(::details-content) {
    .live-filters > summary { display: none; }
    .live-filters::details-content { content-visibility: visible; display: block; }
  }
}

/* ───── dossier: a stage that did not answer (2026-09-03) ─────
   One line where a section or panel used to be (UnreadStageLine): the
   section's name in ink, the sentence in mid tone, a warn dot the way every
   status on the dossier is an 8px dot. Same scroll margin as .dossier-section
   (Tokens.css) because a deep link to the retired section lands here. */
.dossier-unread-line {
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  line-height: 1.5;
  color: var(--ds-fg-mid);
  scroll-margin-top: 64px;
}
.dossier-unread-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-warn);
}
.dossier-unread-k { font-weight: 600; color: var(--ds-ink); }
@media (min-width: 1100px) {
  .dossier-unread-line { scroll-margin-top: 80px; }
}
/* ───── The alive layer (2026-09-03): a fact where the cursor is, without JavaScript ─────
   Owner, comparing us to jaarrekening.be: "they use a lot of interactive elements
   which makes the page come alive". One tooltip primitive, three hosts (the
   timeline's year columns, the KPI rail's sparkline points, the Faillissementskans
   driver chips), the same idea as the radar labels above: a focusable host, the tip
   inside it or right after it, CSS shows it on :hover and on keyboard focus. The tip
   is a light card (white surface, ink text, hairline, shadow), never a dark fill, and
   it is positioned against its host's CONTAINER rather than the host itself, left-
   anchored on the left half and right-anchored on the right half, so it cannot leave
   the viewport at 360 px. pointer-events:none so a tip never steals the hover that
   opened it. */
.ck-tip {
  position:absolute; z-index:6; box-sizing:border-box;
  width:max-content; max-width:min(280px, 100%);
  padding:7px 10px; border-radius:8px;
  background:var(--bg-lowest); color:var(--ds-ink); border:1px solid var(--ds-line);
  box-shadow:0 6px 20px rgba(16,24,40,.18);
  font-family:var(--ds-sans); font-size:12px; font-weight:400; line-height:1.45;
  letter-spacing:normal; text-transform:none; text-align:left; white-space:normal;
  opacity:0; visibility:hidden; transition:opacity .12s ease; pointer-events:none;
}
.ck-tip-host:hover > .ck-tip, .ck-tip-host:focus-visible > .ck-tip,
.ck-tip-host:hover + .ck-tip, .ck-tip-host:focus-visible + .ck-tip { opacity:1; visibility:visible; }

/* Sparkline points (Sparkline.razor, PointTips): a 16 px hit area centred on
   each point except the newest, which is the tile's headline. The tip is the hit
   area's next sibling, anchored to the sparkline's own box, above the line; a
   7 px dot in the line colour marks the point while its tip is up. */
.spark-wrap { position:relative; display:block; line-height:0; }
.ds-kpirail-spark .spark-wrap { width:100%; }
.spark-pt {
  all:unset; position:absolute; box-sizing:border-box;
  width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  cursor:help;
}
.spark-pt::after {
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:var(--spark-c, var(--data-blue)); box-shadow:0 0 0 2px var(--bg-lowest);
  opacity:0; transition:opacity .12s ease;
}
.spark-pt:hover::after, .spark-pt:focus-visible::after { opacity:1; }
.spark-tip { bottom:calc(100% + 4px); font-family:var(--ds-mono); font-size:11px; }

/* Faillissementskans drivers (PdScoreCard): the chip is a button, the tip its
   child, positioned against the chip row (position:relative on the row), under
   the row, at the row's left edge: a chip's place in a wrapping row is not known
   when the page is rendered, and the row's left edge is always in the viewport.
   The button resets to the chip's look; the chip classes do the rest. */
.pd-drv { font-family:inherit; line-height:inherit; margin:0; cursor:help; appearance:none; -webkit-appearance:none; }
.pd-drv:focus-visible { outline:2px solid var(--ds-accent); outline-offset:2px; }
.pd-drv-tip { left:0; top:calc(100% + 6px); max-width:min(400px, 100%); }

/* ═══════════════════════════════════════════════════════════════════════════
   redesign 2026-09-04
   The company dossier in the owner's Claude Design system: the artboard at
   docs/design/dossier-redesign-2026-09-04/report.dc.html is the spec, not an
   inspiration. Everything below is rooted at .rd-page, the dossier's one
   column; the rest of the site keeps Inter and the --ds-* system until the
   owner extends the redesign. The --rd-* tokens live in Tokens.css.

   THE CLASS NAMES ARE A CONTRACT. Four lanes built the sections in parallel
   against these names (each with a literal fallback in its own markup):
   rename nothing here without renaming it in every section.

   Order of business: the column, type utilities, section heading, card,
   grids, buttons, pill, then the frame this lane owns (breadcrumb, hero,
   streaming skeleton, sections column, the Checked score frame, the register
   card), and last the harmonisation of the July frame classes a section
   component may still carry (.dossier-section-*, .ds-panel-*).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The one column: 1180 wide, 32px sides, Archivo at 15px ──────────────── */
.page.rd-page {
  max-width: 1180px;
  padding: 0 32px 96px;
  font-family: var(--rd-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rd-ink);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
@media (max-width: 768px) { .page.rd-page { padding: 0 20px 64px; } }
@media (max-width: 480px) { .page.rd-page { padding: 0 16px 56px; } }

/* Text links are green and go ink on hover (the artboard's own rule).
   Controls that happen to be anchors keep their own colour; :where() keeps
   this at (0,1,1) so any more specific rule wins without a fight. */
.rd-page a:where(:not(.btn, .rd-btn, .rd-pill, .ds-risk-chip, .rd-crumbs-brand)) { color: var(--rd-green); text-decoration: none; }
.rd-page a:where(:not(.btn, .rd-btn, .rd-pill, .ds-risk-chip, .rd-crumbs-brand)):hover { color: var(--rd-ink); text-decoration: underline; }

/* ── Type utilities ──────────────────────────────────────────────────────── */
.rd-mono { font-family: var(--rd-mono); }
.rd-num { font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rd-eyebrow {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
}
.rd-note { font-size: 12px; line-height: 1.5; color: var(--rd-grey-light); }
.rd-up { color: var(--rd-green); }
.rd-down { color: var(--rd-red); }
.rd-flat { color: var(--rd-grey-light); }

/* ── Section: a mono eyebrow over a hairline; 60px between sections ─────── */
.rd-section { min-width: 0; scroll-margin-top: 72px; }
.rd-h2 {
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rd-line);
  font-family: var(--rd-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
}
/* The Signalen form: a bare eyebrow, and the row under it (a lead sentence
   left, a legend right) carries the rule. */
.rd-h2-bare { margin-bottom: 6px; padding-bottom: 0; border-bottom: 0; }
.rd-h2-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rd-line);
  font-size: 14px;
  color: var(--rd-grey);
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.rd-card {
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  padding: 24px 28px;
  min-width: 0;
}
.rd-card-flat { background: transparent; border: 0; border-radius: 0; padding: 0; }
.rd-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 18px;
}
.rd-card-title {
  margin: 0;
  font-family: var(--rd-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--rd-ink);
}
.rd-card-sub { margin-top: 2px; font-size: 13px; color: var(--rd-grey); }
.rd-card-head-right { font-size: 12px; color: var(--rd-grey); }
@media (max-width: 480px) { .rd-card { padding: 18px; } }

/* ── Grids, and how they stack on a phone ───────────────────────────────── */
.rd-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.rd-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rd-grid-2 > *, .rd-grid-4 > * { min-width: 0; }
@media (max-width: 900px) { .rd-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .rd-grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .rd-grid-4 { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* ── Buttons: outline by default, the one ink fill is Volgen ────────────── */
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rd-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease), background var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.rd-btn:hover { border-color: var(--rd-ink); color: var(--rd-ink); text-decoration: none; }
.rd-btn:focus-visible { outline: 2px solid var(--rd-green); outline-offset: 2px; }
/* Ink by the owner's own design (the 2026-06 no-dark-buttons doctrine is
   superseded on this surface; DesignDoctrineTests names this selector). */
.rd-btn-primary { background: var(--rd-ink); border-color: var(--rd-ink); color: #FFFFFF; }
.rd-btn-primary:hover { background: var(--rd-green); border-color: var(--rd-green); color: #FFFFFF; }

/* ── Pill: outline, coloured text and border, a 7px dot in the same colour ─ */
.rd-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--rd-grey);
  border-radius: 999px;
  font-family: var(--rd-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--rd-grey);
  white-space: nowrap;
  text-decoration: none;
}
.rd-pill-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rd-pill-g { color: var(--rd-green); border-color: var(--rd-green); }
.rd-pill-a { color: var(--rd-orange); border-color: var(--rd-orange); }
.rd-pill-r { color: var(--rd-red); border-color: var(--rd-red); }

/* ── Breadcrumb: the mark, CHECKED, the sector, the company ─────────────── */
.rd-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 20px 0;
  font-family: var(--rd-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.rd-crumbs > * { min-width: 0; overflow-wrap: anywhere; }
.rd-crumbs-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--rd-ink); font-weight: 700; text-decoration: none; }
.rd-crumbs-brand:hover { color: var(--rd-green); text-decoration: none; }
.rd-crumbs-mark { display: block; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; }
.rd-page .rd-crumbs a:not(.rd-crumbs-brand) { color: var(--rd-grey); text-decoration: none; }
.rd-page .rd-crumbs a:not(.rd-crumbs-brand):hover { color: var(--rd-ink); text-decoration: underline; }
.rd-crumbs-sep { color: var(--rd-grey-light); }

/* ── Hero: 2px ink rule, the 54px name with its pill, the identity line,
      the conclusion beside the actions ─────────────────────────────────── */
.rd-hero { border-top: 2px solid var(--rd-ink); padding-top: 26px; }
.rd-hero-titlerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 16px; }
.rd-hero-title {
  margin: 0;
  min-width: 0;
  font-family: var(--rd-sans);
  font-size: 54px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  overflow-wrap: anywhere;
  /* Named so the @view-transition morphs the name across dossier navigations,
     as the July hero's title did. */
  view-transition-name: dossier-hero-title;
}
.rd-hero-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--rd-grey); }
.rd-hero-meta > * { min-width: 0; overflow-wrap: anywhere; }
.rd-hero-meta strong { color: var(--rd-ink); font-weight: 600; }
.rd-hero-id { display: inline-flex; align-items: center; gap: 4px; font-family: var(--rd-mono); }
.rd-hero-foot { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; }
.rd-hero-lead { max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--rd-ink-soft); }
.rd-hero-lead p { margin: 0; }
/* The conclusion (ConclusionCard, compact) inside the lead slot: the
   paragraph at 17px, its tone dot kept, the hero-aside spacing dropped. */
.rd-hero-lead .ds-hero-conclusie { margin-top: 0; max-width: none; gap: 10px; }
.rd-hero-lead .ds-hero-conclusie-dot { margin-top: 10px; }
.rd-hero-lead .ds-hero-conclusie-text { font-size: 17px; line-height: 1.55; color: var(--rd-ink-soft); }
.rd-hero-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.rd-hero-actions > * { min-width: 0; }
/* The action buttons are the site's .btn (WatchButton, CompareCta, the print
   link) in the artboard's clothes; the first one, Volgen, is the ink fill and
   the watched state keeps its green. */
.rd-hero-actions .btn {
  padding: 10px 16px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--rd-ink);
  box-shadow: none;
}
.rd-hero-actions .btn:hover { border-color: var(--rd-ink); background: #FFFFFF; box-shadow: none; }
.rd-hero-actions > :first-child .btn, .rd-hero-actions > .btn:first-child { background: var(--rd-ink); border-color: var(--rd-ink); color: #FFFFFF; }
.rd-hero-actions > :first-child .btn:hover, .rd-hero-actions > .btn:first-child:hover { background: var(--rd-green); border-color: var(--rd-green); color: #FFFFFF; }
.rd-hero-actions .btn.primary { background: var(--rd-green); border-color: var(--rd-green); color: #FFFFFF; }
/* The neutral risk chip (no Checked score to show) sits in the title row as
   an outline pill like its neighbours; its dot colour stays inline. */
.rd-hero-titlerow .ds-risk-chip {
  padding: 5px 11px;
  border-color: var(--rd-grey);
  font-family: var(--rd-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.rd-hero-titlerow .ds-risk-chip:hover { border-color: var(--rd-ink); color: var(--rd-ink); }
.rd-hero-titlerow .ds-risk-chip-dot { width: 7px; height: 7px; }
.rd-hero-meta .kbo-copy { width: 20px; height: 20px; margin-left: 2px; color: var(--rd-grey-light); }
@media (max-width: 768px) {
  .rd-hero-title { font-size: 38px; }
  .rd-hero-foot { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
}
@media (max-width: 480px) {
  .rd-hero { padding-top: 20px; }
  .rd-hero-title { font-size: 32px; }
}

/* ── Streaming skeleton, in the same clothes so the swap moves nothing ───── */
.rd-page .ck-skel-hero { border-top: 2px solid var(--rd-ink); padding: 26px 0 0; }
.rd-page .ck-skel-hero-title {
  font-family: var(--rd-sans);
  font-size: 54px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  overflow-wrap: anywhere;
}
.rd-page .ck-skel-hero-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--rd-grey); }
.rd-page .ck-skel-hero-meta strong { color: var(--rd-ink); font-weight: 600; }
.rd-page .ck-skel-kbo { font-family: var(--rd-mono); font-size: 14px; }
.rd-page .ck-skel-stack { margin-top: 44px; gap: 20px; }
.rd-page .ck-skel-panel { border-radius: 8px; border-color: var(--rd-line); }
@media (max-width: 768px) { .rd-page .ck-skel-hero-title { font-size: 38px; } }
@media (max-width: 480px) { .rd-page .ck-skel-hero-title { font-size: 32px; } }

/* ── The sections column ─────────────────────────────────────────────────── */
.rd-page .dossier-sections { gap: 60px; margin-top: 44px; }
.rd-page .dossier-section { min-width: 0; scroll-margin-top: 72px; }
.rd-page .dossier-unread-line { font-family: var(--rd-sans); font-size: 14px; color: var(--rd-grey); scroll-margin-top: 72px; }
.rd-stack { display: flex; flex-direction: column; gap: 20px; }

/* ── The Checked score section: the frame; lane S styles the cards inside ── */
.rd-score-card { padding: 28px 32px; }
.rd-score-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.rd-score-grid-2 { grid-template-columns: 220px minmax(0, 1fr); }
.rd-score-grid-solo { grid-template-columns: minmax(0, 1fr); }
.rd-score-col { min-width: 0; }
.rd-score-col > .rd-eyebrow + * { margin-top: 8px; }
.rd-score-risk { border-left: 1px solid var(--rd-line-soft); padding-left: 34px; }
.rd-score-grid-solo .rd-score-risk { border-left: 0; padding-left: 0; }
.rd-score-main .hb-compact-num { font-size: 76px; font-weight: 700; line-height: 0.86; letter-spacing: -0.04em; }
.rd-score-main .hb-compact-den { font-size: 15px; color: var(--rd-grey-light); }
.rd-score-sector { margin: 18px 0 0; font-size: 13px; line-height: 1.45; color: var(--rd-grey); }
.rd-score-teaser { margin-top: 20px; }
.rd-score-credit { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rd-line-soft); }
.rd-score-credit .rd-card-head { margin-bottom: 12px; }
@media (max-width: 900px) {
  .rd-score-card { padding: 24px; }
  .rd-score-grid, .rd-score-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .rd-score-risk { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--rd-line-soft); padding-top: 24px; }
  .rd-score-grid-solo .rd-score-risk { border-top: 0; padding-top: 0; }
}
@media (max-width: 600px) {
  .rd-score-card { padding: 18px; }
  .rd-score-grid, .rd-score-grid-2, .rd-score-grid-solo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rd-score-main .hb-compact-num { font-size: 60px; }
}

/* ── Ondernemingsgegevens · Kruispuntbank: three columns in one card ─────── */
.rd-reg { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.rd-reg-col { min-width: 0; }
.rd-reg-rows { margin-top: 10px; display: grid; gap: 6px; font-size: 14px; }
.rd-kv { display: flex; justify-content: space-between; gap: 12px; }
.rd-kv-k { flex: 0 0 auto; color: var(--rd-grey); }
.rd-kv-v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.rd-reg-act { display: flex; align-items: baseline; gap: 10px; }
.rd-reg-act-code { flex: 0 0 auto; font-family: var(--rd-mono); color: var(--rd-grey); }
.rd-reg-act-main { font-weight: 500; color: var(--rd-ink); }
.rd-reg-src { margin-top: 10px; display: grid; gap: 6px; font-size: 14px; color: var(--rd-grey); }
.rd-reg-foot { margin: 14px 0 0; }

/* ── Harmonisation: sections and panels that still carry the July frame ───
   A lane's component that has not switched to .rd-h2 / .rd-card yet renders
   in the same system: the eyebrow heading, the flat white card, no tinted
   head strip. Remove this block once every section writes the new classes. */
.rd-page .dossier-section-head { margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--rd-line); }
.rd-page .dossier-section-title, .rd-page .dossier-section-h {
  display: block;
  margin: 0;
  font-family: var(--rd-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
}
.rd-page .dossier-section-title::before { display: none; }
.rd-page .dossier-section-rule { display: none; }
.rd-page .dossier-stack { gap: 20px; }
.rd-page .ds-panel { border: 1px solid var(--rd-line); border-radius: 8px; box-shadow: none; }
.rd-page .ds-panel-head { padding: 24px 28px 0; border-bottom: 0; background: transparent; align-items: baseline; }
.rd-page .ds-panel-title { font-family: var(--rd-sans); font-size: 17px; font-weight: 600; letter-spacing: normal; color: var(--rd-ink); }
.rd-page .ds-panel-sub { font-size: 13px; color: var(--rd-grey); }
.rd-page .ds-panel-body { padding: 24px 28px; }
.rd-page .ds-panel-head + .ds-panel-body { padding-top: 14px; }
.rd-page .btn { font-family: var(--rd-sans); border-radius: 4px; }
@media (max-width: 480px) {
  .rd-page .ds-panel-head { padding: 18px 18px 0; }
  .rd-page .ds-panel-body { padding: 18px; }
  .rd-page .ds-panel-head + .ds-panel-body { padding-top: 12px; }
}
/* A section nested inside a redesign section (the Bestuur · vestiging ·
   vastgoed grid holds two) prints its own heading as a card title, never as a
   second section eyebrow. */
.rd-section .dossier-section > .dossier-section-head { margin: 0 0 12px; padding: 0; border-bottom: 0; }
.rd-section .dossier-section > .dossier-section-head > .dossier-section-title,
.rd-section .rd-section > .rd-h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--rd-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
  color: var(--rd-ink);
}
/* ═══════════════════════════════════════════════════════════════════
   redesign F: the Financieel section of the dossier redesign (2026-09-04)

   The owner's design, built in Claude Design, is the specification
   (docs/design/dossier-redesign-2026-09-04/report.dc.html, section
   #financieel). Everything here is prefixed .rdf- and scoped under
   section.rdf, so no other section can be moved by a rule in this block.

   The palette comes from the redesign tokens (lane V) with the design's
   own literal as the fallback, so this block renders correctly on its own
   and takes the tokens the moment they land. Ink is never a surface fill
   (DesignDoctrineTests): where the design filled a bar with ink, the deep
   green carries the same contrast in the house palette.

   Responsive, measured at 1440 / 1024 / 768 / 560 / 360:
     - the four KPI cards go 4 -> 2 -> 1;
     - the multi-year grid scrolls inside its own container, never the page;
     - the result chart and the balance strips stack;
     - the ratio grid goes 7 -> 4 -> 3 -> 2;
     - the two filed-statement tables stack.
   ═══════════════════════════════════════════════════════════════════ */

/* The multi-year grid's track widths live here, on the section, and the grid
   itself only says HOW MANY year columns it has (--rdf-cols, set inline by
   MultiYearOverview because repeat()'s count cannot be a variable). Custom
   properties substitute lazily, so a media query that redefines --rdf-post
   here reshapes a template the component already wrote. */
.rdf {
  --rdf-gap: 20px;
  --rdf-post: 200px;
  --rdf-ymin: 90px;
  --rdf-trend: 84px;
}

/* the heading tail: "Financieel · boekjaar 2025, microschema". The year, the
   schema and the basis are what a reader needs to interpret every figure
   under it, so they belong in the heading, quieter than the section name. */
.rdf-h-sub {
  font-weight: 400;
  color: var(--rd-grey, #6E7671);
  letter-spacing: 0;
}

.rdf-stack { display: grid; gap: var(--rdf-gap); }

/* every block of the section is a card; .rd-card (lane V) carries the
   surface, the hairline and the radius, .rdf-card only the design's padding */
.rdf-card { padding: 24px 28px; }
.rdf-result { padding-bottom: 20px; }

.rdf-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.rdf-card-title {
  font-family: var(--rd-sans, Archivo, Inter, sans-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--rd-ink, #101413);
  line-height: 1.25;
}
.rdf-card-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--rd-grey, #6E7671);
}
.rdf-card-meta {
  font-size: 11px;
  color: var(--rd-grey, #6E7671);
}

/* Every figure in this section is set in the mono face: a column of amounts
   only lines up when the digits are one width, and the design leans on that
   alignment in five of its six blocks. Declared here rather than borrowed
   from .rd-mono so the section renders correctly on its own. */
.rdf-mono,
.rdf-my-head,
.rdf-fs-head { font-family: var(--rd-mono, 'JetBrains Mono', monospace); }

/* the per-block marker classes: the design gives each card its own rhythm,
   and these are where a card-specific rule goes without reaching for a
   descendant selector on a shared class */
.rdf-my-card .rdf-scroll { margin-bottom: 2px; }
.rdf-ratios-card .rdf-card-head { align-items: baseline; }
.rdf-fs-card .rdf-card-sub { margin-bottom: 2px; }

.rdf-note,
.rdf-foot {
  font-size: 12px;
  line-height: 1.5;
  color: var(--rd-grey-light, #9AA29E);
}
.rdf-foot { margin-top: 12px; }
.rdf-note { margin: 0; }

/* the delta glyphs. The glyph carries the DIRECTION, the colour carries the
   FAVOUR, which is why a falling debt is a green ▼ (the ratio grid says so
   in one line under it). "flat" is grey: no move to judge. */
.rdf-tone-up   { color: var(--rd-green, #0C7A52); }
.rdf-tone-dn   { color: var(--rd-red, #B23A1F); }
.rdf-tone-flat { color: var(--rd-grey-light, #9AA29E); }

.rdf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--rd-grey, #6E7671);
}
.rdf-legend-key { display: inline-flex; align-items: center; gap: 6px; }
.rdf-swatch { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 1px; }
.rdf-swatch-a { background: var(--rd-green, #0C7A52); }
.rdf-swatch-b { background: var(--rd-green-mid, #9CCBB4); }

/* ── 1. the four KPI cards ─────────────────────────────────────────── */

.rdf-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rdf-gap);
}
.rdf-kpi { padding: 18px 20px 16px; }
.rdf-kpi-label {
  font-size: 13px;
  line-height: 1.3;
  color: var(--rd-grey, #6E7671);
}
.rdf-kpi-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.rdf-kpi-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--rd-ink, #101413);
}
.rdf-kpi-delta { font-size: 13px; font-weight: 700; }
.rdf-kpi-prev {
  margin-top: 3px;
  font-size: 11px;
  color: var(--rd-grey, #6E7671);
}
/* the honest note a tile prints instead of a figure this filing does not
   hold: small, quiet, and without the delta or the sparkline it has no data
   for. A tile is never empty and never a bare dash. */
.rdf-kpi-value-note {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--rd-grey, #6E7671);
}
.rdf-kpi-spark { margin-top: 14px; }
.rdf-kpi-range {
  margin-top: 5px;
  font-size: 10px;
  color: var(--rd-grey-light, #9AA29E);
}

/* ── 2. Meerjarenoverzicht ─────────────────────────────────────────── */

/* the grid scrolls in its own container so the PAGE never scrolls sideways.
   width:max-content with min-width:100% is what lets the tracks keep their
   minimum and the box still fill a wide card. */
.rdf-scroll {
  margin-top: 18px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.rdf-my {
  width: max-content;
  min-width: 100%;
  /* the fallback is the design's five-year shape; the component writes the
     real one inline, with the year count it actually has */
  --rdf-cols: var(--rdf-post) repeat(5, minmax(var(--rdf-ymin), 1fr)) var(--rdf-trend);
}
.rdf-my-head,
.rdf-my-row {
  display: grid;
  grid-template-columns: var(--rdf-cols);
  gap: 0 10px;
}
.rdf-my-head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rd-ink, #101413);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-grey, #6E7671);
}
.rdf-my-row {
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rd-line-soft, #F0F2F1);
}
.rdf-my-row:last-child { border-bottom: 0; }
.rdf-my-post { font-size: 14px; font-weight: 500; color: var(--rd-ink, #101413); }
.rdf-my-head .rdf-my-post { font-size: 11px; font-weight: 400; color: var(--rd-grey, #6E7671); }
.rdf-my-year, .rdf-my-cell { text-align: right; }
.rdf-my-year-last { color: var(--rd-ink, #101413); }
.rdf-my-trend { text-align: right; }
.rdf-my-cell {
  font-size: 14px;
  font-weight: 400;
  color: var(--rd-text, #46504C);
}
.rdf-my-cell-last { font-weight: 700; color: var(--rd-ink, #101413); }
.rdf-my-delta {
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}
.rdf-my-spark { justify-self: end; }

/* ── 3. Resultaat per boekjaar ─────────────────────────────────────── */

.rdf-chart { margin-top: 20px; max-width: 100%; }
.rdf-gcols { display: block; }
.rdf-result-sentence {
  margin-top: 14px;
  font-size: 13px;
  color: var(--rd-grey, #6E7671);
}

/* the chart and the balance strips sit side by side, the chart wider */
.rdf-row2 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--rdf-gap);
}
.rdf-row2-single { grid-template-columns: minmax(0, 1fr); }

/* ── 4. Balanssamenstelling ────────────────────────────────────────── */

.rdf-bc-label {
  margin-top: 22px;
  font-family: var(--rd-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-grey, #6E7671);
}
.rdf-bc-bar {
  display: flex;
  height: 30px;
  margin-top: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.rdf-bc-seg {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: 10px;
  font-family: var(--rd-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}
/* activa: the fixed part carries the accent, the current part the tint */
.rdf-bc-seg-fixed   { background: var(--rd-green, #0C7A52); color: #FFFFFF; }
.rdf-bc-seg-current { background: var(--rd-green-line, #CFE3D8); color: var(--rd-ink, #101413); }
/* passiva: the design filled eigen vermogen with ink. Ink is a text colour
   on this site (design doctrine, test-enforced), so the deep green takes it
   and the line grey takes schulden: the same contrast, the house palette. */
.rdf-bc-seg-equity     { background: var(--rd-green-deep, #0A6444); color: #FFFFFF; }
.rdf-bc-seg-provisions { background: var(--rd-green-mid, #9CCBB4); color: var(--rd-ink, #101413); }
.rdf-bc-seg-debt       { background: var(--rd-line, #E4E7E6); color: var(--rd-ink, #101413); }
/* the prior year under it: the same split, one shade of grey quieter, so the
   eye reads the shift without a second set of numbers */
.rdf-bc-prior {
  display: flex;
  height: 12px;
  margin-top: 3px;
  border-radius: 3px;
  overflow: hidden;
}
.rdf-bc-pseg-fixed, .rdf-bc-pseg-equity { background: #B6BEBA; }
.rdf-bc-pseg-provisions { background: #D3D9D6; }
.rdf-bc-pseg-current, .rdf-bc-pseg-debt { background: var(--rd-line, #E4E7E6); }
.rdf-bc-lines {
  margin-top: 9px;
  display: grid;
  gap: 5px;
  font-size: 13px;
  color: var(--rd-text, #46504C);
}
.rdf-bc-line { display: flex; justify-content: space-between; gap: 12px; }
.rdf-bc-delta { font-weight: 500; }
.rdf-bc-sentence {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rd-line, #E4E7E6);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rd-grey, #6E7671);
}

/* ── 5. Kerncijfers en ratio's ─────────────────────────────────────── */

/* the 1px gap IS the grid line: the background shows through between the
   tiles, so fourteen tiles read as one table without fourteen borders */
.rdf-ratios {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--rd-line, #E4E7E6);
  border: 1px solid var(--rd-line, #E4E7E6);
  border-radius: 6px;
  overflow: hidden;
}
.rdf-ratio {
  background: var(--ds-surface, #FFFFFF);
  padding: 14px;
  min-width: 0;
}
.rdf-ratio-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--rd-grey, #6E7671);
}
.rdf-ratio-row {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.rdf-ratio-value {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rd-ink, #101413);
}
.rdf-ratio-arrow { font-size: 12px; font-weight: 700; }
.rdf-ratio-prev {
  margin-top: 2px;
  font-size: 11px;
  color: var(--rd-grey-light, #9AA29E);
}

/* ── 6. Neergelegde jaarrekening ───────────────────────────────────── */

.rdf-fs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 40px;
}
.rdf-fs-block { min-width: 0; }
.rdf-fs-head,
.rdf-fs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px 66px 84px;
  gap: 8px;
}
.rdf-fs-single .rdf-fs-head,
.rdf-fs-single .rdf-fs-row { grid-template-columns: minmax(0, 1fr) 50px 84px; }
.rdf-fs-head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rd-ink, #101413);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-grey, #6E7671);
}
.rdf-fs-row {
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--rd-line-soft, #F0F2F1);
  font-size: 14px;
  color: var(--rd-ink, #101413);
}
.rdf-fs-row:last-child { border-bottom: 0; }
.rdf-fs-post { min-width: 0; overflow-wrap: anywhere; }
.rdf-fs-strong .rdf-fs-post { font-weight: 600; }
.rdf-fs-code { font-size: 11px; color: var(--rd-grey-light, #9AA29E); }
.rdf-fs-num, .rdf-fs-prev, .rdf-fs-val { text-align: right; }
.rdf-fs-prev { color: var(--rd-grey-light, #9AA29E); }
.rdf-fs-val { font-weight: 600; white-space: nowrap; }
.rdf-fs-arrow { font-weight: 700; }
.rdf-fs-year-last { color: var(--rd-ink, #101413); }

/* the paid depth, at the foot of the tables it is about: never between the
   reader and the figures (owner, 2026-09-03) */
.rdf-gate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rd-line, #E4E7E6);
  font-size: 13px;
  color: var(--rd-grey, #6E7671);
}
.rdf-gate-text { display: inline-flex; align-items: baseline; gap: 6px; }
.rdf-gate-link {
  font-weight: 600;
  color: var(--rd-green, #0C7A52);
  text-decoration: none;
  white-space: nowrap;
}
.rdf-gate-link:hover { text-decoration: underline; }

.rdf-export { margin: 0; font-size: 13px; }
.rdf-export a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rd-green, #0C7A52);
  text-decoration: none;
}
.rdf-export a:hover { text-decoration: underline; }

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .rdf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdf-ratios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rdf-row2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .rdf-ratios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rdf-fs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rdf-fs-block + .rdf-fs-block { margin-top: 22px; }
}

@media (max-width: 560px) {
  /* a narrower post column and narrower years: the grid still scrolls, but
     over less distance */
  .rdf {
    --rdf-gap: 14px;
    --rdf-post: 132px;
    --rdf-ymin: 76px;
    --rdf-trend: 78px;
  }
  .rdf-card { padding: 18px 16px; }
  .rdf-kpi { padding: 14px 16px 14px; }
  .rdf-kpis { grid-template-columns: minmax(0, 1fr); }
  .rdf-ratios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdf-kpi-value { font-size: 26px; }
  .rdf-my-post { font-size: 13px; }
  /* the same treatment for the chart: its own width, and the container scrolls,
     rather than a 10px axis label scaled down to six */
  .rdf-chart { overflow-x: auto; overscroll-behavior-x: contain; }
  .rdf-gcols { min-width: 460px; }
  .rdf-fs-head, .rdf-fs-row { grid-template-columns: minmax(0, 1fr) 38px 60px 76px; gap: 6px; }
  .rdf-fs-single .rdf-fs-head,
  .rdf-fs-single .rdf-fs-row { grid-template-columns: minmax(0, 1fr) 38px 76px; }
  .rdf-fs-row { font-size: 13px; }
  .rdf-fs-code { font-size: 10px; }
}
/* ───── redesign T ──────────────────────────────────────────────────────
   The owner's dossier redesign of 2026-09-04
   (docs/design/dossier-redesign-2026-09-04/report.dc.html), lane T: the
   Tijdlijn, the Bestuur · vestiging · vastgoed pair and the Vergelijkbare
   bedrijven cards.

   Every value here is read off that file. The design's palette arrives as
   the --rd-* tokens (lane V); each var() carries the literal from the same
   design as its fallback, so a card is never unstyled while the token layer
   lands, and the two can never disagree about what the colour IS.

   NO JAVASCRIPT. The dossier is server-rendered, so the timeline's source
   filter is radio inputs plus :has(): the radios are direct children of the
   card, before the head and the body, and `#tlxf-x:checked ~` reaches both
   the labels (the active state) and the rows (hide the rest). It keeps
   working with scripting off.

   ONE NOTE ON THE DARK FILL. DesignDoctrineTests.No_dark_panel_fills forbids
   near-black SURFACES, and it is right to. The ink in this block is not a
   surface: it is a 13px timeline dot (the design's mark for a Staatsblad
   act) and the selected state of a 30px filter control, both drawn that way
   in the owner's file. The rule that pins them is
   TimelineAxisSharesTheChipColoursTests, which reads this stylesheet.  */

.rdt-card {
  background:#FFFFFF;
  border:1px solid var(--rd-line, #E4E7E6);
  border-radius:8px;
  padding:24px 28px;
}
.rdt-empty { margin:0; }

/* ── Tijdlijn ─────────────────────────────────────────────────────────── */

.rdt-tl { position:relative; }
/* The radios carry the filter state. Off-screen rather than display:none so
   they stay focusable and the labels stay operable by keyboard. */
.rdt-r { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }

.rdt-tl-head {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.rdt-filters { display:flex; gap:6px; flex-wrap:wrap; }
.rdt-filter {
  padding:7px 13px; border-radius:4px;
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:12px; line-height:1.2; cursor:pointer; user-select:none;
  border:1px solid #D5DAD7; background:#FFFFFF; color:var(--rd-ink, #101413);
  display:inline-flex; align-items:center; gap:7px;
  transition:background .12s, border-color .12s, color .12s;
}
.rdt-filter:hover { border-color:var(--rd-grey-light, #9AA29E); }
.rdt-filter .n { color:var(--rd-grey, #6E7671); }
/* The selected filter, exactly as the design draws it: an ink fill with the
   count reading through in white. One rule per family id, because the
   sibling combinator cannot be parameterised. */
#tlxf-all:checked ~ .rdt-tl-head [for="tlxf-all"],
#tlxf-fin:checked ~ .rdt-tl-head [for="tlxf-fin"],
#tlxf-act:checked ~ .rdt-tl-head [for="tlxf-act"],
#tlxf-filing:checked ~ .rdt-tl-head [for="tlxf-filing"],
#tlxf-kbo:checked ~ .rdt-tl-head [for="tlxf-kbo"],
#tlxf-signal:checked ~ .rdt-tl-head [for="tlxf-signal"] {
  border-color:var(--rd-ink, #101413);
  background:var(--rd-ink, #101413);
  color:#FFFFFF;
}
#tlxf-all:checked ~ .rdt-tl-head [for="tlxf-all"] .n,
#tlxf-fin:checked ~ .rdt-tl-head [for="tlxf-fin"] .n,
#tlxf-act:checked ~ .rdt-tl-head [for="tlxf-act"] .n,
#tlxf-filing:checked ~ .rdt-tl-head [for="tlxf-filing"] .n,
#tlxf-kbo:checked ~ .rdt-tl-head [for="tlxf-kbo"] .n,
#tlxf-signal:checked ~ .rdt-tl-head [for="tlxf-signal"] .n { color:#B6BEBA; }
/* KEYBOARD FOCUS. The radios are off-screen, so the ring has to be drawn on the
   label the focused radio belongs to, and the sibling combinator cannot be
   parameterised: one rule per family again. A single `.rdt-r:focus-visible +
   .rdt-tl-head` would have ringed EVERY label at once, and only when the last
   radio happened to be the focused one. */
#tlxf-all:focus-visible ~ .rdt-tl-head [for="tlxf-all"],
#tlxf-fin:focus-visible ~ .rdt-tl-head [for="tlxf-fin"],
#tlxf-act:focus-visible ~ .rdt-tl-head [for="tlxf-act"],
#tlxf-filing:focus-visible ~ .rdt-tl-head [for="tlxf-filing"],
#tlxf-kbo:focus-visible ~ .rdt-tl-head [for="tlxf-kbo"],
#tlxf-signal:focus-visible ~ .rdt-tl-head [for="tlxf-signal"] {
  outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px;
}

.rdt-next { font-size:13px; color:var(--rd-grey, #6E7671); }
.rdt-next-date {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  color:var(--rd-ink, #101413);
}

/* One dot per event family. Content-box on purpose: a 9px core inside a 2px
   ring is the design's 13px mark, filled or hollow.
     financial milestone → green, filled
     Staatsblad act      → ink, filled
     NBB filing          → green-mid ring, hollow
     KBO administration  → grey ring, hollow
     court/register signal → red, filled  (not in the design's example
       company, which has none; red is the palette's only alarm colour and
       the legend names it) */
.rdt-dot {
  width:9px; height:9px; box-sizing:content-box; border-radius:50%;
  border:2px solid var(--rd-grey-light, #9AA29E);
  background:var(--rd-grey-light, #9AA29E);
  flex:none; display:inline-block;
}
.rdt-dot.fin    { border-color:var(--rd-green, #0C7A52);     background:var(--rd-green, #0C7A52); }
.rdt-dot.act    { border-color:var(--rd-ink, #101413);       background:var(--rd-ink, #101413); }
.rdt-dot.filing { border-color:var(--rd-green-mid, #9CCBB4); background:#FFFFFF; }
.rdt-dot.kbo    { border-color:var(--rd-grey-light, #9AA29E); background:#FFFFFF; }
.rdt-dot.signal { border-color:var(--rd-red, #B23A1F);       background:var(--rd-red, #B23A1F); }

.rdt-tl-body { margin-top:24px; }
.rdt-year { display:grid; grid-template-columns:62px 24px minmax(0, 1fr); gap:0 14px; scroll-margin-top:90px; }
.rdt-yr {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:20px; font-weight:700; letter-spacing:-0.02em;
  color:var(--rd-ink, #101413); padding-top:14px; text-align:right;
}
.rdt-spine { position:relative; display:flex; justify-content:center; }
.rdt-spine::before {
  content:""; position:absolute; top:0; bottom:0; width:1px;
  background:var(--rd-line, #E4E7E6);
}
.rdt-rows { min-width:0; }

.rdt-ev { display:block; }
.rdt-ev-sum {
  display:grid; grid-template-columns:52px minmax(0, 1fr); gap:14px;
  align-items:start; padding:13px 0;
  border-bottom:1px solid var(--rd-line-soft, #F0F2F1);
}
/* The rows that expand are <details>; strip the native marker and let the
   whole summary be the hit area. */
details.rdt-ev > .rdt-ev-sum { cursor:pointer; list-style:none; }
details.rdt-ev > .rdt-ev-sum::-webkit-details-marker { display:none; }
details.rdt-ev > .rdt-ev-sum:hover .rdt-ev-title { color:var(--rd-green-deep, #0A6444); }
details.rdt-ev > .rdt-ev-sum:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:-2px; }
.rdt-ev-when { display:flex; align-items:center; gap:8px; padding-top:2px; }
.rdt-ev-when .rdt-dot { margin-left:-33px; }
.rdt-ev-date {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:12px; color:var(--rd-grey, #6E7671); white-space:nowrap;
}
.rdt-ev-main { min-width:0; }
.rdt-ev-line { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rdt-ev-kind {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--rd-grey-light, #9AA29E); white-space:nowrap;
}
.rdt-ev-title { font-weight:500; color:var(--rd-ink, #101413); overflow-wrap:anywhere; }
.rdt-ev-title.strong { font-weight:600; }
.rdt-chip {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:11px; color:var(--rd-green-deep, #0A6444);
  background:var(--rd-green-soft, #F1F7F3); border-radius:3px; padding:2px 7px;
  white-space:nowrap;
}
.rdt-ev-detail {
  margin-top:3px; font-size:14px; line-height:1.45;
  color:var(--rd-grey, #6E7671); overflow-wrap:anywhere;
}
.rdt-ev-more {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:11px; color:var(--rd-green-deep, #0A6444); white-space:nowrap;
  margin-left:6px;
}
details.rdt-ev[open] .rdt-ev-more { color:var(--rd-grey, #6E7671); }

/* An expanded act: its facts, and the truncation note when we read a prefix. */
.rdt-facts {
  list-style:none; margin:0 0 13px 66px; padding:0;
  display:flex; flex-direction:column; gap:5px;
  font-size:13px; line-height:1.5; color:var(--rd-text, #46504C);
}
.rdt-facts li { position:relative; padding-left:14px; overflow-wrap:anywhere; }
.rdt-facts li::before { content:"\2022"; position:absolute; left:0; top:0; color:var(--rd-grey-light, #9AA29E); }
.rdt-facts li.rdt-facts-more { color:var(--rd-grey, #6E7671); font-style:italic; }
.rdt-facts li.rdt-facts-more::before { content:""; }
.rdt-truncated {
  margin:0 0 13px 66px; font-size:12px; line-height:1.5;
  color:var(--rd-grey, #6E7671);
}

.rdt-legend {
  margin-top:18px; display:flex; gap:18px; flex-wrap:wrap;
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:11px; color:var(--rd-grey, #6E7671);
}
.rdt-legend-item { display:inline-flex; align-items:center; gap:7px; }
.rdt-legend-note { margin-left:auto; color:var(--rd-grey-light, #9AA29E); }
.rdt-cov {
  margin-top:10px;
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:11px; color:var(--rd-grey-light, #9AA29E);
}

/* The filter itself. A year group whose every row is filtered out hides with
   them, so the spine never runs beside an empty year. */
#tlxf-fin:checked    ~ .rdt-tl-body .rdt-ev:not(.fin),
#tlxf-act:checked    ~ .rdt-tl-body .rdt-ev:not(.act),
#tlxf-filing:checked ~ .rdt-tl-body .rdt-ev:not(.filing),
#tlxf-kbo:checked    ~ .rdt-tl-body .rdt-ev:not(.kbo),
#tlxf-signal:checked ~ .rdt-tl-body .rdt-ev:not(.signal) { display:none; }
#tlxf-fin:checked    ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.fin)),
#tlxf-act:checked    ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.act)),
#tlxf-filing:checked ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.filing)),
#tlxf-kbo:checked    ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.kbo)),
#tlxf-signal:checked ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.signal)) { display:none; }

/* ── Bestuur · vestiging · vastgoed ───────────────────────────────────── */

.rdt-two { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px; align-items:start; }
.rdt-card-t { font-size:17px; font-weight:600; color:var(--rd-ink, #101413); }
.rdt-card-s { margin-top:2px; font-size:13px; color:var(--rd-grey, #6E7671); }

.rdt-person { margin-top:20px; display:flex; align-items:center; gap:14px; }
.rdt-person + .rdt-person { margin-top:14px; }
.rdt-avatar {
  width:44px; height:44px; border-radius:50%; flex:none;
  background:var(--rd-green-soft, #F1F7F3); color:var(--rd-green-deep, #0A6444);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px; letter-spacing:.02em;
}
.rdt-person-b { min-width:0; }
.rdt-person-n { font-weight:600; font-size:16px; color:var(--rd-ink, #101413); overflow-wrap:anywhere; }
a.rdt-person-n:hover { color:var(--rd-green-deep, #0A6444); }
.rdt-person-r { font-size:13px; color:var(--rd-grey, #6E7671); overflow-wrap:anywhere; }
.rdt-pill-on {
  margin-left:auto; flex:none; padding:4px 10px; border-radius:999px;
  border:1px solid var(--rd-green, #0C7A52); color:var(--rd-green, #0C7A52);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  white-space:nowrap;
}
.rdt-pill-off {
  margin-left:auto; flex:none; padding:4px 10px; border-radius:999px;
  border:1px solid var(--rd-line, #E4E7E6); color:var(--rd-grey, #6E7671);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  white-space:nowrap;
}
.rdt-hist {
  margin-top:20px; padding-top:16px; border-top:1px solid var(--rd-line, #E4E7E6);
  display:grid; gap:8px; font-size:13px;
}
.rdt-hist-row { display:flex; gap:12px; }
.rdt-hist-row .d {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  color:var(--rd-grey, #6E7671); width:88px; flex:none;
}
.rdt-hist-row .e { min-width:0; color:var(--rd-ink, #101413); overflow-wrap:anywhere; }
.rdt-hist-row.past .e { color:var(--rd-grey, #6E7671); }

.rdt-map {
  margin-top:18px; border-radius:6px; overflow:hidden;
  border:1px solid var(--rd-line, #E4E7E6);
}
.rdt-map .seatmap { margin:0; }
.rdt-tiles {
  margin-top:16px; display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:1px; background:var(--rd-line, #E4E7E6);
  border:1px solid var(--rd-line, #E4E7E6); border-radius:6px; overflow:hidden;
}
.rdt-tile { background:#FFFFFF; padding:12px 14px; min-width:0; }
.rdt-tile-k { font-size:12px; color:var(--rd-grey, #6E7671); }
.rdt-tile-v {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:18px; font-weight:700; color:var(--rd-ink, #101413);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* The card's own footnote (the parcel, the region, the honesty contract) at
   12px, and a SENTENCE the card has to say about itself (a read that did not
   answer, an overflow it did not show) one step up, because a reader has to be
   able to read it rather than merely notice it. */
.rdt-foot { margin-top:14px; font-size:12px; line-height:1.5; color:var(--rd-grey-light, #9AA29E); }
.rdt-note { margin-top:14px; font-size:13px; line-height:1.55; color:var(--rd-grey, #6E7671); max-width:60ch; }

/* A disclosure that keeps a longer list (the establishment units, the parcel
   table) available without putting it in the reading path. */
.rdt-more { margin-top:14px; }
.rdt-more > summary {
  cursor:pointer; list-style:none; font-size:12px;
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  color:var(--rd-grey, #6E7671);
}
.rdt-more > summary::-webkit-details-marker { display:none; }
.rdt-more > summary::before { content:"+ "; }
.rdt-more[open] > summary::before { content:"\2212 "; }
.rdt-more > summary:hover { color:var(--rd-green-deep, #0A6444); }
.rdt-more > summary:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px; }
.rdt-more-b { margin-top:12px; }

/* ── Vergelijkbare bedrijven ──────────────────────────────────────────── */

.rdt-peers { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.rdt-peer {
  background:#FFFFFF; border:1px solid var(--rd-line, #E4E7E6); border-radius:8px;
  padding:18px 20px; color:var(--rd-ink, #101413); display:block; text-decoration:none;
  transition:border-color .12s;
}
.rdt-peer:hover { border-color:var(--rd-ink, #101413); text-decoration:none; }
.rdt-peer:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px; }
.rdt-peer-n { font-weight:600; overflow-wrap:anywhere; }
.rdt-peer-v {
  margin-top:4px; font-size:12px; color:var(--rd-grey, #6E7671);
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
}
.rdt-peer-c { margin-top:10px; font-size:13px; color:var(--rd-grey, #6E7671); overflow-wrap:anywhere; }
.rdt-peer-c .v {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  color:var(--rd-ink, #101413);
}
.rdt-peers-note { margin-top:12px; font-size:12px; line-height:1.5; color:var(--rd-grey-light, #9AA29E); }

/* ── Narrow ───────────────────────────────────────────────────────────────
   At 360 the year column shrinks, the row stacks (the date line above the
   title instead of beside it) and the two cards of the Bestuur section sit
   one under the other. Nothing may reach past the viewport: every column is
   minmax(0,1fr) and the long strings wrap on any character. */
@media (max-width: 900px) {
  .rdt-two { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rdt-card { padding:18px 16px; }
  .rdt-year { grid-template-columns:38px 12px minmax(0, 1fr); gap:0 8px; }
  .rdt-yr { font-size:15px; padding-top:12px; }
  .rdt-ev-sum { grid-template-columns:minmax(0, 1fr); gap:4px; padding:11px 0; }
  .rdt-ev-when { padding-top:0; }
  .rdt-ev-when .rdt-dot { margin-left:-21px; }
  .rdt-ev-line { gap:8px; }
  .rdt-ev-detail { font-size:13px; }
  .rdt-facts, .rdt-truncated { margin-left:0; }
  .rdt-legend { gap:10px; }
  .rdt-legend-note { margin-left:0; }
  .rdt-hist-row .d { width:76px; }
  .rdt-peers { grid-template-columns:minmax(0, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════════
   redesign S: the Checked score card and the Signalen list
   (owner's dossier redesign, 2026-09-04)

   Every colour is a var(--rd-*) with the design's own literal as the fallback,
   so this branch renders correctly on its own while lane V lands the token
   block. Layout is grid + flex only: no new JS, and every interactive state is
   a CSS one.

   RESPONSIVE. The score card is three columns at desktop, one at 360; a signal
   row is text + evidence side by side, stacked below 720 with the evidence
   under the text it stands beside. Nothing is positioned in a way that can
   leave its container: percentage marks live inside position:relative tracks
   whose parents never exceed 100% width.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the score card shell ─────────────────────────────────────────────────── */

/* The score column is a fixed 220px track (a 76px figure needs no more and
   reads badly with more) and everything else is fluid. has-score says whether
   that first track belongs to the score at all: on a company with no filed
   accounts the card opens on the axes, and 220px is the wrong width for them. */
.rds-score-card {
  display:grid; gap:40px; align-items:start;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.rds-score-card.has-score { grid-template-columns:220px minmax(0, 1fr) minmax(0, 1fr); }
.rds-score-card.is-cols-2 { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.rds-score-card.is-cols-2.has-score { grid-template-columns:220px minmax(0, 1fr); }
.rds-score-card.is-cols-1, .rds-score-card.is-cols-1.has-score { grid-template-columns:minmax(0, 1fr); }
.rds-col { min-width:0; }
.rds-col-pd, .rds-col-axes {
  border-left:1px solid var(--rd-line-soft, #F0F2F1); padding-left:34px;
}
.rds-score-card.is-cols-1 .rds-col-pd,
.rds-score-card.is-cols-1 .rds-col-axes { border-left:0; padding-left:0; }

/* .rd-card and .rd-eyebrow belong to the shared visual system. These are
   FALLBACKS so this branch renders a finished card on its own, and they are
   written inside :where(), which has zero specificity: the moment the real
   .rd-card / .rd-eyebrow rules exist, they win outright, whatever the source
   order. Values are the design's own, so the two agree either way. */
:where(.rds-score-card) {
  background:#FFFFFF; border:1px solid var(--rd-line, #E4E7E6);
  border-radius:8px; padding:28px 32px;
}
:where(.rds-score-card .rd-eyebrow) {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--rd-grey, #6E7671); margin-bottom:8px;
}

/* ── column 1: the score ──────────────────────────────────────────────────── */

.rds-score-figure { display:flex; align-items:flex-end; gap:8px; }
.rds-score-num {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:76px; font-weight:700; line-height:0.86; letter-spacing:-0.04em;
}
.rds-score-num.is-good { color:var(--rd-green, #0C7A52); }
.rds-score-num.is-fair { color:var(--rd-amber, #D6B54A); }
.rds-score-num.is-bad  { color:var(--rd-red, #B23A1F); }
.rds-score-den { color:var(--rd-grey-light, #9AA29E); font-size:15px; padding-bottom:9px; }

.rds-score-band { margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rds-score-chip {
  padding:4px 10px; border-radius:3px; font-size:12px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
}
.rds-score-chip.is-good {
  background:var(--rd-green-soft, #F1F7F3); color:var(--rd-green-deep, #0A6444);
  border:1px solid var(--rd-green-line, #CFE3D8);
}
.rds-score-chip.is-fair { background:#FBF6E6; color:#7A5F12; border:1px solid #EBDCA8; }
.rds-score-chip.is-bad  { background:#FBEDE9; color:var(--rd-red, #B23A1F); border:1px solid #EFCFC5; }

.rds-score-delta {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:12px; font-weight:700; white-space:nowrap;
}
.rds-score-delta.is-up   { color:var(--rd-green, #0C7A52); }
.rds-score-delta.is-down { color:var(--rd-red, #B23A1F); }
.rds-score-delta.is-flat { color:var(--rd-grey, #6E7671); }

.rds-score-note {
  margin-top:18px; font-size:13px; line-height:1.45; color:var(--rd-grey, #6E7671);
}
.rds-score-link { margin-top:14px; font-size:13px; }
.rds-score-link a { color:var(--rd-green, #0C7A52); text-decoration:none; }
.rds-score-link a:hover { color:var(--rd-ink, #101413); text-decoration:underline; }
.rds-score-link a:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px; }

/* ── column 2: the axes as bars ───────────────────────────────────────────── */

.rds-axes { display:grid; gap:14px; }
.rds-axis-head {
  display:flex; justify-content:space-between; gap:10px;
  font-size:13px; margin-bottom:6px; color:var(--rd-ink, #101413);
}
.rds-axis-val {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  color:var(--rd-grey, #6E7671); white-space:nowrap;
}
.rds-axis-val.is-unmeasured { color:var(--rd-grey-light, #9AA29E); }
.rds-axis-delta { margin-left:6px; }
.rds-axis-delta.is-up   { color:var(--rd-green, #0C7A52); }
.rds-axis-delta.is-down { color:var(--rd-red, #B23A1F); }
.rds-axis-delta.is-flat { color:var(--rd-grey-light, #9AA29E); }

.rds-axis-track {
  position:relative; height:6px; border-radius:3px;
  background:var(--rd-fill, #EDF0EE);
}
/* An unmeasured axis is a dashed empty track, never a zero-width fill with a 0
   beside it: absence rendered as the worst score is the error this product has
   been repaired for more than once. */
.rds-axis-track.is-unmeasured {
  background:transparent; border:1px dashed var(--rd-line, #E4E7E6);
}
.rds-axis-fill {
  position:absolute; inset:0 auto 0 0; height:6px; border-radius:3px;
  background:var(--rd-green, #0C7A52);
}
.rds-axis-tick {
  position:absolute; top:-3px; width:2px; height:12px;
  background:var(--rd-ink, #101413); opacity:0.4;
}

/* ── column 3: the probability ────────────────────────────────────────────── */

.rds-pd-head { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.rds-pd-num {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:40px; font-weight:700; line-height:1; letter-spacing:-0.02em;
  color:var(--rd-ink, #101413);
}
.rds-pd-band { padding-bottom:6px; font-weight:600; font-size:14px; }
.rds-pd-band.is-b1 { color:var(--rd-green, #0C7A52); }
.rds-pd-band.is-b2 { color:var(--rd-olive, #7FA36B); }
.rds-pd-band.is-b3 { color:#8A7420; }
.rds-pd-band.is-b4 { color:#A3661F; }
.rds-pd-band.is-b5 { color:var(--rd-red, #B23A1F); }
.rds-pd-band.is-neutral { color:var(--rd-grey, #6E7671); }

.rds-pd-scale { margin-top:22px; position:relative; }
.rds-pd-bands { display:flex; height:9px; border-radius:5px; overflow:hidden; }
.rds-pd-bands > span { flex:1; }
.rds-pd-bands > .is-b1 { background:var(--rd-green, #0C7A52); }
.rds-pd-bands > .is-b2 { background:var(--rd-olive, #7FA36B); }
.rds-pd-bands > .is-b3 { background:var(--rd-amber, #D6B54A); }
.rds-pd-bands > .is-b4 { background:var(--rd-orange, #D08A3E); }
.rds-pd-bands > .is-b5 { background:var(--rd-red, #B23A1F); }
.rds-pd-mark {
  position:absolute; top:-8px; width:2px; height:25px;
  background:var(--rd-ink, #101413); transform:translateX(-1px);
}
.rds-pd-ticks {
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}

/* ── the credit verdict box ───────────────────────────────────────────────── */

.rds-verdict { margin-top:20px; padding:14px 16px; border-radius:4px; border-left:3px solid; }
.rds-verdict.is-green {
  background:var(--rd-green-soft, #F1F7F3); border-left-color:var(--rd-green, #0C7A52);
}
.rds-verdict.is-green .rds-verdict-head { color:var(--rd-green-deep, #0A6444); }
.rds-verdict.is-amber { background:#FBF6E6; border-left-color:var(--rd-orange, #D08A3E); }
.rds-verdict.is-amber .rds-verdict-head { color:#7A5F12; }
.rds-verdict.is-red { background:#FBEDE9; border-left-color:var(--rd-red, #B23A1F); }
.rds-verdict.is-red .rds-verdict-head { color:var(--rd-red, #B23A1F); }
.rds-verdict.is-neutral { background:var(--rd-line-soft, #F0F2F1); border-left-color:var(--rd-grey, #6E7671); }
.rds-verdict-head { font-weight:600; font-size:14px; }
.rds-verdict-why { margin-top:4px; font-size:13px; color:var(--rd-text, #46504C); line-height:1.45; }

/* ── the Signalen list ────────────────────────────────────────────────────── */

.rds-sig-head {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; flex-wrap:wrap; margin-bottom:14px;
}
.rds-sig-caption { font-size:14px; color:var(--rd-grey, #6E7671); }
.rds-sig-legend {
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace); font-size:11px;
}
.rds-sig-legend > span { white-space:nowrap; }
.rds-sig-key { margin-right:5px; font-weight:700; }
.rds-sig-stale { font-size:13px; color:var(--rd-grey, #6E7671); line-height:1.5; margin:0; }

.rds-sig-legend .is-lowers,  .rds-sig-sign.is-lowers  { color:var(--rd-green, #0C7A52); }
.rds-sig-legend .is-raises,  .rds-sig-sign.is-raises  { color:var(--rd-red, #B23A1F); }
.rds-sig-legend .is-neutral, .rds-sig-sign.is-neutral { color:var(--rd-grey, #6E7671); }

.rds-sig-list {
  border:1px solid var(--rd-line, #E4E7E6); border-radius:8px; overflow:hidden;
  display:grid; gap:1px; background:var(--rd-line, #E4E7E6);
}
.rds-sig-row {
  background:#FFFFFF; display:grid; gap:32px; padding:22px 26px; align-items:start;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
}
.rds-sig-row.is-bare { grid-template-columns:minmax(0, 1fr); }
.rds-sig-main { display:grid; grid-template-columns:26px minmax(0, 1fr); gap:12px; align-items:start; }
.rds-sig-sign {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:20px; font-weight:700; line-height:1.1;
}
.rds-sig-body { min-width:0; }
.rds-sig-title { font-size:16px; font-weight:600; color:var(--rd-ink, #101413); }
.rds-sig-detail { margin-top:5px; font-size:14px; line-height:1.5; color:var(--rd-grey, #6E7671); }
.rds-sig-source {
  margin-top:8px; font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--rd-grey-light, #9AA29E); display:inline-block;
}
a.rds-sig-source.is-link { text-decoration:none; }
a.rds-sig-source.is-link:hover { color:var(--rd-ink, #101413); text-decoration:underline; }
a.rds-sig-source.is-link:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px; }
.rds-sig-side { border-left:1px solid var(--rd-line-soft, #F0F2F1); padding-left:32px; min-width:0; }

.rds-evidence-title {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--rd-grey, #6E7671);
}
.rds-evidence-body { margin-top:12px; }

/* ── evidence: the marker scale ───────────────────────────────────────────── */

.rds-scale { display:grid; gap:12px; }
.rds-scale-row {
  display:grid; grid-template-columns:104px minmax(0, 1fr) 64px;
  gap:10px; align-items:center; font-size:12px;
}
.rds-scale-label { color:var(--rd-grey, #6E7671); min-width:0; overflow-wrap:anywhere; }
.rds-scale-track { position:relative; height:14px; border-radius:3px; background:#F5F7F6; }
.rds-scale-band { position:absolute; top:0; bottom:0; border-radius:3px; background:#E3EEE8; }
.rds-scale-mark {
  position:absolute; top:-2px; width:10px; height:18px; border-radius:2px;
  background:var(--rd-ink, #101413);
}
.rds-scale-mark.is-lowers  { background:var(--rd-green, #0C7A52); }
.rds-scale-mark.is-raises  { background:var(--rd-red, #B23A1F); }
.rds-scale-mark.is-muted   { background:var(--rd-grey-light, #9AA29E); }
.rds-scale-mark.is-neutral { background:var(--rd-ink, #101413); }
.rds-scale-value {
  text-align:right; font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  color:var(--rd-ink, #101413);
}
.rds-scale-ticks, .rds-filing-ticks {
  margin-top:10px; display:flex; justify-content:space-between; gap:10px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}

/* ── evidence: the age axis ───────────────────────────────────────────────── */

.rds-age { width:100%; max-width:320px; height:auto; display:block; overflow:visible; }
.rds-age-zone { fill:#F6E3DC; }
.rds-age-track { fill:var(--rd-line, #E4E7E6); }
.rds-age-zone-label {
  fill:var(--rd-red, #B23A1F); font-size:9px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
}
.rds-age-mark { fill:var(--rd-ink, #101413); }
.rds-age-mark.is-raises { fill:var(--rd-red, #B23A1F); }
.rds-age-value {
  fill:var(--rd-ink, #101413); font-size:11px; font-weight:700;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
}
.rds-age-tick {
  fill:var(--rd-grey-light, #9AA29E); font-size:10px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
}

/* ── evidence: the filing deviations ──────────────────────────────────────── */

.rds-filing { display:grid; gap:7px; }
.rds-filing-row {
  display:grid; grid-template-columns:42px minmax(0, 1fr) 92px;
  gap:10px; align-items:center; font-size:12px;
}
.rds-filing-year {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  color:var(--rd-ink, #101413);
}
.rds-filing-track { position:relative; height:14px; border-radius:3px; background:#F5F7F6; }
.rds-filing-zero { position:absolute; top:0; bottom:0; left:50%; width:1px; background:#C6CDC9; }
.rds-filing-bar { position:absolute; top:2px; height:10px; border-radius:2px; }
.rds-filing-bar.is-early, .rds-filing-bar.is-ontime { background:var(--rd-green, #0C7A52); }
.rds-filing-bar.is-late { background:var(--rd-red, #B23A1F); }
.rds-filing-label {
  text-align:right; font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
}
.rds-filing-label.is-early { color:var(--rd-green, #0C7A52); }
.rds-filing-label.is-late { color:var(--rd-red, #B23A1F); }
.rds-filing-label.is-muted { color:var(--rd-grey-light, #9AA29E); }

/* ── evidence: our coverage per year ──────────────────────────────────────── */

.rds-cov { display:flex; gap:3px; }
.rds-cov-col { flex:1; text-align:center; min-width:0; }
.rds-cov-bar { display:block; height:26px; border-radius:2px; }
.rds-cov-bar.is-full { background:var(--rd-green, #0C7A52); }
.rds-cov-bar.is-partial {
  background:repeating-linear-gradient(135deg,
    var(--rd-green, #0C7A52) 0 4px, var(--rd-green-line, #CFE3D8) 4px 8px);
}
.rds-cov-bar.is-none { background:#EFF1F0; }
.rds-cov-year {
  display:block; margin-top:5px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}
.rds-cov-legend {
  margin-top:10px; display:flex; gap:14px; flex-wrap:wrap;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey, #6E7671);
}
.rds-cov-legend > span { display:inline-flex; align-items:center; gap:5px; }
.rds-cov-key { width:9px; height:9px; border-radius:2px; display:inline-block; flex:none; }
.rds-cov-key.is-full { background:var(--rd-green, #0C7A52); }
.rds-cov-key.is-partial {
  background:repeating-linear-gradient(135deg,
    var(--rd-green, #0C7A52) 0 3px, var(--rd-green-line, #CFE3D8) 3px 6px);
}
.rds-cov-key.is-none { background:#EFF1F0; border:1px solid var(--rd-line, #E4E7E6); }

/* ── evidence: the filing window ──────────────────────────────────────────── */

.rds-deadline { position:relative; height:16px; border-radius:3px; background:#F5F7F6; }
.rds-deadline-fill {
  position:absolute; top:0; bottom:0; left:0;
  background:var(--rd-green-line, #CFE3D8); border-radius:3px 0 0 3px;
}
.rds-deadline-over { position:absolute; top:0; bottom:0; background:#F0CFC5; }
.rds-deadline-tick { position:absolute; top:0; bottom:0; width:1px; background:#C6CDC9; }
.rds-deadline-now {
  position:absolute; top:-4px; width:2px; height:24px;
  background:var(--rd-ink, #101413); transform:translateX(-1px);
}
.rds-deadline-now.is-late { background:var(--rd-red, #B23A1F); }
.rds-deadline-labels {
  margin-top:8px; display:flex; justify-content:space-between; gap:8px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey, #6E7671);
}
.rds-deadline-labels .is-now { color:var(--rd-ink, #101413); }

/* ── evidence: one figure per year ────────────────────────────────────────── */

.rds-cols { min-width:0; }
/* Plot and year strip share one grid template (set inline, from the number of
   years), so a column and the year under it line up to the pixel. The bar is
   absolute inside its own CELL, never against the plot: against the plot it
   would have to reproduce the gaps in its own left/width. */
.rds-cols-plot { position:relative; height:64px; display:grid; gap:3px; }
.rds-cols-cell { position:relative; min-width:0; }
.rds-cols-bar { position:absolute; left:0; right:0; border-radius:1px; }
.rds-cols-bar.is-latest   { background:var(--rd-green, #0C7A52); }
.rds-cols-bar.is-past     { background:#C9D4CE; }
.rds-cols-bar.is-negative { background:var(--rd-red, #B23A1F); }
.rds-cols-zero { position:absolute; left:0; right:0; height:1px; background:#C6CDC9; z-index:1; }
.rds-cols-ref {
  position:absolute; left:0; right:0; height:0;
  border-top:1px dashed var(--rd-ink, #101413); opacity:0.45; z-index:1;
}
.rds-cols-years {
  display:grid; gap:3px; margin-top:5px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}
.rds-cols-years > span { text-align:center; min-width:0; }
.rds-cols-foot {
  margin-top:8px; font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .rds-score-card, .rds-score-card.has-score,
  .rds-score-card.is-cols-2, .rds-score-card.is-cols-2.has-score {
    grid-template-columns:minmax(0, 1fr); gap:28px;
  }
  .rds-col-pd, .rds-col-axes {
    border-left:0; border-top:1px solid var(--rd-line-soft, #F0F2F1);
    padding-left:0; padding-top:24px;
  }
}

@media (max-width: 720px) {
  .rds-sig-row, .rds-sig-row.is-bare { grid-template-columns:minmax(0, 1fr); gap:16px; padding:18px 16px; }
  .rds-sig-side { border-left:0; padding-left:38px; }
  .rds-scale-row { grid-template-columns:88px minmax(0, 1fr) 58px; }
  .rds-filing-row { grid-template-columns:36px minmax(0, 1fr) 80px; }
}

@media (max-width: 400px) {
  .rds-score-num { font-size:60px; }
  .rds-pd-num { font-size:34px; }
  .rds-sig-side { padding-left:0; }
  .rds-sig-main { grid-template-columns:20px minmax(0, 1fr); gap:10px; }
  .rds-sig-title { font-size:15px; }
  /* The three-column scale rows fold: the reading's name over its track, the
     value beside the name, so nothing is squeezed to an ellipsis at 360. */
  .rds-scale-row {
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"label value" "track track";
    gap:4px 10px;
  }
  .rds-scale-label { grid-area:label; }
  .rds-scale-value { grid-area:value; }
  .rds-scale-track { grid-area:track; }
  .rds-pd-ticks { font-size:9px; }
}