/* ════════════════════════════════════════════════
   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: 48px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.h1 {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.h2 {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.014em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.h3 {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.005em;
  font-weight: 600;
  margin: 0;
  color: var(--ink-soft);
}
.body-lg { font-size: 16px; 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: 22px;
  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: 18px;
  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 .12s, border-color .12s;
  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 .12s, background .12s;
}
.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%;
}
.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 .12s, border-color .12s, transform .04s;
  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: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi .value.lg { font-size: 36px; }
.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 .12s, box-shadow .12s;
}
.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: 20px; 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(19,27,46,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);
}
.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; 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 .12s, box-shadow .12s;
}
.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 .12s, box-shadow .12s;
}
.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; }
.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); }

/* ───── snowflake (5-axis radar) ───── */
.snowflake-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.snowflake-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. */
.snowflake { max-width: 100%; height: auto; }
.snowflake .sf-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
.snowflake .sf-score { font-family: var(--mono); font-size: 10px; }
.snowflake-side { flex: 1; min-width: 220px; }
.snowflake-avg { display: flex; align-items: baseline; gap: 6px; }
.snowflake-avg .sf-avg-num { font-family: var(--mono); font-size: 40px; font-weight: 600; line-height: 1; }
.snowflake-avg .sf-avg-den { font-family: var(--mono); color: var(--fg-mute); }
.snowflake-verdict { font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--ink-soft); margin: 10px 0 16px; }
.snowflake-legend { display: flex; flex-direction: column; gap: 7px; }
.sf-legend-row { display: flex; align-items: center; gap: 10px; }
.sf-legend-bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--bg-mid); overflow: hidden; }
.sf-legend-bar > span { display: block; height: 100%; border-radius: var(--r-full); }
.sf-legend-label { font-size: 12px; color: var(--fg-mid); width: 96px; flex-shrink: 0; }
.sf-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. */
  .snowflake-wrap { gap: 18px; justify-content: center; flex-direction: column; align-items: stretch; }
  .snowflake-fig { align-self: center; }
  .snowflake-side { min-width: 0; width: 100%; }
  .snowflake-avg { justify-content: center; }
  .snowflake-avg .sf-avg-num { font-size: 34px; }
  .snowflake-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. */
  .sf-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 0.12s ease;
}
.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: 16px; 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 .1s, border-color .1s;
  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: 22px; 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 .15s, border-color .15s;
}
.hero-search:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(19, 27, 46, 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: 16px;
  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 .15s, border-color .15s, transform .15s;
  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: 18px; 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 .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.lp-vcard:hover {
  background: var(--bg);
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -28px rgba(19, 27, 46, 0.28);
}
.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 responsive grids ───── */
.pricing-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-sp-16); align-items: stretch; }
.pricing-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-sp-16); }
@media (max-width: 1024px) { .pricing-tiers { grid-template-columns: 1fr 1fr; } .pricing-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pricing-tiers { grid-template-columns: 1fr; } .pricing-trust { grid-template-columns: 1fr; } }

/* ───── 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 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.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: 16px; 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(--alert-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;
}
.locked-skeleton::after {
  content: "🔒";
  position: absolute;
  right: -4px; top: -6px;
  font-size: 9px;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 1px 4px;
  color: var(--fg-mute);
}

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

/* ════════════════════════════════════════════════
   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: 18px !important;
  }

  /* Display headings — Fraunces at 64px breaks on small screens */
  .h-display { font-size: 32px; line-height: 1.1; }
  .h1        { font-size: 26px; line-height: 1.15; }
  .h2        { font-size: 20px; 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: 18px; }

  /* 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: 22px; }
  .kpi .value.lg { font-size: 28px; }

  /* 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: 38px !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: 18px !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: 26px; }
  .h1        { font-size: 22px; }

  /* 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; }

/* 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; }

/* ════════════════════════════════════════════════
   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(--ink);
  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: 26px;
  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: 32px; 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: 26px; }
}

/* ───── 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: 26px;
  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: 20px; }
.print-doc .print-meta { text-align: right; }
.print-doc .print-doctype {
  font-family: var(--serif);
  font-size: 16px;
  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: 26px;
  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 .12s ease;
}
.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 */
.snowflake { cursor: default; }
/* cartogram province tiles read as data points — brighten + outline on hover */
.cartogram-tile:not(.is-empty) { cursor: default; transition: box-shadow .12s ease, border-color .12s ease, filter .12s ease; }
.cartogram-tile:not(.is-empty):hover {
  border-color: var(--line-strong);
  filter: brightness(1.04);
}
/* legend / band bars become inspectable */
.sf-legend-row:hover .sf-legend-label,
.sf-legend-row:hover .sf-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 .14s ease, filter .14s ease;
}
.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 .14s ease, opacity .14s ease;
}
.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;
  }

  /* ── Snowflake radar: data polygon grows from center + fades; dots stagger ── */
  .snowflake polygon:last-of-type {
    opacity: 0;
    transform: scale(.4);
    transform-box: fill-box;
    transform-origin: center;
    animation: ck-radar-in .5s cubic-bezier(.2, .7, .3, 1) .1s forwards;
  }
  .snowflake circle {
    opacity: 0;
    animation: ck-fade-in .35s ease-out forwards;
  }
  .snowflake circle:nth-of-type(1) { animation-delay: .42s; }
  .snowflake circle:nth-of-type(2) { animation-delay: .50s; }
  .snowflake circle:nth-of-type(3) { animation-delay: .58s; }
  .snowflake circle:nth-of-type(4) { animation-delay: .66s; }
  .snowflake 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 cubic-bezier(.2, .7, .3, 1) both;
  }

  /* ── Bars: grow width from 0 (legend band bars + thin benchmark fill) ── */
  .sf-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 cubic-bezier(.2, .7, .3, 1) 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 .14s, box-shadow .14s, transform .14s;
}
.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: 22px;
  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: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.pricing-price-custom {
  font-size: 26px;
  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 .14s ease;
}

/* ───── chips ─────
   Status chips are often clickable filters/links — give a soft warm shift. */
.chip {
  transition: background .14s ease, border-color .14s ease,
              color .14s ease, box-shadow .14s ease;
}
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 .14s ease, border-color .14s ease,
                   color .14s ease, box-shadow .14s ease, transform .06s ease; }
.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 .12s ease, background .12s ease,
                        border-color .12s ease, transform .1s ease; }

/* ───── 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 .16s ease, border-color .18s ease;
}
.tabs button .count, .tabs a .count {
  transition: background .16s ease, color .16s ease;
}
.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 .12s ease; }
/* 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 .14s ease, box-shadow .14s ease,
              background .14s ease;
}
.own-row:hover, .estab-row:hover { background: var(--bg-low); }

/* Ranked / stat rows that didn't have any transition before. */
.heat-row, .sf-legend-row, .health-comp, .bench, .signal, .tl-row {
  transition: background .14s ease, border-color .14s ease;
}
.heat-row:hover { background: var(--bg-low); }
.sf-legend-row { border-radius: var(--r-sm); }
.sf-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 .14s ease, box-shadow .14s ease;
}
.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 .15s ease, box-shadow .15s ease, transform .15s ease;
}
.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: 38px;
  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: #e2d6fb; }
.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: 20px;
  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: 19px;
  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 .15s, box-shadow .15s, transform .15s;
}
.feature-tile .feature-title {
  font-size: 16px;
  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: 28px; }
  .page-hero-actions { margin-left: 0; width: 100%; }
  .section-head .section-title { font-size: 18px; }
  .empty-state { padding: 36px 18px; }
}

/* ───── page-polish motion (gated) ───── */
@media (prefers-reduced-motion: no-preference) {
  a.feature-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -28px rgba(19, 27, 46, 0.28);
  }
}

/* ───── 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); }
.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: 26px; 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); }
/* === 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 .12s ease; }
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 .12s ease, color .12s ease;
}
.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;
}

/* ── 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 .12s ease, box-shadow .12s ease;
}
.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: 16px;
  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: 28px;
  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 120ms ease;
}
.tool-card:hover { border-color: var(--ds-fg-dim); }
.tool-card-title {
  font-family: var(--ds-sans);
  font-size: 16px;
  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; }

/* ── /companies seat-map panel ── */
.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 .12s ease;
}
.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); }

/* ── 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 → /kaart cross-links: push the link to the right of the map
   panel head, and a compact full-width teaser card when the pin map hides. */
.cmap-density-link { margin-left: auto; margin-bottom: 0; }
.cmap-teaser {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sp-12);
  flex-wrap: wrap;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-14) var(--ds-sp-18);
  margin-bottom: var(--ds-sp-18);
  text-decoration: none;
}
.cmap-teaser:hover { border-color: var(--ds-accent); }
.cmap-teaser-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
}
.cmap-teaser-sub {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.cmap-teaser-arrow { margin-left: auto; color: var(--ds-accent); font-weight: 600; }

/* ── CompaniesBrowse (the /companies default view) ── */
.cb-section { margin: 0 0 var(--ds-sp-26); }
.cb-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-18);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-sp-12);
}
.cb-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  flex-wrap: wrap;
}
.cb-more-link {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-accent-deep);
  text-decoration: none;
  margin-bottom: var(--ds-sp-12);
}
.cb-more-link:hover { text-decoration: underline; }
.cb-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--ds-sp-12);
}
.cb-featured-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  padding: var(--ds-sp-14);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cb-featured-card:hover { border-color: var(--ds-accent); box-shadow: var(--shadow-1); }
.cb-featured-card:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.cb-featured-name { font-family: var(--ds-sans); font-weight: 600; font-size: var(--ds-fs-14); color: var(--ds-ink); }
.cb-featured-meta { font-family: var(--ds-sans); font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }
.cb-featured-kbo { font-family: var(--ds-mono); font-size: var(--ds-fs-11); color: var(--ds-fg-dim); }
.cb-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ds-sp-12);
}