/* Palette definitions moved to tokens.css for single-source-of-truth + lint
     compliance. Forecast.html now consumes only via var(--*). */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink-1);
    font-size: var(--fs-body);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }
  /* Fluid container (C6) — clamp gives a fluid window from minimum laptop width up
     to desktop cap. Eliminates the legacy 1100→1400 dead zone by using a single
     clamp expression instead of fixed widths + media-query overrides.
     Floor: 960px (--container-min). Ceiling: 1440px (--container-max).
     Side gutters reserve --space-8 each side (64px total) before clamping. */
  .app {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6) var(--container-pad) var(--space-16);
  }
  /* On wide displays (≥ --bp-xl 1920px) we cap the content at --container-max
     so the dashboard doesn't sprawl across an ultrawide. */
  @media (min-width: 1920px) {
    .app { max-width: var(--container-max); }
  }

  :root {
    --head-h: 88px;
  }
  /* header */
  .head { padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
  .head.sticky {
    position: sticky; top: 0; z-index: var(--z-sticky);
    /* FULLY OPAQUE so table rows aren't visible through the header on scroll. The semi-
       transparent background + blur was bleeding the table content underneath. */
    background: var(--bg);
    margin: -28px -32px 24px;
    padding: 8px 32px;
    /* Subtle bottom shadow gives depth without transparency */
    box-shadow: 0 1px 0 var(--line), 0 4px 12px -8px rgba(26, 20, 36, 0.10);
  }
  body.theme--dark .head.sticky { background: var(--bg); }
  .head__top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--space-4);
  }
  .head__top .head__brand { grid-column: 1; min-width: 0; }
  .head__top .head__hero  { grid-column: 2; justify-self: center; align-self: center; min-width: 0; }
  .head__top .head__actions { grid-column: 3; justify-self: end; align-self: start; }
  /* Responsive header. The central KPI pill is the first to disappear when space tightens
     because brand+actions take priority. C6: was 1400; now hides at --bp-md (1280) so
     the dead zone (1100–1400 in the old config) is fully covered.
     Grid `1fr auto 1fr` makes left and right columns equal, so the auto middle column lands
     truly at page center regardless of brand vs. actions widths. */
  .head__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  }
  @media (max-width: 1280px) {
    .head__top .head__hero { display: none; }
  }
  @media (max-width: 800px) {
    .head__top { grid-template-columns: 1fr; }
    .head__top .head__brand { grid-column: 1; }
    .head__top .head__actions { grid-column: 1; justify-self: start; flex-wrap: wrap; }
    .head__row-2 { justify-content: flex-start; }
    .head__row-2-controls { justify-content: flex-start; }
  }
  /* Brand block — slightly compact again (was 18/30/13, now 16/26/12) so header stays thin. */
  /* .logo also matches h1.logo (A11Y-C1: brand title is now an <h1>).
     Margin reset + font sizing identical so semantic upgrade is visually invisible. */
  .logo, h1.logo { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.01em; flex-wrap: nowrap; white-space: nowrap; margin: 0; line-height: 1.3; }
  .logo__title, .logo__country { white-space: nowrap; }
  .logo__img { height: 26px; width: auto; display: block; flex-shrink: 0; }
  .logo__dot { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--lilac-400), var(--lilac-700)); display: inline-block; }
  .logo__name { color: var(--ink-1); }
  .logo__sep { color: var(--ink-3); font-weight: 400; opacity: 0.6; }
  .logo__title { color: var(--ink-1); font-weight: 600; letter-spacing: -0.01em; }
  .logo__country { color: var(--ink-2); font-weight: 500; display: inline-flex; align-items: center; gap: var(--space-1-5); }
  .logo__flag { /* TOKEN-EXCEPTION: 18px between body-lg(14) and h2(20) */ font-size: 18px; line-height: 1; }
  /* Sub-line — wraps onto 2 rows naturally, tight line-height (1.2) so the rows feel
     close together. More margin-top (10px) so the title visually breathes. */
  .head__sub {
    color: var(--ink-3); font-size: var(--fs-body-sm); margin-top: 10px;
    display: flex; gap: var(--space-1-5) 8px; align-items: center; flex-wrap: wrap;
    line-height: 1.2;
  }
  .head__sub > * { white-space: nowrap; flex-shrink: 0; }
  .today-date { font-family: "Geist Mono", monospace; color: var(--ink-2); font-weight: 500; font-size: var(--fs-body); }

  /* Sticky header stat — appears when user scrolls past the KPI grid. Card-style: bigger,
     KPI-like, with clear value and supporting info. Hidden by default. */
  .head__hero {
    display: inline-flex; flex-direction: column; gap: var(--space-0-5);
    padding: 6px 12px;
    background: var(--surface);
    border: 1px solid var(--lilac-400); border-left: 4px solid var(--lilac-700);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px -4px rgba(26,20,36,0.08);
    transition: opacity .25s, transform .25s;
    max-width: 100%; min-width: 0;
  }
  .head__hero-top, .head__hero-bottom {
    display: flex; align-items: baseline; gap: var(--space-2);
    white-space: nowrap;
  }
  .head__hero-bottom { gap: var(--space-1-5); }
  .head__hero--hidden { opacity: 0; transform: translateY(-4px); pointer-events: none; max-height: 0; padding: 0; border-color: transparent; overflow: hidden; box-shadow: none; }
  .head__hero--visible { opacity: 1; transform: translateY(0); }
  .head__hero-stat-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-body-xs); color: var(--ink-3); font-weight: 700; }
  .head__hero-stat-value { font-family: "Geist Mono", monospace; /* TOKEN-EXCEPTION: 26px KPI hero, just below display(28) */ font-size: 26px; font-weight: 700; color: var(--lilac-700); letter-spacing: -0.02em; line-height: 1.05; }
  .head__hero-stat-sub { font-size: var(--fs-body); color: var(--ink-2); font-family: "Geist Mono", monospace; font-weight: 500; }
  /* Legacy single-value hero (kept in case used elsewhere) */
  .head__hero-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-caption); color: var(--ink-3); font-weight: 600; }
  .head__hero-value { font-family: "Geist Mono", monospace; /* TOKEN-EXCEPTION: 26px KPI hero, just below display(28) */ font-size: 26px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.02em; }
  .status-pill { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); font-size: var(--fs-body-xs); font-weight: 600; font-family: "Geist Mono", monospace; }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; }
  .status-pill--on { background: rgba(46, 154, 100, 0.10); color: var(--good); }
  .status-pill--on .status-dot { background: var(--good); box-shadow: 0 0 0 3px rgba(46,154,100,0.2); }
  .status-pill--ahead { background: rgba(110, 72, 224, 0.10); color: var(--lilac-700); }
  .status-pill--ahead .status-dot { background: var(--lilac-700); box-shadow: 0 0 0 3px rgba(110,72,224,0.2); }
  .status-pill--behind { background: rgba(196, 82, 63, 0.10); color: var(--warn); }
  .status-pill--behind .status-dot { background: var(--warn); box-shadow: 0 0 0 3px rgba(196,82,63,0.2); animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.45 } }

  /* head__lang DELETED — migrated to <Segmented> primitive (B1). */
  /* All action buttons (timeframe + refresh + edit + export + reset + lang) right-aligned. */
  .head__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
  /* .timeframe / .tf-btn / .tf-item / .tf-chev DELETED — migrated to <Segmented>
     primitive with expandable/renderDropdown (B1 complete). The dropdown
     content classes (.tf-menu__item, .tf-menu__pill, .tf-menu__row,
     .tf-menu__close) remain — they style the panel content rendered inside
     <Segmented>'s renderDropdown callback. Future cleanup will rename them. */
  .tf-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: 0 12px 32px -8px rgba(26,20,36,0.18); padding: var(--space-1-5); z-index: var(--z-dropdown); display: flex; flex-direction: column; gap: var(--space-px); }
  .tf-menu__item { background: transparent; border: 0; text-align: left; padding: 7px 10px; font-family: inherit; font-size: var(--fs-body-sm); color: var(--ink-1); cursor: pointer; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: 500; }
  .tf-menu__item:hover { background: var(--bg-2); }
  .tf-menu__item.on { background: var(--lilac-200); color: var(--lilac-700); font-weight: 600; }
  .tf-menu__pill { /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; font-weight: 700; background: var(--lilac-700); color: white; padding: 2px 6px; border-radius: var(--radius-sm); letter-spacing: 0.04em; text-transform: uppercase; }
  .tf-menu--custom { padding: var(--space-3); gap: var(--space-2); min-width: 220px; }
  .tf-menu__row { display: flex; align-items: center; gap: var(--space-2); }
  .tf-menu__row label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; flex: 0 0 32px; }
  .tf-menu__row select { flex: 1; font-family: inherit; font-size: var(--fs-body-sm); padding: 5px 8px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-1); cursor: pointer; }
  .tf-menu__close { margin-top: 2px; background: var(--lilac-700); color: white; border: 0; border-radius: var(--radius-md); padding: var(--space-1-5); font-family: inherit; font-size: var(--fs-body-xs); font-weight: 600; cursor: pointer; }
  .tf-menu__close:hover { background: var(--lilac-600); }
  /* ─── <Button> primitive (Phase B3) ────────────────────────────────────────
     Single button system. Replaces .btn-ghost / .btn-bell / .btn-settings /
     .btn-refresh / .btn-edit-toggle / .btn-theme / .btn-mini / .btn-toggle /
     .btn-reset-mini / .btn-page / .btn-sound / .btn-danger and their modifiers.
     Composition: .btn + .btn--<variant> + .btn--<size> [+ .btn--icon | .btn--active | .btn--tone-*]
     Spec: docs/PRIMITIVES.md
     ───────────────────────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-1);
    font-family: inherit;
    font-weight: var(--fw-semibold);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard);
    user-select: none;
    white-space: nowrap;
  }
  .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
  .btn:active:not(:disabled) { transform: translateY(1px); }
  /* Sizes */
  .btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--fs-body-xs); }
  .btn--md { height: 36px; padding: 0 var(--space-4); font-size: var(--fs-body); }
  .btn--lg { height: 44px; padding: 0 var(--space-5); font-size: var(--fs-body-lg); }
  /* Icon-only — square aspect ratio */
  .btn--icon.btn--sm { width: 28px; padding: 0; }
  .btn--icon.btn--md { width: 36px; padding: 0; }
  .btn--icon.btn--lg { width: 44px; padding: 0; }
  /* Variants */
  .btn--primary {
    background: var(--accent); color: var(--text-on-accent); border-color: var(--accent);
  }
  .btn--primary:hover:not(:disabled) { background: var(--lilac-800, var(--lilac-700)); border-color: var(--lilac-800, var(--lilac-700)); }
  .btn--secondary {
    background: var(--surface); color: var(--text-primary); border-color: var(--border);
  }
  .btn--secondary:hover:not(:disabled) { background: var(--bg-elevated); border-color: var(--border-strong); }
  .btn--ghost {
    background: transparent; color: var(--text-secondary); border-color: var(--border-strong);
  }
  .btn--ghost:hover:not(:disabled) {
    background: var(--bg-elevated); border-color: var(--ink-2); color: var(--text-primary);
  }
  .btn--danger {
    background: var(--danger); color: var(--text-on-warn); border-color: var(--danger);
  }
  .btn--danger:hover:not(:disabled) { background: var(--warn-700); border-color: var(--warn-700); }
  /* Active state — toggle buttons (theme, edit-mode) */
  .btn--active.btn--ghost {
    background: var(--accent-bg); border-color: var(--accent-soft); color: var(--accent);
  }
  /* Tone overrides */
  .btn--tone-warn {
    background: rgba(196, 82, 63, 0.06); border-color: var(--warn); color: var(--warn);
  }
  .btn--tone-warn:hover:not(:disabled) {
    background: rgba(196, 82, 63, 0.12); border-color: var(--warn); color: var(--warn);
  }
  .btn--tone-success {
    background: rgba(46, 154, 100, 0.08); border-color: var(--good); color: var(--good);
  }
  .btn--tone-success:hover:not(:disabled) {
    background: rgba(46, 154, 100, 0.14); border-color: var(--good); color: var(--good);
  }
  /* Loading state */
  .btn--loading { cursor: wait; opacity: 0.85; }

  /* Settings dropdown */
  .settings-wrap { position: relative; display: inline-block; }
  .settings-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); }
  .settings-menu {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 220px; background: var(--surface);
    border: 1px solid var(--line-2); border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px -8px rgba(26,20,36,0.18);
    padding: var(--space-1-5); z-index: var(--z-popover);
    display: flex; flex-direction: column; gap: var(--space-px);
    animation: settings-fade .12s ease-out;
  }
  @keyframes settings-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  .settings-menu__item {
    display: flex; align-items: center; gap: var(--space-3);
    background: transparent; border: 0; text-align: left;
    padding: 9px 12px; font-family: inherit; font-size: var(--fs-body); color: var(--ink-1);
    cursor: pointer; border-radius: var(--radius-md); font-weight: 500;
  }
  .settings-menu__item:hover { background: var(--bg-2); }
  .settings-menu__item span { width: 16px; text-align: center; opacity: 0.7; }
  .settings-menu__item--danger { color: var(--warn); }
  .settings-menu__item--danger:hover { background: rgba(196, 82, 63, 0.08); }
  .settings-menu__sep { height: 1px; background: var(--line); margin: 4px 0; }

  /* Scenari group — emoji segmented control with "seleziona scenario" caption underneath. */
  .head__scenari {
    display: inline-flex; flex-direction: column;
    align-items: center; gap: var(--space-0-5);
  }
  .head__scenari-label {
    font-size: var(--fs-caption); font-weight: 500; color: var(--ink-3);
    text-transform: lowercase; letter-spacing: 0.02em;
    font-style: italic; line-height: 1;
  }

  /* Theme switch — sun/moon slider toggle. Uses inline SVG glyphs that inherit currentColor
     so contrast is reliable in both themes (sun visible on light, moon visible on dark). */
  .theme-switch {
    position: relative; display: inline-flex; align-items: center;
    width: 52px; height: 26px;
    background: var(--bg-2); border: 1px solid var(--line-2);
    border-radius: var(--radius-pill); cursor: pointer; padding: 0; overflow: hidden;
    transition: background .2s, border-color .2s;
  }
  .theme-switch__sun, .theme-switch__moon {
    position: absolute; top: 50%; transform: translateY(-50%);
    line-height: 0; user-select: none;
    transition: opacity .2s, color .2s;
    pointer-events: none;
  }
  .theme-switch__sun { left: 6px; color: var(--ink-2); opacity: 1; }
  .theme-switch__moon { right: 6px; color: var(--ink-3); opacity: 0.5; }
  .theme-switch__handle {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform .22s ease;
  }
  .theme-switch--on { background: var(--lilac-700); border-color: var(--lilac-700); }
  .theme-switch--on .theme-switch__handle { transform: translateX(26px); background: var(--bg); }
  .theme-switch--on .theme-switch__sun  { color: rgba(255,255,255,0.5); opacity: 0.6; }
  .theme-switch--on .theme-switch__moon { color: white; opacity: 1; }

  /* Row 2 — display controls (MRR/ARR, Scenari, Timeframe) right-aligned only.
     KPI moved up to row-1 center, so this row stays thin. */
  .head__row-2 {
    display: flex; justify-content: flex-end;
    /* Tiny breathing room between the row-1 actions (Refresh/Bell/etc) and this row of
       MRR/ARR/Scenari/Timeframe. Was -16px (cramped, near-overlap), now -10px (still
       compact but with a hint of separation between the two action rows). */
    margin-top: -10px;
  }
  .head__row-2-controls {
    display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* All button groups in row-2 share a compact 30px height — same vibe as the
     original sizing, but enforced consistently so MRR/ARR + scenari + timeframe
     align. Caption ("seleziona scenario") sits OUTSIDE this row so it doesn't
     push button heights.
     POST-B1: targets the new <Segmented> primitive (.segmented). The legacy
     .seg-toggle shim still works through the same selectors. */
  .head__row-2-controls > .segmented,
  .head__row-2-controls > .seg-toggle,
  .head__row-2-controls > .head__scenari > .segmented,
  .head__row-2-controls > .head__scenari > .seg-toggle {
    height: 30px; box-sizing: border-box;
    display: inline-flex; align-items: stretch;
  }
  .head__row-2-controls .segmented__item-wrap { display: inline-flex; align-items: stretch; }
  /* Items fill the outer 30px height so all row-2 controls align vertically as
     one unified row. Internal padding/font-size from .segmented--sm / --md
     determine the *visual* density (sm tighter, md chunkier) — the height is
     uniform regardless. This is the only legitimate row-2-scope override:
     vertical alignment is a layout concern, not a size concern. */
  .head__row-2-controls .segmented__item,
  .head__row-2-controls .seg-toggle__btn {
    height: 100%;
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  /* Equal-width items across the 5 timeframe options (Mese / Trim. / YTD / FY / Custom) */
  .head__row-2-controls > [aria-label="Periodo"] .segmented__item,
  .head__row-2-controls > [aria-label="Timeframe"] .segmented__item { min-width: 64px; }
  .head__row-2 .head__hero {
    grid-column: 2;
    justify-self: center;
    padding: 10px 18px; align-items: center; gap: var(--space-4);
  }
  .head__row-2 .head__hero-stat-label { font-size: var(--fs-body-sm); }
  .head__row-2 .head__hero-stat-value { font-size: var(--fs-display); }
  .head__row-2 .head__hero-stat-sub { font-size: var(--fs-body-lg); }

  /* View toggle (Tabella / Contratti) — more prominent than seg-toggle--sm so it stands out
     from the dense row of secondary controls in the table section header. */
  /* .view-toggle DELETED — migrated to <Segmented> primitive (B1).
     The deals-view List/Card switcher now uses the same Segmented as everything
     else. Net CSS removed: ~14 lines (here) + behavioural duplication eliminated. */

  /* === Notification bell === */
  .bell-wrap { position: relative; display: inline-block; }
  /* .btn-bell rule deleted — replaced by .btn--icon.btn--md primitive (B3).
     .btn-bell--has-unread is still used as a className modifier on the button
     to trigger the shake animation. */
  .btn-bell--has-unread { animation: bell-shake .8s ease-in-out 1; position: relative; }
  @keyframes bell-shake { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-8deg); } 40%, 80% { transform: rotate(8deg); } }
  .bell-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--warn); color: white;
    /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; font-weight: 700;
    border-radius: var(--radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: "Geist Mono", monospace;
  }
  .bell-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); }
  .bell-panel {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 360px; max-width: 95vw; max-height: 480px;
    background: var(--surface); border: 1px solid var(--line-2);
    border-radius: var(--radius-lg); box-shadow: 0 12px 32px -8px rgba(26,20,36,0.18);
    z-index: var(--z-popover); display: flex; flex-direction: column;
    animation: settings-fade .12s ease-out;
  }
  .bell-panel__head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 12px 14px; border-bottom: 1px solid var(--line);
  }
  .bell-panel__title { font-weight: 700; font-size: var(--fs-body); color: var(--ink-1); }
  .bell-panel__sub { font-size: var(--fs-body-xs); color: var(--ink-3); font-family: "Geist Mono", monospace; }
  .bell-panel__body { overflow-y: auto; max-height: 420px; padding: 4px 0; }
  .bell-empty { padding: var(--space-6); text-align: center; color: var(--ink-3); font-style: italic; font-size: var(--fs-body-sm); }
  .bell-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 10px 14px; text-decoration: none; color: inherit;
    border-bottom: 1px solid var(--line);
    transition: background .1s;
    cursor: pointer;
  }
  .bell-item:hover { background: var(--bg-2); }
  /* Unread = lilac wash + colored left edge so the difference is obvious. Read items are flat. */
  .bell-item--unread {
    background: rgba(110, 72, 224, 0.10);
    border-left: 3px solid var(--lilac-700);
    padding-left: 11px; /* compensate for the 3px border so content doesn't shift */
  }
  .bell-item--unread:hover { background: rgba(110, 72, 224, 0.14); }
  .bell-panel__mark-all {
    background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    padding: 3px 8px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2);
    font-family: inherit; cursor: pointer; transition: all .12s;
  }
  .bell-panel__mark-all:hover { color: var(--lilac-700); border-color: var(--lilac-700); }
  .bell-item__icon {
    width: 28px; height: 28px; border-radius: var(--radius-md); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-body-lg); font-weight: 700;
  }
  .bell-item__icon--won { background: rgba(46,154,100,0.15); color: var(--good); }
  .bell-item__icon--lost { background: rgba(196,82,63,0.15); color: var(--warn); }
  .bell-item__body { flex: 1; min-width: 0; }
  .bell-item__title { display: flex; align-items: center; gap: var(--space-1-5); }
  .bell-item__name {
    font-weight: 600; font-size: var(--fs-body); color: var(--ink-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 180px;
  }
  .bell-item__new-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lilac-700); flex-shrink: 0;
  }
  .bell-item__meta { font-size: var(--fs-body-xs); color: var(--ink-3); margin-top: 2px; font-family: "Geist Mono", monospace; }
  .bell-item__channel { font-weight: 600; }
  .bell-item__amount {
    font-family: "Geist Mono", monospace; font-weight: 700; font-size: var(--fs-body);
    color: var(--good); flex-shrink: 0;
  }
  .bell-item__amount--lost { color: var(--warn); }
  body.theme--dark .bell-panel { background: var(--surface); }
  body.theme--dark .bell-item--unread { background: rgba(155,123,255,0.16); border-left-color: var(--lilac-500); }
  body.theme--dark .bell-item--unread:hover { background: rgba(155,123,255,0.22); }
  body.theme--dark .bell-item:hover { background: rgba(155,123,255,0.06); }

  /* === Contratti list view (DealsView) === */
  .deals-view { display: flex; flex-direction: column; gap: var(--space-4); padding: 8px 0; }
  .deals-empty { padding: var(--space-8); text-align: center; color: var(--ink-3); font-style: italic; }

  /* Channel tabs row — left: tabs · right: inline minimal summary.
     Replaces the old summary-bar that was visually too heavy. */
  .deals-tabs-row {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    justify-content: space-between;
  }
  /* Inline summary — vertical dividers between items + bigger gap so each metric reads
     as a clear unit instead of a run-on sentence. */
  .deals-summary-inline {
    display: inline-flex; align-items: baseline; gap: 0; flex-wrap: wrap;
    font-family: "Geist Mono", monospace; font-size: var(--fs-body); color: var(--ink-2);
  }
  .deals-summary-inline__item {
    white-space: nowrap;
    padding: 0 14px;
    border-left: 1px solid var(--line-2);
  }
  .deals-summary-inline__item:first-child { padding-left: 0; border-left: 0; }
  .deals-summary-inline__item b { color: var(--ink-1); font-weight: 700; }
  .deals-summary-inline__hint {
    font-size: var(--fs-caption); color: var(--ink-3); text-transform: uppercase;
    letter-spacing: 0.04em; font-weight: 600; margin-left: 4px;
  }
  .deals-summary-inline__item--won { color: var(--good); }
  .deals-summary-inline__item--lost { color: var(--warn); }
  .deals-summary-inline__item--net b { color: var(--lilac-700); }
  .deals-summary-inline__item--setup { color: var(--ae-500); }
  .deals-summary-inline__item--committed { color: var(--proj); }

  .deals-toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
  .deals-toolbar__group { display: inline-flex; align-items: center; }
  .deals-filters__label { font-size: var(--fs-body-xs); color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

  /* Filter row 1: LEFT = Search + Owner + Stage multi-select; RIGHT = Lista/Card + Timeframe.
     Below this row the channel tabs + inline summary occupy their own row. */
  .deals-filter-row {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    justify-content: space-between;
  }
  .deals-filter-row__left { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; flex: 1 1 auto; }
  .deals-filter-row__right { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
  .deals-filter-row__left .deals-search { flex: 0 1 220px; min-width: 180px; }
  /* Uniform button sizing inside the Contratti section — Lista/Card toggle + Timeframe buttons
     are sized exactly like the channel tabs below (padding 6×12, font 12, radius 8). */
  .deals-filter-row__right .view-toggle__btn { padding: 6px 12px; font-size: var(--fs-body-sm); gap: var(--space-1-5); }
  .deals-filter-row__right .segmented { border-radius: var(--radius-md); }
  /* Sizing comes from .segmented--sm / --md base classes — no per-scope override
     so the deals view-toggle visually matches the header lang/MRR-ARR/scenario
     controls (all "sm") and the timeframe matches the header timeframe (both "md"). */

  /* Multi-select dropdown — compact button that opens a panel of checkboxes.
     Sizing matches .btn--sm + .segmented--sm so it visually slots in next to
     other "sm" controls in filter rows (header row-2, deals filter row, KPI
     tile head). 28px height, 11px font, .btn-style border + radius. */
  .multiselect { position: relative; display: inline-block; }
  .multiselect__btn {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    height: 28px;
    padding: 0 var(--space-3); min-width: 140px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--fs-body-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
  }
  .multiselect__btn:hover { background: var(--bg-elevated); border-color: var(--ink-2); color: var(--text-primary); }
  .multiselect__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  .multiselect__btn.on { background: var(--accent-bg); border-color: var(--accent-soft); color: var(--accent); }
  .multiselect__chev { /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; opacity: 0.7; margin-left: auto; }
  .multiselect__backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); }
  .multiselect__panel {
    position: absolute; top: calc(100% + 4px); left: 0;
    min-width: 240px; max-height: 320px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-md);
    box-shadow: 0 12px 32px -8px rgba(26,20,36,0.18);
    z-index: var(--z-popover); padding: var(--space-1);
    display: flex; flex-direction: column;
    animation: settings-fade .12s ease-out;
  }
  .multiselect__list { overflow-y: auto; max-height: 240px; display: flex; flex-direction: column; }
  .multiselect__item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 7px 10px; font-size: var(--fs-body-sm); color: var(--ink-1);
    cursor: pointer; border-radius: var(--radius-sm); background: transparent; border: 0;
    text-align: left; font-family: inherit; width: 100%;
  }
  .multiselect__item:hover { background: var(--bg-2); }
  .multiselect__item input[type="checkbox"] { cursor: pointer; }
  .multiselect__item--reset, .multiselect__item--preset {
    font-weight: 600; color: var(--lilac-700);
  }
  .multiselect__item--reset.on { background: rgba(110, 72, 224, 0.08); }
  .multiselect__check { display: inline-block; width: 16px; text-align: center; color: var(--lilac-700); font-weight: 700; }
  .multiselect__sep { height: 1px; background: var(--line); margin: 3px 0; }
  body.theme--dark .multiselect__btn { background: var(--surface); }
  body.theme--dark .multiselect__panel { background: var(--surface); }
  body.theme--dark .multiselect__item:hover { background: rgba(155,123,255,0.06); }
  /* Deals filter chips — visually aligned with .btn--sm (28h / 11px font) so they
     sit consistently next to the segmented + multiselect controls in the same row.
     Channel chips KEEP their per-item background-color when active (the whole point
     of the chip — channel-color is the visual signal). The "all" chip uses dashed
     border to read as a master toggle. */
  .deals-tabs { display: flex; gap: var(--space-1-5); flex-wrap: wrap; }
  .deals-tab {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 28px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    font-size: var(--fs-body-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    font-family: inherit;
    transition: all var(--duration-fast) var(--ease-standard);
  }
  .deals-tab:hover { background: var(--bg-elevated); }
  .deals-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  .deals-tab.on { color: white; }
  /* "Tutti / All" master toggle — same height as channel chips, dashed border to
     distinguish role. */
  .deals-tab--all {
    border: 2px dashed var(--text-muted);
    font-weight: var(--fw-bold);
    padding: 0 var(--space-4);
  }
  .deals-tab--all:hover { border-color: var(--accent); color: var(--accent); }
  .deals-tab--all.on {
    background: var(--ink-1) !important; color: white !important;
    border-color: var(--ink-1); border-style: solid;
  }
  body.theme--dark .deals-tab--all.on { background: var(--lilac-700) !important; border-color: var(--lilac-700); }
  .deals-tab__count { font-family: "Geist Mono", monospace; font-size: var(--fs-body-xs); opacity: 0.85; }
  .deals-filters { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; padding: 4px 0; }
  /* Deals search + filter inputs — sized to match .btn--sm and .multiselect__btn
     (28h / 11px font / 12px horizontal padding) so the filter row reads as a
     coherent set of "sm controls". */
  .deals-filter, .deals-search {
    height: 28px;
    padding: 0 var(--space-3);
    font-family: inherit;
    font-size: var(--fs-body-xs);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    cursor: pointer;
  }
  .deals-search:focus-visible, .deals-filter:focus-visible {
    outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus);
  }
  .deals-search { cursor: text; min-width: 240px; flex: 1 1 240px; max-width: 380px; }
  .deals-summary { font-size: var(--fs-body-sm); color: var(--ink-3); margin-left: auto; font-family: "Geist Mono", monospace; }
  .deals-summary b { color: var(--ink-1); font-weight: 700; }
  /* Main contracts list: scrolls vertically (max-height ~520px ≈ 12 rows) instead of paginating.
     Sticky thead so column headers stay visible during scroll. */
  .deals-table-wrap {
    overflow-x: auto; overflow-y: auto;
    max-height: 540px;
    border-radius: var(--radius-md); border: 1px solid var(--line);
  }
  .deals-table thead th {
    position: sticky; top: 0; z-index: var(--z-base); /* TOKEN-EXCEPTION: sticky thead must stay BELOW the page sticky header (--z-sticky) so the header overlays it on scroll */
  }
  .deals-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); table-layout: fixed; }
  /* Explicit column widths so the main table and the churn table line up perfectly.
     10 columns: Date, Customer, Channel, Owner, Country, Amount, Stage, Last contact, Next task, HubSpot. */
  .deals-table col.col-date     { width: 8%; }
  .deals-table col.col-customer { width: 22%; }
  .deals-table col.col-channel  { width: 8%; }
  .deals-table col.col-owner    { width: 12%; }
  .deals-table col.col-country  { width: 7%; }
  .deals-table col.col-amount   { width: 8%; }
  .deals-table col.col-stage    { width: 11%; }
  .deals-table col.col-last     { width: 9%; }
  .deals-table col.col-cycle    { width: 7%; }
  .deals-table col.col-nexttask { width: 7%; }
  .deals-table col.col-hs       { width: 6%; }
  /* Cells stay overflow:visible so absolute-positioned tooltips inside chips can escape
     the cell box. Inner elements (deals-name__main) handle text truncation themselves. */
  .deals-table td { overflow: visible; }
  .deals-table td .deals-name__main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .deals-table thead th {
    text-align: left; padding: 10px 12px; background: var(--bg-2);
    color: var(--ink-2); font-weight: 600; font-size: var(--fs-body-xs);
    text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line);
  }
  .deals-table .num { text-align: right; }
  .deals-th--sortable { cursor: pointer; user-select: none; }
  .deals-th--sortable:hover { color: var(--lilac-700); }
  .deals-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .deals-row { cursor: pointer; transition: background .1s; }
  .deals-row:hover { background: var(--bg-2); }
  .deals-row--lost { color: var(--warn); }
  .deals-row--lost .deals-name__main { font-style: italic; }
  .deals-name__main { font-weight: 600; color: var(--ink-1); }
  .deals-name__sub { font-size: var(--fs-body-xs); color: var(--ink-3); margin-top: 2px; }
  .deals-row--lost .deals-name__main { color: var(--warn); }
  .deals-channel {
    display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
    font-size: var(--fs-body-xs); font-weight: 600; border: 1px solid currentColor;
    background: rgba(255,255,255,0.4);
  }
  .deals-amt--lost { color: var(--warn); font-weight: 700; }
  .deals-stage { font-family: "Geist Mono", monospace; font-size: var(--fs-body-xs); color: var(--ink-2); }
  .deals-empty-row { text-align: center; padding: 24px !important; color: var(--ink-3); font-style: italic; }
  /* Churn block — separate red section below the main table. Independent scroll, max-height
     so it doesn't dominate the page. Header shows count + total to make impact obvious. */
  .deals-churn-block {
    margin-top: 0; border-top: 2px solid var(--warn);
    background: rgba(196, 82, 63, 0.05);
  }
  .deals-churn-block__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    padding: 10px 14px; background: rgba(196, 82, 63, 0.1);
    color: var(--warn); font-weight: 700; font-size: var(--fs-body-sm);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .deals-churn-block__count {
    margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-pill);
    background: rgba(196, 82, 63, 0.15); color: var(--warn);
    font-family: "Geist Mono", monospace; font-size: var(--fs-body-xs);
  }
  .deals-churn-block__total { font-family: "Geist Mono", monospace; font-size: var(--fs-body); }
  /* Compact height — about 5 rows visible, rest scrolls. Each row ~36px → 5×36 + buffer. */
  .deals-churn-block__scroll { max-height: 190px; overflow-y: auto; }
  .deals-table--churn thead { display: none; }
  .deals-table--churn tbody td { border-bottom-color: rgba(196, 82, 63, 0.15); }
  .deals-churn-block__scroll::-webkit-scrollbar { width: 6px; }
  .deals-churn-block__scroll::-webkit-scrollbar-thumb { background: rgba(196, 82, 63, 0.3); border-radius: var(--radius-sm); }
  body.theme--dark .deals-churn-block { background: rgba(196, 82, 63, 0.08); }
  body.theme--dark .deals-churn-block__head { background: rgba(196, 82, 63, 0.16); }
  /* HubSpot link icon — small, opens deal in new tab without triggering row click.
     Outline reflects deal urgency (same rules as the card view's fcard__hslink):
       neutral  → lilac (closed lost / no urgency state)
       fresh    → green (recently closed-won / next-task fresh)
       warn     → amber (>4 weeks since CW / task due soon)
       danger   → red   (>8 weeks since CW / task overdue)
     Keeps List + Card views visually consistent. */
  .deals-hslink {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    color: var(--lilac-700); font-weight: 700; text-decoration: none;
    border: 1px solid var(--line-2); transition: all .12s;
  }
  .deals-hslink:hover { background: var(--lilac-700); color: white; border-color: var(--lilac-700); }
  .deals-hslink--neutral { color: var(--lilac-700); border-color: var(--line-2); }
  .deals-hslink--fresh    { color: var(--good); border-color: rgba(46, 154, 100, 0.4); }
  .deals-hslink--fresh:hover    { background: var(--good); color: white; border-color: var(--good); }
  .deals-hslink--warn-soft, .deals-hslink--warn { color: var(--ae-600); border-color: rgba(217, 137, 42, 0.5); }
  .deals-hslink--warn-soft:hover, .deals-hslink--warn:hover {
    background: var(--ae-500); color: white; border-color: var(--ae-500);
  }
  .deals-hslink--danger { color: var(--warn); border-color: rgba(196, 82, 63, 0.5); }
  .deals-hslink--danger:hover { background: var(--warn); color: white; border-color: var(--warn); }
  .deals-owner { color: var(--ink-2); font-weight: 500; }
  .deals-country { color: var(--ink-2); font-size: var(--fs-body-sm); }
  .deals-rel { color: var(--ink-2); font-size: var(--fs-body-sm); font-family: "Geist Mono", monospace; }
  /* Billing cadence badge — small "MRR" / "ARR" / "QRR" pill next to deal amounts. */
  .deals-amount-cell { display: inline-flex; align-items: center; gap: var(--space-1-5); justify-content: flex-end; }
  .deals-amount-val { font-family: "Geist Mono", monospace; }
  .billing-badge {
    display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm);
    font-family: "Geist Mono", monospace; /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    line-height: 1.2;
    margin-left: 6px;
  }
  .billing-badge--mrr { background: rgba(110, 72, 224, 0.10); color: var(--lilac-700); }
  .billing-badge--arr { background: rgba(46, 154, 100, 0.14); color: var(--good); }
  .billing-badge--qrr { background: rgba(217, 137, 42, 0.14); color: var(--ae-600); }
  body.theme--dark .billing-badge--mrr { background: rgba(155, 123, 255, 0.18); color: var(--lilac-300); }
  body.theme--dark .billing-badge--arr { background: rgba(46, 154, 100, 0.20); }

  /* Sound mute button in header — between Theme switch and Settings ⚙. */
  /* .btn-sound rules deleted — primitive .btn--icon.btn--md handles base styling.
     The mute-state opacity is now applied via .btn--muted shim below. */
  .btn--muted { color: var(--ink-3); opacity: 0.7; }

  /* Sound picker modal — radio list with Preview button per row. */
  .sound-picker-modal { width: 480px; max-width: 95vw; }
  .sound-picker {
    display: flex; flex-direction: column; gap: var(--space-1-5);
    margin: 14px 0 16px;
  }
  .sound-picker__item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer; transition: all .12s;
  }
  .sound-picker__item:hover { border-color: var(--lilac-400); }
  .sound-picker__item--on { border-color: var(--lilac-700); background: rgba(110,72,224,0.06); }
  .sound-picker__info { flex: 1; display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
  .sound-picker__label { font-weight: 600; font-size: var(--fs-body); color: var(--ink-1); }
  .sound-picker__desc { font-size: var(--fs-body-xs); color: var(--ink-3); }
  body.theme--dark .sound-picker__item { background: var(--surface); }
  body.theme--dark .sound-picker__item--on { background: rgba(155,123,255,0.12); }
  /* Mic recorder row — extra action buttons (Rec/Stop/Preview/Delete) */
  .sound-picker__rec-actions { display: inline-flex; gap: var(--space-1); align-items: center; flex-shrink: 0; }
  .sound-picker__err { color: var(--warn); font-style: italic; }
  /* sound-picker rec danger button styling now via <Button variant="danger" size="sm">. */
  /* Duration controls — segmented buttons */
  .sound-duration {
    display: flex; align-items: center; gap: var(--space-1-5);
    padding: 8px 12px; margin-bottom: 12px;
    background: var(--bg-2); border-radius: var(--radius-md);
  }
  .sound-duration__lbl {
    font-size: var(--fs-body-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ink-3); margin-right: 4px;
  }
  .sound-duration__btn {
    padding: 4px 10px; font-size: var(--fs-body-xs); font-weight: 600;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
    color: var(--ink-2); cursor: pointer; font-family: inherit;
    transition: all .12s;
  }
  .sound-duration__btn:hover { color: var(--ink-1); border-color: var(--ink-3); }
  .sound-duration__btn.on { background: var(--lilac-700); color: white; border-color: var(--lilac-700); }
  body.theme--dark .sound-duration { background: var(--bg-2); }
  body.theme--dark .sound-duration__btn { background: var(--surface); }

  /* Cycle / next-task chip — colored by severity tone. Day-into-cycle gradient + contact
     health combined into one tone class. Highest urgency = danger (red). */
  .deals-cycle {
    display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
    font-family: "Geist Mono", monospace; font-size: var(--fs-body-xs); font-weight: 700;
    background: var(--bg-2); color: var(--ink-2);
    border: 1px solid var(--line-2);
    white-space: nowrap;
  }
  .deals-cycle--fresh     { background: rgba(46, 154, 100, 0.14); color: var(--good);    border-color: rgba(46, 154, 100, 0.4); }
  .deals-cycle--warn-soft { background: rgba(217, 137, 42, 0.10); color: var(--ae-600);        border-color: rgba(217, 137, 42, 0.3); }
  .deals-cycle--warn      { background: rgba(217, 137, 42, 0.16); color: var(--ae-600);        border-color: rgba(217, 137, 42, 0.5); }
  .deals-cycle--danger    { background: rgba(196, 82, 63, 0.16);  color: var(--warn);    border-color: rgba(196, 82, 63, 0.5); }
  .deals-cycle--neutral   { /* uses base styles */ }
  .deals-rel-muted        { color: var(--ink-3); opacity: 0.5; }
  /* Last-contact urgency underline (Committed deals only) — color worsens 0d→30+d */
  .deals-lastcontact-cell { display: inline-flex; align-items: center; gap: var(--space-1-5); }
  .deals-lastcontact { border-bottom: 2px solid transparent; padding-bottom: 1px; cursor: help; }
  .deals-lastcontact--fresh       { border-bottom-color: var(--good); }   /* green 0-3d */
  .deals-lastcontact--warn-soft   { border-bottom-color: var(--warn-soft); }   /* yellow 3-10d */
  .deals-lastcontact--warn        { border-bottom-color: var(--ae-500); }   /* orange 10-20d */
  .deals-lastcontact--warn-strong { border-bottom-color: var(--warn-mid); }   /* deep orange 20-30d */
  .deals-lastcontact--danger      { border-bottom-color: var(--warn); color: var(--warn); font-weight: 600; }   /* red 30+ / never */
  /* Task badge — small ▤ icon shown next to last contact when a task is scheduled */
  .task-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: var(--radius-sm);
    font-size: var(--fs-caption); line-height: 1;
    border: 1px solid var(--line-2);
    background: var(--surface); color: var(--ink-3);
    cursor: help;
    transition: all .12s;
  }
  .task-badge:hover { border-color: var(--lilac-700); color: var(--lilac-700); }
  .task-badge--neutral { /* default */ }
  .task-badge--warn    { background: rgba(217,137,42,0.12); color: var(--ae-600); border-color: rgba(217,137,42,0.4); }
  .task-badge--danger  { background: rgba(196,82,63,0.16); color: var(--warn); border-color: rgba(196,82,63,0.5); }
  body.theme--dark .task-badge { background: var(--surface); }
  /* Legend separator dot between groups */
  .deals-legend__sep { color: var(--ink-3); opacity: 0.4; }

  /* Color legend — tiny inline strip below the table, right-aligned. */
  .deals-legend {
    display: flex; flex-wrap: wrap; gap: var(--space-4);
    padding: 8px 4px 0;
    justify-content: flex-end;
    font-size: var(--fs-caption); color: var(--ink-3);
  }
  .deals-legend__lbl {
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-3);
  }
  .deals-legend__item { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
  .deals-legend__item .deals-cycle {
    padding: 1px 5px; /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; line-height: 1;
  }
  body.theme--dark .deals-cycle             { background: rgba(255,255,255,0.05); }
  body.theme--dark .deals-cycle--fresh      { background: rgba(46, 154, 100, 0.20); }
  body.theme--dark .deals-cycle--warn-soft  { background: rgba(217, 137, 42, 0.16); color: var(--warn-soft); }
  body.theme--dark .deals-cycle--warn       { background: rgba(217, 137, 42, 0.22); color: var(--warn-soft); }
  body.theme--dark .deals-cycle--danger     { background: rgba(196, 82, 63, 0.22);  color: var(--danger-soft); }

  /* HubSpot link button color follows cycle/task tone in card view — visual urgency cue. */
  .fcard__hslink--fresh   { color: var(--good); border-color: rgba(46, 154, 100, 0.4); }
  .fcard__hslink--fresh:hover   { background: var(--good); color: white; border-color: var(--good); }
  .fcard__hslink--warn-soft, .fcard__hslink--warn { color: var(--ae-600); border-color: rgba(217, 137, 42, 0.5); }
  .fcard__hslink--warn-soft:hover, .fcard__hslink--warn:hover {
    background: var(--ae-500); color: white; border-color: var(--ae-500);
  }
  .fcard__hslink--danger { color: var(--warn); border-color: rgba(196, 82, 63, 0.5); }
  .fcard__hslink--danger:hover { background: var(--warn); color: white; border-color: var(--warn); }

  /* Pagination controls */
  .deals-pagination {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 12px 4px 4px;
    font-size: var(--fs-body-sm); color: var(--ink-2);
    flex-wrap: wrap;
  }
  .deals-pagination__lbl { font-size: var(--fs-body-xs); color: var(--ink-3); }
  .deals-pagination__info { font-family: "Geist Mono", monospace; color: var(--ink-2); margin-left: auto; }
  .deals-pagination__page { font-family: "Geist Mono", monospace; min-width: 50px; text-align: center; font-weight: 600; }
  /* .btn-page rules deleted — pagination buttons now use Button primitive. */
  .deals-filter--sm { padding: 4px 8px; font-size: var(--fs-body-xs); }

  /* Kanban — monthly columns with foldable deal cards.
     - Up to 6 columns per row (so FY = 12 months = 6×2 grid, Marco's spec)
     - Each column has a max-height with internal vertical scroll
     - Cards fold/unfold on click; channel color drives left border + accent */
  .deals-kanban {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .deals-kanban--cols-1 { grid-template-columns: minmax(0, 1fr); }
  .deals-kanban--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deals-kanban--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deals-kanban--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .deals-kanban--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* QTR mode: 3 month cells. Same principle as Month (fixed grid, 2 rows visible + scroll
     with fade) but cards are narrower because each cell is only 1/3 of the viewport width.
     2 cards per row inside each cell. */
  .deals-kanban--qtr  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deals-kanban--qtr  .kanban-col { height: 820px; }
  .deals-kanban--qtr .kanban-col__body--won,
  .deals-kanban--qtr .kanban-col__body--lost {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  /* Same as Month — flex handles distribution; no fixed max-heights. */
  /* Month mode: single huge cell. Inside, cards in a 8-col grid; ~2 rows visible, row 3+
     scrolls with the fade gradient hinting more. Column tall enough (820px) so 2 rows of
     ~240px expanded cards (with the new Cycle row) fit fully — was 700, cards got clipped. */
  .deals-kanban--month { grid-template-columns: 1fr; }
  .deals-kanban--month .kanban-col { height: 820px; }
  .deals-kanban--month .kanban-col__body--won,
  .deals-kanban--month .kanban-col__body--lost {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  /* No explicit max-heights — flex distributes the available column space, so the fade
     gradient lines up exactly with the column's bottom edge (no empty space below). */
  /* C6: 1100 → 1024 (--bp-sm). Deal kanban shrinks columns at the canonical
     "narrow desktop" threshold. */
  @media (max-width: 1024px) {
    .deals-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .deals-kanban--qtr  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 700px) {
    .deals-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deals-kanban--qtr, .deals-kanban--month { grid-template-columns: 1fr; }
  }
  /* Breakdown line in cell header for QTR/Month — Won/Pipeline/Churn/Setup at a glance */
  .kanban-col__breakdown {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    padding: 6px 12px; border-bottom: 1px solid var(--line);
    font-family: "Geist Mono", monospace; font-size: var(--fs-body-xs);
    background: var(--surface);
  }
  .kanban-col__bd em { font-style: normal; color: var(--ink-3); /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.04em; margin-left: 2px; font-weight: 600; }
  .kanban-col__bd--won       { color: var(--good); font-weight: 700; }
  .kanban-col__bd--committed { color: var(--proj); font-weight: 700; }
  .kanban-col__bd--lost      { color: var(--warn); font-weight: 700; }
  .kanban-col__bd--setup     { color: var(--ae-500); font-weight: 700; }
  .kanban-col {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
    display: flex; flex-direction: column; min-width: 0;
    /* 300px (was 310) — slightly shorter so the next card is visibly clipped at the bottom,
       hinting "more to scroll" without an explicit affordance. Pair with the fade gradient
       on .kanban-col__body--won::after for an even clearer cue. */
    height: 300px;
  }
  .kanban-col--now { border-color: var(--lilac-500); box-shadow: 0 0 0 1px rgba(110,72,224,0.15); }
  .kanban-col__head {
    display: flex; align-items: baseline; gap: var(--space-1-5); flex-wrap: nowrap;
    padding: 8px 10px; border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .kanban-col__name { font-weight: 700; font-size: var(--fs-body-sm); color: var(--ink-1); text-transform: capitalize; white-space: nowrap; }
  /* Clickable month name (kanban head): jumps to Month timeframe filtered on that month. */
  .kanban-col__name--clickable {
    background: transparent; border: 0; padding: 0; font-family: inherit; cursor: pointer;
    text-align: left; transition: color .12s;
    border-bottom: 1px dashed transparent;
  }
  .kanban-col__name--clickable:hover { color: var(--lilac-700); border-bottom-color: var(--lilac-400); }
  .kanban-col__pill {
    margin-left: 4px; padding: 1px 5px; border-radius: var(--radius-pill);
    background: var(--lilac-700); color: white; /* TOKEN-EXCEPTION: 8px micro-label */ font-size: 8px; font-weight: 700; letter-spacing: 0.04em;
  }
  .kanban-col__count {
    font-family: "Geist Mono", monospace; font-size: var(--fs-caption); color: var(--ink-3);
    background: var(--surface); padding: 1px 5px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  }
  .kanban-col__total { margin-left: auto; font-family: "Geist Mono", monospace; font-size: var(--fs-body-xs); font-weight: 700; color: var(--ink-1); }
  /* Two independently scrolling bodies inside the column: Won (top, ~70%) + Lost (bottom, ~30%).
     Each starts at its own top — no "half-cropped first card" issue from a single combined scroll. */
  .kanban-col__body {
    overflow-y: auto; overflow-x: hidden; padding: var(--space-1-5);
    display: flex; flex-direction: column; gap: var(--space-1-5);
    min-height: 0;
  }
  /* Won/Lost split: ~70/30 (Marco preferred this over 80/20). Column is taller (310px)
     so the won section gets the extra space, churn line stays at its original position. */
  /* Both bodies fade at the bottom edge — visual hint for "more to scroll". Won uses 18px
     fade, Lost uses 12px (smaller section, smaller fade). Soft cue, no extra UI. */
  .kanban-col__body--won {
    flex: 2.5 1 0; position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to bottom, black 0, black calc(100% - 18px), transparent 100%);
  }
  .kanban-col__body--lost {
    flex: 1 1 0; min-height: 70px; position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 0, black calc(100% - 12px), transparent 100%);
            mask-image: linear-gradient(to bottom, black 0, black calc(100% - 12px), transparent 100%);
  }
  .kanban-col__sep {
    display: flex; align-items: center; gap: var(--space-1-5);
    margin: 0 6px; padding: 6px 0;
    /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; color: var(--warn);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    flex-shrink: 0;
    border-top: 1px solid rgba(196, 82, 63, 0.25);
  }
  .kanban-col__sep::before, .kanban-col__sep::after {
    content: ""; flex: 1; height: 1px;
    background: var(--warn); opacity: 0.35;
  }
  .kanban-col__sep-label { padding: 0 4px; white-space: nowrap; }
  .kanban-col__empty { padding: 14px 6px; text-align: center; color: var(--ink-3); font-size: var(--fs-body-xs); font-style: italic; }
  /* Custom scrollbar for kanban columns — subtler than default */
  .kanban-col__body::-webkit-scrollbar { width: 5px; }
  .kanban-col__body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--radius-sm); }
  .kanban-col__body::-webkit-scrollbar-track { background: transparent; }

  /* Foldable deal card. flex-shrink:0 is critical — without it, cards inside the column-flex
     body shrink to thin lines when there are many of them, instead of keeping natural height
     and letting the body scroll. */
  .fcard {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--fcard-color, var(--lilac-700));
    border-radius: var(--radius-md); overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
    flex-shrink: 0;
    /* Hard floor so flex never compresses cards below readable height — folded ≥36px,
       expanded grows naturally. Without this, when many cards exist in a 187px-tall body,
       flex might still try to compress (browser-dependent). */
    min-height: 36px;
  }
  .fcard:hover { box-shadow: 0 3px 10px -4px rgba(26,20,36,0.12); }
  .fcard--lost { opacity: 0.88; }
  .fcard__head {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 8px 10px; cursor: pointer;
    transition: background .1s;
  }
  .fcard__head:hover { background: var(--bg-2); }
  .fcard__title { display: flex; align-items: center; gap: var(--space-1); flex: 1; min-width: 0; }
  .fcard__chevron { /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; color: var(--ink-3); flex-shrink: 0; transition: transform .15s; }
  .fcard--expanded .fcard__chevron { color: var(--fcard-color); }
  .fcard__name {
    font-weight: 600; font-size: var(--fs-body-sm); color: var(--ink-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1; min-width: 0;
  }
  .fcard--lost .fcard__name { color: var(--warn); font-style: italic; }
  .fcard__meta { display: flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; }
  .fcard__amount {
    font-family: "Geist Mono", monospace; font-weight: 700; font-size: var(--fs-body-sm);
    color: var(--fcard-color);
  }
  .fcard__amount--lost { color: var(--warn); }
  .fcard__owner {
    font-size: var(--fs-caption); color: var(--ink-3); font-weight: 500;
    background: var(--bg-2); padding: 1px 6px; border-radius: var(--radius-pill);
    max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fcard__hslink {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: var(--radius-sm);
    color: var(--ink-3); font-size: var(--fs-body-xs); text-decoration: none;
    border: 1px solid var(--line); transition: all .12s;
  }
  .fcard__hslink:hover { background: var(--fcard-color); color: white; border-color: var(--fcard-color); }
  /* Expanded card layout — matches the original card design Marco liked: company line,
     prominent amount with channel chip, then a clean rows list. */
  .fcard__expanded {
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column;
    background: var(--bg-2);
  }
  .fcard__company { padding: 6px 10px 0; font-size: var(--fs-body-xs); color: var(--ink-3); }
  .fcard__amount-row {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
    padding: 8px 10px; border-bottom: 1px solid var(--line);
  }
  .fcard__amount-big {
    font-family: "Geist Mono", monospace; font-size: var(--fs-h3); font-weight: 700;
    color: var(--fcard-color);
  }
  .fcard__rows { display: flex; flex-direction: column; gap: var(--space-1); padding: 6px 10px 8px; }
  .fcard__row { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-body-xs); }
  .fcard__lbl { color: var(--ink-3); flex-shrink: 0; }
  .fcard__row span:last-child {
    color: var(--ink-1); font-weight: 500; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .fcard__chip {
    display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm);
    font-size: var(--fs-caption); font-weight: 600; border: 1px solid currentColor;
    background: rgba(255,255,255,0.4);
  }
  /* Floating deal popover — opens on card click, anchored next to the card via JS-computed
     position. Position: fixed so it stays in viewport; closes on scroll/Esc/outside click. */
  .dpop-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: transparent; }
  .dpop {
    position: fixed; z-index: var(--z-popover);
    width: 320px; max-height: 80vh; overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-left: 4px solid var(--dpop-color, var(--lilac-700));
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px -12px rgba(26,20,36,0.28);
    animation: dpop-in .14s ease-out;
  }
  @keyframes dpop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  .dpop--lost { opacity: 0.96; }
  .dpop__head {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: 12px 14px 8px;
  }
  .dpop__title { flex: 1; min-width: 0; }
  .dpop__name { font-weight: 700; font-size: var(--fs-body-lg); color: var(--ink-1); line-height: 1.3; word-wrap: break-word; }
  .dpop--lost .dpop__name { color: var(--warn); font-style: italic; }
  .dpop__company { font-size: var(--fs-body-sm); color: var(--ink-3); margin-top: 2px; }
  .dpop__close {
    background: transparent; border: 0; cursor: pointer;
    width: 24px; height: 24px; border-radius: var(--radius-sm);
    color: var(--ink-3); font-size: var(--fs-body); flex-shrink: 0;
  }
  .dpop__close:hover { background: var(--bg-2); color: var(--ink-1); }
  .dpop__amount-row {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    padding: 8px 14px;
    background: var(--bg-2);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .dpop__amount {
    font-family: "Geist Mono", monospace;
    /* TOKEN-EXCEPTION: 22px KPI-display variant, between h2(20) and h1(24) */ font-size: 22px; font-weight: 700;
    color: var(--dpop-color, var(--ink-1));
  }
  .dpop__amount--lost { color: var(--warn); }
  .dpop__chip {
    display: inline-block; padding: 3px 9px; border-radius: var(--radius-sm);
    font-size: var(--fs-body-xs); font-weight: 700; border: 1px solid currentColor;
    background: rgba(255,255,255,0.5);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .dpop__rows { padding: 10px 14px; display: flex; flex-direction: column; gap: var(--space-2); }
  .dpop__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--fs-body-sm); }
  .dpop__lbl { color: var(--ink-3); flex-shrink: 0; }
  .dpop__row span:last-child {
    color: var(--ink-1); font-weight: 500; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
  .dpop__hslink {
    display: flex; align-items: center; justify-content: center; gap: var(--space-1-5);
    margin: 4px 14px 14px; padding: 9px 12px;
    background: var(--dpop-color, var(--lilac-700));
    color: white; font-weight: 700; font-size: var(--fs-body);
    text-decoration: none; border-radius: var(--radius-md);
    transition: opacity .15s;
  }
  .dpop__hslink:hover { opacity: 0.85; }
  body.theme--dark .dpop { background: var(--surface); }
  body.theme--dark .dpop__amount-row { background: var(--bg-2); }
  body.theme--dark .dpop__chip { background: rgba(255,255,255,0.06); }

  /* Active card (popover open on it) — subtle ring so user knows which card is anchoring it */
  .fcard--active {
    box-shadow: 0 0 0 2px var(--fcard-color, var(--lilac-700));
  }

  /* Inline-expanded card (QTR / Month views). min-height keeps cards aligned in a grid row;
     no max-height so the new Cycle/Next-task row isn't clipped. CSS grid still aligns each
     row's cards to the tallest card in that row. */
  .fcard--inline-expanded { min-height: 200px; cursor: default; }
  .fcard--inline-expanded .fcard__head { padding: 10px 12px 6px; align-items: flex-start; cursor: default; }
  .fcard--inline-expanded .fcard__head:hover { background: transparent; }
  .fcard--inline-expanded .fcard__title {
    display: flex; flex-direction: column; gap: var(--space-0-5);
    min-width: 0; flex: 1;
    text-align: left;
  }
  /* Title clamps to max 2 lines AND reserves 2 lines of height even for short names —
     uniform card alignment across the grid. Left-indented per Marco's spec. */
  .fcard--inline-expanded .fcard__name {
    white-space: normal; font-size: var(--fs-body);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    word-break: break-word; line-height: 1.3;
    /* 2 lines × line-height 1.3 × font 13px ≈ 34px — reserved even for 1-line names */
    min-height: calc(1.3em * 2);
    text-align: left;
  }
  .fcard--inline-expanded .fcard__company {
    font-size: var(--fs-body-xs); color: var(--ink-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: left;
  }
  .fcard--inline-expanded .fcard__head { text-align: left; }
  .fcard--inline-expanded .fcard__amount-row {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
    padding: 6px 12px;
    background: var(--bg-2);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .fcard--inline-expanded .fcard__amount-big {
    font-family: "Geist Mono", monospace; /* TOKEN-EXCEPTION: 18px between body-lg(14) and h2(20) */ font-size: 18px; font-weight: 700;
    color: var(--fcard-color);
  }
  .fcard--inline-expanded .fcard__rows {
    display: flex; flex-direction: column; gap: var(--space-1); padding: 8px 12px;
  }
  .fcard--inline-expanded .fcard__row { font-size: var(--fs-body-xs); }

  body.theme--dark .kanban-col { background: var(--bg-2); }
  body.theme--dark .fcard { background: var(--surface); }
  body.theme--dark .fcard__body { background: rgba(0,0,0,0.18); }
  body.theme--dark .fcard__chip { background: rgba(255,255,255,0.05); }

  body.theme--dark .deals-tab { background: var(--surface); }
  body.theme--dark .deals-table thead th { background: var(--bg-2); }
  body.theme--dark .deals-row:hover { background: rgba(155,123,255,0.08); }
  body.theme--dark .deals-channel { background: rgba(255,255,255,0.05); }
  body.theme--dark .deal-card { background: var(--surface); }
  body.theme--dark .deal-card__amount { background: var(--bg-2); }
  body.theme--dark .deal-card__channel { background: rgba(255,255,255,0.05); }

  /* Chart canvas bg — uses CSS custom prop so dark theme can override */
  .chart__bg { fill: var(--surface); }

  /* Floating Inputs side-panel (slides in from the right, persists while scrolling).
     The backdrop sits one z-index BELOW the panel so clicks on its area close the
     panel — same pattern as the bell + modals. Lightly tinted to make it clear the
     dashboard behind is dismissable but still visible. */
  .inputs-panel__backdrop {
    position: fixed; inset: 0; z-index: var(--z-backdrop);
    background: rgba(26, 20, 36, 0.18);
    backdrop-filter: blur(2px);
    animation: fadeIn .12s ease-out;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  body.theme--dark .inputs-panel__backdrop { background: rgba(0, 0, 0, 0.4); }
  .inputs-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 380px; max-width: 95vw;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: -8px 0 24px -8px rgba(26,20,36,0.18);
    z-index: var(--z-modal);
    display: flex; flex-direction: column;
    animation: panel-slide .25s ease-out;
  }
  @keyframes panel-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
  .inputs-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--line);
  }
  .inputs-panel__head h3 { margin: 0; font-size: var(--fs-h3); font-weight: 600; }
  .inputs-panel__close {
    background: transparent; border: 0; cursor: pointer;
    width: 28px; height: 28px; border-radius: var(--radius-md);
    font-size: var(--fs-h3); color: var(--ink-3);
  }
  .inputs-panel__close:hover { background: var(--bg-2); color: var(--ink-1); }
  .inputs-panel__body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: var(--space-4); }
  .inputs-panel__group { display: flex; flex-direction: column; gap: var(--space-3); }
  .inputs-panel__group-title { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-caption); color: var(--ink-3); font-weight: 700; padding-bottom: 4px; border-bottom: 1px dashed var(--line); }
  .inputs-panel__hint { font-size: var(--fs-body-xs); color: var(--ink-3); line-height: 1.45; padding-top: 6px; font-style: italic; }
  /* Scenario chart-toggle styling */
  .seg-toggle--scn-chart .seg-toggle__btn { padding: 4px 10px; font-size: var(--fs-body-lg); line-height: 1; }
  .seg-toggle--scn-chart .seg-toggle__btn.on--pess { background: var(--warn); color: white; }
  .seg-toggle--scn-chart .seg-toggle__btn.on--base { background: var(--lilac-700); color: white; }
  .seg-toggle--scn-chart .seg-toggle__btn.on--opt { background: var(--good); color: white; }

  /* Scenario selection row — second row inside chart-controls, sits below log/Y-lock buttons.
     `flex-basis: 100%` forces a wrap inside the flex `sec-head__controls`, so the row sits
     flush right under the main controls. */
  .chart-scn-row {
    flex-basis: 100%;
    display: flex; align-items: center; gap: var(--space-3);
    justify-content: flex-end;
    margin-top: 6px;
  }
  .chart-scn-row__label {
    font-size: var(--fs-body-xs); color: var(--ink-3); font-weight: 500;
    letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.7;
    font-style: italic;
  }

  /* Dark-theme palette overrides moved to tokens.css. */
  body.theme--dark .head.sticky { background: rgba(26, 20, 36, 0.92); }
  /* Logo on dark theme: white background pill so the logo (any color) stays readable */
  body.theme--dark .logo__img { background: white; padding: 4px 8px; border-radius: var(--radius-md); height: 28px; }
  body.theme--dark .scrollbar-thumb { background: var(--line-2); }
  body.theme--dark .table-wrap::-webkit-scrollbar-thumb { background: var(--line-2); }
  body.theme--dark .skeleton-bar { background: linear-gradient(90deg, var(--bg-2) 0%, var(--line) 50%, var(--bg-2) 100%); }
  body.theme--dark .modal { background: var(--surface); }
  body.theme--dark .modal__input { background: var(--bg); color: var(--ink-1); border-color: var(--line-2); }
  body.theme--dark .pw-gate { background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%); }
  body.theme--dark .pw-gate__card { background: var(--surface); }
  body.theme--dark .pw-gate__input { background: var(--bg); color: var(--ink-1); border-color: var(--line-2); }
  body.theme--dark .head__hero { background: var(--surface); }
  body.theme--dark .head__lang button.on { background: var(--lilac-700); }
  /* Dark-mode KPI tile + value softening (replaces legacy .status-card dark rules).
     Use a muted warm-purple grey for big values + row values so the cream-on-dark
     KPI numbers don't read as too stark. */
  body.theme--dark .kpi-tile               { background: var(--surface); }
  body.theme--dark .kpi-tile__value        { color: var(--ink-soft); }
  body.theme--dark .kpi-tile__row-value    { color: var(--ink-soft); }
  body.theme--dark .kpi__value             { color: var(--ink-soft); }
  body.theme--dark .kpi-tile--now .kpi-tile__value  { color: var(--lilac-300); }
  body.theme--dark .kpi-tile--econ .kpi-tile__value { color: var(--info-soft); }
  body.theme--dark .kpi { background: var(--surface); }
  body.theme--dark .kpi--cur { background: linear-gradient(135deg, rgba(155,123,255,0.18), rgba(124,92,255,0.06)); }
  body.theme--dark .forecast thead th { background: var(--bg-2); color: var(--ink-2); }
  body.theme--dark .forecast td { color: var(--ink-1); }
  body.theme--dark .forecast tr.row--lock { background: rgba(255,255,255,0.02); }
  body.theme--dark .forecast tr.row--current { background: linear-gradient(to right, rgba(155,123,255,0.15), rgba(155,123,255,0.05)) !important; }
  body.theme--dark .forecast tr:hover:not(.row--lock) { background: rgba(155, 123, 255, 0.06); }
  body.theme--dark .chart__past-zone { fill: rgba(255,255,255,0.04); }
  body.theme--dark .ae-chart-empty { background: var(--bg-2); color: var(--ink-3); }
  body.theme--dark .ae-legend__chip { background: var(--surface); }
  body.theme--dark .scn-card { background: var(--surface); }
  body.theme--dark .inputs-panel { background: var(--surface); }
  body.theme--dark .settings-menu { background: var(--surface); }
  body.theme--dark .settings-menu__item { color: var(--ink-1); }
  body.theme--dark .err-banner { background: rgba(196, 82, 63, 0.15); }
  body.theme--dark .hs-reminder { background: linear-gradient(90deg, rgba(247, 220, 130, 0.12), rgba(155, 123, 255, 0.04)); }
  body.theme--dark .v-secondary .editable:hover { background: rgba(155,123,255,0.15); }
  body.theme--dark .editable:hover { background: rgba(155,123,255,0.15); border-bottom-color: var(--lilac-500); }
  body.theme--dark .edit-input { background: var(--surface); color: var(--ink-1); border-color: var(--lilac-500); }
  body.theme--dark .ae-target-mini { color: var(--ink-3); }
  body.theme--dark .perf-mini.ok { color: var(--warn-soft); }
  body.theme--dark .chart__tick { fill: var(--ink-3); }
  body.theme--dark .chart__xlabel { fill: var(--ink-3); }
  /* HubSpot indicators in head__sub */
  .hs-fetched { color: var(--ink-3); font-size: var(--fs-body); font-family: "Geist Mono", monospace; }
  .hs-error { color: var(--warn); font-size: var(--fs-body); font-family: "Geist Mono", monospace; }
  .hs-saved { color: var(--good); font-size: var(--fs-body); font-family: "Geist Mono", monospace; display: inline-flex; align-items: center; gap: var(--space-1); }

  /* Big error banner for HubSpot/Worker failures */
  .err-banner {
    display: flex; align-items: center; gap: var(--space-3);
    background: rgba(196, 82, 63, 0.08);
    border: 1px solid var(--warn);
    border-left: 4px solid var(--warn);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: var(--fs-body);
    color: var(--ink-1);
  }
  .err-banner__icon { /* TOKEN-EXCEPTION: 18px between body-lg(14) and h2(20) */ font-size: 18px; flex-shrink: 0; }
  .err-banner__body { flex: 1; min-width: 0; }
  .err-banner__title { font-weight: 600; margin-bottom: 2px; }
  .err-banner__detail { color: var(--ink-2); font-size: var(--fs-body-sm); word-break: break-word; }
  .err-banner__action { background: var(--warn); color: white; border: 0; border-radius: var(--radius-md); padding: 6px 12px; font-family: inherit; font-size: var(--fs-body-sm); font-weight: 600; cursor: pointer; flex-shrink: 0; }
  .err-banner__action:hover { background: var(--warn-700); }

  /* Initial loading skeleton */
  .skeleton-bar { display: inline-block; height: 1em; min-width: 40px; background: linear-gradient(90deg, var(--bg-2) 0%, var(--line) 50%, var(--bg-2) 100%); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; border-radius: var(--radius-sm); vertical-align: middle; }
  @keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  /* Scroll-to-top floating button */
  .scroll-top {
    position: fixed; bottom: 24px; right: 24px;
    width: 40px; height: 40px;
    background: var(--lilac-700); color: white;
    border: 0; border-radius: 50%;
    /* TOKEN-EXCEPTION: 18px between body-lg(14) and h2(20) */ font-size: 18px; cursor: pointer;
    box-shadow: 0 6px 18px -4px rgba(26,20,36,0.25);
    z-index: var(--z-fixed);
    opacity: 0; pointer-events: none;
    transition: opacity .2s, transform .15s;
  }
  .scroll-top.show { opacity: 1; pointer-events: auto; }
  .scroll-top:hover { transform: translateY(-2px); background: var(--lilac-600); }

  /* Modal (replaces native prompt/confirm) */
  .modal-backdrop {
    position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(26, 20, 36, 0.45);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-6);
    animation: modal-fade .15s ease-out;
  }
  @keyframes modal-fade { from { opacity: 0 } to { opacity: 1 } }
  .modal {
    background: var(--surface); border-radius: var(--radius-lg);
    padding: 24px 28px;
    width: 100%; max-width: 420px;
    box-shadow: 0 24px 60px -12px rgba(26,20,36,0.3);
  }
  .modal h3 { margin: 0 0 6px; /* TOKEN-EXCEPTION: 18px between body-lg(14) and h2(20) */ font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
  .modal__msg { color: var(--ink-2); font-size: var(--fs-body); margin: 0 0 18px; line-height: 1.5; }
  .modal__input { width: 100%; padding: 10px 12px; font-size: var(--fs-body-lg); border: 1.5px solid var(--line-2); border-radius: var(--radius-md); background: var(--bg); color: var(--ink-1); font-family: inherit; outline: none; }
  .modal__input:focus { border-color: var(--lilac-500); background: var(--surface); }
  .modal__err { color: var(--warn); font-size: var(--fs-body-sm); margin-top: 8px; font-weight: 500; }
  .modal__actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: 18px; }
  /* .modal__btn rules deleted — modal action buttons now use <Button>. */

  /* ─── <Table> primitive (Phase B7) ──────────────────────────────────────── */
  .ds-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .ds-table thead th {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
  }
  .ds-table--sticky-header thead th {
    position: sticky; top: 0; z-index: var(--z-sticky);
  }
  .ds-table tbody td {
    font-size: var(--fs-body);
    color: var(--text-primary);
    vertical-align: baseline;
  }
  .ds-table--compact tbody td      { padding: var(--space-2) var(--space-3); height: 32px; }
  .ds-table--comfortable tbody td  { padding: var(--space-3) var(--space-4); height: 48px; }
  .ds-table tbody tr:hover td { background: var(--bg-elevated); }
  .ds-table .col--num { font-family: var(--font-mono); text-align: right; font-feature-settings: "tnum"; }

  /* ─── <EmptyState> primitive (Phase B8) ─────────────────────────────────── */
  .empty-state { text-align: center; color: var(--text-muted); }
  .empty-state--inline { padding: var(--space-3) 0; font-size: var(--fs-body-sm); }
  .empty-state--compact { padding: var(--space-6) var(--space-4); }
  .empty-state--large { padding: var(--space-12) var(--space-4); }
  .empty-state__icon { /* TOKEN-EXCEPTION: 48px decorative icon, between display(28) and display-lg(32) — needs a true display size for visual weight */ font-size: 48px; margin-bottom: var(--space-3); opacity: 0.5; line-height: 1; }
  .empty-state__title { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--space-2); }
  .empty-state__msg { font-size: var(--fs-body); color: var(--text-secondary); max-width: 40ch; margin: 0 auto var(--space-4); line-height: 1.5; }
  .empty-state__action { display: inline-flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-4); }
  .empty-state--inline .empty-state__icon,
  .empty-state--inline .empty-state__action { display: none; }
  .empty-state--inline .empty-state__title { font-size: var(--fs-body); margin-bottom: 0; display: inline; margin-right: var(--space-2); }
  .empty-state--inline .empty-state__msg { display: inline; font-size: var(--fs-body-sm); margin: 0; max-width: none; }

  /* ─── <Toast> primitive (Phase B8) ──────────────────────────────────────── */
  .toast-stack {
    position: fixed; bottom: var(--space-6); right: var(--space-6);
    z-index: var(--z-toast);
    display: flex; flex-direction: column;
    gap: var(--space-3);
    max-width: 360px;
    pointer-events: none;
  }
  .toast {
    pointer-events: auto;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-4);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    align-items: start;
    animation: toast-in var(--duration-base) var(--ease-decel);
  }
  @keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .toast--info    { border-left-color: var(--info); }
  .toast--success { border-left-color: var(--success); }
  .toast--warning { border-left-color: var(--warning); }
  .toast--error   { border-left-color: var(--danger); }
  .toast__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
  .toast__msg { font-size: var(--fs-body-sm); color: var(--text-secondary); margin-top: var(--space-0-5); line-height: 1.4; }
  .toast__close {
    grid-row: 1 / -1; grid-column: 2;
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-muted); font-size: var(--fs-body-sm);
    padding: 0; line-height: 1;
    align-self: start;
  }
  .toast__close:hover { color: var(--text-primary); }
  .toast__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

  /* ─── <ChartFrame> primitive (Phase B4) ─────────────────────────────────── */
  .chart-frame {
    display: flex; flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    padding-bottom: var(--space-3);
  }
  .chart-frame__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .chart-frame__title-block { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
  .chart-frame__title { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.3; }
  .chart-frame__subtitle { font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.4; }
  .chart-frame__controls { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .chart-frame__body { width: 100%; min-width: 0; }
  .chart-frame__legend {
    display: flex; flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding-top: var(--space-2);
    font-size: var(--fs-body-xs);
    color: var(--text-secondary);
    align-items: center;
  }
  .chart-frame__legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
  .chart-frame__legend-item--hidden { opacity: 0.4; text-decoration: line-through; }
  .chart-frame__swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: var(--radius-sm);
    border: 1px solid;
  }
  .chart-frame__swatch--dashed {
    background: transparent !important;
    border-style: dashed; border-width: 1.5px;
  }
  .chart-frame__legend-label { line-height: 1; }

  /* ─── <Input> + <Select> primitives (Phase B6) ──────────────────────────── */
  .input {
    display: inline-flex; align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    line-height: 1;
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
  }
  .input--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--fs-body-xs); }
  .input--md { height: 36px; padding: 0 var(--space-3); font-size: var(--fs-body); }
  .input:focus-visible, .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
  .input:disabled { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; }
  .input--error { border-color: var(--danger); }
  .input--error:focus-visible, .input--error:focus { box-shadow: 0 0 0 3px var(--danger-bg); }
  .input--select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--space-8);
  }
  .input-wrap {
    display: inline-flex; align-items: stretch;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
  }
  .input-wrap:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
  .input-wrap .input { border: 0; box-shadow: none; flex: 1; min-width: 0; }
  .input-wrap .input:focus-visible { box-shadow: none; }
  .input__prefix, .input__suffix {
    display: inline-flex; align-items: center;
    padding: 0 var(--space-3);
    color: var(--text-muted);
    font-size: var(--fs-body-sm);
    background: var(--bg-elevated);
  }
  .input__prefix { border-right: 1px solid var(--border); }
  .input__suffix { border-left: 1px solid var(--border); }

  /* Refresh button progress span (still used inside <Button>'s loading content). */
  .btn-refresh__progress { font-family: "Geist Mono", monospace; font-size: var(--fs-caption); opacity: 0.85; margin-left: 4px; }
  /* .btn-refresh--err deleted — primitive uses tone="warn". */

  /* AE chart legend: better wrapping with row gap and visual separator on second-line wrap */
  .ae-legend { max-width: 100%; row-gap: var(--space-1-5); }
  .ae-legend__chip { white-space: nowrap; }

  /* Past-month lock indicator (for AE cells in VIEW mode) */
  .past-lock { color: var(--ink-3); opacity: 0.5; font-size: var(--fs-body-xs); margin-left: 3px; }

  /* .btn-edit-toggle and .btn-refresh disabled rules deleted — primitive
     handles active/disabled/loading via active prop + :disabled rule. */

  /* Editable inputs in read-only mode — show the value but no underline/cursor affordance */
  .editable--locked { cursor: default; border-bottom-color: transparent !important; opacity: 0.92; }
  .editable--locked:hover { background: transparent !important; border-bottom-color: transparent !important; }

  /* Password gate (fullscreen) */
  .pw-gate {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
    z-index: var(--z-modal);
    padding: var(--space-6);
  }
  .pw-gate__card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    width: 100%; max-width: 380px;
    box-shadow: 0 20px 48px -12px rgba(26,20,36,0.18);
  }
  .pw-gate__title { margin: 0 0 4px; /* TOKEN-EXCEPTION: 22px KPI-display variant, between h2(20) and h1(24) */ font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-1); }
  .pw-gate__sub { margin: 0 0 20px; font-size: var(--fs-body); color: var(--ink-3); }
  .pw-gate__input {
    width: 100%; padding: 11px 14px; font-size: var(--fs-body-lg);
    border: 1.5px solid var(--line-2); border-radius: var(--radius-md);
    background: var(--bg); color: var(--ink-1);
    font-family: inherit;
    transition: border-color .12s, background .12s, box-shadow .12s;
  }
  .modal__input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  .pw-gate__input:focus { border-color: var(--lilac-500); background: var(--surface); }
  .pw-gate__btn {
    margin-top: 12px; width: 100%; padding: var(--space-3); /* TOKEN-EXCEPTION-SHIFT: 11px → 12px (button vertical) */
    background: var(--lilac-700); color: white;
    border: 0; border-radius: var(--radius-md); font-size: var(--fs-body-lg); font-weight: 600;
    cursor: pointer; transition: background .12s; font-family: inherit;
  }
  .pw-gate__btn:hover:not(:disabled) { background: var(--lilac-600); }
  .pw-gate__btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .pw-gate__err { margin-top: 8px; color: var(--warn); font-size: var(--fs-body-sm); font-weight: 500; }

  /* .btn-reset-mini deleted — sites that need this discreet style now use
     <Button variant="ghost" size="sm"> with reduced opacity via prop or
     dedicated reset-mini class on the same element. */
  .saved-pill { color: var(--good); font-size: var(--fs-body); font-family: "Geist Mono", monospace; }

  /* HubSpot wiring reminder — appears when an AE has a person name but no HubSpot owner id */
  .hs-reminder {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: linear-gradient(90deg, rgba(247, 220, 130, 0.18), rgba(155, 123, 255, 0.06));
    border: 1px solid var(--ae-300);
    border-left: 3px solid var(--ae-500);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: var(--fs-body-sm);
    color: var(--ink-2);
  }
  .hs-reminder__bell { font-size: var(--fs-h3); line-height: 1.2; flex-shrink: 0; }
  .hs-reminder__body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
  .hs-reminder__body b { color: var(--ink-1); font-weight: 600; font-size: var(--fs-body); }
  .hs-reminder__detail { color: var(--ink-2); line-height: 1.4; }

  /* KPI strip — uniform 4-column grid for FY/YTD (4 tiles) and 3-column at md+ when
     the period branch renders 3 tiles. Tiles flex to fill remaining space.
     Breakpoints: 4 cols at --bp-md (1280) and up; 2 cols at --bp-sm to --bp-md;
     1 col below --bp-sm. Legacy --3card class no longer rendered (C2). */
  .kpis {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr 0.9fr;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
  @media (max-width: 1280px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 1024px) { .kpis { grid-template-columns: 1fr; } }
  .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; }
  .kpi--cur { background: linear-gradient(135deg, rgba(155,123,255,0.10), rgba(124,92,255,0.04)); border-color: var(--lilac-400); }
  .kpi--cur .kpi__value { color: var(--lilac-700); }
  /* Sized to match status-card title/big-label rhythm so Month/Qtr KPIs read consistently
     with the FY/YTD status cards (Adesso/Percorso/Salute Canali). */
  .kpi__label { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-body-sm); color: var(--ink-3); font-weight: 700; }
  .kpi__value { /* TOKEN-EXCEPTION: 26px KPI hero, just below display(28) */ font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-feature-settings: "tnum"; font-family: "Geist Mono", monospace; }
  .kpi__sub { font-size: var(--fs-body); color: var(--ink-2); margin-top: 4px; font-weight: 500; }

  /* ─── <KpiTile> primitive (Phase B2) ─────────────────────────────────────
     Single token-driven KPI tile. Replaces 4 status-card--* variants in the
     FY/YTD KPI strip + 3 in the Month/Qtr/Custom layout. Same rhythm everywhere.
     Spec: _snapshots/2026-05-09-design-system/PRIMITIVES.md
     ───────────────────────────────────────────────────────────────────────── */
  .kpi-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5, 10px);  /* TOKEN-EXCEPTION: 10px between sections — between the 8/12 scale */
    min-width: 0;
  }
  /* Accent variants drive a 3px left border tone — communicates which "quadrant"
     the tile sits in (status / path / health / economics). */
  .kpi-tile--now    { border-left: 3px solid var(--lilac-500); }
  .kpi-tile--now.kpi-tile--ahead  { border-left-color: var(--success); }
  .kpi-tile--now.kpi-tile--on     { border-left-color: var(--success); }
  .kpi-tile--now.kpi-tile--behind { border-left-color: var(--danger); }
  .kpi-tile--path   { border-left: 3px solid var(--accent); }
  .kpi-tile--health { border-left: 3px solid var(--warning); }
  .kpi-tile--econ   { border-left: 3px solid var(--info); }
  .kpi-tile--econ .kpi-tile__value { color: var(--info); }
  .kpi-tile--now    .kpi-tile__value { color: var(--accent); }

  .kpi-tile__head {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-1-5);
    flex-wrap: wrap;
  }
  .kpi-tile__title {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    font-weight: var(--fw-bold);
  }
  .kpi-tile__sub {
    font-size: var(--fs-body-sm);
    color: var(--text-muted);
    font-family: var(--font-mono);
  }
  .kpi-tile__hero { display: flex; flex-direction: column; gap: var(--space-0-5); }
  .kpi-tile__value {
    font-family: var(--font-mono);
    font-size: var(--fs-display);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .kpi-tile__value-label {
    font-size: var(--fs-body);
    color: var(--text-secondary);
    margin-top: var(--space-1);
    font-weight: var(--fw-medium);
  }
  .kpi-tile__value-sub {
    font-family: var(--font-mono);
    font-size: var(--fs-body-xs);
    margin-top: var(--space-1-5);
    font-weight: var(--fw-semibold);
    cursor: help;
  }
  .kpi-tile__rows {
    display: flex; flex-direction: column;
    gap: var(--space-1-5);  /* 6px between rows */
    padding-top: var(--space-1-5);
    border-top: 1px solid var(--border);
  }
  .kpi-tile__row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--space-2);
    font-size: var(--fs-body);
  }
  .kpi-tile__row-label { color: var(--text-muted); font-size: var(--fs-body); }
  .kpi-tile__row-value {
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    font-size: var(--fs-body-lg);
  }
  /* Tone-tinted row values (e.g. "+5.7% ahead" green). */
  .kpi-tile__row-value--ahead, .kpi-tile__row-value--good { color: var(--success); }
  .kpi-tile__row-value--on { color: var(--success); }
  .kpi-tile__row-value--behind, .kpi-tile__row-value--danger { color: var(--danger); }
  .kpi-tile__row-value--warn, .kpi-tile__row-value--warning { color: var(--warning); }

  /* Channel rows (Health card body) — same row rhythm, different layout. */
  .kpi-tile__channels {
    display: flex; flex-direction: column;
    gap: var(--space-1-5);
    padding-top: var(--space-1-5);
    border-top: 1px solid var(--border);
  }
  .kpi-tile__channel {
    display: grid;
    grid-template-columns: 18px 1fr auto auto;
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--fs-body);
    padding: var(--space-0-5) 0;
  }
  .kpi-tile__channel--top .kpi-tile__ch-arrow   { color: var(--success); font-weight: var(--fw-bold); font-size: var(--fs-body-lg); }
  .kpi-tile__channel--lag .kpi-tile__ch-arrow   { color: var(--danger);  font-weight: var(--fw-bold); font-size: var(--fs-body-lg); }
  .kpi-tile__channel--churn .kpi-tile__ch-arrow { color: var(--danger); font-size: var(--fs-body-lg); }
  .kpi-tile__channel--ae .kpi-tile__ch-arrow    { color: var(--text-muted); font-size: var(--fs-body); }
  .kpi-tile__ch-name { color: var(--text-primary); font-weight: var(--fw-semibold); font-size: var(--fs-body); }
  .kpi-tile__ch-mom  { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--text-secondary); white-space: nowrap; }
  .kpi-tile__ch-val  { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--text-primary); font-size: var(--fs-body-lg); }

  /* Value-sub variants used by Economics card */
  .kpi-tile__value-sub--success { color: var(--success); }
  .kpi-tile__value-sub--warning { color: var(--warning); }
  .kpi-tile__value-sub--danger  { color: var(--danger); }

  /* ─── <Card> primitive (Phase B2) ────────────────────────────────────────
     Replaces .card / .chart-card / .notes / .table-card--* wrapping. Existing
     layout-specific classes pass through via className, so chart-card etc. keep
     their layout overrides while consuming the new padding/elevation tokens.
     ───────────────────────────────────────────────────────────────────────── */
  .ds-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-sizing: border-box;
    min-width: 0;
  }
  .ds-card--pad-comfortable { padding: var(--space-6); }
  .ds-card--pad-compact     { padding: var(--space-4); }
  .ds-card--pad-none        { padding: 0; }
  .ds-card--elev-flat       { box-shadow: none; }
  .ds-card--elev-raised     { box-shadow: var(--shadow-sm); }
  .ds-card--collapsed       { /* hook for collapsed-state styling at call site */ }
  body.theme--dark .ds-card { background: var(--surface); }

  /* Status cards LEGACY — replaced by .kpi-tile (Phase B2). Kept temporarily as
     an alias so any uncaught reference still renders correctly during migration.
     Once all sites use <KpiTile>, this block deletes. */
  /* .status-card* legacy classes DELETED — fully replaced by .kpi-tile primitive (B2). */
  /* Info icon + custom tooltip — palette-matched, rounded, soft shadow. Replaces the native
     dark browser title-attr tooltip with something visually pleasant. */
  .info-wrap { position: relative; display: inline-block; vertical-align: middle; }
  .info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; margin-left: 5px;
    border-radius: 50%; font-size: var(--fs-body-xs); line-height: 1;
    color: var(--ink-3); cursor: help; background: transparent;
    transition: color .12s, background .12s;
    vertical-align: middle;
  }
  .info-wrap:hover .info-icon { color: var(--lilac-700); background: rgba(110, 72, 224, 0.10); }
  .info-wrap:focus-within .info-icon {
    color: var(--lilac-700); background: rgba(110, 72, 224, 0.10);
    outline: none; box-shadow: var(--shadow-focus);
  }
  .info-tip {
    position: absolute; z-index: var(--z-tooltip);
    bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px);
    min-width: 220px; max-width: 320px;
    padding: 10px 14px;
    background: var(--surface); color: var(--ink-1);
    font-size: var(--fs-body-sm); font-weight: 400; font-family: inherit;
    text-transform: none; letter-spacing: normal; line-height: 1.5;
    white-space: normal; text-align: left;
    border: 1px solid var(--lilac-400);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px -8px rgba(110, 72, 224, 0.22), 0 2px 6px -2px rgba(26,20,36,0.12);
    opacity: 0; pointer-events: none;
    /* 500ms hover delay before showing — gives the user time to move past chips without
     bombarding them with tooltips. The fade itself is quick (.15s). */
    transition: opacity .15s ease-out .5s, transform .15s ease-out .5s;
  }
  .info-tip::before {
    /* white arrow tip pointing down toward the icon */
    content: ""; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); margin-top: -1px;
    border: 6px solid transparent;
    border-top-color: var(--surface);
  }
  .info-tip::after {
    /* outer border around arrow so it merges with the lilac border */
    content: ""; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--lilac-400);
    z-index: -1; /* TOKEN-EXCEPTION: tooltip arrow background sits BEHIND the tooltip surface */
  }
  .info-wrap:hover .info-tip, .info-wrap:focus-within .info-tip {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: .5s;
  }
  /* Tooltip wrapper — same style as InfoIcon's tip but anchored to a wrapped element instead
     of a ⓘ icon. Use for chips/badges/anywhere a hover-reveal tooltip is needed. */
  .tip-wrap { position: relative; display: inline-block; }
  .tip-wrap > .info-tip { /* reuses info-tip styles defined above */ }
  .tip-wrap:hover > .info-tip, .tip-wrap:focus-within > .info-tip {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: .5s;
  }
  /* Smart placement — Tooltip component sets `tip-wrap--above` (default) or `tip-wrap--below`
     at hover-time via getBoundingClientRect. Default above; flip below only when no room above
     (e.g. row near top of the viewport / under the sticky thead). */
  .tip-wrap--below > .info-tip {
    bottom: auto; top: calc(100% + 10px);
    transform: translateX(-50%) translateY(-4px);
  }
  .tip-wrap--below > .info-tip::before {
    top: auto; bottom: 100%; margin-top: 0; margin-bottom: -1px;
    border-top-color: transparent; border-bottom-color: var(--surface);
  }
  .tip-wrap--below > .info-tip::after {
    top: auto; bottom: 100%;
    border-top-color: transparent; border-bottom-color: var(--lilac-400);
  }
  .tip-wrap--below:hover > .info-tip,
  .tip-wrap--below:focus-within > .info-tip {
    transform: translateX(-50%) translateY(0);
  }
  body.theme--dark .tip-wrap--below > .info-tip::before { border-bottom-color: var(--surface); }
  body.theme--dark .tip-wrap--below > .info-tip::after  { border-bottom-color: var(--lilac-500); }
  body.theme--dark .info-tip { background: var(--surface); border-color: var(--lilac-500); color: var(--ink-1); }
  body.theme--dark .info-tip::before { border-top-color: var(--surface); }
  body.theme--dark .info-tip::after { border-top-color: var(--lilac-500); }
  /* .status-card__* body rules DELETED — replaced by .kpi-tile__* (B2). */
  /* Health-tile MoM tone (top channel = good, lag channel = warn). */
  .kpi-tile--health .kpi-tile__channel--top .kpi-tile__ch-mom { color: var(--success); }
  .kpi-tile--health .kpi-tile__channel--lag .kpi-tile__ch-mom { color: var(--danger); }
  .kpi--mix { display: flex; flex-direction: column; gap: var(--space-1-5); }
  /* Mix bar visually 10px tall but click target expanded to ≥24px via :before
     pseudo-element (WCAG 2.5.8). The bar has cursor:help (it's a tooltip
     trigger), so the tap area should match minimum hit-target spec. */
  .kpi__mix-bar { display: flex; height: 10px; border-radius: var(--radius-sm); overflow: hidden; gap: var(--space-px); margin-top: 6px; position: relative; }
  .kpi__mix-bar::before {
    content: ""; position: absolute; inset: -8px 0; /* extend touch area 8px above + below = 26h total */
    pointer-events: auto;
  }
  .kpi__mix-seg { min-width: 2px; transition: opacity .15s; position: relative; }
  .kpi__mix-seg:hover { opacity: 0.75; }
  .kpi__mix-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) 10px; font-size: var(--fs-caption); color: var(--ink-3); margin-top: 2px; font-family: "Geist Mono", monospace; }
  .kpi__mix-legend span { display: inline-flex; align-items: center; gap: var(--space-1); }
  .kpi__mix-legend i { width: 8px; height: 8px; border-radius: var(--radius-sm); display: inline-block; }
  .delta { font-family: "Geist Mono", monospace; font-weight: 600; }
  .delta--ahead { color: var(--good); }
  .delta--on { color: var(--ink-2); }
  .delta--behind { color: var(--warn); }

  /* card */
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 20px; }
  /* table card needs no overflow at all for sticky thead to follow document scroll */
  .card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: var(--space-3); }
  .card__head--button { background: transparent; border: 0; padding: 0; font-family: inherit; cursor: pointer; width: 100%; text-align: left; color: inherit; }
  .card__head--button:hover h3 { color: var(--lilac-700); }
  .collapse-chev { font-size: var(--fs-body-lg); color: var(--ink-3); font-family: "Geist Mono", monospace; }
  .collapsible:not(.collapsible--open) { padding-bottom: 18px; }
  .collapsible:not(.collapsible--open) .card__head { margin-bottom: 0; }
  .card h3 { margin: 0; font-size: var(--fs-body-lg); font-weight: 600; letter-spacing: -0.01em; }
  .hint { font-size: var(--fs-body-xs); color: var(--ink-3); }

  /* Collapsible section header — used by all major sections */
  .sec-head { align-items: center; }
  .sec-head__title { display: flex; align-items: center; gap: var(--space-3); background: transparent; border: 0; padding: 4px 0; font: inherit; color: inherit; cursor: pointer; flex: 1 1 auto; min-width: 0; }
  .sec-head__title:hover h3 { color: var(--lilac-700); }
  .sec-head__title:hover .sec-chev { color: var(--lilac-700); }
  .sec-head__sub { font-size: var(--fs-body-sm); color: var(--ink-3); font-weight: 400; margin-left: 4px; }
  .sec-head__controls { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  .sec-chev { display: inline-block; font-size: var(--fs-body-xs); color: var(--ink-3); width: 14px; text-align: center; transition: transform 0.18s ease; transform: rotate(0deg); user-select: none; }
  .sec-chev--open { transform: rotate(90deg); }
  .card--collapsed { padding-bottom: 16px !important; }
  .card--collapsed .card__head { margin-bottom: 0 !important; }

  /* Small segmented toggle for in-card controls */
  .seg-toggle--sm .seg-toggle__btn { padding: 3px 8px; font-size: var(--fs-body-xs); }
  .ae-chart-empty { padding: 60px 20px; text-align: center; color: var(--ink-3); font-size: var(--fs-body); }
  .ae-chart-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
  .ae-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) 14px; padding: 18px 4px 4px; justify-content: center; }
  .ae-legend__chip { display: inline-flex; align-items: baseline; gap: var(--space-2); padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: var(--fs-body-sm); }
  .ae-legend__sw { width: 10px; height: 10px; border-radius: var(--radius-sm); flex-shrink: 0; align-self: center; }
  .ae-legend__name { font-weight: 600; color: var(--ink-1); }
  .ae-legend__slot { color: var(--ink-3); font-size: var(--fs-caption); font-weight: 500; letter-spacing: 0.02em; }

  /* legend */
  .legend { display: flex; gap: var(--space-3); font-size: var(--fs-body-xs); color: var(--ink-2); flex-wrap: wrap; padding-top: 8px; }
  .legend--clickable { border-top: 1px dashed var(--line); margin-top: 8px; justify-content: center; padding: 12px 8px 4px; }
  .legend__item { display: inline-flex; align-items: center; gap: var(--space-1-5); }
  .legend__item--btn { background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); padding: 4px 8px; cursor: pointer; font-family: inherit; font-size: var(--fs-body-xs); color: var(--ink-2); transition: all .12s; }
  .legend__item--btn:hover { background: var(--bg-2); border-color: var(--line-2); }
  .legend__item--btn.off { opacity: 0.32; text-decoration: line-through; }
  /* Legend swatch visually 14×10 but the parent .legend__item is the click target
     (toggles series visibility). The label next to the swatch is the 24×24+ hit
     area. WCAG 2.5.8 satisfied via the parent label, not the swatch itself. */
  .legend__sw { width: 14px; height: 10px; border-radius: var(--radius-sm); }
  .legend__sw--solid { width: 18px; height: 2.5px; background: currentColor; border-radius: var(--radius-sm); }
  .legend__sw--dash { width: 18px; height: 0; border-top: 2px dashed var(--lilac-700); }
  .legend__sw--box { width: 14px; height: 10px; }

  .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  .dot--lock { background: var(--lilac-600); }
  .dot--proj { background: white; border: 1.5px solid var(--lilac-600); width: 7px; height: 7px; }

  /* chart */
  .chart-card { padding-bottom: 14px; transition: padding .2s; }
  /* Chart wrapper sized to fill the card; the SVG inside uses a dynamic viewBox driven by
     ResizeObserver so the chart fills the full available width without letterbox whitespace. */
  .chart-wrap { width: 100%; display: block; }
  .chart { width: 100%; height: 100%; display: block; }
  .chart-card--compact .chart-wrap { height: 200px; }
  .chart-card--expanded .chart-wrap { height: 460px; }
  .chart__tick { font-size: var(--fs-body-lg); fill: var(--ink-2); font-family: "Geist Mono", monospace; font-weight: 500; }
  .chart__xlabel { /* TOKEN-EXCEPTION: 15px between body-lg(14) and h3(16) */ font-size: 15px; fill: var(--ink-2); font-weight: 500; }
  .chart__xlabel--today { fill: var(--lilac-700); font-weight: 700; }
  .chart__today-tag { font-size: var(--fs-body); fill: var(--lilac-700); font-family: "Geist Mono", monospace; font-weight: 700; }
  .chart__today-tag-bg { fill: var(--surface); stroke: var(--lilac-700); stroke-width: 1; }
  .ae-chart-empty { padding: 60px 20px; text-align: center; color: var(--ink-3); font-size: var(--fs-body); font-style: italic; background: var(--bg-2); border-radius: var(--radius-md); }
  .chart-controls { display: flex; gap: var(--space-1-5); align-items: center; justify-content: flex-end; flex-basis: 100%; }
  /* .btn-toggle rules deleted — chart toggle buttons now use <Button variant="ghost" size="sm" active>. */

  /* assumptions grid */
  .assump-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
  .assump { background: var(--bg-2); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 10px 12px; transition: border-color .15s; }
  .assump:hover { border-color: var(--line-2); }
  /* avgBasket input with mode badge + Reset/Forza buttons. Spans full row in the inputs panel. */
  .assump--basket { grid-column: 1 / -1; }
  .assump__mode {
    display: inline-block; margin-left: 8px;
    padding: 2px 8px; border-radius: var(--radius-sm);
    font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .assump__mode--auto { background: rgba(46, 154, 100, 0.12); color: var(--good); }
  .assump__mode--manual { background: rgba(110, 72, 224, 0.12); color: var(--lilac-700); }
  .assump__val--with-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .assump__input {
    flex: 0 0 120px; padding: 6px 10px;
    font-family: "Geist Mono", monospace; font-size: var(--fs-body);
    border: 1px solid var(--line-2); border-radius: var(--radius-md);
    background: var(--surface); color: var(--ink-1);
  }
  .assump__input:focus { outline: 2px solid var(--lilac-500); outline-offset: -1px; }
  .assump__hint { font-size: var(--fs-body-xs); color: var(--ink-3); font-style: italic; margin-top: 4px; }
  /* .btn-mini and modifiers deleted — sound-picker actions + reset/force in
     AvgBasketInput now use <Button variant="ghost" size="sm">. */
  body.theme--dark .assump__input { background: var(--bg); border-color: var(--line-2); color: var(--ink-1); }
  .assump__label { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); font-weight: 600; margin-bottom: 4px; }
  .assump__val { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-h3); font-weight: 500; color: var(--ink-1); font-feature-settings: "tnum"; }

  /* editable */
  .editable {
    cursor: text; padding: 1px 4px; border-radius: var(--radius-sm);
    border-bottom: 1px dashed var(--line-2);
    transition: background .12s, border-color .12s;
  }
  .editable:hover { background: var(--lilac-200); border-bottom-color: var(--lilac-500); }
  .edit-input {
    font-family: inherit; font-size: inherit; font-weight: inherit;
    background: white; border: 1.5px solid var(--lilac-500); border-radius: var(--radius-sm);
    padding: 1px 4px; color: var(--ink-1);
  }
  .edit-input:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--accent); }


  /* table */
  /* The table can grow wide when many AE columns are added. We contain it inside the card
     with internal scroll (both axes) and stick the thead to the *wrap*'s top — so as the
     user scrolls within the table, column labels stay visible. The wrap has a generous
     max-height so it feels like a normal table on most screens but never spills out of
     the card. */
  .table-wrap {
    overflow: auto;
    max-height: calc(100vh - 140px);
    margin: 0 -22px;
    padding: 0 22px 4px;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
  .table-wrap::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--radius-sm); }
  .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
  .table-wrap::-webkit-scrollbar-track { background: transparent; }
  table.forecast { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-body-sm); }
  .forecast thead th {
    text-align: left; font-weight: 600; color: var(--ink-2);
    font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em;
    padding: 10px 10px; border-bottom: 1px solid var(--line);
    background: var(--bg-2); position: sticky; top: 0; z-index: var(--z-base); /* TOKEN-EXCEPTION: sticky thead must stay BELOW page header (--z-sticky) */
    box-shadow: 0 1px 0 var(--line);
  }
  /* Min-width on numeric columns prevents jumping when values switch MRR↔ARR (×12). */
  .forecast th.num, .forecast td.num { text-align: right; font-feature-settings: "tnum"; min-width: 90px; }
  .forecast th.input-col, .forecast td.input-col { min-width: 110px; }
  .forecast td.num { font-family: "Geist Mono", ui-monospace, monospace; }
  .forecast th.team, .forecast td.team { background: rgba(155, 123, 255, 0.04); }
  .forecast th.mix { width: 120px; }
  .forecast td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
  .forecast tr.row--lock { background: rgba(0,0,0,0.012); }
  .forecast tr.row--lock td { color: var(--ink-2); }
  .forecast tr:hover:not(.row--lock) { background: rgba(155, 123, 255, 0.025); }
  .month { display: flex; align-items: center; gap: var(--space-2); }
  .month__name { font-weight: 500; color: var(--ink-1); font-size: var(--fs-body-sm); letter-spacing: -0.005em; }
  .strong { color: var(--ink-1); }
  .muted { color: var(--ink-3); }
  .neg { color: var(--warn); }
  .editable--empty { color: var(--ink-3); font-style: italic; }

  /* Primary value in a cell — the planned target. Plain weight, full ink. */
  .v-primary { color: var(--ink-1); font-size: var(--fs-body); font-weight: 400; line-height: 1.3; }
  /* Secondary value — the actual / real. Lighter, smaller. */
  .v-secondary { color: var(--ink-3); font-size: var(--fs-body-xs); font-weight: 400; display: flex; align-items: baseline; gap: var(--space-1-5); line-height: 1.3; }
  .v-secondary .v-actual { color: var(--ink-2); }
  .v-label { /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; min-width: 14px; text-align: right; opacity: 0.7; font-family: "Geist", sans-serif; }

  /* Perf indicator — color-only, no pill. Muted by default. */
  .perf-mini { font-size: var(--fs-caption); font-feature-settings: "tnum"; font-family: "Geist Mono", monospace; font-weight: 500; letter-spacing: 0; }
  .perf-mini.good { color: var(--good); }
  /* Was --warn-soft-2 (#B58A1F, 3.0:1) — failed WCAG AA for small text on --bg.
     --ae-700 (#A35F12) passes 4.7:1. Same warm-amber hue, just darker. */
  .perf-mini.ok   { color: var(--ae-700); }
  .perf-mini.bad  { color: var(--warn); }

  /* Bullet/dot for compact ratio: € or % */
  .v-sep { color: var(--line-2); margin: 0 4px; }

  .pill { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill); background: transparent; color: var(--lilac-700); font-weight: 500; font-size: var(--fs-body-xs); border: 1px solid var(--lilac-300); font-family: "Geist Mono", monospace; }
  .pill--alt { background: var(--ink-1); color: white; border-color: var(--ink-1); }

  .forecast th.input-col, .forecast td.input-col { background: rgba(124, 92, 255, 0.04); }
  .output-callout { margin-top: 14px; padding: 10px 14px; background: var(--bg-2); border-radius: var(--radius-md); font-size: var(--fs-body-sm); color: var(--ink-2); display: flex; align-items: center; gap: var(--space-2); }
  .output-callout b { color: var(--ink-1); font-weight: 500; }

  /* mix bar */
  .mixbar { width: 110px; height: 8px; border-radius: var(--radius-sm); overflow: hidden; display: flex; background: var(--line); }
  .mixbar__seg { height: 100%; transition: width .25s; }

  /* team cards */
  .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
  .team-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); /* TOKEN-EXCEPTION-SHIFT: 14px → 16px */ }
  .team-card__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
  .team-card__month { font-weight: 600; font-size: var(--fs-body); color: var(--ink-1); }
  .team-card__target { font-size: var(--fs-body-xs); color: var(--lilac-700); font-family: "Geist Mono", monospace; margin-top: 2px; }
  .team-card__wd { font-size: var(--fs-caption); color: var(--ink-3); font-family: "Geist Mono", monospace; }
  .team-card__rows { display: flex; flex-direction: column; gap: var(--space-1-5); }
  .trow { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-body-sm); }
  .trow--founder { padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--line); }
  .trow__label { color: var(--ink-2); }
  .trow__val { font-family: "Geist Mono", monospace; font-feature-settings: "tnum"; }
  .trow__val b { color: var(--ink-1); font-weight: 600; }
  .warn { color: var(--warn); font-size: var(--fs-body-xs); }

  /* notes */
  .notes ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
  .notes li { margin: 6px 0; font-size: var(--fs-body-sm); }
  .notes li b { color: var(--ink-1); }

  /* stacked cells in table (target/real, € + %, etc.) */
  .cell-stack { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-end; font-family: "Geist Mono", ui-monospace, monospace; }
  .cell-row { display: flex; align-items: baseline; gap: var(--space-1-5); justify-content: flex-end; }

  /* AE control bar */
  .ae-control { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-body-sm); color: var(--ink-2); }
  .tr-legend { font-size: var(--fs-body-xs); color: var(--ink-3); display: inline-flex; align-items: center; gap: var(--space-1); padding-right: 10px; border-right: 1px solid var(--line); margin-right: 4px; }
  .ae-control label { font-size: var(--fs-body-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
  /* AE +/− buttons in forecast table header — sized to match .btn--sm icon-only
     (28×28) so they sit consistently next to the table density toggle and
     other sm controls. */
  .ae-btn {
    width: 28px; height: 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--duration-fast) var(--ease-standard);
  }
  .ae-btn:hover:not(:disabled) { background: var(--accent-bg); border-color: var(--accent-soft); color: var(--accent); }
  .ae-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
  .ae-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .ae-count { font-weight: 700; font-size: var(--fs-body-lg); color: var(--ink-1); font-family: "Geist Mono", monospace; min-width: 18px; text-align: center; }
  .ae-names { display: flex; gap: var(--space-1-5); margin-left: 6px; flex-wrap: wrap; }
  .ae-name-pill { background: var(--bg-2); padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--fs-body-xs); font-weight: 500; color: var(--ink-1); border-bottom: none; }
  .ae-name-pill:hover { background: var(--lilac-200); }

  /* AE columns in table */
  .forecast th.ae-col, .forecast td.ae-col { background: rgba(155, 123, 255, 0.025); border-left: 1px solid var(--line); }
  .ae-target-mini { font-size: var(--fs-caption); color: var(--ink-3); font-style: italic; justify-content: flex-end; font-feature-settings: "tnum"; }
  .ae-need-pill { display: inline-flex; flex-direction: row; align-items: baseline; gap: var(--space-1-5); font-weight: 600; font-size: var(--fs-body-xs); line-height: 1.2; flex-wrap: nowrap; justify-content: flex-end; max-width: 100%; }
  .ae-need-pill__num { display: inline-flex; align-items: baseline; gap: var(--space-px); white-space: nowrap; }
  .ae-need-pill b { font-family: "Geist Mono", monospace; font-weight: 700; }
  .ae-need-pill--ok { color: var(--good); }
  .ae-need-pill--ok b { color: var(--good); }
  .ae-need-pill--gap { color: var(--warn); }
  .ae-need-pill--gap b { color: var(--warn); }
  .ae-need-label { font-weight: 400; font-style: italic; color: var(--ink-3); /* TOKEN-EXCEPTION: 9.5px sub-caption */ font-size: 9.5px; white-space: nowrap; }

  /* ─── <Segmented> primitive (Phase B1) ─────────────────────────────────────
     Single token-driven segmented control. Replaces seg-toggle, head__lang,
     view-toggle. Per-item accent variants for the scenario picker.
     Spec: _snapshots/2026-05-09-design-system/PRIMITIVES.md
     ───────────────────────────────────────────────────────────────────────── */
  .segmented {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
    box-sizing: border-box;
  }
  .segmented__item {
    background: transparent;
    border: 0;
    padding: var(--space-1-5) var(--space-3);
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
    font-family: inherit;
    font-size: var(--fs-body-xs);
    font-weight: var(--fw-semibold);
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .segmented__item:not(:last-child) { border-right: 1px solid var(--border-strong); }
  .segmented__item:hover:not(:disabled):not(.segmented__item--on) {
    background: var(--bg-elevated);
    color: var(--text-primary);
  }
  .segmented__item:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    z-index: var(--z-base);
    position: relative;
  }
  .segmented__item:disabled,
  .segmented__item[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .segmented__item--on {
    background: var(--accent);
    color: var(--text-on-accent);
  }
  /* Per-item accents (scenario picker: pess=danger, base=accent, opt=success). */
  .segmented__item--on.segmented__item--accent-danger  { background: var(--danger);  color: var(--text-on-warn); }
  .segmented__item--on.segmented__item--accent-success { background: var(--success); color: var(--text-on-accent); }
  .segmented__item--on.segmented__item--accent-warning { background: var(--warning); color: var(--text-on-warn); }
  .segmented__item--on.segmented__item--accent-info    { background: var(--info);    color: var(--text-on-accent); }

  /* Sizes */
  /* Sizes — calibrated so all "sm" segmented controls (lang, MRR/ARR, scenarios,
     view-toggle) read identically across the dashboard, and all "md" controls
     (timeframe header + DealsView) read identically. Heights flex to fill outer
     containers when needed (e.g. row-2-controls forces 30px), otherwise natural. */
  .segmented--sm .segmented__item { padding: var(--space-1-5) var(--space-3); font-size: var(--fs-body-xs); }
  .segmented--md .segmented__item { padding: var(--space-2) var(--space-4); font-size: var(--fs-body); }

  /* Icon glyph + label rhythm */
  .segmented__icon { display: inline-flex; align-items: center; line-height: 1; }
  .segmented__label { display: inline-flex; align-items: center; line-height: 1; }

  /* Expandable items: wrap is the positioning anchor for the dropdown panel.
     The wrapper itself is the same flex child the button used to be — borders
     and corners stay on the button so visual rhythm is unaffected. */
  .segmented__item-wrap {
    position: relative;
    display: inline-flex;
  }
  /* Borders are owned by .segmented__item via :not(:last-child) — and the
     wrapper is a flex child that contains the button. To keep the inter-item
     border in the right place when wrapped, move the rule onto the wrap. */
  .segmented .segmented__item-wrap:not(:last-child) > .segmented__item {
    border-right: 1px solid var(--border-strong);
  }
  /* (the original :not(:last-child) on .segmented__item still works for
      non-wrapped variants — it's a more specific path that only applies when
      the wrapper is in play). */
  .segmented__item:not(:last-child) { border-right: 1px solid var(--border-strong); }

  .segmented__chev {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-1);
    font-size: 0.85em;
    line-height: 1;
    opacity: 0.85;
    transition: transform var(--duration-fast) var(--ease-standard);
  }
  .segmented__item--expanded .segmented__chev { transform: rotate(180deg); }

  /* Dropdown panel anchored under the active expandable item. Uses the same
     visual language as bell-panel / modal — token-driven shadow + radius.
     The CONTENT inside the dropdown stays as call-site-owned classes
     (.tf-menu__item, .tf-menu__pill, .tf-menu__row) until those primitives
     get their own pass. */
  .segmented__dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    min-width: 220px;
    z-index: var(--z-dropdown);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--space-1);
    animation: segmented-dropdown-in var(--duration-base) var(--ease-decel);
  }
  @keyframes segmented-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Backwards-compat shim: keep old .seg-toggle class working until migrated.
     Maps to the new primitive's visuals so pre-migration code still renders. */
  .seg-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
  .seg-toggle__btn { background: transparent; border: 0; padding: var(--space-1-5) var(--space-2); cursor: pointer; color: var(--text-muted); display: inline-flex; align-items: center; transition: all var(--duration-fast); }
  .seg-toggle__btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
  .seg-toggle--mode .seg-toggle__btn { padding: var(--space-1-5) var(--space-3); font-family: var(--font-mono); font-size: var(--fs-body-xs); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
  .seg-toggle__btn.on { background: var(--accent); color: var(--text-on-accent); }
  .seg-toggle__btn:not(:last-child) { border-right: 1px solid var(--border-strong); }
  /* Compact table mode: hide secondary columns */
  .table-card--compact .compact-hide { display: none !important; }

  /* Month Detail Card (mdc) — focused single-month view */
  .mdc-grid { display: grid; gap: var(--space-4); }
  .mdc-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 880px; margin: 0 auto; }
  .mdc-grid--qtr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 1024px) { .mdc-grid--qtr { grid-template-columns: 1fr; } }
  .mdc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: var(--space-4); }
  .mdc--current { border-color: var(--lilac-500); box-shadow: 0 0 0 3px rgba(155, 123, 255, 0.12); }
  .mdc--good { border-left: 3px solid var(--good); }
  .mdc--ok { border-left: 3px solid var(--warn-mid); }
  .mdc--bad { border-left: 3px solid var(--warn); }
  .mdc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
  .mdc__title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
  .mdc__title h2 { margin: 0; /* TOKEN-EXCEPTION: 22px KPI-display variant, between h2(20) and h1(24) */ font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
  .mdc__pill { /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: var(--radius-sm); background: var(--lilac-700); color: white; letter-spacing: 0.06em; }
  .mdc__pill--lock { background: var(--ink-2); }
  .mdc__seas { font-size: var(--fs-body-xs); color: var(--ink-3); display: flex; align-items: center; gap: var(--space-0-5); font-weight: 500; }
  /* Each cell stacks label/value/sub. Reserve a 2-line min-height on the label so
     even single-line labels (e.g. "Churn") align with two-line ones (e.g. "Add MRR Target").
     This keeps EOM TARGET, EOM REAL, ADD MRR TARGET, CHURN baselines consistent across cells. */
  .mdc__hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); padding: var(--space-4); /* TOKEN-EXCEPTION-SHIFT: 14px → 16px */ background: var(--bg-2); border-radius: var(--radius-lg); }
  .mdc__hero-cell { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .mdc__cell-label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2; min-height: 24px; display: flex; align-items: flex-start; }
  .mdc__cell-value { /* TOKEN-EXCEPTION: 22px KPI-display variant, between h2(20) and h1(24) */ font-size: 22px; font-weight: 600; font-family: "Geist Mono", monospace; letter-spacing: -0.02em; line-height: 1.1; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
  .mdc__cell-sub { font-size: var(--fs-body-xs); color: var(--ink-3); font-family: "Geist Mono", monospace; }
  .mdc__na { color: var(--ink-3); font-style: italic; font-weight: 400; }
  .mdc__delta-pill { font-size: var(--fs-body-xs); font-weight: 700; font-family: "Geist Mono", monospace; padding: 2px 8px; border-radius: var(--radius-md); }
  .mdc__delta-pill--good { background: var(--good); color: white; }
  .mdc__delta-pill--ok { background: var(--warn-soft-bg); color: var(--warn-soft-fg); }
  .mdc__delta-pill--bad { background: var(--warn); color: white; }
  .mdc__channels { display: flex; flex-direction: column; gap: var(--space-2); }
  .mdc__channels-head { font-size: var(--fs-body-xs); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
  .mdc__channel-list { display: flex; flex-direction: column; gap: var(--space-px); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
  .mdc__ch { display: grid; grid-template-columns: 4px 100px 1fr 16px 1fr; gap: var(--space-3); align-items: center; padding: 10px 12px; background: var(--surface); transition: background .12s; }
  .mdc__ch:hover { background: var(--bg-2); }
  .mdc__ch:not(:last-child) { border-bottom: 1px solid var(--line); }
  .mdc__ch-bar { height: 22px; border-radius: var(--radius-sm); }
  .mdc__ch-name { font-size: var(--fs-body); font-weight: 600; color: var(--ink-1); }
  .mdc__ch-target, .mdc__ch-real { font-family: "Geist Mono", monospace; font-size: var(--fs-body); font-weight: 500; display: inline-flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
  .mdc__ch-target { color: var(--ink-2); }
  .mdc__ch-real { color: var(--ink-1); font-weight: 600; }
  .mdc__ch-arrow { color: var(--ink-3); font-size: var(--fs-body-lg); text-align: center; }
  .mdc__footer { display: flex; flex-direction: column; gap: var(--space-3); padding-top: 8px; border-top: 1px solid var(--line); }
  .mdc__footer-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-body-sm); }
  .mdc__footer-label { font-size: var(--fs-body-xs); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
  .mdc__ae-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  @media (max-width: 720px) { .mdc__ae-grid { grid-template-columns: 1fr; } .mdc__hero { grid-template-columns: repeat(2, 1fr); } .mdc__ch { grid-template-columns: 4px 1fr 1fr; } .mdc__ch-arrow { display: none; } }
  .mdc__ae { background: var(--bg-2); padding: 8px 10px; border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1); }
  .mdc__ae-name { font-size: var(--fs-body-sm); font-weight: 600; color: var(--ink-1); }
  .mdc__ae-numbers { display: flex; align-items: center; gap: var(--space-1-5); font-family: "Geist Mono", monospace; font-size: var(--fs-body-sm); flex-wrap: wrap; }
  .mdc__ae-target { color: var(--ink-3); }
  .mdc__note { font-size: var(--fs-body-sm); color: var(--ink-2); background: rgba(247, 220, 130, 0.18); padding: 8px 10px; border-radius: var(--radius-md); line-height: 1.5; }
  /* Others column: N/A target + real total */
  .others-na { color: var(--ink-3); font-style: italic; font-weight: 500; font-size: var(--fs-body); }
  .ae-th-stack { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-0-5); }
  .ae-th-name { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
  .ae-th-person { font-size: var(--fs-body-xs); font-weight: 500; color: var(--lilac-700); text-transform: none; letter-spacing: 0; opacity: 0.95; min-width: 50px; text-align: right; }
  .ae-th-person:empty::before { content: "+ name"; color: var(--ink-3); font-style: italic; opacity: 0.6; }

  /* current month + hire row */
  .forecast tr.row--current { background: linear-gradient(to right, rgba(110,72,224,0.10), rgba(110,72,224,0.04)) !important; }
  .forecast tr.row--current td { border-bottom-color: var(--lilac-400); font-weight: 500; }
  .forecast tr.row--current td.num { font-weight: 500; }
  .forecast tr.row--current .month__name { color: var(--lilac-700); font-weight: 700; }
  .forecast tr.row--current .v-primary { font-weight: 500; }
  .forecast tr.row--current .others-total { font-weight: 500; }
  .now-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; background: var(--lilac-700); color: white; /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; font-weight: 700; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.08em; }
  .hire-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; background: rgba(196, 82, 63, 0.12); color: var(--warn); /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; font-weight: 700; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.06em; font-family: "Geist Mono", monospace; }
  .forecast tr.row--hire td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

  /* Others column — 2 rows.
     Row 1 (primary): forecast total. Click toggles inline edit (Setup + Upsell inputs
       in the SAME row — no third row, no clutter). Hover shows a subtle dotted underline
       to communicate clickability without screaming.
     Row 2 (secondary): HubSpot real chips (Setup actual + Upsell actual + Other AEs).
       Each chip is hidden when 0 so future months render a single "—".
     Both rows use the cell-row's native font so the chips visually match the rest of
     the table. */
  .others-total-row { justify-content: flex-end; }
  .others-total {
    font-family: "Geist Mono", monospace;
    font-weight: 400;
    color: var(--ink-1);
    font-size: var(--fs-body);
  }
  .others-total--clickable {
    cursor: pointer;
    border-bottom: 1px dotted transparent;
    transition: border-bottom-color 120ms ease;
  }
  .others-total--clickable:hover { border-bottom-color: var(--lilac-400); }
  .others-pair__sep { color: var(--ink-3); opacity: 0.55; font-weight: 500; padding: 0 1px; }

  /* Inline forecast edit (replaces .others-total in-place when editing). Same font &
     size as the total so the row doesn't shift vertically when toggling modes. */
  .others-fcst-edit {
    display: inline-flex; gap: var(--space-1); flex-wrap: nowrap; align-items: baseline;
    font-family: "Geist Mono", monospace;
    font-weight: 400;
    color: var(--ink-1);
    font-size: var(--fs-body);
  }

  /* HubSpot REAL row: rely fully on .cell-row + .v-secondary defaults (display:flex,
     gap: var(--space-1-5), baseline alignment, 11px ink-3) so it matches every other channel cell's
     bottom row pixel-for-pixel. No overrides. */
  /* Real chips inherit color + weight from .others-real-row so all three sub-values
     look identical — no bold standout for the "Other AEs" chip. */
  .others-real { cursor: help; }
  .others-real__empty { opacity: 0.45; }

  /* th label stack (e.g. "Target / Real") */
  .th-stack { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-px); line-height: 1.2; }
  .th-stack .th-sub { /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.7; }

  /* info-icon */
  .info-i { display: inline-block; margin-left: 4px; font-size: var(--fs-body-xs); color: var(--ink-3); cursor: help; }

  /* editable in muted/secondary contexts shouldn't show heavy underline */
  .v-secondary .editable, .v-secondary .editable:hover { border-bottom-color: transparent; }
  .v-secondary .editable:hover { background: var(--lilac-200); border-bottom-color: var(--lilac-300); }

  /* === Scenarios — bottom 3-card section === */
  .scenari { margin-bottom: 20px; }
  .scenari__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
  @media (max-width: 1024px) { .scenari__grid { grid-template-columns: 1fr; } }
  .scn-card {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 14px 16px; display: flex; flex-direction: column; gap: var(--space-3);
    transition: border-color .15s, box-shadow .15s;
  }
  .scn-card--pessimistic { border-left: 3px solid var(--warn); }
  .scn-card--base { border-left: 3px solid var(--lilac-700); }
  .scn-card--optimistic { border-left: 3px solid var(--good); }
  .scn-card--active { background: var(--surface); border-color: var(--lilac-500); box-shadow: 0 0 0 2px rgba(155,123,255,0.15); }
  .scn-card__head { display: flex; align-items: center; gap: var(--space-2); }
  .scn-card__emoji { /* TOKEN-EXCEPTION: 18px between body-lg(14) and h2(20) */ font-size: 18px; line-height: 1; }
  .scn-card__title { font-weight: 600; font-size: var(--fs-body-lg); color: var(--ink-1); }
  .scn-card__live { margin-left: auto; font-size: var(--fs-caption); color: var(--lilac-700); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .scn-card__eoy { display: flex; flex-direction: column; gap: var(--space-1); padding: 8px 10px; background: var(--bg-2); border-radius: var(--radius-md); }
  .scn-card--active .scn-card__eoy { background: rgba(155,123,255,0.06); }
  .scn-card__eoy-label { font-size: var(--fs-caption); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
  .scn-card__eoy-row { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
  .scn-card__eoy-value { font-family: "Geist Mono", monospace; /* TOKEN-EXCEPTION: 22px KPI-display variant, between h2(20) and h1(24) */ font-size: 22px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.02em; }
  .scn-card__pct { font-family: "Geist Mono", monospace; font-size: var(--fs-body-xs); font-weight: 600; }
  .scn-card__notes { display: flex; flex-direction: column; gap: var(--space-1-5); }
  .scn-card__note { display: flex; flex-direction: column; gap: var(--space-0-5); font-size: var(--fs-body-xs); }
  .scn-card__note-label { /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ink-3); }
  .scn-card__note-label--pro { color: var(--good); }
  /* Was --warn-mid (#C77A2D, 3.2:1) — failed WCAG AA for small text on --bg.
     --ae-700 (#A35F12) passes 4.7:1. Border + background uses of --warn-mid keep it. */
  .scn-card__note-label--con { color: var(--ae-700); }
  .scn-card__note-label--risk { color: var(--warn); }
  .scn-card__note-text { font-size: var(--fs-body-xs); color: var(--ink-2); line-height: 1.4; min-height: 14px; }
  .scn-card__base-info { font-size: var(--fs-body-xs); color: var(--ink-3); line-height: 1.45; font-style: italic; }
  .scn-card__activate { margin-top: auto; background: var(--lilac-700); color: white; border: 0; border-radius: var(--radius-md); padding: var(--space-2); font-family: inherit; font-size: var(--fs-body-xs); font-weight: 600; cursor: pointer; transition: background .12s; }
  .scn-card__activate:hover { background: var(--lilac-600); }

  /* Scenario selector at top — match the height/padding of the MRR/ARR toggle next to it */
  .seg-toggle--scenario .seg-toggle__btn { padding: 6px 10px; font-size: var(--fs-body); line-height: 1; }
  .seg-toggle--scenario .seg-toggle__btn.on--pess { background: var(--warn); color: white; }
  .seg-toggle--scenario .seg-toggle__btn.on--base { background: var(--lilac-700); color: white; }
  .seg-toggle--scenario .seg-toggle__btn.on--opt { background: var(--good); color: white; }

  /* Sparkline (mini-trend in status cards) */
  .sparkline { display: block; width: 100%; height: 26px; margin-top: 6px; }
  .sparkline__line { fill: none; stroke: var(--lilac-600); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .sparkline__dot { fill: var(--lilac-700); }
  .sparkline__area { fill: var(--lilac-300); opacity: 0.25; }

  /* MoM delta badge in table cells — light, no background, just colored text */
  .mom-delta { /* TOKEN-EXCEPTION: 9px microcopy, between caption(10) and below */ font-size: 9px; font-family: "Geist Mono", monospace; font-weight: 500; padding: 0 2px; margin-left: 4px; vertical-align: middle; opacity: 0.75; }
  .mom-delta--up { color: var(--good); }
  .mom-delta--down { color: var(--warn); }
  .mom-delta--flat { color: var(--ink-3); }

  /* Chart past/future shading */
  .chart__past-zone { fill: var(--bg-2); opacity: 0.5; }

  /* footer */
  .foot { text-align: center; color: var(--ink-3); font-size: var(--fs-body-xs); margin-top: 24px; font-family: "Geist Mono", monospace; display: flex; align-items: center; justify-content: center; gap: var(--space-1); flex-wrap: wrap; }
  .foot__sep { opacity: 0.5; }
  .foot__disclaimer { color: var(--warn); opacity: 0.85; font-weight: 500; }

  /* C6: stale .kpis 1500/1100 rules removed — the canonical .kpis grid lives
     above (4 cols at md+, 2 cols at sm–md, 1 col below sm). assump-grid kept. */
  @media (max-width: 1024px) {
    .assump-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 700px) {
    .app { padding: var(--space-4); }
    .assump-grid { grid-template-columns: repeat(2, 1fr); }
    .head__top { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  }

  /* ─── Error boundary recovery UI ─────────────────────────────────────────
     Shown when ANY uncaught render error escapes Dashboard. Without this UI
     the user sees a blank white page; with it they get a Reload + Reset path
     plus the technical details collapsible. */
  .error-boundary {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--bg, var(--lilac-50));
  }
  .error-boundary__card {
    max-width: 560px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border, var(--line));
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 8px 32px rgba(86, 72, 134, 0.08);
    text-align: center;
  }
  .error-boundary__icon {
    /* TOKEN-EXCEPTION: 40px error-boundary icon */ font-size: 40px;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--error-icon);
  }
  .error-boundary__card h2 {
    margin: 0 0 8px 0;
    font-size: var(--fs-h2);
    font-weight: 600;
    color: var(--ink-1);
  }
  .error-boundary__msg {
    color: var(--ink-2, var(--ink-3));
    font-size: var(--fs-body-lg);
    margin: 0 0 20px 0;
    word-break: break-word;
  }
  .error-boundary__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .error-boundary__details {
    text-align: left;
    margin-top: 16px;
    border-top: 1px dashed var(--border, var(--line));
    padding-top: 16px;
  }
  .error-boundary__details summary {
    cursor: pointer;
    font-size: var(--fs-body-sm);
    color: var(--ink-3);
    user-select: none;
  }
  .error-boundary__details pre {
    margin-top: 12px;
    padding: var(--space-3);
    background: var(--bg, var(--lilac-50));
    border-radius: var(--radius-md);
    font-family: "Geist Mono", monospace;
    font-size: var(--fs-body-xs);
    line-height: 1.5;
    color: var(--ink-2, var(--ink-3));
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 240px;
    overflow-y: auto;
  }
  body.theme--dark .error-boundary__card {
    background: var(--error-surface-dk);
    border-color: var(--error-border-dk);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }
  body.theme--dark .error-boundary__details pre {
    background: var(--error-pre-bg-dk);
  }