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

: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", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ds-serif:  "Fraunces", "Iowan Old Style", Georgia, serif;
  --ds-mono:   "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ── type scale ───────────────────────────────── */
  --ds-fs-30: 30px;  --ds-fs-24: 24px;  --ds-fs-18: 18px;
  --ds-fs-14: 14px;  --ds-fs-13: 13px;  --ds-fs-12: 12px;
  --ds-fs-11: 11px;  --ds-fs-10: 10px;

  /* ── 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 ────────────────────────────────────── */
  --ds-r-sm: 4px;  --ds-r-md: 6px;  --ds-r-lg: 8px;  --ds-r-xl: 10px;

  /* ── 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:    12px;            /* legacy: app.css uses 12 here; M only goes to 10 */
  --r-full:  9999px;

  /* shadows — legacy, kept verbatim (minimal, tonal) */
  --shadow-1:    0 1px 2px rgba(19, 27, 46, 0.04);
  --shadow-2:    0 1px 3px rgba(19, 27, 46, 0.06), 0 1px 2px rgba(19, 27, 46, 0.04);
  --shadow-pop:  0 12px 32px -8px rgba(19, 27, 46, 0.12), 0 1px 2px rgba(19, 27, 46, 0.04);
}

/* ════════════════════════════════════════════════
   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: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ds-ink);
  margin: 0;
}
.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); }
}

/* ── DossierTabs (Dossier/DossierTabs.razor) ──────────────────────
   2026-06-10 IA redesign: a count-annotated NAVIGATOR you cannot miss.
   Two-line tabs (label + data sub-line), emerald active accent (3px
   underline + barely-there accent wash), muted zero-data tabs. White
   surface + hairlines only — light doctrine, no dark/gray fills. */
.ds-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: var(--ds-sp-4);
  background: var(--ds-surface);
  border-bottom: 2px solid var(--ds-line);
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 9px var(--ds-sp-14) 7px;
  margin-bottom: -2px; /* the active underline sits ON the strip's base line */
  font-family: var(--ds-sans);
  color: var(--ds-fg-mute);
  border-bottom: 3px solid transparent;
  border-radius: var(--ds-r-md) var(--ds-r-md) 0 0;
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background-color .12s;
}
.ds-tab-label {
  font-size: var(--ds-fs-13);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.ds-tab-sub {
  font-size: var(--ds-fs-11);
  font-weight: 500;
  color: var(--ds-fg-mute);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.ds-tab:hover { color: var(--ds-ink); background: var(--ds-accent-soft); }
.ds-tab-on {
  color: var(--ds-ink);
  border-bottom-color: var(--ds-accent);
  background: var(--ds-accent-soft);
}
.ds-tab-on .ds-tab-sub { color: var(--ds-accent); font-weight: 600; }
.ds-tab-mute .ds-tab-label { color: var(--ds-fg-dim); font-weight: 500; }
.ds-tab-mute .ds-tab-sub { color: var(--ds-fg-dim); }
.ds-tab-mute:hover .ds-tab-label { color: var(--ds-fg-mid); }

/* ── 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;
}
.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; }
.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: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.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: 22px;
  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: 40px;
  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);
}

/* ── 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: 26px;
  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: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 22px -16px rgba(16, 24, 40, 0.10);
}
.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: 22px;
  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);
}

/* ── Overview domain preview cards ("summary that routes") ──────
   2026-06-10 craft pass. Shared card anatomy:
     head   — eyebrow (8px domain dot + small-caps label) left,
              count/freshness pill right;
     body   — ONE hero metric (30px tabular-lining numerals) over its
              12px label, then 2-3 definition rows (label muted left,
              value strong right);
     footer — deep-link pinned to the card bottom (margin-top: auto)
              above a hairline, arrow nudges on hover.
   Domain accent = 3px left border + matching eyebrow dot (emerald =
   financieel, blue = mensen, amber = publicaties, violet = netwerk,
   deep emerald = vastgoed). Whole card is the link into its tab.
   Layout: 2×2 equal-height grid; Vastgoed is a full-width SLIM bar
   (.ds-ov-slim) so the 5th card never dangles. */
.ds-ov-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* rows size to content; cards within a row equalize via the grid's
     default stretch + each card's margin-top:auto footer. (auto-rows:1fr
     would force the slim Vastgoed bar to full card height.) */
  grid-auto-rows: auto;
  gap: var(--ds-sp-16);
}
@media (max-width: 860px) {
  .ds-ov-grid { grid-template-columns: 1fr; }
}
.ds-ov-card {
  display: flex;
  flex-direction: column;
  background: var(--ds-surface);
  border: 1px solid color-mix(in srgb, var(--ov-accent, var(--ds-line)) 22%, var(--ds-line));
  border-left: 3px solid var(--ov-accent, var(--ds-line));
  border-radius: var(--ds-r-xl);
  padding: var(--ds-sp-16) var(--ds-sp-18) var(--ds-sp-14);
  text-decoration: none;
  color: var(--ds-fg);
  /* The page canvas is doctrine-white, so the card carries its own depth:
     a contact line + a soft ambient drop (white-on-white otherwise). */
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 10px 28px -16px rgba(16, 24, 40, 0.14);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.ds-ov-card:hover {
  border-color: color-mix(in srgb, var(--ov-accent, var(--line-strong)) 45%, var(--ds-line));
  border-left-color: var(--ov-accent, var(--line-strong));
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 16px 36px -16px rgba(16, 24, 40, 0.22);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .ds-ov-card { transition: none; }
  .ds-ov-card:hover { transform: none; }
}
.ds-ov-fin { --ov-accent: var(--data-emerald); }
.ds-ov-ppl { --ov-accent: var(--data-blue); }
.ds-ov-pub { --ov-accent: var(--data-amber); }
.ds-ov-net { --ov-accent: var(--data-violet); }
.ds-ov-re  { --ov-accent: var(--ds-accent); }
/* head row — a full-bleed accent-tinted band (the card's identity), with
   the eyebrow left and the count/freshness pill right. The tint is the
   domain accent mixed near-out over white, so the LIGHT doctrine holds
   while the card stops reading as a bare white box. */
.ds-ov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  margin: calc(-1 * var(--ds-sp-16)) calc(-1 * var(--ds-sp-18)) var(--ds-sp-14);
  padding: 11px var(--ds-sp-18) 10px;
  background: color-mix(in srgb, var(--ov-accent, var(--ds-line)) 7%, #ffffff);
  border-bottom: 1px solid color-mix(in srgb, var(--ov-accent, var(--ds-line)) 16%, #ffffff);
  border-radius: calc(var(--ds-r-xl) - 2px) calc(var(--ds-r-xl) - 2px) 0 0;
  min-width: 0;
}
.ds-ov-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ov-accent, var(--ds-fg-mute)) 58%, var(--ds-ink));
  white-space: nowrap;
}
.ds-ov-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--ov-accent, var(--ds-fg-dim));
  flex: 0 0 auto;
}
.ds-ov-pill {
  flex: 0 0 auto;
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-11);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ov-accent, var(--ds-fg-mute)) 50%, var(--ds-ink));
  background: var(--ds-surface);
  border: 1px solid color-mix(in srgb, var(--ov-accent, var(--ds-line)) 28%, var(--ds-line));
  border-radius: 99px;
  padding: 2px 9px;
  line-height: 1.5;
  white-space: nowrap;
}
/* body — hero metric + definition rows */
.ds-ov-hero {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: var(--ds-sp-12);
}
.ds-ov-num {
  font-family: var(--ds-mono);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ds-ink);
  line-height: 1.05;
}
.ds-ov-numlabel {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.ds-ov-rows {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* No definition rows on this dossier (sparse data)? The Razor side tags
   the card ds-ov-norows (and skips the rows container) so the hero block
   breathes in the freed space instead of leaving an orphaned top-left
   cluster over a dead middle. (A :has(:has()) selector would be invalid
   CSS, hence the explicit class.) */
.ds-ov-norows .ds-ov-hero {
  flex: 1 1 auto;
  justify-content: center;
  margin-bottom: 0;
}
.ds-ov-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  padding: 6px 0;
  border-top: 1px solid var(--ds-line-soft);
  min-width: 0;
  line-height: 1.45;
}
.ds-ov-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--ds-ink-soft);
  font-weight: 600;
  white-space: nowrap;
}
.ds-ov-trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-ov-wrap { white-space: normal; }
.ds-ov-more {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  padding: 6px 0 0;
  border-top: 1px solid var(--ds-line-soft);
  margin-top: 0;
}
.ds-ov-empty {
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mute);
  line-height: 1.5;
  margin: 2px 0 var(--ds-sp-8);
  /* honest empty state: center it in the body so the card keeps its
     presence next to a populated neighbour */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}
/* footer — pinned deep-link above a hairline; arrow nudges on hover */
.ds-ov-link {
  margin-top: auto;
  padding-top: var(--ds-sp-12);
  border-top: 1px solid var(--ds-line-soft);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-8);
}
.ds-ov-arrow { transition: transform .14s ease; }
.ds-ov-card:hover .ds-ov-link { color: var(--ds-accent-deep); }
.ds-ov-card:hover .ds-ov-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .ds-ov-arrow { transition: none; }
  .ds-ov-card:hover .ds-ov-arrow { transform: none; }
}
/* Standalone deep-link variant (e.g. the timeline teaser's "Volledige
   tijdlijn →" anchor outside a preview card). */
a.ds-ov-link { text-decoration: none; border-top: 0; padding-top: 0; display: inline-flex; justify-content: flex-start; }
a.ds-ov-link:hover { color: var(--ds-accent-deep); text-decoration: underline; }
/* Vastgoed slim bar — one horizontal line: eyebrow · hero · area pill ·
   link right. Spans the full grid width so the 2×2 stays clean. */
.ds-ov-slim {
  grid-column: 1 / -1;
  grid-row: auto;          /* do NOT stretch to the 1fr card-row height */
  flex-direction: row;
  align-items: center;
  gap: var(--ds-sp-22);
  padding: var(--ds-sp-12) var(--ds-sp-18);
  min-height: 0;
}
.ds-ov-slim .ds-ov-head { margin-bottom: 0; flex: 0 0 auto; }
.ds-ov-slim .ds-ov-hero {
  flex-direction: row;
  align-items: baseline;
  gap: var(--ds-sp-8);
  margin-bottom: 0;
}
.ds-ov-slim .ds-ov-num { font-size: 22px; }
.ds-ov-slim .ds-ov-link {
  margin: 0 0 0 auto;
  padding-top: 0;
  border-top: 0;
  flex: 0 0 auto;
}
@media (max-width: 860px) {
  .ds-ov-slim { flex-wrap: wrap; gap: var(--ds-sp-12); }
}

/* ── 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 .12s;
}
.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 .12s ease, box-shadow .12s ease, background .12s ease;
}
.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: -8px 0 32px rgba(11, 16, 32, 0.18);
  transform: translateX(100%);
  transition: transform .22s ease;
}
.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 .12s ease, color .12s ease;
}
.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 .12s ease;
}
.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: 0 4px 14px rgba(11, 16, 32, 0.16);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ds-cmp-fab:hover {
  background: var(--ds-line-soft);
  box-shadow: 0 6px 20px rgba(11, 16, 32, 0.22);
}
/* 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: -8px 0 32px rgba(11, 16, 32, 0.18);
  transform: translateX(100%);
  transition: transform .22s ease;
}
.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 .12s ease, color .12s ease;
}
.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 .12s ease, color .12s ease;
}
.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 .12s ease;
}
.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; }
}