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

/* 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. */
/* ── ONE sticky bar on a phone, and it is this one ─────────────────
   Measured 2026-08-15 at a true 360x780: .ds-shell-nav (53px, top 0) and
   .dossier-nav (46px, top 52) both stayed pinned, so 99px, 12,7% of the
   viewport, was permanently spent on chrome while reading a page that is
   tens of screens long. Two is one too many, so on the dossier below the
   desktop breakpoint the SITE header scrolls away and the SECTION navigator
   takes top:0.

   Which one earns the pin is not a coin flip. On this page the reader's job
   is to read this dossier, and the only pinned control that serves it is the
   one that jumps between Financieel, Bestuurders and Publicaties. The brand,
   the site tabs and the account menu are one flick to the top away, and they
   are on every other page unchanged: the override is scoped to a document
   that actually contains a dossier layout, and to the width where the two
   bars stack (>= 1100px the navigator is a left rail, not a bar, so there is
   only ever one sticky bar there).

   js/dossier-nav.js reads the header's COMPUTED position before counting its
   height into the scroll offset, so anchor jumps stay correct here. */
@media (max-width: 1099px) {
  body:has(.dossier-layout) .ds-shell-nav { position: static; }
}

.dossier-nav {
  position: sticky;
  top: 0;
  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 {
  /* Mobile: only the pill bar is pinned now (the site header scrolls away, see
     the navigator block above), so the anchor only has to clear 46px + gap. */
  scroll-margin-top: 64px;
}
@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; }
}