/* ─────────────────────────────────────────────────────────────────────────
   Ward's World CRM — Design System (Classic identity, dark base tokens)
   ─────────────────────────────────────────────────────────────────────────

   Classic has two explicit user-selectable variants. This file owns the
   shared system and the Dark Classic :root tokens. theme-light.css loads last
   and overrides those semantic tokens under [data-theme="classic-light"].
   There is no prefers-color-scheme path and no DodgerBlue palette.

   Source-of-truth token values live in this file. The wardcrm-classic-ui
   skill (.claude/skills/wardcrm-classic-ui/) mirrors them inline so agents
   building UIs don't have to grep — if values move, both files move in the
   same PR.

   Companion: WardCRM-Brain/Frontend/Design System.md (vault, human-facing).

   ─── LOAD-BEARING PIXELS — DO NOT TOKENIZE ──────────────────────────────
   These values are tuned for specific layouts. Replacing them with
   --space-* or --radius-* variables will break the rhythm.

     · Probate / intake spreadsheet grid:    36px 1fr 150px 110px 80px 200px
     · Calendar cell minimum height:         minmax(110px, auto)
     · Today-pill min-width:                 22px (with border-radius: 999)
     · Spreadsheet row height:               28px (--ss-cell-h, density-aware)
     · Owner-circle diameter:                22px
     · Section-strip height:                 30px
     · Sticky-toolbar height:                44px
     · Section-nav strip height:             32px
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Client Portal handoff palette, local preview. Geometry and typography unchanged. */
  --color-on-grey: #F0F4F8;
  /* Opt-in identity lettering only. Black/white guarantee normal-text
     contrast against arbitrary opaque staff colors; body text stays Classic. */
  --color-avatar-ink-dark: #000000;
  --color-avatar-ink-light: #FFFFFF;
  --color-dashboard-weekend: #E8E8E8;
  --dashboard-header-control-height: calc(var(--space-4) * 2);
  --dashboard-day-height: calc(var(--space-5) * 2.25);
  --dashboard-day-text: calc(var(--text-xs) * 1.5);
  --dashboard-day-caption: calc(var(--text-3xs) * 1.5);
  --dashboard-payment-end-radius: var(--radius-xl);
  --dashboard-name-outline: 0.35px;
  --gradient-dashboard-payment-below: linear-gradient(90deg, #5F9E67, #BEE8C1);
  --gradient-dashboard-payment: linear-gradient(90deg, #C39A55, #F3E1B2);
  --color-dashboard-payer: #F0F4F8;
  --shadow-dashboard-payment: 2px 3px 4px rgba(0, 0, 0, 0.32);
  --shadow-dashboard-payer: 0 1px 1.5px rgba(0, 0, 0, 0.45);
  --dashboard-detail-width: min(100vw, max(50vw, 42rem));
  --matter-billing-summary-value-size: 2rem;
  --matter-billing-summary-value-min-size: 1.25rem;
  --matter-billing-summary-label-size: calc(var(--matter-billing-summary-value-size) * 0.5);
  --iolta-grid-min-width: 47.25rem;
  --iolta-matter-column-width: 10rem;
  --iolta-amount-column-width: 6.5rem;
  --iolta-transfer-column-width: 8rem;
  --iolta-notes-column-min: 12rem;
  /* ── Layered backgrounds (BG / BG_2 / BG_3 / ELEVATED) ────────────── */
  --color-bg-primary:    #102A43;                /* Page bg */
  --color-bg-secondary:  #1B3A5B;                /* Sidebar, panels */
  --color-bg-tertiary:   #243B53;                /* Cards, list items, headers (was #162B47) */
  --color-bg-hover:      #243B53;
  --color-bg-active:     #334E68;
  --color-bg-elevated:   #1B3A5B;  /* Floating: modals, popovers */
  --color-bg-surface:    #1B3A5B;                /* Card surface */
  --color-bg-input:      #102A43;   /* Form input fill */
  --color-bg-drawer-content: var(--color-bg-primary); /* Matter drawer content background */
  --color-scrim:         rgba(10,31,51,0.6);   /* Modal overlay backdrop */

  /* Shared control and content sizing */
  --control-height-sm:   2.25rem;
  --content-width-sm:    40rem;

  /* Borders */
  --color-border:        #2C4A68;
  --color-border-light:  rgba(159,179,200,0.18);
  --color-border-subtle: #243B53;
  --color-border-strong: #334E68;

  /* Text — parchment cream, not pure white */
  --color-text-primary:   #F0F4F8;   /* Body, headings */
  --color-text-secondary: #D9E2EC;   /* Muted body */
  --color-text-muted:     #9FB3C8;   /* Labels, captions */
  --color-text-dim:       #BCCCDC;   /* Placeholders, disabled */
  --color-text-on-accent: var(--color-on-gold);

  /* Gold accents (antique gold) */
  --color-accent:           #E9B949;
  --color-accent-hover:     #F7D070;                           /* Bright variant for hover / focus */
  --color-accent-light:     rgba(233,185,73,0.12);          /* Soft fill */
  --color-accent-light-hi:  rgba(233,185,73,0.20);          /* Active fill */
  --color-accent-border:    rgba(233,185,73,0.4);          /* Hairline + section divider */

  /* Ward orb navy portal: stable dark-spectrum colors that remain available
     when the surrounding application surface is Classic Light. */
  --ward-orb-portal-bg:     #0A1628;
  --ward-orb-portal-core-shadow:#5C3E13;
  --ward-orb-portal-gold:   #C9A05F;
  --ward-orb-portal-gold-hi:#E6C47F;
  --ward-orb-portal-gold-glow:#F3DDA4;
  --ward-orb-portal-cream:  #F0E6D2;
  --ward-orb-portal-blue:   #68B5F2;
  --ward-orb-portal-red:    #F08C7C;
  --ward-orb-portal-green:  #7BD69B;
  --ward-orb-portal-violet: #B383EA;

  /* Ward's flowing particle identity, shared by both Classic appearances. */
  --ward-orb-icon-size:      40px;
  --ward-orb-compact-size:   80px;
  --ward-orb-medium-size:    120px;
  --ward-orb-large-size:     320px;
  --ward-orb-page-size:      520px;
  --ward-orb-hero-size:      360px;
  --ward-orb-preview-size:   720px;
  --ward-orb-login-size:     549px;
  --ward-orb-mobile-size:    160px;
  --ward-brand-width:       140px;
  --ward-touch-size:        44px;
  --ward-chat-presence-gap:  360px;
  --ward-chat-card-shadow:   var(--shadow-xl), 0 0 0 1px var(--color-border-light);
  --ward-orb-flow-highlight: #FFD164;
  --ward-orb-flow-gold:      #D49A1B;
  --ward-orb-flow-bronze:    #A56712;
  --ward-orb-flow-shade:     #6E3510;
  --ward-orb-flow-blue:      #245199;
  --ward-orb-flow-azure:     #4B8ACC;
  --ward-orb-flow-amethyst:  #8C57BF;
  --ward-orb-flow-light:     #FFF5CE;
  --ward-orb-flow-core:      #17130D;
  --ward-orb-flow-halo:      rgba(204, 148, 31, 0.16);
  --gradient-ward-orb-flow: radial-gradient(circle at 30% 25%, var(--ward-orb-flow-highlight), var(--ward-orb-flow-gold) 35%, var(--ward-orb-flow-bronze) 62%, var(--ward-orb-flow-shade) 82%, var(--ward-orb-flow-core));

  /* Finance Truth surfaces stay on the navy Classic evidence palette even
     when the surrounding shell uses the user's Classic Light preference.
     These semantic tokens keep the Figma-approved financial surfaces stable
     without changing the global theme or duplicating literals in components. */
  --finance-truth-bg-primary:       #0A1628;
  --finance-truth-bg-secondary:     #0F1E33;
  --finance-truth-bg-tertiary:      #162840;
  --finance-truth-border:           #1F3A5C;
  --finance-truth-border-light:     rgba(31, 58, 92, 0.5);
  --finance-truth-border-strong:    #2D4A6F;
  --finance-truth-text-primary:     #F0E6D2;
  --finance-truth-text-secondary:   #D4C9B0;
  --finance-truth-text-muted:       #8090A5;
  --finance-truth-text-dim:         #576B85;
  --finance-truth-accent:           #C9A05F;
  --finance-truth-accent-light:     rgba(201, 160, 95, 0.08);
  --finance-truth-accent-light-hi:  rgba(201, 160, 95, 0.16);
  --finance-truth-gold-border:      rgba(201, 160, 95, 0.45);
  --finance-truth-shadow-md:        0 8px 24px rgba(2, 8, 18, 0.32);
  --finance-truth-owner-counsel:    #A7D4AA;
  --finance-truth-status-done-bg:       rgba(127, 181, 130, 0.18);
  --finance-truth-status-done-fg:       #A7D4AA;
  --finance-truth-status-done-border:   rgba(127, 181, 130, 0.35);
  --finance-truth-status-done-dot:      #7FB582;
  --finance-truth-status-progress-bg:   rgba(212, 168, 96, 0.18);
  --finance-truth-status-progress-fg:   #E6C580;
  --finance-truth-status-progress-border: rgba(212, 168, 96, 0.35);
  --finance-truth-status-progress-dot:  #D4A860;
  --finance-truth-status-pending-bg:    rgba(128, 144, 165, 0.10);
  --finance-truth-status-pending-fg:    #B8C4D0;
  --finance-truth-status-pending-border: rgba(128, 144, 165, 0.25);
  --finance-truth-status-pending-dot:   #6B7B92;
  --finance-truth-status-blocked-bg:    rgba(201, 122, 109, 0.18);
  --finance-truth-status-blocked-fg:    #E6A096;
  --finance-truth-status-blocked-border: rgba(201, 122, 109, 0.35);
  --finance-truth-status-blocked-dot:   #C97A6D;

  /* Primary gold gradient + inset highlight (CTA buttons, SAVED button, view-switcher pill) */
  --gradient-gold-primary: linear-gradient(180deg, #E9B949, #E9B949);
  --shadow-gold-inset:     inset 0 0 0 transparent;
  --color-on-gold:         #102A43;                              /* White text/icons on gold-gradient fills (Gold System v2) */
  --gold-btn-border:       #C99A2E;            /* 1px tone border on gold solid buttons */

  /* Ward identity: deliberately CSS-only so the mark adds no image, WebGL,
     canvas-render, or animation-loop cost to ordinary CRM pages. */
  --gradient-ward-gold-ball: radial-gradient(circle at 32% 28%, #F3DDA4 0%, #E6C47F 18%, #C9A05F 54%, #8A632C 78%, #5C3E13 100%);
  --shadow-ward-gold-ball: inset -8px -10px 18px rgba(43, 26, 6, 0.42), inset 5px 5px 10px rgba(255, 244, 210, 0.28), 0 0 14px rgba(201, 160, 95, 0.24);
  --shadow-ward-gold-ball-thinking: inset -8px -10px 18px rgba(43, 26, 6, 0.42), inset 5px 5px 10px rgba(255, 244, 210, 0.28), 0 0 20px rgba(230, 196, 127, 0.42);
  --shadow-ward-gold-ball-speaking: inset -8px -10px 18px rgba(43, 26, 6, 0.42), inset 5px 5px 10px rgba(255, 244, 210, 0.28), 0 0 24px rgba(230, 196, 127, 0.52);
  --shadow-ward-gold-ball-listening: inset -8px -10px 18px rgba(43, 26, 6, 0.42), inset 5px 5px 10px rgba(255, 244, 210, 0.28), 0 0 18px rgba(201, 160, 95, 0.34);

  /* Grey solid button — the ONLY non-gold solid color (Gold System v2 §4) */
  --gradient-grey-primary: linear-gradient(180deg, #243B53, #243B53);
  --grey-btn-border:       #486581;

  /* Secondary accents — warmed for Classic */
  --color-accent-green:        #3EBD93;
  --color-accent-green-light:  rgba(62,189,147,0.14);
  --color-accent-purple:       #B89F7A;
  --color-accent-purple-light: rgba(184, 159, 122, 0.12);

  /* Suggested-fact blue — a distinct steel blue that reads on the navy surface.
     Deliberately NOT --color-info (which is gold in this theme). Used only by the
     Ward Coaching "Suggested Facts" cards (blue = unconfirmed) before they flip to
     --status-done green once the attorney adds them to the notes. */
  --color-fact-blue:        #5ED0FA;
  --color-fact-blue-bg:     rgba(94,208,250,0.12);
  --color-fact-blue-border: rgba(94,208,250,0.4);

  /* ── Status palette (semantic) ────────────────────────────────────
     Five statuses × four channels. Use these for status pills, dots,
     row borders, and any "what state is this in" UI. Never solid red /
     green / yellow blocks. */
  --status-done-bg:        rgba(62,189,147,0.14);
  --status-done-fg:        #3EBD93;
  --status-done-border:    rgba(62,189,147,0.45);
  --status-done-dot:       #3EBD93;

  --status-progress-bg:    rgba(233,185,73,0.12);
  --status-progress-fg:    #E9B949;
  --status-progress-border: rgba(233,185,73,0.4);
  --status-progress-dot:   #E9B949;

  --status-pending-bg:     rgba(94,208,250,0.12);
  --status-pending-fg:     #5ED0FA;
  --status-pending-border: rgba(94,208,250,0.4);
  --status-pending-dot:    #5ED0FA;

  --status-blocked-bg:     rgba(239,142,142,0.14);
  --status-blocked-fg:     #FFBDBD;
  --status-blocked-border: rgba(239,142,142,0.4);
  --status-blocked-dot:    #FFBDBD;

  --status-na-bg:          transparent;
  --status-na-fg:          #576B85;
  --status-na-border:      rgba(128, 144, 165, 0.18);
  --status-na-dot:         #3D4754;

  /* Live-other (blue): a call or message another teammate is handling RIGHT
     NOW. Promoted from --color-fact-blue (#6E93C4) so "someone else is on it"
     reads distinctly without touching the gold/green/red status vocabulary.
     Never DodgerBlue. */
  --status-live-other-bg:     rgba(110, 147, 196, 0.16);
  --status-live-other-fg:     #9FBEE6;
  --status-live-other-border: rgba(110, 147, 196, 0.38);
  --status-live-other-dot:    #6E93C4;

  /* Front Desk converted: durable source-to-matter provenance. Blue is never
     ownership on the Switchboard; ownership is rendered as an owner chip. */
  --status-converted-bg:      rgba(110, 147, 196, 0.16);
  --status-converted-fg:      #9FBEE6;
  --status-converted-border:  rgba(110, 147, 196, 0.38);
  --status-converted-dot:     #6E93C4;

  /* Front Desk follow-up rows stay neutral navy in every shell palette. */
  --front-desk-followup-bg:     #0F1E33;
  --front-desk-followup-fg:     #F0E6D2;
  --front-desk-followup-muted:  #D4C9B0;

  /* ── Owner-chip palette ──────────────────────────────────────────
     Five legal roles. Use for responsibility badges, attribution
     pills. Each role has a foreground color, a low-alpha background,
     and a matching border. */
  --owner-pr-color:       #E6C47F;
  --owner-pr-bg:          rgba(201, 160, 95, 0.08);
  --owner-pr-border:      rgba(201, 160, 95, 0.25);

  --owner-counsel-color:  #A7D4AA;
  --owner-counsel-bg:     rgba(127, 181, 130, 0.10);
  --owner-counsel-border: rgba(127, 181, 130, 0.25);

  --owner-court-color:    #C5D5E8;
  --owner-court-bg:       rgba(140, 165, 200, 0.10);
  --owner-court-border:   rgba(140, 165, 200, 0.25);

  --owner-cpa-color:      #D5C2E8;
  --owner-cpa-bg:         rgba(165, 140, 200, 0.10);
  --owner-cpa-border:     rgba(165, 140, 200, 0.25);

  --owner-client-color:   #E8D2C2;
  --owner-client-bg:      rgba(200, 165, 140, 0.10);
  --owner-client-border:  rgba(200, 165, 140, 0.25);

  /* ── Event-kind palette ──────────────────────────────────────────
     Four kinds for calendar chips and timeline markers. Each has a
     color (text + icon), a low-alpha background, and a matching
     border tint. */
  --event-consult-color:    #C9A05F;
  --event-consult-bg:       rgba(201, 160, 95, 0.18);
  --event-consult-border:   rgba(201, 160, 95, 0.45);

  --event-meeting-color:    #E6C580;
  --event-meeting-bg:       rgba(230, 197, 128, 0.16);
  --event-meeting-border:   rgba(230, 197, 128, 0.40);

  --event-comm-out-color:   #A7C9E8;
  --event-comm-out-bg:      rgba(140, 180, 230, 0.14);
  --event-comm-out-border:  rgba(140, 180, 230, 0.35);

  --event-comm-in-color:    #C7A8E0;
  --event-comm-in-bg:       rgba(180, 140, 210, 0.14);
  --event-comm-in-border:   rgba(180, 140, 210, 0.35);

  /* ── Status (legacy aliases — kept for older component CSS) ──────
     Prefer the semantic --status-* tokens above for new work. These
     remain so billing.css, matter-drawer.css, etc. stay valid. */
  --color-success:      #3EBD93;
  --color-success-bg:   rgba(62,189,147,0.14);
  --color-warning:      #E9B949;
  --color-warning-bg:   rgba(233,185,73,0.12);
  --color-danger:       #BA2525;
  --color-danger-bg:    rgba(239,142,142,0.14);
  --color-info:         #5ED0FA;
  --color-info-bg:      rgba(94,208,250,0.12);

  /* Badge text */
  --color-accent-text:  #E9B949;
  --color-success-text: #3EBD93;
  --color-warning-text: #F7D070;
  --color-danger-text:  #FFBDBD;
  --color-info-text:    #5ED0FA;
  --color-neutral-text: var(--color-text-muted);

  /* Money direction is independent of workflow/reconciliation status. */
  --color-money-in:       var(--color-success-text);
  --color-money-out:      var(--color-danger-text);
  --color-money-transfer: var(--color-info-text);
  --color-money-neutral:  var(--color-text-primary);

  /* Backward-compat aliases (billing.css, matter-drawer.css, chat-drawer.css) */
  --color-primary:    var(--color-accent);
  --color-primary-bg: var(--color-accent-light);

  /* ── Typography ──────────────────────────────────────────────────
     Three families, fixed. No new font families without an ADR.
     Headings serif, body sans, all numbers / IDs / dates / money mono. */
  --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    var(--font-body);
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

  --text-3xs:  0.625rem;    /* 10px */
  --text-2xs:  0.6875rem;   /* 11px */
  --text-xs:   0.75rem;     /* 12px */
  --text-field: 0.8125rem;   /* 13px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 0.9375rem;   /* 15px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.375rem;    /* 22px */
  --text-2xl:  1.75rem;     /* 28px */
  --text-3xl:  2.25rem;     /* 36px */
  --line-height-relaxed: 1.5;
  --wchat-message-font-size: 1rem;
  --wchat-message-line-height: 1.6;
  --wchat-column-max-width: 47.5rem;
  --ward-chat-library-width: 20rem;
  --ward-chat-library-overlay-width: 22rem;
  --ward-chat-library-breakpoint: 64rem;
  --ward-chat-response-shadow: var(--shadow-md), 0 0 0 1px var(--color-accent-border);
  --ward-chat-artifact-inset: var(--space-6);
  --ward-chat-composer-shadow: var(--shadow-lg), 0 0 0 1px var(--color-border-strong);
  --ward-chat-composer-focus-shadow: var(--ward-chat-composer-shadow), 0 0 0 3px var(--color-accent-light);

  --tracking-wide:   0.06em;
  --tracking-widest: 0.12em;
  --letter-spacing-wide: var(--tracking-wide);
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --litigation-table-text-increase: 2pt;
  --shadow-status-done-glow: 0 0 var(--space-2) var(--status-done-border);

  --transition-fast: 150ms ease;

  /* Spacing scale — for content rhythm only.
     Layout-critical pixel widths (grid templates, cell heights) live
     as literal pixel values in component CSS; do NOT replace them
     with these. See "LOAD-BEARING PIXELS" comment at top of file. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius scale — formal, tight. No 20+ pixel rounding. */
  --radius-xs:   4px;     /* Dense UI: bar tracks, cells, status pills */
  --radius-sm:   6px;     /* Inputs, small buttons */
  --radius-md:   10px;    /* Cards */
  --radius-lg:   14px;    /* Panels */
  --radius-xl:   18px;    /* Large cards */
  --radius-full: 9999px;  /* Pills, owner circles */
  --radius-pill: var(--radius-full);
  --border-width-thin: 1px;

  /* Shadows — dark, opaque. Never DodgerBlue-tinted. */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.28);
  --shadow-md: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.24);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.24);
  --shadow-xl: 0 2px 6px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.28);
  --shadow-up: 0 -1px 3px rgba(0,0,0,0.3), 0 -8px 24px rgba(0,0,0,0.24); /* bottom-anchored panels (matter drawer) */
  --shadow-up-deep: 0 -3px 8px rgba(0,0,0,0.4), 0 -18px 44px rgba(0,0,0,0.34); /* persistent bottom dock */
  --shadow-gold-glow-sm: 0 0 1.2rem rgba(201, 160, 95, 0.16);
  /* Staff avatar depth: a lift shadow behind the circle plus the smoke tint
     that fades up from its base (see .ward-avatar::after). */
  --shadow-avatar: 0 1px 2px rgba(0,0,0,0.35), 0 5px 12px rgba(0,0,0,0.30);
  --avatar-smoke: rgba(0,0,0,0.32);

  /* Depth tokens (Gold System v2 §7) — hairline top highlight + layered soft shadow.
     --shadow-card: cards / panels / header. --shadow-input: input & select fills AND
     bar tracks (inset wells). --shadow-bar: every bar FILL — an inset-molded recipe,
     because a plain drop shadow is clipped by the track's overflow:hidden. */
  --shadow-card:  var(--shadow-md);
  --shadow-input: inset 0 1px 2px rgba(0,0,0,0.12);
  --shadow-bar:   inset 0 0 0 transparent;

  /* Pipeline stage colors — antique gold progression */
  --pipeline-new-lead:          #E6C47F;
  --pipeline-consult-scheduled: #D4B072;
  --pipeline-active-client:     #C9A05F;
  --pipeline-matter-complete:   #A88145;
  --pipeline-closed:            #576B85;

  /* Layout */
  --sidebar-width: 240px;
  --header-height: 56px;
  --header-search-width: 15.625rem;
  --header-tools-width: 20rem;
  /* Fluid two-pane panel tracks — see .claude/skills/wardcrm-classic-ui/references/responsive.md */
  --panel-list-min: 300px;
  --panel-list-max: 466px;
  --panel-list-ideal: 38%;
  --panel-rail: 300px;
  --panel-rail-min: 260px;
  --intake-workbench-notes-width: 280px;
  --intake-workbench-ward-width: 300px;
  --intake-workbench-content-max-width: 72rem;
  /* Notes + intake stop growing here; At a glance takes the rest of a wide
     screen (owner call on the depth board, 2026-10-20). */
  --intake-workbench-main-cap: 96rem;
  --intake-field-max-width: 18rem;
  --tracker-col-xs: 7.5rem;
  --tracker-col-sm: 9rem;
  --tracker-col-md: 11rem;
  --tracker-col-lg: 14rem;
  --tracker-col-xl: 20rem;
  --tracker-col-xxl: 24rem;
  --intake-workbench-header-height: 58px;
  --intake-workbench-artifacts-height: 44px;

  /* Invoice print sheet: a paper page in both Classic variants, drawn from
     the Light Classic palette (navy ink, gold rules). theme-light.css can
     override these like any other token; the sheet itself uses no literals. */
  --inv-print-paper: #FFFFFF;
  --inv-print-ink: #102A43;
  --inv-print-muted: #486581;
  --inv-print-rule: #D9E2EC;
  --inv-print-accent: #8A6614;
  --inv-print-accent-rule: #C99A2E;
  --inv-print-head-bg: #102A43;
  --inv-print-head-ink: #F0F4F8;
  --inv-print-void: #BA2525;

  /* Responsive panel standard — see .claude/skills/wardcrm-classic-ui/references/responsive.md
     Master-detail list track: minmax(var(--panel-list-min), min(var(--panel-list-max), var(--panel-list-ideal)))
     The percent cap is what makes panels SHRINK before any breakpoint fires.
     Views override these on their root class; do not fork new one-off widths. */
  --panel-list-min: 300px;
  --panel-list-max: 466px;
  --panel-list-ideal: 38%;
  --panel-rail: 300px;
  --panel-rail-min: 260px;

  --z-sticky: 20;
  --z-modal: 10000;
  --leading-relaxed: 1.6;

  /* ════════════ DESIGN-SYSTEM ADDITIONS ════════════════════════════════
     Extracted from the dashboard redesign handoff. Additive only — same
     naming convention as the tokens above. Consumed by the "Path to Your
     Bonus" tracker, pipeline/funnel bars, and the ambient body glow.
     ─────────────────────────────────────────────────────────────────── */

  /* Accent shades (gold/green variants for dense data UI) */
  --color-accent-soft:      #F7D070;             /* gold for small numbers / labels */
  --color-accent-deep:      #C99A2E;             /* gold gradient end-stop */
  --color-accent-green-hi:  #65D6AD;             /* "beat target" green */
  --color-cell-empty:       #3c4d66;             /* "·" placeholder in data cells */
  --color-on-gold-deep:     #102A43;             /* text inside gold bar segments */
  --color-selection:        rgba(233,185,73,0.3);

  /* Ambient body glow (tokenizes the radial overlay below) */
  --color-ambient-navy:     transparent;    /* top radial */
  --color-ambient-gold:     transparent;  /* bottom-right radial */

  /* Horizontal data-bar sweeps (bonus tracker, pipeline, funnels) */
  --gradient-gold-sweep:  linear-gradient(90deg, #C99A2E, #E9B949);
  --gradient-green-sweep: linear-gradient(90deg, #199473, #3EBD93);
  --gradient-red-sweep:   linear-gradient(90deg, #BA2525, #D64545);  /* "today" bar */

  /* Motion — one house easing + duration scale */
  --ease:      cubic-bezier(.22, .61, .36, 1);  /* entrances, bar fills, transitions */
  --duration-feedback: 400ms;
  --dur-fast:  .14s;   /* row/cell hover */
  --dur-base:  .18s;   /* card hover, tab color */
  --dur-slow:  .5s;    /* view entrance, bar width */
  --dur-fill:  1.1s;   /* bar grow-in on mount */
  --dur-count: .9s;    /* number count-up */
  --dur-flash: 1.05s;  /* behind-pace pill pulse period */
}

/* ─── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient warmth — radial gradient overlay on body */
body {
  background:
    radial-gradient(ellipse at top, var(--color-ambient-navy) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, var(--color-ambient-gold) 0%, transparent 50%),
    var(--color-bg-primary);
}

/* ─── Heading typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.heading {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
  font-weight: 600;
}
h1 { font-size: var(--text-3xl); line-height: 1.2; }
h2 { font-size: var(--text-2xl); line-height: 1.3; }
h3 { font-size: var(--text-xl);  line-height: 1.4; }
h4 { font-size: var(--text-base); line-height: 1.4; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

/* Optional section guidance: hover, keyboard focus, or tap. Essential status
   and corrective actions stay visible in the section itself. */
.ward-info { position: relative; display: inline-flex; color: var(--color-text-muted); }
.ward-info > summary { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); list-style: none; cursor: pointer; border-radius: var(--radius-sm); font-size: var(--text-lg); }
.ward-info > summary::-webkit-details-marker { display: none; }
.ward-info > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: var(--space-1); }
.ward-info__content { display: none; position: absolute; top: 100%; left: 0; z-index: var(--z-sticky); width: 20rem; max-width: calc(100vw - var(--space-8)); padding: var(--space-3); background: var(--color-bg-elevated); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: var(--color-text-secondary); font: 400 var(--text-sm)/1.5 var(--font-body); }
.ward-info__content p { margin: 0; }
.ward-info__content p + p { margin-top: var(--space-2); }
.ward-info[open] > .ward-info__content { display: block; }
@media (max-width: 640px) { .ward-info__content { left: auto; right: 0; } }

/* ─── Facts strip (design contract pattern B) ───────────────────────────
   Labeled figures in a row: the label whispers, the figure speaks. First
   consumer: the Matters area band. */
.ward-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.ward-facts__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ward-facts__item > dt { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
.ward-facts__item > dd { margin: 0; font-family: var(--font-mono); font-size: 20px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--color-text-primary); white-space: nowrap; }
.ward-facts__item.is-warn > dd { color: var(--status-blocked-fg); }

/* ─── Selection + scrollbar ─────────────────────────────────────────── */
::selection {
  background: rgba(201, 160, 95, 0.35);
  color: #F0E6D2;
}

/* Brass scrollbars everywhere (owner call 2026-08-06). The old grey thumb read
   as chrome from another app, and on the light theme it nearly vanished. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gradient-gold-primary);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-width: auto; scrollbar-color: var(--color-accent) transparent; }

/* ─── Utility ───────────────────────────────────────────────────────── */
.font-mono { font-family: var(--font-mono); }

/* ─── Form select arrow (gold) ──────────────────────────────────────── */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23C9A05F' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
}

/* Native <select> dropdown menu — force readable contrast on the OS-default
   white menu. Without this, Classic's parchment text rendered against the
   white menu background was unreadable on Chrome / Firefox / Edge. */
select option,
.ifc-input option,
.ifc-select option {
  background-color: #1a2238;
  color: #F0E6D2;
}

/* Gold System v2 §8 — kill the browser's default (purple/blue) option highlight;
   selected/hover options read gold instead. macOS ignores option styling — acceptable. */
select { accent-color: var(--color-accent); }
select option:checked { background: linear-gradient(var(--color-accent), var(--color-accent)); color: #FFFFFF; }
select option:hover { background: var(--color-accent-light-hi); }

/* ─── Tab system ────────────────────────────────────────────────────────
   THE tab language for WardCRM. One vocabulary, three sizing modes. When a new
   surface needs tabs, use these classes instead of inventing another set; when
   the tab look changes, it changes HERE and every surface follows.

     .ward-tabs                strip: folder tabs sitting on a gold rule
     .ward-tab                 one tab: outlined, surface fill, quiet label
     .ward-tab.is-active       panel fill, open bottom edge, gold outline
     .ward-tab--add            an ACTION, not a place (dashed, natural width)

   Sizing (pick one on the strip):
     .ward-tabs--fill          every tab an equal share of the row
     .ward-tabs--fixed         every tab the same width, shrinking only when
                               the row runs out of room
     (no modifier)             each tab sized to its own label

   Load-bearing details, learned the hard way:
   - Uniform font-weight. Bolding the active tab changes its width and shoves
     the whole strip sideways on every click.
   - A tab is a BLOCK with line-height centering, not a flex box: text-overflow
     only ellipsises inline content, and a centered flex label clips at BOTH
     ends ("rsonal Guardi") instead of trailing off.
   - The right-edge shadow is what makes them read as overlapping folder tabs
     (owner call 2026-08-07; it was left-edge before, flipped with the folder
     restyle that also made tabs 25% taller: 28px -> 35px).
   The matter drawer's own inner tabs (matter-drawer.css) are the same design,
   kept separate only because their markup is test-pinned; change both together.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --tab-height: 44px;
  --tab-radius: var(--radius-sm);
  --tab-bg: var(--color-bg-hover);
  --tab-hover-bg: var(--color-bg-active);
  --tab-selected-bg: var(--color-bg-secondary);
  --tab-shadow: 3px 0 4px -2px rgba(0, 0, 0, 0.28);
}

/* ─── Matter intake depth (owner-approved "proposed depth", 2026-10-20) ───
   One elevation vocabulary for the matter drawer: paper sheets lift off a
   recessed well, the open folder tab and the active card carry a gold edge,
   controls rise on hover and press in when clicked. Consumed by
   matter-intake-depth.css. theme-light.css re-declares every value. */
:root {
  --depth-sheet: 0 0 0 1px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.30), 0 3px 8px -2px rgba(0,0,0,0.34), 0 10px 20px -10px rgba(0,0,0,0.50);
  --depth-well: inset 0 3px 6px -3px rgba(0,0,0,0.40);
  --depth-card: 0 1px 2px rgba(0,0,0,0.30), 0 2px 5px -2px rgba(0,0,0,0.36);
  --depth-fold: 0 3px 8px -2px rgba(0,0,0,0.34), 0 10px 20px -10px rgba(0,0,0,0.50);
  --depth-fold-in: 0 1px 2px rgba(0,0,0,0.30), 0 4px 10px -2px rgba(0,0,0,0.36), 0 12px 24px -12px rgba(0,0,0,0.50);
  --depth-raised: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.28), 0 3px 6px -2px rgba(0,0,0,0.30);
  --depth-raised-hover: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.30), 0 8px 16px -6px rgba(0,0,0,0.44);
  --depth-pressed: inset 0 2px 4px rgba(0,0,0,0.36);
  --depth-gold: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(138,102,20,0.30), 0 1px 2px rgba(0,0,0,0.30), 0 4px 10px -3px rgba(0,0,0,0.45);
  --depth-gold-hover: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(138,102,20,0.30), 0 2px 4px rgba(0,0,0,0.30), 0 10px 18px -6px rgba(0,0,0,0.55);
  --depth-gold-pressed: inset 0 2px 5px rgba(107,79,15,0.45);
  --depth-input: inset 0 1px 2px rgba(0,0,0,0.24);
  --depth-focus-ring: 0 0 0 3px rgba(233,185,73,0.30);
  --depth-tab: 3px 0 4px -2px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -10px 12px -10px rgba(0,0,0,0.30);
  --depth-tab-active: inset 0 2px 0 #E9B949, 0 -4px 10px -4px rgba(0,0,0,0.40), 4px 0 8px -6px rgba(0,0,0,0.44);
  --depth-seg: inset 0 1px 3px rgba(0,0,0,0.30);
  --depth-seg-on: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.30), 0 3px 8px -2px rgba(0,0,0,0.36);
  --depth-chip: 0 1px 2px rgba(0,0,0,0.26), 0 2px 5px -2px rgba(0,0,0,0.30);
  --depth-chip-hover: 0 2px 4px rgba(0,0,0,0.28), 0 8px 14px -6px rgba(0,0,0,0.44);
  --depth-cbar: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.30), 0 6px 14px -6px rgba(0,0,0,0.44);
  --depth-dock: 0 -3px 8px rgba(0,0,0,0.40), 0 -18px 44px rgba(0,0,0,0.34);
  --depth-slide-over: 0 0 0 1px rgba(0,0,0,0.30), -8px 0 16px -4px rgba(0,0,0,0.36), -28px 0 56px -12px rgba(0,0,0,0.55);
  --depth-handle: inset 3px 0 0 #E9B949, -4px 0 12px -4px rgba(0,0,0,0.44), -12px 0 24px -12px rgba(0,0,0,0.50);
  --depth-handle-hover: inset 4px 0 0 #E9B949, -6px 0 16px -4px rgba(0,0,0,0.50), -16px 0 32px -12px rgba(0,0,0,0.56);
  --depth-scrim: rgba(0,0,0,0.40);
  --depth-gold-edge: #C99A2E;
  --depth-command-navy: #102A43;
  --depth-command-navy-hover: #243B53;
  --depth-command-navy-ink: #F0F4F8;
}

.ward-tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  /* No left inset: the first tab lines up with the card's left edge, the way
     the section-header tabs do (owner call 2026-08-07). The inset made every
     tabbed block look nudged in from its own card. */
  /* That 1px of bottom padding is the rule's own lane. The tabs sit on the
     CONTENT box, so the lane stays clear beneath the closed ones and the line
     shows under them -- they read as filed behind the open tab. The open tab
     reaches into the lane via its -1px margin and covers it. */
  padding: 0 var(--space-1) 1px 0;
  /* The rule is a background layer, NOT border-bottom. `overflow-x: auto`
     clips children at the PADDING box, and a border sits outside it, so the
     open tab's overlap was being clipped away and could never cover the rule --
     a line stayed drawn under the open folder. Painted here it lands inside
     the clip, where the open tab's own fill reaches it. */
  border-bottom: 0;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  overflow-x: auto;
  scrollbar-width: none;
}
.ward-tabs::-webkit-scrollbar { display: none; }

.ward-tab {
  display: block;
  /* ONE tab height across the strip family (owner call 2026-08-07): a
     single-line tab (Executor, Trust, Attorney Notes) stands exactly as tall as
     a two-line person tab, so a row never looks half-built. Single lines center
     via line-height; .ward-tab--person swaps that for its stacked pair. */
  box-sizing: border-box;
  height: var(--tab-height);
  min-height: var(--tab-height);
  min-width: 0;
  padding: 0 var(--space-3);
  text-align: center;
  border: 1px solid var(--color-border-strong);
  border-bottom: 0;
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
  /* Closed folders recede into the blue-grey ground. */
  background: var(--tab-bg);
  box-shadow: var(--tab-shadow);
  color: var(--color-text-secondary);
  font: inherit;
  /* One point up from 11px (owner call 2026-08-07): tab labels are names, and
     names were the smallest text on the screen. The role line under a person's
     name stays at 9px so the two lines keep their hierarchy. */
  font-size: 12px;
  font-weight: 600;
  /* AFTER `font: inherit` on purpose: the font shorthand resets line-height,
     so declared above it this centering silently became `inherit`. Centers a
     single-line label inside the 44px tab. */
  line-height: calc(var(--tab-height) - 2px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Hover deepens the closed tab's ground; the open tab stays paper. */
.ward-tab:hover {
  background: var(--tab-hover-bg);
  color: var(--color-text-primary);
}
.ward-tab.is-active:hover {
  background: var(--tab-selected-bg);
}

/* A CLOSED tab keeps the rule under it, so it reads as sitting BEHIND the card
   (owner call 2026-08-07). Only the open tab breaks that line. The rule is the
   strip's background layer, so nothing is needed here beyond leaving it be --
   this comment marks the intent so a future change does not "tidy" the closed
   tabs into overlapping too and flatten the whole effect. */

/* The OPEN tab has no line under it: it overlaps the strip's gold rule by the
   rule's own width and stacks above it, so its base opens straight into the
   card below and tab + card read as one folder (owner call 2026-08-07, after
   the section-header tabs landed that way). The extra bottom padding keeps the
   label centered despite the negative margin. */
/* OPEN tab: the card's own surface, so tab and card are one sheet of paper
   with nothing between them. Its ink is the body ink, not gold-on-gold. */
.ward-tab.is-active {
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
  padding-bottom: 1px;
  border-color: var(--color-accent);
  background: var(--tab-selected-bg);
  color: var(--color-text-primary);
  box-shadow: var(--tab-shadow);
}

.ward-tabs--fill > .ward-tab { flex: 1 1 0; }
.ward-tabs--fixed > .ward-tab { flex: 0 1 11rem; }

/* An add tab is an ACTION, and a quiet one until you reach for it (owner call
   2026-08-07): grey and dashed at rest so the gold in the strip belongs to the
   records, then gold on hover/focus and while it is being pressed. */
.ward-tab--add {
  flex: 0 1 auto;
  border-style: dashed;
  border-color: var(--color-border-strong);
  /* Grey with body ink (owner call 2026-08-07). Neutral, NOT the closed-tab
     gold: an add tab is an action beside the records, not one more folder. */
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.ward-tab--add:hover,
.ward-tab--add:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.ward-tab--add:active {
  border-color: var(--color-accent);
  background: var(--gradient-gold-primary);
  color: var(--color-on-gold);
}

/* Leading icon needs real space from the label: the markup's trailing space
   collapses, so the gap is set here rather than with &nbsp; in every caller. */
.ward-tab > .ph,
.ward-tab__name > .ph {
  margin-right: var(--space-1);
  vertical-align: -1px;
}

/* A tab naming a PERSON says what they are to the matter underneath the name
   (owner call 2026-08-07): Petitioner, Spouse, Child, an heir's relationship.
   Two stacked BLOCKS, each ellipsising on its own -- the single-line tab keeps
   its line-height centering, so the two shapes never fight. */
.ward-tab--person {
  min-height: var(--tab-height);
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 1.25;
}
.ward-tab__name,
.ward-tab__role {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ward-tab__role {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ─── Intake form section headers ───────────────────────────────────── */
/* Gold border + gold icon + gold title across the board. Each section's
   inline per-section color is overridden so the header reads as gold. */
.ifc-section-header {
  border-bottom-color: var(--color-accent) !important;
}
.ifc-section-header > i,
.ifc-section-header > .ph,
.ifc-section-header > [class*="ph-"] {
  color: var(--color-accent) !important;
}
.ifc-section-header > span {
  color: var(--color-accent) !important;
}
/* Spouse-related section headers use parchment text for stronger contrast.
   Gold-on-navy reads as muted; parchment makes spouse-owned categories pop
   when reviewing a couple's plan (Spouse, Spouse Agents, etc.). */
.ifc-section[data-section="spouse"] .ifc-section-header > span,
.ifc-section[data-section="spouse_agents"] .ifc-section-header > span {
  color: var(--color-text-primary) !important;
}
.ifc-section--completed .ifc-section-header {
  background: rgba(201, 160, 95, 0.06) !important;
}

/* Chrome/Edge/Safari autofill forces -webkit-text-fill-color: black and a
   light-blue background regardless of any inline color: rule. On the Classic
   navy theme that paints autofilled inputs (first/last name, address, city,
   state, zip on Probate Decedent and Personal sections, plus Agents) as
   unreadable black-on-blue until the field is focused. Override the special
   property and use the giant-inset-box-shadow trick to mask the autofill
   bg, plus a 9999s transition so the real background-color animation never
   visibly fires. Backlog item from 2026-05-07 surfaced specifically on
   probate intake. */
[data-theme="classic"] input:-webkit-autofill,
[data-theme="classic"] select:-webkit-autofill,
[data-theme="classic"] textarea:-webkit-autofill,
[data-theme="classic-light"] input:-webkit-autofill,
[data-theme="classic-light"] select:-webkit-autofill,
[data-theme="classic-light"] textarea:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill,
[data-theme="dark"] textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-primary) inset !important;
  caret-color: var(--color-text-primary) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ─── Assets v2 grouped sub-panel headings ──────────────────────────── */
/* Gold across the board: text, icons, totals, AND the left-border sliver. */
.ifc-assets-group__title,
.ifc-assets-group__total {
  color: var(--color-accent) !important;
}
.ifc-assets-group__header > i,
.ifc-assets-group__header > .ph,
.ifc-assets-group__header > [class*="ph-"] {
  color: var(--color-accent) !important;
}
.ifc-assets-group {
  border-left-color: var(--color-accent) !important;
}

/* Handout asset group titles (Real Estate / Individual / Spouse / Joint /
   Other in Client Visuals panel) and Beneficiary Designation Checklist
   group titles share the same gold treatment. */
.estate-visuals__asset-group-title,
.estate-visuals__bdc-group-title {
  border-left-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}
.estate-visuals__asset-group-title i,
.estate-visuals__bdc-group-title i {
  color: var(--color-accent) !important;
}

/* Matter Summary owns no Intake controls. Hide the Intake suggestions FAB
   while the Summary compatibility route or drawer tab is visible. */
body:has(.matter-drawer--open .matter-drawer__living-intake-mount) #ward-intake-fab-row,
body:has(.matter-summary-page) #ward-intake-fab-row {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Gold System v2 — shared motion primitives (§2 orb, §9 motion additions)
   House easing: cubic-bezier(.22,.61,.36,1) (--ease). Any consumer can reuse
   these keyframes; component CSS should not redefine them. Everything here is
   disabled under prefers-reduced-motion (guard at the bottom of this block).
   ═══════════════════════════════════════════════════════════════════════ */

/* Antique-gold orb — the one theatrical element. Breathe = idle; ring/bounce
   are the interactive states (listening / speaking). */
@keyframes orbBreathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 14px 2px rgba(201, 160, 95, 0.35); }
  50%      { transform: scale(1.07); box-shadow: 0 0 26px 6px rgba(230, 196, 127, 0.55); }
}
@keyframes orbRing {
  0%   { box-shadow: 0 0 0 0 rgba(201, 160, 95, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(201, 160, 95, 0); }
}
@keyframes orbBounce {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.14); }
  60%      { transform: scale(0.95); }
  80%      { transform: scale(1.05); }
}

/* Bar grow-in — scaleX(0→1), transform-origin:left (set by the consumer). */
@keyframes barFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Behind-pace pill — pulses blocked-bg ↔ warm red + soft glow. On-pace / bonus
   pills stay static. */
@keyframes flashRed {
  0%, 100% { background: var(--status-blocked-bg); box-shadow: none; }
  50%      { background: rgba(201, 122, 109, 0.30); box-shadow: 0 0 12px 2px rgba(201, 122, 109, 0.30); }
}

/* Ward typing indicator — three gold dots, staggered 0.15s by the consumer. */
@keyframes wardDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* Ambient orbs — two fixed blurred radials drifting slowly (flag-gated in JS). */
@keyframes ambientDrift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(70px, 50px); } }
@keyframes ambientDrift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-60px, -40px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* Evidence summaries: hierarchy and aligned comparisons.
 * Design reference: docs/design/refactoring-ui-reference.md */
.ward-evidence { container-type: inline-size; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-secondary); color: var(--color-text-primary); padding: var(--space-4); }
.ward-evidence__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.ward-evidence__eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.ward-evidence h3 { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; }
.ward-evidence__muted { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.ward-evidence__status { padding: var(--space-2) var(--space-3); border: 1px solid var(--status-pending-border); border-radius: var(--radius-sm); background: var(--status-pending-bg); color: var(--status-pending-fg); font-size: var(--text-sm); font-weight: 600; }
.ward-evidence__status.is-complete { background: var(--status-done-bg); color: var(--status-done-fg); border-color: var(--status-done-border); }
.ward-evidence__body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-6); padding-top: var(--space-4); }
.ward-evidence__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ward-evidence__table caption, .ward-evidence__section-title { text-align: left; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; margin: 0 0 var(--space-3); }
.ward-evidence__table th, .ward-evidence__table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); }
.ward-evidence__table th { text-align: left; color: var(--color-text-secondary); font-weight: 500; }
.ward-evidence__table thead th:not(:first-child), .ward-evidence__table td { text-align: right; }
.ward-evidence__table td { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ward-evidence__counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.ward-evidence__count { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ward-evidence__count dt { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); }
.ward-evidence__count dd { margin: var(--space-2) 0 0; font: 600 var(--text-xl) var(--font-mono); overflow-wrap: anywhere; }
.ward-evidence__count.is-attention { background: var(--status-pending-bg); border-color: var(--status-pending-border); color: var(--status-pending-fg); }
.ward-evidence__footer { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-secondary); }
.ward-evidence__footer span { font-family: var(--font-mono); }
.ward-evidence__issues { margin: var(--space-4) 0 0; padding-left: var(--space-5); font-size: var(--text-sm); }
@container (max-width: 46rem) { .ward-evidence__body { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 26rem) { .ward-evidence__table th, .ward-evidence__table td { padding: var(--space-2) var(--space-1); } .ward-evidence__table { font-size: var(--text-xs); } }

/* ─── Staff avatar (docs/design/wardcrm-design-system.md, Pattern G) ────
   The one way to show a staff member. Photo, else initials on the person's
   color, else a neutral icon. Name lives in title/aria-label; visible text
   is opt-in via .ward-avatar-name. Rendered by components/ward-avatar.js. */
.ward-avatar {
  --ward-avatar-size: 36px;
  --ward-avatar-fill: var(--color-bg-tertiary);
  --ward-avatar-ink: var(--color-text-primary);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--ward-avatar-size);
  height: var(--ward-avatar-size);
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--ward-avatar-fill);
  color: var(--ward-avatar-ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(var(--ward-avatar-size) * 0.38);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  vertical-align: middle;
  border: 1px solid transparent;
  padding: 0;
  cursor: default;
  user-select: none;
  box-shadow: var(--shadow-avatar);
}
/* Smoke base: a translucent tint over the lower half of the circle that
   fades to nothing on the way up, so the face reads as lifted, not flat. */
.ward-avatar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(to top, var(--avatar-smoke), transparent);
  pointer-events: none;
}
.ward-avatar--empty::after, .ward-avatar--more::after { content: none; }
.ward-avatar--sm { --ward-avatar-size: 28px; }
.ward-avatar--md { --ward-avatar-size: 36px; }
.ward-avatar--lg { --ward-avatar-size: 48px; }
.ward-avatar--photo { border-color: var(--color-border); background: var(--color-bg-tertiary); }
.ward-avatar--photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ward-avatar--initials { --ward-avatar-ink: var(--color-on-gold); border-color: var(--color-border-light); }
.ward-avatar--empty { --ward-avatar-fill: var(--color-bg-tertiary); --ward-avatar-ink: var(--color-text-muted); border-color: var(--color-border); font-size: calc(var(--ward-avatar-size) * 0.5); }
.ward-avatar--more { --ward-avatar-fill: var(--color-bg-tertiary); --ward-avatar-ink: var(--color-text-secondary); border-color: var(--color-border); font-size: calc(var(--ward-avatar-size) * 0.34); }
/* Six deterministic tones for users without a stored color. Same person,
   same tone, every screen. Tone 0 is the gold system color. */
.ward-avatar--tone-0 { --ward-avatar-fill: var(--color-accent); }
.ward-avatar--tone-1 { --ward-avatar-fill: var(--color-accent-green); }
.ward-avatar--tone-2 { --ward-avatar-fill: var(--status-live-other-dot); }
.ward-avatar--tone-3 { --ward-avatar-fill: var(--color-accent-purple); }
.ward-avatar--tone-4 { --ward-avatar-fill: var(--color-warning); }
.ward-avatar--tone-5 { --ward-avatar-fill: var(--status-pending-dot); --ward-avatar-ink: var(--color-text-primary); }
button.ward-avatar { cursor: pointer; }
button.ward-avatar:hover { border-color: var(--color-accent); }
button.ward-avatar:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Avatar + visible name, for surfaces with room (drawer headers, people lists). */
.ward-avatar-name { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; vertical-align: middle; }
.ward-avatar-name__text { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ward-avatar-name--sm .ward-avatar-name__text { font-size: var(--text-xs); }
/* Overlapping stack for attendees and teams; the +N bubble carries the rest. */
.ward-avatar-group { display: inline-flex; align-items: center; }
.ward-avatar-group .ward-avatar { border-color: var(--color-bg-secondary); box-shadow: 0 0 0 1px var(--color-border-light), var(--shadow-avatar); }
.ward-avatar-group .ward-avatar + .ward-avatar { margin-left: calc(var(--ward-avatar-size) * -0.25); }

/* Shared monetary figures. Apply direction from source meaning, not status. */
.ward-money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ward-money.ward-money--in { --ward-money-color: var(--color-money-in); color: var(--ward-money-color); }
.ward-money.ward-money--out { --ward-money-color: var(--color-money-out); color: var(--ward-money-color); }
.ward-money.ward-money--transfer { --ward-money-color: var(--color-money-transfer); color: var(--ward-money-color); }
.ward-money.ward-money--neutral { --ward-money-color: var(--color-money-neutral); color: var(--ward-money-color); }
.ward-money.ward-money--unknown { --ward-money-color: var(--color-text-muted); color: var(--ward-money-color); }