/*
 * tokens.css — Signal design-system TOKENS (D-UILAW-R2 CAR-1).
 *
 * WHY THIS FILE EXISTS: these blocks used to live in index.html's inline <style>. The founder's dark-ground
 * bug (dark surfaces painting the light #F7F6F1) was NOT a serve-path transform — Lane A's B-035 forensic
 * proved with wire bytes that the box and the public serve a byte-identical index.html that DID carry the
 * dark ground, so delivery was always intact. The real cause was an in-browser CSS PARSE ABORT: the dark
 * block's L-011 comment held a token glob whose embedded comment-closer sequence ended the comment early;
 * per CSS error recovery the trailing prose became a malformed declaration that consumed through the next
 * semicolon, swallowing the dark-ground declaration on the very next line (proven with rrweb-cssom, the
 * parser jsdom uses: the broken comment dropped it, the repaired comment keeps #08080A). Relocating the
 * tokens onto the content-hashed CSS pipe is motivated by PARSE SAFETY (a standalone stylesheet, parsed on
 * its own, not embedded in a large inline block), SINGLE SOURCE, and PARSE-LEVEL TESTABILITY
 * (served-tokens.build.test.ts postcss-parses the hashed asset and RED-proves the dark ground survives).
 * The malformed comment itself is repaired in the dark-theme block below.
 *
 * RULES (unchanged from when these lived inline):
 *   - SINGLE SOURCE (L-011): this file is the ONLY definition of the surface/text/border/accent token
 *     family. Do NOT re-declare them elsewhere (patches.css links later and would shadow these).
 *   - ORDER MATTERS: the light (root) block first, then the dark-theme block, then the palette blocks —
 *     equal specificity, so source order is what makes the dark/palette overrides win. Preserved verbatim.
 *   - The pre-paint theme-init SCRIPT stays inline in index.html (it sets the theme + palette attributes on
 *     the html element before first paint); this file only carries the declarations it points the cascade at.
 *
 * Imported FIRST in src/index.tsx so it is emitted early in the bundle. Values are byte-identical to the
 * pre-move inline source (D-UILAW-R2 R-doc carries the normalized diff-proof).
 */
/* ── Signal Design System ── */
:root {
  /* ═══ CAR-FONT-ONE-VOICE (F-093, 2026-08-04) — THE ONE TYPE VOICE ═══════════════════════════════
     Founder decision F-093: Space Grotesk (display) + Sora (body/UI) is the canonical type voice of
     the ENTIRE product. The two prior faces are retired; this file is the ONE source that names them.

     NOTE ON BREVITY: vite builds this project with `minify: false`, so every byte of this comment is
     SHIPPED to the browser. The full rationale — the disjoint-namespace root cause, the per-role
     metric re-derivation, and the variable-axis requirement — lives in `src/__tests__/font-one-voice.test.ts`
     (test files are not bundled) and in R-C-FONT-ONE-VOICE. Keep shipped comments short.

     THE WEIGHT AXIS IS LOAD-BEARING: --type-card-title-weight (640) and --type-label-weight (600) are
     NON-STANDARD weights that render only if the face is loaded as a VARIABLE font. index.html requests
     `wght@300..700` / `wght@100..800` for exactly this reason. The display axis tops out at 700, so
     --type-weight-heavy on a display consumer clamps there — intended, per D-TYPE-BALANCE-2. */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui:      'Sora', system-ui, sans-serif;

  /* === D-W2-FOUNDATION-1 (2026-07-23) — Studio Ink v5 NEUTRAL family, LIGHT ===
     Signal base retuned to the founder-locked v5 mockup (design/STUDIO_INK_OVERVIEW_MOCKUP_v5.html,
     ◇END-FINAL-V5-LOCKED◇), superseding D-PALETTE-WARMSTUDIO-1. v5 EXACT anchors: --ground #F7F6F1
     → surface-ground · --paper-solid #FFFFFF → surface-base · --ink #131312 → text-primary ·
     --ink-2 #55554E → text-secondary. v5 does not define raised/overlay/inset — DERIVED as a gentle
     paper ramp. tertiary is the ONE value nudged off v5 --ink-3 #8B8B84 (→ #66665F): v5's is a muted
     label tone that fails AA 4.5:1 for the small-text --text-tertiary consumers (D-132 history);
     #66665F is the closest-to-v5 value clearing AA on ALL five surface steps (4.58:1 on the deepest,
     inset). Every ratio machine-verified (contrastRatio.test.ts Tier A; anchors pinned Tier B).
     --line → border family, derived neutral. (The D-W2 font car repointed --font-ui to a neutral UI face; that face
     was RETIRED by F-093 — the canonical voice is now Space Grotesk + Sora, declared at the top.)

     === CAR-INK-1 (2026-08-01) — INK ESCALATION (founder's third "gray and blur", pre-staged at
     ◇END-S6-GLASS3-PASS◇ ruling (d) and fired at ◇END-GLASS4-CUT◇ ⑦). CF-9/G3-3 already spent the
     TYPE lever (weight/size/tracking); the founder's eye still reads the deck as washed, so this is
     the VALUE lever. Uniform target: worst-surface (--surface-inset, the hardest step in every theme)
     ratio >= 8.0:1 for secondary (decisively toward --text-primary's ~15-19:1 "ink", without merging
     into it) and >= 5.5:1 for tertiary (was barely clearing AA at 4.58/4.67 — "decorative fog"; now a
     real margin above the 4.5 floor). Same method applied to ALL 8 palettes (see the palette blocks
     below); each new hex is the old hue/saturation held fixed, lightness solved by binary search
     against its own worst surface — the "family" of each palette is preserved, only the ink weight
     rises. Hierarchy invariant preserved (light: secondary darker than tertiary; dark: tertiary dimmer
     than secondary) — contrastRatio.test.ts Tier A re-asserts this; Tier B pins updated to the new
     anchors in the same commit (a palette-VALUE change re-pins Tier B by the test's own comment). */
  --surface-ground:  #F7F6F1;
  --surface-base:    #FFFFFF;
  --surface-raised:  #F2F1EC;
  --surface-overlay: #ECEBE5;
  --surface-inset:   #E6E5DE;

  --border-subtle:   #EFEEE8;
  --border-base:     #DEDDD7;
  --border-strong:   #CBCAC3;

  --text-primary:    #131312;
  --text-secondary:  #42423d;  /* CAR-INK-1: was #55554E — inset ratio 5.95 -> 8.00 */
  --text-tertiary:   #5a5a53;  /* CAR-INK-1: was #66665F — inset ratio 4.58 -> 5.50 */
  --text-disabled:   #c2b8a8;
  --text-inverse:    #ffffff;
  /* === D-SETTINGS-POLISH-1 (2026-07-22) — --fg-on-fill (approved at ◇END-S6-SETTINGS-CODEHALF◇ ③) ===
     Opaque light ink for a foreground that sits ON a filled/saturated surface it does not
     control: toggle thumbs riding an accent/positive track, an icon on a fixed black scrim.
     WHY NOT --text-inverse: that token is "ink on the opposite theme" and FLIPS to near-black
     in dark mode, which makes these foregrounds vanish against a fill that did NOT flip.
     So, exactly like --auth-panel-* and --legal-*, this is declared ONCE in :root and
     deliberately does NOT appear in [data-theme="dark"] — it must read identically in both
     modes. It is NOT a neutral-ramp token and is untouched by palette dose changes. */
  --fg-on-fill:      #ffffff;

  --accent:          #e8590c;
  --accent-hover:    #d44e08;
  --accent-active:   #bd4507;
  /* D-276 — subtle platform tints (icon + hashtag/link only) for the
     Repurpose platform-native previews; light values. */
  --plat-x:          #1d9bf0;
  --plat-instagram:  #c13584;
  --plat-linkedin:   #0a66c2;
  --plat-facebook:   #1877f2;
  --plat-threads:    #000000;
  --accent-subtle:   #fff3ed;
  --accent-border:   #fdc09a;
  --accent-text:     #c24a08;
  /* D-UILAW-AUDIT-1 CAR-4 — text-safe semantic variants (light): the raw --positive/--info fail WCAG
     AA as small text on light surfaces (3.05 / 3.59); these clear AA (≥4.5). Completes the --accent-text
     convention. Dark keeps the bright values (they already clear AA on dark). */
  --positive-text:   #0a7a48;
  --info-text:       #0068c4;
  /* D-W2-FOUNDATION-1 — v5 signal extensions (ADDITIVE; enable v5's gradient/glow/glass surfaces
     without repurposing any existing token or redesigning a page). LIGHT values from v5 .ink-light. */
  --accent-2:        #F59E0B;                 /* v5 --signal-2: gradient partner (signal → amber) */
  --accent-soft:     rgba(232,89,12,0.09);    /* v5 --signal-soft: tinted accent wash */
  --accent-glow:     rgba(232,89,12,0.25);    /* v5 --glow: signal glow / focus bloom */
  --surface-glass:   rgba(255,255,255,0.93);  /* v5 --paper: translucent card over the dot-grid field */
  /* D-365 (A5) — avatar identity palette (palette-independent, like tier colours): a stable per-person
     tint for the monogram disc so the list isn't a column of identical discs. Honest — a colour, not a face. */
  --avatar-0-bg: #fde9e9; --avatar-1-bg: #e7f0fd; --avatar-2-bg: #e6f7ec; --avatar-3-bg: #fdf3e0; --avatar-4-bg: #f1e9fb;
  --avatar-fg: #57515f;

  /* D-131 (2026-06-12) — PRIMARY-CTA CONTRAST CONTRACT.
     Consumed ONLY by .cc-btn--primary (Button.css L48-60). Pairs
     --cta-fill with --cta-label so every state (base/hover/active)
     meets WCAG AA 4.5:1 at the button's 13px / weight 500 default
     shape. The brand `--accent` (#e8590c, 3.58:1 white-on) stays
     reserved for fills/large-text/chrome where contrast is
     sufficient at size.

     Light measured ratios on white label:
       #c24a08 = 4.99:1   (base)
       #b54309 = 5.66:1   (hover)
       #9a3a08 = 7.09:1   (active)
     See USER_APP_DESIGN_LAW §5 AMENDMENT #2. */
  --cta-fill:        #c24a08;
  --cta-fill-hover:  #b54309;
  --cta-fill-active: #9a3a08;
  --cta-label:       #ffffff;

  /* Phase 6.0c PR1 — --ai family: AI/agent semantic, distinct from
     --accent (Signal Warm Orange brand). Promotes ~37 in-codebase
     purple occurrences (Phase A.2 audit) into a first-class token. */
  --ai:              #7c3aed;
  --ai-hover:        #6d28d9;
  --ai-active:       #5b21b6;
  --ai-subtle:       #f5f3ff;
  --ai-border:       #c7d2fe;
  --ai-text:         #5b21b6;

  /* D-W2-FOUNDATION-1 — v5 status hues (LIGHT): --live→positive, --danger→negative (v5 .ink-light).
     --warning has no v5 equivalent → untouched. Status families are not AA-gated by contrastRatio.test.ts;
     --danger-strong (the D-173 danger-BUTTON red) is a separate fixed AA contract and is left unchanged. */
  --positive:         #0FA968;
  --positive-subtle:  rgba(15,169,104,0.10);
  --positive-border:  rgba(15,169,104,0.28);
  --warning:          #b45309;
  --warning-subtle:   #fffbeb;
  --warning-border:   #fcd34d;
  --negative:         #D6244A;
  --negative-subtle:  rgba(214,36,74,0.09);
  --negative-border:  rgba(214,36,74,0.28);
  /* D-173 — danger-BUTTON background: a deep red that carries WHITE
     (--text-inverse) at WCAG AA >= 4.5:1 in BOTH themes (white on
     #c4291c = 5.71:1). Distinct from --negative, which is a status
     red tuned for red TEXT/indicators (the dark --negative #f05050 is
     too bright for white text — 3.52:1 — hence this dedicated, fixed,
     palette-independent danger-button red). */
  --danger-strong:    #c4291c;
  --info:             #0D8DDB;                /* v5 --cy (LIGHT) */
  --info-subtle:      rgba(13,141,219,0.09);
  --info-border:      rgba(13,141,219,0.28);

  /* === SA-redesign Stage 0-B token rider (2026-06-03) — --model-lite ===
     Teal semantic for the "Flash-Lite" (cheapest tier) Gemini model
     badges in the SuperAdmin AI Agents tab. Preserves the cost-
     hierarchy color distinction: Pro = --ai (purple) / Flash = --info
     (blue) / Flash-Lite = --model-lite (teal). The 4 inline-literal
     teal sites flagged in Stage 0-A Class C consume this family.
     NOT a customer-app token — SA-internal only; outside the
     --positive/negative/warning/info canonical-status set on purpose
     (teal is a model-tier accent, not a status). */
  --model-lite:         #0f766e;
  --model-lite-subtle:  #f0fdfa;
  --model-lite-border:  #99f6e4;

  /* === Scale Slice 1 Premium-Density Reconcile (2026-06-03) ===
     --tier-enterprise — gold semantic for the Enterprise/Business
     plan tier badge. Founder-chosen #B8860B (DarkGoldenrod). Replaces
     the prior --accent (orange) mapping for the BUSINESS / ENTERPRISE
     PlanBadge so the top tier is visually distinct from the
     page-chrome orange (Refresh button / active-tab pill / hero Bot
     circle / etc.). Strengthens the Phase-4 orange-forward locked
     color law: orange is now RESERVED for chrome/action surfaces.

     PlanBadge tier hierarchy (FINAL form):
       FREE        → --text-tertiary (neutral gray)
       STARTER     → --info (blue)
       PROFESSIONAL→ --ai (purple)
       ENTERPRISE/ → --tier-enterprise (gold)
       BUSINESS

     Consumers: PlanBadge primitive + SA AI Agents tab's plan
     distribution segment bar + legend. NOT a customer-app token
     (SA-internal exception class — same family as --model-lite). */
  --tier-enterprise:        #B8860B;
  --tier-enterprise-subtle: #fff7e0;
  --tier-enterprise-border: #e0c060;

  /* ── Platform brand colors ── */
  --platform-twitter:            #000000;
  --platform-twitter-subtle:     rgba(0, 0, 0, 0.08);
  --platform-linkedin:           #0077b5;
  --platform-linkedin-subtle:    rgba(0, 119, 181, 0.10);
  --platform-instagram:          #e1306c;
  --platform-instagram-subtle:   rgba(225, 48, 108, 0.10);
  --platform-facebook:           #1877f2;
  --platform-facebook-subtle:    rgba(24, 119, 242, 0.10);
  --platform-threads:            #000000;
  --platform-threads-subtle:     rgba(0, 0, 0, 0.08);
  --platform-youtube:            #ff0000;
  --platform-youtube-subtle:     rgba(255, 0, 0, 0.10);
  --platform-tiktok:             #010101;
  --platform-tiktok-subtle:      rgba(1, 1, 1, 0.08);
  --platform-google:             #4285f4;
  --platform-google-subtle:      rgba(66, 133, 244, 0.10);

  /* ── Auth-archetype brand-panel (D-126 batch 1, 2026-06-12) ──
     The warm-dark marketing strip rendered on the left of Login +
     Register at desktop ≥1025px. Deliberately does NOT theme-flip
     (same as the marketing site's hero) — light + dark consumers
     render the same warm-dark stops. Single canonical declaration
     in :root cascades through both modes unchanged. */
  --auth-panel-bg-start:    #14100C;
  /* D-SETTINGS-POLISH-1 ⑤ (2026-07-22, re-derived) — was #1A1510, a ghost of the RETIRED
     patches.css dark ground that D-PALETTE-WARMSTUDIO-1 deleted. Retuned to #1a1714 = the
     midpoint of the v793 dark ramp's ground #141110 .. card #201c1a (R/G exact; blue one step
     below #211C15 so the 3-stop gradient stays STRICTLY monotonic: #14100C < #1a1714 < #211C15).
     ⚠ THE RAMP OF RECORD IS v793 (dose B). Dose C was REJECTED by the founder and its branch is
     parked, never deployed — do NOT re-derive this against C values. Contrast on this stop
     moves ≤0.25 (auth-panel-fg 15.98→15.73, muted-strong 6.86→6.75). */
  --auth-panel-bg-mid:      #1a1714;
  --auth-panel-bg-end:      #211C15;
  --auth-panel-fg:          #F5F0E8;
  --auth-panel-muted:       #786E5E;
  --auth-panel-muted-strong:#A89E8E;
  --auth-panel-glow:        rgba(216, 90, 48, 0.06);

  --shadow-xs:    0 1px 2px rgba(26,24,20,0.06);
  --shadow-sm:    0 1px 3px rgba(26,24,20,0.08), 0 1px 2px rgba(26,24,20,0.05);
  --shadow-md:    0 4px 8px rgba(26,24,20,0.08), 0 2px 4px rgba(26,24,20,0.05);
  --shadow-lg:    0 12px 24px rgba(26,24,20,0.10), 0 4px 8px rgba(26,24,20,0.06);
  --shadow-xl:    0 20px 48px rgba(26,24,20,0.14), 0 8px 20px rgba(26,24,20,0.09);
  --shadow-focus: 0 0 0 3px rgba(232,89,12,0.18);

  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* === F-015 "The Edition" — canonical scale tokens (D-141 onward) ===
     Locked counts per USER_APP_DESIGN_LAW v0 §2: 5 type sizes · 3 radii
     · one 8-based spacing scale. Token NAMES may rename at F-015 Step 3
     extraction from the approved golden page; the VALUES are what
     crystallizes here. Pages may use NO page-local font-size, radius,
     or spacing literals — they consume these tokens (THE ONE RULE).
     Pattern 92 preserve-legacy: existing --radius-xs/sm/md/lg/xl/full
     untouched; SA Dashboard + every pre-Edition consumer unaffected. */
  /* D-W2-FOUNDATION-1 — v5 mono face = JetBrains Mono (loaded above), used for numerals/eyebrows/telemetry.
     JBM first, prior stack kept as fallback; all --font-mono consumers read the token (var()), so safe. */
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --text-display:   40px;   /* hero numerals + editorial hero lines (NOT page titles) */
  /* D-TYPE-BALANCE-2 — THE app-wide PAGE-TITLE size. Founder taste, verbatim:
     "font big bold, looking bad". Page titles were 30-40px @ 700-800; they are
     now the /leads scale (22-26px, never bold). --text-display keeps 40px for
     hero numerals + editorial hero LINES, which stay big by design.
     TYPE LAW (founder "typography A", LOCKED 2026-07-14): a page title is the
     DISPLAY face (--font-display) at --text-page-title / 600, to the /leads
     reference. Card + section titles and body stay on the UI face (--font-ui).
     The display face at the 40px tier is reserved for the Overview hero.
     F-093 COMMENT CORRECTION: this block said "SERIF" in three places. It was
     false and had been since F-061 made the product all-sans — the census named
     exactly this class ("the values are correct, the comments are false; a
     future developer reading the comment will 'restore' it"). Both faces are
     SANS: display = Space Grotesk, UI = Sora. */
  --text-page-title: 24px;  /* every page's own <h1> / hero title (display face / 600) */
  --text-section:   24px;   /* section mastheads — display face */
  --text-body:      14px;   /* sans UI body, default */
  --text-label:     12px;   /* sans labels, eyebrows */
  --text-mono:      11px;   /* mono telemetry: folio date, IDs, log lines */
  /* ─────────────────────────────────────────────────────────────────
     D-UI-STANDARD-1 CAR-1 (LAW F-084) — THE TYPE ROLE LAYER.
     ONE registry doc: docs/design/UI_STANDARD_REGISTRY_v1.md. These
     --type-* role tokens add the WEIGHT + LINE-HEIGHT dimension the
     size-only --text-* scale lacked, so pages carry ROLES
     (var(--type-*)), never raw font-size/weight literals (the
     page-standard guard enforces this on scoped pages). Values =
     TODAY'S WINNING values, audited from the canonical primitives
     (PageHeader/Masthead/SectionTitle/Card) + the best pages → ZERO
     visual change this car. Theme-agnostic: type sizes/weights/lines
     do not change per theme (only role COLORS do, and those stay on
     the existing --text-* color tokens), so no [data-theme] re-declare. */
  /* ═══ CAR-FONT-ONE-VOICE (F-093) — THE SCALE RE-DERIVED FOR THE NEW VOICE ══════════════════════
     "Typography is a design act, not a find-replace." These values are re-solved per page class
     against the new faces' metrics, not carried over. In short:
       · SORA has a smaller x-height and wider glyphs than the prior UI face, and sets lighter at the
         same number — so prose roles move 400 → 450 (holding the CAR-INK-1 ink weight) and prose
         leading opens 1.5 → 1.55 (wider glyphs make longer lines).
       · SPACE GROTESK is a wide geometric with long extenders — page titles tighten to -0.02em and
         open to 1.25 line so descenders clear the line beneath.
       · Heavy roles come DOWN (section 700→650, card 685→640, label 650→600): Sora sets heavier at
         the same number, so a lower number preserves the optical weight these pages were tuned to.
     Full derivation: src/__tests__/font-one-voice.test.ts + R-C-FONT-ONE-VOICE (not shipped bytes).

     REVERSIBILITY (flagged for §6): the 400 → 450 prose move is the one change here with app-wide
     visual reach. It is a single token flip per role if the founder's eye disagrees. */
  --type-page-title-size:     var(--text-page-title); /* 24px */
  --type-page-title-weight:   600;
  --type-page-title-line:     1.25;   /* F-093: 1.2 → 1.25, Space Grotesk's longer descenders */
  --type-page-title-family:   var(--font-display);
  --type-page-title-spacing:  -0.02em; /* F-093: -0.012 → -0.02em, the display face is wider */
  --type-section-title-size:    20px;   /* SectionTitle primitive — page-section masthead */
  --type-section-title-weight:  650;    /* F-093: 700 → 650, Sora sets heavier at the same number */
  --type-section-title-line:    1.3;
  --type-section-title-family:  var(--font-ui);
  --type-section-title-spacing: -0.015em; /* F-093: -0.012 → -0.015em */
  --type-card-title-size:     15px;   /* dense card header — winning on Command / AI-Team */
  --type-card-title-weight:   640;    /* F-093: 685 → 640, optical-weight parity on Sora */
  --type-card-title-line:     1.35;   /* F-093: 1.3 → 1.35, Sora's smaller x-height wants leading */
  --type-card-title-family:   var(--font-ui);
  --type-subtitle-size:       var(--text-body); /* 14px — PageHeader/Masthead sub-line (color = --text-secondary) */
  --type-subtitle-weight:     450;    /* F-093: 400 → 450, holds CAR-INK-1 ink weight on Sora */
  --type-subtitle-line:       1.55;   /* F-093: 1.5 → 1.55, wider face → longer lines */
  --type-subtitle-family:     var(--font-ui);
  --type-body-size:           var(--text-body); /* 14px — default UI/paragraph */
  --type-body-weight:         450;    /* F-093: 400 → 450 (see above) */
  --type-body-line:           1.55;   /* F-093: 1.5 → 1.55 */
  --type-body-family:         var(--font-ui);
  --type-body-dense-size:     12px;   /* dense config/command surfaces */
  --type-body-dense-weight:   450;    /* F-093: 400 → 450 */
  --type-body-dense-line:     1.5;    /* dense surfaces keep the tighter leading by design */
  --type-caption-size:        11px;   /* small helper text (color = --text-tertiary) */
  --type-caption-weight:      450;    /* F-093: 400 → 450 — 11px Sora needs it to stay legible */
  --type-caption-line:        1.6;
  --type-caption-family:      var(--font-ui);
  --type-label-size:          var(--text-label); /* 12px — form/field + meta labels */
  --type-label-weight:        600;    /* F-093: 650 → 600, optical-weight parity on Sora */
  --type-label-line:          1.3;
  --type-label-family:        var(--font-ui);
  --type-eyebrow-size:        var(--text-mono); /* 11px — mono meta label, uppercase + tracked */
  --type-eyebrow-weight:      650;
  --type-eyebrow-line:        1;
  --type-eyebrow-family:      var(--font-mono);
  --type-eyebrow-spacing:     0.1em;
  --type-eyebrow-transform:   uppercase;
  /* ── DATA-VIZ TYPE SCALE — D-OVERVIEW-CONV-1 (F-084 extension, path A-scale) ──────────────────────
     The Command Deck (Overview) is a data-dashboard: KPI numerals + dense telemetry + micro annotations,
     a scale the six PROSE roles above do not cover. This adds a SIZE axis (below) + a shared WEIGHT axis,
     decoupled because the deck freely mixes size × weight. Theme-agnostic (sizes/weights never re-declare
     per theme). Founder note: the deck's raw sizes included six fractional + two near-duplicate values
     (8.5/9.5/10.5/11.5/12.5/13.5, 27) that were ROUNDED to whole px here — a ≤1px, sub-pixel change (the
     only visual delta in the D-OVERVIEW-CONV-1 conversion; everything else is byte-for-byte the same). */
  --type-metric-hero-size:  46px;   /* KPI hero numeral */
  --type-metric-xl-size:    30px;
  --type-metric-lg-size:    26px;   /* rounds 27 */
  --type-metric-md-size:    var(--text-page-title); /* 24px */
  --type-metric-sm-size:    22px;
  --type-deck-title-size:   18px;   /* rounds 17 */
  --type-deck-head-size:    16px;
  --type-dense-size:        13px;   /* rounds 13.5 */
  --type-dense-sm-size:     var(--text-label); /* 12px — rounds 12.5 */
  --type-dense-xs-size:     var(--text-mono);  /* 11px — rounds 11.5 */
  --type-micro-size:        10px;   /* rounds 10.5 */
  --type-micro-sm-size:      9px;   /* rounds 9.5 */
  --type-micro-xs-size:      8px;   /* rounds 8.5 */
  /* D-CREATOR-CONV-1 — Creator's modal title (the ds-modal-title <h2>, --font-display). One size beyond the
     metric family (no ≤1px neighbour: metric-md 24 / metric-lg 26 / metric-xl 30); added as a named role,
     zero visual change (architect word A). Reusable by any future modal title. */
  --type-modal-title-size:  28px;
  /* shared WEIGHT axis (data-viz + any surface that needs a raw weight through a token) */
  --type-weight-regular:    400;   /* D-CREATOR-CONV-1 — completes the axis (regular) */
  --type-weight-medium:     500;
  --type-weight-semibold:   600;
  --type-weight-bold:       700;
  --type-weight-heavy:      800;
  /* CARD ANATOMY (registry — documents the canonical Card standard; applied by future sweeps) */
  --card-radius:              var(--radius-card); /* 14px */
  --card-padding:             24px;
  --card-border:              1.5px;
  --card-shadow:              var(--shadow-sm);
  --radius-card:    14px;   /* card + section containers */
  --radius-control: 10px;   /* buttons, inputs, chips */
  --radius-pill:    9999px; /* status pills, counters */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;

  --duration-fast:   100ms;
  --duration-base:   160ms;
  --duration-slow:   280ms;
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Phase 7.2 D45 — Lesson 45 layout-token canonical vocabulary ===
     5-token canonical vocabulary per founder direction Path 2 + architect
     default per dimension. Shipped D45 (2026-05-10). Page-wrapper sites
     (App.tsx) + canonical-vocabulary modal sites (420/480/520) consume
     these tokens. 460px outside-vocabulary sites + non-modal Settings
     Tab form constraint sites + Lesson 44 documented inner-content
     sites preserved hardcoded per architect default-decide preserve
     discipline. Full vocabulary + usage discipline + remaining sites
     backlog: docs/LAYOUT_TOKEN_VOCABULARY.md (D45 deliverable). */
  /* D-295 (2026-06-23) — full-width frame: content fills the viewport
     minus comfortable side gutters; NO hard cap so wide + ultrawide
     monitors fill (set --layout-page-max to a px value to re-cap at the
     founder gate). A single text block that gets too wide caps ITSELF
     at --layout-prose-max (a readable measure), never the page.
     D-OVERVIEW-CONV-1 §FRAME (F-085) — full-bleed is now the EXPLICIT policy sentinel `100%`
     (was the dead-looking `none`); behaviour-identical (both uncapped for page content), but a
     documented sentinel, not an unset value. Set to a px value to re-cap at a founder gate. */
  --layout-page-max:    100%;
  --layout-page-gutter: 48px;
  --layout-prose-max:   72ch;
  /* D-W2-FOUNDATION-1 — v5 page-frame standard (per v5 .frame { max-width:1080px; padding:0 34px }).
     ADDITIVE: --layout-page-max stays `none` — the app content wrapper is NOT reflowed in this car
     (that would be a page redesign ② forbids). Surfaces opt in via the .ds-frame utility (Frame.tsx)
     / PageHeader's `frame` prop; per-page adoption lands in the later page cars. */
  --frame-max:          1080px;
  --frame-gutter:       34px;
  --modal-sm:        420px;
  --modal-md:        480px;
  --modal-lg:        520px;
  --prose-narrow:    320px;

  /* === D46-followup — Marketing-palette tokens for legal pages ===
     Marketing site (/pricing, /features, /about) uses a dark warm-
     brown palette via /marketing/shared.css. Legal pages (privacy,
     terms, refund) should match that aesthetic for brand consistency
     when customers transition from marketing site to legal page.
     --legal-* prefix prevents SE-39 shadowing of app tokens; scoped
     consumers (.cc-privacy-doc) reference these directly via var().
     Palette sourced from /marketing/shared.css :root block. */
  --legal-bg-deep:        #14100C;
  /* D-SETTINGS-POLISH-1 ⑤ (2026-07-22, re-derived) — same retune as --auth-panel-bg-mid, same
     reason: #1A1510 was a ghost of the retired dark ground. #1a1714 is the v793 (dose B)
     ground..card midpoint; strictly monotonic (#14100C < #1a1714 < #211C15); legal-text ratios
     on this stop move ≤0.25 (primary 15.98→15.73, secondary 6.86→6.75, tertiary 5.29→5.21). */
  --legal-bg-base:        #1a1714;
  --legal-bg-mid:         #211C15;
  --legal-bg-surface:     #2A2319;
  --legal-bg-elevated:    #332B21;
  --legal-text-primary:   #F5F0E8;
  --legal-text-secondary: #A89E8E;
  /* D-137: brighten tertiary #786E5E → #94897C so small text
     passes WCAG 2 AA 4.5:1 against --legal-bg-deep #14100C
     (3.77 → 5.46). Preserves the warm-brown legal aesthetic;
     harmonizes with the app-side --text-tertiary dark-mode
     token (same hex). Closes axe color-contrast nodes on
     .cc-pp-date / .cc-pp-toc-title / .cc-pp-toc-num /
     .cc-pp-section li::marker / .cc-pp-footer. */
  --legal-text-tertiary:  #94897C;
  --legal-accent:         #F06D28;
  --legal-accent-hover:   #FF8040;
  /* D-137: small-text variant of --legal-accent that passes WCAG
     4.5:1 against the cc-shortnote pale-orange bg (axe computes
     bg=#fffbeb in some render contexts where the dark legal-bg-deep
     wrapper bg doesn't cascade through). Same warm-brown brand
     family as --legal-accent, deeper. Used by cc-shortnote strong;
     reuse for any future small-text-on-legal-tint surface. */
  --legal-accent-text:    #a83d05;
  --legal-accent-subtle:  rgba(240,109,40,.06);
  --legal-accent-glow:    rgba(240,109,40,.15);
  --legal-border:         rgba(245,240,232,.08);
  --legal-border-hover:   rgba(245,240,232,.15);

  /* === Phase 6.1.B1 — Locked design v1.0 alias layer ===
     Phase 6.1.A audit confirmed --surface-* / --border-base family
     is the de-facto bg token system across 11 palette variants.
     Per architect Option (c), new locked-v1.0 vocabulary aliases
     to existing palette-aware tokens via var(). One alias block
     covers all 11 palettes + light/dark — because the underlying
     tokens are already palette+theme aware. Zero churn on existing
     300+ usage sites. Future code (B2 Button component, B3 Overview
     rewrite) authors in the new vocabulary. */
  --bg-canvas:      var(--surface-ground);
  --bg-surface:     var(--surface-base);
  --bg-elevated:    var(--surface-raised);
  --bg-inset:       var(--surface-inset);
  --border-default: var(--border-base);

  /* === SA Slice 3a (2026-05-31) — SuperAdmin canonical token additions ===
     Closes the small set of SA-specific surfaces the design-system tokens
     didn't cover (sidebar chrome, table-styling shades, modal scrim, the
     generic subtle/hover rgba overlay pattern). LIKE-FOR-LIKE — light
     values match the pre-3a LIGHT palette so there's zero visible shift;
     the dark variants live in [data-theme="dark"] below. These are used
     ONLY by SuperAdmin.tsx today (legacy C-palette migration); naming
     keeps the --surface-* prefix family. Slice 3b will inline-replace
     the C/S wrappers, dropping the indirection. */
  --surface-sidebar:           #ffffff;
  --surface-sidebar-border:    #e5e7eb;
  --surface-table-header:      #f8fafc;
  --surface-table-hover:       #f1f5f9;
  --surface-table-row:         #f8fafc;
  --surface-scrim:             rgba(0,0,0,0.40);
  --surface-cancel:            rgba(0,0,0,0.06);
  --text-table-header:         #64748b;
}

[data-theme="dark"] {
  /* === D-W2-FOUNDATION-1 (2026-07-23) — Studio Ink v5 NEUTRAL family, DARK ===
     Signal dark retuned to the founder-locked v5 (.ink-dark), superseding D-PALETTE-WARMSTUDIO-1.
     v5 EXACT anchors: --ground #08080A → surface-ground · --paper-solid #141416 → surface-base ·
     --ink #F5F4EF → text-primary · --ink-2 #ABAAA2 → text-secondary. raised/overlay/inset DERIVED
     (v5 defines only ground+paper). tertiary nudged off v5 --ink-3 #63635D (→ #949489): v5's is too
     dim to clear AA 4.5:1 on the lightest dark surface (inset); #949489 clears all five (4.67:1 on
     inset) and stays DIMMER than secondary. All ratios machine-verified (contrastRatio.test.ts Tier A).
     ⚠ SINGLE SOURCE (L-011): this block is the ONLY definition of the dark surface family — do NOT
     re-declare the --surface, --text, or --border families in patches.css (it links later and would
     shadow these). (D-UILAW-R2 reworded this line: the previous version embedded a glob that formed a
     comment-closer sequence, harmless to lenient browsers but fatal to a strict CSS parse of the served
     asset. No token value changed.) */
  --surface-ground:  #08080A;
  --surface-base:    #141416;
  --surface-raised:  #1C1C1F;
  --surface-overlay: #232326;
  --surface-inset:   #2A2A2E;

  --border-subtle:   #201F22;
  --border-base:     #2C2C30;
  --border-strong:   #3C3C41;

  --text-primary:    #F5F4EF;
  --text-secondary:  #c3c2bc;  /* CAR-INK-1: was #ABAAA2 — inset ratio 6.13 -> 8.01 */
  --text-tertiary:   #a2a298;  /* CAR-INK-1: was #949489 — inset ratio 4.67 -> 5.55 */
  --text-disabled:   #5a524c;
  --text-inverse:    #1a1814;

  /* D-W2-FOUNDATION-1 — v5 --signal (DARK) #FF6A1E. NOTE: --cta-fill/--cta-label below are a SEPARATE
     D-131 AA button contract (measured vs the dark label) and are intentionally left unchanged. */
  --accent:          #FF6A1E;
  --accent-hover:    #FF7E3D;
  --accent-active:   #F0601A;
  /* D-276 — platform tints, dark variants (slightly brighter for contrast). */
  --plat-x:          #4cb3f7;
  --plat-instagram:  #e0699f;
  --plat-linkedin:   #4a9eea;
  --plat-facebook:   #4a93f5;
  --plat-threads:    #f0eee9;
  --accent-subtle:   rgba(255,106,30,0.13);
  --accent-border:   rgba(255,106,30,0.35);
  --accent-text:     #FF9A66;
  /* D-UILAW-AUDIT-1 CAR-4 — text-safe semantic variants (dark); the bright base values already clear AA on dark. */
  --positive-text:   #3AE58A;
  --info-text:       #5AC8FF;
  /* D-UILAW-R1 CAR-2 — consolidated from the former SECOND standalone `[data-theme="dark"]` block
     (D-137). v812 served a dark artifact whose dark surface family was incomplete; source + a clean
     local build both carry --surface-ground:#08080A here, but TWO same-selector [data-theme="dark"]
     rules are a merge/order hazard for any build tool that combines them. One dark block now removes
     that hazard. Dark salmon passes ≥6:1 on the cc-shortnote dark-warm bg; light keeps :root warm-brown. */
  --legal-accent-text: #FFA07A;
  /* D-W2-FOUNDATION-1 — v5 signal extensions (ADDITIVE), DARK values from v5 .ink-dark */
  --accent-2:        #FFC26B;                 /* v5 --signal-2 (dark) */
  --accent-soft:     rgba(255,106,30,0.13);   /* v5 --signal-soft (dark) */
  --accent-glow:     rgba(255,106,30,0.40);   /* v5 --glow (dark) */
  --surface-glass:   rgba(22,22,26,0.80);     /* v5 --paper (dark) translucent card */
  /* D-365 (A5) — avatar identity palette (dark) */
  --avatar-0-bg: rgba(248,113,113,0.20); --avatar-1-bg: rgba(96,165,250,0.20); --avatar-2-bg: rgba(74,222,128,0.18); --avatar-3-bg: rgba(251,191,36,0.18); --avatar-4-bg: rgba(167,139,250,0.20);
  --avatar-fg: #d2d8e2;

  /* D-131 dark variant — PRIMARY-CTA CONTRAST CONTRACT.
     Dark mode pairs a vivid orange fill (the brand at full strength)
     with a dark-ink label (#1c1a17 — this was the pre-Warm-Studio --surface-base;
     D-PALETTE-WARMSTUDIO-1 deliberately did NOT repoint it, because this token is
     half of the D-131 CTA CONTRAST CONTRACT measured against --cta-fill, not a
     neutral-surface token; changing it would move the ratios recorded below).
     Inversion vs
     light mode is intentional: it preserves brand brightness in
     dark contexts while moving the legibility floor to the label.

     Dark measured ratios on label #1c1a17:
       #f06d28 = 5.97:1   (base)
       #f88142 = 7.18:1   (hover)
       #fa9560 = 8.38:1   (active)
     See USER_APP_DESIGN_LAW §5 AMENDMENT #2. */
  --cta-fill:        #f06d28;
  --cta-fill-hover:  #f88142;
  --cta-fill-active: #fa9560;
  --cta-label:       #1c1a17;

  /* Phase 6.0c PR1 — --ai family dark variant. rgba subtle/border
     matches --accent dark pattern. */
  --ai:              #a78bfa;
  --ai-hover:        #b89cfb;
  --ai-active:       #9573e6;
  --ai-subtle:       rgba(167,139,250,0.12);
  --ai-border:       rgba(167,139,250,0.30);
  --ai-text:         #c4b5fd;

  --positive:         #3AE58A;                /* v5 --live (dark) */
  --positive-subtle:  rgba(58,229,138,0.12);
  --positive-border:  rgba(58,229,138,0.30);
  --warning:          #f0aa30;
  --warning-subtle:   rgba(240,170,48,0.10);
  --warning-border:   rgba(240,170,48,0.30);
  --negative:         #FF5470;                /* v5 --danger (dark) */
  --negative-subtle:  rgba(255,84,112,0.12);
  --negative-border:  rgba(255,84,112,0.30);
  /* D-173 — danger-BUTTON background (deep red, white label AA >= 4.5:1
     in both themes). Kept the SAME deep red as light (#c4291c) rather
     than the bright dark --negative #f05050 (which fails AA with white);
     a solid deep-red danger button reads correctly on dark surfaces. */
  --danger-strong:    #c4291c;
  --info:             #5AC8FF;                /* v5 --cy (dark) */
  --info-subtle:      rgba(90,200,255,0.12);
  --info-border:      rgba(90,200,255,0.30);

  /* SA Stage 0-B model-lite dark variant — teal for Flash-Lite badge */
  --model-lite:         #2dd4bf;
  --model-lite-subtle:  rgba(45,212,191,0.10);
  --model-lite-border:  rgba(45,212,191,0.30);

  /* Scale Slice 1 Premium-Density Reconcile — --tier-enterprise dark.
     #B8860B is too low-contrast on the dark surface (#1a1814 bg →
     ratio ≈3.1:1, fails WCAG AA). Lighter gold #D4A017 chosen for
     dark-mode legibility (ratio ≈6.8:1, passes AA + AAA-large).
     Subtle/border use the rgba pattern matching other dark tokens. */
  --tier-enterprise:        #D4A017;
  --tier-enterprise-subtle: rgba(212,160,23,0.14);
  --tier-enterprise-border: rgba(212,160,23,0.35);

  --platform-linkedin: #4d94d4;
  --platform-facebook: #4d8ef0;
  --platform-threads:  #e8e0d5;
  /* Stage 3.8 review-fix B (2026-06-03) — close the customer-app
     dark-mode X icon bug. The X (Twitter) brand mark is monochrome
     by design: black on light, white on dark. `#e7e9ea` is X's
     own dark-mode UI icon color (slightly off-white to reduce
     glare; matches X's published brand-asset spec for dark
     surfaces). NOT a brand-lock violation — this is X's brand-
     correct dual-mode rendering. Threads is already overridden
     above (#e8e0d5); tiktok has the same monochrome-no-dark-
     override bug and is banked for a follow-up (out of dispatch
     scope). PlatformIcon.tsx requires no change: it already
     consumes `p.color = 'var(--platform-twitter)'` which auto-
     resolves per active theme. */
  --platform-twitter:  #e7e9ea;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.40), 0 4px 8px rgba(0,0,0,0.25);
  --shadow-xl: 0 20px 48px rgba(0,0,0,0.50), 0 8px 20px rgba(0,0,0,0.32);
  --shadow-focus: 0 0 0 3px rgba(240,109,40,0.25);

  /* === SA Slice 3a (2026-05-31) — dark-mode SuperAdmin token additions.
     Values match the pre-3a DARK palette + makeStyles-internal hardcoded
     colors exactly so the SA shell renders byte-identical post-3a. */
  --surface-sidebar:           rgba(0,0,0,0.30);
  --surface-sidebar-border:    rgba(255,255,255,0.06);
  --surface-table-header:      #0f0c08;
  --surface-table-hover:       rgba(255,255,255,0.04);
  --surface-table-row:         rgba(255,255,255,0.03);
  --surface-scrim:             rgba(0,0,0,0.70);
  --surface-cancel:            rgba(255,255,255,0.06);
  --text-table-header:         #d1d5db;
}

/* ── Azure Palette ── */
[data-palette="azure"] {
  --accent:          #0070F3;
  --accent-hover:    #0060D3;
  --accent-active:   #0050B0;
  --accent-subtle:   #EBF5FF;
  --accent-border:   #93C5FD;
  --accent-text:     #0060D3;
  --shadow-focus:    0 0 0 3px rgba(0,112,243,0.18);
}
[data-palette="azure"][data-theme="dark"] {
  --accent:          #3B9EFF;
  --accent-hover:    #5AADFF;
  --accent-active:   #2B8EEF;
  --accent-subtle:   rgba(59,158,255,0.12);
  --accent-border:   rgba(59,158,255,0.35);
  --accent-text:     #80BFFF;
  --shadow-focus:    0 0 0 3px rgba(59,158,255,0.25);
}

/* ── Obsidian Palette ── */
[data-palette="obsidian"] {
  --accent:          #7C3AED;
  --accent-hover:    #6D28D9;
  --accent-active:   #5B21B6;
  --accent-subtle:   #EDE9FE;
  --accent-border:   #C4B5FD;
  --accent-text:     #6D28D9;
  --shadow-focus:    0 0 0 3px rgba(124,58,237,0.18);
}
[data-palette="obsidian"][data-theme="dark"] {
  --accent:          #A78BFA;
  --accent-hover:    #B89DFB;
  --accent-active:   #9679E9;
  --accent-subtle:   rgba(167,139,250,0.12);
  --accent-border:   rgba(167,139,250,0.35);
  --accent-text:     #C4B5FD;
  --shadow-focus:    0 0 0 3px rgba(167,139,250,0.25);
}

/* ── Midnight Palette ── */
[data-palette="midnight"] {
  --accent:          #7c3aed;
  --accent-hover:    #6d28d9;
  --accent-active:   #5b21b6;
  --accent-subtle:   rgba(124,58,237,0.10);
  --accent-border:   rgba(124,58,237,0.25);
  --accent-text:     #6d28d9;
  --shadow-focus:    0 0 0 3px rgba(124,58,237,0.22);
  --surface-ground:  #0f0e17;
  --surface-base:    #1a1826;
  --surface-raised:  #221f32;
  --surface-overlay: #2a2740;
  --surface-inset:   #312e4a;
  --border-subtle:   rgba(255,255,255,0.06);
  --border-base:     rgba(255,255,255,0.10);
  --border-strong:   rgba(255,255,255,0.18);
  --text-primary:    #f0eeff;
  --text-secondary:  #cdc8e4;  /* CAR-INK-1: was #b8b0d8 — inset ratio 6.32(dark)/6.45 -> 8.0+ both */
  --text-tertiary:   #aba6be;  /* CAR-INK-1: was #7b7298 — inset ratio 2.90/3.60 -> 5.5+ both */
  --text-disabled:   #4a4466;
  --text-inverse:    #0f0e17;
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg:       0 8px 24px rgba(0,0,0,0.7);
}
[data-palette="midnight"][data-theme="dark"] {
  --surface-ground:  #08070f;
  --surface-base:    #0f0e17;
  --surface-raised:  #15131f;
  --surface-overlay: #1c1928;
  --surface-inset:   #221f30;
}

/* ── Ocean Palette ── */
[data-palette="ocean"] {
  --accent:          #0ea5e9;
  --accent-hover:    #0284c7;
  --accent-active:   #0369a1;
  --accent-subtle:   rgba(14,165,233,0.08);
  --accent-border:   rgba(14,165,233,0.22);
  --accent-text:     #0284c7;
  --shadow-focus:    0 0 0 3px rgba(14,165,233,0.20);
  --surface-ground:  #f8fafc;
  --surface-base:    #ffffff;
  --surface-raised:  #f1f5f9;
  --surface-overlay: #e2e8f0;
  --surface-inset:   #cbd5e1;
  --border-subtle:   rgba(15,23,42,0.06);
  --border-base:     rgba(15,23,42,0.10);
  --border-strong:   rgba(15,23,42,0.18);
  --text-primary:    #0f172a;
  --text-secondary:  #2e3845;  /* CAR-INK-1: was #475569 — inset ratio 5.10 -> 8.00 */
  --text-tertiary:   #425064;  /* CAR-INK-1: was #94a3b8 — inset ratio 1.73 -> 5.52 */
  --text-disabled:   #cbd5e1;
  --text-inverse:    #ffffff;
}
[data-palette="ocean"][data-theme="dark"] {
  --surface-ground:  #0a0f1a;
  --surface-base:    #0f172a;
  --surface-raised:  #1e293b;
  --surface-overlay: #263348;
  --surface-inset:   #2d3d55;
  --text-primary:    #e2e8f0;
  --text-secondary:  #d7dde4;  /* CAR-INK-1: was #94a3b8 — inset ratio 4.29 -> 8.04 */
  --text-tertiary:   #afb9c6;  /* CAR-INK-1: was #64748b — inset ratio 2.31 -> 5.54 */
  --accent:          #38bdf8;
  --accent-subtle:   rgba(56,189,248,0.12);
  --accent-border:   rgba(56,189,248,0.30);
  --accent-text:     #7dd3fc;
}

/* ── Forest Palette ── */
[data-palette="forest"] {
  --accent:          #16a34a;
  --accent-hover:    #15803d;
  --accent-active:   #166534;
  --accent-subtle:   rgba(22,163,74,0.08);
  --accent-border:   rgba(22,163,74,0.22);
  --accent-text:     #15803d;
  --shadow-focus:    0 0 0 3px rgba(22,163,74,0.20);
  --surface-ground:  #f8faf8;
  --surface-base:    #ffffff;
  --surface-raised:  #f0f7f1;
  --surface-overlay: #e6f4e8;
  --surface-inset:   #d1ead4;
  --border-subtle:   rgba(0,40,0,0.06);
  --border-base:     rgba(0,40,0,0.10);
  --border-strong:   rgba(0,40,0,0.18);
  --text-primary:    #0d1f12;
  --text-secondary:  #2b4732;  /* CAR-INK-1: was #3d6647 — inset ratio 5.15 -> 8.01 */
  --text-tertiary:   #455e4b;  /* CAR-INK-1: was #7a9e82 — inset ratio 2.33 -> 5.56 */
  --text-disabled:   #b8d4bc;
  --text-inverse:    #ffffff;
}
[data-palette="forest"][data-theme="dark"] {
  --surface-ground:  #071209;
  --surface-base:    #0d1f12;
  --surface-raised:  #142a1a;
  --surface-overlay: #1c3824;
  --surface-inset:   #23462d;
  --text-primary:    #e6f4e8;
  --text-secondary:  #cee7d2;  /* CAR-INK-1: was #7abd87 — inset ratio 4.76 -> 8.05 */
  --text-tertiary:   #98c6a2;  /* CAR-INK-1: was #4d8a5a — inset ratio 2.57 -> 5.51 */
  --accent:          #4ade80;
  --accent-subtle:   rgba(74,222,128,0.12);
  --accent-border:   rgba(74,222,128,0.30);
  --accent-text:     #86efac;
}

/* ── Aurora Palette ── */
[data-palette="aurora"] {
  --accent:          #ec4899;
  --accent-hover:    #db2777;
  --accent-active:   #be185d;
  --accent-subtle:   rgba(236,72,153,0.08);
  --accent-border:   rgba(236,72,153,0.22);
  --accent-text:     #be185d;
  --shadow-focus:    0 0 0 3px rgba(236,72,153,0.20);
  --surface-ground:  #fdf8fc;
  --surface-base:    #ffffff;
  --surface-raised:  #fdf0f8;
  --surface-overlay: #fce7f3;
  --surface-inset:   #fbcfe8;
  --border-subtle:   rgba(80,0,40,0.06);
  --border-base:     rgba(80,0,40,0.10);
  --border-strong:   rgba(80,0,40,0.18);
  --text-primary:    #1a0010;
  --text-secondary:  #75113a;  /* CAR-INK-1: was #9d174d — inset ratio 5.70 -> 8.01 */
  --text-tertiary:   #7d405c;  /* CAR-INK-1: was #c084a0 — inset ratio 2.16 -> 5.50 */
  --text-disabled:   #f9a8d4;
  --text-inverse:    #ffffff;
}
[data-palette="aurora"][data-theme="dark"] {
  --surface-ground:  #120008;
  --surface-base:    #1a0010;
  --surface-raised:  #260018;
  --surface-overlay: #330022;
  --surface-inset:   #40002c;
  --text-primary:    #fce7f3;
  --text-secondary:  #f795c8;  /* CAR-INK-1: was #f472b6 — inset ratio 6.32 -> 8.04 */
  --text-tertiary:   #e9689c;  /* CAR-INK-1: was #9d174d — inset ratio 2.12 -> 5.52 */
  --accent:          #f472b6;
  --accent-subtle:   rgba(244,114,182,0.12);
  --accent-border:   rgba(244,114,182,0.30);
  --accent-text:     #fbcfe8;
}

/* ── Amber Gold Palette ── */
[data-palette="amber-gold"] {
  --accent:          #d97706;
  --accent-hover:    #b45309;
  --accent-active:   #92400e;
  --accent-subtle:   rgba(217,119,6,0.08);
  --accent-border:   rgba(217,119,6,0.22);
  --accent-text:     #92400e;
  --shadow-focus:    0 0 0 3px rgba(217,119,6,0.20);
  --surface-ground:  #fffbf5;
  --surface-base:    #ffffff;
  --surface-raised:  #fef6e4;
  --surface-overlay: #fdecc8;
  --surface-inset:   #fddfa0;
  --border-subtle:   rgba(60,30,0,0.06);
  --border-base:     rgba(60,30,0,0.10);
  --border-strong:   rgba(60,30,0,0.18);
  --text-primary:    #1c0f00;
  --text-secondary:  #5f3608;  /* CAR-INK-1: was #78450a — inset ratio 6.12 -> 8.05 */
  --text-tertiary:   #75502b;  /* CAR-INK-1: was #b07840 — inset ratio 2.90 -> 5.53 */
  --text-disabled:   #e4c080;
  --text-inverse:    #ffffff;
}
[data-palette="amber-gold"][data-theme="dark"] {
  --surface-ground:  #0f0800;
  --surface-base:    #1c1000;
  --surface-raised:  #2a1a00;
  --surface-overlay: #382400;
  --surface-inset:   #462e00;
  --text-primary:    #fef3c7;
  --text-secondary:  #fbc63a;  /* CAR-INK-1: was #fbbf24 — inset ratio 7.62 -> 8.02 */
  --text-tertiary:   #f99118;  /* CAR-INK-1: was #d97706 — inset ratio 3.99 -> 5.51 */
  --accent:          #fbbf24;
  --accent-subtle:   rgba(251,191,36,0.12);
  --accent-border:   rgba(251,191,36,0.30);
  --accent-text:     #fde68a;
}
/* D-W3-COMMAND-1 — Studio Ink v5 "Command Deck" Overview (MOCKUP-IS-SPEC: design/STUDIO_INK_OVERVIEW_MOCKUP_v5.html).
   Tokens-only: v5's mockup vars map 1:1 onto the app's palette tokens, so BOTH themes come for free —
     --ground→--surface-ground · --paper→--surface-glass · --paper-solid→--surface-base · --ink→--text-primary
     --ink-2→--text-secondary · --ink-3→--text-tertiary · --line→--border-base · --signal→--accent
     --signal-2→--accent-2 · --signal-soft→--accent-soft · --glow→--accent-glow · --live→--positive
     --cy→--info · --danger→--negative · fonts: the literal stacks →--font-ui / --font-mono, so both
     follow the F-093 one-voice registry.
   Everything is scoped under .cmd so it never leaks. Annex (v4 GAP-5): reduced-motion static, <1280 auto-strip,
   glass falls back to solid, KPIs 2×2 small. */

.cmd {
  position: relative;
  /* D-OVERVIEW-CONV-1 §FRAME (F-085) — the shell #main-content is the SOLE padding owner
     (28px var(--layout-page-gutter) 24px); the page root adds ZERO outer padding, so there is no
     doubled shell+page layer and no oversized bottom margin (was 4px 24px 52px → 32/72/76 total;
     now the shell's 28/48/24). Full-bleed by policy (--layout-page-max: 100%). */
  margin: 0 auto;
  color: var(--text-primary);
  font-family: var(--font-ui);
  /* D-OVERVIEW-CONV-1 §FRAME (F-085 ①) — ONE ground per theme, edge-to-edge, matching the shell.
     --surface-ground now resolves correctly in BOTH themes (dark #08080A) since the D-UILAW-R2
     parse-abort fix shipped (v814), so the page paints the true ground; the dot-grid overlays it. */
  background-color: var(--surface-ground);
  /* D-W3-PARITY-1 — SOFTENED dot-grid (founder: "harsh dot-grid"): smaller dots + a wider gap
     so the depth field whispers instead of shouting. */
  background-image: radial-gradient(circle at 1px 1px, var(--border-subtle) 0.5px, transparent 0);
  background-size: 32px 32px;
  min-height: 100%;
}
/* D-OVERVIEW-CONV-1 §FRAME (F-085 ①) — the dark-only `[data-theme="dark"] .cmd { --surface-base }`
   override was REMOVED. It existed solely to dodge the dark --surface-ground parse-abort (the documented
   "fragility"), which D-UILAW-R2 fixed at source (LIVE v814). With dark --surface-ground now #08080A, a
   dark override to --surface-base (#141416) IS the F-085 ② band vs the shell ground — so the page ground is
   now ONE token, edge-to-edge, in both themes (dark H1 #F5F4EF on #08080A clears ~15:1, better than before). */
/* aurora glow bloom — v10 CALM-DARK: TIGHTENED (founder's "blurry smear" note). Smaller + less
   blur + a crisper falloff so it reads as a controlled glow, not a haze over the top-right. */
.cmd__aur {
  position: absolute;
  top: -120px;
  right: -40px;
  width: 420px;
  height: 300px;
  pointer-events: none;
  filter: blur(26px);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 66%);
  opacity: 0.7;
  z-index: 0;
}
/* content stacks above the aurora — but MUST NOT re-position the aurora itself
   (a bare `.cmd > *` would override .cmd__aur's `position:absolute` at equal specificity,
   dropping the 480px aurora back into flow and shoving the page down ~500px). */
.cmd > *:not(.cmd__aur) { position: relative; z-index: 1; }

.cmd__mono {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.cmd__live { color: var(--positive); }

/* glass card — v5. backdrop-filter with a SOLID fallback declared FIRST (annex: contrast measured on solid). */
.cmd-glass {
  background: var(--surface-base);
  background: var(--surface-glass, var(--surface-base));
  border: 1px solid var(--border-base);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}
@supports not (backdrop-filter: blur(1px)) {
  .cmd-glass { background: var(--surface-base); }
}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.cmd-hero { display: grid; grid-template-columns: 1fr 420px; gap: 22px; align-items: center; padding: 32px 0 6px; }
.cmd-hero__h1 {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 10px 0 0;
  color: var(--text-primary);
  /* the .cmd-grad child sets -webkit-text-fill-color:transparent; pin the H1's OWN text fill so the
     non-gradient part (the greeting/name) never inherits the transparent fill and washes out in dark. */
  -webkit-text-fill-color: var(--text-primary);
}
.cmd-grad {
  background: linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}
.cmd-hero__body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; margin-top: 12px; max-width: 430px; }
.cmd-yes-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 680; color: var(--cta-label, #fff);
  border: none; border-radius: 12px; padding: 11px 18px; margin-top: 16px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 28px var(--accent-glow);
}
.cmd-yes-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--cta-label, #fff); animation: cmd-pul 1.8s infinite; }
.cmd-stamp { display: flex; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
.cmd-stamp b { display: block; font-size: 20px; font-weight: 750; color: var(--text-primary); }
.cmd-stamp span { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.6; color: var(--text-tertiary); letter-spacing: 0.1em; }

/* ── CONSTELLATION ────────────────────────────────────────────────────── */
.cmd-deck { position: relative; height: 330px; padding: 10px; }
.cmd-deck__hd { display: flex; justify-content: space-between; padding: 4px 8px; }
.cmd-collapse { font-family: var(--font-mono); font-size: 10px; line-height: 1; letter-spacing: 0.1em; color: var(--text-tertiary); cursor: pointer; background: none; border: none; text-transform: uppercase; }
.cmd-deck svg { width: 100%; height: 280px; overflow: visible; }
.cmd-orbit { fill: none; stroke: var(--border-base); }
.cmd-beam { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 3 6; opacity: 0.7; animation: cmd-flow 2.6s linear infinite; filter: drop-shadow(0 0 3px var(--accent-glow)); }
.cmd-beam--cy { stroke: var(--info); animation-duration: 3.4s; opacity: 0.5; }
.cmd-corering { fill: none; stroke: var(--accent); opacity: 0.35; animation: cmd-breathe 3.2s ease-in-out infinite; transform-origin: center; }
.cmd-spin { animation: cmd-spin 60s linear infinite; }
.cmd-spin--r { animation: cmd-spinr 90s linear infinite; }
.cmd-node { cursor: pointer; }
.cmd-node:hover circle, .cmd-node:focus-visible circle { stroke: var(--accent); stroke-width: 2; outline: none; }
.cmd-nodelab { font-family: var(--font-mono); font-size: 9px; line-height: 1; letter-spacing: 0.08em; fill: var(--text-tertiary); }
.cmd-nodelab--hot { fill: var(--accent); }
.cmd-hovercard {
  position: absolute; top: 44px; right: 16px;
  background: var(--surface-base); border: 1px solid var(--accent); border-radius: 10px; padding: 9px 12px;
  font-size: 11.5px; box-shadow: 0 8px 24px var(--accent-glow); max-width: 200px;
}
.cmd-hovercard b { display: block; font-size: 12px; color: var(--text-primary); }
.cmd-hovercard span { color: var(--text-secondary); }
.cmd-hovercard .cmd__mono { color: var(--accent); }

/* agent STRIP — the <1280px / collapsed fallback (v2 pattern, annex) */
.cmd-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; }
.cmd-strip__chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  padding: 6px 10px; border-radius: 99px; border: 1px solid var(--border-base);
  background: var(--surface-raised); color: var(--text-secondary); cursor: pointer;
}
.cmd-strip__chip--hot { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
.cmd-strip__chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── YES QUEUE ────────────────────────────────────────────────────────── */
.cmd-queue { padding: 16px 20px; margin-top: 14px; }
.cmd-qhead { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.cmd-qhead h2 { font-size: 15.5px; font-weight: 690; color: var(--text-primary); }
.cmd-qrow { display: flex; align-items: center; gap: 13px; padding: 12px 4px; border-bottom: 1px solid var(--border-base); }
.cmd-qrow:last-child { border-bottom: none; }
.cmd-ava {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--cta-label, #fff); font-weight: 750; font-size: 12.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-active));
  box-shadow: 0 5px 16px var(--accent-glow);
}
.cmd-who { flex: 1; min-width: 0; }
.cmd-who b { font-size: 13.5px; font-weight: 670; color: var(--text-primary); }
.cmd-who span { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.cmd-by { font-family: var(--font-mono); font-size: 9.5px; font-weight: 650; font-style: normal; letter-spacing: 0.1em; color: var(--accent); text-transform: uppercase; margin-right: 6px; }
.cmd-btn { font-size: 12.5px; font-weight: 660; color: var(--accent); border: 1px solid var(--accent); background: transparent; border-radius: 10px; padding: 7px 14px; cursor: pointer; white-space: nowrap; }
.cmd-btn--solid { color: var(--cta-label, #fff); border: none; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 5px 18px var(--accent-glow); }

/* ── TICKER ───────────────────────────────────────────────────────────── */
.cmd-ticker { margin-top: 14px; padding: 10px 18px; display: flex; gap: 28px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; line-height: 1; color: var(--text-tertiary); overflow: hidden; white-space: nowrap; }
.cmd-ticker b { color: var(--positive); }
.cmd-ticker__empty { color: var(--text-tertiary); font-style: normal; }

/* ── KPI CARDS (edge-lit) ─────────────────────────────────────────────── */
.cmd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 14px; }
.cmd-kpi { padding: 15px 17px; position: relative; overflow: hidden; }
.cmd-kpi::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); }
.cmd-kpi__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--text-tertiary); text-transform: uppercase; }
.cmd-kpi b { font-size: 26px; font-weight: 760; display: block; margin: 7px 0 2px; color: var(--text-primary); }
.cmd-kpi__up { color: var(--positive); font-size: 12px; font-weight: 650; }
.cmd-kpi__flat { color: var(--text-tertiary); font-size: 12px; font-weight: 650; }
.cmd-kpi svg { display: block; margin-top: 9px; width: 100%; height: 26px; }
.cmd-spark { fill: none; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 4px var(--accent-glow)); }
.cmd-sparkfill { fill: var(--accent-soft); }
.cmd-kpi__zero { font-size: 26px; font-weight: 760; color: var(--text-tertiary); display: block; margin: 7px 0 2px; }
.cmd-kpi__collecting { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; letter-spacing: 0.08em; color: var(--text-tertiary); text-transform: uppercase; }

/* ── DAY ZERO ─────────────────────────────────────────────────────────── */
.cmd-empty { padding: 26px; display: flex; gap: 18px; align-items: stretch; margin-top: 14px; flex-wrap: wrap; }
.cmd-step { flex: 1; min-width: 200px; padding: 16px; border: 1px dashed var(--border-base); border-radius: 12px; }
.cmd-step__n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 9px; }
.cmd-step b { font-size: 13.5px; display: block; color: var(--text-primary); }
.cmd-step span { font-size: 12px; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════════
   D-W3-PARITY-1 — the FULL page (union): v5 hero ON TOP + every old Overview zone
   below, re-clothed in Studio Ink per the LOCKED v13 spec (STUDIO_INK_COMMAND_FULL_v13.html).
   Token mapping unchanged from the header. Riders: Calendar-exact WIDE frame (below),
   lucide icons (component), CSS-only motion, theme-parity (light == dark structurally).
   ═════════════════════════════════════════════════════════════════════════ */

/* section wrapper + heading (v13 .sect/.shead) */
.cmd-sect { margin-top: 22px; }
.cmd-shead { display: flex; align-items: center; gap: 12px; padding: 0 2px 10px; }
.cmd-shead h2 { font-size: 15px; font-weight: 685; color: var(--text-primary); }

/* range tabs (v13 .ranges) */
.cmd-ranges { display: inline-flex; gap: 4px; border: 1px solid var(--border-base); border-radius: 10px; padding: 3px; background: var(--surface-base); }
.cmd-ranges button { font-family: var(--font-ui); font-size: 11px; font-weight: 640; color: var(--text-tertiary); padding: 5px 11px; border-radius: 8px; border: none; background: none; cursor: pointer; }
.cmd-ranges button.on { color: var(--cta-label, #fff); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* plan chip (v13 .planchip) */
.cmd-planchip { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 650; border: 1px solid var(--border-base); border-radius: 10px; padding: 6px 12px; background: var(--surface-base); color: var(--text-primary); }
.cmd-planchip b { color: var(--accent); text-transform: uppercase; }
.cmd-planchip span { color: var(--text-tertiary); }

/* channels row (v13 .chan/.ch) */
.cmd-chan { display: flex; gap: 15px; margin-top: 16px; align-items: center; flex-wrap: wrap; }
.cmd-ch { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 640; color: var(--text-primary); }
.cmd-ch__g { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-base); border: 1px solid var(--border-base); color: var(--text-secondary); }
.cmd-ch__d { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); box-shadow: 0 0 6px var(--positive); }
.cmd-ch--bad { color: var(--negative); }
.cmd-ch--bad .cmd-ch__d { background: var(--negative); box-shadow: 0 0 6px var(--negative); animation: cmd-pul 1.4s infinite; }
.cmd-ch--bad u { text-decoration: none; font-size: 11px; border: 1px solid var(--negative); border-radius: 7px; padding: 2px 8px; cursor: pointer; }
.cmd-ch--slot { color: var(--text-tertiary); cursor: pointer; }
.cmd-ch--slot .cmd-ch__d { background: transparent; border: 1px dashed var(--text-tertiary); box-shadow: none; }

/* KPI icon chip (v13 .kpi .ico) — added on top of the existing .cmd-kpi */
.cmd-kpi__ico { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); border: 1px solid var(--border-base); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.cmd-kpi__dn { color: var(--negative); font-size: 12px; font-weight: 650; }

/* WAR ROOM (v13 .war/.whead/.lv/.opsrow/.op) — streaming ops feed */
.cmd-war { margin-top: 22px; overflow: hidden; }
.cmd-whead { display: flex; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--border-base); }
.cmd-lv { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; color: var(--positive); }
.cmd-lv i { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); animation: cmd-pul 1.8s infinite; }
.cmd-opsrow { display: flex; gap: 12px; padding: 11px 18px; width: max-content; animation: cmd-slide 34s linear infinite; }
.cmd-op { display: flex; gap: 9px; align-items: center; padding: 8px 12px; border: 1px solid var(--border-base); border-radius: 10px; background: var(--surface-base); font-size: 12px; color: var(--text-primary); white-space: nowrap; }
.cmd-op b { color: var(--accent); }
.cmd-op .cmd-op__t { font-family: var(--font-mono); font-size: 10px; color: var(--positive); }
.cmd-op__empty { padding: 14px 18px; color: var(--text-tertiary); font-size: 12.5px; }

/* TODAY'S WORK (v13 .work/.wcol/.coach/.draft) */
.cmd-work { display: grid; grid-template-columns: 1.1fr 1fr 1fr; margin-top: 10px; }
.cmd-wcol { padding: 14px 18px; border-right: 1px solid var(--border-base); min-width: 0; }
.cmd-wcol:last-child { border-right: none; }
.cmd-coach { display: flex; align-items: center; gap: 12px; margin-top: 10px; border: 1px dashed var(--border-base); border-radius: 12px; padding: 12px 14px; }
.cmd-coach__ic { width: 36px; height: 36px; border-radius: 11px; flex: none; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; animation: cmd-bounce 2.4s infinite; }
.cmd-coach b { font-size: 12.5px; display: block; color: var(--text-primary); }
.cmd-coach span { font-size: 11.5px; color: var(--text-secondary); }
.cmd-draft { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border-base); font-size: 12.5px; }
.cmd-draft:first-of-type { border-top: none; }
.cmd-draft__g { width: 26px; height: 26px; border-radius: 8px; flex: none; background: var(--surface-base); border: 1px solid var(--border-base); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.cmd-draft b { font-weight: 655; display: block; font-size: 12.5px; color: var(--text-primary); }
.cmd-draft span { color: var(--text-secondary); font-size: 11px; }

/* AI TEAM GRID (v13 .agents/.ag/.eqz) — full 12 */
.cmd-agents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cmd-ag { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--border-base); border-radius: 12px; background: var(--surface-base); cursor: pointer; text-align: left; }
.cmd-ag:hover { border-color: var(--accent-border, var(--accent)); }
.cmd-ag__ic { width: 30px; height: 30px; border-radius: 9px; flex: none; background: var(--accent-soft); border: 1px solid var(--border-base); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.cmd-ag b { font-size: 12.5px; font-weight: 665; display: block; color: var(--text-primary); }
.cmd-ag span { font-size: 11px; color: var(--text-secondary); display: block; margin-top: 1px; }
.cmd-ag--rest .cmd-ag__ic { background: var(--surface-glass, var(--surface-base)); color: var(--text-tertiary); opacity: 0.7; }
.cmd-ag--rest b, .cmd-ag--rest span { color: var(--text-tertiary); }
.cmd-eqz { display: flex; gap: 2px; align-items: flex-end; height: 12px; margin-left: auto; }
.cmd-eqz s { width: 3px; background: var(--accent); border-radius: 2px; animation: cmd-eq 1s infinite; }
.cmd-eqz s:nth-child(2) { animation-delay: 0.2s; }
.cmd-eqz s:nth-child(3) { animation-delay: 0.4s; }
.cmd-eqz--cy s { background: var(--info); }

/* TOP POST + SIGNALS (v13 .toppost/.tp/.postbody/.stats/.sig3/.sigrow) */
.cmd-toppost { display: grid; grid-template-columns: 1.3fr 1fr; }
.cmd-tp { padding: 15px 18px; border-right: 1px solid var(--border-base); }
.cmd-tp__big { font-size: 31px; font-weight: 770; color: var(--text-primary); }
.cmd-postbody { font-size: 13px; color: var(--text-secondary); line-height: 1.55; background: var(--surface-base); border: 1px solid var(--border-base); border-radius: 12px; padding: 13px 15px; margin-top: 10px; }
.cmd-stats { display: flex; gap: 24px; margin-top: 12px; align-items: center; }
.cmd-stats b { font-size: 17px; font-weight: 730; display: block; color: var(--text-primary); }
.cmd-stats span { font-family: var(--font-mono); font-size: 9px; line-height: 1.6; color: var(--text-tertiary); letter-spacing: 0.1em; }
.cmd-sig3 { padding: 15px 18px; }
.cmd-sigrow { display: flex; gap: 11px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border-base); font-size: 12.5px; }
.cmd-sigrow:first-of-type { border-top: none; }
.cmd-sigrow__ic { width: 28px; height: 28px; border-radius: 9px; flex: none; background: var(--accent-soft); border: 1px solid var(--border-base); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.cmd-sigrow b { font-weight: 660; display: block; color: var(--text-primary); }
.cmd-sigrow span { color: var(--text-secondary); font-size: 11.5px; }

/* THE PULSE (v13 .pl/.pl2/.paf/.pgrid/.pdot/.pn) */
.cmd-pn b { font-size: 21px; font-weight: 755; display: block; color: var(--text-primary); }
.cmd-pn span { font-family: var(--font-mono); font-size: 9px; line-height: 1.6; color: var(--text-tertiary); letter-spacing: 0.1em; }
.cmd-pulse-svg { width: 100%; height: 170px; display: block; }
.cmd-pgrid { stroke: var(--border-base); stroke-width: 1; }
.cmd-pl { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.cmd-pl2 { fill: none; stroke: var(--info); stroke-width: 1.6; opacity: 0.75; }
.cmd-paf { opacity: 0.2; }
.cmd-paf2 { opacity: 0.16; }
.cmd-pdot { fill: var(--positive); }
.cmd-pleg { display: flex; gap: 18px; margin-top: 4px; }
.cmd-pleg span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* BEST TIMES (v13 .spec/.strip/.tax) — spectrum strips */
.cmd-spec { display: grid; grid-template-columns: 44px 1fr; gap: 8px 12px; align-items: center; margin-top: 12px; }
.cmd-spec__d { font-family: var(--font-mono); font-size: 9px; color: var(--text-tertiary); }
.cmd-specstrip { height: 14px; border-radius: 8px; position: relative; background: linear-gradient(90deg, transparent, var(--accent-soft) 20%, var(--accent-soft) 80%, transparent); }
.cmd-specstrip i { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.55; }
.cmd-specstrip--pk i { opacity: 0.95; box-shadow: 0 0 12px var(--accent-glow); }
.cmd-specstrip u { position: absolute; top: -3px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); border: 2px solid var(--surface-ground); }
.cmd-tax { grid-column: 2; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 8px; color: var(--text-tertiary); padding: 0 2px; letter-spacing: 0.06em; }

/* BUSINESS PLAN fuel band (v13 .fuelband/.gauges/.gg/.fi/.fnote) */
.cmd-fuel { margin-top: 22px; border-top: 1px solid var(--border-base); padding-top: 14px; }
.cmd-fuel__hd { display: flex; align-items: baseline; gap: 12px; }
.cmd-fuel__hd h2 { font-size: 14px; font-weight: 685; color: var(--text-primary); }
.cmd-gauges { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 12px; }
.cmd-gg .l { display: flex; justify-content: space-between; color: var(--text-tertiary); font-family: var(--font-mono); font-size: 9px; line-height: 1.6; letter-spacing: 0.08em; }
.cmd-gg .l b { color: var(--text-primary); font-weight: 700; }
.cmd-gg__tr { width: 100%; height: 5px; border-radius: 5px; background: var(--surface-base); border: 1px solid var(--border-base); overflow: hidden; margin-top: 5px; }
.cmd-fi { height: 100%; display: block; background: var(--text-tertiary); }
.cmd-fi--ok { background: var(--positive); }
.cmd-fi--warn { background: var(--negative); }
.cmd-gg--warn .l, .cmd-gg--warn .l b { color: var(--negative); }
.cmd-fnote { margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.cmd-fnote b { color: var(--accent); }

/* ── RESPONSIVE (annex) ───────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .cmd-hero { grid-template-columns: 1fr; }
  .cmd-deck { display: none; }          /* constellation auto-collapses to the strip <1280 */
  .cmd-strip--auto { display: flex; }
  .cmd-kpis { grid-template-columns: repeat(2, 1fr); } /* KPIs 2×2 */
  .cmd-agents { grid-template-columns: repeat(3, 1fr); }
  .cmd-gauges { grid-template-columns: repeat(4, 1fr); }
  .cmd-work { grid-template-columns: 1fr; }
  .cmd-wcol { border-right: none; border-bottom: 1px solid var(--border-base); }
  .cmd-wcol:last-child { border-bottom: none; }
}
@media (min-width: 1280px) { .cmd-strip--auto { display: none; } }
@media (max-width: 640px) {
  .cmd { padding-left: 16px; padding-right: 16px; }
  .cmd-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cmd-hero__h1 { font-size: 26px; }
  .cmd-ticker { gap: 18px; }
  .cmd-stamp { gap: 16px; }
}

/* ── MOTION (annex: prefers-reduced-motion → static orbits, solid beams, no pulse) ── */
@keyframes cmd-pul { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes cmd-flow { to { stroke-dashoffset: -36; } }
@keyframes cmd-breathe { 0%, 100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.1); opacity: 0.12; } }
@keyframes cmd-spin { to { transform: rotate(360deg); } }
@keyframes cmd-spinr { to { transform: rotate(-360deg); } }
/* D-W3-PARITY-1 zones (CSS-only per PERFORMANCE-FIRST): war-room marquee, agent equaliser, coach bob */
@keyframes cmd-slide { to { transform: translateX(-50%); } }
@keyframes cmd-eq { 0%, 100% { height: 4px; } 50% { height: 12px; } }
@keyframes cmd-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .cmd-spin, .cmd-spin--r, .cmd-corering, .cmd-yes-pill i,
  .cmd-opsrow, .cmd-eqz s, .cmd-coach__ic, .cmd-lv i, .cmd-ch--bad .cmd-ch__d { animation: none; }
  .cmd-beam { animation: none; stroke-dasharray: none; opacity: 0.4; }
  .cmd-eqz s { height: 8px; }
}

/* CAR-PLATGATE — the withheld-platforms disclosure. The org holds a real connection on a platform
   SuperAdmin switched off for everyone: it earns a plain statement under the readiness strip, never
   a chip that looks actionable. Tokens only, so both themes and all 8 palettes resolve. */
.ov-withheld {
  margin: 10px 2px 0;
  padding: 9px 12px;
  border: 1px solid var(--border-base);
  border-radius: 10px;
  background: var(--surface-base);
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
}
/* s4 shim — moved to lib/overview-shared/tokens.css (migrate-on-touch). */
/* ============================================================================
   ContentCaster — Overview command-center design tokens.

   THEME PARITY (founder Decision, 2026-06-27 — supersedes the prior dark-only
   call): this surface now FOLLOWS the app's light/dark toggle AND the 8 palettes.
   The --cc-* tokens map onto the app's palette+theme-aware variables
   (--surface-* / --text-* / --border-* / --accent / --positive) defined in
   index.html. Dark-surface EFFECTS (neon glow, white-overlay panels, the
   page-bg feed fade) carry explicit LIGHT variants here so they read on a light
   background instead of going invisible/muddy — the page must look intentional
   in light mode, not dark-mode-on-white. Animation logic + reduced-motion are
   unchanged; only visual tokens/effects change.

   Scoped to `.cc-overview` so nothing leaks into the rest of the app.
   ========================================================================== */
.cc-overview {
  /* ---- surfaces (theme-aware) ---- */
  --cc-bg:            var(--surface-ground);
  --cc-bg-rail:       var(--surface-raised);
  --cc-surface:       var(--surface-base);   /* card/panel fill — the app's soft near-black in dark, a card in light (never the near-pure-black ground) */
  /* ---- ONE uniform panel border for EVERY Overview box (no orange, no brackets).
     --border-base is one step up from the faintest hairline (--border-subtle) and
     is theme-calibrated, so it reads the SAME subtle weight in light + dark. ---- */
  --cc-border-overview: var(--border-base);
  --cc-radius-overview: 10px;
  --cc-pad-overview:    18px;

  /* ---- text (theme-aware) ---- */
  --cc-text:          var(--text-primary);
  --cc-cream:         var(--text-primary);   /* big stat numerals */
  --cc-body:          var(--text-secondary);
  --cc-muted:         var(--text-secondary);
  --cc-muted-strong:  var(--text-secondary);
  --cc-muted-soft:    var(--text-secondary);
  --cc-muted-dim:     var(--text-tertiary);
  --cc-muted-dimmer:  var(--text-tertiary);

  /* ---- accents (follow the active palette: Signal/Azure/Obsidian/…) ---- */
  --cc-accent:        var(--accent);
  --cc-accent-hi:     var(--accent-hover);
  --cc-accent-soft:   var(--accent-text);
  --cc-green:         var(--positive);
  --cc-red:           var(--negative);
  --cc-on-accent:     var(--cta-label);      /* text/icons on a solid accent fill */
  /* status accents — follow the app palette. Previously UNDEFINED in this scope, so
     `var(--cc-warn)` / `var(--cc-info)` on the -next pages resolved to nothing (transparent).
     --cc-amber is the warm-amber pair used for the DNA genome audience strand + SLA/at-risk. */
  --cc-warn:          var(--warning);
  --cc-info:          var(--info);
  --cc-amber:         var(--warning);
  --cc-warn-soft:     color-mix(in srgb, var(--warning) 14%, transparent);
  --cc-info-soft:     color-mix(in srgb, var(--info) 14%, transparent);

  /* Overlay ink for the translucent "panel" fills. LIGHT = dark ink (subtle
     darken on a light bg); DARK = white (subtle lighten on a dark bg). */
  --cc-overlay:       var(--text-primary);

  /* ---- derived accent/overlay tints (palette + theme aware) ---- */
  --cc-accent-22:     color-mix(in srgb, var(--cc-accent) 22%, transparent);
  --cc-accent-28:     color-mix(in srgb, var(--cc-accent) 28%, transparent);
  --cc-accent-18:     color-mix(in srgb, var(--cc-accent) 18%, transparent);
  --cc-card:          color-mix(in srgb, var(--cc-overlay) 4%, transparent);
  --cc-card-2:        color-mix(in srgb, var(--cc-overlay) 6%, transparent);
  --cc-hairline:      var(--border-subtle);
  --cc-grid-line:     color-mix(in srgb, var(--cc-accent) 5%, transparent);

  /* ---- glow effects — LIGHT default: a subtle shadow, NOT neon ---- */
  --cc-accent-glow:   0 1px 4px color-mix(in srgb, var(--cc-accent) 38%, transparent);
  --cc-green-glow:    0 1px 4px color-mix(in srgb, var(--cc-green) 38%, transparent);
  --cc-dot-glow:      0 0 0 3px color-mix(in srgb, var(--cc-accent) 16%, transparent);
  --cc-dot-glow-green: 0 0 0 3px color-mix(in srgb, var(--cc-green) 16%, transparent);

  /* ---- type ----
     CAR-FONT-ONE-VOICE (F-093): these two lines WERE the product's second font registry — they named
     faces literally, in a namespace disjoint from the app's, which is why no lint rule, contrast test
     or pixel gate could ever observe the divergence. They are now pure ALIASES of the one registry
     (src/styles/tokens.css). The --cc- names survive because ~2,000 call-sites read them and this
     scope carries its own per-theme overrides — but they are no longer a SOURCE.
     font-one-voice.test.ts ③ pins it: a literal family here fails the build. */
  --cc-font-display:  var(--font-display);
  --cc-font-body:     var(--font-ui);

  /* ---- layout — MATCH the live /overview width. The app's #main-content wrapper
     already applies the 48px page gutter (var(--layout-page-gutter)); this surface
     adds NONE, otherwise it double-gutters to 96px and renders narrower than the
     live page. ---- */
  --cc-maxw:          none;
  --cc-gutter:        0px;
}
/* DARK — restore the neon command-center identity (glows, white panels). */
[data-theme="dark"] .cc-overview {
  --cc-overlay:        #ffffff;
  --cc-card:           color-mix(in srgb, #ffffff 1.5%, transparent);
  --cc-card-2:         color-mix(in srgb, #ffffff 2.5%, transparent);
  --cc-grid-line:      color-mix(in srgb, var(--cc-accent) 4%, transparent);
  --cc-accent-glow:    0 0 8px var(--cc-accent);
  --cc-green-glow:     0 0 8px var(--cc-green);
  --cc-dot-glow:       0 0 8px var(--cc-accent);
  --cc-dot-glow-green: 0 0 8px var(--cc-green);
}
/* FB-6-ROOT (D-W3-POLISH-1) — the .cc-overview page ground (--cc-bg → --surface-ground) reads LIGHT
   in dark (architect's live dark-walk caught DIV.cc-overview light on /campaigns); repoint to the
   reliable --surface-base in dark. Light is unchanged. */
[data-theme="dark"] .cc-overview { --cc-bg: var(--surface-base); }
/* ============================================================================
   D-FONT-DESIGN — Type + hierarchy redesign pass (SCOPED, HELD for F-055 taste gate)

   THE PROBLEM (founder, verbatim): WCAG passes but the DESIGN feeling is wrong —
   "too much gray everywhere, no height/hierarchy difference."

   ROOT CAUSE found in the audit:
   1. GRAY RAMP COLLAPSED ONTO ONE VALUE. On the two sample pages (Creator +
      Overview) nearly every non-heading text token resolves to --text-secondary
      (#453f37 light) via the --cc-* map in overview-shared/tokens.css:
         --cc-body / --cc-muted / --cc-muted-strong / --cc-muted-soft  →  --text-secondary
         --cc-muted-dim / --cc-muted-dimmer                            →  --text-tertiary (#524c44)
      --cc-muted alone is consumed 101× and --cc-body 44× — so the dominant body
      colour is a washed mid-brown-gray, and the "two" gray steps (#453f37 vs
      #524c44) are almost the same tone. Result: body reads washed, hierarchy is
      flat, the page is "all gray".
   2. NO TYPE LADDER. Headings differ from body mostly by inline font-size with no
      systematic size/weight/line-height scale, so hierarchy leans on colour.

   THE FIX (this file):
   A. Collapse the gray ramp to 3 PURPOSEFUL steps — INK / SECONDARY / META — and
      remap the --cc-* text tokens onto them so body goes near-black and gray is
      RESERVED for genuinely-secondary meta/captions only. Applies page-wide with
      ZERO component edits because the pages already consume the --cc-* tokens.
   B. A real modular TYPE LADDER (display / heading / subhead / body / caption) as
      scoped tokens + .tv-* utility classes, so hierarchy reads from size+weight.
   C. Large-screen crispness — font-smoothing + optimizeLegibility + tightened
      display tracking, so headings have presence at 1440px+.

   SCOPING: everything is under `.cc-overview.type-v2` (both sample roots carry
   `cc-overview`; this pass ADDS `type-v2`). The compound selector out-specifies
   the base `.cc-overview` token block, and NOTHING without `.type-v2` is touched —
   the rest of the app is visually unchanged. App-wide rollout (post-GO) = promote
   these steps to the global :root / [data-theme="dark"] blocks in index.html.

   Both themes are defined. No hardcoded hex leaks into components — the new steps
   ARE tokens, defined once here and consumed through the existing --cc-* names.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   A + B — the collapsed gray ramp + the type-ladder tokens (LIGHT).
   --------------------------------------------------------------------------- */
.cc-overview.type-v2 {
  /* --- collapsed gray ramp: 3 purposeful steps --- */
  --tv-ink:        var(--text-primary);   /* body + headings — near-black (#1a1814) */
  --tv-secondary:  #2e2820;               /* strong secondary — near-ink, NOT washed gray */
  --tv-meta:       #6b655c;               /* the ONE reserved gray — captions/meta only */

  /* --- remap the --cc-* text tokens onto the collapsed ramp ---
     body + heading + numerals → INK (was --text-secondary for body: the wash). */
  --cc-text:         var(--tv-ink);
  --cc-cream:        var(--tv-ink);
  --cc-body:         var(--tv-ink);
  /* the 101×-consumed "muted" workhorse + its strong/soft siblings → strong
     secondary (near-ink). Kills the pervasive mid-gray; hierarchy now comes from
     size+weight, not from graying-down. */
  --cc-muted:        var(--tv-secondary);
  --cc-muted-strong: var(--tv-secondary);
  --cc-muted-soft:   var(--tv-secondary);
  /* genuinely-dim tier → the one reserved META gray (captions / timestamps / hints). */
  --cc-muted-dim:    var(--tv-meta);
  --cc-muted-dimmer: var(--tv-meta);

  /* --- type ladder (modular scale, ~1.28, anchored at 15px body) ---
     D-TYPE-BALANCE-2 (founder taste, verbatim: "font big bold, looking bad"):
     the PAGE-TITLE tier (--tv-display-*) is re-anchored to the /leads scale —
     22-26px, semibold 600, never 700+. It was clamp(30px…40px) @ 700, which is
     what read as "big bold" on /creator. Eyebrow (--tv-caption-*) UNCHANGED.
     The heading tier is the /overview greeting's tier (its ONLY consumer) and is
     the one deliberately-larger statement on the app — left UNTOUCHED per the
     "Overview hero untouched" rail.

     TYPE LAW (founder "typography A", LOCKED 2026-07-14) — the scale + weight
     below are correct and stay; the FAMILY correction lives on .tv-display's rule
     (see section B): page titles are SERIF. "Display serif = Overview hero only"
     names the DISPLAY tier (the 40px editorial hero), NOT a serif ban on titles. */
  --tv-display-size:  clamp(22px, 1.15rem + 0.35vw, 26px);
  --tv-display-wt:    600;
  --tv-display-lh:    1.18;
  --tv-display-ls:    -0.012em;

  --tv-heading-size:  clamp(23px, 1.35rem + 0.5vw, 29px);
  --tv-heading-wt:    700;
  --tv-heading-lh:    1.15;
  --tv-heading-ls:    -0.015em;

  --tv-subhead-size:  19px;
  --tv-subhead-wt:    600;
  --tv-subhead-lh:    1.28;
  --tv-subhead-ls:    -0.008em;

  --tv-body-size:     15px;
  --tv-body-wt:       400;
  --tv-body-lh:       1.55;
  --tv-body-ls:       0;

  --tv-caption-size:  12.5px;
  --tv-caption-wt:    500;
  --tv-caption-lh:    1.4;
  --tv-caption-ls:    0.06em;

  /* D-CREATOR-V3 §11 — the small region EYEBROW (11px caps), reconciling the ladder with the spec's
     "eyebrows 11px caps". Distinct from --tv-caption (12.5px) so the two don't collide; meta-gray. */
  --tv-eyebrow-size:  11px;
  --tv-eyebrow-wt:    700;
  --tv-eyebrow-lh:    1.3;
  --tv-eyebrow-ls:    0.05em;

  /* --- C — large-screen crispness (inherited by the whole scope) --- */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   A — collapsed gray ramp (DARK). Ink = --text-primary dark (#f5f0e8); secondary
   near-white-warm; meta a true muted gray. Type-ladder tokens are theme-agnostic
   (defined once above) so only the colour steps re-declare here.
   --------------------------------------------------------------------------- */
[data-theme="dark"] .cc-overview.type-v2 {
  --tv-ink:        var(--text-primary);   /* #f5f0e8 */
  --tv-secondary:  #ded7ca;               /* strong secondary — near-white, crisp on the warm-dark surface */
  --tv-meta:       #968d80;               /* the ONE reserved gray — captions/meta only */

  --cc-text:         var(--tv-ink);
  --cc-cream:        var(--tv-ink);
  --cc-body:         var(--tv-ink);
  --cc-muted:        var(--tv-secondary);
  --cc-muted-strong: var(--tv-secondary);
  --cc-muted-soft:   var(--tv-secondary);
  --cc-muted-dim:    var(--tv-meta);
  --cc-muted-dimmer: var(--tv-meta);
}

/* ---------------------------------------------------------------------------
   B — the ladder as adoptable utility classes. A heading/body element opts in by
   dropping its inline font-size/weight/family and taking one class. Headings use
   the page's display face (Space Grotesk via --cc-font-display); body/caption use
   the body face (Sora via --cc-font-body). Colour comes from the collapsed ramp.
   --------------------------------------------------------------------------- */
/* PAGE-TITLE tier. F-061 (typography = B — ALL SANS; supersedes the D-TYPE-BALANCE-2
   "typography A" serif-page-titles rule, L-035 amended to B): --font-display is now the
   sans display face (Space Grotesk), so .tv-display routes page titles through the ONE
   centralized sans token — nothing renders serif. Its one consumer is /creator's
   "Compose once" title, which is a page title. */
.cc-overview.type-v2 .tv-display {
  font-family: var(--font-display);
  font-size: var(--tv-display-size);
  font-weight: var(--tv-display-wt);
  line-height: var(--tv-display-lh);
  letter-spacing: var(--tv-display-ls);
  color: var(--tv-ink);
}
.cc-overview.type-v2 .tv-heading {
  font-family: var(--cc-font-display, var(--font-display));
  font-size: var(--tv-heading-size);
  font-weight: var(--tv-heading-wt);
  line-height: var(--tv-heading-lh);
  letter-spacing: var(--tv-heading-ls);
  color: var(--tv-ink);
}
.cc-overview.type-v2 .tv-subhead {
  font-family: var(--cc-font-display, var(--font-display));
  font-size: var(--tv-subhead-size);
  font-weight: var(--tv-subhead-wt);
  line-height: var(--tv-subhead-lh);
  letter-spacing: var(--tv-subhead-ls);
  color: var(--tv-ink);
}
.cc-overview.type-v2 .tv-body {
  font-family: var(--cc-font-body);
  font-size: var(--tv-body-size);
  font-weight: var(--tv-body-wt);
  line-height: var(--tv-body-lh);
  letter-spacing: var(--tv-body-ls);
  color: var(--tv-ink);
}
.cc-overview.type-v2 .tv-caption {
  font-family: var(--cc-font-body);
  font-size: var(--tv-caption-size);
  font-weight: var(--tv-caption-wt);
  line-height: var(--tv-caption-lh);
  letter-spacing: var(--tv-caption-ls);
  text-transform: uppercase;
  color: var(--tv-meta);
}
/* D-CREATOR-V3 §11 — region eyebrow (11px caps, meta-gray) — the small ALL-CAPS section labels. */
.cc-overview.type-v2 .tv-eyebrow {
  font-family: var(--cc-font-body);
  font-size: var(--tv-eyebrow-size);
  font-weight: var(--tv-eyebrow-wt);
  line-height: var(--tv-eyebrow-lh);
  letter-spacing: var(--tv-eyebrow-ls);
  text-transform: uppercase;
  color: var(--tv-meta);
}
/* Phase 6.1.C — PageHeader primitive (extracted from Phase 6.1.B3.A
   .overview-page .page-header. Same dimensions/typography; unscoped so
   any cascade page can adopt without scope conflicts). */

.ds-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.ds-page-header__content {
  min-width: 0;
}

/* D-TYPE-BALANCE-2 (TYPE-LAW CORRECTION) — page-title tier, the /leads reference.
   CAR-FONT-ONE-VOICE (F-093): this rule routed its FAMILY through a token but kept weight, line-height
   and tracking as literals — so the re-derived page-title metrics would have reached the registry and
   stopped here, at the primitive that renders most page titles in the product. All five dimensions now
   consume the --type-page-title-* role, which is the only way a scale change actually lands.
   (The old comment also called this face "SERIF"; the product has been all-sans since F-061.) */
.ds-page-header__title {
  font-family: var(--type-page-title-family);
  font-size: var(--type-page-title-size);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-line);
  letter-spacing: var(--type-page-title-spacing);
  color: var(--text-primary);
  margin: 0;
}

.ds-page-header__subtitle {
  /* D-W2-FOUNDATION-1: the boot's deferred fix landed here — the subtitle routes its face through a
     token instead of a literal. F-093 changed the product's UI face and re-derived the subtitle
     weight/leading for it; this rule now consumes the whole --type-subtitle-* role, so it follows. */
  font-family: var(--type-subtitle-family);
  font-size: var(--type-subtitle-size);
  font-weight: var(--type-subtitle-weight);
  line-height: var(--type-subtitle-line);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0 0;
}

.ds-page-header__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .ds-page-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }
  .ds-page-header__title {
    font-size: 24px;
  }
}
/* D-W2-FOUNDATION-1 — the ONE page-frame standard (per Studio Ink v5 `.frame`).
   Tokens live in index.html: --frame-max (1080px) + --frame-gutter (34px). A surface
   adopts the frame by wrapping its content in <Frame> / .ds-frame — one max-width +
   gutter, centered, full-width below the cap; no half-width dead space beside content. */
.ds-frame {
  width: 100%;
  max-width: var(--frame-max);
  margin-inline: auto;
  padding-inline: var(--frame-gutter);
}
/* EmptyState — Phase 7.1 Day 5b canonical empty list / no-data display.
   Token-driven; ESLint rule no-hardcoded-colors enforces zero hex/rgb.
   D-299 — px literals re-derived to the locked 5/3/7 token scales (law §2);
   added the `--edition` variant: left-set editorial empty with a serif headline
   and a folio hairline rule (the signature motif), no tinted icon square. */

.ds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-7) var(--space-5);
  gap: var(--space-3);
}

.ds-empty-state__icon {
  font-size: var(--text-display);
  line-height: 1;
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}

.ds-empty-state__title {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-ui);
}

.ds-empty-state__message {
  font-size: var(--text-label);
  font-weight: 400;
  color: var(--text-secondary);
  max-width: var(--layout-prose-max);
  line-height: 1.5;
}

.ds-empty-state__cta {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-body);
  font-weight: 600;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: background var(--duration-fast, 120ms) ease,
    border-color var(--duration-fast, 120ms) ease;
}

.ds-empty-state__cta--primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.ds-empty-state__cta--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.ds-empty-state__cta--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.ds-empty-state__cta--secondary:hover {
  background: var(--surface-overlay);
  border-color: var(--border-base);
}

/* D-299 — the Edition empty: left-set, serif headline, a folio hairline rule. */
.ds-empty-state--edition {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: var(--space-6) var(--space-5);
  gap: var(--space-2);
  max-width: var(--layout-prose-max);
}

.ds-empty-state--edition::before {
  content: '';
  display: block;
  width: var(--space-6);
  height: 1px;
  background: var(--border-base);
  margin-bottom: var(--space-2);
}

.ds-empty-state--edition .ds-empty-state__icon {
  font-size: var(--text-section);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.ds-empty-state--edition .ds-empty-state__title {
  font-family: var(--font-display);
  font-size: var(--text-section);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ds-empty-state--edition .ds-empty-state__message {
  text-align: left;
}
/* Phase 6.1.C — Card primitive: matches Phase 6.1.B3.B locked spec
   (24px padding / 1.5px border / --bg-elevated / no shadow). Locked
   variant mirrors .agent-card-locked from overview-redesign.css:221
   (dashed border + opacity 0.55 — Settings dispatch level). */

.ds-card {
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: border-color var(--duration-fast, 120ms) ease;
}

.ds-card--highlighted {
  border-color: var(--accent-border);
  background: var(--accent-subtle);
}

.ds-card--locked {
  border-style: dashed;
  border-color: var(--border-base);
  background: var(--bg-inset);
  opacity: 0.55;
  position: relative;
}

.ds-card--locked::after {
  content: 'UPGRADE';
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 99px;
}
/* Surface — Phase 7.1 Day 5b raw token-bound base container.
   Token aliases used here are defined in Frontend/React/index.html
   (see CSS Variables section). Auto-adapts to dark mode + 8 palettes
   via the cascade — no hex codes, no rgb(), no Tailwind color classes
   (Day 1 ESLint rule blocks regression). */

.ds-surface {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  transition: border-color var(--duration-fast, 120ms) ease;
}

.ds-surface--canvas {
  background: var(--bg-canvas);
}
.ds-surface--surface {
  background: var(--bg-surface);
}
.ds-surface--elevated {
  background: var(--bg-elevated);
}
.ds-surface--inset {
  background: var(--bg-inset);
}
.ds-surface--overlay {
  background: var(--surface-overlay);
}

.ds-surface--padding-none {
  padding: 0;
}
.ds-surface--padding-sm {
  padding: 12px;
}
.ds-surface--padding-md {
  padding: 24px;
}
.ds-surface--padding-lg {
  padding: 32px;
}
/* ProgressBar — Phase 7.1 Day 5b semantic intent usage bar.
   Token-driven; ESLint rule no-hardcoded-colors enforces zero hex/rgb.

   Semantic intent → token mapping:
     success → var(--positive)
     warning → var(--warning)
     danger  → var(--negative)
     neutral → var(--text-tertiary) (subtle)
   These match existing index.html semantic tokens (positive / warning /
   negative / info), not --success / --danger which don't exist. */

.ds-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ds-progress__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ds-progress__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-ui);
}

.ds-progress__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.ds-progress__track {
  background: var(--bg-inset);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}

.ds-progress__fill {
  height: 100%;
  border-radius: 99px;
  transition: width var(--duration-base, 200ms) ease;
}

.ds-progress__fill--success {
  background: var(--positive);
}

.ds-progress__fill--warning {
  background: var(--warning);
}

.ds-progress__fill--danger {
  background: var(--negative);
}

.ds-progress__fill--neutral {
  background: var(--text-tertiary);
}
/* Phase 6.1.C — SectionTitle primitive (extracted from Phase 6.1.B3.B
   .overview-page .section-title spec: 20px / 700 / -0.012em / 1.3). */

.ds-section-title {
  margin-bottom: 16px;
}

/* CAR-FONT-ONE-VOICE (F-093): same fix as PageHeader — the family rode a token but size/weight/line/
   tracking were literals, so the re-derived section-title metrics (weight 700 -> 650 and tracking
   -0.012 -> -0.015em, both optical-weight corrections for the new UI face) would have stopped at the
   registry. The role is consumed whole here so a scale change reaches the primitive that renders it. */
.ds-section-title__heading {
  font-family: var(--type-section-title-family);
  font-size: var(--type-section-title-size);
  font-weight: var(--type-section-title-weight);
  line-height: var(--type-section-title-line);
  letter-spacing: var(--type-section-title-spacing);
  color: var(--text-primary);
  margin: 0;
}

/* The description sits between body (14px) and caption (11px); it keeps its own 13px size but takes
   the body role's re-derived WEIGHT and LEADING so it reads at the same ink as the rest of the page. */
.ds-section-title__description {
  font-family: var(--type-body-family);
  font-size: 13px;
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
  color: var(--text-secondary);
  margin: 4px 0 0 0;
}
/* Phase 6.1.B2 — Locked design v1.0 Button primitive (relocated into design-system/
   in Slice A). Used by Overview hero (B2) and cascading to all pages (B3+).
   Variants: primary | secondary | ghost | destructive
   Sizes: md (default) | sm

   Token consumption (all defined post-B1):
     --bg-surface, --bg-inset, --border-default (B1 aliases)
     --accent, --accent-hover, --accent-active (per-palette tuned, pre-existing)
     --text-primary, --text-secondary, --text-tertiary (pre-existing)
     --negative (pre-existing)
*/

.cc-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  user-select: none;
}

.cc-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === Size variant: small === */
.cc-btn--sm {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
}

/* === Variant: primary (ONE per view) ===
   D-131 (2026-06-12) — PRIMARY-CTA CONTRAST CONTRACT (binding):
   Consumes the --cta-* token family (light + dark variants declared in
   index.html). Every state (base/hover/active) is contracted to ≥4.5:1
   label-on-fill at the button's 13px / weight-500 default shape.
   Light: white-on-deep-orange (4.99 → 5.66 → 7.09 across states).
   Dark:  dark-ink-on-vivid-orange (5.97 → 7.18 → 8.38 across states).
   Focus outline (L31) still uses --accent and remains untouched.
   See USER_APP_DESIGN_LAW §5 AMENDMENT #2 + cited ratios in R-129. */
.cc-btn--primary {
  background: var(--cta-fill);
  color: var(--cta-label);
  border-color: var(--cta-fill);
}
.cc-btn--primary:hover:not(:disabled) {
  background: var(--cta-fill-hover);
  border-color: var(--cta-fill-hover);
}
.cc-btn--primary:active:not(:disabled) {
  background: var(--cta-fill-active);
  border-color: var(--cta-fill-active);
}

/* === Variant: secondary (workhorse) === */
.cc-btn--secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.cc-btn--secondary:hover:not(:disabled) {
  background: var(--bg-inset);
}
.cc-btn--secondary:active:not(:disabled) {
  background: var(--bg-inset);
  border-color: var(--text-tertiary);
}

/* === Variant: ghost (tertiary) === */
.cc-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.cc-btn--ghost:hover:not(:disabled) {
  background: var(--bg-inset);
  color: var(--text-primary);
}

/* === Variant: destructive (subtle delete-link) === */
.cc-btn--destructive {
  background: transparent;
  color: var(--negative);
  border-color: transparent;
}
.cc-btn--destructive:hover:not(:disabled) {
  background: var(--negative-subtle);
  border-color: var(--negative-border);
}

/* === Variant: danger (saturated DESTROY CTA — SA-redesign Stage 0-B 2026-06-03) ===
   Saturated-red CTA for irreversible destroy actions (matches the inline
   `S.btnDanger` shape at ~10 SuperAdmin.tsx sites). White foreground is
   brand-locked legibility.
   D-173 (2026-06-15): the background is now --danger-strong (a deep,
   palette-independent danger-button red) instead of --negative. The status
   red --negative is tuned for red TEXT/indicators and its dark value
   (#f05050) is too bright to carry white at WCAG AA (3.52:1); --danger-strong
   (#c4291c, both themes) carries white at 5.71:1. White (#FFFFFF) is correct
   on this deep red in both modes (it does NOT flip — = --text-inverse). */
.cc-btn--danger {
  background: var(--danger-strong);
  color: #FFFFFF;
  border-color: var(--danger-strong);
}
.cc-btn--danger:hover:not(:disabled) {
  filter: brightness(1.08);
}
.cc-btn--danger:active:not(:disabled) {
  filter: brightness(0.92);
}

/* === Variant: ai (THE canonical AI/agent treatment — Slice A, #UI/UX) ===
   The 12 AI agents are the product, so AI affordances must POP and read as
   distinctly "AI". This is the SINGLE source for that look — slice B's Creator
   AI surfaces and every future AI control use variant="ai" instead of a one-off
   inline gradient (which is what this phase is removing).

   Token-pure + theme-correct: the saturated violet --ai family flips per theme
   (deep violet in light, lighter violet in dark), and --text-inverse flips with
   it, so contrast holds in light + dark + all palettes. --ai-subtle is the hover
   glow ring. (--ai is index.html's first-class AI token, Phase 6.0c.) */
.cc-btn--ai {
  background: linear-gradient(135deg, var(--ai), var(--ai-active));
  color: var(--text-inverse);
  border-color: transparent;
}
.cc-btn--ai:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--ai-hover), var(--ai-active));
  box-shadow: 0 0 0 3px var(--ai-subtle);
}
.cc-btn--ai:active:not(:disabled) {
  background: var(--ai-active);
}

/* === Variant: ai-ready (THE canonical CONSUME treatment — #3a) ===
   Companion to variant="ai" (GENERATE/spends). Use for actions that USE an
   already-generated / already-paid AI artifact (free): "Use AI draft",
   "Approve & Use", "Apply suggestion". TONAL violet (soft --ai-subtle wash +
   --ai text + --ai-border) so it reads "AI, ready & free" — NOT the loud
   "spend" gradient. Same --ai token family → themes light/dark/all palettes.
   The single CONSUME state every AI surface inherits (Slice B + future). */
.cc-btn--ai-ready {
  background: var(--ai-subtle);
  color: var(--ai);
  border-color: var(--ai-border);
}
.cc-btn--ai-ready:hover:not(:disabled) {
  border-color: var(--ai);
  box-shadow: 0 0 0 3px var(--ai-subtle);
}
.cc-btn--ai-ready:active:not(:disabled) {
  border-color: var(--ai);
}
/**
 * goals.css — B-GOALS2 (F-091) · the Goals surfaces' stylesheet.
 *
 * TOKENS ONLY. Every colour, radius, space, type role and shadow below is a registry token that
 * already exists in `src/styles/tokens.css`; this file introduces ZERO new values and ZERO raw hex.
 * The class names are `gw-` prefixed (goals war room) so nothing here can reach another surface.
 *
 * THE TWO MARKS live in `.gw-track` and are the load-bearing part of this file:
 *   · `.gw-track__fill` is var(--text-secondary) — NEUTRAL INK. It is never given a status colour,
 *     in any state, which is what makes "zero red bars" a property of the stylesheet rather than a
 *     promise about the markup.
 *   · `.gw-track__tick` is var(--accent) — the pace mark.
 *   · `.gw-track__gap` is the ONLY colour-bearing element, and it is hatched rather than filled so
 *     it can never be mistaken for a value.
 *
 * Every comment block in this file is opened AND closed. (v835: an unbalanced comment silently
 * deletes the next rule, and class-name assertions still pass — so a broken control ships.)
 */

/* ═══════════════════════ page frame ═══════════════════════ */
.gw {
  --gw-track-h: 10px;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}
.gw__row { display: flex; align-items: center; gap: var(--space-2); }
.gw__row--between { justify-content: space-between; }
.gw__row--wrap { flex-wrap: wrap; }
.gw__num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

.gw__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  line-height: 1;
  letter-spacing: var(--type-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.gw__sub {
  font-size: var(--type-body-dense-size);
  line-height: var(--type-body-dense-line);
  color: var(--text-secondary);
}
.gw__cap {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-tertiary);
}
.gw__h1 {
  font-family: var(--type-page-title-family);
  font-size: var(--type-page-title-size);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-line);
  letter-spacing: var(--type-page-title-spacing);
}
.gw__h2 {
  font-size: var(--type-section-title-size);
  font-weight: var(--type-section-title-weight);
  line-height: var(--type-section-title-line);
  letter-spacing: var(--type-section-title-spacing);
}
.gw__h3 {
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-line);
}

/* ═══════════════════════ chips ═══════════════════════ */
.gw-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--type-micro-size);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
}
.gw-chip--ok     { background: var(--positive-subtle); color: var(--positive-text); border-color: var(--positive-border); }
.gw-chip--warn   { background: var(--warning-subtle);  color: var(--warning);       border-color: var(--warning-border); }
.gw-chip--neg    { background: var(--negative-subtle); color: var(--negative);      border-color: var(--negative-border); }
.gw-chip--info   { background: var(--info-subtle);     color: var(--info-text);     border-color: var(--info-border); }
.gw-chip--mute   { background: var(--surface-raised);  color: var(--text-tertiary); border-color: var(--border-base); }
.gw-chip--accent { background: var(--accent-subtle);   color: var(--accent-text);   border-color: var(--accent-border); }
.gw-chip--ai     { background: var(--ai-subtle);       color: var(--ai-text);       border-color: var(--ai-border); }

.gw-crown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cta-label);
  background: var(--cta-fill);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

.gw-plat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  font-size: var(--type-micro-size);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
/* The dot's BRAND colour is supplied inline from `usePlatformRegistry()` — the SuperAdmin-managed
   catalogue — so a new platform needs a registry row, not a rule here. This class carries only the
   shape plus the neutral fallback a slug the registry does not know still renders in. */
.gw-plat__dot { width: 7px; height: 7px; border-radius: var(--radius-full); display: block; }
.gw-plat__dot--other { background: var(--text-disabled); }

/* ═══════════════════════ THE TWO MARKS ═══════════════════════ */
.gw-track {
  position: relative;
  height: var(--gw-track-h);
  background: var(--surface-inset);
  border-radius: var(--radius-pill);
  overflow: visible;
}
/* NEUTRAL INK. No modifier of this rule anywhere in this file assigns it a status colour. */
.gw-track__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: var(--text-secondary);
  border-radius: var(--radius-pill);
}
/* The gap band — the ONLY place colour appears on a track. Hatched, never solid. */
.gw-track__gap {
  position: absolute;
  inset-block: 0;
  border-radius: var(--radius-xs);
}
.gw-track__gap--behind {
  background: repeating-linear-gradient(115deg, var(--warning-subtle) 0 5px, transparent 5px 10px);
  box-shadow: inset 0 0 0 1px var(--warning-border);
}
.gw-track__gap--off {
  background: repeating-linear-gradient(115deg, var(--negative-subtle) 0 5px, transparent 5px 10px);
  box-shadow: inset 0 0 0 1px var(--negative-border);
}
.gw-track__gap--ahead {
  background: repeating-linear-gradient(115deg, var(--positive-subtle) 0 5px, transparent 5px 10px);
  box-shadow: inset 0 0 0 1px var(--positive-border);
}
.gw-track__tick {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.gw-track__flag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -15px;
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.08em;
  color: var(--accent-text);
  white-space: nowrap;
}
.gw-track--big { --gw-track-h: 22px; }
.gw-track--big .gw-track__tick { top: -8px; bottom: -8px; width: 3px; }
.gw-track--case { --gw-track-h: 18px; }
.gw-track--rail { --gw-track-h: 6px; }
.gw-track--rail .gw-track__tick { top: -3px; bottom: -3px; width: 2px; }

.gw-ends { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: 7px; }
.gw-ends > span {
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.gw-ends__verdict--behind { color: var(--warning); }
.gw-ends__verdict--off    { color: var(--negative); }
.gw-ends__verdict--ahead  { color: var(--positive-text); }
.gw-ends__verdict--level  { color: var(--positive-text); }

/* ═══════════════════════ census strip ═══════════════════════ */
.gw-census {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: var(--space-5);
}
.gw-census__cell { background: var(--surface-base); padding: 13px 16px; min-width: 0; }
.gw-census__v {
  font-family: var(--font-mono);
  font-size: var(--type-metric-lg-size);
  font-weight: var(--type-weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.gw-census__v--ok    { color: var(--positive-text); }
.gw-census__v--warn  { color: var(--warning); }
.gw-census__v--neg   { color: var(--negative); }
.gw-census__v--mute  { color: var(--text-tertiary); }
.gw-census__v--info  { color: var(--info-text); }
.gw-census__k {
  font-size: var(--type-caption-size);
  color: var(--text-tertiary);
  margin-top: 5px;
  line-height: 1.35;
}
.gw-census__dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
}
.gw-census__dot--ok      { background: var(--positive); }
.gw-census__dot--warn    { background: var(--warning); }
.gw-census__dot--neg     { background: var(--negative); }
.gw-census__dot--mute    { background: var(--text-disabled); }
.gw-census__dot--blocked { background: var(--info); }
/* The arithmetic failing its own check is a bug in the model, and it says so instead of lying. */
.gw-census__broken {
  grid-column: 1 / -1;
  background: var(--negative-subtle);
  color: var(--negative);
  padding: var(--space-2) var(--space-4);
  font-size: var(--type-caption-size);
}

/* ═══════════════════════ segmented tabs ═══════════════════════ */
.gw-seg {
  display: inline-flex;
  background: var(--surface-raised);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-control);
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.gw-seg button {
  font-family: inherit;
  font-size: var(--type-body-dense-size);
  font-weight: var(--type-weight-semibold);
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.gw-seg button:hover { color: var(--text-primary); }
.gw-seg button:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gw-seg button[aria-selected='true'] {
  background: var(--surface-base);
  color: var(--text-primary);
  border-color: var(--border-base);
  box-shadow: var(--shadow-xs);
}
.gw-seg__n {
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  font-weight: var(--type-weight-bold);
  background: var(--surface-inset);
  border-radius: var(--radius-full);
  padding: 2px 6px;
  color: var(--text-tertiary);
}
.gw-seg button[aria-selected='true'] .gw-seg__n { background: var(--text-primary); color: var(--surface-base); }

/* ═══════════════════════ primary instrument ═══════════════════════ */
.gw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 452px;
  gap: 1px;
  background: var(--border-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: var(--space-5);
  box-shadow: var(--shadow-md);
}
.gw-hero > div { background: var(--surface-base); padding: var(--space-5); min-width: 0; }
.gw-hero__side { background: var(--surface-raised); }
.gw-bignum {
  font-family: var(--font-mono);
  font-size: var(--type-metric-hero-size);
  font-weight: var(--type-weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
}
.gw-figure {
  font-family: var(--font-mono);
  font-size: var(--type-metric-sm-size);
  font-weight: var(--type-weight-bold);
  color: var(--text-secondary);
  margin-top: 7px;
}
.gw-verdict {
  margin-top: var(--space-4);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-base);
  background: var(--surface-raised);
  font-size: var(--type-dense-size);
  line-height: 1.55;
  color: var(--text-secondary);
}
.gw-verdict b { color: var(--text-primary); font-weight: var(--type-weight-bold); }

/* ═══════════════════════ fleet ═══════════════════════ */
.gw-fleet {
  margin-top: var(--space-4);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-card);
  background: var(--surface-base);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gw-fleet__head,
.gw-fleet__row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 148px 134px 146px 38px;
  gap: var(--space-4);
  align-items: center;
}
.gw-fleet__head {
  padding: 10px var(--space-5);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-base);
}
.gw-fleet__row {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  text-align: left;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.gw-fleet__row:last-child { border-bottom: none; }
.gw-fleet__row:hover { background: var(--surface-raised); }
.gw-fleet__row:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gw-fleet--archived .gw-fleet__head,
.gw-fleet--archived .gw-fleet__row { grid-template-columns: minmax(0, 1fr) 220px 190px 150px; }

.gw-goalname {
  font-size: var(--type-dense-size);
  font-weight: var(--type-weight-semibold);
  color: var(--text-primary);
  line-height: 1.35;
}
.gw-gtype { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gw-cell__v {
  font-family: var(--font-mono);
  font-size: var(--type-deck-head-size);
  font-weight: var(--type-weight-bold);
}
.gw-cell__v--muted { color: var(--text-tertiary); }
.gw-steers { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gw-steers > span { font-size: var(--type-caption-size); color: var(--text-tertiary); line-height: 1.35; }
.gw-steers b { color: var(--text-secondary); font-family: var(--font-mono); font-weight: var(--type-weight-bold); }
.gw-steers__note--info { color: var(--info-text); }
.gw-steers__note--warn { color: var(--warning); }
.gw-avatar {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  font-size: var(--type-micro-size);
  font-weight: var(--type-weight-bold);
  color: var(--text-secondary);
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
}

/* ═══════════════════════ the honest-gap block ═══════════════════════ */
.gw-blocked {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  padding: 9px 12px;
}
.gw-blocked__why { font-size: var(--type-body-dense-size); color: var(--text-secondary); line-height: 1.4; flex: 1 1 220px; }
.gw-blocked__why b { color: var(--text-primary); }
.gw-mini {
  font-family: inherit;
  font-size: var(--type-caption-size);
  font-weight: var(--type-weight-semibold);
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-base);
  background: var(--surface-base);
  color: var(--text-secondary);
  cursor: pointer;
}
.gw-mini:hover { border-color: var(--border-strong); color: var(--text-primary); }
.gw-mini--info { border-color: var(--info-border); color: var(--info-text); }
.gw-mini:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.gw-blockpanel {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  padding: var(--space-5);
}

/* ═══════════════════════ legacy sentence row ═══════════════════════ */
.gw-legacy {
  margin-top: var(--space-5);
  border: 1px solid var(--accent-border);
  background: var(--accent-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.gw-legacy q {
  font-size: var(--type-dense-size);
  color: var(--text-primary);
  font-style: italic;
  line-height: 1.5;
  display: block;
  max-width: 780px;
}

/* ═══════════════════════ steering band + booked work ═══════════════════════ */
/* FOUR panels since CAR-GOALSLIVE — v2a's three plus v2b's booked-work graft. auto-fit rather
   than a fixed count so the band reflows instead of squeezing four into three columns' width. */
.gw-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.gw-panel {
  background: var(--surface-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-5);
  min-width: 0;
}
.gw-li {
  display: flex;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
  align-items: flex-start;
}
.gw-li:last-child { border-bottom: none; padding-bottom: 0; }
.gw-li__t { font-size: var(--type-dense-size); font-weight: var(--type-weight-semibold); line-height: 1.35; }
.gw-li__m { font-size: var(--type-caption-size); color: var(--text-tertiary); margin-top: 3px; line-height: 1.4; }
.gw-serves {
  font-size: var(--type-micro-size);
  font-family: var(--font-mono);
  font-weight: var(--type-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 5px;
  display: block;
}

/* The v2b booked-work lane, on the goal's own axis. */
.gw-axis {
  position: relative;
  height: 30px;
  background: var(--surface-inset);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.gw-axis__after { position: absolute; inset-block: 0; background: var(--surface-overlay); }
.gw-axis__now { position: absolute; inset-block: 0; width: 2px; background: var(--accent); }
.gw-axis__month { position: absolute; inset-block: 0; width: 1px; background: var(--border-base); }

/* ═══════════════════════ the doorway (first run) ═══════════════════════ */
.gw-doorway {
  margin-top: var(--space-5);
  border: 1px solid var(--border-base);
  background: var(--surface-base);
  border-radius: var(--radius-card);
  padding: var(--space-7) var(--space-6);
  box-shadow: var(--shadow-md);
}
.gw-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-top: var(--space-5);
}
.gw-step { background: var(--surface-base); padding: var(--space-4); min-width: 0; }
.gw-step__n {
  font-family: var(--font-mono);
  font-size: var(--type-micro-size);
  font-weight: var(--type-weight-bold);
  color: var(--cta-label);
  background: var(--cta-fill);
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
}
.gw-step__t { font-size: var(--type-dense-size); font-weight: var(--type-weight-semibold); margin-top: 10px; }
.gw-step__d { font-size: var(--type-caption-size); color: var(--text-tertiary); margin-top: 4px; line-height: 1.45; }
.gw-step__d b { color: var(--text-primary); }

.gw-starters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.gw-starter {
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface-raised);
  min-width: 0;
}

/* ═══════════════════════ the detail page (dossier) ═══════════════════════ */
.gw-split {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
  align-items: start;
}
.gw-rail {
  border: 1px solid var(--border-base);
  border-radius: var(--radius-card);
  background: var(--surface-base);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gw-rail__head { padding: var(--space-4); border-bottom: 1px solid var(--border-base); background: var(--surface-raised); }
.gw-rail__entry {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.gw-rail__entry:last-child { border-bottom: none; }
.gw-rail__entry:hover { background: var(--surface-raised); }
.gw-rail__entry:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.gw-rail__entry[aria-current='true'] { background: var(--accent-subtle); box-shadow: inset 3px 0 0 var(--accent); }
.gw-rail__dot { width: 8px; height: 8px; border-radius: var(--radius-full); display: inline-block; flex: none; }

.gw-dossier { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.gw-pane {
  background: var(--surface-base);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  min-width: 0;
}
.gw-pane__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.gw-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.gw-meta__k {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.gw-meta__v { display: block; margin-top: 5px; font-size: var(--type-dense-size); color: var(--text-primary); }
.gw-meta__v--absent { color: var(--text-tertiary); }

/* THE ARITHMETIC PANEL — v2c's "How this number is made", the permanent audit of every figure. */
.gw-maths {
  font-family: var(--font-mono);
  font-size: var(--type-dense-sm-size);
  line-height: 2;
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--text-secondary);
  overflow-x: auto;
}
.gw-maths b { color: var(--text-primary); font-weight: var(--type-weight-bold); }
.gw-maths__row { white-space: nowrap; }
.gw-maths__label { display: inline-block; min-width: 84px; color: var(--text-tertiary); }

.gw-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.gw-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

/* ═══════════════════════ the locked / dark state ═══════════════════════ */
.gw-locked {
  margin-top: var(--space-5);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-card);
  background: var(--surface-base);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.gw-locked__steps {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
  border: 1px solid var(--border-base);
}
.gw-locked__steps li { margin-left: var(--space-4); padding: 3px 0; font-size: var(--type-dense-size); color: var(--text-secondary); }
.gw-locked__key {
  font-family: var(--font-mono);
  font-size: var(--type-dense-sm-size);
  background: var(--surface-overlay);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
  color: var(--text-primary);
}

/* ═══════════════════════ responsive — the war room does not pretend to be a phone,
       but it must never overflow horizontally on one either ═══════════════════════ */
@media (max-width: 1180px) {
  .gw-hero { grid-template-columns: minmax(0, 1fr); }
  .gw-split { grid-template-columns: minmax(0, 1fr); }
  .gw-census { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gw-band { grid-template-columns: minmax(0, 1fr); }
  .gw-fleet__head { display: none; }
  .gw-fleet__row,
  .gw-fleet--archived .gw-fleet__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .gw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gw-starters { grid-template-columns: minmax(0, 1fr); }
  .gw-grid2, .gw-grid3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gw-census { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gw-steps { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════ CAR-GOALSLIVE — the engine the page now consumes ═══════════════════════
   Every value below is a registry token. The one thing these rules are NOT allowed to do is give the
   trend line or the trail dots a STATUS colour: the two-marks law (F-091) says colour appears only in
   the GAP between where you are and where pace wants you, and a trail tinted red would smuggle a
   verdict into a history. The line is neutral ink; only the HOLES carry a tone, and the tone they
   carry is the honest-gap one (info/warning), never negative. */

/* ── the census's stated reason (sparse density) ── */
.gw-census__note {
  grid-column: 1 / -1;
  background: var(--surface-raised);
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-base);
  padding: var(--space-3) var(--space-4);
  font-size: var(--type-caption-size);
  line-height: 1.45;
}

/* ── a step's honest residual, one shade quieter than the step's own line ── */
.gw-step__d--caveat { color: var(--text-disabled); margin-top: 5px; }

/* ── THE READING TRAIL ── */
.gw-trail { min-width: 0; }
.gw-trail__plot {
  position: relative;
  height: 116px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  padding: var(--space-2);
  overflow: hidden;
}
.gw-trail__plot svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* NEUTRAL INK — the same rule the progress fill lives under. */
.gw-trail__line {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* The dot layer is HTML, not SVG — see the note in ReadingTrail.tsx. Inset by the plot's own padding
   so a point at x=0 or x=100% is not half-clipped by the frame. */
.gw-trail__dots {
  position: absolute;
  inset: var(--space-2);
  pointer-events: none;
}
.gw-trail__dot {
  position: absolute;
  width: 5px; height: 5px;
  margin-inline-start: -2.5px;
  margin-block-start: -2.5px;
  border-radius: var(--radius-full);
  background: var(--text-secondary);
}
/* A DAY WE COULD NOT READ. Drawn ON the axis as a dashed rule, never bridged by the line. */
.gw-trail__hole {
  stroke: var(--info);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}
.gw-trail__single {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-end: var(--space-2);
  font-size: var(--type-micro-size);
  font-family: var(--font-mono);
  color: var(--text-tertiary);
}

/* ── tagged work (GoalLink rows) ── */
.gw-linklist { list-style: none; margin: 0; padding: 0; }
/* TWO LINES BY DESIGN, not by accident. These panels sit three-across, so a row carrying a type,
   an 'inherited' chip, an id and a date cannot fit beside its Untag button — left to flex-wrap it
   dropped the button onto a ragged second line only on the rows that happened to be longest. The
   grid makes the same two lines deliberate and identical on every row. */
.gw-linklist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  min-width: 0;
}
.gw-linklist__row > .gw__cap { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-linklist__row > .gw-mini { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.gw-linklist__row:last-child { border-bottom: none; }
.gw-linklist__what {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-dense-size);
  font-weight: var(--type-weight-semibold);
  color: var(--text-primary);
  text-transform: capitalize;
}


/* ── the create form + the trade-template search ── */
.gw-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border-base);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--type-dense-size);
}
.gw-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.gw-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── starter cards are BUTTONS now (they open the create path), so they need button reset ── */
button.gw-starter {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: start;
  cursor: pointer;
  font-family: var(--font-ui);
  color: var(--text-primary);
}
button.gw-starter:hover { border-color: var(--accent); }
button.gw-starter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gw-starter__t {
  font-family: var(--font-display);
  font-size: var(--type-dense-size);
  font-weight: var(--type-weight-semibold);
  color: var(--text-primary);
  line-height: 1.35;
}
/* design-system/Input.css — token-only (no hardcoded colors → theme/palette-correct
   in light + dark + all 7 palettes). Matches the Button convention (8px radius,
   0.12s transitions, --font-ui). Tokens are the same ones Inbox already consumes. */

.cc-input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-overlay);
  border: 1px solid var(--border-base);
  border-radius: 8px;
  padding: 0 12px;
  font-family: var(--font-ui);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.cc-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.cc-input--invalid {
  border-color: var(--negative);
}

.cc-input__field {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  padding: 8px 0;
}

.cc-input__field::placeholder {
  color: var(--text-tertiary);
}

.cc-input__field:disabled {
  cursor: not-allowed;
  color: var(--text-tertiary);
}

.cc-input__icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-tertiary);
  flex: none;
}

.cc-input__icon--trail {
  cursor: pointer;
}

/* Size: small */
.cc-input--sm {
  padding: 0 8px;
  border-radius: 6px;
}
.cc-input--sm .cc-input__field {
  font-size: 12px;
  padding: 5px 0;
}
/* ========================================================================
   Phase 6.6.followup2 Track 1 — Modal design-system primitive

   Replaces ad-hoc fixed-position-inset modal JSX scattered across components.
   Built-in: scroll-lock (via useScrollLock), animations, a11y, 3 sizes.
   Per SE-39: consumes Phase 6.1 global tokens, redefines NONE.
   ======================================================================== */

.ds-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px;
  animation: ds-backdrop-fade-in 150ms ease-out;
}

.ds-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  animation: ds-modal-slide-up 200ms ease-out;
}

.ds-modal--sm { max-width: 420px; }
.ds-modal--md { max-width: 600px; }
.ds-modal--lg { max-width: 900px; }

.ds-modal__title {
  font: 600 18px/1.3 var(--font-ui);
  color: var(--text-primary);
  padding: 24px 24px 0;
  margin: 0;
}

.ds-modal__body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  flex: 1;
}

/* Convenience class for modal action button rows. */
.ds-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

@keyframes ds-backdrop-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ds-modal-slide-up {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* Mobile: bottom-sheet pattern. */
@media (max-width: 480px) {
  .ds-modal-backdrop {
    padding: 12px;
    align-items: flex-end;
  }

  .ds-modal {
    max-height: 90vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .ds-modal__title {
    padding: 20px 20px 0;
  }

  .ds-modal__body {
    padding: 12px 20px 20px;
  }
}
/* Phase 6.1.C — SettingSection primitive: titled section with elevated
   card body. Phase 6.1 surface stack: canvas → elevated card. No shadows
   (per Phase 6.1.B3.B accent + chrome restraint). */

.ds-setting-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
}

.ds-setting-section__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 767px) {
  .ds-setting-section {
    padding: 16px;
    margin-bottom: 16px;
  }
}
/* Phase 6.1.C — ToggleRow primitive: label + optional description on the
   left, sliding switch on the right. Mirrors the inline Toggle helper at
   Settings.tsx:486 but uses Phase 6.1 tokens uniformly and supports
   danger + disabled variants. */

.ds-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.ds-toggle-row:last-child {
  border-bottom: none;
}

/* Bare variant: toggle without label/description (used when consumer
   renders its own label markup nearby, e.g., custom row layouts). */
.ds-toggle-row--bare {
  display: inline-flex;
  padding: 0;
  border-bottom: none;
  width: auto;
  gap: 0;
}

.ds-toggle-row__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ds-toggle-row__label {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

.ds-toggle-row--danger .ds-toggle-row__label {
  color: var(--negative);
}

.ds-toggle-row__description {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ds-toggle-row--danger .ds-toggle-row__description {
  color: var(--negative);
}

.ds-toggle-row__switch {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  background: var(--border-base);
  transition: background var(--duration-fast, 120ms) ease;
  flex-shrink: 0;
  padding: 0;
}

.ds-toggle-row__switch--on {
  background: var(--accent);
}

.ds-toggle-row--danger .ds-toggle-row__switch--on {
  background: var(--negative);
}

.ds-toggle-row__switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ds-toggle-row__thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left var(--duration-fast, 120ms) ease;
}

.ds-toggle-row__switch--on .ds-toggle-row__thumb {
  left: 22px;
}

.ds-toggle-row--disabled {
  opacity: 0.55;
  pointer-events: none;
}
/* Phase 6.1.C — UnsavedChangesBar primitive: sticky bottom-center pill
   that materializes when the consuming page has dirty state. Replaces
   Settings.tsx:1719 inline implementation that hardcoded a dark pill
   with shadow-2xl Tailwind class. Matches Phase 6.1 token set. */

.ds-unsaved-changes-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: none;
  animation: ds-unsaved-bar-in 200ms ease-out;
}

@keyframes ds-unsaved-bar-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.ds-unsaved-changes-bar__inner {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-base);
  border-radius: 99px;
  pointer-events: auto;
}

.ds-unsaved-changes-bar__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.ds-unsaved-changes-bar__message {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.ds-unsaved-changes-bar__divider {
  width: 1px;
  height: 20px;
  background: var(--border-subtle);
  flex-shrink: 0;
}

.ds-unsaved-changes-bar__actions {
  display: inline-flex;
  gap: 8px;
}

@media (max-width: 767px) {
  .ds-unsaved-changes-bar {
    bottom: 16px;
    left: 16px;
    right: 16px;
    transform: none;
  }
  .ds-unsaved-changes-bar__inner {
    width: 100%;
    justify-content: space-between;
  }
}
/* Score — Phase 7.1 Day 5b 0-100 score with semantic band.
   Token-driven; ESLint rule no-hardcoded-colors enforces zero hex/rgb. */

.ds-score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.ds-score__band {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

.ds-score--danger .ds-score__band {
  background: var(--negative);
}

.ds-score--warning .ds-score__band {
  background: var(--warning);
}

.ds-score--success .ds-score__band {
  background: var(--positive);
}

.ds-score__value {
  font-weight: 700;
  color: var(--text-primary);
}

.ds-score--danger .ds-score__value {
  color: var(--negative);
}

.ds-score--warning .ds-score__value {
  color: var(--warning);
}

.ds-score--success .ds-score__value {
  color: var(--positive);
}

.ds-score__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Size variants */
.ds-score--sm {
  font-size: 13px;
}
.ds-score--sm .ds-score__band {
  width: 6px;
  height: 6px;
}

.ds-score--md {
  font-size: 16px;
}

.ds-score--lg {
  font-size: 22px;
}
.ds-score--lg .ds-score__band {
  width: 10px;
  height: 10px;
}
.ds-score--lg .ds-score__label {
  font-size: 13px;
}
/**
 * TierBadge styles — D-047 BEAT 2 rewrite per SUPERADMIN_PAGE_STANDARD §6.
 *
 * Per canonical planTierColor map:
 *   Free        → var(--text-tertiary)        (gray)
 *   Starter     → var(--info)                  (blue)
 *   Pro/Professional → var(--ai)               (purple)
 *   Business/Enterprise → var(--tier-enterprise) (gold #B8860B)
 *
 * Sentence case (text-transform: none per §6).
 * NEVER var(--accent) — accent is RESERVED for primary CTAs/chrome.
 * Subtle tinted background (the canonical --*-subtle vars) gives the
 * pill visual weight without shouting; tier color drives the text.
 * Inherits at every consumer (Cost Dashboard row + Storage Quotas
 * per-org row + PlanCard header via PlanControlMatrix).
 */

.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  /* D-047 BEAT 2 — sentence case per SUPERADMIN_PAGE_STANDARD §6.
     Previous "text-transform: uppercase" REMOVED. */
  text-transform: none;
  border-radius: var(--radius-xs, 4px);
  white-space: nowrap;
  line-height: 1;
  border: 1px solid transparent;
}

.tier-badge--sm {
  font-size: 11px;
  padding: 3px 8px;
}

.tier-badge--md {
  font-size: 12px;
  padding: 4px 10px;
}

/* Free — neutral gray (canonical planTierColor: var(--text-tertiary)) */
.tier-badge--free {
  background: var(--surface-inset);
  color: var(--text-tertiary);
  border-color: var(--border-subtle);
}

/* Starter — info blue (canonical planTierColor: var(--info)) */
.tier-badge--starter {
  background: var(--info-subtle);
  color: var(--info);
  border-color: var(--info-border);
}

/* Pro / Professional — AI purple (canonical planTierColor: var(--ai)) */
.tier-badge--pro {
  background: var(--ai-subtle);
  color: var(--ai);
  border-color: var(--ai-border);
}

/* Business / Enterprise — tier-enterprise gold (canonical planTierColor:
   var(--tier-enterprise) #B8860B) */
.tier-badge--business,
.tier-badge--enterprise {
  background: var(--tier-enterprise-subtle);
  color: var(--tier-enterprise);
  border-color: var(--tier-enterprise-border);
}

/* Unknown tier (drift slug pre-canonical) — neutral marker */
.tier-badge--unknown {
  background: var(--surface-raised);
  color: var(--text-secondary);
  border-color: var(--border-base);
}
/**
 * PlanCard styles — consume canonical CSS custom properties from
 * Frontend/React/index.html. Per SE-39 risk gate, redefines NONE.
 *
 * Built on Card primitive chrome (ds-card / ds-card--*). PlanCard adds
 * header layout + price-row composition.
 *
 * Pattern 92 ship-new-canonical: no hardcoded hex/rgb literals; passes
 * no-hardcoded-colors ESLint rule.
 */

.ds-plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 12px);
  min-width: 200px;
}

.ds-plan-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  padding-bottom: var(--space-md, 12px);
  border-bottom: 1px solid var(--border-subtle);
}

.ds-plan-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 8px);
}

.ds-plan-card__name {
  font-family: var(--font-display, var(--font-ui));
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.ds-plan-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.ds-plan-card__currency {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1;
}

.ds-plan-card__price {
  font-family: var(--font-display, var(--font-ui));
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.ds-plan-card__price-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: 2px;
}

.ds-plan-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
}
/**
 * FeatureToggle styles — consume canonical CSS custom properties from
 * Frontend/React/index.html. Per SE-39 risk gate, redefines NONE.
 *
 * Composes existing ToggleRow primitive (ds-toggle-row). FeatureToggle
 * adds pending-state opacity for optimistic-update UX during D66
 * cluster pub/sub cache invalidation propagation window.
 *
 * Pattern 92 ship-new-canonical: no hardcoded hex/rgb literals; passes
 * no-hardcoded-colors ESLint rule.
 */

.ds-feature-toggle {
  width: 100%;
}

.ds-feature-toggle--pending {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}
/**
 * QuotaInput styles — consume canonical CSS custom properties from
 * Frontend/React/index.html. Per SE-39 risk gate, redefines NONE.
 *
 * unitType-aware numeric input with prefix/suffix slots for currency +
 * unit labels. Sentinel "Unlimited" rendered when value === -1 and
 * sentinelUnlimited=true (mirrors D63 QuotaRegistry.metadata.sentinelUnlimited
 * convention).
 *
 * Pattern 92 ship-new-canonical: no hardcoded hex/rgb literals; passes
 * no-hardcoded-colors ESLint rule.
 */

.ds-quota-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-ui);
}

.ds-quota-input__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ds-quota-input__field {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--border-base);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-base);
  transition: border-color 120ms ease-out;
}

.ds-quota-input__field:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus, 0 0 0 3px var(--accent-subtle));
}

.ds-quota-input__prefix,
.ds-quota-input__suffix {
  font-size: 13px;
  color: var(--text-tertiary);
  user-select: none;
}

.ds-quota-input__control {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}

.ds-quota-input__control:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.ds-quota-input__unlimited {
  flex: 1;
  font-size: 13px;
  font-style: italic;
  color: var(--accent-text);
}

.ds-quota-input--pending .ds-quota-input__field {
  opacity: 0.6;
  pointer-events: none;
}

.ds-quota-input--error .ds-quota-input__field {
  border-color: var(--negative);
  background: var(--negative-subtle, var(--surface-base));
}

.ds-quota-input--disabled .ds-quota-input__field {
  background: var(--surface-raised);
  cursor: not-allowed;
}

.ds-quota-input__error {
  font-size: 11px;
  color: var(--negative);
  font-weight: 500;
}
/**
 * PlanControlMatrix styles — consume canonical CSS custom properties
 * from Frontend/React/index.html. Per SE-39 risk gate, redefines NONE.
 *
 * Grid layout: column-1 = row labels; columns 2..N = per-plan cells;
 * column-N+1 (optional) = "+ Add Plan" button.
 *
 * Pattern 92 ship-new-canonical: no hardcoded hex/rgb literals; passes
 * no-hardcoded-colors ESLint rule. SE-50 compliant via canonical CSS
 * variable inheritance.
 */

.ds-plan-control-matrix {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 8px);
  width: 100%;
  font-family: var(--font-ui);
}

/* Column headers */
.ds-plan-control-matrix__columns {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md, 12px);
  padding-bottom: var(--space-md, 12px);
  border-bottom: 1px solid var(--border-base);
}

.ds-plan-control-matrix__column-header {
  display: flex;
  flex-direction: column;
}

.ds-plan-control-matrix__add-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs, 4px);
  min-height: 88px;
  background: transparent;
  border: 2px dashed var(--border-base);
  border-radius: var(--radius-md, 8px);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: border-color 120ms ease-out, color 120ms ease-out, background 120ms ease-out;
}

.ds-plan-control-matrix__add-plan:hover {
  border-color: var(--accent);
  color: var(--accent-text);
  background: var(--accent-subtle);
}

.ds-plan-control-matrix__add-plan:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px var(--accent-subtle));
}

.ds-plan-control-matrix__add-plan-icon {
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}

.ds-plan-control-matrix__add-plan-label {
  font-size: 12px;
  font-weight: 600;
}

/* Rows */
.ds-plan-control-matrix__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 4px);
}

.ds-plan-control-matrix__row {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md, 12px);
  align-items: center;
  padding: var(--space-sm, 8px) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.ds-plan-control-matrix__row:last-child {
  border-bottom: none;
}

.ds-plan-control-matrix__row-label-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: var(--space-sm, 8px);
}

.ds-plan-control-matrix__row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.ds-plan-control-matrix__row-category {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* SA-redesign Slice 1 — inline-help info icon. Native title-tooltip
   surfaces the description on hover + keyboard + long-press; no JS
   tooltip dependency. */
.ds-plan-control-matrix__row-info {
  display: inline-block;
  margin-left: 6px;
  color: var(--text-tertiary);
  cursor: help;
  font-size: 12px;
  font-weight: 400;
  user-select: none;
  vertical-align: 1px;
}

.ds-plan-control-matrix__row-info:hover {
  color: var(--text-secondary);
}

/* SA-redesign Slice 1 — optional trailing label decoration (e.g., the
   global-ceiling badge for quotas that have a SystemSetting cap). */
.ds-plan-control-matrix__row-extra {
  margin-top: 2px;
}

.ds-plan-control-matrix__cell {
  display: flex;
  align-items: center;
  min-height: 32px;
}
/**
 * Banner.css — canonical CSS variable consumption per Pattern 93 mechanical-
 * enforcement (no-hardcoded-colors ESLint rule). 0 hex/rgb literals; all
 * colors via var(--*) tokens from Frontend/React/index.html canonical block.
 *
 * Phase 7.2 D73 (v4 §8.3 Plan Control UI Phase 11th + FINAL dispatch).
 * SE-50 light + dark mode coverage inherits via canonical theme tokens.
 */

.ds-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  /* Subtle elevation; theme-aware via design-system shadow tokens. */
  box-shadow: var(--shadow-sm);
}

/* Intent variant — info: neutral accent for advisory state. */
.ds-banner--info {
  background: var(--info-subtle);
  color: var(--info-text);
  border-color: var(--info-border);
}

/* Intent variant — warning: amber/orange band for soft over-quota. */
.ds-banner--warning {
  background: var(--warning-subtle);
  color: var(--warning-text);
  border-color: var(--warning-border);
}

/* Intent variant — critical: red band for severe over-quota / payload-too-large. */
.ds-banner--critical {
  background: var(--negative-subtle);
  color: var(--negative-text);
  border-color: var(--negative-border);
}

/* Intent variant — success: green band for confirmation states. */
.ds-banner--success {
  background: var(--positive-subtle);
  color: var(--positive-text);
  border-color: var(--positive-border);
}

.ds-banner__content {
  flex: 1;
  min-width: 0;
}

.ds-banner__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: inherit;
}

.ds-banner__message {
  margin: 0;
  font-size: 13px;
  color: inherit;
  opacity: 0.92;
}

.ds-banner__meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.78;
}

.ds-banner__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ds-banner__action {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.ds-banner__action--primary {
  background: var(--accent);
  color: var(--accent-text);
}

.ds-banner__action--primary:hover {
  background: var(--accent-hover);
}

.ds-banner__action--secondary {
  background: transparent;
  color: inherit;
  border-color: currentColor;
  opacity: 0.85;
}

.ds-banner__action--secondary:hover {
  opacity: 1;
}

.ds-banner__dismiss {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}

.ds-banner__dismiss:hover {
  opacity: 1;
  background: var(--surface-base);
}
/* design-system/Select.css — token-only (theme/palette-correct). Matches the
   Button/Input convention. Native chevron retained (theme-neutral, accessible). */

.cc-select {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface-overlay);
  border: 1px solid var(--border-base);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.cc-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.cc-select--invalid {
  border-color: var(--negative);
}

.cc-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Size: small */
.cc-select--sm {
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 6px;
}
/* design-system/Textarea.css — token-only (theme/palette-correct). Matches the
   Input convention; vertical resize only. */

.cc-textarea {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-overlay);
  border: 1px solid var(--border-base);
  border-radius: 8px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  resize: vertical;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.cc-textarea::placeholder {
  color: var(--text-tertiary);
}

.cc-textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.cc-textarea--invalid {
  border-color: var(--negative);
}

.cc-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* design-system/Checkbox.css — token-only (theme/palette-correct). accent-color
   ties the native check to the active palette accent. */

.cc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cc-checkbox--labeled {
  cursor: pointer;
}

.cc-checkbox__box {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex: none;
}

.cc-checkbox__box:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cc-checkbox__box:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cc-checkbox__label {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
}
/**
 * kill-switch.css — D-DIRECTIVE-1 / B-KILL (A1 · A2 · A4).
 *
 * Styles for the kill-switch confirmation panel (`.ksw__*`) and the app-wide halt banner
 * (`.kswbanner__*`).
 *
 * WHY ITS OWN FILE rather than an append to `pages/ai-team-next/styles/ai-team-next.css`:
 *   1. The banner mounts in the App shell (App.tsx), which renders on every authenticated route
 *      including ones that never load a page stylesheet. A banner whose styles arrive only when
 *      someone happens to open /ai-team is not app-wide.
 *   2. `.aitn__modal` is declared twice in that file with different widths (:336 and :1168) — the
 *      file's own note at :1335 records the collision. A separate namespace in a separate file
 *      cannot join that pile-up.
 * Both consumers import this file directly, so the styles travel with the components.
 *
 * TOKENS ONLY — no literal colours. Severity comes from `--negative*` / `--positive*`, which are
 * palette-independent and defined for light and dark (tokens.css:149-157 · :582-590), so the panel
 * reads correctly in all eight palettes without a per-palette rule.
 */

/* ─── A1/A2 · the confirmation panel ─────────────────────────────────────────────────────────── */

.ksw__veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--surface-glass);
  backdrop-filter: blur(2px);
}

/* "Larger" is the founder's word: 560px against the old 440px, and it holds a real impact table
   rather than two sentences. `max-height` + inner scroll keeps it whole on a laptop and on mobile. */
.ksw__panel {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  border: 1px solid var(--border-base);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* K3 — the panel arrives rather than appears. A ~160ms rise is the difference between a popup and
     an instrument being presented; it is not decoration, it is the pacing the founder's "ceremony"
     asked for. Disabled wholesale under prefers-reduced-motion at the foot of this file. */
  animation: ksw-rise 0.16s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes ksw-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/*
 * K3 · THE LETTERHEAD. The Kaatviq mark + "Emergency Control" above the severity band.
 *
 * Deliberately NOT on the band: the mark is a saturated orange square and would clash on red or
 * green, and the band has to stay one unbroken colour field — that is what makes the direction
 * legible at a glance and what the AA pair below was measured against. Letterhead, then subject.
 */
.ksw__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.ksw__brandname {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--text-primary);
}
.ksw__brandsep {
  width: 1px;
  height: 12px;
  background: var(--border-base);
}
.ksw__brandeyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/*
 * THE HEADER BAND — severity fill + the ink that survives it.
 *
 * The direction must be unmistakable (founder §1.2; §13 rejects "red styling on a safe/resume
 * action"), so the band is a saturated severity fill. But a fill is only half the decision: the ink
 * on it has to clear AA, and reading the first capture pass proved it did not. Measured, not
 * eyeballed (WCAG relative luminance over the real token values):
 *   · light `--positive` #0FA968 + white  =  3.05:1  FAIL
 *   · dark  `--positive` #3AE58A + white  =  1.65:1  FAIL  ← the worst: bright mint under white
 *   · dark  `--negative` #FF5470 + white  =  3.11:1  FAIL
 * Only light `--negative` (#D6244A + white = 4.99:1) passed. Shipping the rest would have re-created,
 * on the most consequential dialog in the product, exactly the washed-ink defect CAR-INK-1 was cut to
 * fix — and a saturated band makes it look deliberate, which is worse.
 *
 * The fix keeps the fill and swaps the PAIR per theme, from tokens that already exist:
 *   LIGHT — deep fill (`--positive-text` #0a7a48 · `--negative` #D6244A) under white ink.
 *   DARK  — the bright fill the dark palette is built around, under the dark ink `--surface-ground`
 *           (#08080A), which is the surface those bright values were chosen to sit above.
 * Re-measured after the swap: light safe 5.40:1 · light danger 4.99:1 · dark safe 12.15:1 · dark
 * danger 6.44:1 — every cell clears AA, both themes. Pinned by the contrast assertions in
 * tests/visual-qa/directive-kill-captures.spec.ts, which compute the ratio in the real browser.
 */
.ksw__head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 20px 22px;
  background: var(--ksw-band);
  color: var(--ksw-band-ink);
}

.ksw__panel--danger { --ksw-band: var(--negative); --ksw-band-ink: var(--fg-on-fill); }
.ksw__panel--safe   { --ksw-band: var(--positive-text); --ksw-band-ink: var(--fg-on-fill); }

[data-theme="dark"] .ksw__panel--danger { --ksw-band: var(--negative); --ksw-band-ink: var(--surface-ground); }
[data-theme="dark"] .ksw__panel--safe   { --ksw-band: var(--positive); --ksw-band-ink: var(--surface-ground); }

/*
 * K1 · THE INFORMATIONAL BAND — the read-only impact view.
 *
 * Neither red nor green, and that is the point. Red would tell the reader something destructive is
 * being proposed; green would tell them something is being resolved. Nothing is being proposed: the
 * halt is already in force and this panel only reports it. So the band is a plain elevated surface
 * with normal body ink — which is also why it inherits AA for free rather than needing its own
 * measured fill/ink pair. The halt's severity is carried by the ICON, in `--negative`, where it
 * states the state without dressing information up as an action.
 */
.ksw__panel--info { --ksw-band: var(--surface-inset); --ksw-band-ink: var(--text-primary); --ksw-band-icon: var(--negative); }

/* The icon sits directly on the band. It previously carried a `--surface-glass` box, which in light
   resolved to near-white BEHIND a near-white glyph — an invisible icon, caught by reading the
   capture rather than by any assertion. `currentColor` ties it to the band ink instead, so it can
   never drift out of contrast with the surface it is drawn on.

   K3 — the emblem plate. The glyph now sits in a ring struck from `currentColor` itself (16% fill,
   30% border), so it gains weight and formality while remaining, by construction, in the same
   colour family as the ink measured against this band. A literal plate colour would have been a
   fourth thing to re-measure per theme per direction. */
.ksw__headicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  color: var(--ksw-band-icon, currentColor);
  background: color-mix(in srgb, currentColor 16%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.ksw__headtext { flex: 1; min-width: 0; padding-top: 2px; }
.ksw__headtext h3 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.ksw__headtext p  { margin: 0; font-size: 13px; line-height: 1.55; opacity: 0.95; }

.ksw__close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 4px;
  border: none;
  border-radius: 7px;
  background: transparent;
  /* `currentColor`, not `--fg-on-fill`: the info band (K1) carries DARK ink in light theme, where a
     hardcoded white X is an invisible close button — the same failure mode the head icon had. */
  color: currentColor;
  opacity: 0.8;
  cursor: pointer;
}
.ksw__close:hover:not(:disabled) { opacity: 1; background: var(--surface-glass); }
.ksw__close:disabled { opacity: 0.4; cursor: not-allowed; }

.ksw__body { padding: 16px 20px 4px; overflow-y: auto; }

/* K3 — the label now carries a hairline that runs to the panel edge, so the panel reads as sectioned
   like a document rather than as a stack of loose paragraphs. */
.ksw__sectionlabel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 6px 0 11px;
}
.ksw__sectionlabel::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.ksw__rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.ksw__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
}

.ksw__rowfig { flex: 0 0 auto; min-width: 48px; text-align: right; }

/* K3 — the counts are the anatomy the founder singled out; they carry the weight accordingly.
   `tabular-nums` keeps the column edge straight as figures change width. */
.ksw__fig {
  font-size: 26px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
/* The honest dash. Dimmed so an unread figure never reads as loud as a measured one. */
.ksw__fig--dim { color: var(--text-tertiary); font-weight: 500; }

.ksw__rowtext { flex: 1; min-width: 0; }
.ksw__rowtext b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }

.ksw__rownote {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ksw__keeps {
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.ksw__unavailable,
.ksw__error {
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.ksw__unavailable {
  background: var(--warning-subtle);
  border: 1px solid var(--warning-border);
  color: var(--text-secondary);
}

/* The read-only seat's honest line — shown instead of a confirm button that would 403. */
.ksw__readonly {
  margin: 0 20px 4px;
  padding: 10px 13px;
  border-radius: 10px;
  background: var(--surface-inset);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.ksw__error {
  background: var(--negative-subtle);
  border: 1px solid var(--negative-border);
  color: var(--text-primary);
}

.ksw__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border-subtle);
}

.ksw__actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 11px;
  cursor: pointer;
}
.ksw__actions button:disabled { opacity: 0.6; cursor: not-allowed; }

.ksw__cancel {
  border: 1px solid var(--border-base);
  background: var(--surface-glass);
  color: var(--text-secondary);
}
.ksw__cancel:hover:not(:disabled) { background: var(--surface-inset); color: var(--text-primary); }

/* The confirm button reuses the header's measured fill/ink pair, so the button can never drift out
   of contrast (or out of colour agreement) with the band above it. */
.ksw__confirm { border: none; background: var(--ksw-band); color: var(--ksw-band-ink); }
.ksw__confirm:hover:not(:disabled) { filter: brightness(1.06); }

.ksw__spin { animation: ksw-spin 0.9s linear infinite; }
@keyframes ksw-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .ksw__panel { max-height: 92vh; }
  .ksw__actions { flex-direction: column-reverse; }
  .ksw__actions button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ksw__spin { animation: none; }
  /* K3 — the ceremony is pacing, never a prerequisite for reading the panel. */
  .ksw__panel { animation: none; }
}

/* ─── A4 · the app-wide halt banner ──────────────────────────────────────────────────────────── */

/*
 * Mounted in the App shell beside SampleDataBanner / CrisisBanner, so it renders on EVERY
 * authenticated route. The founder's word is "soft, persistent": it must be impossible to miss and
 * impossible to mistake for a page error, and it is deliberately NOT dismissible — the halt is a
 * state of the workspace, not a notice about one. It disappears when the halt does.
 */
.kswbanner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: var(--negative-subtle);
  border-bottom: 1px solid var(--negative-border);
  position: relative;
  z-index: 1100;
}

.kswbanner__dot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  color: var(--negative);
}

.kswbanner__text { flex: 1; min-width: 0; }
.kswbanner__text b { font-weight: 650; }

.kswbanner__detail {
  color: var(--text-secondary);
  margin-left: 6px;
}

.kswbanner__acts { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.kswbanner__link,
.kswbanner__cta {
  font-family: inherit;
  font-size: 12.5px;
  border-radius: 8px;
  cursor: pointer;
  padding: 5px 10px;
}

.kswbanner__link {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kswbanner__link:hover { color: var(--text-primary); }

/* The permission-gated shortcut. Resume is the SAFE direction, so it carries success semantics here
   too — the same §13 rule that governs the modal, and the same measured fill/ink pair, so the
   button in the banner and the button in the panel it opens cannot disagree or fall below AA. */
.kswbanner__cta {
  background: var(--positive-text);
  border: none;
  color: var(--fg-on-fill);
  font-weight: 650;
}
[data-theme="dark"] .kswbanner__cta {
  background: var(--positive);
  color: var(--surface-ground);
}
.kswbanner__cta:hover:not(:disabled) { filter: brightness(1.06); }
.kswbanner__cta:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 720px) {
  .kswbanner { flex-wrap: wrap; row-gap: 6px; }
  .kswbanner__detail { display: none; }
}
/**
 * ContentCaster UI/UX Audit — CSS Patch File
 * Applied: March 17, 2026
 */

/* C-1: Mobile sidebar collapse */
@media (max-width: 767px) {
  .sidebar {
    position: fixed !important;
    top: 0; left: -270px; height: 100vh; width: 256px;
    z-index: 200; transition: left 0.25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }
  .sidebar.open { left: 0; }
  .main-content { margin-left: 0 !important; width: 100% !important; }
  .mobile-nav-toggle {
    display: flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: none; background: none; cursor: pointer;
    color: var(--text-primary);
  }
  .sidebar-overlay {
    display: block !important; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.4); z-index: 199;
  }
}
.mobile-nav-toggle { display: none; }
.sidebar-overlay { display: none; }

/* ══════════════════════════════════════════════════════════════
   Mobile Foundations — Phase A (April 21, 2026)
   ══════════════════════════════════════════════════════════════ */

/* Prevent horizontal scroll on small screens */
html, body, #root {
  max-width: 100vw;
}
body { overflow-x: hidden; }

@media (max-width: 767px) {
  /* Prevent iOS auto-zoom on focus of inputs (requires >= 16px) */
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Shrink main content padding — desktop uses 28px 32px which is too wide */
  #main-content {
    padding: 16px 12px 64px !important;
  }

  /* Reduce top bar horizontal padding on mobile */
  .top-bar, [data-topbar] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Hide scrollbars on horizontal carousel containers */
  .hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hide-scrollbar::-webkit-scrollbar { display: none; }

  /* Catch-all: any grid with 4 equal columns collapses to 2 on mobile
     (covers both 'repeat(4, 1fr)' with space and 'repeat(4,1fr)' no-space) */
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Any 3-equal-col grid → 1 col on mobile */
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 5-col grid → 2 cols on mobile (Analytics heatmap-like grids) */
  [style*="repeat(5,1fr)"],
  [style*="repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 2fr 1fr → stack (Analytics chart + sidebar pattern) */
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns:2fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Two-column dashboard layout (content + right rail) → stack vertically */
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns:1fr 380px"] {
    grid-template-columns: 1fr !important;
  }

  /* 1fr 1fr (2-col half/half) stays 2-col on mobile but shrinks gap — readable */
  /* leave as-is; CSS grid auto-handles narrow screens */
}

/* Desktop-only / mobile-only visibility helpers */
@media (max-width: 767px) { .desktop-only { display: none !important; } }
@media (min-width: 768px) { .mobile-only  { display: none !important; } }

/* People page — row stacks on mobile so the fixed-width columns
   (segment 100px, score bars 80px each, time 70px, count 40px = 370px)
   don't force horizontal scroll at 375px viewport */
@media (max-width: 767px) {
  .people-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 12px !important;
    min-height: 60px;
  }
  /* First block (avatar + name + platform icons) takes full first row */
  .people-row > div:first-child { flex: 1 1 100% !important; }
  /* Remaining metric columns flow as a second wrapped row */
  .people-row > div:nth-child(n+2) { width: auto !important; font-size: 11px; }
  .people-row > div:nth-child(3),
  .people-row > div:nth-child(4) { min-width: 70px; flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════
   Task 6 (Phase B P3) — Tab horizontal scroll on mobile
   Settings + Automation: vertical left sidebar → top horizontal scroll
   Agent Settings modal: full-screen + sidebar → top scroll bar
   Post Detail platform tabs: flex-wrap → horizontal scroll
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Settings + Automation: flip parent flex-row → column so tab bar
     stacks above content */
  .side-tabs-layout { flex-direction: column !important; }

  /* Turn the vertical tab sidebar into a horizontal scrollable bar */
  .side-tabs-nav {
    width: 100% !important;
    height: auto !important;
    position: sticky !important;
    top: 52px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px !important;
    gap: 0 !important;
    scrollbar-width: none;
    z-index: 10;
  }
  .side-tabs-nav::-webkit-scrollbar { display: none; }

  /* Settings sidebar has an <h2>Settings</h2> heading — hide on mobile */
  .side-tabs-nav > h2 { display: none !important; }

  /* Flatten Settings group wrappers so their buttons flow into the
     horizontal scroll as direct flex children */
  .side-tabs-nav > div { display: contents !important; }
  /* Hide the "WORKSPACE" / "ORGANIZATION" group label divs */
  .side-tabs-nav > div > div:first-child { display: none !important; }

  /* Every tab button in the bar: compact, no-wrap, 44px touch target */
  .side-tabs-nav button {
    white-space: nowrap !important;
    width: auto !important;
    padding: 10px 14px !important;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    min-height: 44px;
    background: transparent !important;
    margin-bottom: 0 !important;
  }
  /* Active tab: orange underline */
  .side-tabs-nav button[style*="accent-subtle"],
  .side-tabs-nav button[style*="var(--accent)"] {
    border-bottom: 2px solid var(--accent) !important;
  }

  /* Post Detail platform tabs: flex-wrap:wrap → horizontal scroll */
  .post-detail-platform-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .post-detail-platform-tabs::-webkit-scrollbar { display: none; }
  .post-detail-platform-tabs > button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Agent Settings modal: full-screen (no padding/rounded),
     sidebar → top horizontal scroll bar */
  .agent-settings-modal { padding: 0 !important; }
  .agent-settings-modal-inner {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    flex-direction: column !important;
  }
  .agent-settings-modal-sidebar {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 10px 12px !important;
    flex-direction: row !important;
    align-items: center;
  }
  /* Hide agent name header on mobile (keep the tabs visible + compact) */
  .agent-settings-modal-sidebar > div:first-child { display: none !important; }
  /* Sidebar <nav> becomes horizontal flex with scroll */
  .agent-settings-modal-sidebar > nav {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 !important;
    gap: 0 !important;
    width: 100%;
  }
  .agent-settings-modal-sidebar > nav::-webkit-scrollbar { display: none; }
  .agent-settings-modal-sidebar > nav > button {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border-radius: 0 !important;
    min-height: 44px;
    border-bottom: 2px solid transparent !important;
  }
}

/* H-2: Disabled buttons — neutral grey */
button:disabled, button[disabled] {
  cursor: not-allowed !important;
  opacity: 0.55 !important;
}

/* H-7: Calendar/filter chips wrap */
[class*="platform-chips"], [class*="filter-chips"] {
  flex-wrap: wrap !important; gap: 6px !important;
}

/* M-2: Creator Studio textarea focus */
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08) !important;
  outline: none;
}

/* Accessibility: focus rings */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* Accessibility: skip to content */
.skip-to-content {
  position: absolute; top: -100px; left: 16px; z-index: 9999;
  padding: 8px 16px; background: var(--accent); color: #fff;
  border-radius: 6px; font-weight: 600; text-decoration: none; transition: top 0.2s;
}
.skip-to-content:focus { top: 16px; }

/* Monospace for technical labels */
code, .code, [class*="monospace"] {
  font-family: var(--font-mono) !important;
}

/* ============================================================
   [FIX] C-3: AI Captions + Competitors orange regression
   Redirect orange-600 Tailwind classes to theme-aware --accent
   ============================================================ */
.bg-orange-600, [class~="bg-orange-600"] {
  background-color: var(--accent) !important;
}
.hover\:bg-orange-700:hover {
  background-color: var(--accent) !important;
  filter: brightness(0.88);
}
.text-orange-600, [class~="text-orange-600"] {
  color: var(--accent) !important;
}
.text-orange-700, [class~="text-orange-700"] {
  color: var(--accent) !important;
}
.text-orange-400, [class~="text-orange-400"] {
  color: var(--accent) !important;
  opacity: 0.7;
}
.text-orange-500, [class~="text-orange-500"] {
  color: var(--accent) !important;
}
.bg-orange-100, [class~="bg-orange-100"] {
  background-color: var(--accent-subtle) !important;
}
.bg-orange-50, [class~="bg-orange-50"] {
  background-color: var(--accent-subtle) !important;
}
.hover\:bg-orange-50:hover {
  background-color: var(--accent-subtle) !important;
}
.accent-orange-600, [class~="accent-orange-600"] {
  accent-color: var(--accent) !important;
}
.focus\:ring-blue-400:focus {
  --tw-ring-color: var(--accent) !important;
}

/* ============================================================
   QA AUDIT FIXES — March 17, 2026
   ============================================================ */

/* S1-1: Dark mode bg-white → surface-raised */
[data-theme="dark"] .bg-white,
[data-palette="midnight"] .bg-white,
[data-palette="obsidian"] .bg-white {
  background-color: var(--surface-raised) !important;
}
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200,
[data-palette="midnight"] .border-slate-100,
[data-palette="midnight"] .border-slate-200,
[data-palette="obsidian"] .border-slate-100,
[data-palette="obsidian"] .border-slate-200 {
  border-color: var(--border-subtle) !important;
}
[data-theme="dark"] .text-slate-900,
[data-palette="midnight"] .text-slate-900,
[data-palette="obsidian"] .text-slate-900 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .text-slate-700,
[data-palette="midnight"] .text-slate-700,
[data-palette="obsidian"] .text-slate-700 {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400,
[data-palette="midnight"] .text-slate-500,
[data-palette="midnight"] .text-slate-400,
[data-palette="obsidian"] .text-slate-500,
[data-palette="obsidian"] .text-slate-400 {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100,
[data-palette="midnight"] .bg-slate-50,
[data-palette="midnight"] .bg-slate-100,
[data-palette="obsidian"] .bg-slate-50,
[data-palette="obsidian"] .bg-slate-100 {
  background-color: var(--surface-overlay) !important;
}

/* S1-3: Campaigns blue → accent */
.bg-blue-600 { background-color: var(--accent) !important; }
.hover\:bg-blue-700:hover { background-color: var(--accent) !important; filter: brightness(0.88); }
.text-blue-600 { color: var(--accent) !important; }
.bg-blue-100 { background-color: var(--accent-subtle) !important; }

/* === S1-4: Violet → --ai (Phase 6.0c PR4.5 — architect Q2 decision)
   Originally mapped to --accent (Signal warm orange), now mapped to --ai
   (warm violet) to preserve AI semantic distinction from brand action color.
   Phase 6.0c PR1 introduced --ai family; this brings violet utilities in line. */
.bg-violet-600 { background-color: var(--ai) !important; }
.hover\:bg-violet-700:hover { background-color: var(--ai-hover) !important; }
.text-violet-600 { color: var(--ai) !important; }
.text-violet-700 { color: var(--ai-active) !important; }
.text-violet-800 { color: var(--ai-active) !important; }
.text-violet-900 { color: var(--ai-active) !important; }
.bg-violet-50 { background-color: var(--ai-subtle) !important; }
.bg-violet-100 { background-color: var(--ai-subtle) !important; }
.border-violet-200 { border-color: var(--ai-border) !important; }
.hover\:border-violet-200:hover { border-color: var(--ai-border) !important; }

/* === S2: Green/Emerald → --positive (Phase 6.0c PR4.5)
   Tailwind green/emerald utilities map onto warm-positive token family. */
.bg-green-500 { background-color: var(--positive) !important; }
.bg-green-600 { background-color: var(--positive) !important; }
.bg-green-700 { background-color: var(--positive) !important; }
.text-green-600 { color: var(--positive) !important; }
.text-green-700 { color: var(--positive) !important; }
.text-green-800 { color: var(--positive) !important; }
.text-green-900 { color: var(--positive) !important; }
.bg-green-50 { background-color: var(--positive-subtle) !important; }
.bg-green-100 { background-color: var(--positive-subtle) !important; }
.border-green-200 { border-color: var(--positive-border) !important; }
.border-green-300 { border-color: var(--positive-border) !important; }
.bg-emerald-500 { background-color: var(--positive) !important; }
.bg-emerald-600 { background-color: var(--positive) !important; }
.text-emerald-600 { color: var(--positive) !important; }
.text-emerald-700 { color: var(--positive) !important; }
.bg-emerald-50 { background-color: var(--positive-subtle) !important; }
.bg-emerald-100 { background-color: var(--positive-subtle) !important; }
.border-emerald-200 { border-color: var(--positive-border) !important; }

/* === S3: Red → --negative (Phase 6.0c PR4.5) */
.bg-red-500 { background-color: var(--negative) !important; }
.bg-red-600 { background-color: var(--negative) !important; }
.bg-red-700 { background-color: var(--negative) !important; }
.text-red-500 { color: var(--negative) !important; }
.text-red-600 { color: var(--negative) !important; }
.text-red-700 { color: var(--negative) !important; }
.text-red-800 { color: var(--negative) !important; }
.bg-red-50 { background-color: var(--negative-subtle) !important; }
.bg-red-100 { background-color: var(--negative-subtle) !important; }
.border-red-200 { border-color: var(--negative-border) !important; }
.border-red-300 { border-color: var(--negative-border) !important; }

/* === S4: Amber/Yellow/Orange → --warning (Phase 6.0c PR4.5)
   Per architect Q2: orange-500 used for governance FLAGGED state maps to
   --warning, NOT --accent — those are different semantic surfaces. */
.bg-amber-500 { background-color: var(--warning) !important; }
.bg-amber-600 { background-color: var(--warning) !important; }
.text-amber-500 { color: var(--warning) !important; }
.text-amber-600 { color: var(--warning) !important; }
.text-amber-700 { color: var(--warning) !important; }
.text-amber-800 { color: var(--warning) !important; }
.bg-amber-50 { background-color: var(--warning-subtle) !important; }
.bg-amber-100 { background-color: var(--warning-subtle) !important; }
.border-amber-200 { border-color: var(--warning-border) !important; }
.border-amber-300 { border-color: var(--warning-border) !important; }
.bg-yellow-400 { background-color: var(--warning) !important; }
.bg-yellow-500 { background-color: var(--warning) !important; }
.text-yellow-600 { color: var(--warning) !important; }
.text-yellow-700 { color: var(--warning) !important; }
.bg-yellow-50 { background-color: var(--warning-subtle) !important; }
.bg-yellow-100 { background-color: var(--warning-subtle) !important; }
.border-yellow-200 { border-color: var(--warning-border) !important; }
.bg-orange-500 { background-color: var(--warning) !important; }
.bg-orange-600 { background-color: var(--warning) !important; }
.text-orange-600 { color: var(--warning) !important; }
.text-orange-700 { color: var(--warning) !important; }
.bg-orange-50 { background-color: var(--warning-subtle) !important; }
.bg-orange-100 { background-color: var(--warning-subtle) !important; }
.border-orange-200 { border-color: var(--warning-border) !important; }

/* S1-5: Amber metrics → primary text */
[class~="text-amber-500"] { color: var(--text-primary) !important; }

/* S2-10: Native select dark mode */
[data-theme="dark"] select,
[data-palette="midnight"] select,
[data-palette="obsidian"] select {
  background-color: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* === Indigo → --ai (Phase 6.0c PR4.5 — sibling to violet, AI semantic) */
.bg-indigo-600 { background-color: var(--ai) !important; }
.bg-indigo-50 { background-color: var(--ai-subtle) !important; }
.bg-indigo-100 { background-color: var(--ai-subtle) !important; }
.text-indigo-600 { color: var(--ai) !important; }
.text-indigo-700 { color: var(--ai) !important; }
.border-indigo-200 { border-color: var(--ai-border) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--ai-hover) !important; }

/* Emerald status badges — keep green semantic but fix dark bg */
[data-theme="dark"] .bg-emerald-100,
[data-palette="midnight"] .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}
[data-theme="dark"] .bg-emerald-50,
[data-palette="midnight"] .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.1) !important;
}
[data-theme="dark"] .bg-red-50,
[data-palette="midnight"] .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1) !important;
}
[data-theme="dark"] .bg-amber-50,
[data-palette="midnight"] .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.1) !important;
}

/* Dark mode — Phase 6.0c PR4.5 family extensions
   Token system handles light↔dark switching at the variable level; these
   overrides ensure the Tailwind utility maps to the correct token in dark mode. */
[data-theme="dark"] .bg-violet-50 { background-color: var(--ai-subtle) !important; }
[data-theme="dark"] .bg-violet-100 { background-color: var(--ai-subtle) !important; }
[data-theme="dark"] .text-violet-600 { color: var(--ai) !important; }
[data-theme="dark"] .text-violet-700 { color: var(--ai) !important; }
[data-theme="dark"] .bg-green-100 { background-color: var(--positive-subtle) !important; }
[data-theme="dark"] .bg-red-100 { background-color: var(--negative-subtle) !important; }
[data-theme="dark"] .bg-amber-100 { background-color: var(--warning-subtle) !important; }
[data-theme="dark"] .bg-orange-100 { background-color: var(--warning-subtle) !important; }
[data-theme="dark"] .bg-yellow-100 { background-color: var(--warning-subtle) !important; }

/* Phase 2.5d.4-hotfix — amber text + border tokens for dark mode.
   The 2.5d.4 LinkedIn capability disclosure uses amber-700/900 text on
   amber-50 backgrounds, which renders correctly on light surfaces but
   muddy/washed-out on dark surfaces (text-amber-900 = #78350F is too
   close to black on a dark card). Mapping the dark-end of the scale
   to lighter amber values restores readable contrast without breaking
   the brand-warm intent. */
[data-theme="dark"] .text-amber-900,
[data-palette="midnight"] .text-amber-900,
[data-palette="obsidian"] .text-amber-900 { color: #FDE68A !important; }
[data-theme="dark"] .text-amber-800,
[data-palette="midnight"] .text-amber-800,
[data-palette="obsidian"] .text-amber-800 { color: #FCD34D !important; }
[data-theme="dark"] .text-amber-700,
[data-palette="midnight"] .text-amber-700,
[data-palette="obsidian"] .text-amber-700 { color: #FBBF24 !important; }
[data-theme="dark"] .text-amber-600,
[data-palette="midnight"] .text-amber-600,
[data-palette="obsidian"] .text-amber-600 { color: #F59E0B !important; }
[data-theme="dark"] .border-amber-200,
[data-palette="midnight"] .border-amber-200,
[data-palette="obsidian"] .border-amber-200 { border-color: rgba(180, 83, 9, 0.4) !important; }
[data-theme="dark"] .hover\:text-amber-700:hover,
[data-palette="midnight"] .hover\:text-amber-700:hover,
[data-palette="obsidian"] .hover\:text-amber-700:hover { color: #FCD34D !important; }
/* The callout uses an opacity-modifier class (bg-amber-50/60) which
   compiles to a separate selector — explicit override needed. */
[data-theme="dark"] .bg-amber-50\/60,
[data-palette="midnight"] .bg-amber-50\/60,
[data-palette="obsidian"] .bg-amber-50\/60 { background-color: rgba(245, 158, 11, 0.08) !important; }

/* ============================================================
   THEME-AWARE COLOR OVERRIDES
   Maps Tailwind hardcoded colors to CSS var equivalents
   so theme switching works correctly
   ============================================================ */

/* Slate → theme-aware greys (dark mode safe) */
[data-theme="dark"] .text-slate-900,
[data-palette="midnight"] .text-slate-900,
[data-palette="obsidian"] .text-slate-900 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-slate-800,
[data-palette="midnight"] .text-slate-800,
[data-palette="obsidian"] .text-slate-800 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-slate-700,
[data-palette="midnight"] .text-slate-700,
[data-palette="obsidian"] .text-slate-700 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-slate-600,
[data-palette="midnight"] .text-slate-600,
[data-palette="obsidian"] .text-slate-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-slate-500,
[data-palette="midnight"] .text-slate-500,
[data-palette="obsidian"] .text-slate-500 { color: var(--text-tertiary) !important; }
[data-theme="dark"] .text-slate-400,
[data-palette="midnight"] .text-slate-400,
[data-palette="obsidian"] .text-slate-400 { color: var(--text-tertiary) !important; }
[data-theme="dark"] .text-slate-300,
[data-palette="midnight"] .text-slate-300,
[data-palette="obsidian"] .text-slate-300 { color: var(--text-muted) !important; }
[data-theme="dark"] .text-gray-500,
[data-palette="midnight"] .text-gray-500,
[data-palette="obsidian"] .text-gray-500 { color: var(--text-tertiary) !important; }
[data-theme="dark"] .text-gray-400,
[data-palette="midnight"] .text-gray-400,
[data-palette="obsidian"] .text-gray-400 { color: var(--text-tertiary) !important; }

/* D-FONT-CONTRAST — light/Signal base home for Tailwind CDN grays. The [data-theme="dark"]/[data-palette] rules
   above are (0,2,0) specificity and keep winning in those themes even with !important; this unscoped (0,1,0)
   base rule bites ONLY in light Signal, killing the raw-Tailwind-hex fall-through (#94a3b8 2.75:1 -> token). */
.text-slate-400, .text-slate-500,
.text-gray-400, .text-gray-500,
.text-neutral-400, .text-neutral-500,
.text-zinc-400, .text-zinc-500 { color: var(--text-tertiary) !important; }

[data-theme="dark"] .bg-slate-50,
[data-palette="midnight"] .bg-slate-50,
[data-palette="obsidian"] .bg-slate-50 { background-color: var(--surface-raised) !important; }
[data-theme="dark"] .bg-slate-100,
[data-palette="midnight"] .bg-slate-100,
[data-palette="obsidian"] .bg-slate-100 { background-color: var(--surface-raised) !important; }
[data-theme="dark"] .bg-slate-200,
[data-palette="midnight"] .bg-slate-200,
[data-palette="obsidian"] .bg-slate-200 { background-color: var(--surface-overlay) !important; }

[data-theme="dark"] .border-slate-200,
[data-palette="midnight"] .border-slate-200,
[data-palette="obsidian"] .border-slate-200 { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .border-slate-100,
[data-palette="midnight"] .border-slate-100,
[data-palette="obsidian"] .border-slate-100 { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .border-slate-300,
[data-palette="midnight"] .border-slate-300,
[data-palette="obsidian"] .border-slate-300 { border-color: var(--border-base) !important; }

/* Semantic colors — dark mode overrides */
[data-theme="dark"] .bg-red-50,
[data-palette="midnight"] .bg-red-50 { background-color: rgba(239,68,68,0.1) !important; }
[data-theme="dark"] .bg-green-50,
[data-palette="midnight"] .bg-green-50,
[data-theme="dark"] .bg-emerald-50,
[data-palette="midnight"] .bg-emerald-50 { background-color: rgba(16,185,129,0.1) !important; }
[data-theme="dark"] .bg-blue-50,
[data-palette="midnight"] .bg-blue-50 { background-color: rgba(59,130,246,0.1) !important; }
[data-theme="dark"] .bg-amber-50,
[data-palette="midnight"] .bg-amber-50 { background-color: rgba(245,158,11,0.1) !important; }

[data-theme="dark"] .border-red-200,
[data-palette="midnight"] .border-red-200 { border-color: rgba(239,68,68,0.3) !important; }
[data-theme="dark"] .border-green-200,
[data-palette="midnight"] .border-green-200 { border-color: rgba(16,185,129,0.3) !important; }

/* Accent color overrides for theme switching
   Phase 6.0c PR4.5.fix — indigo removed from comma-lists so PR4.5's
   line-460 .bg-indigo-* → --ai mapping wins. Blue stays --accent. */
.bg-blue-600 { background-color: var(--accent) !important; }
.hover\:bg-blue-700:hover { background-color: var(--accent) !important; filter: brightness(0.88); }
.text-blue-600 { color: var(--accent) !important; }
.text-blue-700 { color: var(--accent) !important; }

/* Skeleton shimmer — improved dark mode contrast */
[data-theme="dark"] .skeleton,
[data-palette="midnight"] .skeleton,
[data-palette="obsidian"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.05) 75%) !important;
  background-size: 1200px 100%;
}

/* ============================================================
   COMPREHENSIVE DARK MODE OVERRIDES
   Catches all remaining hardcoded Tailwind classes that don't
   respond to CSS custom properties
   ============================================================ */

/* Body & root backgrounds */
/* FB-6-ROOT (D-W3-POLISH-1, corrected per R-QA-DARK-REWALK-1) — was var(--surface-ground), which
   resolves LIGHT on the body (measured rgb(247,246,241) on live v802 AND in a real-toggle dev walk),
   so the founder's "cheap white" persisted. This !important rule is the ONE that wins on `body`, so
   the fix belongs HERE (a non-!important rule elsewhere is a no-op). Repointed to the reliable
   --surface-base (#141416) — matching the .cc-overview/.cc-scope/.cmd/.settings grounds. */
[data-theme="dark"] body { background: var(--surface-base) !important; color: var(--text-primary) !important; }

/* All white/light backgrounds → dark surface */
[data-theme="dark"] .bg-white { background-color: var(--surface-base) !important; }
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-gray-100 { background-color: var(--surface-raised) !important; }
[data-theme="dark"] .bg-gray-200 { background-color: var(--surface-overlay) !important; }

/* All dark text → light text */
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800 { color: var(--text-primary) !important; }
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-600 { color: var(--text-secondary) !important; }
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-gray-300 { color: var(--text-tertiary) !important; }

/* Border colors */
[data-theme="dark"] .border-gray-100,
[data-theme="dark"] .border-gray-200 { border-color: var(--border-subtle) !important; }
[data-theme="dark"] .border-gray-300 { border-color: var(--border-base) !important; }

/* Divide colors */
[data-theme="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-subtle) !important;
}

/* Input fields */
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background-color: var(--surface-inset) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-focus) !important;
}
/* Checkbox — keep native styling */
[data-theme="dark"] input[type="checkbox"] {
  background-color: transparent !important;
  accent-color: var(--accent);
}

/* Shadow overrides */
[data-theme="dark"] .shadow-sm { box-shadow: var(--shadow-sm) !important; }
[data-theme="dark"] .shadow-md { box-shadow: var(--shadow-md) !important; }
[data-theme="dark"] .shadow-lg { box-shadow: var(--shadow-lg) !important; }
[data-theme="dark"] .shadow-xl { box-shadow: var(--shadow-xl) !important; }
[data-theme="dark"] .shadow-2xl { box-shadow: var(--shadow-xl) !important; }

/* Ring/focus overrides */
[data-theme="dark"] .ring-blue-200,
[data-theme="dark"] .focus\:ring-blue-200:focus,
[data-theme="dark"] .focus\:ring-2:focus {
  --tw-ring-color: var(--accent-border) !important;
}

/* Semantic colors — dark mode transparency */
[data-theme="dark"] .bg-orange-50 { background-color: rgba(249,115,22,0.1) !important; }
[data-theme="dark"] .bg-orange-100 { background-color: rgba(249,115,22,0.15) !important; }
[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234,179,8,0.1) !important; }
[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234,179,8,0.15) !important; }
[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16,185,129,0.15) !important; }
[data-theme="dark"] .bg-red-100 { background-color: rgba(239,68,68,0.15) !important; }
[data-theme="dark"] .bg-blue-100 { background-color: rgba(59,130,246,0.15) !important; }
[data-theme="dark"] .bg-indigo-50,
[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99,102,241,0.15) !important; }

/* Notification bell dropdown */
[data-theme="dark"] .bg-blue-50\/50 { background-color: rgba(59,130,246,0.08) !important; }

/* Semantic text colors that should stay readable */
[data-theme="dark"] .text-emerald-900 { color: #6ee7b7 !important; }
[data-theme="dark"] .text-emerald-700 { color: #34d399 !important; }
[data-theme="dark"] .text-amber-900 { color: #fcd34d !important; }
[data-theme="dark"] .text-amber-700,
[data-theme="dark"] .text-amber-600 { color: #f59e0b !important; }
[data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-600 { color: #f87171 !important; }
[data-theme="dark"] .text-red-900 { color: #fca5a5 !important; }
[data-theme="dark"] .text-blue-600,
[data-theme="dark"] .text-blue-700 { color: var(--accent) !important; }
[data-theme="dark"] .text-green-700,
[data-theme="dark"] .text-green-600 { color: #34d399 !important; }

/* Semantic border colors */
[data-theme="dark"] .border-emerald-100,
[data-theme="dark"] .border-emerald-200 { border-color: rgba(16,185,129,0.3) !important; }
[data-theme="dark"] .border-amber-100,
[data-theme="dark"] .border-amber-200 { border-color: rgba(245,158,11,0.3) !important; }
[data-theme="dark"] .border-red-100,
[data-theme="dark"] .border-red-200 { border-color: rgba(239,68,68,0.3) !important; }
[data-theme="dark"] .border-blue-100,
[data-theme="dark"] .border-blue-200 { border-color: rgba(59,130,246,0.3) !important; }
[data-theme="dark"] .border-orange-100 { border-color: rgba(249,115,22,0.3) !important; }
[data-theme="dark"] .border-yellow-200 { border-color: rgba(234,179,8,0.3) !important; }
[data-theme="dark"] .border-indigo-200 { border-color: rgba(99,102,241,0.3) !important; }

/* Hover states */
[data-theme="dark"] .hover\:bg-slate-50:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--surface-overlay) !important; }
[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(59,130,246,0.12) !important; }
[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239,68,68,0.12) !important; }

/* Table styles */
[data-theme="dark"] th { color: var(--text-secondary) !important; border-color: var(--border-subtle) !important; }
[data-theme="dark"] td { color: var(--text-primary) !important; border-color: var(--border-subtle) !important; }
[data-theme="dark"] tr:hover td { background-color: var(--surface-overlay) !important; }

/* ══════════════════════════════════════════════════════════════
   PREMIUM UI — Typography, Hover States, Transitions, Polish
   ══════════════════════════════════════════════════════════════ */

/* ── Typography ── */
body, button, input, select, textarea {
  font-family: var(--font-ui) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, .text-2xl, .text-3xl, .text-4xl, [class*="text-\[34px\]"], [class*="text-\[28px\]"] {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}

/* ── Global Font Consistency ── */
body { font-size: 13px; line-height: 1.6; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
table th { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
table td { font-size: 13px; }
input, select, textarea { font-size: 13px; }

/* ── Button Hover States ── */
button, [role="button"] {
  transition: all var(--duration-base) var(--ease-decelerate) !important;
  cursor: pointer;
}
button:hover {
  filter: brightness(0.95);
}
button:active {
  transform: scale(0.98);
}

/* ── Card Hover ── */
[class*="rounded-xl"]:hover, [class*="rounded-2xl"]:hover, [class*="rounded-\[32px\]"]:hover {
  box-shadow: var(--shadow-md) !important;
  transition: box-shadow var(--duration-base) var(--ease-decelerate) !important;
}

/* ── Page Transitions ── */
@keyframes cc-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
main, [class*="animate-in"] {
  animation: cc-fade-in 0.25s var(--ease-decelerate) !important;
}

/* ── Skeleton Loading ── */
.animate-pulse, [class*="animate-pulse"] {
  background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-overlay) 50%, var(--surface-raised) 75%) !important;
  background-size: 200% 100% !important;
  animation: cc-skeleton 1.5s infinite !important;
}
@keyframes cc-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Focus Rings ── */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important;
  box-shadow: var(--shadow-focus) !important;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-base); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ── Dark Mode: Agent Cards ── */
[data-theme="dark"] [class*="rounded-\[32px\]"] h2,
[data-theme="dark"] [class*="rounded-\[32px\]"] h3,
[data-theme="dark"] [class*="rounded-\[32px\]"] p {
  color: var(--text-primary) !important;
}

/* ── Dark Mode: Charts ── */
[data-theme="dark"] .recharts-cartesian-grid line { stroke: rgba(255,255,255,0.1) !important; }
[data-theme="dark"] .recharts-text { fill: var(--text-tertiary) !important; }
[data-theme="dark"] .recharts-tooltip-wrapper { border-radius: 8px !important; }

/* ── Dark Mode: Card Borders ── */
[data-theme="dark"] [class*="bg-white"], [data-theme="dark"] .bg-white {
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── Sidebar Hover ── */
[class*="sidebar"] button:hover, nav button:hover {
  background: var(--accent-subtle) !important;
}

/* ── Selection Color ── */
::selection { background: var(--accent-subtle); color: var(--text-primary); }

/* ── Dark Mode: Creator Studio Live Preview (Phone Mockup) ── */
[data-theme="dark"] .cc-phone-preview .bg-white {
  background-color: #15202b !important;
  color: #e7e9ea !important;
}
[data-theme="dark"] .cc-phone-preview .bg-white * {
  color: #e7e9ea !important;
  border-color: #38444d !important;
}
[data-theme="dark"] .cc-phone-preview .text-gray-900,
[data-theme="dark"] .cc-phone-preview .text-gray-800,
[data-theme="dark"] .cc-phone-preview .text-gray-700,
[data-theme="dark"] .cc-phone-preview .text-black {
  color: #e7e9ea !important;
}
[data-theme="dark"] .cc-phone-preview .text-gray-500,
[data-theme="dark"] .cc-phone-preview .text-gray-400 {
  color: #71767b !important;
}
[data-theme="dark"] .cc-phone-preview .border-gray-100,
[data-theme="dark"] .cc-phone-preview .border-gray-200 {
  border-color: #38444d !important;
}

/* ── Dark Mode: Calendar Grid ── */
[data-theme="dark"] [class*="calendar"] td,
[data-theme="dark"] [class*="Calendar"] td {
  border-color: var(--border-subtle) !important;
}

/* ── Dark Mode: Inbox Panels ── */
[data-theme="dark"] [class*="inbox"] [class*="border-r"],
[data-theme="dark"] [class*="Inbox"] [class*="border-r"] {
  border-color: var(--border-subtle) !important;
}

/* ── Dark Mode: Media Thumbnails ── */
[data-theme="dark"] [class*="media"] img,
[data-theme="dark"] [class*="Media"] img {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}

/* ── Dark Mode: Dropdowns ── */
[data-theme="dark"] [class*="dropdown"],
[data-theme="dark"] [role="listbox"],
[data-theme="dark"] [role="menu"] {
  background: var(--surface-raised) !important;
  border-color: var(--border-subtle) !important;
}

/* ── Orange Button Gradient ── */
button[style*="background: var(--accent)"],
button[style*="background:var(--accent)"] {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
}

/* ── Calendar Day Hover ── */
[class*="calendar"] [class*="day"]:hover,
[class*="Calendar"] [class*="day"]:hover {
  background: rgba(249,115,22,0.04) !important;
}

/* ── Notification Badge ── */
[class*="badge"][class*="bg-red"],
[class*="notification"] [class*="badge"] {
  min-width: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  text-align: center !important;
}

/* ── Timestamp "0m ago" fix ── */
/* Handled in JS — but ensure consistent time styling */
[class*="time-ago"], [class*="timestamp"] {
  font-variant-numeric: tabular-nums;
}

/* ── Smooth Image Loading ── */
img { transition: opacity 0.3s; }
img[src=""] { opacity: 0; }

/* ══════════════════════════════════════════════════════════════
   PHASE 2: 8.6 → 10/10 — Final Polish Layer
   ══════════════════════════════════════════════════════════════ */

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Button Hover — Add translateY ── */
button:hover, [role="button"]:hover {
  transform: translateY(-1px);
}
button:active, [role="button"]:active {
  transform: translateY(0) scale(0.98);
}

/* ── Card Lift on Hover ── */
[class*="rounded-xl"], [class*="rounded-2xl"], [class*="rounded-\[32px\]"],
[class*="rounded-\[14px\]"], [class*="rounded-\[16px\]"], [class*="rounded-\[20px\]"] {
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}
[class*="rounded-xl"]:hover, [class*="rounded-2xl"]:hover {
  transform: translateY(-2px) !important;
}

/* ── Link Hover Underline Animation ── */
a[class*="text-"], a[style*="color"] {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 200ms ease;
}
a[class*="text-"]:hover, a[style*="color"]:hover {
  background-size: 100% 1px;
}

/* ── Dark Mode Elevation System — REMOVED by D-PALETTE-WARMSTUDIO-1 (2026-07-22) ──
   This block re-declared all five --surface-* steps for dark mode (#1a1510 / #211c15 /
   #2a2520 / #332e28 / #3d3730). Same specificity as the canonical [data-theme="dark"]
   table in index.html (0,1,0), but this stylesheet is linked AFTER the inline <style>,
   so it WON the cascade and the canonical dark surface table was dead code on the wire.
   That is also the true source of the "gradient stop / alpha-blended bg" surfaces D-132
   and D-137 could not explain — they were these literals.
   L-011 single source of truth: the dark surface family is defined ONCE, in
   Frontend/React/index.html. DO NOT re-declare --surface-* here — anything added to this
   file silently outranks the design-system table. */

/* ── Dark Mode: All Cards ── */
[data-theme="dark"] [class*="rounded-xl"],
[data-theme="dark"] [class*="rounded-2xl"],
[data-theme="dark"] [class*="rounded-\[32px\]"],
[data-theme="dark"] [class*="rounded-\[14px\]"],
[data-theme="dark"] [class*="rounded-\[16px\]"] {
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── Dark Mode: Card hover shadow ── */
[data-theme="dark"] [class*="rounded-xl"]:hover,
[data-theme="dark"] [class*="rounded-2xl"]:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

/* ── Dark Mode: Chart dots glow ── */
[data-theme="dark"] .recharts-dot { filter: drop-shadow(0 0 3px var(--accent)); }
[data-theme="dark"] .recharts-active-dot { filter: drop-shadow(0 0 6px var(--accent)); }

/* ── Dark Mode: Inbox message hover ── */
[data-theme="dark"] [class*="inbox"] [class*="message"]:hover,
[data-theme="dark"] [class*="Inbox"] div[style*="cursor"]:hover {
  background: rgba(255,255,255,0.04) !important;
}

/* ── Dark Mode: Scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Tooltip Base (native title enhanced) ── */
[title] { position: relative; }

/* ── Post Title Truncation ── */
[class*="post-title"], [class*="PostTitle"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sidebar Badge ── */
[class*="sidebar"] [class*="badge"] {
  min-width: 18px;
  height: 18px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 3: 9.1 → 10/10 — Exact DOM-Verified Fixes
   ══════════════════════════════════════════════════════════════ */

/* ── FIX 1: Metric Card Hover Lift ── */
.metric-card-hover {
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}
.metric-card-hover:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}
[data-theme="dark"] .metric-card-hover:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.25) !important;
}
div[class*="rounded-\[14px\]"][class*="border"] {
  transition: transform 200ms ease, box-shadow 200ms ease !important;
}
div[class*="rounded-\[14px\]"][class*="border"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}

/* ── FIX 3: Button Size System ── */
.btn-sm { height: 32px !important; padding: 0 12px !important; font-size: 13px !important; }
.btn-md { height: 40px !important; padding: 0 16px !important; font-size: 14px !important; }
.btn-lg { height: 48px !important; padding: 0 24px !important; font-size: 15px !important; font-weight: 600 !important; }

/* ── FIX 4: Creator Studio Live Preview Dark Mode ── */
[data-theme="dark"] [style*="borderRadius: '24px'"][style*="background: '#fff'"],
[data-theme="dark"] [style*="borderRadius: '24px'"][style*="background: 'white'"],
[data-theme="dark"] [style*="background: '#fff'"][style*="borderRadius"],
[data-theme="dark"] [style*="background: white"][style*="borderRadius"],
[data-theme="dark"] [style*="border-radius: 24px"] {
  background-color: #15202b !important;
  color: #e7e9ea !important;
}
[data-theme="dark"] [style*="@find_positive"] {
  color: #e7e9ea !important;
}

/* ── FIX 6: Tab Content Crossfade ── */
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}
[role="tabpanel"], [class*="tab-panel"], [class*="tab-content"] {
  animation: tabFadeIn 180ms ease-out;
}

/* ── FIX 7: Modal Animations ── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
[class*="fixed"][class*="inset-0"][class*="z-"] > div:first-child {
  animation: scaleIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── FIX 10: Toggle Switch Hover ── */
[role="switch"]:hover, [class*="toggle"]:hover, [class*="Toggle"]:hover {
  transform: scale(1.05);
  transition: transform 150ms ease;
}

/* ── FIX 12: Design Tokens ── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ── FIX 14: Dark Mode Dropdown Options ── */
[data-theme="dark"] option {
  background-color: #2a2520 !important;
  color: #e5e5e5 !important;
}

/* ── FIX 15: Sidebar Active Indicator ── */
[class*="sidebar"] [style*="borderLeft"],
[class*="sidebar"] [style*="border-left"] {
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Notification Badge Pulse ── */
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
[class*="notification"] [class*="badge"],
span[class*="absolute"][class*="rounded-full"][style*="background"] {
  animation: badge-pulse 2s ease-in-out 3;
}

/* ── Skip to Content ── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: fixed; z-index: 99999; top: 16px; left: 16px;
  width: auto; height: auto; padding: 12px 24px; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
  background: var(--accent); color: #fff; border-radius: 8px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
}

/* ── Button Height Standardization (9 sizes → 3) ── */

/* SMALL (32px): icon buttons, chips, filters, inline actions, dismiss */
button[style*="padding: 5px"],
button[style*="padding:5px"],
button[style*="padding: 4px"],
button[style*="padding: '5px"],
button[style*="padding: '4px"] {
  min-height: 32px !important;
}

/* MEDIUM (40px): DEFAULT — standard action buttons */
button[style*="padding: '8px"],
button[style*="padding: '10px"],
button[style*="padding: 8px"],
button[style*="padding: 10px"],
button[class*="px-4"],
button[class*="px-5"],
button[class*="px-6"]:not([class*="py-3"]),
button[class*="rounded-xl"][class*="px-"],
input[type="submit"],
button[type="submit"] {
  min-height: 40px !important;
}

/* LARGE (48px): hero CTAs, full-width, primary page actions */
button[class*="py-3"],
button[class*="w-full"][class*="py-"],
button[class*="text-base"][class*="py-3"] {
  min-height: 48px !important;
}

/* Exceptions: don't resize these */
button[role="switch"], [class*="toggle"], [class*="Toggle"],
[class*="sidebar"] button, [role="tab"],
button[style*="padding: 5px"], button[style*="padding: 4px"],
button[style*="padding:5px"], button[style*="padding:4px"] {
  /* These keep their original size */
}

/* Toggle hover scale */
button[role="switch"]:hover {
  transform: scale(1.05) !important;
  transition: transform 150ms ease !important;
}
button[role="switch"]:active {
  transform: scale(0.98) !important;
}

/* ── Dark Mode: Notification Panel ── */
[data-theme="dark"] .bg-white.rounded-2xl.shadow-2xl {
  background: var(--surface-raised) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="dark"] .bg-slate-50\/80 {
  background: var(--surface-overlay) !important;
}
[data-theme="dark"] .text-slate-900 {
  color: var(--text-primary) !important;
}
[data-theme="dark"] .text-slate-700 {
  color: var(--text-secondary) !important;
}
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-400 {
  color: var(--text-tertiary) !important;
}
[data-theme="dark"] .divide-slate-50 > * + * {
  border-color: var(--border-subtle) !important;
}
[data-theme="dark"] .border-slate-100 {
  border-color: var(--border-subtle) !important;
}
[data-theme="dark"] .bg-blue-50\/50,
[data-theme="dark"] .bg-blue-50 {
  background: rgba(249,115,22,0.06) !important;
}
[data-theme="dark"] .hover\:bg-blue-50:hover {
  background: rgba(249,115,22,0.1) !important;
}

/* AI Approval Modal dark mode */
[data-theme="dark"] div[style*="surface-primary"] {
  background: #1a1510 !important;
  border-color: rgba(255,255,255,0.08) !important;
}


/* ── Dark Mode: AI Approval Modal ── */
[data-theme="dark"] div[style*="fixed"] > div[style*="borderRadius: 16px"],
[data-theme="dark"] div[style*="fixed"] > div[style*="border-radius: 16px"],
[data-theme="dark"] div[style*="fixed"] > div[style*="max-width: 560px"],
[data-theme="dark"] div[style*="fixed"] > div[style*="maxWidth: 560px"] {
  background: #1a1510 !important;
  color: #faf9f7 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] div[style*="fixed"] > div[style*="borderRadius: 16px"] input[type="checkbox"] + span,
[data-theme="dark"] div[style*="fixed"] > div[style*="max-width: 560px"] span,
[data-theme="dark"] div[style*="fixed"] > div[style*="max-width: 560px"] p,
[data-theme="dark"] div[style*="fixed"] > div[style*="max-width: 560px"] h3,
[data-theme="dark"] div[style*="fixed"] > div[style*="max-width: 560px"] label {
  color: #faf9f7 !important;
}
[data-theme="dark"] div[style*="fixed"] > div[style*="max-width: 560px"] div[style*="surface-raised"],
[data-theme="dark"] div[style*="fixed"] > div[style*="max-width: 560px"] div[style*="border: 1px solid var"] {
  background: #221c15 !important;
  border-color: rgba(255,255,255,0.06) !important;
  color: #faf9f7 !important;
}
[data-theme="dark"] div[style*="fixed"] > div[style*="max-width: 560px"] textarea {
  background: #221c15 !important;
  color: #faf9f7 !important;
  border-color: var(--accent-border) !important;
}
[data-theme="dark"] div[style*="fixed"] > div[style*="max-width: 560px"] label[style*="border"] {
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── Agent Cards: Glassmorphism Glow Animation ── */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.03); }
}
@keyframes slideUp {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
/* ============================================================
   Phase 6.1.D Track 1 — .pill family extracted to shared utility.

   Per architect Lock 1 (D7 cascade strategy): cross-page CSS
   extraction follows DATA — only patterns proven duplicated across
   ≥2 pages. Inner-class overlap analysis showed `.pill` was the
   ONLY shared selector between overview-redesign.css (114 inner
   classes) and settings-redesign.css (36 inner classes). 0.7%
   overlap argued AGAINST broad extraction; .pill alone justified
   a γ-style micro-utility.

   BEM naming convention chosen as canonical (matching the newer
   Settings adoption). Overview consumers (4 sites in Overview.tsx)
   migrated from single-dash legacy names in this Track:
     pill-positive  → pill--success
     pill-warning   → pill--warning
     pill-info      → pill--info
     (pill-accent had no semantic match; mapped to pill--info)

   No `.overview-page` or `.settings-page` scope wrapper — these
   pills are consumed across 14+ cascade pages going forward.
   Phase 6.1 tokens only — no shadows, no Tailwind colors.
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.pill--success {
  background: var(--positive-subtle);
  color: var(--positive);
  border: 1px solid var(--positive-border);
}

.pill--warning {
  background: var(--warning-subtle);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.pill--danger {
  background: var(--negative-subtle);
  color: var(--negative);
  border: 1px solid var(--negative-border);
}

.pill--info {
  background: var(--info-subtle);
  color: var(--info);
  border: 1px solid var(--info-border, var(--border-subtle));
}

.pill--neutral {
  background: var(--bg-inset);
  color: var(--text-secondary);
}

.pill--accent {
  background: var(--accent-subtle);
  color: var(--accent-text);
  border: 1px solid var(--accent-border);
}