/* ════════════════════════════════════════════════
   Checked design system — Phase 1 tokens
   "M" direction: modern-institutional / hairline-light editorial
   ────────────────────────────────────────────────
   This file defines the design-system tokens in two :root blocks:
     1. The new --ds-* scale (palette, type, spacing, radii) — the source
        of truth going forward.
     2. The legacy --bg / --ink / --fg-mid / --line / --risk-* / --shadow-*
        aliases consumed by everything that hasn't been migrated yet.

   The legacy aliases below are now the SOLE definitions for those tokens.
   app.css's original :root block (which previously hardcoded them with
   Veritas hex values) was removed on 2026-05-29 so these aliases actually
   take effect — before that deletion app.css's :root, loading after this
   file, silently overrode every alias and the M shift never reached
   legacy pages. Once every page has been migrated to --ds-* directly,
   the second :root block can be deleted in one go. Touch with care.
   ════════════════════════════════════════════════ */

/* Smooth cross-document navigations (e.g. switching dossier tabs, which are
   real SSR page loads for SEO/caching) instead of a hard white flash + scroll
   jump. Progressive enhancement: browsers without cross-document view
   transitions just navigate normally. Respect reduced-motion. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── Metric-matched fallback faces (cut FOUT reflow / CLS) ────────────────
   The web fonts load from Google with display=swap, so the browser first
   paints a fallback then swaps. By default that fallback is a generic family
   whose metrics differ from Inter/Fraunces/JetBrains Mono, so the swap shifts
   layout (Fraunces reflow, Inter snap). These faces name a locally-available
   system font and size-adjust its metrics to approximate the web font, so the
   swap barely moves anything. CSP-safe: local() only, zero network. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  ascent-override: 96%;
  descent-override: 27%;
  line-gap-override: 0%;
  size-adjust: 102%;
}
@font-face {
  font-family: "JetBrains Mono Fallback";
  src: local("Consolas"), local("Menlo");
  size-adjust: 100%;
}

:root {
  /* ── Light-professional palette (2026-06 design overhaul) ──
     Doctrine: pure-white surfaces, warm-white page, ink text, hairline
     lines. NO dark/navy panel fills anywhere; the single action accent
     is the emerald family. Risk colours (good/warn/bad) appear ONLY on
     indicators — rings, pills, dots, strokes — never as panel fills. */
  --ds-ink:           #14181d;
  --ds-ink-soft:      #242b33;
  --ds-page-bg:       #fdfdfc;
  --ds-surface:       #ffffff;
  --ds-line:          #e6e8ec;
  --ds-line-soft:     #eef0f3;
  --ds-fg:            #14181d;
  --ds-fg-mid:        #4a5560;
  --ds-fg-mute:       #5d6772;
  --ds-fg-dim:        #6b7480; /* the lightness FLOOR for any text */
  --ds-inv:           #ffffff;

  /* ── action accent — emerald family (the ONLY brand accent) ── */
  --ds-accent:        #0b8a5d; /* primary actions: solid fills, active states */
  --ds-accent-deep:   #096e4b; /* hover/pressed grade */
  --ds-accent-soft:   #e9f5f0; /* barely-there wash for tinted icon chips */
  --ds-viz-pos:       #34d399; /* data-viz positive strokes ONLY */

  /* ── semantic accents ─────────────────────────── */
  --ds-good:          #065f46;
  --ds-good-bg:       #ecfdf5;
  --ds-good-border:   #a7f3d0;
  --ds-warn:          #854d0e;
  --ds-warn-bg:       #fef3c7;
  --ds-warn-border:   #fde68a;
  --ds-bad:           #9a1a13;
  --ds-bad-bg:        #fee2e2;
  --ds-bad-border:    #fecaca;

  /* ── type ─────────────────────────────────────── */
  --ds-sans:   "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ds-serif:  "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, serif;
  --ds-mono:   "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ── motion (perf-life wave; 2026-07 refresh): duration + easing scale ──
     One shared easing and four durations so entrance/press affordances stay
     coherent. Every consumer is gated behind prefers-reduced-motion. */
  --ds-dur-1:    120ms;  /* micro — presses, hover state changes */
  --ds-dur-2:    180ms;  /* small transitions */
  --ds-dur-3:    260ms;  /* card entrance / drawer slide */
  --ds-dur-slow: 420ms;  /* deliberate reveals */
  --ds-ease-out:    cubic-bezier(.22, .61, .36, 1);  /* default decel */
  --ds-ease-settle: cubic-bezier(.2, .7, .3, 1);     /* gentle overshoot-settle — drawers, cards, tab indicator */

  /* ── elevation (2026-07 refresh) — ONE ink base (16,24,40), three steps.
     Retires the shadow sprawl that sat on two ink bases (19,27,46 vs
     16,24,40) plus per-component inline recipes. Legacy --shadow-1/2/pop
     now alias onto these; interactive-hover may step up one level. */
  --ds-elev-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --ds-elev-2: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px -16px rgba(16, 24, 40, 0.12);
  --ds-elev-3: 0 4px 12px rgba(16, 24, 40, 0.08), 0 20px 44px -20px rgba(16, 24, 40, 0.22);

  /* ── type scale ───────────────────────────────────
     Dense UI band (10–14) is the product's DNA — untouched. The display
     ramp is a ~1.25 modular scale (2026-07 refresh) that folds the old
     hardcoded 20/22/26/32/34/36/40/48 per-component sizes onto shared rungs.
     --ds-fs-18 stays the "lead" sub-head size; --ds-fs-24/30 remain as
     legacy aliases snapped onto the ramp (±1px, imperceptible) so their many
     page consumers ride it without churn. */
  --ds-fs-48: 48px;  --ds-fs-39: 39px;  --ds-fs-31: 31px;
  --ds-fs-25: 25px;  --ds-fs-20: 20px;  --ds-fs-16: 16px;
  --ds-fs-18: 18px;
  --ds-fs-14: 14px;  --ds-fs-13: 13px;  --ds-fs-12: 12px;
  --ds-fs-11: 11px;  --ds-fs-10: 10px;
  --ds-fs-30: var(--ds-fs-31);   /* legacy alias → ramp */
  --ds-fs-24: var(--ds-fs-25);   /* legacy alias → ramp */

  /* ── spacing scale ────────────────────────────── */
  --ds-sp-4: 4px;   --ds-sp-8: 8px;   --ds-sp-12: 12px;
  --ds-sp-14: 14px; --ds-sp-16: 16px; --ds-sp-18: 18px;
  --ds-sp-22: 22px; --ds-sp-26: 26px; --ds-sp-32: 32px;

  /* ── radii (2026-07 refresh: lg 8→10, xl 10→12; Linear/Stripe territory).
     4/6 stay for chips/inputs so dense controls keep their tight corners. */
  --ds-r-sm: 4px;  --ds-r-md: 6px;  --ds-r-lg: 10px;  --ds-r-xl: 12px;

  /* ── layout ───────────────────────────────────────
     The ONE content max-width. Page body (.page), the shell nav's inner
     container and the footer's inner container all cap to this so chrome
     and content share a single optical column on wide screens. */
  --ds-content-max: 1440px;
}

/* ════════════════════════════════════════════════
   Legacy aliases — Phase 1 transition only.
   These are the SOLE definitions for the legacy --bg / --ink / --fg-* /
   --line / --risk-* / --data-* / --alert* / --r-* / --shadow-* tokens;
   app.css's old :root block was removed on 2026-05-29 to let these take
   effect. Every var() reference scanned in wwwroot/app.css maps to either
   an M token (preferred — e.g. --bg → var(--ds-page-bg) so legacy pages
   pick up the M page-background) or its original Veritas value (kept
   verbatim where mapping would shift visuals — the amber --alert CTA
   colour, the data-* chart palette, the risk dot/stroke colours, shadows).
   Once every component is migrated to --ds-* directly, this whole block
   can be deleted in one go.
   ════════════════════════════════════════════════ */
:root {
  /* surfaces — Veritas → M */
  --bg:           var(--ds-page-bg);
  --bg-lowest:    var(--ds-surface);
  --bg-low:       #f7f8f9;   /* legacy: hover/chrome wash — kept near-white */
  --bg-mid:       #eef0f3;   /* legacy */
  --bg-high:      #e6e8ec;   /* legacy */
  --bg-highest:   #dfe2e7;   /* legacy */

  /* ink + text — Veritas → M */
  --ink:          var(--ds-ink);
  --ink-soft:     var(--ds-ink-soft);
  --fg:           var(--ds-fg);
  --fg-mid:       var(--ds-fg-mid);
  --fg-mute:      var(--ds-fg-mute);
  --fg-dim:       var(--ds-fg-dim);
  --fg-inv:       var(--ds-inv);

  /* lines — Veritas → M */
  --line:         var(--ds-line);
  --line-soft:    var(--ds-line-soft);
  --line-strong:  #c9ced6;   /* legacy: focus/active border, no M equivalent */

  /* risk semantics — kept as legacy hex (M's --ds-good/warn/bad are deeper
     copy-colours, not chart-stroke / dot colours; mapping would visually shift
     dozens of chips/gauges). Restored verbatim from wwwroot/app.css. */
  --risk-low:           #10B981;
  --risk-low-bg:        var(--ds-good-bg);
  --risk-low-border:    var(--ds-good-border);
  --risk-med:           #F59E0B;
  --risk-med-bg:        var(--ds-warn-bg);
  --risk-med-border:    var(--ds-warn-border);
  --risk-high:          #EF4444;
  --risk-high-bg:       var(--ds-bad-bg);
  --risk-high-border:   var(--ds-bad-border);

  /* data palette — legacy, kept verbatim for chart strokes */
  --data-blue:     #3B82F6;
  --data-blue-bg:  #eff6ff;
  --data-amber:    #F59E0B;
  --data-emerald:  #10B981;
  --data-rose:     #EF4444;
  --data-violet:   #8b5cf6;

  /* alert / CTA secondary — legacy amber, kept verbatim */
  --alert:        #fea619;
  --alert-deep:   #855300;

  /* type — Veritas → M */
  --sans:    var(--ds-sans);
  --serif:   var(--ds-serif);
  --mono:    var(--ds-mono);

  /* radii — Veritas → M (with --r-full legacy) */
  --r-sm:    var(--ds-r-sm);
  --r-md:    var(--ds-r-md);
  --r-lg:    var(--ds-r-lg);
  --r-xl:    var(--ds-r-xl);  /* legacy: now unified — both resolve to 12px */
  --r-full:  9999px;

  /* shadows — now alias onto the unified --ds-elev-* scale (2026-07 refresh),
     so every legacy consumer picks up the single-ink-base elevation. */
  --shadow-1:    var(--ds-elev-1);
  --shadow-2:    var(--ds-elev-2);
  --shadow-pop:  var(--ds-elev-3);
}

/* ════════════════════════════════════════════════
   Design-system primitives — CSS for the .razor components in
   Components/DesignSystem/. Class prefix .ds- so they never collide
   with the Veritas .chip / .card / .btn / .kpi rules in app.css.
   ════════════════════════════════════════════════ */

/* ── Pill — small status pill (Primitives/Pill.razor) ───────────
   Outline doctrine: coloured TEXT + BORDER on a white ground; never a
   grey or tinted panel fill. The risk colour is the indicator itself. */
.ds-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 99px;
  background: var(--ds-surface);
  color: var(--ds-fg-mid);
  border: 1px solid var(--ds-line);
  white-space: nowrap;
}
.ds-pill-g { color: var(--ds-good); border-color: var(--ds-good-border); }
.ds-pill-a { color: var(--ds-warn); border-color: var(--ds-warn-border); }
.ds-pill-r { color: var(--ds-bad);  border-color: var(--ds-bad-border); }

/* ── Caps label — small uppercase muted eyebrow label (utility) ───
   The recurring "11px / 600 / +0.04em / uppercase / muted" label used
   above stat values, section sub-heads, table groupings, etc.
   Extracted so migrated cards stop re-inlining these five declarations.
   Add an inline color override for a non-muted variant. */
.ds-caps {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
}

/* ── DeltaText — colored delta (Primitives/DeltaText.razor) ────── */
.ds-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-11);
  font-weight: 600;
}
.ds-delta-up    { color: var(--ds-good); }
.ds-delta-dn    { color: var(--ds-bad);  }
.ds-delta-flat  { color: var(--ds-fg-mute); }
.ds-delta-null  { color: var(--ds-fg-dim); font-weight: 400; }
.ds-delta-glyph { font-size: 9px; line-height: 1; }

/* ── Section — generic sectioned card (Primitives/Section.razor) ── */
.ds-section {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  overflow: hidden;
}
.ds-section-head {
  padding: var(--ds-sp-14) var(--ds-sp-18);
  border-bottom: 1px solid var(--ds-line-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sp-12);
}
.ds-section-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ds-ink);
  margin: 0;
}
.ds-section-sub {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.ds-section-body {
  padding: var(--ds-sp-18);
}

/* ── YoY-diff toggle + cell highlight (FinancialsCard P2-T14) ─────
   Pure-CSS, CSP-safe (no JS, no inline on*=). A sibling checkbox
   .ds-diff-toggle inside the .fin-wrap region drives the highlight via
   :has(); when unchecked the YoY tints are inert. Cells are tagged
   server-side (.yoy-up / .yoy-dn / .yoy-note) for |YoY| > 10%. */
.ds-diff-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-8);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  cursor: pointer;
  user-select: none;
}
.ds-diff-toggle input { cursor: pointer; margin: 0; }

/* Direction glyph sits inert (transparent) until the toggle is on. */
.yoy-glyph { font-size: 9px; line-height: 1; opacity: 0; margin-left: 3px; }

.fin-wrap:has(.ds-diff-toggle input:checked) .yoy-up {
  background: var(--ds-good-bg);
  box-shadow: inset 2px 0 0 var(--ds-good-border);
}
.fin-wrap:has(.ds-diff-toggle input:checked) .yoy-dn {
  background: var(--ds-bad-bg);
  box-shadow: inset 2px 0 0 var(--ds-bad-border);
}
.fin-wrap:has(.ds-diff-toggle input:checked) .yoy-note {
  background: var(--ds-warn-bg);
  box-shadow: inset 2px 0 0 var(--ds-warn-border);
}
.fin-wrap:has(.ds-diff-toggle input:checked) .yoy-glyph { opacity: 0.75; }

/* Print: always show the highlight statically (the print dossier has no
   interactive toggle — the checkbox itself is hidden in print CSS). */
@media print {
  .fin-wrap .yoy-up   { background: var(--ds-good-bg); }
  .fin-wrap .yoy-dn   { background: var(--ds-bad-bg);  }
  .fin-wrap .yoy-note { background: var(--ds-warn-bg); }
  .fin-wrap .yoy-glyph { opacity: 0.75; }
  .ds-diff-toggle { display: none; }
}

/* ── DataTable (Tables/DataTable.razor) ───────────────────────── */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg);
}
.ds-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--ds-surface);
  text-align: left;
  font-size: var(--ds-fs-11);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-ink);
  padding: var(--ds-sp-8) var(--ds-sp-12);
  border-bottom: 2px solid var(--ds-ink);
  white-space: nowrap;
}
.ds-table tbody td {
  padding: var(--ds-sp-12);
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-fg);
  vertical-align: top;
}
.ds-table tbody tr:hover td { background: var(--ds-page-bg); }
.ds-table th.num, .ds-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table-empty {
  text-align: center;
  padding: var(--ds-sp-32);
  color: var(--ds-fg-mute);
  font-size: var(--ds-fs-13);
}

/* ── Table scroll wrapper — wide .ds-table scrolls horizontally on
   narrow viewports instead of clipping. overflow-x:auto shows no
   scrollbar when the table fits (desktop unchanged). border-radius
   inherit keeps the panel's rounded corners. ── */
.ds-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: inherit;
}

/* ── DossierHero (Dossier/DossierHero.razor) ──────────────────── */
.ds-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--ds-sp-32);
  align-items: start;
  padding: var(--ds-sp-26) 0 var(--ds-sp-22);
  border-bottom: 1px solid var(--ds-line);
}
.ds-hero-main { min-width: 0; }
.ds-hero-titlerow {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sp-12);
  flex-wrap: wrap;
}
.ds-hero-title {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ds-ink);
  margin: 0;
  /* Named so the @view-transition morphs the title (and the KPI rail below)
     across dossier tab navigations instead of cross-fading the whole document.
     Both appear once per page, so the names stay unique. */
  view-transition-name: dossier-hero-title;
}
.ds-hero-meta {
  margin-top: var(--ds-sp-8);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mute);
  line-height: 1.4;
}
.ds-hero-id {
  margin-top: var(--ds-sp-4);
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-11);
  letter-spacing: 0.02em;
  color: var(--ds-fg-mute);
}
.ds-hero-actions {
  display: flex;
  gap: var(--ds-sp-8);
  flex-wrap: wrap;
  margin-top: var(--ds-sp-16);
}
.ds-hero-score { min-width: 0; }

/* KBO id + copy button row inside the hero Id slot */
.ds-hero-kbo {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-8);
}

@media (max-width: 860px) {
  .ds-hero { grid-template-columns: 1fr; gap: var(--ds-sp-22); }
}

/* Press feedback — clickable table rows dip slightly on pointer-down so a tap
   registers physically. Instant, tiny, and gated behind no-preference. */
@media (prefers-reduced-motion: no-preference) {
  [data-row-href] { transition: background-color var(--ds-dur-1) var(--ds-ease-out); }
  [data-row-href]:active { background: var(--ds-accent-soft); }
}

/* ── KpiRail (Dossier/KpiRail.razor) ──────────────────────────── */
.ds-kpirail {
  display: grid;
  gap: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  background: var(--ds-surface);
  overflow: hidden;
  view-transition-name: dossier-kpi-rail;
}
.ds-kpirail-tile {
  padding: var(--ds-sp-14) var(--ds-sp-16);
  border-right: 1px solid var(--ds-line-soft);
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-4);
  min-width: 0;
}
.ds-kpirail-tile:last-child { border-right: 0; }
/* Sweep (2026-07): a KPI tile that carries a link gets a hover/focus warmth so
   its interactivity reads; static tiles stay flat. */
.ds-kpirail-tile:has(a) { transition: background var(--ds-dur-1) var(--ds-ease-out); }
.ds-kpirail-tile:has(a):hover,
.ds-kpirail-tile:has(a:focus-visible) { background: var(--ds-line-soft); }
.ds-kpirail-label {
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
}
.ds-kpirail-value {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
/* Honest absence note in a KPI tile (e.g. a metric the verkort/micro schema
   doesn't publish). Small, muted, normal-weight, wrapping: reads as an
   explanation rather than a broken headline number. Overrides the big mono
   figure styling of .ds-kpirail-value. */
.ds-kpirail-value-note {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 500;
  letter-spacing: normal;
  color: var(--ds-fg-mute);
  white-space: normal;
  line-height: 1.3;
}
.ds-kpirail-spark {
  margin-top: var(--ds-sp-4);
  line-height: 0;
}
/* The trend line spans the tile instead of huddling in its corner.
   preserveAspectRatio="none" + charts.js's live-rect hover mapping make
   the stretch safe; non-scaling-stroke keeps the line weight honest. */
.ds-kpirail-spark .sparkline { width: 100%; height: 28px; }
.ds-kpirail-spark .sparkline polyline,
.ds-kpirail-spark .sparkline line { vector-effect: non-scaling-stroke; }

@media (max-width: 860px) {
  .ds-kpirail { grid-template-columns: 1fr 1fr !important; }
  .ds-kpirail-tile { border-right: 0; border-bottom: 1px solid var(--ds-line-soft); }
  .ds-kpirail-tile:nth-child(odd) { border-right: 1px solid var(--ds-line-soft); }
}

/* ── ScoreCard (Dossier/ScoreCard.razor) ────────────────────────
   WHITE card. The risk colour lives ONLY in the ring + dot; all text
   is ink/slate. The ring carries a strong ink numeral (signal count). */
.ds-scorecard {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-22) var(--ds-sp-22);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-sp-12);
  color: var(--ds-fg);
}
.ds-scorecard-eyebrow {
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
}
.ds-scorecard-top {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-16);
  width: 100%;
}
.ds-scorecard-ring {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}
.ds-scorecard-ring svg { display: block; }
.ds-scorecard-ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-20);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
  line-height: 1;
}
.ds-scorecard-verdict {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-8);
}
.ds-scorecard-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.ds-scorecard-band {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-18);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ds-ink);
}
.ds-scorecard-summary {
  font-size: var(--ds-fs-13);
  line-height: 1.5;
  color: var(--ds-fg-mid);
  margin-top: 3px;
}
.ds-scorecard-empty {
  text-align: center;
  padding: var(--ds-sp-22) 0;
  width: 100%;
}
.ds-scorecard-empty-dash {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-39);
  font-weight: 600;
  color: var(--ds-fg-dim);
  margin-bottom: var(--ds-sp-8);
}
.ds-scorecard-empty-msg {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.ds-scorecard-reasons {
  width: 100%;
  padding-top: var(--ds-sp-8);
  border-top: 1px solid var(--ds-line-soft);
}
.ds-scorecard-reasons-head {
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  margin-bottom: var(--ds-sp-8);
}
.ds-scorecard-reason {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  padding: 2px 0;
}
.ds-scorecard-reason-pts {
  font-family: var(--ds-mono);
  color: var(--ds-fg-mute);
}
.ds-scorecard-foot {
  font-size: var(--ds-fs-11);
  line-height: 1.45;
  color: var(--ds-fg-mute);
}

/* ── Dossier tab content stack ─────────────────────────────────────
   Consistent vertical rhythm between panels in a tab body, replacing
   the per-block margin-top hacks. */
.dossier-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-22);
}

/* Instant-tabs polish (2026-07): name the tab panel so that on the cross-
   document navigation path (full loads / enhanced nav disabled) the tab body
   cross-fades alongside the morphing hero title + KPI rail instead of a hard
   swap. Inert under reduced motion (the @view-transition rule at the top of
   this file disables navigation transitions there) and a no-op when the
   browser does a same-document enhanced DOM patch. Unique per page. */
.tab-panel { view-transition-name: dossier-tab-panel; }

/* Entrance: dossier cards fade + rise into place on first paint. Progressive,
   perceptual only — the SSR content is fully present and usable without it.
   Staggered for the first 5 cards (the ones above/near the fold); everything
   after lands together so the tail never feels sluggish. STRICTLY gated behind
   prefers-reduced-motion: no-preference — under reduced motion the cards are
   simply there, no transform, no delay. */
@media (prefers-reduced-motion: no-preference) {
  .dossier-stack > * {
    animation: ck-card-in var(--ds-dur-3) var(--ds-ease-out) both;
  }
  .dossier-stack > *:nth-child(1) { animation-delay: 0ms; }
  .dossier-stack > *:nth-child(2) { animation-delay: 45ms; }
  .dossier-stack > *:nth-child(3) { animation-delay: 90ms; }
  .dossier-stack > *:nth-child(4) { animation-delay: 135ms; }
  .dossier-stack > *:nth-child(n+5) { animation-delay: 180ms; }
}
@keyframes ck-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ══ Single-page dossier: section navigator + sections (2026-07) ══════
   The dossier is ONE long scrollable page (tabs retired). A sticky section
   navigator (a left rail >= 1100px, a horizontal pill bar below) tracks the
   section in view (scrollspy in js/dossier-nav.js). Light doctrine: white
   surfaces, hairlines, emerald accent, no dark fills. */

/* Two-column shell: navigator + sections. Mobile-first single column; the
   rail appears as a real side column on wide screens. */
.dossier-layout {
  display: block;
}
@media (min-width: 1100px) {
  .dossier-layout {
    display: grid;
    grid-template-columns: 212px minmax(0, 1fr);
    gap: var(--ds-sp-32, 32px);
    align-items: start;
  }
}

/* ── Navigator ─────────────────────────────────────────────────────
   Mobile: a sticky horizontal pill bar just under the page header.
   Desktop: a sticky vertical rail in the left column. */
.dossier-nav {
  position: sticky;
  top: 52px;                        /* clears the sticky page header */
  z-index: 40;
  display: flex;
  gap: var(--ds-sp-8, 8px);
  margin: 4px 0 var(--ds-sp-18, 18px);
  padding: var(--ds-sp-8, 8px) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--ds-page-bg);
  border-bottom: 1px solid var(--ds-line);
}
.dossier-nav::-webkit-scrollbar { display: none; }

.dossier-nav-label {
  display: none;                    /* rail-only heading (shown on desktop) */
}

.dossier-nav-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-8, 8px);
  padding: 7px 13px;
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  background: var(--ds-surface);
  color: var(--ds-fg-mid);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13, 13px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ds-dur-1, .12s) var(--ds-ease-out, ease),
              background-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease),
              border-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.dossier-nav-link:hover { color: var(--ds-ink); border-color: var(--ds-fg-dim); }
.dossier-nav-link:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
}
.dossier-nav-link.is-active {
  color: var(--ds-inv, #fff);
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  font-weight: 600;
}
/* Leading dot: a quiet index glyph that fills in on the active pill/rail item. */
.dossier-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-fg-dim);
  flex: 0 0 auto;
  transition: background-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.dossier-nav-link.is-active .dossier-nav-dot { background: var(--ds-inv, #fff); }

@media (min-width: 1100px) {
  .dossier-nav {
    position: sticky;
    top: 68px;                      /* header (52) + breathing room */
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border-bottom: 0;
  }
  .dossier-nav-label {
    display: block;
    padding: 0 12px 8px;
    font-family: var(--ds-sans);
    font-size: var(--ds-fs-11, 11px);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ds-fg-mute);
  }
  .dossier-nav-link {
    justify-content: flex-start;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--ds-r-md, 8px);
    background: transparent;
    color: var(--ds-fg-mid);
    font-size: var(--ds-fs-13, 13px);
  }
  .dossier-nav-link:hover { background: var(--ds-accent-soft); border-color: transparent; }
  .dossier-nav-link.is-active {
    color: var(--ds-accent-deep);
    background: var(--ds-accent-soft);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ds-accent);
  }
  .dossier-nav-link.is-active .dossier-nav-dot,
  .dossier-nav-link:hover .dossier-nav-dot { background: var(--ds-accent); }
}

/* ── Sections ──────────────────────────────────────────────────────
   Each section is a titled block; scroll-margin-top keeps the sticky
   chrome from covering the heading on an anchor jump. */
.dossier-sections {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-32, 32px);
  min-width: 0;
}
.dossier-section {
  scroll-margin-top: 116px;         /* header + mobile pill bar + gap */
}
@media (min-width: 1100px) {
  .dossier-section { scroll-margin-top: 80px; }
}

.dossier-section-head {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-12, 12px);
  margin-bottom: var(--ds-sp-16, 16px);
}
.dossier-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-18, 17px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
}
.dossier-section-title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--ds-accent);
  flex: 0 0 auto;
}
.dossier-section-rule {
  flex: 1;
  height: 1px;
  background: var(--ds-line);
}

/* ── Progressive disclosure ("Toon meer") for long lists ──────────── */
.ds-more { margin-top: var(--ds-sp-12, 12px); }
.ds-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-8, 8px);
  padding: 8px 14px;
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  background: var(--ds-surface);
  color: var(--ds-fg-mid);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13, 13px);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: border-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease),
              color var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.ds-more > summary::-webkit-details-marker { display: none; }
.ds-more > summary:hover { color: var(--ds-ink); border-color: var(--ds-fg-dim); }
.ds-more[open] > summary { color: var(--ds-fg-mute); margin-bottom: var(--ds-sp-12, 12px); }
.ds-more-note {
  margin-top: var(--ds-sp-12, 12px);
  font-size: var(--ds-fs-12, 12px);
  color: var(--ds-fg-mute);
}

/* ── OwnershipDonut (Charts/OwnershipDonut.razor) ─────────────────
   Pure-SSR cap-table donut + legend. Donut on the left, legend on the
   right; stacks on narrow viewports. */
.ds-donut {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-26);
  flex-wrap: wrap;
}
.ds-donut-ring { position: relative; flex: 0 0 auto; width: 160px; height: 160px; }
.ds-donut-svg { display: block; }
.ds-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
  text-align: center;
}
.ds-donut-center-val {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
}
.ds-donut-center-lbl {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-10);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  max-width: 96px;
}
.ds-donut-legend {
  flex: 1 1 220px;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-donut-legend-row {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-8);
  padding: 5px 0;
  border-bottom: 1px solid var(--ds-line-soft);
  font-size: var(--ds-fs-13);
}
.ds-donut-legend-row:last-child { border-bottom: 0; }
.ds-donut-swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.ds-donut-swatch.residual {
  background-color: var(--ds-line-soft);
  background-image: repeating-linear-gradient(45deg,
    var(--ds-line) 0, var(--ds-line) 1.5px,
    transparent 1.5px, transparent 4px);
  border: 1px solid var(--ds-line);
}
.ds-donut-legend-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-fg);
}
.ds-donut-legend-name a {
  color: var(--ds-ink);
  font-weight: 600;
  text-decoration: none;
}
.ds-donut-legend-name a:hover { text-decoration: underline; }
.ds-donut-legend-pct {
  flex: 0 0 auto;
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink-soft);
}

/* ── Officer timeline rail (OfficerTimelineCard restyle) ───────────
   A real vertical timeline: a hairline spine with a status dot per row.
   Current rows carry a filled dot, former rows a hollow one. */
.ds-tl {
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--ds-sp-22);
  list-style: none;
}
.ds-tl::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--ds-line);
}
.ds-tl-row { position: relative; padding: 0 0 var(--ds-sp-12) 0; }
.ds-tl-row:last-child { padding-bottom: 0; }
.ds-tl-dot {
  position: absolute;
  left: calc(-1 * var(--ds-sp-22) + 1px);
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ds-surface);
  border: 2px solid var(--ds-fg-dim);
  box-sizing: border-box;
}
.ds-tl-dot.on { background: var(--risk-low); border-color: var(--risk-low); }

/* ── DossierPanel (Dossier/DossierPanel.razor) ────────────────── */
.ds-panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  overflow: hidden;
  /* Doctrine-white canvas ⇒ panels carry their own figure-ground: a soft
     contact line + faint ambient drop (the dossier read as white-on-white-
     on-white without it — owner verdict 2026-06-10). */
  box-shadow: var(--ds-elev-2);
}
.ds-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  padding: var(--ds-sp-14) var(--ds-sp-18);
  border-bottom: 1px solid var(--ds-line);
  /* near-imperceptible cool wash so heads separate from bodies */
  background: color-mix(in srgb, var(--ds-ink) 2.5%, #ffffff);
}
.ds-panel-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ds-ink);
  margin: 0;
}
.ds-panel-sub {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.ds-panel-body {
  padding: var(--ds-sp-18);
}

/* (The old .ds-netcanvas host for network-canvas.js was removed 2026-06-11:
   the dossier's "Verbindingen & netwerk" now reuses the home-page network
   component, DossierNetwork → ambient-network.js, in dossier mode. See
   Components/DesignSystem/Charts/DossierNetwork.razor.) */

/* ════════════════════════════════════════════════
   Dossier IA redesign (2026-06-10) — stance-routed dossier surfaces.
   All light doctrine: white panels, hairlines, accents only as thin
   left borders / dots / numerals. No dark or gray fills.
   ════════════════════════════════════════════════ */

/* ── Quiet risk chip (CALM hero) — "Risico: laag" + 8px dot ────── */
.ds-risk-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-fg-mid);
  text-decoration: none;
  white-space: nowrap;
}
.ds-risk-chip:hover { border-color: var(--line-strong); color: var(--ds-ink); }
.ds-risk-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  flex: 0 0 auto;
}

/* ── Kerncijfers hero aside (CALM stance ScoreSlot) ─────────────
   Identity-first replacement for the risk card: 2×2 grid of large
   numerals over caps labels + a one-line source note. */
.ds-kern {
  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);
}
.ds-kern-eyebrow {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  margin-bottom: var(--ds-sp-12);
}
.ds-kern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sp-14) var(--ds-sp-18);
}
.ds-kern-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ds-kern-label {
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-kern-value {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-20);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink);
  line-height: 1.15;
}
.ds-kern-foot {
  margin-top: var(--ds-sp-12);
  padding-top: var(--ds-sp-8);
  border-top: 1px solid var(--ds-line-soft);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}

/* Inline deep-link teaser (e.g. the alert-stance "volledige tijdlijn →" jump
   under the insolvency-timeline card). Accent-coloured, underlines on hover. */
.ds-deeplink {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-8);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-accent);
  text-decoration: none;
}
.ds-deeplink:hover { color: var(--ds-accent-deep); text-decoration: underline; }

/* ── Check page (Pages/Check.razor) — M search form + feature tiles ───── */
.ds-check-search {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-8);
  padding: 6px 6px 6px 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
}
.ds-check-search:focus-within {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px rgba(11, 138, 93, 0.10);
}
.ds-check-search-ico {
  color: var(--ds-fg-mute);
  display: inline-flex;
  flex: none;
}
.ds-check-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-ink);
  padding: 12px 4px;
}
.ds-check-search input::placeholder { color: var(--ds-fg-mute); }
.ds-check-search .btn { flex: none; }

.ds-check-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .ds-check-tiles { grid-template-columns: 1fr; }
}
.ds-check-tile {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-16);
}
.ds-check-tile-ico {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-r-md);
  background: var(--ds-line-soft);
  color: var(--ds-fg-mid);
  margin-bottom: var(--ds-sp-12);
}
.ds-check-tile-ico.alert {
  background: var(--ds-warn-bg);
  color: var(--ds-warn);
}

/* ── Account / auth forms (Account/*.razor) — M form primitives ──────────
   Low-risk styling classes applied directly to native <input>/<InputText>
   elements so the EditForm / DataAnnotations machinery stays untouched.
   .ds-field stacks a .ds-label over a .ds-input; .ds-note-* are tinted
   inline message banners that preserve the bound message fields. */
.ds-auth {
  max-width: 420px;
  margin: 64px auto;
}
.ds-auth-wide {
  max-width: 720px;
  margin: 48px auto;
}
.ds-auth-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-32);
}
.ds-auth-eyebrow {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  margin-bottom: var(--ds-sp-8);
}
.ds-auth-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-24);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ds-ink);
  margin: 0;
}
.ds-auth-sub {
  font-size: var(--ds-fs-14);
  color: var(--ds-fg-mid);
  line-height: 1.55;
  margin: var(--ds-sp-12) 0 0;
}
.ds-auth-foot {
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mute);
  text-align: center;
  margin-top: var(--ds-sp-18);
}
.ds-auth-foot a {
  color: var(--ds-ink);
  font-weight: 500;
  text-decoration: none;
}
.ds-auth-foot a:hover { text-decoration: underline; }

.ds-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-4);
  margin-bottom: var(--ds-sp-14);
}
.ds-label {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
}
.ds-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  padding: 9px 12px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-ink);
  outline: none;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out);
}
.ds-input:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px rgba(11, 138, 93, 0.10); }
.ds-input::placeholder { color: var(--ds-fg-dim); }
.ds-input.invalid,
.ds-input.modified.invalid { border-color: var(--ds-bad); }

.ds-hint {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.ds-check {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-8);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
}

/* Tinted inline notes (bind the message text inside the body) */
.ds-note {
  border: 1px solid;
  border-radius: var(--ds-r-md);
  padding: 10px 14px;
  font-size: var(--ds-fs-13);
  line-height: 1.45;
  margin-bottom: var(--ds-sp-16);
}
.ds-note-bad  { background: var(--ds-bad-bg);  border-color: var(--ds-bad-border);  color: var(--ds-bad);  }
.ds-note-good { background: var(--ds-good-bg); border-color: var(--ds-good-border); color: var(--ds-good); }

/* Blazor's default field validation message text */
.ds-field .validation-message,
.ds-section-body .validation-message {
  color: var(--ds-bad);
  font-size: var(--ds-fs-12);
}

/* Settings-specific read-only field rows + section grouping */
.ds-settings-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-18);
}
.ds-settings-row { margin-bottom: var(--ds-sp-12); }
.ds-settings-row:last-child { margin-bottom: 0; }
.ds-settings-value {
  font-size: var(--ds-fs-14);
  color: var(--ds-ink-soft);
}
.ds-settings-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-16);
  flex-wrap: wrap;
}

/* ── Hover-card mini-dossier (hover-card.js, P2-T3) ───────────────────────
   Floating card built in JS and appended to <body>; positioned via
   position:fixed + inline left/top from getBoundingClientRect. Pointer-only.
   The card itself sets display/left/top inline; everything else lives here. */
.ds-hovercard {
  position: fixed;
  z-index: 1000;
  max-width: 280px;
  min-width: 200px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--shadow-pop);
  padding: var(--ds-sp-12) var(--ds-sp-14);
  font-family: var(--ds-sans);
  pointer-events: auto;
}
.ds-hovercard-name {
  font-size: var(--ds-fs-13);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--ds-ink);
}
.ds-hovercard-kbo {
  margin-top: 2px;
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-11);
  letter-spacing: 0.02em;
  color: var(--ds-fg-mute);
}
.ds-hovercard-meta {
  margin-top: var(--ds-sp-8);
  display: flex;
  align-items: center;
  gap: var(--ds-sp-8);
  flex-wrap: wrap;
}
.ds-hovercard-city {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
}
.ds-hovercard-score {
  margin-top: var(--ds-sp-12);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--ds-surface);
  color: var(--ds-fg-mid);
  border: 1px solid var(--ds-line);
}
.ds-hovercard-score-num {
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-14);
  font-weight: 600;
}
.ds-hovercard-score-lbl {
  font-size: var(--ds-fs-11);
  text-transform: capitalize;
}
.ds-hovercard-foot {
  margin-top: var(--ds-sp-12);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ds-fg-mute);
}

/* ════════════════════════════════════════════════
   AI sidekick drawer (P2-T5) — floating button +
   right slide-in drawer, present site-wide via Shell.
   z-index sits above the sticky nav (.ds-shell-nav = 50).
   ════════════════════════════════════════════════ */

/* ── Floating "Ask AI" button (bottom-right, fixed) ── */
.ds-ai-fab {
  position: fixed;
  right: var(--ds-sp-22);
  bottom: var(--ds-sp-22);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-8);
  height: 44px;
  padding: 0 16px;
  background: var(--ds-accent);
  color: var(--ds-inv);
  border: 1px solid var(--ds-accent);
  border-radius: 99px;
  cursor: pointer;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(9, 110, 75, 0.24);
  transition: transform var(--ds-dur-1) var(--ds-ease-settle), box-shadow var(--ds-dur-1) var(--ds-ease-out), background var(--ds-dur-1) var(--ds-ease-out);
}
.ds-ai-fab:hover {
  background: var(--ds-accent-deep);
  box-shadow: 0 6px 20px rgba(9, 110, 75, 0.30);
}
.ds-ai-fab:focus-visible {
  outline: 2px solid var(--ds-accent-deep);
  outline-offset: 2px;
}
.ds-ai-fab-icon { flex: 0 0 auto; }
.ds-ai-fab-label { white-space: nowrap; }

/* ── Backdrop (behind the drawer, dims the page) ── */
.ds-ai-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(11, 16, 32, 0.38);
}

/* ── Drawer (right-anchored, off-canvas by default) ── */
.ds-ai-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  height: 100vh;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--ds-surface);
  border-left: 1px solid var(--ds-line);
  box-shadow: -12px 0 40px -6px rgba(16, 24, 40, 0.20);
  transform: translateX(100%);
  transition: transform var(--ds-dur-3) var(--ds-ease-settle);
}
.ds-ai-drawer.open { transform: translateX(0); }

.ds-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-sp-14) var(--ds-sp-18);
  border-bottom: 1px solid var(--ds-line);
  flex: 0 0 auto;
}
.ds-ai-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ds-ink);
}
.ds-ai-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  color: var(--ds-fg-mute);
  cursor: pointer;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), color var(--ds-dur-1) var(--ds-ease-out);
}
.ds-ai-close:hover { border-color: var(--ds-fg-mute); color: var(--ds-ink); }

/* The HTML5 hidden attribute must always win over component display rules
   (UA [hidden]{display:none} loses to author class selectors). ai-drawer.js
   toggles [hidden] to switch the drawer between its ask-form and empty-state. */
[hidden] { display: none !important; }

.ds-ai-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--ds-sp-18);
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-12);
}

.ds-ai-subject {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-fg-mid);
  padding-bottom: var(--ds-sp-4);
}

.ds-ai-form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-12);
}
.ds-ai-q {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  color: var(--ds-fg);
  font-size: var(--ds-fs-14);
  font-family: var(--ds-sans);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.ds-ai-q:focus-visible { border-color: var(--ds-fg-mute); }
.ds-ai-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-12);
}
.ds-ai-submit {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  background: var(--ds-accent);
  color: var(--ds-inv);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-r-md);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ds-dur-1) var(--ds-ease-out);
}
.ds-ai-submit:hover { background: var(--ds-accent-deep); }
.ds-ai-submit:disabled { opacity: .6; cursor: default; }
.ds-ai-status {
  color: var(--ds-fg-mute);
  font-size: var(--ds-fs-13);
}

.ds-ai-answer {
  padding: 14px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: var(--ds-fs-14);
  color: var(--ds-fg);
}

/* ── Empty state (no company context on the page) ── */
.ds-ai-empty {
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-12);
}
.ds-ai-empty-lead {
  margin: 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  line-height: 1.5;
  color: var(--ds-fg-mid);
}
.ds-ai-find {
  display: flex;
  gap: var(--ds-sp-8);
}
.ds-ai-find-q {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  color: var(--ds-fg);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  outline: none;
  box-sizing: border-box;
}
.ds-ai-find-q:focus-visible { border-color: var(--ds-fg-mute); }
.ds-ai-find-go {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--ds-accent);
  color: var(--ds-inv);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-r-md);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  cursor: pointer;
}
.ds-ai-find-go:hover { background: var(--ds-accent-deep); }

.ds-ai-foot {
  margin: auto 0 0 0;
  padding-top: var(--ds-sp-12);
  color: var(--ds-fg-mute);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  line-height: 1.5;
}

/* Respect reduced-motion: no slide transition, instant show/hide. */
@media (prefers-reduced-motion: reduce) {
  .ds-ai-drawer { transition: none; }
  .ds-ai-fab { transition: none; }
}

/* On narrow screens drop the FAB text label to a compact circle. */
@media (max-width: 520px) {
  .ds-ai-fab { padding: 0; width: 44px; justify-content: center; }
  .ds-ai-fab-label { display: none; }
}

/* ════════════════════════════════════════════════
   Compare tray (P2-T13) — server-side floating
   "Compare (N)" button + right slide-in drawer,
   rendered by Shell only when the checked.compare
   cookie holds ≥1 entry. CSS-ONLY toggle: a hidden
   <input type="checkbox" id="cmp-tray-toggle"> sibling
   drives open/closed via :checked (no JS, CSP-safe).
   Stacks ABOVE the AI FAB so the two never overlap.
   ════════════════════════════════════════════════ */

/* The checkbox itself is never visible — it lives only to hold state. */
.ds-cmp-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

/* ── Floating "Compare (N)" button — sits above the AI FAB ──
   AI FAB: bottom var(--ds-sp-22), height 44px. We offset by
   44px + a 12px gap so the two pills clear each other. */
.ds-cmp-fab {
  position: fixed;
  right: var(--ds-sp-22);
  bottom: calc(var(--ds-sp-22) + 44px + var(--ds-sp-12));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-sp-8);
  height: 40px;
  padding: 0 16px;
  background: var(--ds-surface);
  color: var(--ds-ink);
  border: 1px solid var(--ds-ink);
  border-radius: 99px;
  cursor: pointer;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--ds-elev-2);
  transition: transform var(--ds-dur-1) var(--ds-ease-settle), box-shadow var(--ds-dur-1) var(--ds-ease-out), background var(--ds-dur-1) var(--ds-ease-out);
}
.ds-cmp-fab:hover {
  background: var(--ds-line-soft);
  box-shadow: var(--ds-elev-3);
}
/* Label-for-checkbox is keyboard-operable; make the focus ring visible. */
.ds-cmp-toggle:focus-visible + .ds-cmp-fab {
  outline: 2px solid var(--ds-ink);
  outline-offset: 2px;
}
.ds-cmp-fab-icon { flex: 0 0 auto; }
.ds-cmp-fab-label { white-space: nowrap; }
.ds-cmp-fab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--ds-accent);
  color: var(--ds-inv);
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-10);
  font-weight: 700;
  line-height: 1;
  border-radius: 99px;
}

/* ── Backdrop — only present once the checkbox is checked ── */
.ds-cmp-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(11, 16, 32, 0.38);
  display: none;
}
.ds-cmp-toggle:checked ~ .ds-cmp-backdrop { display: block; }

/* ── Tray (right-anchored, off-canvas by default) ── */
.ds-cmp-tray {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 80;
  height: 100vh;
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--ds-surface);
  border-left: 1px solid var(--ds-line);
  box-shadow: -12px 0 40px -6px rgba(16, 24, 40, 0.20);
  transform: translateX(100%);
  transition: transform var(--ds-dur-3) var(--ds-ease-settle);
}
.ds-cmp-toggle:checked ~ .ds-cmp-tray { transform: translateX(0); }

.ds-cmp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-sp-14) var(--ds-sp-18);
  border-bottom: 1px solid var(--ds-line);
  flex: 0 0 auto;
}
.ds-cmp-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ds-ink);
}
.ds-cmp-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  color: var(--ds-fg-mute);
  cursor: pointer;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), color var(--ds-dur-1) var(--ds-ease-out);
}
.ds-cmp-close:hover { border-color: var(--ds-fg-mute); color: var(--ds-ink); }
.ds-cmp-toggle:focus-visible ~ .ds-cmp-tray .ds-cmp-close {
  outline: 2px solid var(--ds-ink);
  outline-offset: 2px;
}

.ds-cmp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--ds-sp-12) var(--ds-sp-18);
  display: flex;
  flex-direction: column;
  gap: var(--ds-sp-8);
}

.ds-cmp-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  padding: var(--ds-sp-12) 0;
  border-bottom: 1px solid var(--ds-line-soft);
}
.ds-cmp-item:last-child { border-bottom: 0; }
.ds-cmp-item-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ds-cmp-item-name {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  text-decoration: none;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-cmp-item-name:hover { text-decoration: underline; text-decoration-color: var(--ds-line); }
.ds-cmp-item-kbo {
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}
.ds-cmp-remove {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  color: var(--ds-fg-mid);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), color var(--ds-dur-1) var(--ds-ease-out);
}
.ds-cmp-remove:hover { border-color: var(--ds-fg-mute); color: var(--ds-ink); }

.ds-cmp-foot {
  flex: 0 0 auto;
  padding: var(--ds-sp-14) var(--ds-sp-18);
  border-top: 1px solid var(--ds-line);
}
.ds-cmp-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  background: var(--ds-accent);
  color: var(--ds-inv);
  border-radius: var(--ds-r-md);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transition: background var(--ds-dur-1) var(--ds-ease-out);
}
.ds-cmp-all:hover { background: var(--ds-accent-deep); }

/* Respect reduced-motion: no slide transition, instant show/hide. */
@media (prefers-reduced-motion: reduce) {
  .ds-cmp-tray { transition: none; }
  .ds-cmp-fab { transition: none; }
}

/* On narrow screens drop the FAB text label to a compact circle. */
@media (max-width: 520px) {
  .ds-cmp-fab { padding: 0; width: 40px; justify-content: center; gap: 0; }
  .ds-cmp-fab-label { display: none; }
}