/* ============================================================
   ds-v2 activation guard + Poster→ds-v2 token-remap layer.
   ============================================================
   Loaded from app/layout.tsx as the third <link rel="stylesheet"
   href="/ds-v2/index.css"> after tokens.css and components.css.

   Selector-permissive activation: any element with data-design="ds-v2"
   activates the ds-v2 canvas for its subtree. Legacy Poster pages
   render unchanged.

   Background — soft brand-coloured blob field painted directly on
   the wrapper (no pseudo-element, no filter:blur — those approaches
   either hid behind a wrapper bg or blurred the child chrome).
   Five overlapping radial gradients with wide soft-to-transparent
   ramps give the same satellite-cloud feel as the design-system's
   "C · Hero · sharp · Report covers" motif, just without the blur
   filter so the OnboardingFragment + ChatPanel stay sharp.

   Token-remap layer: rewires the legacy Poster variables to ds-v2
   equivalents so existing components (OnboardingFragment, ChatPanel,
   AnonFooter) pick up the new colour + type story without class
   changes.
*/

[data-design="ds-v2"] {
    min-height: 100%;
    color: #0F1213;
    font-family: var(--font-sans);

    /* Plain grey canvas, per the v2 specimen (rule 8): the generative planet
       appears only in deliberate .planet-band bands (hero, divider, covers),
       never as the whole-page wash. Matches --bg-canvas in specimen.css. */
    background: #F4F5F5;

    /* --- Brand + accent --- */
    --accent-color: var(--accent); /* DS-01: point UI accent at the teal accent family, not forest --brand */
    --accent-color-hex: var(--brand);

    /* --- Surface tints --- */
    --bg-tertiary-hex: #FFFFFF;
    --bg-primary-hex: #FFFFFF;
    --bg-secondary-hex: #F4F5F3;
    --bg-quaternary-hex: #E5E7E4;
    --bg-poster: #E5E7E4;

    /* --- Foreground + border --- */
    --fg-primary-hex: #0F1213;
    --fg-secondary-hex: #4C504D;
    --fg-tertiary-hex: #686C68;
    --fg-quaternary-hex: #676B67; /* DS-03: darkened from #8A8E8A (3.0:1) to clear AA on canvas/cards */
    --border-primary-hex: rgba(15,15,15,.10);
    --border-secondary-hex: rgba(15,15,15,.06);
    --bg-brand-solid: var(--brand);
    --accent-color-deep: var(--accent-deep); /* DS-01: teal, not forest */
    --accent-color-hover: var(--brand-hover);
    --surface-inverted: #0F1213;

    /* --- Card surfaces (Poster intro/chip system) --- */
    --card-peach: #ECF2EC;
    --card-neutral: #F4F5F3;
    --card-charcoal: #0F1213;
    --ink-on-inverted: #FFFFFF;

    /* --- Typography --- */
    --font-display: var(--font-sans);

    /* --- Radii ---
       Per the design-system rule (Spacing & radii section, Radius scale
       footnote): "Buttons & inputs use --r-md (8). Cards use --r-lg (12).
       Hero surfaces use --r-2xl (24). Pills are reserved for tags and
       theme toggles."

       Poster's --radius-card defaults to 24px (every-card-is-hero); the
       remap below drops cards back to 12px and reserves the 24px hero
       radius for the explicit -lg variant. Pages that intentionally
       use a hero moment (top splash, single editorial card) use
       --radius-card-lg. */
    --radius-card: var(--r-lg);           /* 12px — standard card */
    --radius-card-lg: var(--r-2xl);       /* 24px — hero, one per page */
    --radius: var(--r-md);                /* 8px shadcn primitive default */
    --r-card: var(--r-lg);                /* mcr-mat-poster card alias */
    --r-card-lg: var(--r-2xl);            /* mcr-mat-poster hero alias */

    /* --- mcr-mat-poster.css overrides ---
       The MCR/Materiality stylesheet defines its own :root vars without
       any [data-design="poster"] scope, so its Poster-orange palette
       leaks into ds-v2 surfaces. Remap to the ds-v2 colour story. */
    --accent: #0EA3B2;                          /* DS-01: specimen teal (was #3FA0B0 off-cyan) */
    --accent-hover: #2F8693;
    --accent-deep: #0B6767;                     /* DS-01: specimen deep teal (was forest --brand-strong) */
    --accent-tint: color-mix(in oklab, #3FA0B0 8%, transparent);
    --accent-tint-strong: color-mix(in oklab, #3FA0B0 30%, transparent);
    --fg-primary: var(--text-primary);
    --fg-secondary: var(--text-secondary);
    --fg-tertiary: var(--text-tertiary);
    --fg-quaternary: #676B67; /* DS-03: darkened from #8A8E8A to clear AA */
    --border-primary: var(--border-default);
    --border-secondary: var(--border-subtle);
    --bg-primary: #FFFFFF;
    --bg-secondary: #F4F5F3;
    --bg-tertiary: #EDEFEC;
    --bg-quaternary: #E5E7E4;
}

/* Selection — global cp-ai rule paints the Poster orange highlight.
   The descendant selector wins on specificity inside ds-v2 surfaces. */
[data-design="ds-v2"] ::selection,
[data-design="ds-v2"]::selection {
    background: color-mix(in oklab, var(--brand) 35%, transparent);
    color: var(--text-primary);
}

/* Logo swap — globals.css scopes the swap rules to [data-design="poster"].
   When ds-v2 takes over html, those rules stop applying and BOTH the
   light and dark logos render. Mirror the swap here scoped to ds-v2 so
   only the appropriate logo is visible per theme. */
[data-design="ds-v2"] .chat-panel-logo-light,
[data-design="ds-v2"] .sidebar-logo-light { display: inline-block; }
[data-design="ds-v2"] .chat-panel-logo-dark,
[data-design="ds-v2"] .sidebar-logo-dark  { display: none; }

[data-design="ds-v2"][data-theme="dark"] .chat-panel-logo-light,
[data-theme="dark"] [data-design="ds-v2"] .chat-panel-logo-light,
[data-design="ds-v2"][data-theme="dark"] .sidebar-logo-light,
[data-theme="dark"] [data-design="ds-v2"] .sidebar-logo-light { display: none; }
[data-design="ds-v2"][data-theme="dark"] .chat-panel-logo-dark,
[data-theme="dark"] [data-design="ds-v2"] .chat-panel-logo-dark,
[data-design="ds-v2"][data-theme="dark"] .sidebar-logo-dark,
[data-theme="dark"] [data-design="ds-v2"] .sidebar-logo-dark { display: inline-block; }

/* ============================================================
   Poster-class mirrors under ds-v2.
   ============================================================
   The .poster-card-* / .poster-eyebrow / .poster-headline / .poster-
   body / .poster-num / .poster-stat-block / .poster-quote classes
   are all scoped to [data-design="poster"] in globals.css. When the
   landing / onboarding / dashboard layouts hoist data-design="ds-v2"
   onto <html>, those rules stop applying and Poster surfaces lose
   their background, text colour, and typography. Mirror the shape
   here using ds-v2 tokens so legacy Poster components keep working
   on ds-v2 surfaces without a per-component rewrite.
*/

[data-design="ds-v2"] .poster-card-peach {
    background-color: var(--card-peach);
    border-radius: var(--radius-card);
    background-image: radial-gradient(circle, rgba(15,15,15,0.07) 1px, transparent 1px);
    background-size: 8px 8px;
    color: var(--text-primary);
}
[data-design="ds-v2"] .poster-card-neutral {
    background: var(--card-neutral);
    border-radius: var(--radius-card);
    color: var(--text-primary);
}
/* poster-card-charcoal under ds-v2 — upgrades the flat #0F1213 surface
   to the design-system .editorial-block treatment: charcoal canvas +
   cyan brand-strong border + ambient gradient bleed via pseudo-element
   so it reads as a deliberate brand-deep surface rather than generic
   black. */
[data-design="ds-v2"] .poster-card-charcoal {
    background: #0B1110;
    color: var(--ink-on-inverted);
    border-radius: var(--radius-card);
    border: 1px solid color-mix(in oklab, #3FA0B0 28%, transparent);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
[data-design="ds-v2"] .poster-card-charcoal::before {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    filter: blur(60px);
    background:
        radial-gradient(ellipse 70% 60% at 100% 40%, rgba(178, 189, 47, 0.22), transparent 65%),
        radial-gradient(ellipse 60% 50% at 85% 20%, rgba(77, 133, 77, 0.28), transparent 60%),
        radial-gradient(ellipse 70% 60% at 100% 90%, rgba(63, 160, 176, 0.22), transparent 65%),
        radial-gradient(ellipse 50% 40% at 20% 80%, rgba(47, 98, 48, 0.18), transparent 60%);
}
[data-design="ds-v2"] .poster-card-charcoal > * { position: relative; z-index: 1; }
[data-design="ds-v2"] .poster-card-accent {
    background: var(--brand);
    color: var(--text-on-brand);
    border-radius: var(--radius-card);
}
[data-design="ds-v2"] .poster-card-loud {
    border-radius: var(--radius-card-lg);
}

[data-design="ds-v2"] .poster-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-quaternary-hex);
    display: inline-block;
}
[data-design="ds-v2"] .poster-eyebrow.on-charcoal {
    color: var(--brand-strong);
    opacity: 1;
}
[data-design="ds-v2"] .poster-headline {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
[data-design="ds-v2"] .poster-body {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.6;
    opacity: 0.72;
}
[data-design="ds-v2"] .poster-num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
[data-design="ds-v2"] .poster-quote {
    font-family: var(--font-serif, var(--font-sans));
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--fg-secondary-hex);
}

/* Nested stat block — translucent island inside a poster card. */
[data-design="ds-v2"] .poster-stat-block {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(15,15,15,0.12);
    border-radius: 12px;
    padding: 14px 18px;
}
[data-design="ds-v2"] .poster-card-charcoal .poster-stat-block {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
}
[data-design="ds-v2"] .poster-stat-block-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--fg-quaternary-hex);
    margin-bottom: 6px;
}
[data-design="ds-v2"] .poster-card-charcoal .poster-stat-block-label {
    color: rgba(255,255,255,0.45);
}
[data-design="ds-v2"] .poster-stat-block-value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fg-primary-hex);
}
[data-design="ds-v2"] .poster-card-charcoal .poster-stat-block-value { color: #fff; }
[data-design="ds-v2"] .poster-stat-block-value.accent { color: var(--brand); }

/* Card texture mirrors — .tex-dot / .tex-topo / .tex-topo-soft give
   the dashboard hero cards their dotted + topographic identity. All
   are [data-design="poster"]-scoped in globals.css so they disappear
   on ds-v2 surfaces unless mirrored. */
[data-design="ds-v2"] .tex-dot {
    background-image: radial-gradient(circle, rgba(15,15,15,0.10) 1px, transparent 1px);
    background-size: 8px 8px;
}
[data-design="ds-v2"] .tex-dot-light {
    background-image: radial-gradient(circle, rgba(15,15,15,0.06) 1px, transparent 1px);
    background-size: 10px 10px;
}
[data-design="ds-v2"] .pc-charcoal.tex-dot-charcoal,
[data-design="ds-v2"] .poster-card-charcoal.tex-dot-charcoal {
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 10px 10px;
}
/* Per the design-system either-or rule (components.css line 2122):
   sharp variant → no blur, LOW opacity (~0.06). The legacy poster
   topo SVG had stroke-opacity="0.055" baked in; the ds-v2 handoff
   topography-white.svg uses full-opacity strokes that must be dimmed
   externally. Stacking a high-alpha surface scrim on top of the SVG
   gives the equivalent ~6% effective opacity without modifying the
   shipped asset. */
[data-design="ds-v2"] .tex-topo,
[data-design="ds-v2"] .tex-topo-soft {
    background:
        linear-gradient(rgba(244, 245, 243, 0.94), rgba(244, 245, 243, 0.94)),
        url("/ds-v2/topography-white.svg") center/cover no-repeat;
}
[data-design="ds-v2"] .pc-charcoal.tex-topo-charcoal,
[data-design="ds-v2"] .poster-card-charcoal.tex-topo-charcoal {
    background:
        linear-gradient(rgba(15, 18, 19, 0.94), rgba(15, 18, 19, 0.94)),
        url("/ds-v2/topography-white.svg") center/cover no-repeat;
}

/* Status bookmark pill — .bookmark in mcr-mat-poster defaults to
   var(--fg-quaternary) which is a low-contrast grey on the light
   bg-secondary surface. Lift to text-secondary so the label reads. */
[data-design="ds-v2"] .bookmark {
    color: var(--text-secondary) !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: var(--border-default) !important;
}
[data-design="ds-v2"] .bookmark .dot {
    background: var(--brand) !important;
}

/* Sidebar — mirror the .app-sidebar treatment from the handoff
   bundle (forest top-corner glow on an elevated surface with a
   cyan hairline). The dashboard sidebar uses an inline shadcn
   token (--sidebar-background) which paints a flat grey under
   ds-v2; this override gives it the same identity the chat panel
   and dashboard cards now share. */
[data-design="ds-v2"] [role="navigation"][aria-label="Main navigation"],
[data-design="ds-v2"] aside[role="navigation"] {
    /* Plain cool-grey sidebar, per the palette direction (no green/cyan tint).
       A touch recessed from the #F4F5F5 canvas so it reads as a distinct rail. */
    background: #EDEFEF !important;
    border-right: 1px solid rgba(15, 15, 15, 0.08) !important;
}
/* Dark: the sidebar is a graphite surface with a quiet cyan glow, not the
   light grey slab (which had no dark variant and stayed light). */
[data-theme="dark"] [data-design="ds-v2"] [role="navigation"][aria-label="Main navigation"],
[data-theme="dark"] [data-design="ds-v2"] aside[role="navigation"] {
    background:
        radial-gradient(ellipse 70% 40% at 0% 0%, color-mix(in oklab, var(--accent-cyan) 12%, transparent), transparent 70%),
        #272A2A !important;
    border-right: 1px solid rgba(242,242,242,.10) !important;
}

/* Active nav item — use the cyan accent so it visually rhymes with
   the CTA buttons. Original sidebar paints
   bg-[var(--accent-color)]/15 + text-[var(--accent-color-deep)]
   which becomes a forest tint under the token-remap; lift it to
   cyan for the dashboard nav. */
[data-design="ds-v2"] [role="navigation"][aria-label="Main navigation"] [aria-current="page"],
[data-design="ds-v2"] [role="navigation"][aria-label="Main navigation"] [data-active="true"] {
    background: color-mix(in oklab, #3FA0B0 18%, transparent) !important;
    color: #11353A !important;
}
[data-theme="dark"] [data-design="ds-v2"] [role="navigation"][aria-label="Main navigation"] [aria-current="page"],
[data-theme="dark"] [data-design="ds-v2"] [role="navigation"][aria-label="Main navigation"] [data-active="true"] {
    background: color-mix(in oklab, #5BB6C4 20%, transparent) !important;
    color: #B8E2E8 !important;
}

/* Compact metric tile — the ds-v2 .metric primitive is built for a
   hero stat (320px tall, 84px number). Dashboard + data pages stack
   four side-by-side, so they need a smaller variant with the same
   structural identity but compact geometry. Light surfaces only —
   the visual variety comes from the .metric__glow hue, not from a
   dark/inverse surface.
*/
[data-design="ds-v2"] .metric.metric--compact {
    min-height: 0;
    padding: 16px 18px 12px;
    gap: 10px;
}
[data-design="ds-v2"] .metric.metric--compact .metric__inner { gap: 10px; }
[data-design="ds-v2"] .metric.metric--compact .metric__num {
    font-size: 40px;
    line-height: 1;
}
[data-design="ds-v2"] .metric.metric--compact .metric__foot {
    padding-top: 10px;
    font-size: 11px;
}

/* Lime glow variant — for the hero stat in a compact row (replaces the
   .metric--inverse dark hero, which reads too heavy on the dashboard
   strip). Pairs with the Forms-section palette: soft tints, not solid
   colour blocks. */
[data-design="ds-v2"] .metric--lime .metric__glow {
    background: radial-gradient(ellipse 70% 60% at 90% 10%, var(--accent-lime), transparent 55%);
    opacity: .38;
}
[data-design="ds-v2"] .metric--cyan .metric__glow {
    background: radial-gradient(ellipse 70% 60% at 90% 10%, var(--accent-cyan), transparent 55%);
    opacity: .35;
}
[data-design="ds-v2"] .metric--sage .metric__glow {
    background: radial-gradient(ellipse 70% 60% at 90% 10%, var(--green-400), transparent 55%);
    opacity: .35;
}

/* Segmented control mirror — .poster-seg is the legacy class used by
   the document detail modal tabs (Summary | Transactions | Ask | Notes)
   and a couple of other inline tab strips. Without this mirror under
   ds-v2 the buttons collapse to plain text with no gap, no active
   highlight, which renders the tabs as the unbroken string
   "SummaryTransactionsAskNotes".

   Wrapped in :is() to lift specificity above the [data-design="poster"]
   sibling rules without needing !important on every declaration. The
   bare .poster-seg selector also catches cases where the modal renders
   in a portal that escapes the [data-design="ds-v2"] ancestor. */
.poster-seg,
[data-design="ds-v2"] .poster-seg {
    display: inline-flex !important;
    background: var(--bg-tertiary-hex, #F4F5F3) !important;
    border: 1px solid var(--border-primary-hex, rgba(15, 15, 15, 0.10)) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    gap: 2px !important;
}
.poster-seg > button,
.poster-seg [role="tab"],
[data-design="ds-v2"] .poster-seg > button,
[data-design="ds-v2"] .poster-seg [role="tab"] {
    background: transparent !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 8px 16px !important;
    min-height: 36px !important;
    font-family: var(--font-display, "General Sans", sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-secondary, #4C504D) !important;
    cursor: pointer !important;
    transition: background 100ms, color 100ms !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.poster-seg > button:hover,
.poster-seg [role="tab"]:hover,
[data-design="ds-v2"] .poster-seg > button:hover,
[data-design="ds-v2"] .poster-seg [role="tab"]:hover {
    color: var(--text-primary, #0F1213) !important;
    background: rgba(15, 18, 19, 0.04) !important;
}
/* Active state uses the cyan token (same as CTA + sidebar active item)
   so the segmented control rhymes with the rest of the system. */
.poster-seg > button.active,
.poster-seg [role="tab"][data-state="active"],
.poster-seg [aria-selected="true"],
[data-design="ds-v2"] .poster-seg > button.active,
[data-design="ds-v2"] .poster-seg [role="tab"][data-state="active"],
[data-design="ds-v2"] .poster-seg [aria-selected="true"] {
    background: color-mix(in oklab, #3FA0B0 22%, transparent) !important;
    color: #11353A !important;
    box-shadow: 0 1px 0 0 color-mix(in oklab, #3FA0B0 38%, transparent) !important;
}
.poster-seg > button.active:hover,
.poster-seg [role="tab"][data-state="active"]:hover,
[data-design="ds-v2"] .poster-seg > button.active:hover,
[data-design="ds-v2"] .poster-seg [role="tab"][data-state="active"]:hover {
    background: color-mix(in oklab, #3FA0B0 28%, transparent) !important;
    color: #11353A !important;
}

/* Force selection highlight back to brand even outside the
   [data-design="ds-v2"] ancestor — covers the modal case where the
   selector chain isn't catching. */
::selection {
    background: color-mix(in oklab, #3FA0B0 28%, transparent) !important;
    color: #11353A !important;
}

/* ============================================================
   Brand motif bands · the "Materiality assessments" splash + the
   "Quiet background" ambient patterns from the design system,
   exposed as opt-in classes so any container can adopt the
   identity without a DOM change.
   ============================================================
   .cp-motif-band  — dark #0B1110 base, heavily blurred forest /
                     teal / cyan / lime blobs, topography overlay.
                     Single "splash" moment per page.
   .cp-ambient-band — light F4F5F3 base, two-circle ambient blur,
                      no topo. Quiet header / strip background.

   Both treat the host element as a positioned container; pseudos
   paint behind content at z-index 0. Apply with position:relative
   and overflow:hidden on the host (the class sets both).
*/
.cp-motif-band,
.cp-ambient-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cp-motif-band > *,
.cp-ambient-band > * { position: relative; z-index: 2; }

/* DARK motif — splash treatment. Five SVG-equivalent radial circles
   on a near-black canvas, blurred to dissolve into atmosphere. */
.cp-motif-band {
    background: #0B1110;
    color: #F1F5F1;
    border-radius: var(--r-2xl);
}
.cp-motif-band::before {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    filter: blur(70px);
    opacity: 0.85;
    background:
        radial-gradient(circle 26% at 78% 18%, #4D854D, transparent 70%),
        radial-gradient(circle 22% at 58% 42%, #2F6230, transparent 70%),
        radial-gradient(circle 26% at 28% 78%, #165862, transparent 70%),
        radial-gradient(circle 18% at 70% 85%, #3FA0B0, transparent 70%),
        radial-gradient(circle 14% at 95%  8%, #B2BD2F, transparent 70%);
}
.cp-motif-band::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(rgba(11, 17, 16, 0.92), rgba(11, 17, 16, 0.92)),
        url('/ds-v2/topography-white.svg') center/cover no-repeat;
}

/* AMBIENT quiet band — light canvas, two soft circles, no topo.
   Use for header strips, page-section dividers, callouts that
   need atmosphere without committing to a hero. */
.cp-ambient-band {
    background: #F4F5F3;
    color: var(--text-primary);
    border-radius: var(--r-lg);
}
.cp-ambient-band::before {
    content: '';
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    filter: blur(90px);
    opacity: 0.55;
    background:
        radial-gradient(circle 36% at 82% 50%, #5A8A2A, transparent 70%),
        radial-gradient(circle 33% at 33% 50%, #165862, transparent 70%);
}

/* ============================================================
   Brand-identity modal surface · [data-cp-modal]
   ============================================================
   The document-detail modal (and any future modal that opts in
   with data-cp-modal) gets the soft hue wash + topography overlay
   from the design system so it doesn't render as a flat off-white
   slab. Identity comes from:
     · forest + cyan radial bleeds on the modal canvas
     · topography SVG at 0.10 opacity (felt, not noticed)
     · brand-strong border so the modal reads as a lifted island
     · a tinted right pane (actions) so the split-pane structure
       carries its own visual hierarchy
*/

[data-cp-modal] {
    background:
        radial-gradient(ellipse 60% 50% at 8% 0%, color-mix(in oklab, #2F6230 14%, transparent), transparent 65%),
        radial-gradient(ellipse 50% 50% at 100% 100%, color-mix(in oklab, #3FA0B0 16%, transparent), transparent 65%),
        radial-gradient(ellipse 40% 40% at 100% 0%, color-mix(in oklab, #B2BD2F 10%, transparent), transparent 65%),
        #F4F5F3;
    border-color: color-mix(in oklab, #3FA0B0 28%, transparent) !important;
    position: relative;
}

[data-cp-modal]::before {
    /* Design-system either-or principle (components.css line 2122):
       sharp variant → no blur, LOW opacity (~0.06) so contour lines
       read as quiet texture, not haze. Never mix slight blur + low
       opacity — that reads as muddy. */
    content: '';
    position: absolute;
    inset: 0;
    background: url('/ds-v2/topography-white.svg') center/cover no-repeat;
    filter: invert(1);
    opacity: 0.06;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

/* Keep all children above the topography overlay */
[data-cp-modal] > * { position: relative; z-index: 1; }

/* Actions pane (right · 40%) carries a subtle teal wash so it reads
   as a distinct surface from the preview pane (left · 60%). */
[data-cp-modal] [data-cp-modal-pane="actions"] {
    background:
        radial-gradient(ellipse 80% 40% at 100% 0%, color-mix(in oklab, #3FA0B0 10%, transparent), transparent 65%),
        rgba(244, 245, 243, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-cp-modal] [data-cp-modal-pane="preview"] {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Dark theme · the modal canvas + panes hardcoded light values above (the
   modal renders in a portal at document.body, so it must carry its own dark
   surface). Deep brand bleeds on a graphite base, panes as dark washes, and
   the topography flipped to screen-blend so contour lines read on dark. */
[data-theme="dark"] [data-cp-modal] {
    background:
        radial-gradient(ellipse 60% 50% at 8% 0%, color-mix(in oklab, #2F6230 24%, transparent), transparent 65%),
        radial-gradient(ellipse 50% 50% at 100% 100%, color-mix(in oklab, #3FA0B0 22%, transparent), transparent 65%),
        radial-gradient(ellipse 40% 40% at 100% 0%, color-mix(in oklab, #B2BD2F 12%, transparent), transparent 65%),
        #2A2E2E;
    border-color: color-mix(in oklab, #3FA0B0 34%, transparent) !important;
}
[data-theme="dark"] [data-cp-modal]::before {
    filter: none;
    mix-blend-mode: screen;
    opacity: 0.05;
}
[data-theme="dark"] [data-cp-modal] [data-cp-modal-pane="actions"] {
    background:
        radial-gradient(ellipse 80% 40% at 100% 0%, color-mix(in oklab, #3FA0B0 16%, transparent), transparent 65%),
        rgba(46, 50, 50, 0.55);
}
[data-theme="dark"] [data-cp-modal] [data-cp-modal-pane="preview"] {
    background: rgba(18, 20, 20, 0.45);
}

/* CanvasBackground bleed-through — its first child paints
   var(--bg-poster) as a solid fill over the entire left panel,
   which hides the wrapper's gradient. Zero out THAT element only;
   the dialog and other surfaces keep --bg-poster intact. */
[data-design="ds-v2"] .relative.h-full.w-full.overflow-hidden > .absolute.inset-0 {
    background-color: transparent !important;
}

/* Dashboard main content area bleed-through — the <main> inside
   DashboardLayout sets backgroundColor: hsl(var(--background)) which
   is a solid white from the shadcn token set and hides the wrapper's
   gradient. Zero it out so the hue gradient paints behind the page
   content. */
[data-design="ds-v2"] main[role="main"] {
    background-color: transparent !important;
}

/* Primary CTA · translucent cyan (matrix pick 5C).
   #3FA0B0 at 32% fill, 55% border, with #11353A text for AA contrast
   on the off-white canvas. Replaces the forest .btn--primary on
   ds-v2 surfaces.

   !important is needed because the auth dialog applies its CTA
   appearance via inline style={ctaStyle} (background: var(--accent-
   color)), which beats normal CSS specificity. The button must
   carry data-cp-primary for this rule to engage. */
[data-design="ds-v2"] .btn--primary,
[data-design="ds-v2"] button[data-cp-primary] {
    background: color-mix(in oklab, #3FA0B0 32%, transparent) !important;
    color: #11353A !important;
    border: 1px solid color-mix(in oklab, #3FA0B0 55%, transparent) !important;
    border-radius: var(--r-md) !important;
    transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
[data-design="ds-v2"] .btn--primary:hover,
[data-design="ds-v2"] button[data-cp-primary]:hover {
    background: color-mix(in oklab, #3FA0B0 42%, transparent) !important;
    border-color: color-mix(in oklab, #3FA0B0 70%, transparent) !important;
}
[data-design="ds-v2"] .btn--primary:active,
[data-design="ds-v2"] button[data-cp-primary]:active {
    background: color-mix(in oklab, #3FA0B0 50%, transparent) !important;
}

/* Quiet density — for utility surfaces like dashboard and settings
   where the gradient should sit behind content as atmosphere, not
   command the page. Mirrors the intensity of the "Forms & inputs"
   section in the handoff design system: soft horizontal washes at
   low alpha on the same neutral base. */
[data-design="ds-v2"][data-cp-density="quiet"] {
    /* Plain grey canvas, per the v2 specimen (rule 8). No whole-page wash.
       This attribute also sits on the dashboard shell root, so it must switch
       to graphite in dark or it paints a light slab over the dark body. */
    background: #F4F5F5;
}
[data-theme="dark"] [data-design="ds-v2"][data-cp-density="quiet"],
[data-design="ds-v2"][data-cp-density="quiet"][data-theme="dark"] {
    background: #303030;
}

/* Dark theme — same blob layout, deep brand colours on near-black. */
[data-design="ds-v2"][data-theme="dark"],
[data-theme="dark"] [data-design="ds-v2"] {
    color: #F1F5F1;
    /* Plain graphite canvas (deliberately not black), per the v2 specimen. */
    background: #303030;

    /* ds-v2's -hex / card tokens were light-only (the dark block used to set
       only the canvas), so ds-v2 surfaces — PageHeader, metric tiles, poster
       cards — stayed light-on-dark. Give them graphite dark values. */
    --bg-primary-hex: #3A3E3E;
    --bg-tertiary-hex: #464B4C;
    --bg-secondary-hex: #303030;
    --bg-quaternary-hex: #4C5254;
    --bg-poster: #303030;
    --fg-primary-hex: #F2F2F2;
    --fg-secondary-hex: #C8CBCB;
    --fg-tertiary-hex: #9AA0A0;
    --fg-quaternary-hex: #A6ACAC; /* DS-03: lifted from #7C8284 (3.4:1) to clear AA on dark canvas/cards */
    --border-primary-hex: rgba(242,242,242,.12);
    --border-secondary-hex: rgba(242,242,242,.22);
    --card-peach: #3A3E3E;
    --card-neutral: #3A3E3E;

    /* The light block also pins these NON-hex tokens on the same elements;
       without dark values here they hold #FFFFFF surfaces + ink text into
       dark mode (tokens.css can't win — it defines them at html level). */
    --surface-inverted: #F2F2F2;
    --ink-on-inverted: #0F1213;
    --bg-primary: #3A3E3E;
    --bg-secondary: #303030;
    --bg-tertiary: #464B4C;
    --bg-quaternary: #4C5254;
    --fg-quaternary: #A6ACAC; /* DS-03: lifted from #7C8284 to clear AA */

    /* Accent lifts one step so it clears contrast on graphite. */
    --accent: #11CADB;                          /* DS-01: specimen dark teal (was #5BB6C4) */
    --accent-hover: #8FCDD6;
    --accent-deep: #7ADEE9;                      /* DS-01: specimen dark accent-text (was sage #A8C5A7) */
    --accent-color-deep: #7ADEE9;                /* DS-01: teal, not sage */
    --accent-tint: color-mix(in oklab, #5BB6C4 12%, transparent);
    --accent-tint-strong: color-mix(in oklab, #5BB6C4 32%, transparent);
}

/* ============================================================
   Refined-system primitives · status STAMP + coverage PIPS
   ============================================================
   The two genuine additions from the 2026-07 design refinement that
   ds-v2 lacked. Global (not gated) so they work anywhere. Colours read
   the ds-v2 status/accent tokens.

   .cp-stamp   — square hairline mono status label (replaces the generic
                 coloured left-border alert; the stamp carries the colour).
   .cp-pips    — coverage heat-strip: ink marks done, cyan marks the gap.
*/
.cp-stamp {
    display: inline-block;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 0;                 /* the brand's hairline-square identity */
    border: 1px solid currentColor;
    flex: none;
    line-height: 1.1;
}
.cp-stamp--danger  { color: var(--status-danger); }
.cp-stamp--warning { color: var(--status-warning); }
.cp-stamp--success { color: var(--status-success); }
.cp-stamp--accent  { color: var(--accent-cyan); }
.cp-stamp--muted   { color: var(--text-tertiary); }

.cp-pips { display: flex; gap: 5px; flex-wrap: wrap; }
.cp-pip  { width: 10px; height: 10px; border-radius: 2px; }
.cp-pip--done { background: var(--text-primary); }         /* ink = done */
.cp-pip--gap  { background: var(--accent-cyan); }          /* cyan = the gap (attention) */
.cp-pip--na   { background: transparent; border: 1px solid var(--border-default); }

/* ── poster-seg · dark-theme contrast ───────────────────────────────────
   The seg rules above are tuned for light surfaces (#11353A text on a cyan
   wash). On dark surfaces (html.dark, and the [data-cp-modal] dark wash)
   that pairing is unreadable. Same geometry, dark inks. */
html.dark .poster-seg > button,
html[data-theme="dark"] .poster-seg > button,
html.dark .poster-seg [role="tab"],
html[data-theme="dark"] .poster-seg [role="tab"] {
    color: #c8cbcb !important;
}
html.dark .poster-seg > button:hover,
html[data-theme="dark"] .poster-seg > button:hover,
html.dark .poster-seg [role="tab"]:hover,
html[data-theme="dark"] .poster-seg [role="tab"]:hover {
    color: #f2f2f2 !important;
    background: rgba(242, 242, 242, 0.06) !important;
}
html.dark .poster-seg > button.active,
html[data-theme="dark"] .poster-seg > button.active,
html.dark .poster-seg [aria-selected="true"],
html[data-theme="dark"] .poster-seg [aria-selected="true"] {
    background: color-mix(in oklab, #3FA0B0 26%, transparent) !important;
    color: #7adee9 !important;
    box-shadow: 0 1px 0 0 color-mix(in oklab, #3FA0B0 45%, transparent) !important;
}
html.dark .poster-seg > button.active:hover,
html[data-theme="dark"] .poster-seg > button.active:hover {
    color: #9ae7ef !important;
}
/* dark selection highlight: bright ink, not #11353A */
html.dark ::selection, html[data-theme="dark"] ::selection {
    background: color-mix(in oklab, #3FA0B0 40%, transparent) !important;
    color: #f2f2f2 !important;
}