/* ===== styles.css ===== */
/* ============================================================
   ClipZyn — design tokens
   Cool near-black is the stage. Sky blue is the product accent. Semantic
   colours appear only when the interface is communicating a real state.
   ============================================================ */

/* Self-hosted display face (Bricolage Grotesque), referenced by --display below.
   Variable (opsz+wght 300..800), latin subset only — the display voice is used for
   English headings, never body/i18n text. NO external CDN: it is vendored under
   /vendor/fonts (served immutable) so CSP font-src 'self' covers it and the house
   no-CDN rule holds. The preload keeps the block period short and prevents a
   headline from painting in the wrong face. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 300 800;
  font-display: block;
  src: url("/vendor/fonts/bricolage-grotesque-v9-latin-var.woff2") format("woff2");
}

:root {
  /* Tell the UA this page is dark, so browser-painted chrome (scrollbar tracks on
     inner scrollers, form controls, overscroll) is dark too — never a light grey
     band against the near-black stage. Paired with <meta name="color-scheme">. */
  color-scheme: dark;

  /* --- product ground, ink, and accent --- */
  --bg:        #080C14;   /* blue-black cove */
  --ink:       #F2F6FD;   /* cool soft-white text */
  --accent:    #4FB8FF;   /* sky-blue: active / live / focus */

  /* attention only: partial, stale, capped, held, expiring, or uncertain */
  --amber:     #F2BC57;
  --amber-14:  rgba(242,188,87,0.14);
  --amber-40:  rgba(242,188,87,0.40);
  --amber-60:  rgba(242,188,87,0.60);

  /* promoted orphans (were hardcoded literals bypassing the token system) */
  --ground:    #050810;   /* the deepest ground, below --bg */
  --danger:    #FF6F7D;   /* stopped, invalid, destructive, or failed */
  --ink-on-accent: #04121E;  /* dark ink that reads on an --accent fill (buttons) */

  /* --- external brand glows (owner directive 2026-08-04) ---
     The home link field carries a soft low-opacity brand aura: YouTube red
     and Drive blue/green/yellow. These are EXTERNAL brand colors, not palette
     colors — they must not shift with the theme, and the raw values live here
     only because the U3a section is token-only by law. */
  --yt-red-15:       rgba(255,0,0,0.15);
  --yt-red-24:       rgba(255,0,0,0.24);
  --drive-blue-15:   rgba(66,133,244,0.15);
  --drive-blue-24:   rgba(66,133,244,0.24);
  --drive-green-12:  rgba(52,168,83,0.12);
  --drive-green-18:  rgba(52,168,83,0.18);
  --drive-yellow-10: rgba(251,188,4,0.10);
  --drive-yellow-15: rgba(251,188,4,0.15);

  /* --- ink at opacities (surfaces, hairlines, dim text) --- */
  --ink-02:    rgba(242,246,253,0.02);
  --ink-04:    rgba(242,246,253,0.04);
  --ink-06:    rgba(242,246,253,0.06);
  --ink-08:    rgba(242,246,253,0.08);
  --ink-12:    rgba(242,246,253,0.12);
  --ink-16:    rgba(242,246,253,0.16);
  --ink-24:    rgba(242,246,253,0.24);
  --ink-38:    rgba(242,246,253,0.38);
  --ink-55:    rgba(242,246,253,0.55);
  --ink-72:    rgba(242,246,253,0.72);
  --ink-88:    rgba(242,246,253,0.88);

  /* --- accent at opacities (glow) --- */
  --acc-08:    rgba(79,184,255,0.08);
  --acc-14:    rgba(79,184,255,0.14);
  --acc-22:    rgba(79,184,255,0.22);
  --acc-40:    rgba(79,184,255,0.40);
  --acc-60:    rgba(79,184,255,0.60);

  /* semantic state spectrum: related to the accent, never interchangeable */
  --live:      #5AC8E8;
  --live-14:   rgba(90,200,232,0.14);
  --live-40:   rgba(90,200,232,0.40);
  --live-60:   rgba(90,200,232,0.60);
  --edit:      #4FC3B2;
  --edit-08:   rgba(79,195,178,0.08);
  --edit-12:   rgba(79,195,178,0.12);
  --edit-14:   rgba(79,195,178,0.14);
  --edit-22:   rgba(79,195,178,0.22);
  --edit-40:   rgba(79,195,178,0.40);
  --edit-45:   rgba(79,195,178,0.45);
  --edit-60:   rgba(79,195,178,0.60);
  --done:      #58D68D;
  --done-14:   rgba(88,214,141,0.14);
  --done-40:   rgba(88,214,141,0.40);
  --done-60:   rgba(88,214,141,0.60);

  /* --- type --- */
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* --- motion: one multiplier-aware ladder, slow and weighted --- */
  --motion: 1;
  --t-micro: calc(120ms * var(--motion));
  --t-quick: calc(200ms * var(--motion));
  --t-fast:  calc(320ms * var(--motion));
  --t-base:  calc(560ms * var(--motion));
  --t-slow:  calc(860ms * var(--motion));
  --t-cove:  calc(1200ms * var(--motion));
  /* Compatibility aliases point into the ladder. */
  --duration-fast: var(--t-micro);
  --duration-base: var(--t-fast);
  --duration-slow: var(--t-base);
  --duration-scene: var(--t-cove);
  --dur-fast: var(--t-micro);
  --dur-std: var(--t-fast);
  --dur-hero: var(--t-base);
  /* R2 §C: the dc consolidated curve (dc L47) — decelerating, zero overshoot,
     slightly snappier than the U0 interim (0.16,1,0.30,1). App-wide felt-motion
     change by design (motion consolidation, masterplan §B4/§C). */
  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);

  /* --- structure --- */
  /* device safe areas (notch / home indicator); viewport-fit=cover is set in
     index.html, so standalone/landscape content must respect these */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bar-h: calc(64px + var(--safe-top));
  /* --nav-h: the vertical zone the floating SceneNav (app.jsx) reserves at the
     bottom of every scrollable screen = pill height + its 22px bottom offset + a
     12px breathing gap, plus the device home-indicator inset. The pill is 54px
     tall on coarse pointers (44px button + 2x5 pad) and 40px on fine (30px button),
     so the default is the coarse-safe value; @media (pointer: fine) trims it.
     Scrollable screens reserve calc(var(--nav-h) + <extra>) instead of a magic
     96px so the Start glow / last row can never sit under the nav. */
  --nav-h: calc(88px + var(--safe-bottom));
  /* --transport-band: the zone the floating .v2-transport pill occupies, from
     the pill's own parts so it cannot drift: a 44px step button, 2x7px pill
     padding, a 1px border, its own bottom offset (--transport-offset, the same
     token the pill rule reads), a gap and the home-indicator inset. A column
     that ends its SCROLLPORT here keeps content out of the pill's band at
     every scroll position; padding-bottom cannot, because it
     clears only the end of the scroll while a control's position at scrollTop 0
     is a function of the content above it. Measured (verify_phone_pill_
     clearance.cjs): Home at 390x844 with 144px of padding-bottom already put
     Build at 760-812 under a pill at 766-826, elementFromPoint returning the
     pill. It reproduces at 1440x900, so the band is reserved at every width. */
  --transport-h: calc(44px + 14px + 2px);
  /* --transport-offset: the pill's own bottom offset. The pill rule and the
     band that reserves room for it read the same token, so moving the pill
     moves the band with it. */
  --transport-offset: 18px;
  --transport-band: calc(var(--transport-h) + var(--transport-offset) + var(--space-3) + var(--safe-bottom));
  --radius: 14px;
  --radius-lg: 20px;
  --hair: rgba(242,246,253,0.10);

  /* Legacy elevation aliases resolve through the material ladder below. */
  --floor: var(--shadow-1), var(--edge-top);
  --floor-lift: var(--shadow-2), var(--edge-top);

  /* ============================================================
     v2 DESIGN-SYSTEM TOKEN LAYER (leg U0) — ADDITIVE.
     The names below back the redesigned journey skin and are consumed via
     var() by the U1+ atoms. Shared palette values above and compatibility
     aliases below now move together under the visual-identity contract.
     Values track the round-2
     prototype token block (_REFS/ClipZyn.dc.html L15-56) and pack 06
     §6.1/6.3. Where a new name duplicates an existing value it ALIASES it
     exactly (--surf-0 == --ground, --surf-1 == --bg) so nothing shifts.
     Light overrides live in the single :root[data-theme="light"] block below.
     ============================================================ */

  /* surface ladder — flat steps (--surf-0/-1 alias --ground/--bg) */
  --surf-0: #050810;
  --surf-1: #0C121D;
  --surf-2: #101724;
  --surf-3: #182233;

  /* accent family. --accent-text is the accent-colored TEXT/icon token that
     holds contrast when the theme flips (== --accent in dark; pinned in light).
     --acc-16 is new; --acc-08/40/60 already exist above. NOTE: accent tints are
     kept as static rgba to match the live app's convention and guarantee the
     flag-off screenshot is identical; converting them to color-mix(var(--accent))
     for the future user-tunable accent swatch is a deliberate, screenshot-gated
     change owned by the Account accent-picker leg, not U0. */
  --accent-text: var(--accent);
  --acc-16: rgba(79,184,255,0.16);
  --line-acc: var(--acc-40);

  /* accent-picker swatch palette (Account -> Preferences, v2-account.jsx). Fixed
     reference hues the picker offers you to choose FROM — independent of the live
     --accent (so the "Sky" swatch stays sky even after you pick "Mint"), and
     theme-independent by design, so defined once here. Read via getComputedStyle
     and painted through --u7-swatch; the selected one shows an --ink ring. Sky ==
     the default --accent, Amber == --amber, kept as literals so a future --accent
     retune never silently moves the picker's reference colors. */
  --u7-accent-sky: #4FB8FF;
  --u7-accent-periwinkle: #7C9CFF;
  --u7-accent-mint: #5AD1C4;
  --u7-accent-violet: var(--edit); /* persisted token name; swatch follows the live-canvas teal */
  --u7-accent-amber: #F2BC57;

  /* state-color 16% tints */
  --live-16:   rgba(90,200,232,0.16);
  --edit-16:   rgba(79,195,178,0.16);
  --done-16:   rgba(88,214,141,0.16);
  --amber-16:  rgba(242,188,87,0.16);
  --danger-14: rgba(255,111,125,0.14);
  --danger-16: rgba(255,111,125,0.16);
  --danger-40: rgba(255,111,125,0.40);
  --danger-60: rgba(255,111,125,0.60);

  /* named hairline steps (prototype --line-1/-2; distinct from legacy --hair).
     R2 §M adds --line-3, the strongest step, reserved for active tabs / focused
     cards (dc L143 defines it for light; the dark value extrapolates the dark
     .10/.18 ladder — the dc dark root has no --line-3, deliberate deviation). */
  --line-1: rgba(242,246,253,0.08);
  --line-2: rgba(242,246,253,0.14);
  --line-3: rgba(242,246,253,0.28);

  /* deep companion blue for the Reel chroma duos (dc L17 --accent-2). Theme-
     independent like --accent (not overridden in light, same covenant). */
  --accent-2: #1B3FBF;

  /* Reel chroma-duo tile chrome (design R2 leg 2): top-light highlight, inset
     bottom shade, and the progress scrim. Theme-independent like the duo
     gradient they sit on (same covenant as --accent-2). */
  --reel-hi:    rgba(255,255,255,0.16);
  --reel-shade: rgba(0,0,0,0.45);
  --reel-scrim: rgba(2,4,10,0.72);

  /* platform identity — Instagram / TikTok + 16/28 tints */
  --ig:    #E1618D;
  --ig-16: rgba(225,97,141,0.16);
  --ig-28: rgba(225,97,141,0.28);
  --tt:    #39C6D6;
  --tt-16: rgba(57,198,214,0.16);
  --tt-28: rgba(57,198,214,0.28);
  /* R2 §B2: the X muted trio + the raw platform BRAND literals (dc L20, L35-37).
     Brand literals are theme-independent by design (no light override); the
     16/28 tints follow the repo's static-rgba convention, not color-mix. */
  --x:    #9AA6B8;
  --x-16: rgba(154,166,184,0.16);
  --x-28: rgba(154,166,184,0.28);
  --yt:   #FF0033;
  --tt-a: #25F4EE;
  --tt-b: #FE2C55;
  --ig-a: #FFD600;
  --ig-b: #FF0069;
  --ig-c: #E6005C; /* zero-purple: IG gradient tail moved from violet to deep magenta */
  /* R2 leg 7: the glyph-badge plate — near-black in BOTH themes (dc 436-440
     puts brand marks on #050507 regardless of theme; brand-literal family). */
  --plat-badge-bg: #050507;

  /* R2 leg 4: studio-hero photo-overlay chrome (dc 512-535). Deliberately
     theme-independent — this is treatment ON a photograph, not UI surface, so
     the shades/paper are fixed literals carried as tokens (the post-U2 css
     slices forbid inline literals). */
  --hero-paper: #F3F1EC;          /* empty-tile base while no frame exists */
  --hero-paper-ink: #3A4149;      /* placeholder title on the paper base */
  --hero-hud-bg: rgba(6, 8, 10, 0.55);
  --hero-hud-line: rgba(255, 255, 255, 0.14);
  --hero-hud-ink: #F2F5F8;
  --hero-title-bg: rgba(6, 8, 10, 0.4);
  --hero-white: #FFFFFF;
  --hero-shade-70: rgba(0, 0, 0, 0.7);
  --hero-shade-30: rgba(0, 0, 0, 0.3);
  --hero-scanline: rgba(255, 255, 255, 0.09);
  --hero-title-shadow: 0 2px 8px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 0, 0, 0.6);
  --hero-dot-ink: #04121E;        /* check glyph on a filled phase dot */

  /* the Reel's wave colors */
  --wave-rest: var(--ink-24);
  --wave-live: var(--accent);

  /* Material light, elevation, atmosphere, and interaction recipes. */
  --glow-accent: 0 0 0 1px rgba(79,184,255,0.22), 0 8px 32px -8px rgba(79,184,255,0.40);
  --glow-amber:  0 0 0 1px rgba(242,188,87,0.22), 0 8px 32px -8px rgba(242,188,87,0.40);
  --glow-live:   0 0 0 1px rgba(90,200,232,0.22), 0 8px 32px -8px rgba(90,200,232,0.40);
  --glow-done:   0 0 0 1px rgba(88,214,141,0.22), 0 8px 32px -8px rgba(88,214,141,0.40);
  --glow-danger: 0 0 0 1px rgba(255,111,125,0.22), 0 8px 32px -8px rgba(255,111,125,0.40);
  --glow-acc: var(--glow-accent);
  --shadow-1: 0 2px 8px rgba(0,0,0,0.24);
  --shadow-2: 0 12px 40px rgba(0,0,0,0.40);
  --shadow-3: 0 24px 80px rgba(0,0,0,0.55);
  --edge-top: inset 0 1px 0 rgba(242,246,253,0.06);
  --edge-top-2: inset 0 1px 0 rgba(242,246,253,0.08);
  --glass: rgba(12,18,29,0.82);
  --blur: blur(24px) saturate(140%);
  --glass-sheet: var(--glass);
  --glass-bar: var(--glass);
  --beam: radial-gradient(900px 600px at 85% -10%, rgba(79,184,255,0.08), rgba(242,246,253,0.02) 45%, transparent 70%);
  --beam-warm: radial-gradient(900px 600px at 85% -10%, rgba(242,188,87,0.14), rgba(242,246,253,0.02) 45%, transparent 70%);
  --beam-phone: radial-gradient(700px 480px at 50% -12%, rgba(79,184,255,0.08), rgba(242,246,253,0.02) 45%, transparent 70%);
  --beam-phone-warm: radial-gradient(700px 480px at 50% -12%, rgba(242,188,87,0.14), rgba(242,246,253,0.02) 45%, transparent 70%);
  --grain-opacity: 0.03;
  --thumb-vignette: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.06) 100%);
  --thumb-inset: inset 0 0 0 1px rgba(242,246,253,0.06);
  --frame-bezel: 0 0 0 1px var(--line-2), var(--edge-top), var(--shadow-2);
  --tick-size: 8px;
  --tick-ink: var(--ink-24);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --focus-ring-on-accent: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
  --select-glow: var(--glow-accent);
  --shimmer: linear-gradient(90deg, transparent 0%, rgba(242,246,253,0.08) 50%, transparent 100%);
  --skeleton-base: var(--ink-04);
  --skeleton-hi: var(--ink-08);
  --scroll-shadow-top: linear-gradient(180deg, rgba(5,8,16,0.55), transparent);
  --scroll-shadow-bottom: linear-gradient(0deg, rgba(5,8,16,0.55), transparent);
  --z-sticky: var(--z-content-raised);
  --z-popover: var(--z-floating);
  --z-tooltip: var(--z-hint);

  /* The stage vignette is intentionally separate from thumbnail treatment. */
  --vignette: radial-gradient(130% 95% at 50% 100%, transparent 40%, rgba(0,0,0,0.6) 100%);
  --card-sheen: linear-gradient(165deg, rgba(255,255,255,0.07), rgba(255,255,255,0) 40%);
  --btn-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 100%, white 20%), var(--accent) 58%, color-mix(in srgb, var(--accent) 100%, black 14%));
  --btn-primary-border: color-mix(in srgb, var(--accent) 50%, white 30%);
  --ghost-bg: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 65%);

  /* overlay scrim — theme-aware replacement for the prototype's literal
     rgba(0,0,0,.45) behind modals/drawers/sheets */
  --scrim: rgba(0,0,0,0.45);

  /* design-r4 leg-M: stage + overlay finish tokens. Each dark value is the
     EXACT literal the consuming rule carried before (byte-identical dark
     render); the light block re-steps them, because a --bg-mix scrim flips to
     a white veil on paper and the shell's black vignette/cove floor turns into
     a dirty grey ring around any transparent screen (Connect). The canvas
     keeps DARK veils behind overlays in both themes (dc drawer scrim
     rgba(0,0,0,.4), sheets .45-.55) and whispers its light vignette at .05. */
  --stage-vignette: inset 0 0 220px 40px rgba(0,0,0,0.6);
  --cove-floor: rgba(0,0,0,0.7);
  --drawer-scrim: color-mix(in srgb, var(--bg) 55%, transparent);
  --sheet-scrim: color-mix(in srgb, var(--bg) 72%, transparent);
  /* leg-M: canvas finish-layer opacities that the dc thins under
     [data-theme="light"] (dc L73/L142/L145): the cta-cut conic rim, the
     rim-light conic rim, the travelling sheen highlight, and the auth stage
     reel art. Token-stepped here so no component ever branches on theme. */
  --cta-rim-op: 0.9;
  --rim-op: 0.85;
  --sheen-hi: color-mix(in srgb, var(--hero-white) 32%, transparent);
  --stage-art-op: 0.14;

  /* Bricolage is self-hosted and preloaded; the text stack is its fallback. */
  --display: "Bricolage Grotesque", var(--sans);

  /* 4px spacing grid — R2 §C adopts the dc :root scale verbatim (dc L48):
     4/8/12/16/20/24/32/40/56. --space-5..8 revalue from the U0 interim ladder
     (24/32/48/72), deliberately tightening every existing consumer; --space-9
     is new. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;

  /* radius family — harmonized (legacy --radius/--radius-lg above untouched).
     R2 §C adds the dc names (dc L49); dc --radius-lg:16px is NOT adopted
     because the legacy --radius-lg:20px above has v1 consumers (deviation —
     use --radius-panel/--radius-xl for the dc 18/20 steps). */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-pill: 999px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  /* R3 foundations — 16px radius step; legacy --radius-lg remains frozen. */
  --radius-lg2: 16px;
  --radius-panel: 18px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  /* design-r4 leg-B: the dc chip radius (dc L54). Already consumed by the
     R4 leg-A chip rules, which previously resolved to 0 with no definition. */
  --radius-chip: 10px;

  /* type scale — R2 §C adopts the dc scale (dc L50): adds 2xs/sm/base/md/lg/
     2xl..5xl and revalues --text-xl 18px -> 22px (dc's 18 is --text-lg).
     Legacy --text-s/m/l stay as authored U0 steps. */
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-22: 22px;
  --text-28: 28px;
  --text-36: 36px;
  --text-48: 48px;
  --text-xs: var(--text-13);
  --text-s:  var(--text-13);
  --text-m:  13.5px;
  --text-l:  15px;
  --text-xl: 22px;
  --text-2xs: var(--text-13);
  --text-sm:  13px;
  --text-base: 14px;
  --text-md:  15px;
  --text-lg:  18px;
  --text-2xl: 26px;
  --text-3xl: 29px;
  --text-4xl: 35px;
  --text-5xl: 44px;

  /* Legacy shadow names point into the material ladder. */
  --shadow-xs: var(--shadow-1);
  --shadow-sm: var(--shadow-1);

  /* Track 4 foundation: canonical spacing roles and density geometry. */
  --gap-default: var(--space-4);
  --pad-default: var(--space-5);
  --section-gap: var(--space-9);
  --density-gap: var(--gap-default);
  --density-pad: var(--pad-default);
  --density-control: 44px;
  --density-row: 56px;

  /* Track 4 foundation: one semantic type ramp. Legacy aliases remain below. */
  --type-display: var(--text-5xl);
  --type-heading-1: var(--text-4xl);
  --type-heading-2: var(--text-3xl);
  --type-heading-3: var(--text-xl);
  --type-body-large: var(--text-md);
  --type-body: var(--text-base);
  --type-label: var(--text-sm);
  --type-meta: var(--text-13);
  --type-numeral: var(--text-sm);

  /* Track 4 foundation theme contract. */
  --ui-surface: var(--surf-1);
  --ui-surface-raised: var(--surf-2);
  --ui-text: var(--ink);
  --ui-text-muted: var(--ink-55);
  --ui-text-subtle: var(--ui-text-muted);
  --ui-text-link: var(--accent-text);
  --ui-text-on-accent: var(--ink-on-accent);
  --ui-text-live: var(--live);
  --ui-text-done: var(--done);
  --ui-text-attention: var(--amber);
  --ui-text-danger: var(--danger);
  --ui-text-edit: var(--edit);
  --ui-line: var(--line-2);
}

/* ============================================================
   LIGHT THEME — first-class, same soul (leg U0; pack 06 §6.6b + prototype
   L65-80). Implemented ONLY as token overrides on :root[data-theme="light"];
   components never branch, they only consume tokens. This is the SOLE
   [data-theme] selector in this file (verify_theme_tokens enforces that).
   The resolver (theme.jsx) sets data-theme="light" only when a light/system-
   light preference is stored; with no stored preference it resolves DARK and
   sets NO attribute, so dark remains the no-preference default.
   --accent is deliberately NOT overridden (stays user/brand blue); accent
   tints (--acc-*) therefore stay blue in light, so the Reel's live bar reads
   identically. --accent-text is pinned to an AA-safe blue for text/links.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  /* cool paper ground and blue-black ink */
  --bg:  #F5F8FC;
  --ink: #101827;
  --ink-on-accent: #04121E;
  /* owner-defaulted contrast floor: a fixed AA-safe link/icon blue in light,
     independent of the accent swatch (prototype L66; queued owner flag). */
  --accent-text: #0969B2;

  /* surface ladder (prototype L67; --ground = deepest recessed well) */
  --ground: #E8EEF6;
  --surf-0: #E8EEF6;
  --surf-1: #FFFFFF;
  --surf-2: #FFFFFF;
  --surf-3: #EDF3FA;

  /* semantic spectrum, each AA-safe on paper and distinct from the accent */
  --live:    #0A6E8A;
  --edit:    #0B7366;
  --done:    #16734A;
  --amber:   #875000;
  --danger:  #C53A4A;
  --live-14:   rgba(10,110,138,0.14);
  --live-16:   rgba(10,110,138,0.16);
  --live-40:   rgba(10,110,138,0.40);
  --live-60:   rgba(10,110,138,0.60);
  --edit-16:   rgba(11,115,102,0.16);
  --done-14:   rgba(22,115,74,0.14);
  --done-16:   rgba(22,115,74,0.16);
  --done-40:   rgba(22,115,74,0.40);
  --done-60:   rgba(22,115,74,0.60);
  --amber-16:  rgba(135,80,0,0.16);
  --danger-14: rgba(197,58,74,0.14);
  --danger-16: rgba(197,58,74,0.16);
  --danger-40: rgba(197,58,74,0.40);
  --danger-60: rgba(197,58,74,0.60);
  --edit-08: rgba(11,115,102,0.08);
  --edit-12: rgba(11,115,102,0.12);
  --edit-14: rgba(11,115,102,0.14);
  --edit-22: rgba(11,115,102,0.22);
  --edit-40: rgba(11,115,102,0.40);
  --edit-45: rgba(11,115,102,0.45);
  --edit-60: rgba(11,115,102,0.60);
  --amber-14: rgba(135,80,0,0.14);
  --amber-40: rgba(135,80,0,0.40);
  --amber-60: rgba(135,80,0,0.60);

  /* platform identity, darkened for white (prototype L69-70) */
  --ig:    #C64B77;
  --ig-16: rgba(198,75,119,0.14);
  --ig-28: rgba(198,75,119,0.26);
  --tt:    #1595A6;
  --tt-16: rgba(21,149,166,0.14);
  --tt-28: rgba(21,149,166,0.26);

  /* hairlines — R2 §M darkening (dc L143): light lines were near-invisible on
     paper, so --line-1/2 jump to 24%/42% black and --line-3 (62%) lands for
     active tabs / focused cards. This one edit cascades to every card, divider,
     input, chip outline, and the calendar grid in light mode. Legacy --hair
     kept (v1 consumers). */
  --line-1: rgba(16,24,39,0.24);
  --line-2: rgba(16,24,39,0.42);
  --line-3: rgba(16,24,39,0.62);
  --hair:   rgba(16,24,39,0.10);

  /* R2 §B2: X muted trio on paper (dc L131) */
  --x:    #55606F;
  --x-16: rgba(85,96,111,0.14);
  --x-28: rgba(85,96,111,0.26);

  /* Material recipes designed for paper. Legacy names remain aliases. */
  --glow-accent: 0 0 0 1px rgba(9,105,178,0.22), 0 8px 32px -8px rgba(9,105,178,0.24);
  --glow-amber: 0 0 0 1px rgba(135,80,0,0.22), 0 8px 32px -8px rgba(135,80,0,0.22);
  --glow-live: 0 0 0 1px rgba(10,110,138,0.22), 0 8px 32px -8px rgba(10,110,138,0.22);
  --glow-done: 0 0 0 1px rgba(22,115,74,0.22), 0 8px 32px -8px rgba(22,115,74,0.22);
  --glow-danger: 0 0 0 1px rgba(197,58,74,0.22), 0 8px 32px -8px rgba(197,58,74,0.22);
  --glow-acc: var(--glow-accent);
  --shadow-1: 0 2px 8px rgba(12,17,22,0.12);
  --shadow-2: 0 12px 40px rgba(12,17,22,0.18);
  --shadow-3: 0 24px 80px rgba(12,17,22,0.24);
  --shadow-xs: var(--shadow-1);
  --shadow-sm: var(--shadow-1);
  --edge-top: inset 0 1px 0 rgba(255,255,255,0.72);
  --edge-top-2: inset 0 1px 0 rgba(255,255,255,0.88);
  --glass: rgba(255,255,255,0.82);
  --blur: blur(24px) saturate(140%);
  --glass-bar: var(--glass);
  --glass-sheet: var(--glass);
  --beam: radial-gradient(900px 600px at 85% -10%, rgba(79,184,255,0.08), rgba(255,255,255,0.40) 45%, transparent 70%);
  --beam-warm: radial-gradient(900px 600px at 85% -10%, rgba(242,188,87,0.14), rgba(255,255,255,0.40) 45%, transparent 70%);
  --beam-phone: radial-gradient(700px 480px at 50% -12%, rgba(79,184,255,0.08), rgba(255,255,255,0.40) 45%, transparent 70%);
  --beam-phone-warm: radial-gradient(700px 480px at 50% -12%, rgba(242,188,87,0.14), rgba(255,255,255,0.40) 45%, transparent 70%);
  --thumb-vignette: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(12,17,22,0.06) 100%);
  --thumb-inset: inset 0 0 0 1px rgba(16,24,39,0.12);
  --frame-bezel: 0 0 0 1px var(--line-2), var(--edge-top), var(--shadow-2);
  --tick-ink: var(--ink-24);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-text);
  --focus-ring-on-accent: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
  --select-glow: var(--glow-accent);
  --shimmer: linear-gradient(90deg, transparent 0%, rgba(16,24,39,0.08) 50%, transparent 100%);
  --skeleton-base: var(--ink-04);
  --skeleton-hi: var(--ink-08);
  --scroll-shadow-top: linear-gradient(180deg, rgba(16,24,39,0.18), transparent);
  --scroll-shadow-bottom: linear-gradient(0deg, rgba(16,24,39,0.18), transparent);

  /* full ink ramp on the near-black base. design-r4 leg-M re-bases the text
     stops (-24 and up) to the LIVE canvas light block (dc L170-171:
     .30/.68/.78/.88/.95) — the old prototype-L72-74 interpolation left every
     --ink-38/55 consumer (hero headline, eyebrows, meta lines, hour rails)
     reading washed on paper, the exact "inverted dark" failure. The fill
     stops (-02..-16) keep their reviewed low values; -06/-16 have no dc light
     counterpart (the dc light block skips them) and stay app interpolations. */
  --ink-02: rgba(16,24,39,0.03);
  --ink-04: rgba(16,24,39,0.05);
  --ink-06: rgba(16,24,39,0.06);
  --ink-08: rgba(16,24,39,0.07);
  --ink-12: rgba(16,24,39,0.11);
  --ink-16: rgba(16,24,39,0.16);
  --ink-24: rgba(16,24,39,0.30);
  --ink-38: rgba(16,24,39,0.68);
  --ink-55: rgba(16,24,39,0.78);
  --ink-72: rgba(16,24,39,0.88);
  --ink-88: rgba(16,24,39,0.95);

  /* Legacy elevation aliases use the paper material ladder. */
  --floor: var(--shadow-1), var(--edge-top);
  --floor-lift: var(--shadow-2), var(--edge-top);
  --vignette: radial-gradient(130% 95% at 50% 100%, transparent 60%, rgba(12,17,22,0.05) 100%);
  --card-sheen: linear-gradient(165deg, rgba(12,17,22,0.025), transparent 40%);
  --ghost-bg: linear-gradient(180deg, rgba(12,17,22,0.02), transparent 65%);

  /* overlay scrim in light: a soft dark veil so modals/drawers keep contrast
     against bright content (light-landing intent; conservative, reversible). */
  --scrim: rgba(12,17,22,0.35);

  /* design-r4 leg-M: stage + overlay finish on paper. Overlay veils stay DARK
     in light (canvas grammar: dc drawer scrim rgba(0,0,0,.4), sheet scrims
     .45+), never a white wash; the shell vignette and cove floor drop to the
     canvas light vignette's whisper weight (.05, dc L177). */
  --stage-vignette: inset 0 0 220px 40px rgba(12,17,22,0.05);
  --cove-floor: rgba(12,17,22,0.06);
  --drawer-scrim: var(--scrim);
  --sheet-scrim: rgba(12,17,22,0.45);
  /* canvas light finish-layer steps, verbatim ratios (dc L73/L142/L145 + the
     stage-art halving that keeps the auth reel a texture, not a wall) */
  --cta-rim-op: 0.55;
  --rim-op: 0.45;
  --sheen-hi: color-mix(in srgb, var(--hero-white) 60%, transparent);
  --stage-art-op: 0.07;

  /* Explicit foundation overrides keep the light contract auditable. */
  --ui-surface: var(--surf-1);
  --ui-surface-raised: var(--surf-2);
  --ui-text: var(--ink);
  --ui-text-muted: var(--ink-72);
  --ui-text-subtle: var(--ui-text-muted);
  --ui-text-link: var(--accent-text);
  --ui-text-on-accent: var(--ink-on-accent);
  --ui-text-live: var(--live);
  --ui-text-done: var(--done);
  --ui-text-attention: color-mix(in srgb, var(--amber) 75%, var(--ink) 25%);
  --ui-text-danger: color-mix(in srgb, var(--danger) 75%, var(--ink) 25%);
  --ui-text-edit: color-mix(in srgb, var(--edit) 75%, var(--ink) 25%);
  --ui-line: var(--line-2);
}

/* ============================================================
   TOKENS V2 MATERIAL RECIPES
   Prefixed classes avoid collisions with the shipped screen estate.
   ============================================================ */

.mat-page { position: relative; background: var(--bg); isolation: isolate; }
.mat-page::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-underlay); pointer-events: none;
  background: var(--beam);
  transition: opacity var(--t-slow) var(--ease);
}
.mat-page[data-mood="warm"]::before { background: var(--beam-warm); }
/* breakpoint: material-phone */
@media (max-width: 767px) {
  .mat-page::before { background: var(--beam-phone); }
  .mat-page[data-mood="warm"]::before { background: var(--beam-phone-warm); }
}
.mat-page::after { content: ""; position: absolute; inset: 0; z-index: var(--z-underlay); pointer-events: none;
  background: var(--beam-warm); opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.mat-page[data-mood="warm"]::after { opacity: 1; }

.mat-page > .mat-grain {
  position: absolute; inset: 0; z-index: var(--z-underlay); pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
  background-size: 200px 200px;
}
@media (prefers-reduced-transparency: reduce) { .mat-page > .mat-grain { display: none; } }

.mat-raised  { box-shadow: var(--edge-top), var(--shadow-1); border: 1px solid var(--line-1); }
.mat-floated { box-shadow: var(--edge-top-2), var(--shadow-2); border: 1px solid var(--line-2); }

.mat-glass { position: relative; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
@supports not (backdrop-filter: blur(1px)) {
  .mat-glass { background: rgba(12,18,29,0.96); }
}
.mat-glass::after {
  content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px;
  background: var(--line-1); opacity: 0; pointer-events: none;
  transition: opacity var(--t-micro) var(--ease);
}
.mat-glass.is-scrolled::after { opacity: 1; }

.mat-thumb { position: relative; overflow: hidden; border-radius: 12px; background: var(--surf-2); }
.mat-thumb > img, .mat-thumb > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mat-thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--thumb-vignette); box-shadow: var(--thumb-inset); border-radius: inherit; }

.mat-frame { background: var(--surf-2); border-radius: 12px; padding: 6px;
  box-shadow: var(--frame-bezel); }
.mat-frame > .mat-thumb, .mat-frame > .stage { border-radius: 8px; }
.mat-frame.is-marketing { transform: perspective(1200px) rotateY(-6deg); }

.mat-rail { position: relative; }
.mat-rail > .mat-tick { position: absolute; width: var(--tick-size); height: var(--tick-size); pointer-events: none; }
.mat-rail > .mat-tick::before, .mat-rail > .mat-tick::after { content: ""; position: absolute; background: var(--tick-ink); }
.mat-rail > .mat-tick::before { width: 100%; height: 1px; top: 50%; }
.mat-rail > .mat-tick::after  { height: 100%; width: 1px; left: 50%; }
.mat-rail > .mat-tick.tl { top: -4px; left: -4px; } .mat-rail > .mat-tick.tr { top: -4px; right: -4px; }
.mat-rail > .mat-tick.bl { bottom: -4px; left: -4px; } .mat-rail > .mat-tick.br { bottom: -4px; right: -4px; }

.is-selected { box-shadow: var(--select-glow), var(--edge-top), var(--shadow-1); border-color: var(--acc-22); }

@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.mat-skeleton { background: var(--skeleton-base); border-radius: 6px; position: relative; overflow: hidden; }
.mat-skeleton::after { content: ""; position: absolute; inset: 0; background: var(--shimmer);
  background-size: 200% 100%; animation: shimmer calc(11.6667 * var(--t-micro)) linear infinite; }
.mat-bar.is-indeterminate > .fill { width: 40%; background: var(--shimmer); background-size: 200% 100%;
  animation: shimmer calc(11.6667 * var(--t-micro)) linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .mat-skeleton::after, .mat-bar.is-indeterminate > .fill { animation: none; opacity: 0.6; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow: hidden;
}

/* tabular, lining numerals everywhere numbers live */
.tnum { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }

/* Raw transport telemetry under the upload filename. Both lines are bounded and
   may wrap inside the panel, so narrow phones keep every upload action reachable. */
.upload-transfer {
  width: min(100%, 300px);
  min-width: 0;
  margin: 7px auto 0;
  padding: 0 8px;
  color: var(--ink-55);
  font-size: var(--text-13);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.upload-transfer-bytes,
.upload-transfer-rate {
  max-width: 100%;
  white-space: normal;
}
.upload-transfer-rate { margin-top: 2px; color: var(--ui-text-muted); }

/* breakpoint: phone */
@media (max-width: 480px) {
  .upload-transfer { width: 100%; font-size: var(--text-13); padding: 0 2px; }
}

#root { height: 100%; }

::selection { background: var(--acc-40); color: var(--ink); }

/* --- a11y: two-ring keyboard focus with a surface-colour gap --- */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: inherit; }
.v2-btn--primary:focus-visible, .v2-btn--danger:focus-visible { box-shadow: var(--focus-ring-on-accent); }
.row:focus-visible { box-shadow: inset var(--focus-ring); }
:focus:not(:focus-visible) { outline: none; }   /* mouse/touch focus stays clean */

/* --- a11y: one reduced-motion switch plus explicit looping-animation states --- */
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
  html { scroll-behavior: auto; }
}

/* --- a11y: Windows High Contrast / forced-colors (CSSA11Y-12) ---
   The UI's structure rides entirely on translucent rgba surfaces, backdrop-filter
   glass, and box-shadow depth. Under forced-colors those are all stripped, so
   nav/toasts/menus/cards/modals can lose their edges and become indistinguishable.
   Give every interactive control and the key surfaces an EXPLICIT system-color
   border so boundaries survive when color/shadow/opacity are overridden. We do NOT
   set text/background colors here — the forced-colors palette owns those; we only
   guarantee borders exist. Targets the inline-styled controls broadly since the app
   has few stable class hooks. */
@media (forced-colors: active) {
  /* !important so a border survives even on the inline `border:none` controls (the
     primary CTA, icon buttons) — inline styles otherwise win. Only ever applies
     under forced-colors, so it cannot change the normal dark theme. */
  button, [role="button"], input, select, textarea {
    border: 1px solid ButtonBorder !important;
  }
  /* keep the keyboard focus ring visible in the forced palette */
  :focus-visible { outline: 2px solid Highlight; }
}

/* a11y helper: visually-hidden label that screen readers still announce */
.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;
}

/* hide scrollbars but keep scroll */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ink-16) transparent; }
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--ink-12); border-radius: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }

/* utility: the infinity cove — a subtle radial floor of light behind a single object.
   design-r4 leg-M: the floor's black anchor is tokenized (--cove-floor; same
   literal in dark) so the stage under transparent v2 screens (Connect) reads
   as paper with a whisper of grounding in light, not a black-derived grey pit.
   The white top-glow stops are left literal: on paper they are optically null. */
.cove {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(246,248,251,0.045) 0%, rgba(246,248,251,0.012) 38%, transparent 64%),
    radial-gradient(140% 120% at 50% 128%, var(--cove-floor) 0%, transparent 60%);
}

/* a raking cold key light from upper-left */
.rake {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 55% at 22% -8%, rgba(246,248,251,0.05), transparent 60%);
  mix-blend-mode: screen;
}

button { font-family: inherit; color: inherit; cursor: pointer; }
input, button { font-family: inherit; }

/* iOS Safari paints a translucent grey rectangle on every tap of a <button>/<a>.
   It clashes with the app's hover/JS feedback, so suppress the default flash
   app-wide. Visual only; does not affect focus rings or hit testing. */
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
/* CSSA11Y-15: most controls' press/hover feedback is delivered via JS
   onMouseEnter handlers that DON'T fire on touch, and there are no CSS :active
   rules — so after suppressing the native tap highlight a phone tap gave zero
   feedback. Restore an immediate pressed state on coarse (touch) pointers only,
   so a tap feels responsive; desktop hover/JS feedback is untouched. */
@media (hover: none) {
  button:active, a:active, [role="button"]:active {
    opacity: 0.6;
    transition: opacity var(--t-micro) var(--ease, ease);
  }
}

/* Keyframe intent index (R3 foundations — additive hygiene):
   breathe — ambient: soft opacity breathing.
   floorPulse — ambient: floor-light scale and opacity drift.
   spinSlow — loading: continuous slow rotation.
   lzMenuIn — enter: menu fade, lift, and settle.
   progress-sheen — loading: moving progress-fill sheen.
   pulse-ring — feedback: active-node pulse ring.
   node-pop — feedback: completed-node confirmation pop.
   detail-in — enter: active-stage detail reveal.
   spine-flow — loading: indeterminate vertical rail travel.
   rc-pop — feedback: run-complete confirmation pop.
   rc-arrive — enter: run-complete content arrival.
   lzRise — enter: generic upward reveal.
   lzFade — enter: generic opacity reveal.
   pulseRing — feedback: expanding confirmation ring.
   rcPop — feedback: compact save/approve confirmation pop.
   sheen — loading: horizontal processing sheen.
   spineFlow — loading: horizontal indeterminate rail travel.
   eqBar — ambient: live-reel equalizer breathing.
   linkPulse — loading: traveling phase-link light.
   gradDrift — ambient: studio-hero gradient drift.
   scanSweep — ambient: studio-hero scanline sweep.
   v2uPulse — feedback: active studio-node pulse.
   v2Spin — loading: v2 control spinner.
   v2SpineFlow — loading: v2 indeterminate spine travel.
   v2FadeIn — enter: v2 content fade-in.
   v2DrawerIn — enter: v2 drawer arrival.
   v2U2Rise — enter: U2 menu rise.
   v2LibPop — enter: library dialog pop-in.
   v2U8Rise — enter: landing/auth surface rise.
   v2U8Breathe — ambient: landing signal breathing.
   v2U8Wave — ambient: landing waveform motion.
   v2U8Lift — ambient: floating proof-card lift.
   v2U7Rise — enter: account content rise.
   v2U7Panel — enter: account panel slide-in.
   v2U7Fade — enter: account overlay fade-in.
   v2U7Sheet — enter: account sheet arrival.
   v2U3aRise — enter: upload/order surface rise.
   v2U3aReveal — enter: format detail reveal.
   u4bFade — enter: composer backdrop fade-in.
   u4bSheetIn — enter: composer sheet arrival.
   u4bPop — feedback: composer overlay confirmation pop.
   u4bSpin — loading: composer control spinner.
   v2ConnectEnter — enter: connections screen arrival.
   v2ConnectFade — enter: connections overlay fade-in.
   v2ConnectPop — enter: connections modal pop-in. */
@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes floorPulse {
  0%, 100% { opacity: 0.5; transform: scaleX(1); }
  50%      { opacity: 0.85; transform: scaleX(1.04); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

@keyframes lzMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   Progression Studio: the real progress bar + stage rail motion.
   All purely decorative; gated for prefers-reduced-motion below.
   ============================================================ */

/* the 6px track under the stat band */
.studio-bar-track {
  height: 6px;
  border-radius: 6px;
  background: var(--ink-08);
  overflow: hidden;
  position: relative;
}
.studio-bar-fill {
  height: 100%;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: width var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
/* a soft sheen drifting across the live fill */
.studio-bar-fill.is-live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(246,248,251,0.35) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: progress-sheen calc(20 * var(--t-micro)) var(--ease-inout) infinite;
}
@keyframes progress-sheen {
  0%   { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

/* soft expanding pulse ring around the active node */
.node-ring {
  position: absolute;
  inset: -1.5px;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  pointer-events: none;
  animation: pulse-ring calc(18.3333 * var(--t-micro)) var(--ease) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.65); opacity: 0; }
  100% { transform: scale(1.65); opacity: 0; }
}

/* brief scale-pop when a node flips to done (class applied on the transition) */
.node-popped { animation: node-pop var(--t-base) var(--ease); }
@keyframes node-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* live detail line under the active stage label: fades in on each change */
.studio-detail { animation: detail-in var(--t-base) var(--ease); }
@keyframes detail-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* FA2XX banner image — compact edit-studio device, theme-token only. */
.banner-image-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 3px;
  padding: 12px;
  border: 1px solid var(--ink-08);
  border-radius: 11px;
  background: var(--ink-02);
}
.banner-image-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.banner-image-title { color: var(--ink); font-size: 13px; font-weight: 700; }
.banner-image-subtitle { margin-top: 3px; color: var(--ui-text-muted); font-size: var(--text-13); line-height: 1.4; }
.banner-image-warning {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  color: var(--amber);
  background: var(--ink-04);
  font-size: var(--text-13);
  font-weight: 650;
  white-space: nowrap;
}
.banner-image-state { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.banner-image-state-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--ink-08);
  border-radius: 9px;
  color: var(--ink-55);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-13);
  font-weight: 650;
}
.banner-image-state-option.is-active { border-color: var(--acc-40); color: var(--accent); background: var(--acc-08); }
.banner-image-state-option.is-disabled { opacity: 0.45; cursor: not-allowed; }
.banner-image-state-option input { accent-color: var(--accent); margin: 0; }
.banner-image-note, .banner-image-status { color: var(--ui-text-muted); font-size: var(--text-13); line-height: 1.45; }
.banner-image-status { padding-top: 2px; }
.banner-image-file-input { display: none; }
.banner-image-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 9px;
  overflow: hidden;
  border: 1px dashed var(--ink-16);
  border-radius: 10px;
  background: var(--ink-02);
}
.banner-image-drop:hover { border-color: var(--acc-40); background: var(--acc-08); }
.banner-image-drop.is-uploading { opacity: 0.72; }
.banner-image-file-proxy { position: absolute; inset: 0; z-index: var(--z-content); width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.banner-image-drop img { width: 76px; height: 52px; flex: 0 0 auto; object-fit: cover; border-radius: 7px; border: 1px solid var(--ink-08); }
.banner-image-drop-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--ink-55); font-size: var(--text-13); line-height: 1.35; }
.banner-image-drop-copy b { color: var(--ink-72); font-size: var(--text-13); }
.banner-image-formats { min-width: 0; margin: 0; padding: 0; border: 0; }
.banner-image-formats legend { margin-bottom: 6px; padding: 0; color: var(--ui-text-muted); font-size: var(--text-13); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.banner-image-format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.banner-image-format {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--ink-08);
  border-radius: 10px;
  color: var(--ink-55);
  background: transparent;
  cursor: pointer;
}
.banner-image-format.is-active { border-color: var(--acc-40); background: var(--acc-08); color: var(--accent); }
.banner-image-format > input { position: absolute; opacity: 0; pointer-events: none; }
.banner-image-format > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.banner-image-format b { color: var(--ink-72); font-size: var(--text-13); line-height: 1.2; }
.banner-image-format small { color: var(--ui-text-muted); font-size: var(--text-13); line-height: 1.35; }
.banner-image-mode-diagram { width: 34px; height: 49px; overflow: visible; }
.banner-image-frame { fill: none; stroke: var(--ink-24); stroke-width: 2; }
.banner-image-ink { fill: var(--ink-55); }
.banner-image-muted { fill: var(--ink-16); }
.banner-image-fill { fill: var(--acc-22); stroke: currentColor; stroke-width: 1.5; }
.banner-image-hint { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 8px; color: var(--ink-55); font-size: var(--text-13); font-weight: 600; }
.banner-image-hint small { color: var(--ui-text-muted); font-weight: 400; }
.banner-image-hint input { grid-column: 1 / -1; width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px; border: 1px solid var(--ink-12); border-radius: 9px; outline: none; color: var(--ink); background: var(--ink-02); font: var(--text-13) var(--sans); }
.banner-image-hint input:focus { border-color: var(--acc-40); box-shadow: 0 0 0 2px var(--acc-08); }
.banner-image-hint > .mono { justify-self: end; color: var(--ui-text-muted); font-size: var(--text-13); }
.banner-image-error { padding: 8px 9px; border: 1px solid var(--danger-40); border-radius: 8px; color: var(--danger); background: var(--danger-14); font-size: var(--text-13); line-height: 1.45; }

/* breakpoint: phone */
@media (max-width: 480px) {
  .banner-image-format-grid { grid-template-columns: 1fr; }
  .banner-image-format { grid-template-columns: 38px 1fr; }
}

/* v2 rail: ACTIVITY indicator for an active stage with no measured fraction.
   Deliberately NOT a fill: a soft light travels the still-empty spine segment,
   signalling "alive" without claiming an amount of progress (the old
   time-based pseudo-fill lied; this doesn't). */
.spine-indet {
  background:
    linear-gradient(to bottom, transparent 0%, var(--acc-40) 50%, transparent 100%)
    var(--ink-08);
  background-size: 100% 46%;
  background-repeat: no-repeat;
  animation: spine-flow calc(17.5 * var(--t-micro)) var(--ease-inout) infinite;
}
@keyframes spine-flow {
  0%   { background-position: 0 -60%; }
  100% { background-position: 0 160%; }
}

/* run-complete: a one-shot arrival for the done screen (clips ready + the gallery
   CTA). prefers-reduced-motion is covered by the global 0.001ms rule + the `both`
   fill-mode, so reduced-motion users land on the end state instantly. */
@keyframes rc-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes rc-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   v2 keyframes (leg U0) — ported from the round-2 prototype (L57-63) for the
   U1+ atoms. ADDITIVE: these camelCase names have no consumers in the current
   (kebab-case) app, so they are inert until the redesigned skin references
   them. `breathe` is NOT re-ported here — the live app already defines an
   opacity-only @keyframes breathe (above) that must not shift; the prototype's
   scale variant belongs to a namespaced atom keyframe in U1, not U0. The global
   prefers-reduced-motion clamp (above) already collapses all of these to their
   end state. */
@keyframes lzRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lzFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 var(--acc-40); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes rcPop {
  0%   { transform: scale(0.92); opacity: 0; }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}
/* design R2 leg 11 / §L8: the save/approve confirm pulse — one rcPop on the
   element that just confirmed (re-triggered by a key re-mount). Collapsed by
   the global prefers-reduced-motion clamp like every keyframe here. */
.v2-confirm-pop { animation: rcPop var(--dur-std, var(--t-fast)) var(--ease) both; }

@keyframes sheen     { 0% { transform: translateX(-120%); } 100% { transform: translateX(340%); } }
@keyframes spineFlow { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

/* R2 §B4/§C round-2 motion additions (dc L105-107, L122) — same ADDITIVE
   contract as the U0 block above: inert until a round-2 surface references
   them, all collapsed by the global prefers-reduced-motion clamp. eqBar =
   live-reel bar breathing; linkPulse = the phase-tracker traveling light
   (two-layer background-image, animated background-position); gradDrift =
   the studio-hero brand-wash drift; scanSweep = the hero scanline sweep. */
@keyframes eqBar     { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.6); } }
@keyframes linkPulse { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }
@keyframes gradDrift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes scanSweep { 0% { transform: translateY(-100%); } 100% { transform: translateY(2000%); } }

/* CSSA11Y-11: the .lane-indet rule + its @keyframes lane-flow were removed —
   shipped dead weight with zero component consumers (only .spine-indet is used). */

/* reduced motion: kill the decorative studio animations outright
   (the global 0.001ms rule above also applies; this makes intent explicit) */
@media (prefers-reduced-motion: reduce) {
  .studio-bar-fill.is-live::after,
  .node-ring,
  .node-popped,
  .spine-indet,
  .studio-detail { animation: none !important; }
  .studio-bar-fill { transition: none !important; }
}

/* ============================================================
   Top bar: narrow-screen collapse.
   The usage pill and the Upgrade button drop out on small screens to keep the
   bar from crowding. Nothing is lost — the account menu mirrors both usage and
   the plan, and the Upgrade action lives there as "Plan & billing".
   ============================================================ */
/* The beta quota pill carries a verbose count on desktop ("5 of 10 podcasts")
   and a compact one ("5/10") on phones; the compact form is hidden by default. */
.tb-bq-short { display: none; }

.billing-degraded-notice {
  position: absolute;
  z-index: var(--z-notice);
  top: calc(var(--bar-h) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 12px 9px 16px;
  border: 1px solid var(--ink-12);
  border-radius: 12px;
  background: rgba(18, 21, 26, 0.94);
  box-shadow: var(--floor);
  color: var(--ink-72);
  font-size: var(--text-13);
  line-height: 1.4;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.billing-degraded-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.billing-degraded-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  background: var(--ink-04);
  color: var(--ink-72);
  font: 600 var(--text-13) var(--sans);
  cursor: pointer;
}
.billing-degraded-actions button:first-child { color: var(--accent); border-color: var(--acc-22); }

/* Below ~900px the absolutely-centered pill (left:50%; translateX(-50%)) drifts into
   and hit-tests above the fixed right cluster in the ~640-820px band -- taps on the
   left of the right-cluster buttons landed on the pill. Un-center it from 900px down
   so it sits in normal flow (header is justify-content:space-between) between the logo
   and the right cluster and can no longer overlap. The verbose copy is kept here; only
   under 640px (below) does the copy compact and the usage/upgrade/identity items hide. */
/* breakpoint: tablet */
@media (max-width: 820px) {
  /* the identity (name+email) secondary item crowds the bar on tablets; it still
     lives in the avatar dropdown. Hidden <=900 (iPad portrait); shown on desktop. */
  .tb-identity { display: none; }
  .tb-beta-quota {
    position: static !important;
    left: auto !important;
    transform: none !important;
  }
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .billing-degraded-notice { align-items: flex-start; justify-content: space-between; font-size: var(--text-13); }
  .billing-degraded-actions { flex-direction: column; align-items: stretch; }
  .tb-usage, .tb-upgrade, .tb-identity { display: none; }
  /* Take the beta quota pill OUT of absolute-centering on phones. As an
     absolutely-positioned element it painted AND hit-tested above the fixed
     right cluster, so taps on the left half of "History" hit the pill and
     opened Account->Access. In flow it sits between the logo and the right
     cluster (header is justify-content:space-between) and can no longer overlap.
     It stays a tappable button (testers tap it to enter codes); we do NOT set
     pointer-events:none. Compacting the copy (below) keeps it narrow at 320px. */
  .tb-beta-quota {
    position: static !important;
    left: auto !important;
    transform: none !important;
    padding: 0 10px !important;
    gap: 6px !important;
    min-width: 0;
    flex: 0 1 auto;
  }
  .tb-bq-days, .tb-bq-text { display: none; }
  .tb-bq-short { display: inline; }
  /* Icon-only History under 640px: drop the text label (aria-label keeps it
     accessible) and square up the padding. Frees ~55px next to the in-flow pill. */
  .tb-history-label { display: none; }
  .tb-history-btn { padding: 0 9px !important; gap: 0 !important; }
}

/* First-run guide: intentionally in normal flow. It consumes layout space and can
   never cover or intercept the source chooser, upload plinth, link field, or samples. */
.first-run-checklist {
  box-sizing: border-box;
  width: min(520px, 92vw);
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--acc-22);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--acc-08), var(--ink-02) 62%);
  box-shadow: 0 18px 52px -38px var(--acc-60);
  color: var(--ink);
  text-align: left;
}
.first-run-checklist__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.first-run-checklist__eyebrow { color: var(--accent); font-size: var(--text-13); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.first-run-checklist h2 { margin: 4px 0 0; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.first-run-checklist__close {
  width: 32px; height: 32px; flex: 0 0 auto; border: 1px solid var(--ink-12); border-radius: 9px;
  background: transparent; color: var(--ink-55); cursor: pointer; font: 22px/1 var(--sans);
}
.first-run-checklist__close:hover, .first-run-checklist__close:focus-visible { border-color: var(--acc-40); color: var(--ink); outline: none; }
.first-run-checklist__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.first-run-checklist__steps button {
  box-sizing: border-box; width: 100%; min-height: 76px; display: flex; align-items: flex-start; gap: 9px;
  padding: 10px; border: 1px solid var(--ink-08); border-radius: 11px; background: var(--ink-02);
  color: var(--ink-72); cursor: pointer; font-family: var(--sans); text-align: left;
}
.first-run-checklist__steps button:hover, .first-run-checklist__steps button:focus-visible { border-color: var(--acc-40); outline: none; }
.first-run-checklist__mark { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: var(--acc-14); color: var(--accent); font: 700 var(--text-13)/1 var(--mono); }
.first-run-checklist__steps strong, .first-run-checklist__steps small { display: block; }
.first-run-checklist__steps strong { color: var(--ink); font-size: var(--text-13); line-height: 1.3; }
.first-run-checklist__steps small { margin-top: 3px; color: var(--ui-text-muted); font-size: var(--text-13); line-height: 1.35; }
.first-run-checklist__steps .is-complete .first-run-checklist__mark { background: var(--done-16); color: var(--ui-text-done); }
/* breakpoint: compact */
@media (max-width: 640px) {
  .first-run-checklist__steps { grid-template-columns: 1fr; }
  .first-run-checklist__steps button { min-height: 58px; }
}

/* Ultra-narrow phones (<=380px): even the in-flow compact pill + icon-only
   History + avatar can crowd the logo wordmark, so drop the "ClipZyn" wordmark
   and keep only the Logo glyph (still a home affordance). Verified to fit at
   320/360px: logo glyph ~34px + compact pill ~69px + right cluster ~93px well
   under the ~268-308px content width. */
/* breakpoint: phone */
@media (max-width: 480px) {
  .tb-wordmark { display: none; }
}

/* ============================================================
   Mobile / touch layer (2026-06-10 mobile pass).
   The app styles inline; these are the few things CSS does better:
   media-query-driven hit areas, scrollbar hiding, and the iOS
   zoom-on-focus guard. Each rule is deliberately narrow.
   ============================================================ */

/* hide the scrollbar on horizontal pill/tab rows that scroll on phones
   (scrolling still works; the row fades at its clipped edge instead) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* .hit — extend the touch hit area of a small control without growing it
   visually. The pseudo-element participates in hit testing, so a 26px pill
   accepts ~42px taps on coarse-pointer devices. Desktop is untouched. */
@media (pointer: coarse) {
  .hit { position: relative; }
  /* inset:-9px lifts a 26px control to ~44px (was -8px -> ~42px, just short of the
     44px touch floor); existing 30px+ .hit controls comfortably clear it too. */
  .hit::after { content: ""; position: absolute; inset: -9px; }
}

/* Fine-pointer (mouse/trackpad) devices render the compact 40px SceneNav pill, so
   they need less bottom clearance than the coarse default (mirrors app.jsx's
   30px-vs-44px scene-button branch). */
@media (pointer: fine) {
  :root { --nav-h: calc(74px + var(--safe-bottom)); }
}

/* Keyboard focus ring on the video player's controls (speed menu items, control
   buttons, the seek slider). :focus-visible fires only for keyboard, so mouse/touch
   are untouched. */
[data-player] button:focus-visible,
[data-player] [role="slider"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Modal max-height bounded by the VISIBLE viewport on iOS. `vh` resolves against
   the largest (URL-bar-retracted) viewport, so a vh-capped fixed modal can extend
   under the iOS browser chrome with the URL bar showing. `dvh` tracks the visible
   viewport. Two declarations give the proper fallback: pre-dvh browsers keep the
   vh cap, dvh-capable ones override. The app passes the cap via --modal-maxvh. */
.modal-dvh { max-height: calc(var(--modal-maxvh, 84) * 1vh); }
@supports (height: 1dvh) {
  .modal-dvh { max-height: calc(var(--modal-maxvh, 84) * 1dvh); }
}

/* iOS Safari zooms the page when a focused input's font-size is under 16px.
   On phone-sized or coarse-pointer viewports, floor every text input at 16px.
   !important is required to beat the app's inline styles; this is the one
   deliberate use. */
/* breakpoint: compact */
@media (max-width: 640px), (pointer: coarse) {
  input[type="text"], input[type="url"], input[type="email"],
  input[type="password"], input[type="search"], input:not([type]), textarea,
  select {
    font-size: 16px !important;
  }
}

/* Structured steering helpers write deterministic clauses into the existing
   textarea. They are optional UI only; the visible textarea remains the request. */
.steering-composer {
  margin-top: 11px;
  padding: 12px;
  border: 1px solid var(--ink-08);
  border-radius: 11px;
  background: var(--ink-02);
}
.steering-composer__intro {
  margin: 0 0 11px;
  color: var(--ink-55);
  font-size: var(--text-13);
  line-height: 1.45;
}
.steering-helper {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.steering-helper + .steering-helper { margin-top: 10px; }
.steering-helper legend {
  float: left;
  width: 104px;
  padding: 6px 8px 0 0;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.steering-helper__options {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.steering-chip {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-55);
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--text-13);
  line-height: 1.2;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.steering-chip:hover:not(:disabled) { border-color: var(--ink-24); color: var(--ink-72); }
.steering-chip.is-applied {
  border-color: var(--acc-40);
  background: var(--acc-08);
  color: var(--accent);
}
.steering-chip:disabled { cursor: not-allowed; opacity: 0.38; }
.steering-preview {
  margin-top: 11px;
  padding: 10px 12px;
  border-left: 2px solid var(--acc-40);
  background: var(--ink-02);
}
.steering-preview__label {
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.steering-preview__text {
  margin: 5px 0 0;
  color: var(--ink-72);
  font-size: var(--text-13);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .steering-helper legend {
    float: none;
    display: block;
    width: auto;
    margin-bottom: 5px;
    padding-top: 0;
  }
}

/* ============================================================
   Detail-view redesign (IMPL-C): the editing-studio modal, the
   labeled Format choice, and the edited "done" chip. Flat, dark,
   token-based. The hidden-scrollbar utility (.no-scrollbar above)
   is reused for the transcript's independent scroll region and for
   the studio modal body — no second copy. Reduced-motion is handled
   by the global 0.001ms rule (styles.css:130).
   ============================================================ */

/* --- Format choice (between the player and Download) --- */
.fmt-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.fmt-choice__label {
  font-size: var(--text-13);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ui-text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}
/* clip with only the 16:9 render: the static "16:9" pill stands alone */
.fmt-choice__static {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.fmt-choice__pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--ink-08);
  background: var(--ink-02);
  font-size: var(--text-13);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-55);
}
.fmt-choice__pill.is-on {
  background: var(--acc-08);
  border-color: var(--acc-22);
  color: var(--accent);
}

/* FA2XX W1.3: compact, inspectable projection beside the final Start action. */
.preflight-actions {
  width: min(600px, 100%);
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  text-align: left;
}
.preflight-receipt {
  min-width: 0;
  border: 1px solid var(--ink-12);
  border-radius: 14px;
  background: var(--ink-02);
  overflow: hidden;
}
.preflight-receipt > summary {
  min-height: 42px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-72);
  font-size: var(--text-13);
  font-weight: 700;
  cursor: pointer;
  list-style-position: inside;
}
.preflight-receipt > summary::before {
  content: "+";
  width: 12px;
  color: var(--accent);
  font-family: var(--mono);
}
.preflight-receipt[open] > summary::before {
  content: "−";
}
.preflight-receipt__summary {
  margin-left: auto;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 500;
}
.preflight-receipt__body {
  padding: 0 12px 10px;
}
.preflight-receipt__row {
  width: 100%;
  min-height: 30px;
  padding: 5px 2px;
  border: 0;
  border-top: 1px solid var(--ink-08);
  background: transparent;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: var(--ui-text-muted);
  font: inherit;
  font-size: var(--text-13);
  text-align: left;
}
.preflight-receipt__row strong {
  min-width: 0;
  color: var(--ink-72);
  font-weight: 600;
  text-align: right;
}
.preflight-receipt__row.is-stacked {
  align-items: flex-start;
}
.preflight-receipt__row.is-stacked strong {
  max-width: 72%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.preflight-receipt__row.is-editable:not(:disabled) {
  cursor: pointer;
}
.preflight-receipt__row.is-editable:not(:disabled):hover strong,
.preflight-receipt__row.is-editable:not(:disabled):focus-visible strong {
  color: var(--accent);
}
.preflight-receipt__row:disabled {
  opacity: 0.6;
}
.preflight-start {
  flex: 0 0 auto;
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .preflight-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .preflight-start {
    order: 1;
    align-self: center;
  }
  .preflight-receipt {
    order: 2;
  }
}

/* Element-fullscreen belt for the shared player (all surfaces; the JSX swaps
   object-fit reactively, these rules cover the webkit-prefixed engines and any
   pre-hydration frame): the UA stylesheet sizes the fullscreened ROOT to the
   screen, neutralizing the aspect-ratio cap, so `cover` on a 9:16 video in a
   landscape screen shows only a zoomed center strip (the "16:9 unseeable
   edit"). `contain` letterboxes every aspect; identical to cover when the
   ratios already match (16:9). True black is deliberate for video letterbox
   bars in both themes (not a themeable surface), matching player convention. */
[data-player]:fullscreen video { object-fit: contain !important; background: #000 !important; }
[data-player]:-webkit-full-screen video { object-fit: contain !important; background: #000 !important; }

/* ===== V2 U3B ===== */
/* The app-wide v2 Studio (§4.4) + Results (§4.5). Layout-only over the U1 atoms;
   every color is a token so both themes and the covenant (cyan live / green
   done / teal editing / amber attention / red failure) come free. Rendered
   only behind window.__VBE_UI_V2. */

.v2u-eyebrow {
  display: block;
  color: var(--ui-text-muted);
  font: 700 var(--text-13)/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* --- shared rail (Studio stages + Results ranked clips) --- */
.v2u-rail {
  background: var(--surf-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg2);
  padding: var(--space-3) 10px 14px;
  position: sticky;
  top: calc(var(--bar-h) + 6px);
  align-self: start;
}

/* ============================ STUDIO (§4.4) ============================ */
.v2u-studio {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding-top: var(--bar-h);
  /* Reserve the floating SceneNav zone: without this, the terminal cards'
     primary CTA sits under the transport pill at small viewport heights with
     zero scroll room (proven blocking on the failed state at 433x459). */
  padding-bottom: calc(var(--nav-h) + 16px);
  color: var(--ink);
  font-family: var(--sans);
}
.v2u-studio__grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px clamp(var(--space-4), 4vw, var(--space-6)) calc(var(--nav-h) + var(--space-8));
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.v2u-rail__stages { display: flex; flex-direction: column; }
.v2u-stage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 10px;
  min-height: 40px;
}
.v2u-stage__node {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-2);
  color: var(--ink-on-accent);
  font-size: var(--text-2xs);
  line-height: 1;
}
.v2u-stage.is-pending .v2u-stage__node { border-color: var(--line-2); background: transparent; }
.v2u-stage.is-active .v2u-stage__node {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--acc-16);
  animation: v2uPulse calc(15 * var(--t-micro)) var(--ease) infinite;
}
.v2u-stage.is-done .v2u-stage__node { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.v2u-stage.is-error .v2u-stage__node { border-color: var(--danger); background: var(--danger); }
.v2u-stage__label { flex: 1 1 auto; font-size: var(--text-sm); color: var(--ink-55); }
.v2u-stage.is-active .v2u-stage__label { color: var(--accent); font-weight: 600; }
.v2u-stage.is-done .v2u-stage__label { color: var(--ink); }
.v2u-stage.is-error .v2u-stage__label { color: var(--danger); }
.v2u-stage__time { flex: 0 0 auto; font-size: var(--text-xs); color: var(--ui-text-muted); }

.v2u-studio__focus { min-width: 0; }
.v2u-studio__topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 16px;
}
.v2u-studio__title {
  margin: 0;
  font: 650 22px/1.15 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.v2u-studio__clock { font-size: var(--text-xs); color: var(--ink-55); flex: 0 0 auto; }
.v2u-studio__reel { margin-bottom: 14px; }
.v2u-studio__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: var(--text-xs);
  color: var(--ink-55);
}
.v2u-studio__stats strong { color: var(--ink); font-weight: 600; }
.v2u-studio__stat-live { color: var(--accent) !important; }
.v2u-studio__rule { margin: var(--space-5) 0 var(--space-4); }
.v2u-studio__detail { font-size: var(--text-sm); color: var(--ink-72); animation: v2FadeIn var(--t-base) var(--ease) both; }
.v2u-studio__steer-echo {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--ui-text-muted);
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2u-studio__safeclose-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 18px;
  flex-wrap: wrap;
}
.v2u-studio__safeclose {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 14px;
  background: var(--surf-2);
  border: 1px solid var(--line-1);
  border-radius: 10px;
  font-size: var(--text-sm);
  color: var(--ink-72);
}
.v2u-studio__safeclose-mark { color: var(--accent); font-size: var(--text-base); }
.v2u-studio__cancel { flex: 0 0 auto; }
.v2u-studio__notify { margin-top: 16px; }

.v2u-perfmt {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-1);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: var(--space-2) 18px;
}
.v2u-perfmt__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
}
.v2u-perfmt__name { font-size: var(--text-xs); color: var(--ink-72); }
.v2u-perfmt__state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--ink-55); }
.v2u-perfmt__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.v2u-perfmt__state.v2-tone--live { color: var(--accent); }
.v2u-perfmt__state.v2-tone--live .v2u-perfmt__dot { animation: v2uPulse calc(15 * var(--t-micro)) var(--ease) infinite; }
.v2u-perfmt__state.v2-tone--done { color: var(--ink); }
.v2u-perfmt__state.v2-tone--attention { color: var(--amber); }
.v2u-perfmt__state.v2-tone--neutral { color: var(--ui-text-muted); }

.v2u-studio__dock { margin-top: 24px; }

/* -- calm building view (owner-directed 2026-07-17): centered episode card,
      reel + percent on the card, one time line, close-tab promise. ---------- */
.v2u-calm__wrap {
  /* R4-F: the canvas building column is 720 wide (canvas 561) with the 560px
     card centered inside it; the wrap also hosts the ambient section glow. */
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 44px clamp(var(--space-4), 4vw, var(--space-6)) calc(var(--nav-h) + var(--space-8));
}
.v2u-calm { display: flex; flex-direction: column; align-items: center; text-align: center; }
.v2u-calm__hero {
  /* R4-F (canvas 566): 35px display, tighter tracking */
  margin: var(--space-1) 0 var(--space-6);
  font: 700 35px/1.12 var(--display);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.v2u-calm__card {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: var(--radius-lg2);
  overflow: hidden;
  border: 1px solid var(--line-1);
  background: var(--surf-2);
  aspect-ratio: 16 / 9;
}
.v2u-calm__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--card-sheen);
  pointer-events: none;
}
.v2u-calm__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v2u-calm__thumb.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: radial-gradient(120% 140% at 50% 38%, var(--surf-3), var(--surf-2) 78%);
}
/* canvas empty-frame affordance (dc 578-579): a centered image glyph + a quiet
   "grabbing a frame" note, so an episode with no poster yet reads as a clean
   film frame, never a dark broken tile. */
.v2u-calm__ph-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: var(--ui-text-muted);
  text-align: center;
}
.v2u-calm__ph-icon { width: 40px; height: 40px; opacity: 0.7; }
.v2u-calm__ph-note { font-size: var(--text-sm); font-weight: 500; color: var(--ui-text-muted); letter-spacing: 0.01em; }
.v2u-calm__ph-title { font: 650 20px/1.35 var(--display); letter-spacing: -0.01em; color: var(--ink-72); max-width: 92%; }
.v2u-calm__overlay {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 26px 18px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  /* theme-matched scrim over the artwork so the percent + reel always read */
  background: linear-gradient(transparent, var(--glass-sheet));
}
.v2u-calm__pct { flex: 0 0 auto; min-width: 58px; text-align: left; font-size: var(--text-xl); font-weight: 700; color: var(--ink); }
.v2u-calm__reel { flex: 1 1 auto; }
.v2u-calm__caption {
  /* R4-F (canvas 590): the episode title line — 18px/600 ink-88, one line */
  margin-top: var(--space-6);
  max-width: 100%;
  padding: 0 var(--space-5);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* R4-F (canvas 614): the ready-in heading is the 23px display voice */
.v2u-calm__eta { margin-top: var(--space-5); font: 700 23px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.v2u-calm__notice { margin-top: 8px; font-size: var(--text-sm); color: var(--ink-72); animation: v2FadeIn var(--t-base) var(--ease) both; }
.v2u-calm__steer {
  margin-top: 8px;
  max-width: 420px;
  font-size: var(--text-sm);
  color: var(--ui-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2u-calm__close {
  /* R4-F (canvas 615): a quiet PLAIN text promise line under the eta heading —
     the boxed chip dress is retired; the copy is untouched. */
  margin-top: var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink-72);
}
.v2u-calm__notify { margin-top: var(--space-6); width: 100%; }
.v2u-calm__cancel-row { margin-top: 22px; }
.v2u-calm__dock { width: 100%; text-align: left; }

.v2u-studio__terminal { text-align: center; padding: var(--space-8) var(--space-5); animation: v2FadeIn var(--t-base) var(--ease) both; }
.v2u-studio__term-chip { margin-bottom: 16px; }
.v2u-studio__reel.is-done { max-width: 420px; margin: 0 auto 22px; }
.v2u-studio__headline {
  /* R4-F (canvas 634): the done headline is the 44px display voice */
  margin: 0;
  font: 700 44px/1.05 var(--display);
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* R4-F (canvas 655/664/673): failed / canceled / zero headlines sit at 29px */
.v2u-studio__headline.is-sm { font-size: 29px; letter-spacing: -0.02em; }
.v2u-studio__headline.is-neutral { color: var(--ink-88); }
.v2u-studio__sub {
  margin: var(--space-3) auto 0;
  max-width: 380px;
  font-size: var(--text-sm);
  color: var(--ink-72);
  line-height: 1.5;
}
/* The server's per-format delivery record on a settled run. The terminal column
   is centered for its headline voice; a record of asked-for against delivered is
   read down a column, so it reverts to reading alignment and is bounded to the
   headline's own measure rather than the full focus width. */
.v2u-studio__delivery {
  margin: var(--space-5) auto 0;
  max-width: 520px;
  text-align: left;
}
.v2u-studio__cta { margin-top: 26px; }
.v2u-studio__cancel-copy { font-size: var(--text-base); color: var(--ink-72); line-height: 1.6; margin-bottom: 22px; }
.v2u-studio__cancel-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.v2u-studio__cancel-actions.is-narrow { flex-direction: column; align-items: stretch; }

/* ============================ RESULTS (§4.5) ============================ */
.v2u-results {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding-top: var(--bar-h);
  color: var(--ink);
  font-family: var(--sans);
}
.v2u-results.is-empty { display: grid; place-items: center; padding: calc(var(--bar-h) + var(--space-6)) var(--space-6) var(--space-6); }
.v2u-results__head {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px clamp(var(--space-4), 4vw, var(--space-6)) 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
/* R4-F (canvas 690/700): the mono uppercase eyebrow + the 34px display title */
.v2u-results__num { display: block; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-55); }
.v2u-results__title { margin: 7px 0 0; font: 700 34px/1.04 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.v2u-results__actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.v2u-results__tabs {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-4), 4vw, var(--space-6));
  border-bottom: 1px solid var(--line-1);
}
.v2u-results__body {
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px clamp(var(--space-4), 4vw, var(--space-6)) calc(var(--nav-h) + var(--space-8));
}

.v2u-shorts { display: grid; grid-template-columns: 312px minmax(0, 1fr); gap: 22px; align-items: start; }

.v2u-rail__tools { display: flex; align-items: center; gap: var(--space-2); padding: 2px 6px var(--space-3); }
.v2u-rail__filter {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 32px;
  /* R4-F (canvas 747): room for the inset magnifier */
  padding: 0 var(--space-3) 0 31px;
  background: var(--surf-0);
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: 500 13.5px/1 var(--sans);
}
.v2u-rail__filter::placeholder { color: var(--ui-text-muted); }
.v2u-rail__filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.v2u-rail__list { max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.v2u-rail__empty { padding: var(--space-4) var(--space-2); font-size: var(--text-sm); color: var(--ink-55); }

.v2u-railrow {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-left-width: 2px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.v2u-railrow:hover { background: var(--surf-3); }
.v2u-railrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* R4-F (canvas 2608): the active row sits on surf-3 behind the accent spine */
.v2u-railrow.is-active { background: var(--surf-3); border-left-color: var(--accent); }
.v2u-railrow.is-variant { margin-left: 22px; }
/* R4-F (canvas 2610): the edit-state mark is a 16px rounded BOX — ready = ink
   ring + check, editing = edit ring on the edit tint (pulsing), raw = a quiet
   ink-24 ring with no glyph (currentColor strokes go transparent). */
.v2u-railrow__mark {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: var(--text-xs);
  color: var(--ui-text-muted);
}
.v2u-railrow__mark.v2-tone--edit { border: 1.5px solid var(--edit); background: var(--edit-16); color: var(--edit); animation: v2uPulse calc(15 * var(--t-micro)) var(--ease) infinite; }
.v2u-railrow__mark.v2-tone--done { border: 1.5px solid var(--ink); color: var(--ink); }
.v2u-railrow__mark.v2-tone--neutral { border: 1.5px solid var(--ink-24); color: transparent; }
.v2u-railrow__rank { flex: 0 0 20px; font-size: var(--text-xs); color: var(--ui-text-muted); }
.v2u-railrow__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--ink-88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2u-railrow.is-active .v2u-railrow__title { color: var(--ink); font-weight: 600; }
.v2u-railrow__save { flex: 0 0 auto; width: 16px; text-align: center; font-size: var(--text-xs); color: transparent; }
.v2u-railrow__save.is-saved { color: var(--ink); }
.v2u-railrow__score { flex: 0 0 auto; font-size: var(--text-xs); font-weight: 600; color: var(--ink); }

.v2u-focus { min-width: 0; }
.v2u-focus.is-producing { display: grid; place-items: center; text-align: center; padding: 48px var(--space-5); gap: 6px; }
.v2u-focus__prodreel { max-width: 220px; }
.v2u-focus__prodtitle { font-size: var(--text-md); font-weight: 600; color: var(--ink); margin-top: 10px; }
.v2u-focus__prodbody { font-size: var(--text-sm); color: var(--ink-55); }
.v2u-focus__editing { margin-bottom: 14px; }
.v2u-focus__stage { display: flex; align-items: flex-start; gap: var(--space-4); }
.v2u-player {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  /* R4-F (canvas playerStyle 2643): 14px radius, stage-lit radial ground, and
     the deep inset vignette (the near-black ground token stands in for the
     canvas's pure-black inset shade). */
  border-radius: var(--radius);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 22%, var(--surf-3), var(--surf-0));
  border: 1.5px solid var(--line-1);
  box-shadow: inset 0 0 60px -30px var(--ground);
}
/* Viewport-height-driven cap (was a hard 340px): a 4K vertical master squeezed
   into 340 device px aliases visibly on banner text. The calc mirrors the
   player's own phone formula; the floor keeps short windows usable.
   R4-F: the ceiling is the canvas's 270px column (max-height 440 ≈ 270 * 16/9). */
.v2u-player.is-tall { max-width: max(240px, min(270px, calc((100dvh - 330px) * 9 / 16))); margin: 0 auto; aspect-ratio: 9 / 16; }
.v2u-player.is-wide { aspect-ratio: 16 / 9; }
.v2u-player__pending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ui-text-muted);
  font-size: var(--text-sm);
}
.v2u-focus__nav { display: flex; flex-direction: column; gap: var(--space-2); padding-top: 4px; flex: 0 0 auto; }
.v2u-focus__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 16px;
  flex-wrap: wrap;
}
.v2u-focus__id { min-width: 0; }
/* R4-F (canvas 800): 16.5px focused title */
.v2u-focus__title { font-size: 16.5px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.v2u-focus__sub { font-size: var(--text-xs); color: var(--ink-55); margin-top: 2px; }
.v2u-switcher { flex: 0 0 auto; }
.v2u-focus__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 14px; }

.v2u-cutsheet { margin-top: 24px; }
.v2u-cutsheet__rows { margin-top: 4px; }
.v2u-cutrow { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-1); }
.v2u-cutrow__glyph { flex: 0 0 14px; color: var(--accent-text); font: 700 13px/1.4 var(--mono); }
.v2u-cutrow__meta { flex: 0 0 120px; }
.v2u-cutrow__role { font: 700 var(--text-13)/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); display: block; }
.v2u-cutrow__tc { font-size: var(--text-xs); color: var(--ui-text-muted); }
.v2u-cutrow__text { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-88); }

.v2u-steer { margin-top: 26px; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.v2u-steer__q { font-size: var(--text-sm); color: var(--ink-55); }

/* X clips tab — flat, ranked, playable cards.
   R4-F (canvas 951): the sheened surf-2 card on the strong 2px hairline. */
.v2u-xgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); }
.v2u-xcard { background: var(--card-sheen), var(--surf-2); border: 2px solid var(--line-2); border-radius: var(--radius-lg2); padding: 14px; }
.v2u-xcard__frame {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surf-0);
  border: 1.5px solid var(--line-1);
  aspect-ratio: 16 / 9;
}
/* R4-F (canvas 953): the rank is quiet bare mono, no pill */
.v2u-xcard__rank {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: var(--z-content-control);
  display: inline-flex;
  align-items: center;
  color: var(--ink-55);
  font-size: var(--text-xs);
}
.v2u-xcard__pending { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ui-text-muted); font-size: var(--text-sm); }
.v2u-xcard__head { margin-top: 12px; }
.v2u-xcard__title { font-size: var(--text-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2u-xcard__meta { font-size: var(--text-xs); color: var(--ink-55); margin-top: 2px; }
.v2u-xcard__actions { display: flex; gap: var(--space-2); margin-top: 10px; }
.v2u-xcard__post { flex: 1 1 auto; }

.v2u-posttext { position: relative; margin-top: 10px; background: var(--surf-0); border: 1.5px solid var(--line-1); border-radius: 9px; padding: 10px 11px; }
.v2u-posttext__eyebrow { display: block; font: 700 var(--text-13)/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-text-muted); margin-bottom: 6px; }
.v2u-posttext__body { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-88); white-space: pre-wrap; }
.v2u-posttext__copy { position: absolute; top: 7px; right: 7px; }

.v2u-longtab, .v2u-trailertab, .v2u-xtab { min-width: 0; }
.v2u-longtab .v2u-steer, .v2u-trailertab .v2u-steer { margin-top: 22px; }

/* --- mobile collapse (§4.5): rail becomes a top strip, focus stacks --- */
/* breakpoint: tablet */
@media (max-width: 820px) {
  /* The parked run's own surface carries no styles of its own, so its only top
     offset is whatever the wrapper above it contributes: 52px at desktop, 18px
     here. Against a 64px fixed bar that put the heading's top edge at y=53 and
     the bar cut through the first line. This gives the section the offset it
     never had, at the width where it was measured to be short. It is additive,
     so if the wrapper's own narrow-width padding is later corrected the result
     is extra room rather than a broken heading. The wrapper is another file's
     and is left alone; see the pass report for that measurement. */
  .run-progress--awaiting-language { padding-top: var(--space-6); }
  /* minmax(0, 1fr), not a bare 1fr. A grid track's automatic minimum is
     min-content, and the collapsed rail below is a nowrap row of stage labels,
     so the single column was floored at the widest stage strip: every settled
     Studio child measured 447px against a 390px viewport and was CLIPPED, not
     scrolled, cutting off the shortfall sentence and the stop reason on a phone.
     The desktop rule two columns up already carries minmax(0, 1fr) for exactly
     this reason. With the floor released, the rail's own overflow-x can finally
     do its job. Measured before and after at 390x844. */
  .v2u-studio__grid { grid-template-columns: minmax(0, 1fr); }
  .v2u-rail { position: static; }
  .v2u-rail__stages { flex-direction: row; overflow-x: auto; gap: var(--space-1); }
  .v2u-stage { flex: 0 0 auto; }
  .v2u-stage__label { white-space: nowrap; }
  .v2u-shorts { grid-template-columns: 1fr; }
  .v2u-shorts__rail { position: static; order: -1; }
  .v2u-rail__list { max-height: 168px; }
  .v2u-focus__stage { flex-direction: column; }
  .v2u-focus__nav { flex-direction: row; align-self: flex-end; }
  .v2u-player.is-tall { max-width: 260px; }
}

@keyframes v2uPulse {
  0% { box-shadow: 0 0 0 0 var(--acc-40); }
  70% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .v2u-stage.is-active .v2u-stage__node,
  .v2u-perfmt__state.v2-tone--live .v2u-perfmt__dot { animation: none; }
  .v2u-studio__detail, .v2u-studio__terminal { animation: none; }
}
@media (forced-colors: active) {
  .v2u-rail, .v2u-xcard, .v2u-posttext, .v2u-player, .v2u-safeclose { border: 1px solid CanvasText; }
  .v2u-railrow.is-active { border: 1px solid Highlight; }
  .v2u-stage.is-active .v2u-stage__node, .v2u-stage.is-done .v2u-stage__node { background: CanvasText; }
}


/* RESULTS-FLOW leg B: calm-card editing detail line (hold window) */
/* ================================================================== */
/* LEG B — calm studio RESULTS-HOLD "editing" sub-state (append-only)  */
/* Integrator: append this section verbatim to web/styles.css.         */
/* One new element only: .v2u-calm__detail — the mono edit-count line  */
/* ("Edited 12 of 24") rendered between the episode card and the eta   */
/* sentence while results_hold.phase === "editing". Tokens only; the   */
/* .mono utility on the element supplies the font stack.               */
/* ================================================================== */
.v2u-calm__detail { margin-top: 16px; font-size: var(--text-sm); color: var(--ink-72); }
.v2u-calm__detail + .v2u-calm__eta { margin-top: 6px; }

/* -- STUDIO-SPEED wave A (phase strip + subclip honesty), tokens-only ------- */
/* -- calm-card phase strip: one quiet row, done/current/next at a glance ---- */
.v2u-phasestrip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-1) 14px;
  margin-top: 14px;
  max-width: 560px;
}
.v2u-phasestrip__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 var(--text-13)/1.4 var(--sans);
  color: var(--ui-text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.v2u-phasestrip__step.is-done { color: var(--ink-55); }
.v2u-phasestrip__step.is-active { color: var(--ink-88); }
.v2u-phasestrip__node {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  line-height: 1;
  color: var(--ink-24);
}
.v2u-phasestrip__step.is-done .v2u-phasestrip__node { color: var(--ink-55); }
.v2u-phasestrip__step.is-active .v2u-phasestrip__node { color: var(--accent); }


/* -- results header: subclip-honesty note ---------------------------------- */
.v2r-meta__variants { color: var(--ink-55); }

/* ===== V2 ATOMS (fi/u1) ===== */

.v2-reel {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 48px;
  overflow: hidden;
}
.v2-reel__bar {
  flex: 1 1 auto;
  min-width: 2px;
  border-radius: 2px;
  background: var(--wave-rest);
  transition: background var(--t-base) var(--ease), height var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.v2-reel--thin {
  gap: 1px;
}
.v2-reel--thin .v2-reel__bar {
  min-width: 1px;
}
.v2-reel__bar.is-done {
  background: var(--ink);
}
.v2-reel__bar.is-live {
  background: var(--wave-live);
  box-shadow: 0 0 10px 1px var(--acc-60);
}
.v2-reel-bar {
  height: 12px;
}
/* Round-2 Reel primitive (design R2 leg 2, VBE_UI_REEL_V2) — the chroma-duo
   gradient TILE render (dc reel engine: chromaOf()/_bars()). One block per
   Reel: radial top-light highlight over the duo gradient, inset shadows,
   radius 7px (4px thin), a ::after darkening overlay from --reel-p to 100%
   (progress), and a live outer glow of the duo's first color. Duo colors are
   authored HERE (6 classes over --accent/--edit/--accent-2); JSX passes only
   the geometry props --reel-ang / --reel-p. Inert while the flag is off. */
.v2-reel--tile {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(120% 90% at 18% 0%, var(--reel-hi), transparent 50%),
    linear-gradient(var(--reel-ang, 105deg), var(--reel-a, var(--accent)), var(--reel-b, var(--edit)));
  box-shadow: inset 0 1px 0 var(--reel-hi), inset 0 -14px 26px -14px var(--reel-shade);
  transition: box-shadow var(--t-fast) var(--ease);
}
.v2-reel--tile.v2-reel--thin { border-radius: var(--radius-xs); }
.v2-reel--tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent var(--reel-p, 100%), var(--reel-scrim) var(--reel-p, 100%));
}
.v2-reel--tile.is-active {
  box-shadow:
    inset 0 1px 0 var(--reel-hi),
    inset 0 -14px 26px -14px var(--reel-shade),
    0 0 20px -7px var(--reel-a, var(--accent));
}
.v2-reel--tile.is-duo-0 { --reel-a: var(--accent);   --reel-b: var(--edit); }
.v2-reel--tile.is-duo-1 { --reel-a: var(--edit);     --reel-b: var(--accent-2); }
.v2-reel--tile.is-duo-2 { --reel-a: var(--accent-2); --reel-b: var(--accent); }
.v2-reel--tile.is-duo-3 { --reel-a: var(--accent);   --reel-b: var(--accent-2); }
.v2-reel--tile.is-duo-4 { --reel-a: var(--edit);     --reel-b: var(--accent); }
.v2-reel--tile.is-duo-5 { --reel-a: var(--accent-2); --reel-b: var(--edit); }
/* the Choose-screen episode header micro-thumb (screen-count.jsx EpisodeThumb):
   the Reel fills its 3px-inset CRT box instead of the atom's fixed 48px. */
.v2-reel.count-thumb__reel { height: 100%; }
.v2-reel-bar.v2-tone--edit .v2-reel__bar.is-done,
.v2-reel-bar.v2-tone--edit .v2-reel__bar.is-live {
  background: var(--edit);
}
.v2-reel-bar.v2-tone--attention .v2-reel__bar.is-done,
.v2-reel-bar.v2-tone--attention .v2-reel__bar.is-live {
  background: var(--amber);
}
.v2-reel-bar.v2-tone--danger .v2-reel__bar.is-done,
.v2-reel-bar.v2-tone--danger .v2-reel__bar.is-live {
  background: var(--danger);
}
.v2-reel-bar.is-indeterminate .v2-reel__bar {
  animation: v2SpineFlow var(--t-cove) var(--ease) infinite;
}
.v2-reel-bar.is-indeterminate .v2-reel__bar:nth-child(8n + 2) { animation-delay: .08s; }
.v2-reel-bar.is-indeterminate .v2-reel__bar:nth-child(8n + 3) { animation-delay: .16s; }
.v2-reel-bar.is-indeterminate .v2-reel__bar:nth-child(8n + 4) { animation-delay: .24s; }
.v2-reel-bar.is-indeterminate .v2-reel__bar:nth-child(8n + 5) { animation-delay: .32s; }
.v2-reel-bar.is-indeterminate .v2-reel__bar:nth-child(8n + 6) { animation-delay: .4s; }
.v2-reel-bar.is-indeterminate .v2-reel__bar:nth-child(8n + 7) { animation-delay: .48s; }
.v2-reel-bar.is-indeterminate .v2-reel__bar:nth-child(8n) { animation-delay: .56s; }

.v2-ruler {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.v2-ruler__eyebrow,
.v2-panel__eyebrow,
.v2-receipt__eyebrow,
.v2-drawer__eyebrow {
  flex: 0 0 auto;
  color: var(--ui-text-muted);
  font: 700 var(--text-13)/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.v2-ruler__track {
  position: relative;
  flex: 1 1 auto;
  min-width: 24px;
  height: 22px;
}
.v2-ruler__spine {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-top: 1px solid var(--line-1);
  background-image: repeating-linear-gradient(90deg, var(--ink-08) 0 1px, transparent 1px 9px);
  background-position: 0 1px;
  background-repeat: repeat-x;
}
.v2-ruler__tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 5px;
  background: var(--ink-16);
}
.v2-ruler__tick-label {
  position: absolute;
  top: 8px;
  left: 0;
  color: var(--ui-text-muted);
  font: 500 var(--text-13)/1 var(--mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
  transform: translateX(-50%);
}
.v2-ruler__mark {
  position: absolute;
  top: -7px;
  color: var(--accent-text);
  font: 700 var(--text-13)/1 var(--mono);
  transform: translateX(-50%);
}
.v2-ruler__mark.is-edit {
  color: var(--edit);
}

.v2-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: 600 var(--text-13)/1 var(--sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.v2-btn--44 { height: 44px; padding: 0 18px; }
.v2-btn--36 { height: 36px; }
.v2-btn--30 { height: 30px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.v2-btn--primary {
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--ink-on-accent);
  box-shadow: var(--glow-acc);
}
.v2-btn--primary:hover:not(:disabled) {
  box-shadow: var(--floor-lift);
  transform: translateY(-1px);
}
.v2-btn--ghost,
.v2-btn--icon {
  border-color: var(--line-1);
  background: var(--ghost-bg);
  color: var(--ink-88);
}
.v2-btn--ghost:hover:not(:disabled),
.v2-btn--icon:hover:not(:disabled) {
  border-color: var(--line-2);
  background: var(--surf-3);
  color: var(--ink);
}
.v2-btn--accent-ghost {
  border-color: var(--line-acc);
  background: var(--acc-08);
  color: var(--accent-text);
}
.v2-btn--accent-ghost:hover:not(:disabled) {
  background: var(--acc-16);
}
.v2-btn--danger {
  border-color: var(--danger);
  background: var(--danger-16);
  color: var(--danger);
}
.v2-btn--danger:hover:not(:disabled) {
  background: var(--surf-3);
}
.v2-btn--edit {
  border-color: var(--edit);
  background: var(--edit);
  color: var(--ink-on-accent);
}
.v2-btn--edit:hover:not(:disabled) {
  box-shadow: var(--floor-lift);
  transform: translateY(-1px);
}
.v2-btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
}
.v2-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.v2-btn__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.v2-btn[aria-busy="true"] .v2-btn__label {
  visibility: hidden;
}
.v2-btn__busy {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: v2Spin var(--t-base) linear infinite;
}

.v2-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  background: var(--surf-2);
  color: var(--ink-55);
  font: 600 var(--text-13)/1 var(--mono);
  white-space: nowrap;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
button.v2-chip {
  cursor: pointer;
}
button.v2-chip:hover:not(:disabled) {
  border-color: var(--line-2);
  background: var(--surf-3);
  color: var(--ink-88);
}
.v2-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}
.v2-chip__count {
  min-width: 18px;
  padding: 2px var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--surf-3);
  color: var(--ink-72);
  text-align: center;
}
.v2-chip.v2-tone--live,
.v2-chip.is-active {
  border-color: var(--line-acc);
  background: var(--acc-16);
  color: var(--accent-text);
}
.v2-chip.v2-tone--done {
  border-color: var(--line-2);
  background: var(--surf-3);
  color: var(--ink);
}
.v2-chip.v2-tone--edit {
  border-color: var(--edit);
  background: var(--edit-16);
  color: var(--edit);
}
.v2-chip.v2-tone--attention {
  border-color: var(--amber);
  background: var(--amber-16);
  color: var(--amber);
}
.v2-chip.v2-tone--danger {
  border-color: var(--danger);
  background: var(--danger-16);
  color: var(--danger);
}
.v2-chip--entitlement {
  border-style: dashed;
}
.v2-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.v2-panel {
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-panel);
  background: var(--surf-2);
  color: var(--ink);
  box-shadow: var(--floor);
}
.v2-panel.is-selected {
  border-color: var(--line-acc);
  box-shadow: inset 0 0 0 1px var(--acc-16), var(--floor);
}
.v2-panel__header {
  padding: var(--space-5) var(--space-5) 0;
}
.v2-panel__eyebrow {
  display: block;
  margin-bottom: 8px;
}
.v2-panel__title,
.v2-receipt__title,
.v2-drawer__title {
  margin: 0;
  color: var(--ink);
  font: 650 18px/1.25 var(--display);
  letter-spacing: -0.015em;
}
.v2-panel__ruler {
  margin: 14px var(--space-5) 0;
}
.v2-panel__body {
  padding: var(--space-5);
}

.v2-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  color: var(--ink);
  font-family: var(--sans);
}
.v2-field__label {
  color: var(--ink-72);
  font-size: var(--text-xs);
  font-weight: 600;
}
.v2-field__control,
.v2-caption__textarea,
.v2-caption__platform-input {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--space-3);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surf-0);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
textarea.v2-field__control,
.v2-caption__textarea,
.v2-caption__platform-input {
  resize: vertical;
}
.v2-field__control:hover:not(:disabled),
.v2-caption__textarea:hover:not(:disabled),
.v2-caption__platform-input:hover:not(:disabled) {
  border-color: var(--line-acc);
}
.v2-field__control::placeholder,
.v2-caption__textarea::placeholder {
  color: var(--ui-text-muted);
}
.v2-field__control.is-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.v2-field__hint,
.v2-field__error {
  color: var(--ink-55);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.v2-field__error,
.v2-field.has-error .v2-field__label {
  color: var(--danger);
}
.v2-field.has-error .v2-field__control {
  border-color: var(--danger);
}
.v2-field--toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.v2-field__toggle-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
}
.v2-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surf-3);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.v2-toggle[aria-checked="true"] {
  background: var(--accent);
}
.v2-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--ink-55);
  transition: left var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.v2-toggle[aria-checked="true"] .v2-toggle__knob {
  left: 18px;
  background: var(--ink-on-accent);
}
.v2-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.v2-meter {
  min-width: 0;
}
.v2-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.v2-meter__label {
  color: var(--ink-72);
  font: 600 var(--text-13)/1.35 var(--sans);
}
.v2-meter__value {
  color: var(--ink-55);
  font: 500 var(--text-13)/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.v2-meter__track {
  position: relative;
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surf-0);
}
.v2-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  transition: width var(--t-base) var(--ease);
}

.v2-tabs {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  min-width: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line-1);
  scrollbar-width: none;
}
.v2-tabs::-webkit-scrollbar { display: none; }
.v2-tabs__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--ink-55);
  font: 600 var(--text-13)/1.35 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.v2-tabs__tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity var(--t-quick) var(--ease), transform var(--t-base) var(--ease);
}
.v2-tabs__tab:hover:not(:disabled),
.v2-tabs__tab.is-active {
  color: var(--ink);
}
.v2-tabs__tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}
.v2-tabs__count {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--acc-16);
  color: var(--accent-text);
  font: 600 var(--text-13)/1 var(--mono);
}
.v2u-results__tabs > .v2-tabs__tab::after {
  transition: opacity var(--dur-std) var(--ease), transform var(--dur-std) var(--ease);
}
.v2u-results__tabs .v2-tabs__count {
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--ink-08);
  color: var(--ink-55);
  font: 600 var(--text-13)/18px var(--mono);
  text-align: center;
}
.v2u-results__tabs .v2-tabs__tab.is-active .v2-tabs__count {
  background: var(--acc-16);
  color: var(--accent-text);
}
.v2-tabs__tab:disabled {
  cursor: default;
}
.v2-tabs--segmented {
  gap: 2px;
  padding: var(--space-1);
  border: 1px solid var(--line-1);
  border-radius: 10px;
  background: var(--surf-0);
}
.v2-tabs--segmented .v2-tabs__tab {
  flex: 1 1 0;
  min-height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
}
.v2-tabs--segmented .v2-tabs__tab.is-active {
  background: var(--surf-3);
}
.v2-tabs--segmented .v2-tabs__tab::after {
  right: 10px;
  left: 10px;
}

.v2-receipt {
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-2);
}
.v2-receipt__header {
  padding: var(--space-4) var(--space-4) 10px;
}
.v2-receipt__eyebrow {
  display: block;
  margin-bottom: 7px;
}
.v2-receipt__title {
  font-size: var(--text-md);
  font-family: var(--sans);
}
.v2-receipt__rows {
  padding: 0 14px 10px;
}
.v2-receipt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 34px;
  padding: var(--space-2) 2px;
  border: 0;
  border-top: 1px solid var(--line-1);
  background: transparent;
  color: var(--ink-55);
  font: 500 var(--text-13)/1.4 var(--mono);
  text-align: left;
}
button.v2-receipt__row {
  cursor: pointer;
}
button.v2-receipt__row:hover .v2-receipt__value {
  color: var(--accent-text);
}
.v2-receipt__value {
  min-width: 0;
  color: var(--ink-88);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.v2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-6);
  color: var(--ink);
  text-align: center;
}
.v2-empty__reel {
  width: min(280px, 100%);
  height: 54px;
  margin-bottom: 22px;
}
.v2-empty__title {
  margin: 0;
  color: var(--ink);
  font: 650 24px/1.15 var(--display);
  letter-spacing: -0.02em;
}
.v2-empty__body {
  max-width: 42ch;
  margin: 10px 0 var(--space-5);
  color: var(--ink-55);
  font: 400 13.5px/1.55 var(--sans);
}

.v2-drawer-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}
.v2-drawer__scrim {
  position: absolute;
  inset: 0;
  /* leg-M: token-stepped — the dark value is this rule's old --bg mix
     verbatim; light swaps to the shared dark veil (a --bg mix flips to a
     white wash on paper, hiding the page instead of dimming it). */
  background: var(--drawer-scrim);
  animation: v2FadeIn var(--t-fast) var(--ease) both;
}
.v2-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  width: min(420px, 96vw);
  overflow: hidden;
  border-left: 1px solid var(--line-2);
  background: var(--glass-sheet);
  color: var(--ink);
  box-shadow: var(--floor-lift);
  backdrop-filter: blur(18px);
  animation: v2DrawerIn var(--t-fast) var(--ease) both;
}
.v2-drawer__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px var(--space-4);
  border-bottom: 1px solid var(--line-1);
}
.v2-drawer__heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}
.v2-drawer__title {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.v2-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px;
  overflow-y: auto;
}
.v2-drawer__footer {
  flex: 0 0 auto;
  padding: var(--space-4) 22px 22px;
  border-top: 1px solid var(--line-1);
}

.v2-caption {
  min-width: 0;
  color: var(--ink);
  font-family: var(--sans);
}
.v2-caption__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 8px;
}
.v2-caption__label {
  color: var(--ink-72);
  font-size: var(--text-xs);
  font-weight: 600;
}
.v2-caption__state {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
.v2-caption__rank,
.v2-caption__counter,
.v2-caption__platform-count {
  color: var(--ui-text-muted);
  font: 500 var(--text-13)/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.v2-caption__textarea {
  min-height: 92px;
  font-size: var(--text-sm);
}
.v2-caption__counter {
  margin-top: 5px;
  text-align: right;
}
.v2-caption__counter.is-over,
.v2-caption__platform-count.is-over {
  color: var(--danger);
}
.v2-caption__confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px var(--space-3);
  border: 1px solid var(--line-acc);
  border-radius: 10px;
  background: var(--acc-08);
  color: var(--ink-72);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.v2-caption__confirm > span:first-child {
  flex: 1 1 auto;
}
.v2-caption__confirm-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}
.v2-caption__platforms {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-1);
}
.v2-caption__expander,
.v2-caption__expander-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font: 600 var(--text-13)/1.35 var(--sans);
  text-align: left;
}
.v2-caption__expander {
  cursor: pointer;
}
.v2-caption__expander:hover {
  color: var(--ink);
}
.v2-caption__platform-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.v2-caption__platform {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2-caption__platform-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--ink-72);
  font-size: var(--text-xs);
  font-weight: 600;
}
.v2-caption__platform-input {
  min-height: 64px;
  font-size: var(--text-sm);
}

@keyframes v2Spin {
  to { transform: rotate(360deg); }
}
@keyframes v2SpineFlow {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50% { opacity: 1; transform: scaleY(1); }
}
@keyframes v2FadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes v2DrawerIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .v2-panel__header,
  .v2-panel__body {
    padding-right: 16px;
    padding-left: 16px;
  }
  .v2-panel__ruler {
    margin-right: 16px;
    margin-left: 16px;
  }
  .v2-caption__head,
  .v2-caption__confirm {
    align-items: stretch;
    flex-direction: column;
  }
  .v2-caption__state,
  .v2-caption__confirm-actions {
    justify-content: space-between;
  }
}

@media (pointer: coarse) {
  button.v2-chip::after,
  .v2-toggle::after,
  .v2-caption__expander::after {
    position: absolute;
    min-width: 44px;
    min-height: 44px;
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }
  .v2-caption__expander {
    position: relative;
    min-height: 44px;
  }
  .v2-tabs--segmented .v2-tabs__tab {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-reel__bar,
  .v2-btn,
  .v2-btn__busy,
  .v2-chip,
  .v2-field__control,
  .v2-toggle,
  .v2-toggle__knob,
  .v2-meter__fill,
  .v2-tabs__tab,
  .v2-tabs__tab::after,
  .v2-drawer,
  .v2-drawer__scrim {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .v2-panel,
  .v2-receipt,
  .v2-drawer,
  .v2-caption__confirm,
  .v2-meter__track {
    border: 1px solid CanvasText;
  }
  .v2-reel__bar,
  .v2-meter__fill {
    background: CanvasText;
  }
  .v2-reel__bar.is-live,
  .v2-tabs__tab.is-active::after {
    background: Highlight;
  }
}

/* ===== V2 U2 ===== */
.v2-topbar {
  position: absolute;
  z-index: var(--z-topbar);
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(112px, 1fr) auto minmax(112px, 1fr);
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(var(--space-5), env(safe-area-inset-right, 0px)) 0 max(var(--space-5), env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line-1);
  background: var(--glass-sheet);
  color: var(--ink);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: var(--sans);
}
.v2-topbar button {
  font-family: inherit;
}
.v2-topbar__home,
.v2-topbar__place,
.v2-topbar__usage,
.v2-avatar__trigger,
.v2-avatar__menu > button {
  min-height: 44px;
  border: 0;
  cursor: pointer;
}
.v2-topbar__home,
.v2-topbar__place {
  position: relative;
}
.v2-topbar__home {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 10px;
  min-width: 44px;
  padding: 0 var(--space-1);
  background: transparent;
  color: var(--ink);
}
.v2-topbar__home::after,
.v2-topbar__place::after {
  position: absolute;
  right: 8px;
  bottom: 3px;
  left: 8px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: transparent;
  content: "";
}
.v2-topbar__home.is-active::after,
.v2-topbar__place.is-active::after {
  background: var(--accent);
}
.v2-topbar__home:hover,
.v2-topbar__home:focus-visible,
.v2-topbar__place:hover,
.v2-topbar__place:focus-visible {
  color: var(--ink);
}
.v2-topbar__places {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.v2-topbar__place {
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-72);
  font-size: var(--text-sm);
  font-weight: 650;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
/* the tab underline slides in from the center on hover/active — the click
   affordance the flat label lacked. */
.v2-topbar__place::after {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t-base) var(--ease), background var(--t-fast) var(--ease);
}
.v2-topbar__place:hover {
  color: var(--ink);
  background: var(--ink-06);
}
.v2-topbar__place:hover::after,
.v2-topbar__place:focus-visible::after {
  transform: scaleX(1);
  background: var(--acc-40);
}
.v2-topbar__place.is-active {
  color: var(--accent-text);
  background: var(--acc-08);
}
.v2-topbar__place.is-active::after {
  transform: scaleX(1);
  background: var(--accent);
}
.v2-topbar__account {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 10px;
}
.v2-topbar__usage {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 13px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  background: var(--card-sheen), var(--surf-2);
  color: var(--ink-72);
  font: 600 var(--text-13)/1 var(--mono);
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.v2-topbar__usage:hover {
  border-color: var(--line-acc);
  background: var(--card-sheen), var(--surf-3);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--acc-08);
}
.v2-topbar__usage-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 7px var(--acc-40);
}
/* the Unlimited / Ultra badge gets a premium accent-lit treatment: an accent
   rim over a faint accent wash, with a soft glow on hover. */
.v2-topbar__usage.is-unlimited {
  border-color: var(--acc-40);
  background: var(--card-sheen), linear-gradient(180deg, var(--acc-08), var(--surf-2) 72%);
  color: var(--accent-text);
}
.v2-topbar__usage.is-unlimited:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--acc-16), var(--glow-acc);
}
.v2-avatar {
  position: relative;
}
.v2-avatar__trigger {
  display: grid;
  min-width: 44px;
  padding: 2px;
  place-items: center;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  background: transparent;
}
.v2-avatar__trigger:hover,
.v2-avatar__trigger[aria-expanded="true"] {
  border-color: var(--line-acc);
}
.v2-avatar__menu {
  position: absolute;
  z-index: var(--z-floating);
  top: 50px;
  right: 0;
  width: min(264px, calc(100vw - 24px));
  overflow: hidden;
  padding: var(--space-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: v2U2Rise var(--t-quick) var(--ease) both;
}
.v2-avatar__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px var(--space-2) 10px;
}
.v2-avatar__identity-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.v2-avatar__identity-copy strong,
.v2-avatar__identity-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-avatar__identity-copy strong {
  color: var(--ink);
  font-size: var(--text-sm);
}
.v2-avatar__identity-copy span {
  color: var(--ink-55);
  font: var(--text-13)/1.35 var(--mono);
}
.v2-avatar__rule {
  height: 1px;
  margin: var(--space-1);
  background: var(--line-1);
}
.v2-avatar__menu > button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-72);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
}
.v2-avatar__menu > button:hover {
  background: var(--surf-3);
  color: var(--ink);
}
.v2-topbar button:focus-visible,
.v2-avatar__menu > button:focus-visible,
.v2-transport button:focus-visible,
.v2-toast button:focus-visible,
.v2-toast.is-plain:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* design-r4 leg-B (canvas dc 1967-1978): the transport is a glass pill of step
   buttons joined by short link segments (accent once reached). The old full-
   width filament crossed the step labels and read as a strike-through; done
   steps now carry the accent check disc with a plain dim label. */
.v2-transport {
  position: absolute;
  z-index: var(--z-transport);
  bottom: calc(var(--transport-offset) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100vw - 20px);
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
  transform: translateX(-50%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: opacity var(--t-quick) var(--ease);
}
/* UI slice 2a.1: the pill's band belongs to the pill, not to the scroll. The
   three screen columns that mount the transport pill end their scrollport above
   it, so a floating nav can never own a visible control's hit point. They keep
   their --nav-h bottom padding; it now reserves slack at the end of the scroll
   rather than the band, which padding could never reserve. The `html` prefix is
   specificity and is load-bearing: each column declares its own `inset: 0`
   later in this sheet or in home-configure.css, which the bundle concatenates
   after it, so an equal-specificity `bottom` would lose on source order. */
html .v2-u3a-home,
html .v2u-studio,
html .v2-u3a-choose,
html .hc-flow.v2-u3a-choose {
  bottom: var(--transport-band);
}
html .hc-flow.v2-u3a-choose {
  min-height: auto;
}
/* The 2a shell replaces the pill with its own rail and phone bar: app.jsx
   renders <SceneNav> only when the shell flag is off, and marks the app root
   `v2-app--shell` only when it is on. The band is therefore reserved for a pill
   that is not there, and every column ended 90px above its stage with nothing
   in the strip (measured at 390x844 and 1440x900, verify_phone_pill_
   clearance.cjs shell-on cases). Collapsing the token on the shell marker makes
   the band follow the pill instead of the screen, so the rule above needs no
   second form and ui-shell.css stays the shell's own sheet. */
.v2-app--shell {
  --transport-band: 0px;
}
.v2-transport.is-ghost {
  opacity: 0.18;
}
.v2-transport:hover,
.v2-transport:focus-within {
  opacity: 1;
}
.v2-transport__link {
  flex: 0 0 auto;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--line-1);
  transition: background var(--t-fast) var(--ease);
}
.v2-transport__link.is-reached {
  background: var(--accent);
}
.v2-transport__step {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-72);
  cursor: pointer;
  font: 600 13px/1 var(--sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.v2-transport__step:hover {
  background: var(--surf-3);
  color: var(--ink);
}
.v2-transport__step[data-ready="false"] {
  color: var(--ui-text-muted);
}
.v2-transport__step.is-active {
  padding: 0 16px;
  background: var(--acc-16);
  color: var(--ink);
}
.v2-transport__step.is-done {
  color: var(--ink-72);
}
.v2-transport__number {
  display: grid;
  width: 23px;
  height: 23px;
  box-sizing: border-box;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surf-3);
  color: var(--ink-55);
  place-items: center;
  font: 700 var(--text-13)/1 var(--mono);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.v2-transport__step.is-done .v2-transport__number {
  border: 0;
  background: var(--accent);
  color: var(--ink-on-accent);
}
.v2-transport__step.is-active .v2-transport__number {
  border: 0;
  background: var(--accent);
  color: var(--ink-on-accent);
  box-shadow: 0 0 0 4px var(--acc-16);
}

.v2-toast {
  border-color: var(--line-2);
  background: var(--glass-sheet);
}
.v2-toast--success {
  border-color: var(--ink);
}
.v2-toast.is-plain:hover {
  border-color: var(--line-acc);
}
.v2-toast__action:hover,
.v2-toast__dismiss:hover {
  border-color: var(--line-acc);
}

/* The legacy first-run lock used a green completion mark. Preserve its flag-off
   bytes, but re-ink it to covenant-neutral done whenever the v2 shell owns App. */
.v2-app .first-run-checklist__steps .is-complete .first-run-checklist__mark {
  background: var(--ink-08);
  color: var(--ink);
}

@keyframes v2U2Rise {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .v2-topbar {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-1);
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
  }
  .v2-topbar__wordmark,
  .v2-topbar__usage {
    display: none;
  }
  .v2-topbar__places {
    justify-content: flex-end;
  }
  .v2-topbar__place {
    padding-right: 8px;
    padding-left: 8px;
    font-size: var(--text-xs);
  }
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .v2-transport__step {
    justify-content: center;
    min-width: 44px;
    padding-right: 8px;
    padding-left: 8px;
  }
  .v2-transport__label {
    display: none;
  }
  .v2-transport__link {
    width: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-avatar__menu,
  .v2-transport,
  .v2-transport__link,
  .v2-transport__step,
  .v2-transport__number {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .v2-topbar,
  .v2-topbar__usage,
  .v2-avatar__trigger,
  .v2-avatar__menu,
  .v2-transport,
  .v2-transport__number,
  .v2-toast {
    border: 1px solid CanvasText;
  }
  .v2-topbar__home.is-active::after,
  .v2-topbar__place.is-active::after,
  .v2-transport__step.is-active .v2-transport__number {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

/* ===== V2 U6 ===== */
/* design-r4 leg-C: the Library screen recomposed to the design canvas (§4.6) —
   flat 29px display title, one toolbar row (bare search + status pills + the
   Dense toggle on the same pill grammar), episode cards on the card-sheen /
   hover-lift grammar with inline 34px icon actions and a quiet bordered status
   chip, and the earlier-cuts shelf. Tokens only; zero raw colors; zero theme
   branches. The outcomes rail survives as a structural hook only (the canvas
   draws none): .v2-lib-row__outcomes is collapsed but its slot stays in DOM. */
.v2-lib {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding-top: calc(64px + env(safe-area-inset-top, 0px));
  background: var(--bg);
  color: var(--ink);
}
.v2-lib__inner {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: 38px var(--space-6) calc(120px + env(safe-area-inset-bottom, 0px));
}
.v2-lib__header h1 {
  margin: 0 0 18px;
  color: var(--ink);
  font: 700 29px/1.1 var(--display);
  letter-spacing: -0.025em;
}
.v2-lib-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}
.v2-lib-search {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 180px;
  /* handoff-3 (canvas 1196): the episode search sits at 36px, not 44 */
  height: 36px;
  padding: 0 14px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-2);
  color: var(--ink);
}
.v2-lib-search:focus-within {
  border-color: var(--line-acc);
  box-shadow: 0 0 0 2px var(--acc-16);
}
.v2-lib-search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 500 14px/1 var(--sans);
}
.v2-lib-search input::placeholder { color: var(--ui-text-muted); }
.v2-lib-filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
/* canvas filter pills: quiet surf-2 chips; the active one reads accent-washed */
.v2-lib-filters .v2-chip {
  height: 30px;
  padding: 0 13px;
  border-radius: var(--radius-chip);
  background: var(--surf-2);
  color: var(--ink-55);
  font: 600 13px/1 var(--sans);
}
.v2-lib-filters .v2-chip.is-active {
  border-color: var(--line-acc);
  background: var(--acc-16);
  color: var(--ink);
}
/* the Dense toggle rides the same pill grammar (aria-pressed drives active) */
.v2-lib-toolbar > .v2-btn {
  height: 30px;
  padding: 0 12px;
  border-color: var(--line-1);
  border-radius: var(--radius-chip);
  background: var(--surf-2);
  color: var(--ink-55);
  font: 600 13px/1 var(--sans);
}
.v2-lib-toolbar > .v2-btn[aria-pressed="true"] {
  border-color: var(--line-acc);
  background: var(--acc-16);
  color: var(--ink);
}
.v2-lib-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-lib-row {
  overflow: hidden;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
  transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease);
}
.v2-lib-row:hover,
.v2-lib-row:focus-within {
  transform: translateY(-4px);
  border-color: var(--line-acc);
  box-shadow: var(--floor-lift);
}
.v2-lib-row__main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
}
.v2-lib-row__thumb {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 96px;
  height: 48px;
  padding: var(--space-2);
  overflow: hidden;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-0);
}
.v2-lib-row__thumb .v2-reel { width: 100%; height: 100%; }
.v2-lib-row__story { flex: 1; min-width: 0; }
.v2-lib-row__story h2 {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: 600 15px/1.25 var(--sans);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-lib-row__rename {
  width: min(360px, 100%);
  height: 28px;
  padding: 0 9px;
  border: 1.5px solid var(--line-acc);
  border-radius: 7px;
  background: var(--surf-0);
  color: var(--ink);
  font: 600 15px/1 var(--sans);
}
.v2-lib-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  margin-top: 4px;
  color: var(--ink-55);
  font: 500 var(--text-13)/1.25 var(--mono);
}
/* K7 (ingest truth): the failed card's user-readable reason, under the meta
   line. Muted body text, wraps freely; never a status color of its own (the
   Failed chip already carries the tone). */
.v2-lib-row__reason {
  margin: 4px 0 0;
  min-width: 0;
  color: var(--ink-55);
  font: 400 var(--text-13)/1.45 var(--sans);
  overflow-wrap: anywhere;
}
.v2-lib-formats {
  color: var(--ink-55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-lib-posting {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-chip);
  background: var(--surf-3);
  color: var(--ink-72);
  cursor: pointer;
  font: 600 var(--text-13)/1 var(--mono);
}
.v2-lib-posting:hover { border-color: var(--line-2); color: var(--ink); }
/* structural hook only — the canvas draws no outcomes rail (verify lock keeps
   the slot in DOM; see [data-outcomes-slot]) */
.v2-lib-row__outcomes { display: none; }
/* the canvas status chip: quiet border + text in the status ink, no fill */
.v2-lib-status.v2-chip {
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  gap: 6px;
  border-radius: var(--radius-chip);
  background: transparent;
  font: 600 var(--text-13)/1 var(--sans);
}
.v2-lib-status.v2-chip.v2-tone--done { border-color: var(--ink); background: transparent; color: var(--ink); }
.v2-lib-status.v2-chip.v2-tone--live { border-color: var(--accent-text); background: transparent; color: var(--accent-text); }
.v2-lib-status.v2-chip.v2-tone--attention { border-color: var(--amber); background: transparent; color: var(--amber); }
.v2-lib-status.v2-chip.v2-tone--neutral { border-color: var(--ink-55); background: transparent; color: var(--ink-55); }
.v2-lib-status.v2-chip .v2-chip__dot { width: 6px; height: 6px; }
.v2-lib-status.v2-chip.v2-tone--live .v2-chip__dot { animation: pulseRing calc(15 * var(--t-micro)) var(--ease) infinite; }
/* canvas 34px icon actions (title/aria-label carry the verbs) */
.v2-lib-row__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
}
.v2-lib-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid var(--line-1);
  border-radius: 9px;
  background: var(--surf-3);
  color: var(--ink-72);
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.v2-lib-act svg { width: 15px; height: 15px; }
.v2-lib-act:hover:not(:disabled) {
  border-color: var(--line-2);
  color: var(--ink);
  transform: translateY(-1px);
}
.v2-lib-act--danger { color: var(--ink-55); }
.v2-lib-act--danger:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
}
.v2-lib-act:disabled,
.v2-lib-act[aria-busy="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.v2-lib-row.is-dense .v2-lib-row__main {
  gap: var(--space-3);
  min-height: 58px;
  padding: var(--space-2) var(--space-3);
}
.v2-lib-row.is-dense .v2-lib-row__thumb {
  width: 68px;
  height: 34px;
  padding: 5px;
}
.v2-lib-row.is-dense .v2-lib-row__meta { margin-top: 2px; }
/* earlier-cuts shelf */
.v2-lib-cuts { border-top: 1.5px solid var(--line-1); }
.v2-lib-cuts__toggle {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--ink-55);
  cursor: pointer;
  font: 500 var(--text-13)/1 var(--mono);
  text-align: left;
}
.v2-lib-cuts__toggle:hover { background: var(--surf-3); color: var(--ink); }
.v2-lib-cuts__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--space-4) var(--space-3);
}
.v2-lib-cut {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--line-1);
  border-radius: 9px;
  background: var(--surf-0);
}
.v2-lib-cut__reel {
  flex: 0 0 auto;
  width: 54px;
  height: 28px;
}
.v2-lib-cut__copy { flex: 1; min-width: 0; }
.v2-lib-cut__copy strong,
.v2-lib-cut__copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-lib-cut__copy strong { color: var(--ink-72); font: 500 13.5px/1.3 var(--sans); }
.v2-lib-cut__copy span { margin-top: 2px; color: var(--ui-text-muted); font: 500 var(--text-13)/1 var(--mono); }
.v2-lib-cut .v2-btn {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 11px;
  border-color: var(--line-2);
  border-radius: 7px;
  background: var(--surf-3);
  color: var(--ink-72);
  font-size: var(--text-13);
}
.v2-lib-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 180px;
  color: var(--ink-55);
  font-size: var(--text-sm);
  text-align: center;
}
.v2-lib-state .v2-reel-bar { width: 130px; }
.v2-lib-state[role="alert"] strong { color: var(--danger); }
.v2-lib-delete-layer { position: fixed; inset: 0; z-index: var(--z-modal); }
.v2-lib-delete__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--scrim);
  cursor: default;
  animation: v2FadeIn var(--t-fast) var(--ease) both;
}
.v2-lib-delete {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(420px, 94vw);
  padding: var(--space-6);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
  color: var(--ink);
  transform: translate(-50%, -50%);
  animation: v2LibPop var(--t-fast) var(--ease) both;
  backdrop-filter: blur(18px);
}
.v2-lib-delete h2 { margin: 0 0 8px; font: 700 19.5px/1.2 var(--display); }
.v2-lib-delete p { margin: 0 0 18px; color: var(--ink-72); font-size: var(--text-base); line-height: 1.5; }
.v2-lib-delete__actions { display: flex; justify-content: flex-end; gap: 10px; }
/* R4-H P4: the dialog buttons mount as size=44 (v2-library.jsx); the old 38px
   override contradicted the JSX intent and the 44px touch floor -- dropped. */
@keyframes v2LibPop {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* breakpoint: tablet */
@media (max-width: 820px) {
  .v2-lib__inner { padding-right: 20px; padding-left: 20px; }
  .v2-lib-row__main { flex-wrap: wrap; }
  .v2-lib-row__actions { width: 100%; justify-content: flex-end; }
}
/* breakpoint: compact */
@media (max-width: 640px) {
  .v2-lib__inner { padding: 26px 14px calc(100px + env(safe-area-inset-bottom, 0px)); }
  .v2-lib-toolbar .v2-lib-search { flex-basis: 100%; }
  .v2-lib-row__thumb { width: 78px; }
  .v2-lib-cut__reel { display: none; }
  .v2-lib-delete__actions { align-items: stretch; flex-direction: column-reverse; }
  .v2-lib-delete__actions .v2-btn { width: 100%; }
}
/* R4-H F4: coarse-pointer hit floors for the sub-44px library controls (34px
   icon actions, 22px posting chip, 28px cut Open, 30px toolbar pills). House
   centered-overlay grammar (cf button.v2-chip::after): a >=44px pseudo joins
   hit testing without growing the control visually. */
@media (pointer: coarse) {
  .v2-lib-act,
  .v2-lib-posting { position: relative; }
  .v2-lib-act::after,
  .v2-lib-posting::after,
  .v2-lib-cut .v2-btn::after,
  .v2-lib-toolbar > .v2-btn::after {
    position: absolute;
    min-width: 44px;
    min-height: 44px;
    content: "";
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-lib-row,
  .v2-lib-act,
  .v2-lib-delete,
  .v2-lib-delete__scrim { animation: none !important; transition: none !important; transform: none !important; }
  .v2-lib-row:hover,
  .v2-lib-row:focus-within { transform: none; }
  .v2-lib-status.v2-chip .v2-chip__dot { animation: none !important; }
}
@media (forced-colors: active) {
  .v2-lib-row,
  .v2-lib-search,
  .v2-lib-row__thumb,
  .v2-lib-act,
  .v2-lib-cut,
  .v2-lib-delete { border: 1px solid CanvasText; }
}

/* ===== V2 U8: retained auth styles ===== */
.v2-auth {
  color: var(--ink);
  font-family: var(--sans);
}
.v2-auth * {
  box-sizing: border-box;
}
.v2-auth button,
.v2-auth input {
  font: inherit;
}
.v2-auth button:focus-visible,
.v2-auth input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.v2-auth__google:focus-visible {
  outline-offset: -5px;
}

.v2-auth__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: var(--space-2);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

/* ---- auth (dc 1439-1458): centered rim-lit card over the accent bloom ---- */
.v2-auth {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  overflow: auto;
  background: var(--bg);
}
.v2-auth__stage {
  position: fixed;
  inset: 15% 4% auto;
  height: 68%;
  /* leg-M: token-stepped (0.14 dark verbatim; halved on paper — black
     is-done reel bars at .14 read as a wall of grey, not a texture) */
  opacity: var(--stage-art-op);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink), transparent);
  mask-image: linear-gradient(to bottom, transparent, var(--ink), transparent);
}
.v2-auth__stage .v2-reel { height: 100%; }
.v2-auth__header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-content-control);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: var(--safe-top) max(28px, env(safe-area-inset-right, 0px)) 0 max(28px, env(safe-area-inset-left, 0px));
}
.v2-auth__back,
.v2-auth__email-door,
.v2-auth__helper button,
.v2-auth__legal button {
  min-height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--accent-text);
  cursor: pointer;
}

/* handoff-3 (canvas 1444): the back control is a small ← square in the
   card's top-left corner, not a text link. */
.v2-auth__back.is-icon {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: var(--z-content-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-3);
  color: var(--ink-55);
  font-size: 14px;
  line-height: 1;
}
.v2-auth__back.is-icon:hover { color: var(--ink); border-color: var(--line-2); }
/* handoff-3 (canvas 1454-1456): the sign-in/create-account switch is a quiet
   line of text with one accent link. */
.v2-auth__switch {
  margin-top: 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-55);
}
.v2-auth__switch button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent-text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.v2-auth__main {
  position: relative;
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: calc(88px + var(--safe-top)) var(--space-6) calc(92px + var(--safe-bottom));
}
.v2-auth__main::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 640px;
  height: 640px;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 55% at 50% 50%, var(--acc-40) 0%, var(--acc-16) 42%, transparent 72%);
  filter: blur(80px);
  opacity: 0.7;
  transform: translate(-50%, -50%);
}
.v2-auth__card {
  position: relative;
  z-index: var(--z-content);
  width: min(400px, 94vw);
  padding: 32px 28px 24px;
  overflow: hidden;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-xl);
  background: var(--card-sheen), var(--surf-2);
  box-shadow: var(--floor-lift);
  text-align: center;
  animation: v2U8Rise var(--t-slow) var(--ease) both;
}
.v2-auth__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from 220deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--hero-white) 65%, transparent) 34deg, var(--accent) 92deg, transparent 150deg, transparent 360deg);
  mask: linear-gradient(var(--hero-white) 0 0) content-box, linear-gradient(var(--hero-white) 0 0);
  -webkit-mask: linear-gradient(var(--hero-white) 0 0) content-box, linear-gradient(var(--hero-white) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--rim-op); /* leg-M: dc thins the rim-light conic in light (dc L145) */
}
.v2-auth__mark {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.v2-auth h1 {
  margin: 0 0 22px;
  color: var(--ink);
  font: 700 26px/1.2 var(--display);
  letter-spacing: -0.02em;
}
.v2-auth__google,
.v2-auth__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  gap: 9px;
  font-size: var(--text-md);
  font-weight: 650;
  cursor: pointer;
}
.v2-auth__google {
  border: 0;
  border-radius: 0;
  background: var(--btn-primary-bg);
  color: var(--ink-on-accent);
  box-shadow: var(--glow-acc);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
}
.v2-auth__google-icon { display: inline-flex; }
.v2-auth__email-door {
  margin-top: 12px;
  color: var(--ink-55);
  font-size: var(--text-sm);
}
.v2-auth__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
}
.v2-auth__divider span {
  flex: 1;
  height: 1px;
  background: var(--line-1);
}
.v2-auth__divider em {
  color: var(--ink-55);
  font: 600 var(--text-13)/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v2-auth__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-m);
  background: var(--surf-0);
}
.v2-auth__modes button {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--ink-55);
  font-size: var(--text-sm);
  cursor: pointer;
}
.v2-auth__modes button.is-active {
  background: var(--acc-16);
  color: var(--accent-text);
  font-weight: 700;
}
.v2-auth__form {
  margin-top: 12px;
  text-align: left;
}
.v2-auth__form label { display: block; margin-top: 12px; }
.v2-auth__form label > span {
  display: block;
  margin: 0 0 6px;
  color: var(--ink-55);
  font-size: var(--text-13);
}
.v2-auth__form input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  background: var(--surf-0);
  box-shadow: inset 0 1px 4px color-mix(in srgb, black 35%, transparent);
  color: var(--ink);
  font-size: 17.5px;
}
.v2-auth__submit {
  margin-top: 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 11px;
  background: var(--surf-3);
  color: var(--ink);
}
.v2-auth__submit:hover { border-color: var(--line-acc); }
.v2-auth__google:disabled,
.v2-auth__submit:disabled { cursor: default; opacity: 0.72; }
.v2-auth__message {
  margin: 10px 2px 0;
  font-size: var(--text-xs);
  line-height: 1.45;
  text-align: center;
}
.v2-auth__message.is-error { color: var(--danger); }
.v2-auth__message.is-notice { color: var(--accent-text); }
.v2-auth__helper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--ink-55);
  font-size: var(--text-xs);
  text-align: center;
}
.v2-auth__helper button { font-size: var(--text-xs); }
.v2-auth__card-reel {
  height: 16px;
  margin-top: 22px;
  opacity: 0.5;
}
.v2-auth__card-reel .v2-reel { height: 100%; }
.v2-auth__legal {
  position: fixed;
  inset: auto 16px calc(12px + var(--safe-bottom));
  z-index: var(--z-content-control);
  margin: 0;
  color: var(--ink-55);
  font-size: var(--text-xs);
  text-align: center;
}
.v2-auth__legal button {
  min-width: 44px;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.v2-auth__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink-24);
  border-top-color: var(--accent-text);
  border-radius: var(--radius-pill);
  animation: v2Spin var(--t-base) linear infinite;
}
.v2-auth__google .v2-auth__spinner { border-top-color: var(--ink-on-accent); }

@keyframes v2U8Rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes v2U8Breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
/* R4-H P2: compositor-only sheen travel. The ::after is 26% of the CTA wide
   and rests at left:-30%; the old left:-30% -> 114% sweep is 144% of the CTA,
   which is 554% of the ::after's own box -- same journey, no layout work.
   skewX rides in both frames because the animation owns `transform`. */
/* breakpoint: compact */
@media (max-width: 640px) {
  .v2-auth__header { padding-right: 16px; padding-left: 16px; }
  /* leg-FIN (rev-3 M-F2): `.v2-auth button { font: inherit }` (0,1,1) was beating
     the bare class here (0,1,0), so the full label rendered at 16px NEXT TO the
     ::after "Back" — the "Back to homeBack" mash. The parent bump wins. */
  .v2-auth .v2-auth__back:not(.is-icon) { font-size: 0; }
  .v2-auth__back:not(.is-icon)::after { content: "Back"; font-size: var(--text-xs); }
  /* handoff-3: the ← icon keeps its glyph on mobile */
  .v2-auth .v2-auth__back.is-icon { font-size: 14px; }
  .v2-auth__main { padding-right: 14px; padding-left: 14px; }
  .v2-auth__card { padding: 26px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-auth__card,
  .v2-auth__spinner {
    scroll-behavior: auto;
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .v2-auth__card,
  .v2-auth__google,
  .v2-auth__submit,
  .v2-auth__form input {
    border: 1px solid CanvasText;
  }
}

/* ===== V2 U7 ===== */
.v2-u7-account {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding-top: var(--bar-h);
  color: var(--ink);
  font-family: var(--sans);
}

.v2-u7-account__inner {
  /* design-r4 leg-E (dc 1247): the canvas Account column is 920px of content
     inside 24px side padding, 38px above and 100px below. */
  width: min(100%, 968px);
  margin: 0 auto;
  padding: 38px var(--space-6) calc(100px + var(--safe-bottom));
}

.v2-u7-account__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  /* dc 1249: 22px between the identity line and the tab grid */
  margin-bottom: 22px;
  animation: v2U7Rise var(--t-base) var(--ease) both;
}

.v2-u7-account__header h1,
.v2-u7-help h2,
.v2-u7-delete-dialog h2,
.v2-u7-danger-zone h2 {
  margin: var(--space-1) 0 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* dc 1248: fixed 29px display title, 4px above the mono 13px identity line */
.v2-u7-account__header h1 { font-size: var(--text-3xl); }
.v2-u7-account__header p {
  overflow: hidden;
  margin: var(--space-1) 0 0;
  color: var(--ink-55);
  font-family: var(--mono);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-u7-eyebrow {
  display: block;
  color: var(--ink-55);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.v2-u7-account__layout {
  display: grid;
  /* dc 1250: 200px rail + fluid panel, 24px apart */
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* dc 1251: the tab rail is a sheened surf-2 card behind a 2px line-2 frame,
   8px inner padding, no floor shadow. */
.v2-u7-account__tabs {
  position: sticky;
  top: calc(var(--bar-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 2px solid var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--card-sheen), var(--surf-2);
}

/* dc 2823: left-aligned quiet rows; the active tab reads as a surf-3 plate
   carrying a 2px accent spine on its left edge. */
.v2-u7-account__tabs button {
  min-height: 44px;
  padding: 11px 14px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--ink-55);
  font: 500 var(--text-base)/1 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.v2-u7-account__tabs button:hover { color: var(--ink); background: var(--surf-3); }
.v2-u7-account__tabs button.is-active {
  border-left-color: var(--accent);
  background: var(--surf-3);
  color: var(--ink);
  font-weight: 600;
}

.v2-u7-account__panel {
  min-width: 0;
  animation: v2U7Panel var(--t-base) var(--ease) both;
}

.v2-u7-account__panel:focus { outline: none; }
.v2-u7-account .v2-btn--primary,
.v2-u7-help .v2-btn--primary {
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--ink-on-accent);
}
/* dc 2871-2873: the lit toggle is a bordered accent pill with a soft acc-60
   halo (the at-rest surf-3/line-acc state lives in the R4-E block). */
.v2-u7-account .v2-toggle[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 10px -2px var(--acc-60);
}
.v2-u7-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.v2-u7-copy { margin: 0; color: var(--ink-72); font-size: var(--text-m); line-height: 1.6; }
.v2-u7-meta { margin: var(--space-3) 0 0; color: var(--ink-55); font-size: var(--text-s); line-height: 1.55; }
.v2-u7-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.v2-u7-actions--end { justify-content: flex-end; }

.v2-u7-identity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.v2-u7-identity img,
.v2-u7-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.v2-u7-avatar {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top left, var(--acc-16), var(--surf-3));
  color: var(--ink-88);
  font-weight: 700;
}

.v2-u7-identity__copy { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.v2-u7-identity__copy strong,
.v2-u7-identity__copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-u7-identity__copy strong { color: var(--ink); font-size: var(--text-xl); }
.v2-u7-identity__copy span { color: var(--ink-72); font-size: var(--text-m); }
.v2-u7-identity__copy small { color: var(--ink-55); font-size: var(--text-xs); }

.v2-u7-inline-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-1);
}

.v2-u7-redeem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; }
.v2-u7-redeem .v2-u7-status { grid-column: 1 / -1; }

.v2-u7-plan-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.v2-u7-plan-summary p { margin: 0; color: var(--ink-72); font-size: var(--text-m); }
/* dc 1265: tier cards sit 14px apart; the card sheen now lives on the shared
   .v2-u7-account .v2-panel skin (R4-E block), so the old ::after overlay is gone. */
.v2-u7-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v2-u7-tier-grid .v2-panel__body { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
/* dc 1272: the display-voice price figure — 33px/700, tight tracking, with the
   quiet 13px suffix on its baseline. */
.v2-u7-price { display: flex; align-items: baseline; gap: var(--space-1); margin: 0 0 2px; color: var(--ink); }
.v2-u7-price strong { font-family: var(--display); font-size: 33px; font-weight: 700; letter-spacing: -0.02em; }
.v2-u7-price span { color: var(--ink-55); font-size: var(--text-sm); font-weight: 600; }

.v2-u7-unlimited { display: flex; align-items: baseline; gap: var(--space-3); }
.v2-u7-unlimited strong { color: var(--ink); font: 700 30px/1 var(--mono); }
.v2-u7-unlimited span { color: var(--ink-72); font-size: var(--text-m); }

.v2-u7-status,
.v2-u7-error-card,
.v2-u7-success {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  background: var(--surf-2);
  color: var(--ink-72);
  font-size: var(--text-s);
  line-height: 1.5;
}
.v2-u7-status--error,
.v2-u7-error-card { border-color: var(--danger-40); background: var(--danger-16); color: var(--ink); }
.v2-u7-status--done,
.v2-u7-success { border-color: var(--line-2); background: var(--ink-04); color: var(--ink); }

/* Existing honesty surfaces, skinned only after /api/config confirms ui_v2. */
html.v2-ui div[role="status"][aria-live="polite"][style*="z-index: 101"] {
  min-height: 44px;
  padding: var(--space-2) var(--space-4) !important;
  border-color: var(--amber-40) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--glass-bar) !important;
  box-shadow: var(--floor) !important;
  color: var(--ink) !important;
}

html.v2-ui #root > div[style*="position: fixed"][style*="justify-content: center"][style*="text-align: center"] {
  isolation: isolate;
  gap: var(--space-3) !important;
  background: var(--bg) !important;
}
html.v2-ui #root > div[style*="position: fixed"][style*="justify-content: center"][style*="text-align: center"]::before {
  position: absolute;
  z-index: var(--z-underlay);
  width: min(calc(100% - var(--space-6)), 460px);
  height: 270px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
  content: "";
}
html.v2-ui #root > div[style*="position: fixed"][style*="justify-content: center"][style*="text-align: center"] > div:first-child {
  color: var(--ink) !important;
  font-family: var(--display);
  font-size: var(--text-xl) !important;
}
html.v2-ui #root > div[style*="position: fixed"][style*="justify-content: center"][style*="text-align: center"] > div:nth-child(2) {
  color: var(--ink-72) !important;
  opacity: 1 !important;
}
html.v2-ui #root > div[style*="position: fixed"][style*="justify-content: center"][style*="text-align: center"] > button {
  min-height: 44px !important;
  border: 1px solid var(--line-acc) !important;
  border-radius: var(--radius-m) !important;
  background: var(--accent-text) !important;
  color: var(--surf-1) !important;
}

/* dc 1311-1316: preference rows are 16px-tall bands split by 1.5px hairlines;
   the title is a plain 14.5px ink line over an 11.5px ink-55 sub. */
.v2-u7-pref-list { display: flex; flex-direction: column; }
.v2-u7-pref-list > * + * { border-top: 1.5px solid var(--line-1); }
.v2-u7-pref-list > .v2-field--toggle { padding: var(--space-4) 0; }
.v2-u7-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.v2-u7-pref-row > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.v2-u7-pref-row strong { color: var(--ink); font: 400 14.5px/1.3 var(--sans); }
.v2-u7-pref-row span { color: var(--ink-55); font-size: var(--text-13); line-height: 1.4; }

/* dc 1311: the segmented control is a surf-3 well (4px pad, 12px radius); the
   active option is a solid accent plate with ink-on-accent type. */
.v2-u7-segments {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surf-3);
}
.v2-u7-segments button {
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--ink-72);
  font: 600 var(--text-s)/1 var(--sans);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.v2-u7-segments button:hover { color: var(--ink); }
.v2-u7-segments button.is-active { background: var(--accent); color: var(--ink-on-accent); }

/* dc 2869: 28px rounded-square swatches ringed by line-2; the chosen one
   carries the 2px ink border. */
.v2-u7-swatches { display: flex; gap: var(--space-2); }
.v2-u7-swatches button {
  position: relative;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  background: var(--u7-swatch);
  box-shadow: 0 0 0 1px var(--line-2);
  cursor: pointer;
}
.v2-u7-swatches button.is-active { border-color: var(--ink); }
.v2-u7-device-note { margin: var(--space-4) 0 0; color: var(--ink-55); font-size: var(--text-xs); }

/* dc 1328-1334: the danger zone lives INSIDE a normal sheened surf-2 card —
   only its label, copy and the delete control carry the danger color; the
   card chrome itself stays neutral. */
.v2-u7-danger-zone {
  padding: var(--space-5);
  border: 2px solid var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--card-sheen), var(--surf-2);
}
.v2-u7-danger-zone .v2-u7-eyebrow,
.v2-u7-danger-zone h2 { color: var(--danger); }
.v2-u7-danger-zone h2 { margin-top: var(--space-1); font-size: var(--text-lg); }
.v2-u7-danger-zone p { margin: var(--space-2) 0 var(--space-4); color: var(--ink-72); font-size: var(--text-m); line-height: 1.5; }

.v2-u7-sheet-layer,
.v2-u7-dialog-layer {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: var(--scrim);
  backdrop-filter: blur(8px);
  animation: v2U7Fade var(--t-fast) var(--ease) both;
}

.v2-u7-help,
.v2-u7-delete-dialog {
  width: min(100%, 600px);
  max-height: min(90vh, 760px);
  max-height: min(90dvh, 760px);
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
  color: var(--ink);
  font-family: var(--sans);
  animation: v2U7Sheet var(--t-base) var(--ease) both;
}

.v2-u7-help { display: flex; flex-direction: column; }
.v2-u7-help__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--line-1);
}
.v2-u7-help__header h2 { font-size: var(--text-xl); }
.v2-u7-help__body { overflow-y: auto; padding: 0 var(--space-5) var(--space-5); }
.v2-u7-help__section { padding: var(--space-5) 0; }
.v2-u7-help__section + .v2-u7-help__section { border-top: 1px solid var(--line-1); }
.v2-u7-help__section h3 { margin: 0 0 var(--space-3); color: var(--ink); font-size: var(--text-l); }
.v2-u7-help__section p { margin: 0; color: var(--ink-72); font-size: var(--text-m); line-height: 1.65; }

.v2-u7-shortcuts { display: flex; flex-direction: column; margin: 0; }
.v2-u7-shortcuts > div { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: var(--space-4); }
.v2-u7-shortcuts dt { color: var(--ink-72); font-size: var(--text-s); }
.v2-u7-shortcuts dd { margin: 0; }
.v2-u7-shortcuts kbd {
  display: inline-flex;
  min-width: 40px;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--surf-3);
  color: var(--ink);
  font: 600 var(--text-xs)/1.4 var(--mono);
}

.v2-u7-contact { display: flex; flex-direction: column; gap: var(--space-3); }
.v2-u7-contact__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.v2-u7-contact__actions > span { color: var(--ink-55); font-size: var(--text-xs); }
.v2-u7-mailto { margin-top: var(--space-3) !important; color: var(--ink-55) !important; font-size: var(--text-s) !important; }
.v2-u7-mailto a,
.v2-u7-legal-line button { color: var(--accent-text); }
.v2-u7-feedback {
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-55);
  font: 600 var(--text-s)/1 var(--sans);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
  cursor: pointer;
}
.v2-u7-feedback:hover { color: var(--ink); }
.v2-u7-legal-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-1);
  color: var(--ink-55);
  font-size: var(--text-xs);
}
.v2-u7-legal-line button {
  min-height: 44px;
  padding: 0 var(--space-1);
  border: 0;
  background: transparent;
  font: 600 inherit/1 var(--sans);
  cursor: pointer;
}

.v2-u7-delete-dialog { padding: var(--space-5); }
.v2-u7-delete-dialog h2 { margin-top: var(--space-1); font-size: 24px; }
.v2-u7-delete-dialog > p { margin: var(--space-3) 0 var(--space-4); color: var(--ink-72); font-size: var(--text-m); line-height: 1.6; }
.v2-u7-delete-dialog .v2-field { margin: var(--space-4) 0; }

.v2-u7-account button:focus-visible,
.v2-u7-help button:focus-visible,
.v2-u7-help a:focus-visible,
.v2-u7-delete-dialog button:focus-visible,
.v2-u7-account input:focus-visible,
.v2-u7-account textarea:focus-visible,
.v2-u7-help input:focus-visible,
.v2-u7-help textarea:focus-visible,
.v2-u7-delete-dialog input:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

@keyframes v2U7Rise { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: translateY(0); } }
@keyframes v2U7Panel { from { opacity: 0; transform: translateX(var(--space-3)); } to { opacity: 1; transform: translateX(0); } }
@keyframes v2U7Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2U7Sheet { from { opacity: 0; transform: translateY(var(--space-4)) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.v2-density-compact .v2-u7-account__inner { padding-top: var(--space-5); }
.v2-density-compact .v2-u7-account__header { margin-bottom: var(--space-5); }
.v2-density-compact .v2-u7-stack { gap: var(--space-3); }
.v2-density-compact .v2-u7-pref-row { min-height: 60px; }

.v2-motion-off { --motion: 0; scroll-behavior: auto; }

/* breakpoint: tablet */
@media (max-width: 820px) {
  .v2-u7-account__inner { padding: var(--space-5) var(--space-4) calc(var(--space-8) + var(--safe-bottom)); }
  .v2-u7-account__layout { display: block; }
  .v2-u7-account__tabs {
    position: static;
    flex-direction: row;
    width: 100%;
    margin-bottom: var(--space-4);
    overflow-x: auto;
    box-shadow: none;
  }
  .v2-u7-account__tabs button { flex: 0 0 auto; }
  .v2-u7-tier-grid { grid-template-columns: 1fr; }
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .v2-u7-account__header { align-items: flex-start; flex-direction: column; }
  .v2-u7-plan-summary,
  .v2-u7-pref-row,
  .v2-u7-contact__actions { align-items: stretch; flex-direction: column; }
  .v2-u7-pref-row { padding: var(--space-4) 0; }
  .v2-u7-segments { width: 100%; }
  .v2-u7-segments button { flex: 1 1 0; min-height: 44px; }
  .v2-u7-redeem { grid-template-columns: 1fr; }
  .v2-u7-sheet-layer,
  .v2-u7-dialog-layer { padding: var(--space-3); }
  .v2-u7-help__header,
  .v2-u7-help__body,
  .v2-u7-delete-dialog { padding-right: var(--space-4); padding-left: var(--space-4); }
}

@media (pointer: coarse) {
  .v2-u7-account__tabs button,
  .v2-u7-segments button,
  .v2-u7-swatches button,
  .v2-u7-feedback,
  .v2-u7-legal-line button { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-u7-account__header,
  .v2-u7-account__panel,
  .v2-u7-sheet-layer,
  .v2-u7-dialog-layer,
  .v2-u7-help,
  .v2-u7-delete-dialog { animation: none !important; transition: none !important; }
}

@media (forced-colors: active) {
  .v2-u7-account__tabs,
  .v2-u7-account__tabs button,
  .v2-u7-danger-zone,
  .v2-u7-help,
  .v2-u7-delete-dialog,
  .v2-u7-status,
  .v2-u7-error-card { border: 1px solid CanvasText; }
}

/* ===== V2 U4A ===== */
/* The Queue place (screen-queue.jsx) + the shared slots editor (v2-slots-editor.jsx)
   + platform-identity marks. Token-only, zero raw hex, zero [data-theme] branches:
   every color is a var() U0 defines in BOTH themes, so dark/light hold with no code
   path here. Animations are the U0 keyframes (lzRise/lzFade/rcPop/pulseRing) which
   the global prefers-reduced-motion clamp collapses to end-states; drag is pointer
   work and is unaffected. Touch targets meet 44px on the primary controls. */

/* The Queue is its own scroll container (the app shell is overflow:hidden, so every
   place screen owns its scroll). padding-top clears the absolute .v2-topbar — the
   same idiom .v2-lib / .v2-u7-account use — so the header + toolbar are never under
   the sticky bar at scroll 0. The inner wrapper keeps the centered max-width column. */
.v2q {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding-top: var(--bar-h);
  background: var(--bg);
  color: var(--ink);
}
.v2q-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 24px calc(var(--nav-h) + 40px);
  /* leg-M: fill-mode BACKWARDS (was both). lzRise's to-state equals this
     element's natural state, so entry motion and the settled frame are
     pixel-identical in both themes — but "both" kept a filled identity
     transform forever, making this 1080px column the CONTAINING BLOCK for
     the fixed drawer/modal layers mounted inside it. Their full-viewport
     veils were silently clipped to the column; invisible in dark (the old
     --bg-mix veil matched the page), a hard seam in light. Probe-proven:
     with the fill released the layer rect snaps from (260,64,1080)
     to (0,0,1600x1200). */
  animation: lzRise var(--t-base) var(--ease) backwards;
}

/* header */
.v2q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.v2q-title {
  margin: 0;
  font: 700 29px/1.05 var(--display);
  letter-spacing: -0.025em;
  color: var(--ink);
}
/* canvas head actions: surf-2 fills on a 1.5px hairline */
.v2q-head__actions .v2-btn--ghost {
  border: 1.5px solid var(--line-1);
  background: var(--surf-2);
  color: var(--ink-88);
  font-size: 13.5px;
}
.v2q-head__actions .v2-btn--ghost:hover:not(:disabled) {
  border-color: var(--line-2);
  background: var(--surf-3);
  color: var(--ink);
}
.v2q-head__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.v2q-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: var(--radius-chip);
  background: var(--surf-3);
  color: var(--ink-72);
  font: 600 var(--text-13)/1 var(--mono);
}
.v2q-viewswitch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-chip);
  background: var(--surf-0);
}
/* canvas strip filters: loose chip row, not a boxed switcher */
.v2q-stripfilter {
  display: flex;
  align-items: center;
  gap: 6px;
}
.v2q-stripfilter .v2q-viewswitch__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--ink-55);
  font: 600 var(--text-13)/1 var(--sans);
  box-shadow: none;
}
.v2q-stripfilter .v2q-viewswitch__btn.is-active {
  border-color: var(--line-acc);
  background: var(--acc-16);
  color: var(--ink);
  box-shadow: none;
}
/* R4-H P5: the 26px strip pills keep their compact look; on coarse pointers a
   centered pseudo (house .hit grammar, inset -9px => ~44px) carries the tap. */
@media (pointer: coarse) {
  .v2q-stripfilter .v2q-viewswitch__btn { position: relative; }
  .v2q-stripfilter .v2q-viewswitch__btn::after { content: ""; position: absolute; inset: -9px; }
  /* leg-FIN (rev-3 M-P2): the week-card title (10.5px button, planner) and
     status verbs (9px buttons) get the house .hit slop. Pseudo-only — the
     compact card geometry is untouched; events bubble through the inert
     non-planner title <div> unchanged. */
  button.v2q-card__title,
  .v2q-card__status { position: relative; }
  button.v2q-card__title::after,
  .v2q-card__status::after { content: ""; position: absolute; inset: -9px; }
}
/* R2 §M (round-2.2 named bug): the Week/Month/List active tab was near-
   invisible. Per the dc switcher style (dc 2934) the active tab carries a
   1.5px --line-3 border + --surf-3 fill + full ink + --shadow-xs; inactive
   keeps a transparent border (same geometry, border-box) and --ink-55.
   Combined with the leg-1 light --line-* darkening this makes the state
   unmistakable in both themes. */
.v2q-viewswitch__btn {
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-55);
  font: 600 var(--text-s) var(--sans);
  cursor: pointer;
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease),
    border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.v2q-viewswitch__btn:hover { color: var(--ink-88); }
.v2q-viewswitch__btn.is-active {
  border-color: var(--line-3);
  background: var(--surf-3);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

/* health strip */
.v2q-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 11px 16px;
  margin-bottom: 18px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
}

/* handoff-3 (canvas 1508-1516): the 4-card KPI summary grid above the calendar */
.v2q-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.v2q-kpi {
  padding: 13px 15px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
}
.v2q-kpi__k {
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.v2q-kpi__v {
  margin-top: 6px;
  font: 700 24px/1 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* breakpoint: compact */
@media (max-width: 640px) {
  .v2q-kpis { grid-template-columns: repeat(2, 1fr); }
}
.v2q-strip__stat.v2q-strip__tz {
  margin-left: auto;
  color: var(--ink-55);
  font: 500 var(--text-xs) var(--mono);
}
.v2q-strip__stat.v2q-strip__tz b { color: var(--ink-55); font-weight: 500; }
.v2q-strip__health {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-s);
  color: var(--ink-72);
}
.v2q-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-38);
}
.v2q-strip__dot.is-ok { background: var(--ink); }
.v2q-strip__dot.is-warn { background: var(--amber); }
.v2q-strip__accounts {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.v2q-strip__acct {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.v2q-strip__handle {
  font: 500 var(--text-xs) var(--mono);
  color: var(--ink-55);
}
.v2q-strip__sep {
  width: 1px;
  height: 16px;
  background: var(--line-1);
}
.v2q-strip__stat {
  font-size: var(--text-s);
  color: var(--ink-55);
}
.v2q-strip__stat b {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--mono);
}
.v2q-loading {
  padding: 60px 0;
  text-align: center;
  color: var(--ink-55);
  font-size: var(--text-m);
}

/* calendar shell + nav (canvas: centered rail over the grid) */
.v2q-cal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
}
.v2q-cal__label {
  min-width: 170px;
  text-align: center;
  font: 650 14.5px/1.2 var(--sans);
  color: var(--ink);
}
.v2q-cal__today {
  height: 30px;
  padding: 0 13px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-2);
  color: var(--ink-72);
  font: 600 var(--text-13)/1 var(--sans);
  cursor: pointer;
}
.v2q-cal__today:hover { border-color: var(--line-2); color: var(--ink); }

/* WEEK */
.v2q-week {
  --v2q-gutter: 46px;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--card-sheen), var(--surf-2);
  padding: 8px 12px 14px;
}
.v2q-week__head,
.v2q-week__body {
  display: grid;
  grid-template-columns: var(--v2q-gutter) repeat(7, 1fr);
}
.v2q-week__body {
  position: relative;
}
.v2q-week__dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 0;
  border-left: 1.5px solid var(--line-1);
}
.v2q-week__dayname {
  font: 700 var(--text-xs) var(--sans);
  color: var(--ink-72);
}
.v2q-week__daydate {
  font: 600 var(--text-xs) var(--mono);
  color: var(--ui-text-muted);
}
.v2q-week__dayhead.is-today { background: var(--acc-08); }
.v2q-week__dayhead.is-today .v2q-week__dayname { color: var(--accent-text); }
.v2q-week__dayhead.is-today .v2q-week__daydate { color: var(--ink); }
.v2q-week__gutterhead { border: 0; }
.v2q-week__gutter { position: relative; }
.v2q-week__tick {
  position: absolute;
  right: 6px;
  left: 0;
  transform: translateY(-6px);
  text-align: right;
  font: 500 var(--text-13)/1 var(--mono);
  color: var(--ui-text-muted);
}
.v2q-week__col {
  position: relative;
  border-left: 1.5px solid var(--line-1);
  transition: background var(--t-micro) var(--ease);
}
.v2q-week__col.is-today { background: var(--acc-08); }
.v2q-week__col.is-dragover { background: var(--acc-08); }
.v2q-week__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, var(--line-1) 0 1px, transparent 1px 52px);
}
.v2q-week__thread {
  position: absolute;
  left: 4px;
  width: 2px;
  border-radius: 2px;
  opacity: 0.5;
  z-index: var(--z-content);
}
.v2q-ghost {
  position: absolute;
  left: 9px;
  right: 5px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1.5px dashed currentColor;
  border-radius: 9px;
  opacity: 0.6;
  color: var(--ink-55);
  overflow: hidden;
  white-space: nowrap;
  z-index: var(--z-content-control);
}
.v2q-ghost.is-past { opacity: 0.22; }
.v2q-ghost__t {
  min-width: 0;
  font: 500 var(--text-13)/1 var(--mono);
  color: var(--ink-55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2q-platform-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
}
.v2q-card {
  position: absolute;
  left: 9px;
  right: 5px;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  background: var(--surf-3);
  box-shadow: var(--floor);
  cursor: grab;
  overflow: hidden;
  z-index: var(--z-content-marker);
}
.v2q-card:active { cursor: grabbing; }
.v2q-card.is-posted { opacity: 0.68; }
.v2q-card.is-thread-accent { background: color-mix(in srgb, var(--accent) 9%, var(--surf-3)); }
.v2q-card.is-fail {
  border: 1.5px solid var(--danger);
  border-left-width: 3px;
  background: color-mix(in srgb, var(--danger) 14%, var(--surf-3));
}
.v2q-card__top {
  display: flex;
  align-items: center;
  gap: 5px;
}
.v2q-card__time {
  font: 500 var(--text-13)/1 var(--mono);
  color: var(--ink-72);
}
.v2q-card__title {
  font: 600 var(--text-13)/1.2 var(--sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2q-card__status,
.v2q-row__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  padding: 0;
  font: 600 var(--text-13)/1.2 var(--mono);
  text-align: left;
  color: var(--ink-55);
  cursor: pointer;
}
.v2q-card__status:disabled { cursor: default; }
/* CAL-W1: the "Post now" revive affordance — the additive second action on
   queued/held/expired cards (DOM-absent unless the revive mirror is on). */
.v2q-card__postnow { margin-top: 2px; text-decoration: underline; text-underline-offset: 2px; }
.v2q-card__status.v2-tone--live,
.v2q-row__status.v2-tone--live { color: var(--accent-text); }
.v2q-card__status.v2-tone--done,
.v2q-row__status.v2-tone--done { color: var(--ink); }
.v2q-card__status.v2-tone--attention,
.v2q-row__status.v2-tone--attention { color: var(--amber); }
.v2q-card__status.v2-tone--danger,
.v2q-row__status.v2-tone--danger { color: var(--danger); }
.v2q-card__status.v2-tone--neutral,
.v2q-row__status.v2-tone--neutral { color: var(--ink-55); }
.v2q-card__status.is-held,
.v2q-row__status.is-held {
  min-width: 0;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--amber-40);
  border-radius: var(--radius-pill);
  background: var(--amber-14);
  color: var(--amber);
}
.v2q-status__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2q-card__pulse {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: currentColor;
  animation: pulseRing calc(15 * var(--t-micro)) var(--ease) infinite;
}
/* canvas now-line: one rail across the whole week, dot pinned at the gutter */
.v2q-nowline {
  position: absolute;
  left: var(--v2q-gutter);
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: var(--z-content-overlay);
  pointer-events: none;
}
.v2q-nowline::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--acc-16);
}

/* MONTH */
.v2q-month__head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.v2q-month__wd {
  text-align: center;
  font: 700 var(--text-13)/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}
.v2q-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.v2q-month__blank {
  min-height: 84px;
  border-radius: 10px;
  background: transparent;
}
.v2q-month__cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 84px;
  padding: 7px;
  border: 1.5px solid var(--line-1);
  border-radius: 10px;
  background: var(--surf-2);
  text-align: left;
  cursor: default;
  font: inherit;
}
.v2q-month__cell.is-clickable { cursor: pointer; }
.v2q-month__cell.is-clickable:hover { border-color: var(--line-2); }
.v2q-month__cell.is-today {
  border-color: var(--accent);
  background: var(--acc-08);
  box-shadow: 0 0 0 3px var(--acc-16);
}
.v2q-month__date {
  font: 600 var(--text-xs) var(--mono);
  color: var(--ink-55);
}
.v2q-month__cell.is-today .v2q-month__date { color: var(--ink); }
.v2q-month__pip {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  min-width: 0;
  overflow: hidden;
}
.v2q-month__pip-t {
  font: 500 var(--text-13)/1 var(--mono);
  color: var(--ink-72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2q-month__more {
  padding-left: 3px;
  font: 600 var(--text-13)/1 var(--mono);
  color: var(--ui-text-muted);
}

/* MONTH day-peek */
.v2q-peek {
  margin-top: 14px;
  padding: 16px;
  border: 1.5px solid var(--line-acc);
  border-radius: 14px;
  background: var(--surf-2);
  animation: lzRise var(--t-fast) var(--ease) both;
}
.v2q-peek__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.v2q-peek__title {
  font: 650 var(--text-l) var(--sans);
  color: var(--ink);
}
.v2q-peek__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2q-peek__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1.5px solid var(--line-1);
  border-radius: 10px;
  background: var(--surf-0);
}
.v2q-peek__meta { flex: 1; min-width: 0; }
.v2q-peek__rowtitle {
  font: 600 var(--text-m) var(--sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2q-peek__rowtime {
  margin-top: 2px;
  font: 500 var(--text-13)/1 var(--mono);
  color: var(--ink-55);
}

/* LIST */
.v2q-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.v2q-thread__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.v2q-thread__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
}
.v2q-thread__title {
  font: 650 15px/1.3 var(--sans);
  color: var(--ink);
}
.v2q-thread__meta {
  font: 500 var(--text-xs) var(--mono);
  color: var(--ink-55);
}
.v2q-thread__cancel {
  margin-left: auto;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  background: var(--surf-3);
  color: var(--ink-55);
  font: 500 var(--text-xs) var(--sans);
  cursor: pointer;
}
.v2q-thread__cancel:hover { color: var(--danger); border-color: var(--danger); }
/* per-distribution controls (W-2): pace re-space picker + confirmable cancel. */
.v2q-thread__controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}
.v2q-thread__controls .v2q-thread__cancel { margin-left: 0; }
.v2q-thread__pace { padding: 2px; }
.v2q-thread__pace .v2q-viewswitch__btn { height: 26px; padding: 0 11px; }
.v2q-thread__keep {
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-55);
  font: 500 var(--text-xs) var(--sans);
  cursor: pointer;
}
.v2q-thread__keep:hover { color: var(--ink-88); }
.v2q-thread__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2q-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
}
.v2q-row__meta { flex: 1; min-width: 0; }
.v2q-row__title {
  font: 600 var(--text-m) var(--sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2q-row__sub {
  margin-top: 2px;
  font: 500 var(--text-xs) var(--mono);
  color: var(--ink-55);
}
.v2q-row__out {
  font: 600 var(--text-xs) var(--mono);
  color: var(--ink-72);
}
.v2q-row__status { cursor: default; font-size: var(--text-13); }
.v2q-row__statusdot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* Reel micro-thumb */
.v2q-thumb {
  width: 40px;
  height: 56px;
  flex: 0 0 auto;
  padding: 4px;
  border: 1.5px solid var(--line-1);
  border-radius: 7px;
  background: var(--surf-0);
  gap: 1px;
}

/* platform marks */
.v2q-plat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid transparent;
}
.v2q-plat-bare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* unscheduled drawer body */
.v2q-drawer__intro,
.v2q-drawer__hint {
  font-size: var(--text-s);
  color: var(--ink-72);
  line-height: 1.5;
}
.v2q-drawer__intro { margin: 0 0 16px; }
.v2q-drawer__hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  color: var(--ui-text-muted);
  font-size: var(--text-xs);
}
.v2q-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2q-unsched {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
  cursor: grab;
}
.v2q-unsched:active { cursor: grabbing; }
.v2q-unsched__meta { flex: 1; min-width: 0; }
.v2q-unsched__title {
  font: 600 13.5px/1.3 var(--sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2q-unsched__ep {
  margin-top: 1px;
  font: 400 var(--text-xs) var(--sans);
  color: var(--ink-55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2q-unsched__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font: 500 var(--text-13)/1 var(--mono);
  color: var(--ink-55);
}
.v2q-unsched__plats {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* slots modal shell */
.v2q-modal-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.v2q-modal__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: lzFade var(--t-fast) var(--ease) both;
}
.v2q-modal {
  position: relative;
  z-index: var(--z-content);
  width: min(780px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--glass-sheet);
  backdrop-filter: blur(18px);
  box-shadow: var(--floor-lift);
  animation: rcPop var(--t-fast) var(--ease) both;
}
.v2q-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.v2q-modal__title {
  margin: 0;
  font: 700 24px/1.1 var(--display);
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* canvas drawer width (the shared V2Drawer default stays 420 elsewhere) */
.v2-drawer.v2q-drawer { width: min(400px, 92vw); }
.v2q-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}

/* shared slots editor (v2-slots-editor.jsx) */
.v2q-slots__intro,
.v2q-slots__note {
  font-size: var(--text-m);
  color: var(--ink-72);
  line-height: 1.5;
}
.v2q-slots__intro { margin: 0 0 16px; }
.v2q-slots__note { margin: 16px 0 0; font-size: var(--text-s); color: var(--ink-55); }
.v2q-slots__tabs {
  display: flex;
  gap: 2px;
  width: max-content;
  padding: 3px;
  margin-bottom: 16px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-0);
}
.v2q-slots__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-55);
  font: 600 var(--text-s) var(--sans);
  cursor: pointer;
  transition: background var(--t-quick) var(--ease), color var(--t-quick) var(--ease),
    border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.v2q-slots__tab.is-active {
  border-color: var(--line-3);
  background: var(--surf-3);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.v2q-slots__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.v2q-slots__day {
  min-height: 130px;
  padding: 10px 8px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
}
.v2q-slots__dayhead {
  margin-bottom: 8px;
  text-align: center;
  font: 700 var(--text-xs) var(--sans);
  color: var(--ink-72);
}
.v2q-slots__chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.v2q-slots__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  height: 26px;
  padding: 0 4px 0 9px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-3);
}
.v2q-modal .v2q-slots__chip::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--v2q-slot-dot, var(--accent));
  content: "";
}
.v2q-slots__chip-time {
  min-width: 0;
  flex: 1 1 auto;
  font: 500 var(--text-13)/1 var(--mono);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2q-slots__chip-x {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  cursor: pointer;
}
.v2q-slots__chip-x:hover { color: var(--danger); }
/* canvas "+ add": reticle corner ticks instead of a dashed box */
.v2q-slots__add {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  background-image:
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-repeat: no-repeat;
  background-size: 9px 2px, 2px 9px, 9px 2px, 2px 9px, 9px 2px, 2px 9px, 9px 2px, 2px 9px;
  color: var(--ink-55);
  font: 600 var(--text-xs) var(--sans);
  cursor: pointer;
}
.v2q-slots__add:hover { background-color: var(--surf-3); color: var(--ink-88); }

.v2q-platform-chip.is-instagram .v2-chip__dot { background: var(--ig); }
.v2q-platform-chip.is-tiktok .v2-chip__dot { background: var(--tt); }
.v2q-platform-chip.is-x .v2-chip__dot { background: var(--x); }
.v2q-platform-chip.is-youtube .v2-chip__dot { background: var(--yt); }

/* narrow screens: the week/month grids scroll rather than crush; the slots grid
   and calendar keep a usable minimum width inside a horizontal scroller. */
/* breakpoint: compact */
@media (max-width: 640px) {
  .v2q-week,
  .v2q-month__head,
  .v2q-month__grid { min-width: 640px; }
  .v2q-cal { overflow-x: auto; }
  .v2q-slots__grid { min-width: 640px; }
  .v2q-modal { overflow-x: auto; }
}
/* ===== end V2 U4A ===== */

/* design R3 leg 6 — the provider-off schedule receipt is a held state, not an
   error. Reuse the shared attention chip and keep its explanation to one line. */
.v2-schedule-held {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-2);
}
.v2-schedule-held .v2-chip { flex: 0 0 auto; }
.v2-schedule-held__copy {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-72);
  font-size: var(--text-s);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== V2 U3A ===== */

.v2-u3a-home,
.v2-u3a-choose {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  color: var(--ink);
  font-family: var(--sans);
  background: var(--bg);
}
.v2-u3a-home {
  padding: calc(92px + env(safe-area-inset-top, 0px)) var(--space-6) calc(144px + env(safe-area-inset-bottom, 0px));
  /* handoff-3 owner: vertically center the intake column instead of pinning it
     to the top (the void sat below). margin:auto on the column absorbs the free
     space when it fits and collapses to a top-anchored scroll when it doesn't. */
  display: flex;
  flex-direction: column;
}
/* handoff-3 owner: give the Home cove depth — layered accent blooms + a fine
   dot texture, all from tokens (no new hues), so it reads rich in contrast and
   layers rather than flat. Both layers sit behind the column, non-interactive. */
.v2-u3a-home::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-page);
  pointer-events: none;
  background:
    radial-gradient(62% 44% at 50% 20%, var(--acc-22), transparent 62%),
    radial-gradient(40% 34% at 82% 8%, var(--edit-12), transparent 60%),
    radial-gradient(52% 46% at 12% 90%, var(--acc-08), transparent 64%);
}
.v2-u3a-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-page);
  pointer-events: none;
  opacity: 0.55;
  background-image: radial-gradient(var(--ink-06) 0.7px, transparent 0.8px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(115% 78% at 50% 28%, white 38%, transparent 82%);
  mask-image: radial-gradient(115% 78% at 50% 28%, white 38%, transparent 82%);
}
.v2-u3a-home__column {
  position: relative;
  z-index: var(--z-content);
  width: min(640px, 100%);
  margin: auto;
  animation: v2U3aRise var(--t-base) var(--ease) both;
}
.v2-u3a-eyebrow {
  display: block;
  margin-bottom: 11px;
  color: var(--ink-55);
  font: 700 var(--text-13)/1.2 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* design canvas Home (4.1, dc 363-371): the email-confirm affordance is a
   small centered pill, not a full-width alert bar -- border/background match
   the neutral --line-1/--surf-2 chip language used everywhere else on Home. */
.v2-u3a-verify-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}
.v2-u3a-verify {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 8px 9px 8px 16px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-chip);
  background: var(--surf-2);
}
.v2-u3a-verify__text {
  min-width: 0;
  color: var(--ink-55);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.v2-u3a-verify__text strong { color: var(--ink-72); font-weight: 600; }
.v2-u3a-verify__message {
  color: var(--ink-72);
  font: 500 var(--text-13)/1.35 var(--mono);
}

.v2-u3a-latest { margin-bottom: 32px; }
.v2-u3a-latest__panel .v2-panel__body { padding: 18px var(--space-5); }
.v2-u3a-latest__layout {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}
.v2-u3a-latest__reel {
  display: flex;
  align-items: center;
  height: 60px;
  padding: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: 10px;
  background: var(--surf-0);
}
.v2-u3a-latest__reel .v2-reel { height: 100%; }
.v2-u3a-latest__copy { min-width: 0; }
.v2-u3a-latest__code {
  display: block;
  color: var(--ink-55);
  font: 500 var(--text-13)/1.3 var(--mono);
}
.v2-u3a-latest__copy h2 {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--ink);
  font: 650 15px/1.3 var(--sans);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-u3a-latest__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 7px;
  color: var(--ink-72);
  font-size: var(--text-xs);
  line-height: 1.35;
}
.v2-u3a-latest__status > span {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--ink-08);
}
.v2-u3a-latest__status.is-building > span {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--acc-16), var(--glow-acc);
  animation: breathe calc(18.3333 * var(--t-micro)) var(--ease) infinite;
}
.v2-u3a-latest__status.is-failed > span { background: var(--danger); }
.v2-u3a-latest__status.is-canceled > span { background: var(--ink-38); }

.v2-u3a-home__history-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 24px;
  padding: var(--space-3) 14px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-2);
  color: var(--ink-72);
  font-size: var(--text-sm);
}
.v2-u3a-home__history-error button,
.v2-u3a-sample-link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font: 600 var(--text-13)/1.35 var(--sans);
  cursor: pointer;
}

.v2-u3a-intake { min-width: 0; }
.v2-u3a-state-card .v2-panel__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 26px;
  text-align: center;
}
.v2-u3a-state-card--attention { border-color: var(--amber); }
.v2-u3a-state-card--error { border-color: var(--danger); }
.v2-u3a-state-card__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-1);
  border-radius: 14px;
  background: var(--surf-3);
  color: var(--ink-72);
  font: 650 21px/1 var(--sans);
}
.v2-u3a-state-card--attention .v2-u3a-state-card__glyph { color: var(--amber); }
.v2-u3a-state-card--error .v2-u3a-state-card__glyph { color: var(--danger); }
/* design canvas Home (dc 333): a gradient accent->edit icon tile with the
   up-arrow glyph and a slow float, instead of the flat muted state-card tile. */
.v2-u3a-plinth__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent), var(--edit));
  color: var(--hero-white);
  box-shadow: 0 12px 34px -12px var(--acc-60);
  animation: v2U3aFloat calc(30 * var(--t-micro)) var(--ease) infinite;
}
.v2-u3a-state-card h1 {
  margin: 14px 0 0;
  color: var(--ink);
  font: 650 21px/1.2 var(--display);
  letter-spacing: -0.02em;
}
.v2-u3a-state-card p {
  max-width: 390px;
  margin: var(--space-2) 0 0;
  color: var(--ink-72);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.v2-u3a-state-card p.is-done { color: var(--ink); }
.v2-u3a-state-card p.is-error { color: var(--danger); }
.v2-u3a-state-card__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  width: min(360px, 100%);
  margin-top: 18px;
}
.v2-u3a-state-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.v2-u3a-state-card--attention .v2-btn { margin-top: 18px; }

/* R4-H C3: the canvas plinth (dc 330 + factory dropStyle 2404) replaces the
   dashed --line-2 box: solid 1.5px --line-1, 14px radius, a 170deg --acc-08
   wash over --surf-2, reticle-xl corner brackets (8 accent gradient strokes,
   24x3px arms, dc 133) with the reticle's soft accent glow folded into
   box-shadow, and the rim-light conic ring (dc 143) as ::before. The glyph
   tile, copy and testids are leg-A's, untouched. Hover keeps the shipped
   accent-border + lift grammar and deepens the wash via --plinth-wash so the
   brackets survive the hover repaint. Rim opacity rides --cta-rim-op, the
   existing theme-stepped rim token (0.9 dark / 0.55 light; canvas .85/.45). */
.v2-u3a-plinth {
  --plinth-wash: var(--acc-08);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 236px;
  padding: 42px var(--space-7);
  overflow: hidden;
  border: 1.5px solid var(--line-1);
  border-radius: 14px;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 24px 3px,
    linear-gradient(var(--accent), var(--accent)) top left / 3px 24px,
    linear-gradient(var(--accent), var(--accent)) top right / 24px 3px,
    linear-gradient(var(--accent), var(--accent)) top right / 3px 24px,
    linear-gradient(var(--accent), var(--accent)) bottom left / 24px 3px,
    linear-gradient(var(--accent), var(--accent)) bottom left / 3px 24px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 24px 3px,
    linear-gradient(var(--accent), var(--accent)) bottom right / 3px 24px,
    linear-gradient(170deg, var(--plinth-wash), var(--surf-2) 46%, var(--surf-2));
  background-repeat: no-repeat;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 0 5px var(--acc-60), 0 0 14px var(--acc-16), var(--floor);
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), transform var(--t-quick) var(--ease);
}
.v2-u3a-plinth::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: conic-gradient(from 220deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--hero-white) 65%, transparent) 34deg, var(--accent) 92deg, transparent 150deg, transparent 360deg);
  mask: linear-gradient(var(--hero-white) 0 0) content-box, linear-gradient(var(--hero-white) 0 0);
  -webkit-mask: linear-gradient(var(--hero-white) 0 0) content-box, linear-gradient(var(--hero-white) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--cta-rim-op);
}
.v2-u3a-plinth:hover,
.v2-u3a-plinth.is-dragging {
  --plinth-wash: var(--acc-16);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.v2-u3a-plinth strong {
  font: 650 26px/1.2 var(--display);
  letter-spacing: -0.025em;
}
.v2-u3a-plinth > span:last-child {
  color: var(--ink-55);
  font: 400 13.5px/1.4 var(--sans);
}
/* design canvas Home (dc 338-339): a quiet full-width row beneath the
   dropzone, with a bordered mono "multi-cam" chip -- same affordance the
   staged-cameras panel already exposes, surfaced before any camera is added. */
.v2-u3a-camera-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  margin-top: 6px;
  /* handoff-3 owner: bigger, filled and layered so it reads as a real
     affordance, not a faint text link. Keeps the quiet --line-1 border. */
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
  color: var(--ink-88);
  font: 650 15px/1 var(--sans);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.v2-u3a-camera-add:hover { border-color: var(--line-acc); background: var(--card-sheen), var(--surf-3); box-shadow: var(--floor); }
.v2-u3a-camera-add__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-text);
}
.v2-u3a-camera-add__chip {
  padding: 2px 8px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-chip);
  color: var(--ui-text-muted);
  font-size: var(--text-13);
}
/* Camera-angle role toggle (dc 282): a compact segmented control replacing the
   old dropdown, so the type choice is offered directly on each staged angle. */
.v2-u3a-roletoggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ink-12);
  border-radius: 9px;
  background: var(--ink-02);
  flex: 0 0 auto;
}
.v2-u3a-roletoggle__btn {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-55);
  font: 600 var(--text-13)/1 var(--sans);
  cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.v2-u3a-roletoggle__btn:hover { color: var(--ink-72); }
.v2-u3a-roletoggle__btn.is-on { background: var(--acc-08); color: var(--accent-text); }

/* NEW-HOME (owner 2026-07-21): the staged camera-angles editor (primary =
   angle 1). Card + per-angle rows with the 2-role toggle + person input. */
.v2-u3a-cameras {
  width: 100%;
  padding: 16px 16px 14px;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--card-sheen), var(--surf-2);
  box-shadow: var(--floor);
  animation: v2U3aRise var(--t-fast) var(--ease) both;
}
.v2-u3a-cameras__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-u3a-cameras__title { display: inline-flex; align-items: center; gap: 9px; font: 650 15px/1.1 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.v2-u3a-cameras__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line-1); background: var(--surf-3); color: var(--accent-text);
}
.v2-u3a-cameras__count { font-size: var(--text-13); color: var(--ink-55); }
.v2-u3a-cameras__copy { margin: 12px 0 4px; font-size: var(--text-13); line-height: 1.45; color: var(--ink-55); }
/* MULTICAM HONESTY (2026-07-26): the prompt shown when a multi-angle set has fewer
   than two distinct person names. A nudge, never a blocker — the upload proceeds. */
.v2-u3a-cameras__nudge {
  margin: 8px 0 0; padding: 8px 11px;
  border: 1.5px solid var(--line-acc); border-radius: var(--radius-sm);
  background: var(--surf-2); font-size: var(--text-13); line-height: 1.45; color: var(--ink-72);
}
.v2-u3a-cameras__list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.v2-u3a-cam-row {
  padding: 10px 12px; border: 1.5px solid var(--line-1); border-radius: var(--radius-md); background: var(--surf-0);
}
.v2-u3a-cam-row__top { display: flex; align-items: center; gap: 11px; }
.v2-u3a-cam-row__dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--ink-24); }
.v2-u3a-cam-row__dot.is-primary { background: var(--accent); box-shadow: 0 0 7px var(--acc-40); }
.v2-u3a-cam-row__id { flex: 1; min-width: 0; }
.v2-u3a-cam-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.2 var(--sans); color: var(--ink); }
.v2-u3a-cam-row__meta { margin-top: 2px; font-size: var(--text-13); color: var(--ink-55); }
.v2-u3a-cam-row__remove {
  width: 28px; height: 28px; min-height: 28px; flex: 0 0 auto;
  border: 1.5px solid var(--line-1); border-radius: var(--radius-sm);
  background: var(--surf-2); color: var(--ink-55); font: 400 16px/1 var(--sans); cursor: pointer;
}
.v2-u3a-cam-row__remove:hover { color: var(--danger); border-color: var(--line-2); }
.v2-u3a-cam-row__role { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-1); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-u3a-cam-row__person {
  flex: 1; min-width: 140px; height: 34px; padding: 0 12px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surf-2); color: var(--ink); font: 500 13px/1 var(--sans);
}
.v2-u3a-cam-row__person.is-needed { border-color: var(--line-acc); }
.v2-u3a-cameras__add { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.v2-u3a-cameras__addbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1;
  min-height: 44px; height: 40px; padding: 0 14px;
  border: 1.5px dashed var(--line-2); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-72); font: 600 13px/1 var(--sans); cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.v2-u3a-cameras__addbtn:hover { color: var(--ink); border-color: var(--line-acc); }
.v2-u3a-cameras__full { display: block; text-align: center; width: 100%; padding: 8px 0; font-size: var(--text-13); color: var(--ui-text-muted); }
.v2-u3a-cameras__linkadd { display: flex; gap: 8px; margin-top: 8px; }
.v2-u3a-cameras__linkadd input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surf-0); color: var(--ink); font: 500 13px/1 var(--sans);
}
.v2-u3a-cameras__linkadd button {
  height: 40px; padding: 0 16px; border: 1px solid var(--btn-primary-border); border-radius: var(--radius-sm);
  background: var(--btn-primary-bg); color: var(--ink-on-accent); font: 650 13px/1 var(--sans); cursor: pointer;
}
.v2-u3a-cameras__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.v2-u3a-cameras__hint { font-size: var(--text-13); color: var(--ui-text-muted); }
.v2-u3a-cameras__clear {
  min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--ink-55); font: 600 var(--text-13)/1 var(--sans); cursor: pointer;
}
.v2-u3a-cameras__clear:hover { color: var(--ink); }
.v2-u3a-cameras__footactions { display: inline-flex; align-items: center; gap: 8px; }
.v2-u3a-cameras__done {
  min-height: 44px; height: 38px; padding: 0 18px;
  border: 1px solid var(--btn-primary-border); border-radius: var(--radius-sm);
  background: var(--btn-primary-bg); color: var(--ink-on-accent);
  font: 650 13px/1 var(--sans); cursor: pointer;
}
.v2-u3a-cameras__done:hover { filter: brightness(1.06); }

/* NEW-HOME v2 (owner 2026-07-21): the compact staged-source summary shown once a
   primary is staged and the camera dashboard is closed. */
.v2-u3a-staged {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 16px;
  border: 2px solid var(--line-2); border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2); box-shadow: var(--floor);
  animation: v2U3aRise var(--t-quick) var(--ease) both;
}
.v2-u3a-staged__dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 8px var(--acc-40); }
.v2-u3a-staged__dot.is-multi { background: var(--edit); box-shadow: 0 0 8px var(--edit-40); }
.v2-u3a-staged__id { flex: 1; min-width: 0; }
.v2-u3a-staged__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 15px/1.2 var(--sans); color: var(--ink); letter-spacing: -0.01em; }
.v2-u3a-staged__meta { margin-top: 2px; font-size: var(--text-13); color: var(--ink-55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-u3a-staged__edit {
  min-height: 44px; height: 36px; padding: 0 14px; flex: 0 0 auto;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surf-3); color: var(--ink-88); font: 600 13px/1 var(--sans); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.v2-u3a-staged__edit:hover { border-color: var(--line-acc); color: var(--ink); }
.v2-u3a-staged__remove {
  width: 32px; height: 32px; min-height: 32px; flex: 0 0 auto;
  border: 1.5px solid var(--line-1); border-radius: var(--radius-sm);
  background: var(--surf-3); color: var(--ink-55); font: 400 17px/1 var(--sans); cursor: pointer;
}
.v2-u3a-staged__remove:hover { color: var(--danger); border-color: var(--line-2); }

/* NEW-HOME: the single Build action, gated on a staged primary source. */
.v2-u3a-build {
  width: 100%; min-height: 44px; height: 52px; margin-top: 18px;
  border: 1px solid var(--btn-primary-border); border-radius: var(--radius-md);
  background: var(--btn-primary-bg); color: var(--ink-on-accent);
  font: 700 16.5px/1 var(--sans); cursor: pointer; box-shadow: var(--glow-acc);
  transition: filter var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.v2-u3a-build:hover { filter: brightness(1.06); }
.v2-u3a-build.is-disabled, .v2-u3a-build:disabled {
  cursor: not-allowed; opacity: 0.45; box-shadow: none; filter: none;
  background: var(--surf-3); color: var(--ui-text-muted); border-color: var(--line-1);
}
.v2-u3a-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
}
.v2-u3a-or span { height: 1px; flex: 1 1 auto; background: var(--line-1); }
.v2-u3a-or em { color: var(--ink-55); font: 500 var(--text-13)/1 var(--mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.v2-u3a-link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: var(--space-1) 7px var(--space-1) var(--space-4);
  border: 2px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--card-sheen), var(--surf-2);
  color: var(--ink-55);
  /* Owner directive 2026-08-04: the link field carries a soft low-opacity
     brand aura — YouTube red bleeding from the left, Drive blue/green/yellow
     from the right. Brand-glow tokens live in :root (U3a is token-only).
     Kept as blurred negative-spread shadows so it reads as a glow, never a
     border; deepened on focus-within. */
  box-shadow:
    -18px 2px 38px -10px var(--yt-red-15),
    18px -2px 38px -10px var(--drive-blue-15),
    6px 12px 32px -12px var(--drive-green-12),
    -6px 12px 32px -12px var(--drive-yellow-10);
  transition: box-shadow var(--t-fast) ease;
}
.v2-u3a-link:focus-within {
  border-color: var(--acc-40);
  box-shadow:
    -20px 2px 42px -10px var(--yt-red-24),
    20px -2px 42px -10px var(--drive-blue-24),
    7px 13px 34px -12px var(--drive-green-18),
    -7px 13px 34px -12px var(--drive-yellow-15);
}
/* Owner directive 2026-08-04 (round 2): no browser focus rectangle on the
   inner input — browsers treat text-entry elements as :focus-visible even on
   mouse click, so the global ring drew a hard box inside the pill on every
   click. The FIELD still announces focus accessibly: the container border
   brightens and the brand glow deepens via :focus-within above. */
.v2-u3a-link input:focus-visible { outline: none; }
.v2-u3a-link input {
  min-width: 0;
  height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 14.5px/1.4 var(--sans);
}
.v2-u3a-link input::placeholder { color: var(--ink-55); }
/* design canvas Home (dc 358-362): the submit affordance reads "Get clips →"
   in a compact accent-ghost pill embedded at the field's right end, not a
   solid square icon-only button. */
.v2-u3a-link > button {
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--acc-16);
  color: var(--accent-text);
  font: 650 13.5px/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.v2-u3a-link__error {
  position: absolute;
  top: calc(100% + 6px);
  left: 16px;
  color: var(--danger);
  font-size: var(--text-xs);
}
.v2-u3a-sample-link {
  display: block;
  margin: 18px auto 0;
  border-bottom: 1px solid var(--line-2);
}

.v2-u3a-transfer .v2-panel__body { padding: 22px; }
.v2-u3a-transfer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.v2-u3a-transfer h1 {
  max-width: 440px;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: 650 14px/1.35 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-u3a-transfer__head span { color: var(--ink-55); font: 500 var(--text-13)/1.3 var(--mono); }
.v2-u3a-transfer__meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-height: 26px;
  margin-top: 10px;
}
.v2-u3a-transfer__meta > div { margin: 0 !important; }
.v2-u3a-transfer__meta strong { color: var(--ink-72); font: 600 var(--text-13)/1.2 var(--mono); }

.v2-u3a-connect-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px var(--space-4);
  border: 1px solid var(--line-1);
  border-radius: 14px;
  background: var(--surf-2);
}
.v2-u3a-connect-card__glyph {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line-1);
  border-radius: 10px;
  background: var(--surf-3);
  color: var(--ink-55);
}
.v2-u3a-connect-card h2 { margin: 0; color: var(--ink); font: 650 13.5px/1.35 var(--sans); }
.v2-u3a-connect-card p { margin: 2px 0 0; color: var(--ink-55); font-size: var(--text-xs); line-height: 1.4; }

.v2-u3a-choose {
  padding: calc(106px + env(safe-area-inset-top, 0px)) var(--space-6) calc(198px + env(safe-area-inset-bottom, 0px));
}
.v2-u3a-choose__column {
  width: min(660px, 100%);
  margin: 0 auto;
  animation: v2U3aRise var(--t-base) var(--ease) both;
}
.v2-u3a-episode-strip {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: var(--space-3) 14px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
}
/* design R2 leg 7 (dc 418-423): the 96x44 reel thumb reads as a framed chip */
.v2-u3a-episode-strip > .v2-reel {
  height: 44px;
  padding: var(--space-2);
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-0);
}
.v2-u3a-episode-strip h2 {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: 650 14px/1.3 var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-u3a-episode-strip span { color: var(--ink-55); font: 500 var(--text-13)/1.35 var(--mono); }
.v2-u3a-order > h1 {
  margin: 34px 0 18px;
  color: var(--ink);
  font: 650 25px/1.15 var(--display);
  letter-spacing: -0.025em;
}
/* design canvas Choose (dc 490 + formatCards.forEach, live-canvas.html): a
   6-column grid. The two "cluster" formats (Shorts, X clips) take half the
   row each; every other format takes a third; a lone entitled format takes
   the full row. See screen-count.jsx's formatSpan() for the class picked
   per card -- purely a width choice, entitlement/order is unaffected. */
.v2-u3a-format-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.v2-u3a-format {
  min-width: 0;
  grid-column: span 3;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: 14px;
  background: var(--surf-2);
  /* R4-H C8: rest state sits flat (canvas wrap, factory 2472) -- the lift
     shadow belongs to selection only. */
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease);
}
.v2-u3a-format--span-top { grid-column: span 3; }
.v2-u3a-format--span-sub { grid-column: span 2; }
.v2-u3a-format--span-full { grid-column: span 6; }
.v2-u3a-format.is-selected {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--acc-08), var(--surf-2) 100px);
  box-shadow: 0 16px 46px -24px var(--acc-60), var(--floor);
  animation: v2U3aCardPop var(--t-fast) var(--ease) both;
}
.v2-u3a-format.is-selected .v2-toggle { background: var(--accent); }
.v2-u3a-format.is-selected .v2-toggle__knob { left: 18px; background: var(--ink-on-accent); }
.v2-u3a-format__toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  min-height: 88px;
  padding: var(--space-4);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}
.v2-u3a-format__glyph {
  display: block;
  width: 18px;
  height: 24px;
  margin-top: 1px;
  border: 1.5px solid var(--ink-55);
  border-radius: var(--radius-xs);
}
.v2-u3a-format__glyph.is-wide { width: 25px; height: 16px; margin-top: 4px; }
.v2-u3a-format__glyph.is-landscape { width: 26px; height: 17px; margin-top: 3px; }
.v2-u3a-format__glyph.is-trailer { width: 24px; height: 18px; margin-top: 3px; border-style: double; }
.v2-u3a-format.is-selected .v2-u3a-format__glyph { border-color: var(--accent); }
/* design R2 leg 7 (dc 430-470): platform glyph badges — 26x26 rounded squares
   on near-black, brand SVGs inside; the whole row dims with an off card. */
.v2-u3a-format__badges { display: inline-flex; gap: var(--space-1); flex: 0 0 auto; }
.v2-u3a-format__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--plat-badge-bg);
}
.v2-u3a-format__badge svg { display: block; }
/* off cards read clearly "off": muted name/description, dimmed toggle + badges */
.v2-u3a-format:not(.is-selected) .v2-u3a-format__heading strong { color: var(--ink-72); }
.v2-u3a-format:not(.is-selected) .v2-u3a-format__heading > span { color: var(--ui-text-muted); }
.v2-u3a-format:not(.is-selected) .v2-toggle,
.v2-u3a-format:not(.is-selected) .v2-u3a-format__badges { opacity: 0.72; }
.v2-u3a-format__heading { display: flex; min-width: 0; flex-direction: column; gap: var(--space-1); }
.v2-u3a-format__heading strong { color: var(--ink); font-size: var(--text-base); line-height: 1.25; }
.v2-u3a-format__heading > span { color: var(--ink-55); font-size: var(--text-xs); line-height: 1.45; }
.v2-u3a-format__body {
  padding: 14px var(--space-4) var(--space-4);
  border-top: 1px solid var(--line-1);
  animation: v2U3aReveal var(--t-quick) var(--ease) both;
}
.v2-u3a-format__takes { margin: 0; color: var(--ink-72); font: 600 var(--text-13)/1.4 var(--sans); }

.v2-u3a-count__label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-55);
  font: 600 var(--text-13)/1.2 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* design R2 leg 7: preset chips row above, the 50px stepper full-width below
   (dc 447-460 / final-clean.png), instead of the old side-by-side squeeze. */
.v2-u3a-count__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.v2-u3a-count__presets { display: flex; gap: 6px; min-width: 0; }
.v2-u3a-count__stepper button,
.v2-u3a-count__stepper input {
  min-width: 34px;
  height: 44px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-0);
  color: var(--ink-72);
  font: 600 var(--text-13)/1 var(--mono);
  text-align: center;
}
/* R4-H C8: presets read as compact quantity chips (canvas presetBtns, factory
   2464): 26px tall, natural width, quiet at rest; the aria-pressed rule below
   already carries the canvas selected state (accent border + acc-16 wash). */
.v2-u3a-count__presets button {
  flex: 0 0 auto;
  min-width: 30px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-55);
  cursor: pointer;
  font: 600 13px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.v2-u3a-count__presets button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--acc-16);
  color: var(--accent-text);
}
/* design R2 leg 7 (dc 447-460 + final-clean.png): the 50px-tall stepper — one
   bordered box, minus / large centered numeral / plus. */
.v2-u3a-count__stepper {
  display: grid;
  grid-template-columns: 44px minmax(48px, 1fr) 44px;
  overflow: hidden;
  height: 50px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--surf-0);
}
.v2-u3a-count__stepper button {
  min-width: 44px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-md);
}
.v2-u3a-count__stepper button:disabled { color: var(--ui-text-muted); cursor: not-allowed; }
.v2-u3a-count__stepper input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 700 20px/1 var(--mono);
  appearance: textfield;
}
.v2-u3a-count__note { display: block; margin-top: 8px; color: var(--ink-55); font: 500 var(--text-13)/1.35 var(--mono); }

.v2-u3a-request { position: relative; margin-top: 12px; padding-bottom: 1px; }
.v2-u3a-request > button:first-child {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-text);
  font: 650 var(--text-13)/1.35 var(--sans);
  cursor: pointer;
}
.v2-u3a-request input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-8) 0 var(--space-3);
  border: 1px solid var(--line-acc);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--surf-0);
  color: var(--ink);
  font: 400 13px/1.45 var(--sans);
}
.v2-u3a-request input::placeholder { color: var(--ink-55); }
.v2-u3a-request__close {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.v2-u3a-request__close::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-55);
  content: "×";
  font: 500 17px/1 var(--sans);
}

.v2-u3a-fine {
  margin-top: 16px;
  overflow: hidden;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
}
.v2-u3a-sibir {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  color: var(--ink);
}
.v2-u3a-sibir legend {
  margin-bottom: var(--space-1);
  color: var(--ink-72);
  font: 700 var(--text-13)/1.35 var(--sans);
}
.v2-u3a-sibir__promise {
  margin: 0 0 var(--space-3);
  color: var(--ink-55);
  font: 500 13px/1.5 var(--sans);
}
.v2-u3a-sibir__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.v2-u3a-sibir__options label {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-0);
  cursor: pointer;
}
.v2-u3a-sibir__options label.is-selected {
  border-color: var(--accent);
  background: var(--acc-08);
}
.v2-u3a-sibir__options input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}
.v2-u3a-sibir__options input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.v2-u3a-sibir__options span { display: grid; gap: 3px; }
.v2-u3a-sibir__options strong { font: 700 13px/1.3 var(--sans); }
.v2-u3a-sibir__options small { color: var(--ink-55); font: 500 var(--text-13)/1.4 var(--sans); }
.v2-u3a-sibir__about { margin-top: var(--space-3); color: var(--ink-55); }
.v2-u3a-sibir__about summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  width: max-content;
  cursor: pointer;
  font: 600 13px/1.4 var(--sans);
}
.v2-u3a-sibir__about p { max-width: 60ch; margin: var(--space-2) 0 0; font: 500 13px/1.55 var(--sans); }
.v2-u3a-fine summary {
  min-height: 48px;
  padding: 14px var(--space-4);
  color: var(--ink-72);
  font: 600 13px/1.35 var(--sans);
  cursor: pointer;
  list-style: none;
}
.v2-u3a-fine summary::-webkit-details-marker { display: none; }
.v2-u3a-fine summary > span { display: inline-block; margin-right: 8px; transition: transform var(--t-quick) var(--ease); }
.v2-u3a-fine[open] summary > span { transform: rotate(90deg); }
.v2-u3a-fine summary em { color: var(--ink-55); font-weight: 400; font-style: normal; }
.v2-u3a-fine__body { padding: var(--space-4); border-top: 1px solid var(--line-1); }
.v2-u3a-fine__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* handoff-3 (dc 530-550): "How was this recorded?" IRL/Remote picker, required in
   the Choose start panel, with a "Pick one to build" hint + shake on unpicked Cut. */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
.v2-u3a-choosesrc { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-1); }
.v2-u3a-choosesrc.is-shake { animation: shakeX var(--t-base) var(--ease) both; }
.v2-u3a-choosesrc__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.v2-u3a-choosesrc__head > span:first-child { font-size: var(--text-13); font-weight: 600; color: var(--ink-72); }
.v2-u3a-choosesrc__hint { font-size: var(--text-13); font-weight: 600; letter-spacing: 0.02em; color: var(--accent-text); }
.v2-u3a-choosesrc__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v2-u3a-choosesrc__opt {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px;
  border-radius: var(--radius-md); border: 1px solid var(--line-1); background: var(--surf-0);
  color: var(--ink-72); font: 600 13.5px/1 var(--sans); cursor: pointer; text-align: left;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.v2-u3a-choosesrc__opt:hover { border-color: var(--line-2); color: var(--ink); }
.v2-u3a-choosesrc__opt.is-selected { border-color: var(--accent); background: var(--acc-08); color: var(--accent-text); }
.v2-u3a-choosesrc__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--surf-3); border: 1px solid var(--line-1); color: var(--ink-55); flex: 0 0 auto;
}
.v2-u3a-choosesrc__opt.is-selected .v2-u3a-choosesrc__icon { background: var(--acc-16); border-color: var(--line-acc); color: var(--accent); }
.v2-u3a-choosesrc__label { flex: 1; min-width: 0; }
.v2-u3a-choosesrc__check { display: inline-flex; color: var(--accent-text); flex: 0 0 auto; }
.v2-u3a-notify { margin-top: 16px; }
.v2-u3a-notify .v2-field--toggle {
  min-height: 52px;
  padding-top: 10px;
  border-top: 1px solid var(--line-1);
}

.v2-u3a-order-cap {
  margin-top: 18px;
  padding: var(--space-3) 14px;
  border: 1px solid var(--amber);
  border-radius: var(--radius-md);
  background: var(--amber-16);
  color: var(--ink-72);
  font-size: var(--text-sm);
  line-height: 1.45;
  text-align: center;
}
/* design R2 leg 7 (dc 496-499): the Start panel — a 2px --line-2 bordered
   panel at --radius-panel, the disabled note centered above the button. */
.v2-u3a-order-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: 24px;
  padding: 18px var(--space-5) var(--space-5);
  border: 2px solid var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--card-sheen), var(--surf-2);
  box-shadow: var(--floor);
}
.v2-u3a-order-receipt { border: 0; border-radius: 0; box-shadow: none; }
.v2-u3a-order-receipt .v2-receipt__rows { padding: 0; }
.v2-u3a-order-receipt .v2-receipt__row:first-child { border-top: 0; }
.v2-u3a-order-guard {
  margin: 0;
  color: var(--amber);
  font: 600 var(--text-13)/1.35 var(--sans);
  text-align: center;
}
.v2-u3a-order-start { width: 100%; min-height: 54px; font-size: var(--text-md); }

.v2-u3a-home button:focus-visible,
.v2-u3a-home input:focus-visible,
.v2-u3a-choose button:focus-visible,
.v2-u3a-choose input:focus-visible,
.v2-u3a-choose textarea:focus-visible,
.v2-u3a-choose summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@keyframes v2U3aRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes v2U3aReveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
/* design canvas shared (dc 98): the dropzone icon tile's slow float. */
@keyframes v2U3aFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
/* design canvas Choose (dc 2474, rcPop): the selected-format-card pop-in. */
@keyframes v2U3aCardPop {
  0% { transform: scale(0.96); opacity: 0.7; }
  60% { transform: scale(1.01); }
  100% { transform: scale(1); opacity: 1; }
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .v2-u3a-home,
  .v2-u3a-choose { padding-right: 16px; padding-left: 16px; }
  .v2-u3a-home { padding-top: calc(92px + env(safe-area-inset-top, 0px)); }
  .v2-u3a-choose { padding-top: calc(90px + env(safe-area-inset-top, 0px)); }
  .v2-u3a-verify { justify-content: center; text-align: center; }
  .v2-u3a-latest__layout { grid-template-columns: 84px minmax(0, 1fr); }
  .v2-u3a-latest__layout > .v2-btn { grid-column: 1 / -1; width: 100%; }
  .v2-u3a-latest__reel { width: 84px; height: 54px; }
  .v2-u3a-connect-card { grid-template-columns: auto minmax(0, 1fr); }
  .v2-u3a-connect-card > .v2-btn { grid-column: 1 / -1; width: 100%; }
  .v2-u3a-state-card__form { grid-template-columns: 1fr; }
  .v2-u3a-plinth { min-height: 218px; padding: 36px 18px; }
  .v2-u3a-plinth strong { font-size: 20px; text-align: center; }
  .v2-u3a-plinth > span:last-child { text-align: center; }
  .v2-u3a-format-grid { grid-template-columns: 1fr; }
  .v2-u3a-fine__names { grid-template-columns: 1fr; }
  .v2-u3a-sibir__options { grid-template-columns: 1fr; }
  .v2-u3a-order-actions { padding: 14px; }
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .v2-u3a-episode-strip { grid-template-columns: 76px minmax(0, 1fr); }
  .v2-u3a-count__controls { grid-template-columns: 1fr; }
  .v2-u3a-count__stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .v2-u3a-count__stepper button,
  .v2-u3a-count__stepper input { width: auto; }
  .v2-u3a-source { align-items: stretch; flex-direction: column; }
  .v2-u3a-source button { flex: 1 1 0; }
}

@media (pointer: coarse) {
  .v2-u3a-home__history-error button,
  .v2-u3a-sample-link,
  .v2-u3a-request__close { min-width: 44px; min-height: 44px; }
  /* R4-H F3: the email-verify Resend/dismiss mount as size=30; floor them
     with the other small home buttons on touch. */
  .v2-u3a-home .v2-btn--30,
  .v2-u3a-home .v2-btn--36 { min-height: 44px; }
  .v2-u3a-count__controls { grid-template-columns: 1fr; }
  .v2-u3a-count__stepper button { min-width: 44px; }
  /* R4-H C8: the 26px preset chips keep their compact look; a centered pseudo
     (house .hit grammar, inset -9px => 44px) carries the tap. */
  .v2-u3a-count__presets button { position: relative; }
  .v2-u3a-count__presets button::after { content: ""; position: absolute; inset: -9px; }
  .v2-u3a-count__stepper { grid-template-columns: 44px minmax(44px, 1fr) 44px; }
  .v2-u3a-count__stepper input { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-u3a-home__column,
  .v2-u3a-choose__column,
  .v2-u3a-format__body,
  .v2-u3a-latest__status.is-building > span,
  .v2-u3a-plinth__glyph,
  .v2-u3a-format.is-selected {
    animation: none !important;
  }
  .v2-u3a-plinth,
  .v2-u3a-format,
  .v2-u3a-link,
  .v2-u3a-fine summary > span {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .v2-u3a-verify,
  .v2-u3a-latest__reel,
  .v2-u3a-state-card,
  .v2-u3a-plinth,
  .v2-u3a-link,
  .v2-u3a-connect-card,
  .v2-u3a-episode-strip,
  .v2-u3a-format,
  .v2-u3a-fine,
  .v2-u3a-sibir__options label,
  .v2-u3a-order-actions { border: 1px solid CanvasText; }
  .v2-u3a-sibir__options label.is-selected { outline: 2px solid Highlight; }
}

/* ===== V2 U4B ===== */
/* design-r4 leg-D: Composer + Autopilot recomposed to the design canvas —
   flat 29px display titles (no eyebrow), the 2x2 Format card grid on the
   card-sheen grammar, canvas-proportioned slide cards (120px media pane),
   caption-first publish order, canvas proposal rows (40x56 reel thumb, title
   over a quiet mono meta line, 1.5px hairlines on card-sheen), and the
   posting-slots day-cell grammar on the read-only fallback. Tokens only;
   zero raw colors; zero theme branches. The canvas's per-account
   auto-approve toggles, hashtag rail, and one-off compose door are NOT
   ported (deferred/lock-frozen behavior — see the leg report). */
.u4b-layer,
.u4b-composer,
.u4b-autopilot {
  font-family: var(--sans);
  color: var(--ink);
}
.u4b-layer *,
.u4b-composer *,
.u4b-autopilot * {
  box-sizing: border-box;
}
.u4b-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-3);
}
.u4b-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  /* leg-M: token-stepped — dark keeps this rule's old 72% --bg mix verbatim;
     light swaps to a dark sheet veil (canvas sheet-scrim grammar). */
  background: var(--sheet-scrim);
  cursor: default;
  animation: u4bFade var(--t-fast) var(--ease) both;
}
.u4b-sheet {
  position: relative;
  width: min(720px, 100%);
  max-height: min(90vh, 920px);
  overflow: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
  backdrop-filter: blur(18px);
  animation: u4bSheetIn var(--t-base) var(--ease) both;
  scrollbar-color: var(--ink-16) transparent;
}
.u4b-sheet__handle {
  display: block;
  width: 46px;
  height: 4px;
  margin: var(--space-2) auto 0;
  border-radius: var(--radius-pill);
  background: var(--ink-16);
}
.u4b-sheet__header,
.u4b-screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--line-1);
}
.u4b-sheet__header > div,
.u4b-screen-head > div {
  min-width: 0;
  flex: 1;
}
.u4b-sheet__header h2,
.u4b-screen-head h1,
.u4b-screen-head h2,
.u4b-inbox h2 {
  margin: 2px 0 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.u4b-sheet__header h2 { font-size: var(--text-lg); }
/* leg-D: the canvas screen title is a flat 29px display head. */
.u4b-screen-head h1 { font-size: clamp(24px, 4vw, 29px); line-height: 1.1; }
.u4b-sheet__header p,
.u4b-screen-head p {
  max-width: 62ch;
  margin: var(--space-1) 0 0;
  color: var(--ink-55);
  font-size: var(--text-sm);
}
/* R4-H C4: one eyebrow voice across places (cf .v2-u3a-eyebrow): 700 10px
   sans at 0.18em tracking, uppercase. */
.u4b-eyebrow {
  color: var(--ink-55);
  font: 700 var(--text-13)/1.2 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.u4b-layer button,
.u4b-composer button,
.u4b-autopilot button,
.u4b-layer a,
.u4b-composer a,
.u4b-autopilot a {
  min-height: 44px;
}
.u4b-layer button:focus-visible,
.u4b-composer button:focus-visible,
.u4b-autopilot button:focus-visible,
.u4b-layer a:focus-visible,
.u4b-composer a:focus-visible,
.u4b-autopilot a:focus-visible,
.u4b-layer input:focus-visible,
.u4b-composer input:focus-visible,
.u4b-layer textarea:focus-visible,
.u4b-composer textarea:focus-visible,
.u4b-plan-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.u4b-post__body,
.u4b-distribute__body,
.u4b-autopilot__body {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
}
.u4b-section,
.u4b-when,
.u4b-filmstrip-section,
.u4b-composer-publish {
  display: grid;
  gap: var(--space-3);
}
.u4b-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--ink-55);
  font-size: var(--text-sm);
}
.u4b-section__head strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--text-sm);
}
.u4b-section__head .is-error { color: var(--danger); }
.u4b-loading {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--ink-55);
  font-size: var(--text-sm);
}
.u4b-loading > span,
.u4b-slide.is-loading::after {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink-16);
  border-top-color: var(--accent);
  border-radius: var(--radius-pill);
  animation: u4bSpin var(--t-fast) linear infinite;
}
.u4b-notice {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) var(--space-6) 0;
  padding: var(--space-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--surf-2);
  color: var(--ink-72);
  font-size: var(--text-sm);
}
.u4b-notice.v2-tone--attention {
  border-color: var(--amber);
  background: var(--amber-16);
}
.u4b-notice.v2-tone--danger {
  border-color: var(--danger);
  background: var(--danger-16);
}
.u4b-notice strong { display: block; color: var(--ink); }
.u4b-notice a { display: inline-flex; align-items: center; color: var(--accent-text); font-weight: 700; }

.u4b-platform-glyph {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* design R2 leg 10 (§B2): the Composer/Post-sheet badges read the muted
   platform tokens (t1 foundations) instead of borrowing accent/edit, so the
   same platform is the same hue on Connect, Composer, and the Queue. */
.u4b-platform-glyph.is-instagram { color: var(--ig); }
.u4b-platform-glyph.is-tiktok { color: var(--tt); }
.u4b-platform-glyph.is-x { color: var(--x); }
.u4b-platform-glyph .is-dot { fill: currentColor; stroke: none; }
.u4b-account {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
}
.u4b-account__mark {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  flex: 0 0 auto;
}
.u4b-account__mark > .u4b-platform-glyph {
  position: absolute;
  right: -3px;
  bottom: -2px;
  z-index: var(--z-content);
  width: 17px;
  height: 17px;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surf-3);
}
.u4b-account__avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: repeating-linear-gradient(135deg, var(--surf-3) 0 4px, var(--ink-08) 4px 5px);
}
.u4b-account__avatar img { width: 100%; height: 100%; object-fit: cover; }
.u4b-account__copy { display: grid; min-width: 0; text-align: left; }
.u4b-account__copy strong,
.u4b-account__copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u4b-account__copy strong { font-size: var(--text-sm); }
.u4b-account__copy span { color: var(--ink-55); font-size: var(--text-sm); }
.u4b-platform-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.u4b-platform-chip {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-2);
  color: var(--ink-72);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.u4b-platform-chip:hover { border-color: var(--line-2); }
.u4b-platform-chip.is-active { border-color: var(--line-acc); background: var(--acc-08); color: var(--ink); }
.u4b-platform-chip.is-disconnected { opacity: 0.55; }
.u4b-platform-chip__state { color: var(--accent-text); font-family: var(--mono); font-size: var(--text-xs); }
.u4b-platform-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.u4b-platform-pills .v2-chip__label { display: inline-flex; align-items: center; gap: var(--space-1); }
.u4b-platform-pills .u4b-platform-glyph { width: 16px; height: 16px; }

.u4b-hashtags,
.u4b-cover {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-2);
}
.u4b-hashtags > div,
.u4b-cover__copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.u4b-hashtags p { margin: 0; overflow-wrap: anywhere; color: var(--ink-55); font-size: var(--text-sm); }
.u4b-cover__preview {
  display: grid;
  width: 48px;
  height: 64px;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-0);
}
.u4b-cover__preview img { width: 100%; height: 100%; object-fit: cover; }
/* design R2 leg 10 (dc coverFrames): the selected cover tile carries the
   2px accent active border; the composer's hook-frame slide (the cover)
   carries the same treatment on its media pane. */
.u4b-cover__preview.is-set { border: 2px solid var(--accent); }
.u4b-slide.is-cover .u4b-slide__media { border: 2px solid var(--accent); }
.u4b-cover__preview .v2-reel { width: 80%; height: 32px; }
.u4b-cover__copy strong { font-size: var(--text-sm); }
.u4b-cover__copy > span:last-child { color: var(--ink-55); font-size: var(--text-sm); }
.u4b-scrubber {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-acc);
  border-radius: var(--radius-md);
  background: var(--acc-08);
}
.u4b-scrubber label { display: grid; flex: 1; gap: var(--space-2); color: var(--ink-72); font-size: var(--text-sm); }
.u4b-scrubber input { width: 100%; min-height: 44px; accent-color: var(--accent); }

.u4b-segmented {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: var(--space-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-0);
}
.u4b-segmented button {
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-55);
  font: 650 var(--text-13) var(--sans);
  cursor: pointer;
}
.u4b-segmented button:hover { color: var(--ink); }
.u4b-segmented button.is-active { border-color: var(--line-2); background: var(--surf-3); color: var(--accent-text); }
.u4b-segmented button:disabled { opacity: 0.45; cursor: default; }
.u4b-calendar {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-0);
}
.u4b-calendar__days,
.u4b-calendar__times { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; }
.u4b-calendar__days button {
  position: relative;
  display: grid;
  min-width: 54px;
  padding: var(--space-2);
  place-items: center;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-2);
  color: var(--ink-55);
  cursor: pointer;
}
.u4b-calendar__days button span { font-size: var(--text-xs); }
.u4b-calendar__days button strong { color: var(--ink); font-family: var(--mono); }
.u4b-calendar__days button i { position: absolute; right: 5px; bottom: 5px; width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--accent); }
.u4b-calendar__times button {
  min-width: 68px;
  padding: 0 var(--space-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-72);
  font-family: var(--mono);
  cursor: pointer;
}
.u4b-calendar__days button.is-active,
.u4b-calendar__times button.is-active { border-style: solid; border-color: var(--line-acc); background: var(--acc-08); color: var(--accent-text); }
.u4b-calendar > p { margin: 0; color: var(--ink-55); font-size: var(--text-xs); }
.u4b-primary { width: 100%; }
.u4b-primary.v2-btn { min-height: 50px; }
.u4b-doors {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: 8px;
}
.u4b-doors button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-55);
  font: 600 var(--text-13) var(--sans);
  cursor: pointer;
}
.u4b-doors button:hover { color: var(--accent-text); }
.u4b-outcomes { display: grid; gap: var(--space-2); }
.u4b-outcomes > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--surf-2);
  color: var(--ink-72);
  font-size: var(--text-sm);
}
.u4b-outcomes > div.is-ok { border-color: var(--line-3); }
.u4b-outcomes > div.is-attention { border-color: var(--amber); background: var(--amber-16); }
.u4b-outcomes > div.is-error { border-color: var(--danger); background: var(--danger-16); }
.u4b-outcomes span { display: grid; gap: 2px; }
.u4b-outcomes strong { color: var(--ink); }
.u4b-outcomes button {
  padding: 0 var(--space-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surf-3);
  color: var(--ink);
  cursor: pointer;
}

.u4b-distribute { width: min(1120px, 100%); }
.u4b-dials {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-6);
  align-items: end;
}
.u4b-dials > div { display: grid; gap: var(--space-2); }
.u4b-two-weeks {
  display: grid;
  grid-template-columns: repeat(14, minmax(116px, 1fr));
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.u4b-plan-day {
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-0);
  scroll-snap-align: start;
}
.u4b-plan-day > header {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-bottom: 1px solid var(--line-1);
  color: var(--ink-55);
  font-size: var(--text-xs);
}
.u4b-plan-day > header strong { color: var(--ink); font: 700 13.5px var(--mono); }
.u4b-plan-day.has-posts > header { border-bottom-color: var(--line-acc); }
.u4b-plan-day__lane { display: grid; gap: var(--space-2); padding: var(--space-2); }
.u4b-plan-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surf-2);
  cursor: grab;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.u4b-plan-card:hover { transform: translateY(-2px); border-color: var(--line-acc); }
.u4b-plan-card.is-dragging { opacity: 0.45; cursor: grabbing; }
.u4b-plan-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.u4b-plan-card__top .u4b-platform-glyph { width: 18px; height: 18px; }
.u4b-plan-card__top strong { font: 650 var(--text-13) var(--mono); }
.u4b-plan-card .v2-reel { height: 34px; }
.u4b-plan-card p { margin: 0; display: -webkit-box; overflow: hidden; color: var(--ink-55); font-size: var(--text-xs); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.u4b-slot-ghost {
  display: grid;
  min-height: 64px;
  place-items: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--ink-55);
  font: var(--text-13) var(--mono);
}

.u4b-composer-layer,
.u4b-autopilot-layer { align-items: center; }
/* leg-D: canvas column widths — Composer 760px, Autopilot 920px (plus the
   panel's own 24px gutters). */
.u4b-composer,
.u4b-autopilot {
  position: relative;
  width: min(808px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  margin: 0 auto;
  overflow: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
}
.u4b-composer.is-overlay,
.u4b-autopilot.is-overlay { animation: u4bPop var(--t-base) var(--ease) both; }
.u4b-draft-state {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  color: var(--ink-55);
  font: var(--text-13) var(--mono);
}
.u4b-draft-state.is-saving { border-color: var(--line-acc); color: var(--accent-text); }
.u4b-draft-state.is-saved,
.u4b-draft-state.is-published { border-color: var(--line-3); color: var(--ink); }
.u4b-draft-state.is-error { border-color: var(--danger); color: var(--danger); }
/* leg-D: canvas Format block — a labeled 2x2 card grid; cards sit on the
   card-sheen grammar with the accent inset ring when active. */
.u4b-format-section {
  display: grid;
  gap: 10px;
  padding: var(--space-6) var(--space-6) 0;
}
.u4b-format-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.u4b-format-grid button {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 14px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
  color: var(--ink-55);
  text-align: left;
  cursor: pointer;
}
.u4b-format-grid button:hover { border-color: var(--line-2); }
.u4b-format-grid button.is-active { border-color: var(--line-acc); box-shadow: inset 0 0 0 1px var(--acc-16); }
.u4b-format-grid strong { color: var(--ink); font-size: 14.5px; font-weight: 650; }
.u4b-format-grid span { font-size: var(--text-sm); line-height: 1.45; }
.u4b-filmstrip-section,
.u4b-composer-publish { padding: 0 var(--space-6) var(--space-6); }
.u4b-filmstrip {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding: var(--space-1) 0 var(--space-3);
}
/* leg-D: canvas slide cards — narrow 104-ish tiles with a 120px media pane
   on the card-sheen grammar (the number badge + tap-to-edit text stay: they
   carry real reorder/edit behavior the canvas's plain labels lack). */
.u4b-slide {
  position: relative;
  display: grid;
  width: 118px;
  flex: 0 0 118px;
  gap: 6px;
  padding: 9px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-chip);
  background: var(--card-sheen), var(--surf-2);
  box-shadow: var(--shadow-xs);
  cursor: grab;
}
.u4b-slide.is-dragging { opacity: 0.45; }
.u4b-slide.is-loading::after { content: ""; position: absolute; top: 54px; left: calc(50% - 9px); z-index: var(--z-content-control); }
.u4b-slide__number {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: var(--z-content);
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--glass-sheet);
  color: var(--ink);
  font: 700 var(--text-13) var(--mono);
}
.u4b-slide__media {
  display: grid;
  height: 120px;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid var(--line-1);
  border-radius: 7px;
  background: var(--surf-0);
}
.u4b-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.u4b-slide__media .v2-reel { width: 80%; }
.u4b-slide__text {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: var(--space-1);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.u4b-slide__text span { display: -webkit-box; overflow: hidden; font-size: var(--text-xs); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.u4b-slide__text i { color: var(--accent-text); font: normal var(--text-13) var(--mono); }
.u4b-video-strip {
  display: grid;
  min-height: 126px;
  place-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-0);
  color: var(--ink-55);
  font-size: var(--text-sm);
}
.u4b-video-strip .v2-reel { width: min(520px, 82%); }
.u4b-aspect-note,
.u4b-music-note,
.u4b-slots-note {
  margin: 0;
  color: var(--ink-55);
  font: var(--text-13) var(--mono);
}
.u4b-music-note {
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--edit);
  background: var(--edit-16);
  color: var(--ink-72);
}
.u4b-quote-editor {
  display: grid;
  gap: var(--space-3);
  margin: 0 var(--space-6) var(--space-6);
  padding: var(--space-3);
  border: 1px solid var(--line-acc);
  border-radius: var(--radius-md);
  background: var(--acc-08);
}
.u4b-quote-editor > div { display: flex; justify-content: flex-end; gap: var(--space-2); }
.u4b-composer-publish { gap: var(--space-4); border-top: 1px solid var(--line-1); padding-top: 24px; }

.u4b-autopilot { width: min(968px, calc(100% - 32px)); }
.u4b-slots-panel,
.u4b-inbox { margin: 0; }
/* leg-D: canvas posting-slots day cells — card-sheen tiles, 11px/700 day
   heads, quiet 24px mono time chips. */
.u4b-slots-fallback {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
}
.u4b-slots-fallback section {
  display: grid;
  min-height: 104px;
  align-content: start;
  gap: 6px;
  padding: 10px 8px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
  text-align: center;
}
.u4b-slots-fallback strong { margin-bottom: 2px; color: var(--ink-72); font: 700 var(--text-xs)/1.3 var(--sans); }
.u4b-slots-fallback span { display: flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 24px; border: 1.5px solid var(--line-1); border-radius: 7px; background: var(--surf-3); color: var(--ink); font: var(--text-13) var(--mono); }
.u4b-slots-fallback .u4b-platform-glyph { width: 13px; height: 13px; }
.u4b-slots-fallback i { color: var(--ink-55); font: normal var(--text-13) var(--mono); }
.u4b-inbox { display: grid; gap: var(--space-3); }
.u4b-inbox > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.u4b-inbox h2 { font-size: var(--text-md); }
.u4b-proposals { display: grid; gap: var(--space-3); }
/* leg-D: canvas draft rows — 40x56 reel thumb, platform badge, the caption
   title over a quiet mono meta line, 1.5px hairline on the card-sheen. */
.u4b-proposal {
  display: grid;
  grid-template-columns: 40px auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--card-sheen), var(--surf-2);
}
.u4b-proposal__thumb {
  display: grid;
  width: 40px;
  height: 56px;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid var(--line-1);
  border-radius: 7px;
  background: var(--surf-0);
}
.u4b-proposal__thumb .v2-reel { width: 80%; height: 40px; }
.u4b-proposal__copy { min-width: 0; }
.u4b-proposal__copy h3 { margin: 0; overflow: hidden; color: var(--ink); font-size: var(--text-base); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.u4b-proposal__meta { display: block; margin-top: 2px; overflow: hidden; color: var(--ink-55); font: 500 var(--text-xs)/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.u4b-proposal__actions { display: flex; gap: var(--space-2); }
.u4b-proposal__outcome { display: grid; max-width: 230px; gap: 2px; padding: var(--space-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--ink-72); font-size: var(--text-xs); }
.u4b-proposal__outcome.is-ok { border-color: var(--line-3); }
.u4b-proposal__outcome.is-error { border-color: var(--danger); background: var(--danger-16); }

@keyframes u4bFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes u4bSheetIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes u4bPop {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes u4bSpin { to { transform: rotate(1turn); } }

/* breakpoint: compact */
@media (max-width: 640px) {
  .u4b-layer { padding: 0; }
  .u4b-sheet { max-height: 94vh; }
  .u4b-sheet__header,
  .u4b-screen-head,
  .u4b-post__body,
  .u4b-distribute__body,
  .u4b-autopilot__body { padding-right: 12px; padding-left: 12px; }
  .u4b-platform-list,
  .u4b-dials { grid-template-columns: 1fr; }
  .u4b-format-section { padding: var(--space-3) 12px 0; }
  .u4b-filmstrip-section,
  .u4b-composer-publish { padding-right: 12px; padding-left: 12px; }
  .u4b-quote-editor { margin-right: 12px; margin-left: 12px; }
  .u4b-slots-fallback { grid-template-columns: repeat(4, minmax(80px, 1fr)); overflow-x: auto; }
  /* leg-FIN (rev-3 M-F1): the embedded V2SlotsEditor grid keeps its 640px
     min-width (U4A block); on narrow screens the panel body scrolls it instead
     of clipping Thu-Sun and the add controls. Same escape the Queue's own
     slots modal already has (.v2q-modal { overflow-x: auto; }). */
  .u4b-slots-panel .v2-panel__body { overflow-x: auto; }
  .u4b-proposal { grid-template-columns: 40px auto minmax(0, 1fr); }
  .u4b-proposal__actions,
  .u4b-proposal__outcome { grid-column: 1 / -1; width: 100%; max-width: none; }
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .u4b-platform-list,
  .u4b-format-grid { grid-template-columns: 1fr; }
  .u4b-hashtags,
  .u4b-cover,
  .u4b-scrubber { align-items: stretch; flex-direction: column; }
  .u4b-segmented { display: grid; width: 100%; }
  .u4b-outcomes > div { grid-template-columns: auto minmax(0, 1fr); }
  .u4b-outcomes button { grid-column: 1 / -1; }
  .u4b-doors { display: grid; gap: 0; }
  .u4b-composer,
  .u4b-autopilot { width: 100%; max-height: 100vh; border-radius: 0; }
  .u4b-slots-fallback { grid-template-columns: repeat(3, minmax(80px, 1fr)); }
  .u4b-inbox > header { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .u4b-scrim,
  .u4b-sheet,
  .u4b-composer.is-overlay,
  .u4b-autopilot.is-overlay,
  .u4b-loading > span,
  .u4b-slide.is-loading::after {
    animation: none !important;
    transition: none !important;
  }
  .u4b-plan-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .u4b-sheet,
  .u4b-composer,
  .u4b-autopilot,
  .u4b-platform-chip,
  .u4b-calendar,
  .u4b-plan-day,
  .u4b-plan-card,
  .u4b-slide,
  .u4b-proposal,
  .u4b-outcomes > div {
    border: 1px solid CanvasText;
  }
  .u4b-platform-chip.is-active,
  .u4b-segmented button.is-active,
  .u4b-calendar__days button.is-active,
  .u4b-calendar__times button.is-active {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}

/* ===== V2 U5 ===== */
/* design-r4 leg-D: the Connect place recomposed to the design canvas — flat
   29px display title, dashed-ruler section heads, connected-account rows on
   the 2px card-sheen grammar (26px brand-token mark, 40px rounded-square
   avatar, display-name-first identity, quiet health dot), platform-washed
   connect cards with 44px marks, the API-keys panel / snippet cards / MCP
   tool table on the same 2px sheen panels with surf-0 wells. Tokens only;
   zero raw colors; zero theme branches. */
.v2-connect {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(var(--bar-h) + var(--space-7)) max(var(--space-5), env(safe-area-inset-right)) calc(var(--nav-h) + var(--space-7)) max(var(--space-5), env(safe-area-inset-left));
  color: var(--ink);
  font: 400 var(--text-m)/1.55 var(--sans);
  animation: v2ConnectEnter var(--t-base) var(--ease) both;
}
.v2-connect > * {
  width: min(920px, 100%);
  margin-right: auto;
  margin-left: auto;
}
.v2-connect-hero {
  margin-bottom: 28px;
}
.v2-connect-hero h1 {
  margin: 0 0 var(--space-1);
  font: 700 29px/1.1 var(--display);
  letter-spacing: -0.025em;
}
.v2-connect-hero p {
  margin: 0;
  color: var(--ink-55);
  font-size: var(--text-base);
}
.v2-connect-section + .v2-connect-section {
  margin-top: 36px;
}
.v2-connect-ruler {
  margin-bottom: var(--space-4);
}
.v2-connect-ruler .v2-ruler__eyebrow {
  white-space: nowrap;
}
.v2-connect-ruler .v2-ruler__spine {
  border-top-width: 1.5px;
}
.v2-connect-loading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-m);
  background: var(--surf-2);
  color: var(--ink-55);
  font-size: var(--text-s);
}
.v2-connect-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border: 1px solid var(--amber);
  border-radius: var(--radius-m);
  background: var(--amber-16);
  color: var(--ink-88);
  font-size: var(--text-s);
}
.v2-connect-notice--danger {
  border-color: var(--danger);
  background: var(--danger-16);
}
.v2-connect-social-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-connect-social-row {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 14px 16px;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--card-sheen), var(--surf-2);
}
.v2-connect-platform {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surf-0);
  color: var(--ink-72);
  font: 700 var(--text-13)/1 var(--sans);
}
.v2-connect-platform svg,
.v2-connect-agent-mark svg {
  width: 70%;
  height: 70%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.v2-connect-platform svg .is-fill {
  fill: currentColor;
  stroke: none;
}
.v2-connect-platform--instagram {
  border-color: var(--ig-28);
  background: var(--ig-16);
  color: var(--ig);
}
.v2-connect-platform--tiktok {
  border-color: var(--tt-28);
  background: var(--tt-16);
  color: var(--tt);
}
/* leg-FIN (rev-4 R2): X platform tint — same tokens the queue dots use */
.v2-connect-platform--x {
  border-color: var(--x-28);
  background: var(--x-16);
  color: var(--x);
}
.v2-connect-platform.is-large {
  width: 44px;
  height: 44px;
  border-radius: 13px;
}
.v2-connect-avatar {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surf-3);
  color: var(--ink-55);
  font: 700 var(--text-s)/1 var(--sans);
}
.v2-connect-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-connect-social-copy,
.v2-connect-key-copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}
.v2-connect-social-copy strong,
.v2-connect-key-copy strong {
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-connect-key-copy strong {
  font-size: var(--text-base);
}
.v2-connect-social-copy > span,
.v2-connect-key-copy code {
  overflow: hidden;
  color: var(--ink-55);
  font: 500 var(--text-xs)/1.4 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-connect-social-copy > .v2-connect-identity-note {
  margin-top: 1px;
  color: var(--ink-55);
  font: 400 var(--text-13)/1.4 var(--sans);
}
.v2-connect-health {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  margin-right: var(--space-1);
  color: var(--ink-72);
  font-size: var(--text-s);
}
.v2-connect-health-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--ink);
}
.v2-connect-health.is-attention {
  color: var(--amber);
}
.v2-connect-health.is-attention .v2-connect-health-dot {
  background: var(--amber);
}
.v2-connect-social-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.v2-connect-social-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 104px;
  padding: var(--space-5);
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--surf-2);
}
.v2-connect-social-card--instagram {
  border-color: color-mix(in srgb, var(--ig) 45%, transparent);
}
.v2-connect-social-card--tiktok {
  border-color: color-mix(in srgb, var(--tt) 45%, transparent);
}
.v2-connect-social-card--x {
  border-color: color-mix(in srgb, var(--x) 45%, transparent);
}
.v2-connect-social-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.v2-connect-social-card-copy strong {
  font-size: 17.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.v2-connect-social-card-copy span {
  color: var(--ink-72);
  font-size: 13.5px;
  line-height: 1.45;
}
.v2-connect-footnote {
  margin: var(--space-2) 2px 0;
  color: var(--ink-55);
  font-size: var(--text-s);
}
.v2-connect-key-panel,
.v2-connect-tools {
  overflow: hidden;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--card-sheen), var(--surf-2);
}
.v2-connect-key-panel {
  padding: var(--space-5);
}
.v2-connect-key-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}
.v2-connect-key-head > span {
  min-width: 0;
}
.v2-connect-key-head h2,
.v2-connect-tools h2 {
  margin: 0;
  font: 700 17.5px/1.25 var(--display);
  letter-spacing: -0.015em;
}
.v2-connect-key-head p {
  margin: var(--space-1) 0 0;
  color: var(--ink-55);
  font-size: var(--text-s);
}
.v2-connect-key-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.v2-connect-key-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;
  padding: 11px var(--space-3) 11px 14px;
  border: 1.5px solid var(--line-1);
  border-radius: 10px;
  background: var(--surf-0);
}
.v2-connect-key-used {
  flex: 0 0 auto;
  color: var(--ui-text-muted);
  font: 500 var(--text-13)/1.35 var(--mono);
  font-variant-numeric: tabular-nums;
}
.v2-connect-key-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}
/* R4-H C12: Revoke rests quiet (house hover-danger grammar, cf
   .v2-lib-act--danger); the red identity arrives on hover/keyboard focus.
   Behavior and the confirm dialog are untouched. */
.v2-connect-key-actions .v2-btn--danger {
  border-color: var(--line-1);
  background: var(--surf-3);
  color: var(--ink-55);
}
.v2-connect-key-actions .v2-btn--danger:hover:not(:disabled),
.v2-connect-key-actions .v2-btn--danger:focus-visible {
  border-color: var(--danger);
  background: var(--danger-16);
  color: var(--danger);
}
.v2-connect-key-empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-m);
  background: var(--surf-0);
  text-align: center;
}
.v2-connect-key-empty span {
  color: var(--ink-55);
  font-size: var(--text-s);
}
.v2-connect-snippet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.v2-connect-snippet-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: var(--space-4);
  border: 2px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--card-sheen), var(--surf-2);
}
.v2-connect-snippet-card > header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: var(--space-2);
}
.v2-connect-snippet-card > header strong {
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--text-md);
  font-weight: 650;
}
.v2-connect-snippet-card > header > span:last-child {
  padding: 1px 7px;
  border-radius: var(--radius-chip);
  background: var(--surf-3);
  color: var(--ink-55);
  font: 600 var(--text-13)/1.6 var(--mono);
}
.v2-connect-agent-mark {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--surf-0);
  color: var(--ink-72);
  font: 700 var(--text-xs)/1 var(--mono);
}
.v2-connect-agent-mark svg {
  stroke-width: 1.5;
}
.v2-connect-snippet-card > p {
  min-height: 58px;
  flex: 1 1 auto;
  margin: 0 0 var(--space-3);
  color: var(--ink-72);
  font-size: var(--text-s);
  line-height: 1.45;
}
.v2-connect-snippet {
  position: relative;
  min-height: 108px;
  padding: 10px 11px;
  border: 1.5px solid var(--line-1);
  border-radius: 9px;
  background: var(--surf-0);
}
.v2-connect-snippet code {
  display: block;
  padding-right: 58px;
  color: var(--ink-72);
  font: 500 var(--text-13)/1.55 var(--mono);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.v2-connect-snippet .v2-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}
.v2-connect-doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
  padding: 0 var(--space-1);
}
.v2-connect-doc-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--accent-text);
  font-size: var(--text-s);
  font-weight: 650;
  text-decoration: none;
}
.v2-connect-doc-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v2-connect-doc-links a:focus-visible {
  border-radius: var(--radius-s);
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.v2-connect-tools {
  padding: var(--space-2) var(--space-5);
}
.v2-connect-tools h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 14px 0 4px;
  color: var(--ink-55);
  font: 700 var(--text-13)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.v2-connect-tools h2 span {
  color: var(--ink-55);
}
.v2-connect-tool-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: 9px 0;
  border-top: 1.5px solid var(--line-1);
}
.v2-connect-tool-row code {
  color: var(--accent-text);
  font: 500 var(--text-s)/1.45 var(--mono);
  overflow-wrap: anywhere;
}
.v2-connect-tool-row span {
  color: var(--ink-72);
  font-size: 13.5px;
}
.v2-connect-modal-layer {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.v2-connect-modal-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: v2ConnectFade var(--t-fast) var(--ease) both;
}
.v2-connect-modal {
  position: relative;
  z-index: var(--z-content);
  width: min(440px, 100%);
  padding: var(--space-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--glass-sheet);
  color: var(--ink);
  box-shadow: var(--floor-lift);
  backdrop-filter: blur(18px);
  animation: v2ConnectPop var(--t-fast) var(--ease) both;
}
.v2-connect-modal.is-danger {
  border-color: var(--danger);
}
.v2-connect-modal h2 {
  margin: 0 0 var(--space-2);
  font: 700 var(--text-xl)/1.25 var(--display);
  letter-spacing: -0.015em;
}
.v2-connect-modal > p {
  margin: 0 0 var(--space-4);
  color: var(--ink-72);
  font-size: var(--text-m);
}
.v2-connect-modal .v2-field {
  margin: var(--space-4) 0;
}
.v2-connect-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.v2-connect-raw-key {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--line-acc);
  border-radius: var(--radius-m);
  background: var(--surf-0);
  color: var(--ink);
  font: 500 var(--text-s)/1.55 var(--mono);
  overflow-wrap: anywhere;
  user-select: all;
}
@keyframes v2ConnectEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes v2ConnectFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes v2ConnectPop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* breakpoint: tablet */
@media (max-width: 820px) {
  .v2-connect-social-cards,
  .v2-connect-snippet-grid {
    grid-template-columns: 1fr;
  }
  .v2-connect-snippet-card > p {
    min-height: 0;
  }
  .v2-connect-snippet {
    min-height: 92px;
  }
}
/* breakpoint: compact */
@media (max-width: 640px) {
  .v2-connect {
    padding-top: calc(var(--bar-h) + var(--space-5));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    padding-left: max(var(--space-4), env(safe-area-inset-left));
  }
  .v2-connect-social-row,
  .v2-connect-key-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .v2-connect-social-copy,
  .v2-connect-key-copy {
    flex-basis: calc(100% - 92px);
  }
  .v2-connect-health {
    min-height: 44px;
    margin-left: 92px;
  }
  .v2-connect-social-row > .v2-btn {
    margin-left: auto;
  }
  .v2-connect-key-used {
    display: flex;
    min-height: 44px;
    flex: 1 1 auto;
    align-items: center;
  }
  .v2-connect-key-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .v2-connect-social-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .v2-connect-social-card > .v2-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .v2-connect-key-head {
    align-items: stretch;
    flex-direction: column;
  }
  .v2-connect-tool-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}
/* breakpoint: phone */
@media (max-width: 480px) {
  .v2-connect-health {
    margin-left: 0;
  }
  .v2-connect-modal-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .v2-connect-modal-actions .v2-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-connect,
  .v2-connect-modal,
  .v2-connect-modal-scrim {
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .v2-connect-social-row,
  .v2-connect-social-card,
  .v2-connect-key-panel,
  .v2-connect-key-row,
  .v2-connect-snippet-card,
  .v2-connect-tools,
  .v2-connect-modal,
  .v2-connect-platform,
  .v2-connect-agent-mark {
    border: 1px solid CanvasText;
  }
  .v2-connect-health-dot {
    background: CanvasText;
  }
}

/* UI DOORS: the Webhooks panel. It reuses the key panel's well/row/health anatomy
   verbatim (same classes) and adds only what a webhook row needs that a key row does
   not: a URL that must wrap instead of truncating, and the event checklist inside the
   create dialog. Tokens only, no theme branch, 44px control floor. */
.v2-connect-hook-row > .v2-connect-key-copy strong {
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.v2-connect-hook-events {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 12px;
  border: 1.5px solid var(--line-1);
  border-radius: 12px;
  background: var(--surf-0);
}
.v2-connect-hook-events legend {
  padding: 0 6px;
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.v2-connect-hook-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 4px 2px;
  cursor: pointer;
}
.v2-connect-hook-event input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 12px;
  accent-color: var(--accent);
}
.v2-connect-hook-event > span {
  display: grid;
  gap: 2px;
  padding-top: 8px;
}
.v2-connect-hook-event code {
  font-size: var(--text-13);
  color: var(--ink);
}
.v2-connect-hook-event > span > span {
  font-size: var(--text-13);
  color: var(--ink-55);
}
@media (prefers-reduced-motion: reduce) {
  .v2-connect-hook-event {
    transition: none;
  }
}
@media (forced-colors: active) {
  .v2-connect-hook-events {
    border: 1px solid CanvasText;
  }
}

/* ===== RESULTS-FLOW LEG C (upload camera-angle questions) ===== */
/* ===== LEG C: UPLOAD CAMERA-ANGLE QUESTIONS (VBE_UPLOAD_ANGLES) =====
   RESULTS-FLOW+GALLERY-R2 train, leg C. The integrator appends this section to
   web/styles.css (it is NOT loaded on its own). Tokens-only contract: every
   color reads an existing var(--*) token; no raw color literals. The
   markup lives in web/screen-home.jsx (angleAskPanel + the v2 hub source
   choice wrapper). The lzUpRise keyframes are injected at runtime by
   screen-home's _homeKeyframes(), same as the sibling intake panels. */

.v2-angleask {
  width: min(520px, 92vw);
  margin-top: 16px;
  padding: var(--space-4);
  border-radius: 14px;
  border: 1px solid var(--ink-12);
  background: var(--ink-02);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  animation: lzUpRise var(--t-quick) var(--ease) both;
}
.v2-angleask__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.v2-angleask__title {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.v2-angleask__file {
  font-size: var(--text-2xs);
  color: var(--ui-text-muted);
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-angleask__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.v2-angleask__opts > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--ink-12);
  background: var(--ink-02);
  color: var(--ink);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.v2-angleask__opts > button:hover,
.v2-angleask__opts > button:focus-visible {
  border-color: var(--acc-40);
  background: var(--acc-08);
}
.v2-angleask__opts > button > strong {
  font-size: var(--text-sm);
  font-weight: 650;
}
.v2-angleask__opts > button > span {
  font-size: var(--text-xs);
  color: var(--ui-text-muted);
  line-height: 1.35;
}
.v2-angleask__cancel {
  align-self: flex-end;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--ui-text-muted);
  font-family: var(--sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  cursor: pointer;
}
.v2-angleask__cancel:hover {
  color: var(--ink-72);
}
.v2-angleask__source {
  width: min(520px, 92vw);
  margin-bottom: 14px;
}
/* breakpoint: phone */
@media (max-width: 480px) {
  .v2-angleask__opts {
    grid-template-columns: 1fr;
  }
}
/* ===== END LEG C ===== */

/* ===== RESULTS-FLOW LEG D (results gallery R2) ===== */
/* ══════════════════════════════════════════════════════════════════════════
   LEG D — GALLERY-R2 (round-2 Results layout, dark behind VBE_GALLERY_R2).
   APPEND-ONLY part for styles.css (integrator resolves). Tokens-only: every
   color/shadow/easing value derives from the existing global tokens (both
   themes resolve through them). New --v2r-* component tokens are declared on
   .v2r-results and are pure derivations of globals.
   The .v2r-* tree renders ONLY when window.__VBE_GALLERY_R2 is true, so the
   flag-off DOM never matches any selector below (byte-identical off-path).
   ══════════════════════════════════════════════════════════════════════════ */

.v2r-results {
  /* component tokens (derived, never raw values) */
  --v2r-rail-w: 312px;
  --v2r-card-bg: var(--surf-2);
  --v2r-line: var(--line-1);
  --v2r-line-strong: var(--line-2);
}

/* ---- header ---------------------------------------------------------------- */
.v2r-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.v2r-head__id { min-width: 0; }
.v2r-eyebrow { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; }
.v2r-eyebrow__num {
  font-size: var(--text-13); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-55); white-space: nowrap;
}
.v2r-eyebrow__dot, .v2r-meta__dot {
  width: 3px; height: 3px; border-radius: 3px; background: var(--ink-24); flex: 0 0 auto;
}
.v2r-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-13); letter-spacing: 0.14em; font-weight: 700;
}
.v2r-badge.is-rendered { color: var(--accent-text); }
.v2r-badge.is-rendering { color: var(--ink-55); }
.v2r-badge.is-partial { color: var(--amber); }
.v2r-badge__glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 999px;
  border: 1.5px solid var(--accent); font-size: var(--text-13);
}
.v2r-badge.is-rendering .v2r-badge__glyph {
  width: 9px; height: 9px; border: 0; background: var(--accent);
  animation: breathe calc(11.6667 * var(--t-micro)) var(--ease) infinite;   /* opacity-only keyframe, styles.css */
}
.v2r-badge.is-partial .v2r-badge__glyph { border-color: var(--amber); }
.v2r-titlerow { display: flex; align-items: center; gap: 9px; min-width: 0; }
.v2r-title {
  margin: 0; font: 700 clamp(22px, 3vw, 31px)/1.04 var(--display);
  letter-spacing: -0.03em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2r-autotag {
  display: inline-flex; align-items: center; height: 19px; padding: 0 8px;
  border-radius: 999px; border: 1px solid var(--v2r-line); background: var(--surf-3);
  font-size: var(--text-13); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ui-text-muted); flex: 0 0 auto;
}
.v2r-meta {
  margin-top: 9px; display: flex; align-items: center; gap: 12px;
  font-size: var(--text-13); color: var(--ui-text-muted);
}
.v2r-meta b { color: var(--ink); font-weight: 600; }
.v2r-head__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.v2r-skipchip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--amber-40); background: var(--amber-14);
  font-size: var(--text-13); font-weight: 600; color: var(--amber); white-space: nowrap;
}

/* ---- view toggle (Feed | Grid) --------------------------------------------- */
.v2r-viewbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 18px; flex-wrap: wrap;
}
.v2r-viewtoggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--v2r-line); background: var(--v2r-card-bg);
}
.v2r-viewtoggle__btn {
  height: 26px; padding: 0 14px; border-radius: 999px; border: 0;
  background: transparent; color: var(--ink-55);
  font: 600 var(--text-13)/1 var(--sans); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.v2r-viewtoggle__btn.is-on { background: var(--acc-16); color: var(--accent-text); cursor: default; }
.v2r-viewtoggle__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* handoff-3 (canvas 733-739): grid density control — mono eyebrow + a
   segmented Compact/Regular/Large group in the viewtoggle idiom. */
.v2r-density { display: inline-flex; align-items: center; gap: 9px; }
.v2r-density__eyebrow {
  font-size: var(--text-13); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-text-muted);
}
.v2r-density__opts {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--v2r-line); background: var(--v2r-card-bg);
}
.v2r-density__btn {
  height: 26px; padding: 0 12px; border-radius: var(--radius-xs); border: 0;
  background: transparent; color: var(--ink-55);
  font: 600 var(--text-13)/1 var(--sans); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.v2r-density__btn.is-on { background: var(--acc-16); color: var(--accent-text); cursor: default; }
.v2r-density__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- feed: rail + focus ----------------------------------------------------- */
.v2r-shorts {
  display: grid; grid-template-columns: var(--v2r-rail-w) minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.v2r-rail {
  background: var(--card-sheen), var(--v2r-card-bg); border: 2px solid var(--v2r-line);
  border-radius: 16px; padding: 12px 8px;
  position: sticky; top: calc(var(--bar-h) + 14px);
}
.v2r-rail__tools { display: flex; align-items: center; gap: 8px; padding: 2px 6px 12px; }
.v2r-rail__filter {
  flex: 1; min-width: 0; height: 32px; padding: 0 12px;
  background: var(--surf-0); border: 1px solid var(--v2r-line); border-radius: 8px;
  color: var(--ink); font: 500 var(--text-13)/1 var(--sans);
}
.v2r-rail__filter::placeholder { color: var(--ui-text-muted); }
.v2r-rail__filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.v2r-rail__list { max-height: 460px; overflow-y: auto; }
.v2r-rail__empty { padding: 14px 10px; font-size: var(--text-13); color: var(--ink-55); }
.v2r-rail__foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 12px 8px 2px; margin-top: 8px;
  border-top: 1px solid var(--v2r-line);
  font-size: var(--text-13); color: var(--ui-text-muted);
}
.v2r-rail__spinner {
  width: 9px; height: 9px; flex: 0 0 auto;
  border: 1px solid var(--line-1); border-top-color: var(--accent);
  border-radius: var(--radius-pill); animation: spinSlow var(--t-slow) linear infinite;
}

.v2r-railrow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 11px; border: 0; border-left: 2px solid transparent;
  border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--ink-72); font-family: var(--sans);
  transition: background var(--t-fast) var(--ease);
}
.v2r-railrow:hover { background: var(--ink-04); }
.v2r-railrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.v2r-railrow.is-active { background: var(--surf-3); border-left-color: var(--accent); }
.v2r-railrow.is-variant { padding: 7px 11px 7px 22px; min-height: 34px; }
.v2r-railrow__mark { flex: 0 0 auto; width: 15px; text-align: center; font-size: var(--text-13); color: var(--ui-text-muted); }
.v2r-railrow__mark.v2-tone--edit { color: var(--edit); }
.v2r-railrow__mark.v2-tone--done { color: var(--ink); }
.v2r-railrow__mark.v2-tone--neutral { color: var(--ink-24); }
.v2r-railrow__rank { flex: 0 0 20px; font-size: var(--text-13); color: var(--ui-text-muted); }
.v2r-railrow.is-variant .v2r-railrow__rank { color: var(--ink-24); }
.v2r-railrow__title {
  flex: 1; min-width: 0; font-size: var(--text-13); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2r-railrow.is-active .v2r-railrow__title { color: var(--ink); font-weight: 600; }
.v2r-railrow.is-variant .v2r-railrow__title { font-size: var(--text-13); color: var(--ink-55); }
.v2r-railrow__sel {
  flex: 0 0 auto; width: 16px; text-align: center; font-size: var(--text-13);
  color: var(--ink-24); cursor: pointer;
}
.v2r-railrow__sel.is-selected { color: var(--accent-text); }
.v2r-railrow__score { flex: 0 0 auto; font-size: var(--text-13); font-weight: 600; color: var(--ink-55); }
.v2r-railrow.is-active .v2r-railrow__score { color: var(--ink); }

/* ---- X-tab raw / X-edit switcher -------------------------------------------- */
.v2r-xwrap { min-width: 0; }
.v2r-xswitch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  margin-bottom: 8px; border-radius: 10px;
  border: 1px solid var(--v2r-line); background: var(--surf-0);
}
.v2r-xswitch__btn {
  height: 26px; padding: 0 12px; border-radius: 7px; border: 0;
  background: transparent; color: var(--ink-55);
  font: 600 var(--text-13)/1 var(--sans); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.v2r-xswitch__btn.is-on { background: var(--acc-16); color: var(--accent-text); cursor: default; }
.v2r-xswitch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- grid host (the shipped GalleryGrid lays out absolute inset:0) ---------- */
.v2r-gridhost { position: relative; min-height: 70vh; border-radius: 16px; overflow: hidden; }

/* Overflow/scroll containers can crop the global outside focus outline. These
   keyboard-only inset fallbacks preserve a complete ring at every edge. */
.v2u-railrow:focus-visible,
.v2r-railrow:focus-visible,
.u4b-sheet button:focus-visible,
.v2r-gridhost button:focus-visible,
.v2r-gridhost [data-player]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent) !important;
}

/* ---- responsive: rail stacks ABOVE the player; page never scrolls sideways -- */
.v2r-results { min-width: 0; }
.v2r-body { min-width: 0; }
/* breakpoint: tablet */
@media (max-width: 820px) {
  .v2r-shorts { grid-template-columns: 1fr; }
  .v2r-rail { position: static; order: -1; }
  .v2r-rail__list { max-height: 240px; }
  .v2r-title { white-space: normal; }
}

/* ===== PHASE-3 SWEEP: connect locked/empty state (both sections gated off) ===== */
.v2-connect-locked { max-width: 560px; }
.v2-connect-locked__lead { margin: 0 0 10px; font-size: var(--text-base); line-height: 1.55; color: var(--ink-72); }
.v2-connect-locked__note { margin: 0; font-family: var(--mono); font-size: var(--text-xs); color: var(--ui-text-muted); }

/* ===== design R2 tranche 2 (legs 4/6): studio hero + score rings =====
   Placed OUTSIDE the U3B/atoms lock slices on purpose: the hero chrome is
   photo-overlay treatment (dc-verbatim scrims/paper/brand literals that are
   deliberately theme-independent) and consumes the R2 scale tokens
   (--radius-panel/--radius-pill/--accent-2) plus per-phase custom props,
   which the U3B inventory predates. */

/* ===== design R2 leg 4 — Studio hero art pass (VBE_UI_STUDIO_HERO_V2) =====
   dc 512-545: the 16:9 hero frame — the real thumbnail full-bleed under
   pointer-events:none chrome (brand wash, scrims, scanlines, reticle corners,
   HUD pills, title chip, gradient percent) — plus the phase tracker with the
   traveling linkPulse connector. Every rule here is scoped under .is-hero /
   .v2u-hero* / .v2u-htrack*, so the flag-off calm card is untouched. */
.v2u-calm__card.is-hero {
  max-width: 560px;
  margin: 0 auto;
  /* R4-F (canvas 567): quiet 1px hairline, 20px radius, the plain floor
     shadow — the acc-glow lift belonged to the truncated-canvas guess. The
     card is a flex column of plate / artwork / plate, so the 16:9 lives on
     the ARTWORK (thumb) alone, not the whole card. */
  border: 1px solid var(--line-1);
  border-radius: var(--radius-xl);
  box-shadow: var(--floor);
  aspect-ratio: auto;
}
.v2u-calm__card.is-hero .v2u-calm__thumb {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
/* dc empty tile: warm paper base while no frame exists ("Random frame,
   extracted from your upload" territory) — fixed light base in BOTH themes, so
   the placeholder glyph + note pin to a dark ink that stays readable on it. */
.v2u-calm__card.is-hero .v2u-calm__thumb.is-placeholder { padding: var(--space-6); background: var(--hero-paper); }
.v2u-calm__card.is-hero .v2u-calm__ph-frame { color: var(--hero-paper-ink); }
.v2u-calm__card.is-hero .v2u-calm__ph-note { color: var(--hero-paper-ink); opacity: 0.66; }
.v2u-calm__card.is-hero .v2u-calm__ph-icon { opacity: 0.5; }
.v2u-calm__card.is-hero .v2u-calm__ph-title { color: var(--hero-paper-ink); }
.v2u-hero__wash {
  position: absolute;
  /* R4-F: bottom plate is the canvas 56px (was 64) */
  inset: 40px 0 56px;
  pointer-events: none;
  mix-blend-mode: overlay;
  /* R4-F (canvas 580): the brand wash sits at .5 */
  opacity: 0.5;
  background: linear-gradient(125deg,
    color-mix(in srgb, var(--accent) 30%, transparent),
    color-mix(in srgb, var(--edit) 34%, transparent) 38%,
    color-mix(in srgb, var(--accent-2) 30%, transparent) 72%,
    color-mix(in srgb, var(--accent) 28%, transparent));
  background-size: 260% 260%;
  animation: gradDrift calc(100 * var(--t-micro)) var(--ease) infinite;
}
.v2u-hero__scrim {
  position: absolute;
  inset: 40px 0 56px;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 110%, var(--hero-shade-70), transparent 62%),
    radial-gradient(70% 50% at 50% 48%, var(--hero-shade-30), transparent 70%);
}
.v2u-hero__scan {
  position: absolute;
  inset: 40px 0 56px;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(0deg,
    var(--hero-scanline) 0,
    var(--hero-scanline) 1px,
    transparent 1px,
    transparent 3px);
}
/* dc .reticle-xl: viewfinder corner brackets, pure background-image stacks */
.v2u-hero__reticle {
  position: absolute;
  inset: 54px 14px 70px;
  pointer-events: none;
  opacity: 0.8;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-position:
    top left, top left, top right, top right,
    bottom left, bottom left, bottom right, bottom right;
  background-size:
    24px 3px, 3px 24px, 24px 3px, 3px 24px,
    24px 3px, 3px 24px, 24px 3px, 3px 24px;
}
.v2u-hero__plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 40px;
  /* R4-F (canvas 568): 14px plate inset */
  padding: 0 14px;
  background: color-mix(in srgb, var(--surf-0) 92%, transparent);
  pointer-events: none;
}
.v2u-hero__plate.is-top { order: -1; border-bottom: 1px solid var(--line-1); }
.v2u-hero__hud {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.v2u-hero__hud.is-clock { flex: 0 0 auto; }
.v2u-hero__pill-text {
  /* R4-F (canvas 571): 10.5px mono at ink-72 */
  font-size: var(--text-13);
  letter-spacing: 0.03em;
  color: var(--ink-72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2u-hero__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--radius-pill); }
.v2u-hero__dot.is-live { background: var(--accent); animation: breathe calc(13.3333 * var(--t-micro)) var(--ease) infinite; }
.v2u-hero__dot.is-rec { background: var(--danger); }
/* bottom row rides the existing overlay: kill the theme scrim (the hero has
   its own), let the chrome pass pointer events, blow the percent numeral up
   to the dc 36px ink->accent gradient fill. */
.v2u-calm__card.is-hero { display: flex; flex-direction: column; }
.v2u-calm__card.is-hero .v2u-calm__thumb { order: 0; }
.v2u-calm__card.is-hero .v2u-calm__overlay {
  position: static;
  order: 1;
  display: flex;
  align-items: center;
  /* R4-F (canvas 585): 56px plate, 16px inset, 14px gap */
  gap: 14px;
  height: 56px;
  padding: 0 var(--space-4);
  background: color-mix(in srgb, var(--surf-0) 92%, transparent);
  border-top: 1px solid var(--line-1);
  pointer-events: none;
}
.v2u-calm__card.is-hero .v2u-calm__pct {
  min-width: 0;
  font: 800 36px/1 var(--display);
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--ink), var(--accent) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -- the phase tracker (dc 537-545; per-phase colors via the dc cols cycle) -- */
.v2u-htrack {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  /* R4-F (canvas 591): --space-7 above the track */
  margin: var(--space-7) auto 0;
}
/* R3 §4.4: color says STATUS, never position. One hue for the whole track;
   done = filled, active = ringed + pulse, pending = neutral. The old is-h<i%5>
   position cycle (blue/purple/teal) made three adjacent steps look like three
   different meanings and let the lone animated connector read as "progress
   starts here". Retired. */
.v2u-htrack { --htc: var(--accent); }
.v2u-htrack__step { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; }
.v2u-htrack__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: transparent;
  font: 800 var(--text-13)/1 var(--mono);
}
.v2u-htrack__name { font: 500 var(--text-13)/1.2 var(--sans); letter-spacing: 0.02em; color: var(--ui-text-muted); white-space: nowrap; }
.v2u-htrack__step.is-done .v2u-htrack__dot {
  border-color: var(--htc);
  background: var(--htc);
  color: var(--hero-dot-ink);
  box-shadow: 0 6px 18px -8px var(--htc);
}
.v2u-htrack__step.is-active .v2u-htrack__dot {
  border-color: var(--htc);
  /* R4-F (canvas 2561): the active ring sits on the 16% tint */
  background: color-mix(in srgb, var(--htc) 16%, transparent);
  color: var(--htc);
  animation: pulseRing calc(15 * var(--t-micro)) var(--ease) infinite;
}
/* R4-F (canvas 2569): lit names are INK-72, weight is what changes — the
   full canvas never colors the phase names with the accent. */
.v2u-htrack__step.is-done .v2u-htrack__name,
.v2u-htrack__step.is-active .v2u-htrack__name { color: var(--ink-72); font-weight: 700; }
/* the connector INTO phase i carries phase i's status/color; active = the
   traveling light (two-layer background-image, dc 2343-2345). */
.v2u-htrack__link { flex: 1 1 auto; min-width: 14px; height: 2px; margin: var(--space-3) var(--space-2) 0; border-radius: 2px; background: var(--line-1); }
.v2u-htrack__link.is-done { background: color-mix(in srgb, var(--htc) 45%, transparent); }
/* the connector INTO the active step keeps the same 45% lit base as the done
   connectors (the line is CONTINUOUS from step 0), with the traveling light
   layered on top — current position on an already-lit path. */
.v2u-htrack__link.is-active {
  background-image:
    linear-gradient(90deg, transparent, var(--hero-white), transparent),
    linear-gradient(90deg,
      color-mix(in srgb, var(--htc) 45%, transparent),
      color-mix(in srgb, var(--htc) 45%, transparent));
  background-size: 50% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  animation: linkPulse var(--t-cove) linear infinite;
}

/* -- R3 §4.7: per-format status chips under the phase track ------------- */
.v2u-fmtchips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  /* R4-F (canvas 602): --space-5 above the chip row */
  margin: var(--space-5) auto 0;
  max-width: 560px;
}
.v2u-fmtchips__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* R4-F (canvas 604): 26px chips on surf-2, 12px inset */
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  background: var(--surf-2);
  font: 600 var(--text-13)/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--ink-55);
}
.v2u-fmtchips__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--ink-24); }
.v2u-fmtchips__chip.is-running { border-color: var(--acc-40); color: var(--accent-text); }
.v2u-fmtchips__chip.is-running .v2u-fmtchips__dot { background: var(--accent); animation: breathe calc(13.3333 * var(--t-micro)) var(--ease) infinite; }
.v2u-fmtchips__chip.is-done { color: var(--ink); }
/* R4-F (canvas pfRow 2539): Ready reads INK — done is white, not accent */
.v2u-fmtchips__chip.is-done .v2u-fmtchips__dot { background: var(--ink); }
.v2u-fmtchips__chip.is-failed { border-color: var(--danger-40); color: var(--danger); }
.v2u-fmtchips__chip.is-failed .v2u-fmtchips__dot { background: var(--danger); }

/* ===== design R2 leg 6 — score-as-shape + player reticle (VBE_UI_SCORE_RING) =====
   dc _scoreRing (2038-2040) + grid-card markup (821-824) + player reticle
   (717). Band color rides the --score-band custom prop the atom sets inline
   (accent >=90 / edit 80-89 / --ink-38 below). Flag off => none of these
   classes mount. */
.v2-scorering {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  vertical-align: middle;
}
.v2-scorering svg { display: block; }
.v2-scorering__track { stroke: var(--line-1); }
.v2-scorering__arc { stroke: var(--score-band, var(--ink-38)); transition: stroke-dashoffset var(--t-base) var(--ease); }
.v2-scorering__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--ink-72);
  line-height: 1;
}
/* the focused-player viewfinder (dc 717: reticle-xl, inset 10, opacity .7) */
.v2u-player__reticle {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  opacity: 0.7;
  z-index: var(--z-content-control);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-position:
    top left, top left, top right, top right,
    bottom left, bottom left, bottom right, bottom right;
  background-size:
    24px 3px, 3px 24px, 24px 3px, 3px 24px,
    24px 3px, 3px 24px, 24px 3px, 3px 24px;
}

/* ===== design R3 leg 5 — carousel gallery tools ========================
   The 4:5 artwork owns the card; utility chrome stays compact, neutral, and
   token-driven. The lightbox follows the shared modal/drawer scrim + glass
   grammar and uses the shared focus/scroll hooks in carousel-section.jsx. */
.v2u-car-section {
  margin: 0 0 var(--space-7);
  padding: 0 0 var(--space-7);
  border-bottom: 1px solid var(--line-1);
}
.v2u-car-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.v2u-car-section__eyebrow {
  color: var(--accent-text);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.v2u-car-section__total {
  color: var(--ink-55);
  font-size: var(--text-xs);
}
.v2u-car-section__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-1);
}
.v2u-car-section__format {
  color: var(--ink-55);
  font-size: var(--text-s);
  white-space: nowrap;
}
.v2u-car-grid {
  display: grid;
  /* R4-F (canvas 1031): 360px floor, 20px gutters */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  align-items: start;
  gap: var(--space-5);
}
.v2u-car-card {
  /* R4-F (canvas cardWrapStyle 2771): sheened surf-2 panel on the strong 2px
     hairline, 18px radius, edge-to-edge sections (head/strip/caption/actions
     carry their own insets), overflow clipped for the hairline dividers. */
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0;
  border: 2px solid var(--line-2);
  border-radius: var(--radius-panel);
  background: var(--card-sheen), var(--surf-2);
  overflow: hidden;
}
.v2u-car-card.is-held { opacity: 0.6; }

.v2u-car-pager {
  display: flex;
  /* R4-F (canvas 1047): 10px gaps, 16px side insets, 12px under the strip */
  gap: 10px;
  padding: 0 var(--space-4) var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.v2u-car-slide {
  position: relative;
  flex: 0 0 auto;
  /* R4-F (canvas 1049): the 120px 4:5 thumb tile */
  width: 120px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-0);
  scroll-snap-align: start;
}
.v2u-car-slide__opener {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}
.v2u-car-slide__opener:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
.v2u-car-slide__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-quick) var(--ease), filter var(--t-quick) var(--ease);
}
.v2u-car-slide__opener:hover .v2u-car-slide__image {
  filter: brightness(0.92);
  transform: scale(1.012);
}
/* (.v2u-car-slide__count retired — R4-F: the canvas counts ONCE per strip via
   .v2u-car-strip__count, not per slide.) */

/* GalleryGrid owns this overlay inline; the Results host supplies the shared
   plate law without changing the shipped card component. */
.v2r-gridhost [aria-label="Banner text"] {
  border-color: var(--line-1) !important;
  background: color-mix(in srgb, var(--surf-0) 92%, transparent) !important;
}

.v2u-car-not-ready {
  display: grid;
  position: relative;
  place-items: center;
  /* R4-F: the card is edge-to-edge now; the placeholder carries its own inset */
  width: auto;
  margin: 0 var(--space-4) var(--space-3);
  max-height: 320px;
  aspect-ratio: 4 / 5;
  padding: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-0);
  text-align: center;
}
.v2u-car-not-ready__title {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: var(--text-m);
  font-weight: 650;
}
.v2u-car-not-ready__copy {
  max-width: 260px;
  color: var(--ink-55);
  font-size: var(--text-s);
  line-height: 1.5;
}

.v2u-car-title-row {
  /* R4-F (canvas 1035): title left, archetype chip right */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.v2u-car-title {
  min-width: 0;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2u-car-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--ink-55);
  font-size: var(--text-s);
}
.v2u-car-grade {
  /* R4-F (canvas 1039-1044): bare dot meter + mono "N/10" — the pill chrome
     is retired; tone classes color the FILLED dots (accent >= 8, edit below). */
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.v2u-car-grade__dots { display: inline-flex; align-items: center; gap: 2.5px; }
.v2u-car-grade__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--ink-16);
  opacity: 1;
}
.v2u-car-grade.is-accent .v2u-car-grade__dot.is-filled { background: var(--accent); }
.v2u-car-grade.is-edit .v2u-car-grade__dot.is-filled { background: var(--edit); }
.v2u-car-grade.is-low .v2u-car-grade__dot.is-filled { background: var(--edit); }
.v2u-car-archetype {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surf-3);
  color: var(--ink-72);
  font-size: var(--text-xs);
  font-weight: 600;
}
.v2u-car-slide-count,
.v2u-car-format { flex: 0 0 auto; }

.v2u-car-caption {
  /* R4-F (canvas 1056): a hairline SECTION of the card, not a nested box */
  overflow: hidden;
  border: 0;
  border-top: 1.5px solid var(--line-1);
  border-radius: 0;
  background: none;
}
.v2u-car-caption__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  color: var(--ink-72);
  font: 600 var(--text-sm)/1 var(--sans);
  text-align: left;
  cursor: pointer;
}
.v2u-car-caption__toggle:hover { color: var(--ink); background: var(--ink-02); }
.v2u-car-caption__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.v2u-car-caption__chevron {
  display: inline-flex;
  color: var(--ink-55);
  /* R4-F (canvas 1057 caretStyle): closed points RIGHT, open rotates to down */
  transform: none;
  transition: transform var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.v2u-car-caption.is-open .v2u-car-caption__chevron { color: var(--ink-72); transform: rotate(90deg); }
.v2u-car-caption__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-quick) var(--ease);
}
.v2u-car-caption.is-open .v2u-car-caption__reveal { grid-template-rows: 1fr; }
.v2u-car-caption__inner { min-height: 0; overflow: hidden; }
.v2u-car-caption__rows {
  /* R4-F (canvas 1059): plain stacked sections, no per-row rules */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.v2u-car-caption__row {
  padding: 0;
  border-bottom: 0;
}
.v2u-car-caption__copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 6px;
}
.v2u-car-caption__label {
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.v2u-car-caption__value {
  color: var(--ink-72);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.v2u-car-copy-btn,
.v2u-car-icon-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--ink-02);
  color: var(--ink-55);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.v2u-car-copy-btn:hover,
.v2u-car-icon-btn:hover { border-color: var(--line-2); background: var(--ink-08); color: var(--ink); }
.v2u-car-copy-btn:focus-visible,
.v2u-car-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v2u-car-caption__keyword-wrap {
  /* R4-F (canvas 1064-1066): pill first, helper line under it */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.v2u-car-caption__keyword {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--acc-16);
  color: var(--accent-text);
  font: 700 var(--text-13)/1 var(--mono);
  letter-spacing: 0.04em;
}
.v2u-car-caption__helper {
  color: var(--ui-text-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}
.v2u-car-caption__footer { padding: var(--space-1) var(--space-4) var(--space-4); }

.v2u-car-actions {
  /* R4-F (canvas 1072): the action row is the card's last hairline section */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 14px var(--space-4);
  border-top: 1.5px solid var(--line-1);
}
.v2u-car-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 var(--space-3);
  border: 1.5px solid var(--line-2);
  border-radius: 9px;
  background: var(--surf-3);
  color: var(--ink);
  font: 600 13px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), color var(--t-quick) var(--ease);
}
.v2u-car-action:hover { border-color: var(--line-3); background: var(--ink-04); }
.v2u-car-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v2u-car-action.is-primary {
  /* R4-F (canvas 1068): "Copy full caption" is a quiet full-width ghost */
  width: 100%;
  min-height: 36px;
  border-color: var(--line-2);
  background: var(--surf-3);
  color: var(--ink);
}
.v2u-car-action.is-primary:hover { border-color: var(--line-3); background: var(--ink-04); }
.v2u-car-action.is-copied { border-color: var(--acc-40); background: var(--acc-14); color: var(--accent-text); }
.v2u-car-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.v2u-car-lightbox-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.v2u-car-lightbox__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(12px);
  animation: v2uCarFade var(--t-quick) var(--ease) both;
}
.v2u-car-lightbox {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: 44px minmax(0, auto) 44px;
  align-items: center;
  gap: clamp(var(--space-2), 2vw, var(--space-5));
  max-width: 100%;
  max-height: 100%;
  color: #fff;
  animation: v2uCarFade var(--t-quick) var(--ease) both;
}
.v2u-car-lightbox__figure {
  width: min(68vw, calc((100dvh - 64px) * 0.8));
  max-width: 1080px;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  background: #000;
  box-shadow: var(--floor-lift);
}
.v2u-car-lightbox__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.v2u-car-lightbox__counter {
  position: fixed;
  top: max(var(--space-4), var(--safe-top));
  left: 50%;
  z-index: var(--z-content-control);
  min-width: 48px;
  padding: 7px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surf-0) 92%, transparent);
  color: var(--ink-88);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}
.v2u-car-lightbox__tools {
  position: fixed;
  top: max(var(--space-4), var(--safe-top));
  right: var(--space-4);
  z-index: var(--z-content-control);
  display: flex;
  gap: var(--space-2);
}
.v2u-car-lightbox .v2u-car-icon-btn {
  width: 40px;
  height: 40px;
  border-color: rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.62);
  color: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);
}
.v2u-car-lightbox .v2u-car-icon-btn:hover { border-color: rgba(255,255,255,0.32); color: #fff; }
.v2u-car-lightbox__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.52);
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease), color var(--t-quick) var(--ease), opacity var(--t-quick) var(--ease);
}
.v2u-car-lightbox__arrow.is-prev svg { transform: rotate(180deg); }
.v2u-car-lightbox__arrow:hover:not(:disabled) { border-color: rgba(255,255,255,0.36); background: rgba(0,0,0,0.72); color: #fff; }
.v2u-car-lightbox__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.v2u-car-lightbox__arrow:disabled { opacity: 0.22; cursor: default; }
@keyframes v2uCarFade { from { opacity: 0; } to { opacity: 1; } }

/* breakpoint: compact */
@media (max-width: 640px) {
  .v2u-car-grid { grid-template-columns: minmax(0, 1fr); }
  .v2u-car-section__format { display: none; }
  .v2u-car-lightbox {
    display: block;
    width: 100%;
  }
  .v2u-car-lightbox__figure {
    width: min(calc(100vw - 32px), calc((100dvh - 72px) * 0.8));
    margin: 0 auto;
  }
  .v2u-car-lightbox__arrow { position: fixed; top: 50%; z-index: var(--z-content-control); transform: translateY(-50%); }
  .v2u-car-lightbox__arrow.is-prev { left: var(--space-2); }
  .v2u-car-lightbox__arrow.is-next { right: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .v2u-car-slide__image,
  .v2u-car-caption__chevron,
  .v2u-car-caption__reveal,
  .v2u-car-copy-btn,
  .v2u-car-icon-btn,
  .v2u-car-action,
  .v2u-car-lightbox__scrim,
  .v2u-car-lightbox,
  .v2u-car-lightbox__arrow {
    animation: none !important;
    transition: none !important;
  }
  .v2u-car-slide__opener:hover .v2u-car-slide__image { transform: none; }
}

/* ===== R4-M light-theme (canvas port) =====
   Leg-M's only NEW rule. The app shell's inner vignette was an inline
   box-shadow literal in app.jsx (rgba(0,0,0,.6)) — unreachable by the token
   system, so any transparent screen over the stage (Connect) sat in a dirty
   grey ring in light. The div now carries this class; the dark computed value
   is byte-identical to the old inline style, and light resolves through
   --stage-vignette to the canvas light vignette's whisper weight. */
.v2-stage-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: var(--stage-vignette);
  /* ===== R4-M light-theme (canvas port) end ===== */
}

/* ===== R4-E Account (canvas port) ===== */
/* design-r4 leg-E: the Account screen recomposed to the design canvas
   (dc §1247-1340 + the account state at dc 2820-2905). Everything here is a
   NEW rule scoped under .v2-u7-account / its own leg-E classes; in-place
   realignments of pre-existing rules live inside the V2 U7 section above.
   Token-only, zero raw hex, zero [data-theme] branches, zero purple. */

/* Canvas card anatomy (dc 1258/1284/1298/1310/1323): every account panel is a
   sheened surf-2 card behind a 2px line-2 frame, with no floor shadow. The
   selected card swaps the frame to line-acc and adds the inset accent ring
   plus the canvas's soft accent halo (dc 2837, current tier card). */
.v2-u7-account .v2-panel {
  border: 2px solid var(--line-2);
  background: var(--card-sheen), var(--surf-2);
  box-shadow: none;
}
.v2-u7-account .v2-panel.is-selected {
  border-color: var(--line-acc);
  box-shadow: inset 0 0 0 1px var(--acc-16), 0 20px 50px -26px var(--acc-60);
}

/* dc 2841/2871: the at-rest toggle is a surf-3 pill behind a 1.5px line-acc
   hairline (the lit accent state is realigned in the U7 section above). */
.v2-u7-account .v2-toggle {
  border: 1.5px solid var(--line-acc);
  background: var(--surf-3);
}

/* dc 1301-1302 + 2824-2826: usage meters — 14px head with an ink mono figure,
   radius-chip rail on surf-0, and the accent-to-teal gradient fill. */
.v2-u7-account .v2-meter__label { color: var(--ink-88); font: 600 var(--text-base)/1.35 var(--sans); }
.v2-u7-account .v2-meter__value { color: var(--ink); font: 500 var(--text-base)/1 var(--mono); }
.v2-u7-account .v2-meter__track { border-radius: var(--radius-chip); }
.v2-u7-account .v2-meter__fill {
  border-radius: var(--radius-chip);
  background: linear-gradient(90deg, var(--accent), var(--edit));
}

/* leg-E: the current-plan facts stack (summary line, allowance fact, and the
   quiet plans-coming-soon line) sits left of the account actions. */
.v2-u7-plan-summary__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.v2-u7-plan-summary__copy .v2-u7-meta { margin-top: 0; }

/* dc 1268-1271: tier-card head — the plan name reads left in the 17.5px display
   voice while the "Current" marker floats right as a chip (non-current cards
   carry no marker on the canvas, so their plain "Plan" eyebrow is hidden). */
.v2-u7-tier-grid .v2-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.v2-u7-tier-grid .v2-panel__title { font-size: 17.5px; }
/* order:2 floats the chip right while a chip-less (non-current) title stays
   pinned left — row-reverse would strand a lone title at the right edge. */
.v2-u7-tier-grid .v2-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  order: 2;
  height: 20px;
  margin-bottom: 0;
  padding: 0 9px;
  border: 1.5px solid var(--line-acc);
  border-radius: var(--radius-chip);
  background: var(--acc-16);
  color: var(--accent-text);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.v2-u7-tier-grid .v2-panel:not(.is-selected) .v2-panel__eyebrow { display: none; }

/* dc 1313-1315: toggle rows share the same title/sub voice as every other
   preference row — 14.5px ink over 11.5px ink-55 (the atom's 11px form-label
   voice stays for real form fields elsewhere). */
.v2-u7-pref-list .v2-field--toggle .v2-field__label {
  color: var(--ink);
  font: 400 14.5px/1.3 var(--sans);
}
.v2-u7-pref-list .v2-field--toggle .v2-field__hint {
  color: var(--ink-55);
  font-size: var(--text-13);
  line-height: 1.4;
  /* ===== end R4-E ===== */
}

/* ===== R4-F Studio+Results (canvas reconciliation) ===== */
/* design-r4 leg-F: every rule below reconciles the live Studio + Results
   surfaces against the FULL 3,429-line design canvas (.cc2dx/live-canvas.html)
   — the earlier train worked from its first 2,101 lines and never saw the
   dc-script style bindings (canvas 2148-3427). Append-only: new selectors and
   cascade-position overrides of atom/LEG-D rules live HERE; property edits to
   existing studio/results rules were made in place in their own sections.
   Tokens only; zero purple; reduced-motion guarded at the end of the block. */

/* -- studio: the ambient section glow (canvas 76/79: a 760x540 accent bloom
      blurred 95px behind the building column; Results suppresses the shared
      glow and carries its own local halo, canvas 80 + 686). ---------------- */
.v2u-calm__wrap::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 100vw);
  height: 540px;
  pointer-events: none;
  filter: blur(95px);
  opacity: 0.55;
  z-index: var(--z-page);
  background: radial-gradient(circle, var(--acc-40) 0%, var(--acc-16) 32%, transparent 70%);
}
.v2u-calm__wrap > * { position: relative; z-index: var(--z-content); }

.v2u-results__halo {
  position: absolute;
  top: calc(var(--bar-h) - 24px);
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 100%);
  height: 360px;
  pointer-events: none;
  background: radial-gradient(56% 56% at 50% 0%, var(--acc-40) 0%, var(--acc-16) 40%, transparent 72%);
  filter: blur(60px);
  opacity: 0.9;
}
.v2u-results > .v2u-results__head,
.v2u-results > .v2r-head,
.v2u-results > .v2u-results__tabs,
.v2u-results > .v2u-results__body { position: relative; }

/* -- studio: hero-card details the in-place edits could not carry ---------- */
/* the clock pill's letter-spacing (canvas 575) + the settled rec dot */
.v2u-hero__pill-text.is-clock { letter-spacing: 0.03em; }
.v2u-hero__dot.is-rec.is-idle { background: var(--ink-24); }
/* the bottom-plate reel is the canvas 20px lane (canvas 587) */
.v2u-calm__card.is-hero .v2u-calm__reel { height: 20px; }

/* -- studio: per-format chip status words (canvas 604-608) ----------------- */
.v2u-fmtchips__name { color: var(--ink-72); }
.v2u-fmtchips__state { font-size: var(--text-xs); font-weight: 500; color: inherit; letter-spacing: 0.01em; }
.v2u-fmtchips__chip.is-queued .v2u-fmtchips__dot { background: var(--ink-55); }

/* -- studio: done terminal (canvas 632-637) -------------------------------- */
/* the boxed done reel: hairline shell, the tile clipped to the content box */
.v2u-studio__reel.is-done {
  height: 18px;
  padding: 2px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-sm);
  background-color: var(--surf-0);
  background-origin: content-box;
  background-clip: content-box;
}
/* the drifting accent->edit->accent-2 gradient fill on the closing word */
.v2u-done-cut {
  background: linear-gradient(90deg, var(--accent), var(--edit) 45%, var(--accent-2) 80%, var(--accent));
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradDrift calc(66.6667 * var(--t-micro)) linear infinite;
}
.v2u-studio__terminal.is-done .v2u-studio__cta { height: 48px; padding: 0 24px; font-size: 16.5px; }
/* the partial headline sits at the canvas 33px (canvas 644) */
.v2u-studio[data-phase="partial"] .v2u-studio__headline { font-size: 33px; letter-spacing: -0.02em; }

/* -- studio: quiet borderless cancel (canvas 624) --------------------------- */
.v2u-calm__cancel-row .v2-btn--ghost { border-color: transparent; background: none; color: var(--ink-55); }
.v2u-calm__cancel-row .v2-btn--ghost:hover:not(:disabled) { border-color: transparent; background: var(--ink-04); color: var(--ink-72); }

/* -- results: rail plinth (canvas 743: sheened surf-2 aside on the strong
      hairline, 18px radius, 12/8 inset, sticky under the bar) -------------- */
.v2u-shorts .v2u-rail,
.v2r-rail {
  background: var(--card-sheen), var(--surf-2);
  border: 2px solid var(--line-2);
  border-radius: var(--radius-panel);
  padding: var(--space-3) var(--space-2);
  position: sticky;
  top: calc(var(--bar-h) + 14px);
}
/* the inset magnifier on the filter (canvas 745-747) */
.v2u-rail__search { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.v2u-rail__search-glyph { position: absolute; left: 11px; pointer-events: none; color: var(--ui-text-muted); }
.v2r-rail__filter { padding-left: 31px; border-width: 1.5px; }
/* rail-row glyph scale (the canvas ready check is 8px inside the 16px mark) */
.v2u-railrow__mark svg, .v2r-railrow__mark svg { width: 9px; height: 9px; }
/* variant sub-rows: 11.5px ink-55 titles (canvas 2621) */
.v2u-railrow.is-variant .v2u-railrow__title { font-size: var(--text-13); color: var(--ink-55); }
/* R2 rail rows: the same mark-box law as the base rail (canvas 2610) */
.v2r-railrow__mark {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.v2r-railrow__mark.v2-tone--edit { border: 1.5px solid var(--edit); background: var(--edit-16); animation: v2uPulse calc(15 * var(--t-micro)) var(--ease) infinite; }
.v2r-railrow__mark.v2-tone--done { border: 1.5px solid var(--ink); }
.v2r-railrow__mark.v2-tone--neutral { border: 1.5px solid var(--ink-24); color: transparent; }
.v2r-railrow.is-variant .v2r-railrow__mark { border: 0; background: none; animation: none; color: var(--ink-24); }

/* -- results: focused pane (canvas 778-818) --------------------------------- */
/* prev/next: 44px surf-3 plinth buttons, 11px radius (canvas 794-795) */
.v2u-focus__nav .v2-btn { border-radius: 11px; border: 1.5px solid var(--line-2); background: var(--surf-3); color: var(--ink); }
.v2u-focus__nav .v2-btn:hover:not(:disabled) { background: var(--surf-3); border-color: var(--line-2); }
/* action row: the canvas 40px buttons on the surf-3 plinth (canvas 810-816) */
.v2u-focus__actions .v2-btn--36 { height: 40px; }
.v2u-focus__actions .v2-btn--ghost { border: 1.5px solid var(--line-2); background: var(--surf-3); color: var(--ink); font-size: var(--text-base); }
.v2u-focus__actions .v2-btn--ghost:hover:not(:disabled) { border-color: var(--line-2); background: var(--surf-3); }
/* the saved state pins to the INK ring on the ink wash (canvas saveBtnStyle) */
.v2u-focus__actions .v2-btn--accent-ghost[aria-pressed="true"] { border: 1px solid var(--ink); background: var(--ink-08); color: var(--ink); height: 40px; }
/* the clip-type chip (canvas 800 + typeBadgeStyle 2653) */
.v2u-focus__typerow { margin-top: 9px; }
.v2u-focus__type {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-chip);
  background: var(--surf-3);
  color: var(--ink-72);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.v2u-focus__type.is-constructed { border-color: var(--edit); background: var(--edit-16); color: var(--edit); }

/* -- results: the transcript card stack (canvas 820-840 + _csCards big) ----- */
.v2u-cst-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.v2u-cst-head__eyebrow { font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ui-text-muted); }
.v2u-cst-head__line { flex: 1 1 auto; height: 1px; background: var(--line-1); }
.v2u-cst-cards { display: flex; flex-direction: column; gap: 14px; }
.v2u-cst-card {
  position: relative;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-panel);
  background: var(--ink-02);
  padding: var(--space-5) 22px;
}
.v2u-cst-card.is-hook {
  border-left: 3px solid var(--accent);
  background: linear-gradient(180deg, var(--acc-08), var(--ink-02));
}
.v2u-cst-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v2u-cst-card__id { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.v2u-cst-card__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }
.v2u-cst-card.is-hook .v2u-cst-card__label { color: var(--accent-text); }
.v2u-cst-card__speaker { font-size: var(--text-sm); color: var(--ui-text-muted); font-weight: 500; }
.v2u-cst-card__tc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border: 1.5px solid var(--line-1);
  border-radius: var(--radius-chip);
  background: var(--surf-2);
  font-size: var(--text-s);
  color: var(--ink-72);
  flex: 0 0 auto;
}
.v2u-cst-card__tcdot { width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--ink-38); }
.v2u-cst-card__text { margin: 14px 0 0; font-size: 19px; line-height: 1.5; letter-spacing: -0.005em; color: var(--ink); }
.v2u-cst-card__cut { color: var(--ui-text-muted); text-decoration: line-through; text-decoration-color: var(--ink-24); text-decoration-thickness: 1.5px; }
.v2u-cst-card__flow { margin-top: 14px; font-size: var(--text-s); color: var(--ui-text-muted); letter-spacing: 0.04em; }
.v2u-cst-jump { display: flex; align-items: center; gap: 10px; padding-left: 2px; }
.v2u-cst-jump__lead { flex: 0 0 16px; height: 1px; background: var(--acc-40); }
.v2u-cst-jump__word { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-13); letter-spacing: 0.16em; font-weight: 700; color: var(--accent-text); text-transform: uppercase; }
.v2u-cst-jump__tail { flex: 1 1 auto; height: 1px; background: var(--acc-16); }

/* -- results: tab strip scale (canvas 719-722: 15px labels, 22px gaps,
      neutral count pills that light up on the active tab) ------------------ */
.v2u-results__tabs { gap: 22px; }
.v2u-results__tabs .v2-tabs__tab { font-size: var(--text-md); }
.v2u-results__tabs .v2-tabs__tab .v2-tabs__count { background: var(--surf-3); color: var(--ink-55); }
.v2u-results__tabs .v2-tabs__tab.is-active .v2-tabs__count { background: var(--acc-16); color: var(--ink); }

/* -- results: R2 header + view toggle to the canvas scale ------------------- */
.v2r-title { font: 700 clamp(24px, 4vw, 34px)/1.04 var(--display); letter-spacing: -0.03em; }
.v2r-meta { font-size: 13.5px; }
.v2r-viewtoggle { border-radius: var(--radius-chip); border-width: 1.5px; }
.v2r-viewtoggle__btn { border-radius: var(--radius-sm); }

/* -- results: X-card hover lift (canvas .card-hover 112-114) ---------------- */
.v2u-xcard { transition: transform var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease); }
.v2u-xcard:hover { transform: translateY(-4px); box-shadow: var(--floor-lift); border-color: var(--line-acc); }

/* -- the Distribute chip-corner CTA (canvas .cta-cut 140-142, 713) ---------- */
.v2u-cta-cut {
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.v2u-cta-cut::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from 220deg at 50% 0%, transparent 0deg, var(--ink) 36deg, var(--accent) 90deg, transparent 145deg, transparent 360deg);
  -webkit-mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.9;
}

/* -- carousels: the canvas card sections the reorder introduced ------------- */
.v2u-car-head { padding: var(--space-4) var(--space-4) 0; }
/* inside the v2 Results tab the tab strip IS the header — the section's own
   eyebrow row + closing rule are the legacy-gallery dress (canvas 1026-1031
   draws the grid bare). The legacy gallery keeps them. */
.v2u-carouseltab .v2u-car-section__head { display: none; }
.v2u-carouseltab .v2u-car-section { margin: 0; padding: 0; border-bottom: 0; }
.v2u-car-strip { position: relative; }
.v2u-car-strip__count {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-chip);
  background: color-mix(in srgb, var(--surf-0) 92%, transparent);
  color: var(--ink-88);
  font-size: var(--text-2xs);
  pointer-events: none;
}
.v2u-car-not-ready .v2u-car-slide-count { display: block; margin-top: var(--space-2); color: var(--ui-text-muted); font-size: var(--text-2xs); }
.v2u-car-caption__toggle:focus-visible { outline-offset: -3px; }

/* -- motion + a11y guards for everything this block animates ---------------- */
@media (prefers-reduced-motion: reduce) {
  .v2u-done-cut { animation: none; background-position: 0 0; }
  .v2u-xcard, .v2u-xcard:hover { transition: none; transform: none; }
  .v2u-railrow__mark.v2-tone--edit, .v2r-railrow__mark.v2-tone--edit { animation: none; }
  .v2u-calm__wrap::before, .v2u-results__halo { opacity: 0.35; }
}
@media (forced-colors: active) {
  .v2u-cst-card, .v2u-focus__type, .v2u-car-card { border: 1px solid CanvasText; }
  .v2u-cta-cut { clip-path: none; }
  /* ===== end R4-F ===== */
}

/* ===== UI DOORS (transcript / support prefill / run defaults) =====
   Three small surfaces whose backend doors landed without a UI. Tokens only, both
   themes by construction (no component theme branch), 44px control floor. */

/* The failed-run studio terminal carries one help action beside Try again. */
.v2u-studio__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 10px);
}

/* Help & contact: the diagnostics attached to a ticket opened from a failed run.
   Read-only by design — the ids are server facts, not fields to edit. */
.v2-u7-diag {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-1);
  border-radius: 12px;
  background: var(--surf-0);
}
.v2-u7-diag > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.v2-u7-diag dt {
  flex: 0 0 auto;
  min-width: 62px;
  font-size: var(--text-2xs, 11px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.v2-u7-diag dd {
  margin: 0;
  min-width: 0;
}
.v2-u7-diag code {
  font-size: var(--text-13);
  color: var(--ink-88);
  overflow-wrap: anywhere;
}

/* Count: "Save as default" + the precedence promise. */
.count-defaults {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
}
.count-defaults__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.count-defaults__save {
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--line-2, var(--ink-16));
  border-radius: 12px;
  background: var(--ink-02);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.count-defaults__save[disabled] {
  cursor: default;
  opacity: 0.55;
}
.count-defaults__save:hover:not([disabled]) {
  border-color: var(--line-3);
}
.count-defaults__error {
  font-size: var(--text-13);
  color: var(--amber, var(--ink-72));
}
.count-defaults__note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: var(--text-13);
  line-height: 1.5;
  color: var(--ink-55);
}
.count-defaults__state {
  color: var(--ui-text-muted);
}
@media (prefers-reduced-motion: reduce) {
  .count-defaults__save {
    transition: none;
  }
}
@media (forced-colors: active) {
  .v2-u7-diag,
  .count-defaults__save {
    border: 1px solid CanvasText;
  }
}
/* ===== end UI DOORS ===== */

/* ===== ARC-ZZ DELIVERY SURFACE (PR-SF1) =====
   Tokens only, no authored color. The floor list is the primary shape, so it
   carries the strongest type; shelf sections above it are deliberately quieter
   than the rows they point at, because a shelf is a view and the clip is the
   thing. There is no rank badge, no meter and no numeric chip anywhere in this
   block: the surface shows no scores (ARC_ZZ.md 7.5), and a style that had a
   place to put one would be an invitation. */
.sf1-delivery {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.sf1-counts,
.sf1-lanes,
.sf1-floor,
.sf1-shelf__rows,
.sf1-surplus__rows,
.sf1-losses__rows,
.sf1-subclips {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sf1-counts,
.sf1-lanes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sf1-count,
.sf1-lane {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--surf-2);
  font-size: var(--text-sm);
}
.sf1-count__label,
.sf1-lane__label {
  color: var(--ink-55);
}
.sf1-count__sentence,
.sf1-lane__sentence {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sf1-lane__homes,
.sf1-lane__infeasible {
  color: var(--ink-55);
}
.sf1-shelf {
  margin: 0 0 var(--space-4);
}
.sf1-shelf__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.sf1-shelf__row {
  padding: var(--space-1) 0;
  color: var(--ink-72);
  font-size: var(--text-sm);
}
.sf1-floor {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sf1-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sf1-row__reading {
  color: var(--ink);
  font-size: var(--text-md);
  line-height: 1.45;
}
.sf1-row__neighbours {
  color: var(--ink-55);
  font-size: var(--text-sm);
}
.sf1-row__shelves {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sf1-row__shelf {
  padding: 0 var(--space-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  color: var(--ink-55);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
}
.sf1-subclips {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--line-1);
}
.sf1-surplus__note {
  margin: 0 0 var(--space-2);
  color: var(--ink-72);
  font-size: var(--text-sm);
}
.sf1-surplus__row,
.sf1-loss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  color: var(--ink-55);
  font-size: var(--text-sm);
}
.sf1-surplus__position {
  color: var(--ui-text-muted);
  font-variant-numeric: tabular-nums;
}
@media (forced-colors: active) {
  .sf1-count,
  .sf1-lane,
  .sf1-row__shelf {
    border: 1px solid CanvasText;
  }
}
/* ===== end ARC-ZZ DELIVERY SURFACE ===== */

/* Shared overlay geometry and stacking; the kit owns every sheet's frame. */
.k-sheet-layer .k-sheet__scrim { z-index: var(--z-sheet-scrim); }
.k-sheet-layer .k-sheet { z-index: var(--z-sheet); box-sizing: border-box; }
.k-modal-layer .k-modal__backdrop { z-index: var(--z-modal-scrim); }
.k-modal-layer .k-modal { z-index: var(--z-modal); }
/* breakpoint: compact */
@media (max-width: 640px) {
  .k-sheet-layer .k-sheet {
    inset: 84px 0 0;
    height: calc(100% - 84px);
  }
}

/* ===== TRACK 4 UI FOUNDATION (T4-UI-00) ===== */

:root,
:root[data-density="comfortable"] {
  --density-gap: var(--gap-default);
  --density-pad: var(--pad-default);
  --density-control: 44px;
  --density-row: 56px;
}

:root[data-density="compact"] {
  --density-gap: var(--space-2);
  --density-pad: var(--space-3);
  --density-control: 36px;
  --density-row: 44px;
}

.ui-tone--neutral {
  --ui-tone-ink: var(--ui-text-muted);
  --ui-tone-line: var(--ui-line);
  --ui-tone-fill: var(--ink-04);
}

.ui-tone--live {
  --ui-tone-ink: var(--ui-text-live);
  --ui-tone-line: var(--live-60);
  --ui-tone-fill: var(--live-16);
}

.ui-tone--done {
  --ui-tone-ink: var(--ui-text-done);
  --ui-tone-line: var(--done-60);
  --ui-tone-fill: var(--done-16);
}

.ui-tone--edit {
  --ui-tone-ink: var(--ui-text-edit);
  --ui-tone-line: var(--edit-60);
  --ui-tone-fill: var(--edit-16);
}

.ui-tone--attention {
  --ui-tone-ink: var(--ui-text-attention);
  --ui-tone-line: var(--amber-60);
  --ui-tone-fill: var(--amber-16);
}

.ui-tone--danger {
  --ui-tone-ink: var(--ui-text-danger);
  --ui-tone-line: var(--danger);
  --ui-tone-fill: var(--danger-16);
}

.ui-icon {
  display: block;
  flex: 0 0 auto;
  color: currentColor;
}

.ui-control,
.ui-input__control,
.ui-container,
.ui-feedback,
.ui-media,
.ui-table,
.ui-calendar,
.ui-timeline {
  color: var(--ui-text);
  font-family: var(--sans);
}

.ui-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--density-control);
  gap: var(--space-2);
  padding: 0 var(--density-pad);
  border: 1px solid var(--ui-tone-line, var(--ui-line));
  border-radius: var(--radius-m);
  background: var(--ui-tone-fill, var(--ghost-bg));
  color: var(--ui-tone-ink, var(--ui-text));
  font: 650 var(--type-label)/1 var(--sans);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease),
    border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    transform var(--duration-fast) var(--ease);
}

.ui-control--primary,
.ui-control--heavy {
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--ui-text-on-accent);
}

.ui-control--heavy {
  min-height: 52px;
  padding: 0 var(--space-7);
  border-radius: var(--radius-l);
  font-size: var(--type-body-large);
  box-shadow: var(--glow-acc);
}

.ui-control--ghost,
.ui-control--quiet,
.ui-control--icon {
  background: transparent;
}

.ui-control--quiet {
  border-color: transparent;
}

.ui-control--icon {
  width: var(--density-control);
  padding: 0;
  border-radius: var(--radius-pill);
}

.ui-control--destructive {
  --ui-tone-ink: var(--ui-text-danger);
  --ui-tone-line: var(--danger);
  --ui-tone-fill: var(--danger-16);
}

.ui-control:hover:not(:disabled):not([aria-disabled="true"]),
.ui-input__control:hover:not(:disabled):not(:read-only),
.ui-container:hover,
.ui-media:hover {
  border-color: var(--ui-tone-ink, var(--accent-text));
  box-shadow: var(--shadow-sm);
}

.ui-control:focus-visible,
.ui-input__control:focus-visible,
.ui-container:focus-visible,
.ui-feedback:focus-visible,
.ui-media:focus-visible,
.ui-table :is(a, button, input, select):focus-visible,
.ui-calendar :is(a, button, input, select):focus-visible,
.ui-timeline :is(a, button, input, select):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.ui-control:active:not(:disabled),
.ui-control.is-active {
  transform: translateY(1px);
  box-shadow: var(--shadow-xs);
}

.ui-control:disabled,
.ui-control[aria-disabled="true"],
.ui-input__control:disabled,
.ui-container.is-disabled,
.ui-feedback.is-disabled,
.ui-media.is-disabled,
.ui-table.is-disabled,
.ui-calendar.is-disabled,
.ui-timeline.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.ui-control.is-loading,
.ui-input.is-loading,
.ui-container.is-loading,
.ui-feedback.is-loading,
.ui-media.is-loading,
.ui-table.is-loading,
.ui-calendar.is-loading,
.ui-timeline.is-loading {
  cursor: progress;
}

.ui-control.is-error,
.ui-input.is-error,
.ui-container.is-error,
.ui-feedback.is-error,
.ui-media.is-error,
.ui-table.is-error,
.ui-calendar.is-error,
.ui-timeline.is-error {
  border-color: var(--danger);
  color: var(--ui-text-danger);
}

.ui-control-with-reason {
  display: inline-grid;
  justify-items: start;
  gap: var(--space-2);
}

.ui-control__reason {
  color: var(--ui-text-muted);
  font: 500 var(--type-body)/1.45 var(--sans);
}

.ui-control__loader {
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: ui-foundation-spin var(--duration-base) linear infinite;
}

.ui-size--small { min-height: 32px; padding: 0 var(--space-3); }
.ui-size--medium { min-height: var(--density-control); }
.ui-size--large { min-height: 52px; padding: 0 var(--space-6); }

.ui-input {
  display: grid;
  gap: var(--space-2);
  color: var(--ui-text);
  font-family: var(--sans);
}

.ui-input__label {
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 650;
}

.ui-input__control {
  width: 100%;
  min-height: var(--density-control);
  padding: 0 var(--density-pad);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  font: 500 var(--type-body)/1.45 var(--sans);
  transition: border-color var(--duration-fast) var(--ease),
    box-shadow var(--duration-fast) var(--ease),
    background var(--duration-fast) var(--ease);
}

textarea.ui-input__control,
.ui-input--steering .ui-input__control {
  min-height: 112px;
  padding-block: var(--space-3);
  resize: vertical;
}

.ui-input--file-drop .ui-input__control {
  min-height: 136px;
  padding: var(--density-pad);
  border-style: dashed;
}

.ui-input.is-filled .ui-input__control {
  border-color: var(--line-3);
}

.ui-input.is-invalid .ui-input__control,
.ui-input__control[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-14);
}

.ui-input.is-read-only .ui-input__control,
.ui-input__control:read-only {
  background: var(--ink-04);
  color: var(--ui-text-muted);
}

.ui-input__message {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.ui-input.is-invalid .ui-input__message,
.ui-input.is-error .ui-input__message {
  color: var(--ui-text-danger);
}

.ui-container {
  border: 1px solid var(--ui-tone-line, var(--ui-line));
  border-radius: var(--radius-l);
  background: var(--ui-tone-fill, var(--ui-surface));
  box-shadow: var(--shadow-sm);
}

.ui-container--card { border-radius: var(--radius-m); }
.ui-container--sheet,
.ui-container--drawer,
.ui-container--modal { background: var(--glass-sheet); box-shadow: var(--floor-lift); }
.ui-container--popover,
.ui-container--tooltip { border-radius: var(--radius-s); box-shadow: var(--floor); }
.ui-container--rail { min-width: 240px; }
.ui-container--tooltip { max-width: 288px; }

.ui-container__header {
  display: grid;
  gap: var(--space-1);
  padding: var(--density-pad);
  border-bottom: 1px solid var(--ui-line);
}

.ui-container__header > span {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-container__header h2 {
  margin: 0;
  font: 650 var(--type-heading-3)/1.15 var(--display);
}

.ui-container.is-i18n-heading .ui-container__header h2,
.ui-surface-state.is-i18n-heading h2 {
  font-family: var(--sans);
}

.ui-container__body { padding: var(--density-pad); }
.ui-container--accordion > summary { padding: var(--density-pad); cursor: pointer; }

.ui-feedback {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--ui-tone-line, var(--ui-line));
  border-radius: var(--radius-pill);
  background: var(--ui-tone-fill, var(--ink-04));
  color: var(--ui-tone-ink, var(--ui-text-muted));
  font: 650 var(--type-meta)/1.2 var(--sans);
}

.ui-feedback--toast,
.ui-feedback--banner {
  width: 100%;
  justify-content: flex-start;
  padding: var(--density-pad);
  border-radius: var(--radius-m);
  font-size: var(--type-body);
}

.ui-feedback--meter,
.ui-feedback--progress {
  display: grid;
  width: 100%;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ui-feedback__track {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--ink-12);
}

.ui-feedback__fill {
  display: block;
  width: var(--ui-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ui-tone-ink, var(--accent));
  transition: width var(--duration-base) var(--ease);
}

.ui-feedback.is-indeterminate .ui-feedback__fill {
  width: 100%;
  transform: scaleX(0.24);
  transform-origin: center;
  animation: ui-foundation-indeterminate var(--duration-scene) var(--ease) infinite alternate;
}

.ui-feedback__stages {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-feedback__stages li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  color: var(--ui-text-muted);
}

.ui-feedback__stages li.is-completed { color: var(--ui-text); }
.ui-feedback__stages li.is-current { color: var(--ui-text-link); }

.ui-feedback__stage-state {
  font-weight: 700;
  text-transform: capitalize;
}

.ui-feedback__partial {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--ui-text-muted);
  font-size: var(--type-body);
}

.ui-feedback__failure-reason { color: var(--ui-text-danger); }

.ui-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ui-tone-line, var(--ui-line));
  border-radius: var(--radius-l);
  background: var(--ui-tone-fill, var(--ui-surface));
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.ui-media__stage {
  display: grid;
  place-items: center;
  min-height: 120px;
  background: var(--surf-0);
}

.ui-media--video-portrait .ui-media__stage { aspect-ratio: 9 / 16; }
.ui-media--video-landscape .ui-media__stage { aspect-ratio: 16 / 9; }
.ui-media--waveform .ui-media__stage { min-height: 48px; }
.ui-media--score-ring .ui-media__stage { min-height: 64px; }

.ui-media__caption {
  padding: var(--space-3) var(--density-pad);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.ui-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
}

.ui-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ui-surface);
  font-size: var(--type-body);
}

.ui-table caption {
  padding: var(--density-pad);
  color: var(--ui-text);
  font-weight: 650;
  text-align: start;
}

.ui-table th,
.ui-table td {
  height: var(--density-row);
  padding: 0 var(--density-pad);
  border-top: 1px solid var(--ui-line);
  text-align: start;
}

.ui-table th {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ui-table__numeral {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.ui-table--compact { --density-row: 36px; --density-pad: var(--space-3); }

.ui-calendar {
  display: grid;
  gap: var(--density-gap);
  padding: var(--density-pad);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-l);
  background: var(--ui-surface);
}

.ui-calendar--month { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ui-calendar--week { grid-template-columns: minmax(72px, auto) repeat(7, minmax(120px, 1fr)); }
.ui-calendar--cell { min-height: var(--density-row); }
.ui-calendar--lane { min-height: 96px; }

.ui-timeline {
  display: grid;
  gap: var(--density-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-timeline--horizontal {
  grid-auto-flow: column;
  grid-auto-columns: minmax(144px, 1fr);
  overflow-x: auto;
}

.ui-timeline__item {
  position: relative;
  min-height: var(--density-row);
  padding: var(--density-pad);
  border: 1px solid var(--ui-tone-line, var(--ui-line));
  border-radius: var(--radius-m);
  background: var(--ui-tone-fill, var(--ui-surface));
  color: var(--ui-tone-ink, var(--ui-text));
}

.ui-surface-state {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--section-gap) var(--pad-default);
  border: 1px solid var(--ui-tone-line, var(--ui-line));
  border-radius: var(--radius-l);
  background: var(--ui-tone-fill, var(--ui-surface));
  color: var(--ui-tone-ink, var(--ui-text));
}

.ui-surface-state h2 {
  margin: 0;
  color: var(--ui-text);
  font: 650 var(--type-heading-3)/1.2 var(--display);
}

.ui-surface-state p {
  max-width: 62ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body);
  line-height: 1.55;
}

.ui-surface-state.is-nothingMatched {
  --ui-tone-ink: var(--ui-text-muted);
  --ui-tone-line: var(--ui-line);
  --ui-tone-fill: var(--ink-04);
}

.ui-skeleton {
  display: grid;
  gap: var(--density-gap);
  padding: var(--density-pad);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-l);
  background: var(--ui-surface);
}

.ui-skeleton--clip-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ui-skeleton--edit-rail { grid-template-columns: minmax(160px, 280px); }
.ui-skeleton--history-list { grid-template-columns: 1fr; }
.ui-skeleton--queue-calendar { grid-template-columns: repeat(7, minmax(72px, 1fr)); }
.ui-skeleton--account-panel { grid-template-columns: minmax(0, 1fr); }

.ui-skeleton__item {
  display: block;
  min-height: var(--density-row);
  border-radius: var(--radius-m);
  background: linear-gradient(100deg, var(--ink-04), var(--ink-12), var(--ink-04));
  background-size: 220% 100%;
  animation: ui-foundation-skeleton var(--duration-scene) var(--ease) infinite;
}

@keyframes ui-foundation-spin {
  to { transform: rotate(1turn); }
}

@keyframes ui-foundation-indeterminate {
  from { opacity: 0.55; transform: scaleX(0.24); }
  to { opacity: 1; transform: scaleX(0.72); }
}

@keyframes ui-foundation-skeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* breakpoint: canvas */
@media (max-width: 960px) {
  .ui-container--rail { min-width: 208px; }
  .ui-calendar--week { grid-template-columns: minmax(64px, auto) repeat(7, minmax(104px, 1fr)); }
}

/* breakpoint: tablet */
@media (max-width: 820px) {
  .ui-calendar--week { display: flex; overflow-x: auto; }
  .ui-table th,
  .ui-table td { min-width: 132px; }
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .ui-container--sheet,
  .ui-container--drawer,
  .ui-container--modal { border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .ui-surface-state { padding: var(--space-8) var(--pad-default); }
  .sibir-truth,
  .language-checkpoint,
  .language-intent,
  .run-price-preflight { padding: var(--space-3); }
  .sibir-truth__counts,
  .sibir-truth__cards,
  .language-checkpoint__facts,
  .language-checkpoint__checks,
  .run-price-preflight dl { grid-template-columns: 1fr; }
  .language-intent__summary { align-items: flex-start; }
  .language-intent__options,
  .language-checkpoint__choices { grid-template-columns: 1fr; }
  .language-checkpoint__correction > button[type="submit"] { width: 100%; justify-self: stretch; }
  .sibir-card__field { grid-template-columns: 1fr; gap: var(--space-1); }
  .results-truth-header { padding: var(--space-3); }
  .tk1-scope-control { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .ui-control-with-reason,
  .ui-control:not(.ui-control--icon) { width: 100%; }
  .ui-skeleton--clip-grid,
  .ui-skeleton--queue-calendar { grid-template-columns: minmax(0, 1fr); }
}

@media (pointer: coarse) {
  .ui-control,
  .ui-input__control { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-control,
  .ui-input__control,
  .ui-container,
  .ui-feedback,
  .ui-media,
  .ui-table,
  .ui-calendar,
  .ui-timeline,
  .ui-control__loader,
  .ui-feedback__fill,
  .ui-skeleton__item {
    animation: none;
    scroll-behavior: auto;
  }
}

@media (forced-colors: active) {
  .ui-control,
  .ui-input__control,
  .ui-container,
  .ui-feedback,
  .ui-media,
  .ui-table-wrap,
  .ui-calendar,
  .ui-timeline__item,
  .ui-surface-state,
  .ui-skeleton {
    border: 1px solid CanvasText;
    box-shadow: none;
  }

  .ui-control:focus-visible,
  .ui-input__control:focus-visible,
  .ui-container:focus-visible,
  .ui-feedback:focus-visible,
  .ui-media:focus-visible {
    outline-color: Highlight;
  }

  .ui-feedback__fill,
  .ui-skeleton__item {
    background: Highlight;
  }
}

/* ===== end TRACK 4 UI FOUNDATION ===== */

/* ===== TRACK 4 UI-03: the founder capability cockpit (fc-) =====
   Tokens only, so the runtime-changeable accent and both themes hold without a
   second palette. Nothing here is destructive, so --danger is unused: the board
   reads and never writes. */
.fc-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) calc(var(--nav-h) + var(--space-6));
}

.fc-head { margin-bottom: var(--space-5); }

.fc-title {
  margin: 0 0 var(--space-1);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.fc-sub {
  margin: 0;
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  color: var(--ink-55);
}

.fc-note { margin: 0; font-size: 13px; color: var(--ink-55); }

.fc-alert {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--amber-40);
  border-radius: var(--radius);
  background: var(--amber-14);
  font-size: 13px;
  color: var(--ink);
}

.fc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.fc-row {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.fc-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.fc-row-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }

.fc-badge {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-13);
  font-weight: 600;
  white-space: nowrap;
}

.fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3) var(--space-4);
}

.fc-cell-head {
  font-size: var(--text-13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.fc-cell-body { font-size: 13px; color: var(--ink-72); }

.fc-reasons {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  gap: var(--space-1);
}

.fc-reason { font-size: var(--text-13); color: var(--ink-55); }

.fc-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-13);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.fc-link:hover { border-bottom-color: var(--accent); }

.fc-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: var(--space-1);
  border-radius: 4px;
}

@media (forced-colors: active) {
  .fc-row,
  .fc-badge,
  .fc-alert {
    border: 1px solid CanvasText;
  }

  .fc-link:focus-visible { outline-color: Highlight; }
}
/* ARC-ZZ UI truth and join surfaces. */
.sibir-truth,
.language-checkpoint,
.language-intent,
.run-price-preflight {
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg);
  background: var(--surf-2);
  color: var(--ink);
  padding: var(--space-4);
}

.sibir-truth header,
.language-checkpoint header,
.run-price-preflight header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.sibir-truth__counts,
.sibir-truth__cards,
.sibir-truth__receipts,
.language-checkpoint__facts,
.language-checkpoint__checks,
.run-price-preflight dl {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.sibir-truth__counts,
.language-checkpoint__facts,
.run-price-preflight dl {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.sibir-truth__counts > li,
.language-checkpoint__facts > div,
.language-checkpoint__checks > li,
.run-price-preflight dl > div,
.sibir-truth__receipts > div {
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-1);
  padding: var(--space-3);
}

.sibir-truth__counts > li,
.run-price-preflight dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}

.sibir-truth__cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sibir-card { border: 1px solid var(--line-1); border-radius: var(--radius-md); padding: var(--space-3); }
.sibir-truth__eyebrow { margin: 0 0 var(--space-1); color: var(--ink-55); font-size: var(--text-13); }
.sibir-truth h3 { margin: 0; font-size: 17px; font-weight: 600; }
.sibir-card > p { margin: var(--space-2) 0 0; color: var(--ink-72); }
.sibir-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.sibir-card__chips > li { border: 1px solid var(--line-1); border-radius: var(--radius-chip); padding: var(--space-1) var(--space-2); color: var(--ink-72); font-size: var(--text-13); }
.sibir-truth__law { margin-top: var(--space-4); color: var(--ink-55); font-size: 13px; }
.sibir-truth__about,
.sibir-truth__record,
.sibir-truth__compact-result details { margin-top: var(--space-3); color: var(--ink-55); }
.sibir-truth__about summary,
.sibir-truth__record summary,
.sibir-truth__compact-result summary { display: flex; min-height: 44px; align-items: center; width: max-content; cursor: pointer; font-weight: 600; }
.sibir-truth__about p { max-width: 60ch; line-height: 1.55; }
.sibir-truth__support { min-height: 44px; margin-top: var(--space-3); }
.sibir-card__record { margin: var(--space-3) 0 0; }
.sibir-card__field { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--line-1); }
.sibir-card__field dt,
.language-checkpoint dt,
.run-price-preflight dt { color: var(--ink-55); }
.sibir-card__field dd,
.language-checkpoint dd,
.run-price-preflight dd { margin: 0; overflow-wrap: anywhere; }
.sibir-truth--compact .sibir-truth__law { margin-bottom: 0; }
.language-checkpoint--compact .language-checkpoint__checks { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.language-intent { width: min(100%, 620px); box-sizing: border-box; text-align: left; }
.language-intent legend { padding: 0 var(--space-2); color: var(--ink-55); font-size: var(--text-13); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.language-intent__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.language-intent__summary > div { min-width: 0; }
.language-intent__summary strong { display: block; font-size: 15px; line-height: 1.3; }
.language-intent__summary p { margin: var(--space-1) 0 0; color: var(--ink-55); font-size: var(--text-13); line-height: 1.45; }
.language-intent__choose,
.language-intent__option,
.language-checkpoint__choice,
.language-checkpoint__correction > button[type="submit"] { min-height: 44px; border: 1px solid var(--line-1); border-radius: var(--radius-md); color: var(--ink); }
.language-intent__choose { flex: 0 0 auto; padding: 0 var(--space-4); background: var(--surf-1); font-weight: 700; cursor: pointer; }
.language-intent__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.language-intent__option { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--surf-1); text-align: left; cursor: pointer; }
.language-intent__option strong { font-size: 13px; }
.language-intent__option span { color: var(--ink-55); font-size: var(--text-13); line-height: 1.35; }
.language-intent__option[aria-pressed="true"],
.language-checkpoint__choice[aria-pressed="true"] { border-color: var(--accent); background: var(--acc-08); }
.language-checkpoint__hold { margin-top: var(--space-3); color: var(--ink-72); line-height: 1.55; }
.language-checkpoint__choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); }
.language-checkpoint__choice { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-3); background: var(--surf-1); cursor: pointer; }
.language-checkpoint__choice span { color: var(--accent); font-size: var(--text-13); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.language-checkpoint__correction { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.language-checkpoint__correction > button[type="submit"] { justify-self: start; padding: 0 var(--space-5); border-color: var(--accent); background: var(--accent); color: var(--ink-on-accent); font-weight: 750; cursor: pointer; }
.language-checkpoint__correction > button[type="submit"]:disabled { border-color: var(--line-1); background: var(--surf-1); color: var(--ink-55); cursor: not-allowed; }
/* Wave 0.3: the Results one-row posture. One sentence of recorded facts, no card. */
.language-checkpoint--row { border: 0; border-radius: 0; background: none; padding: 0; margin: 0; min-height: 40px; display: flex; align-items: center; font-size: 13px; color: var(--ink-55); }
.language-intent select { width: 100%; min-height: 44px; margin-top: var(--space-2); border: 1px solid var(--line-1); border-radius: var(--radius-md); background: var(--surf-1); color: var(--ink); }
.run-price-preflight { width: min(100%, 620px); box-sizing: border-box; }
.run-price-preflight details { margin-top: var(--space-3); color: var(--ink-55); }
.run-price-preflight code { display: block; overflow-wrap: anywhere; margin-top: var(--space-2); }

.language-intent button:focus-visible,
.language-checkpoint button:focus-visible,
.run-price-preflight summary:focus-visible,
.sibir-truth a:focus-visible,
.tk1-scope-control button:focus-visible,
.history-v3-rename button:focus-visible,
.history-v3-rename input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.results-joined-spine { min-width: 0; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.results-joined-spine__body { min-width: 0; min-height: 0; flex: 1 1 auto; display: flex; }
.results-truth-header { flex: 0 0 auto; display: grid; gap: var(--space-3); padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-8)); border-bottom: 1px solid var(--line-1); }
.tk1-scope-control { position: fixed; right: 18px; bottom: 18px; z-index: var(--z-utility); display: flex; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--line-1); border-radius: var(--radius-lg); background: var(--surf-2); }
.tk1-scope-control--inside { position: static; inset: auto; z-index: auto; flex: 0 1 auto; padding: 0; border: 0; background: transparent; }
.tk1-scope-control button,
.history-v3-rename button { min-height: 44px; border: 1px solid var(--line-1); border-radius: var(--radius-md); background: var(--surf-1); color: var(--ink); padding: 0 var(--space-3); }
.tk1-scope-control button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.history-v3-rename { position: fixed; inset: 50% auto auto 50%; z-index: var(--z-floating); width: min(420px, calc(100vw - 32px)); transform: translate(-50%, -50%); box-sizing: border-box; border: 1px solid var(--line-1); border-radius: var(--radius-lg); background: var(--surf-2); color: var(--ink); padding: var(--space-5); box-shadow: var(--floor); }
.history-v3-rename input { width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid var(--line-1); border-radius: var(--radius-md); background: var(--surf-1); color: var(--ink); padding: 0 var(--space-3); }
.history-v3-rename > div { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

@media (forced-colors: active) {
  .sibir-truth,
  .language-checkpoint,
  .language-intent,
  .run-price-preflight,
  .sibir-card,
  .tk1-scope-control,
  .history-v3-rename { border-color: CanvasText; }
  .language-intent__option[aria-pressed="true"],
  .language-checkpoint__choice[aria-pressed="true"] { border-color: Highlight; }
  .tk1-scope-control button[aria-pressed="true"] { border-color: Highlight; color: Highlight; }
}

/* ===== kit/tokens.css ===== */
/* One stacking scale: local content, navigation, overlays, then toasts and hints. */
:root {
  --z-underlay: -1;
  --z-page: 0;
  --z-content: 1;
  --z-content-control: 2;
  --z-content-marker: 3;
  --z-content-overlay: 4;
  --z-content-raised: 10;
  --z-notice: 15;
  --z-topbar: 20;
  --z-utility: 25;
  --z-transport: 30;
  --z-drawer: 40;
  --z-sheet-scrim: 50;
  --z-sheet: 60;
  --z-modal-scrim: 70;
  --z-modal: 80;
  --z-floating: 90;
  --z-toast: 100;
  --z-hint: 110;
}

/* ===== kit/kit.css ===== */
/* TEMP until styles.css tokens v2 lands; the integrator deletes this block. */
:root {
  --motion: 1;
  --t-micro: calc(120ms * var(--motion));
  --t-quick: calc(200ms * var(--motion));
  --t-fast: calc(320ms * var(--motion));
  --t-base: calc(560ms * var(--motion));
  --t-slow: calc(860ms * var(--motion));
  --t-cove: calc(1200ms * var(--motion));
  --ease-toggle: cubic-bezier(0.2, 0.9, 0.3, 1.05);
  --glow-accent: 0 0 0 1px var(--acc-22), 0 8px 32px -8px color-mix(in srgb, var(--accent) 40%, transparent);
  --glow-live: 0 0 0 1px color-mix(in srgb, var(--live) 22%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--live) 40%, transparent);
  --glow-danger: 0 0 0 1px color-mix(in srgb, var(--danger) 22%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--danger) 40%, transparent);
  --shadow-1: 0 2px 8px color-mix(in srgb, var(--ground) 24%, transparent);
  --shadow-2: 0 12px 40px color-mix(in srgb, var(--ground) 40%, transparent);
  --shadow-3: 0 24px 80px color-mix(in srgb, var(--ground) 55%, transparent);
  --edge-top: inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  --edge-top-2: inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
  --glass: color-mix(in srgb, var(--surf-1) 82%, transparent);
  --blur: blur(24px) saturate(140%);
  --beam: radial-gradient(900px 600px at 85% -10%, var(--acc-08), color-mix(in srgb, var(--ink) 2%, transparent) 45%, transparent 70%);
  --beam-warm: radial-gradient(900px 600px at 85% -10%, var(--amber-14), color-mix(in srgb, var(--ink) 2%, transparent) 45%, transparent 70%);
  --beam-phone: radial-gradient(700px 480px at 50% -12%, var(--acc-08), color-mix(in srgb, var(--ink) 2%, transparent) 45%, transparent 70%);
  --beam-phone-warm: radial-gradient(700px 480px at 50% -12%, var(--amber-14), color-mix(in srgb, var(--ink) 2%, transparent) 45%, transparent 70%);
  --grain-opacity: 0.03;
  --thumb-vignette: radial-gradient(120% 100% at 50% 50%, transparent 55%, color-mix(in srgb, var(--ground) 6%, transparent) 100%);
  --thumb-inset: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  --frame-bezel: 0 0 0 1px var(--line-2), var(--edge-top), var(--shadow-2);
  --tick-size: 8px;
  --tick-ink: var(--ink-24);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --focus-ring-on-accent: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
  --select-glow: var(--glow-accent);
  --shimmer: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ink) 8%, transparent) 50%, transparent 100%);
  --skeleton-base: var(--ink-04);
  --skeleton-hi: var(--ink-08);
  --scroll-shadow-top: linear-gradient(180deg, color-mix(in srgb, var(--ground) 55%, transparent), transparent);
  --scroll-shadow-bottom: linear-gradient(0deg, color-mix(in srgb, var(--ground) 55%, transparent), transparent);
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  /* Stacking comes from the one scale in kit/tokens.css, which styles.css
     imports ahead of this sheet. Redeclaring the names here re-entered the
     cascade after that import and silently reset --z-sheet to 30 while the
     scrim kept the scale's 50, which painted every kit sheet's scrim over
     its own panel. The scale owns --z-page/-drawer/-sheet/-modal/-toast and
     styles.css aliases --z-sticky/-popover/-tooltip onto it. */
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-22: 22px;
  --text-28: 28px;
  --text-36: 36px;
  --text-48: 48px;
}

:where([class^="k-"], [class*=" k-"]) {
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: var(--text-15);
  line-height: 24px;
}

:where([class^="k-"], [class*=" k-"]) *,
:where([class^="k-"], [class*=" k-"]) *::before,
:where([class^="k-"], [class*=" k-"]) *::after {
  box-sizing: border-box;
}

:where([class^="k-"], [class*=" k-"]) :focus-visible {
  outline: none;
  border-radius: inherit;
  box-shadow: var(--focus-ring);
}

.k-icon {
  display: block;
  flex: 0 0 auto;
}

.k-control-stack {
  display: inline-flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.k-control-reason,
.k-pill__reason {
  max-width: 42ch;
  color: var(--ink-55);
  font-size: var(--text-13);
  line-height: 18px;
}

.k-button {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 44px;
  max-width: 100%;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  color: var(--ink-88);
  background: none;
  font-size: var(--text-14);
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: color var(--t-micro) var(--ease), background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.k-button__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-button--36 {
  height: 36px;
  min-width: 36px;
  padding-inline: 14px;
  border-radius: var(--radius-s);
  font-weight: 500;
}

/* The compact size keeps its 36px desktop density; a coarse pointer raises it
   to the 44px floor. Written as a top-level media block, not CSS nesting:
   nesting inside .k-button--36 made jsdom's CSS parser abandon the rest of
   this stylesheet, which silently unstyled every state the kit gallery
   measures (verify_kit_gallery.cjs, 3234 failures). */
@media (pointer: coarse) {
  .k-button--36 { min-height: 44px; min-width: 44px; }
}

.k-button--48 {
  height: 48px;
  min-width: 48px;
  padding-inline: 22px;
  gap: 10px;
  font-size: var(--text-15);
}
.k-button--leading-only { padding-left: 16px; }
.k-button--trailing-only { padding-right: 16px; }
.k-button--36.k-button--leading-only { padding-left: 12px; }
.k-button--36.k-button--trailing-only { padding-right: 12px; }
.k-button--48.k-button--leading-only { padding-left: 20px; }
.k-button--48.k-button--trailing-only { padding-right: 20px; }

.k-button--primary {
  color: var(--ink-on-accent);
  background: var(--accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 28%, transparent), var(--shadow-1);
}

.k-button--secondary {
  color: var(--ink-88);
  background: var(--ink-06);
  border-color: var(--line-2);
  box-shadow: var(--edge-top);
}

.k-button--ghost,
.k-button--icon {
  color: var(--ink-72);
}

.k-button--icon {
  width: 44px;
  padding: 0;
}

.k-button--icon.k-button--36 {
  width: 36px;
}

.k-button--danger {
  color: var(--ink-on-accent);
  background: var(--danger);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 28%, transparent), var(--shadow-1);
}

.k-button--primary:hover,
.k-button--primary[data-demo-state="hover"] {
  box-shadow: var(--glow-accent), var(--shadow-1);
  transform: translateY(-1px);
}

.k-button--danger:hover,
.k-button--danger[data-demo-state="hover"] {
  box-shadow: var(--glow-danger), var(--shadow-1);
  transform: translateY(-1px);
}

.k-button--secondary:hover,
.k-button--secondary[data-demo-state="hover"] {
  color: var(--ink);
  background: var(--ink-08);
  border-color: var(--line-3);
}

.k-button--ghost:hover,
.k-button--icon:hover,
.k-button--ghost[data-demo-state="hover"],
.k-button--icon[data-demo-state="hover"] {
  color: var(--ink);
  background: var(--ink-06);
}

.k-button:active,
.k-button[data-demo-state="active"] {
  transform: scale(0.98);
}

.k-button--icon:active,
.k-button--icon[data-demo-state="active"] {
  transform: scale(0.96);
}

.k-button--primary:active,
.k-button--primary[data-demo-state="active"],
.k-button--danger:active,
.k-button--danger[data-demo-state="active"] { box-shadow: var(--shadow-1); }
.k-button--secondary:active,
.k-button--secondary[data-demo-state="active"],
.k-button--ghost:active,
.k-button--ghost[data-demo-state="active"],
.k-button--icon:active,
.k-button--icon[data-demo-state="active"] { background: var(--ink-04); }

.k-button--primary:focus-visible,
.k-button--primary[data-demo-state="focus"] {
  box-shadow: var(--glow-accent), var(--shadow-1), var(--focus-ring-on-accent);
  transform: none;
}

.k-button--danger:focus-visible,
.k-button--danger[data-demo-state="focus"] {
  box-shadow: var(--glow-danger), var(--shadow-1), var(--focus-ring-on-accent);
  transform: none;
}

.k-button[data-demo-state="focus"]:not(.k-button--primary):not(.k-button--danger) {
  box-shadow: var(--focus-ring);
}

.k-button:disabled:not([aria-busy="true"]),
.k-button[aria-disabled="true"]:not([aria-busy="true"]) {
  color: var(--ink-38);
  background: var(--ink-04);
  border-color: var(--line-1);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  transform: none;
}

.k-button[aria-busy="true"] { pointer-events: none; }
.k-button--primary[aria-busy="true"] { color: var(--ink-on-accent); }
.k-button:not(.k-button--primary)[aria-busy="true"] { color: var(--ink-72); }

.k-button__spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: k-spin 900ms linear infinite;
}

@keyframes k-spin { to { transform: rotate(1turn); } }

.k-pill-row {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  max-width: 100%;
  gap: 8px;
}

.k-scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding: 8px;
}

.k-scroll-x::-webkit-scrollbar { display: none; }
.k-scroll-x.k-is-scrolled { box-shadow: inset 24px 0 16px -16px color-mix(in srgb, var(--ground) 55%, transparent); }
.k-scroll-x.k-has-more { box-shadow: inset -24px 0 16px -16px color-mix(in srgb, var(--ground) 55%, transparent); }
.k-scroll-x.k-is-scrolled.k-has-more { box-shadow: inset 24px 0 16px -16px color-mix(in srgb, var(--ground) 55%, transparent), inset -24px 0 16px -16px color-mix(in srgb, var(--ground) 55%, transparent); }

.k-pill-wrap {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 4px;
}

.k-pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  height: 44px;
  min-width: 44px;
  align-items: center;
  gap: 6px;
  padding: 0 12px 1px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-72);
  background: transparent;
  font-size: var(--text-14);
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-micro) var(--ease);
}

.k-pill::before {
  content: "";
  position: absolute;
  inset: 6px 0;
  z-index: -1;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}

.k-pill:hover,
.k-pill[data-demo-state="hover"] {
  color: var(--ink-88);
}
.k-pill:hover::before,
.k-pill[data-demo-state="hover"]::before { background: var(--ink-06); }

.k-pill.k-is-selected {
  color: var(--accent);
  box-shadow: none;
}
.k-pill.k-is-selected::before { background: var(--acc-14); border-color: var(--acc-22); }

.k-pill.k-is-selected .k-pill__count { color: var(--accent); opacity: 0.72; }
.k-pill:focus-visible { box-shadow: none; }
.k-pill:focus-visible::before,
.k-pill[data-demo-state="focus"]::before { box-shadow: var(--focus-ring); }
.k-pill[aria-disabled="true"] { color: var(--ink-38); cursor: default; }
.k-pill[aria-disabled="true"]::before { background: var(--ink-04); border-color: var(--line-1); }

.k-pill__count,
.k-status,
.k-media-chip,
.k-tabs__count {
  font-variant-numeric: tabular-nums;
}

.k-pill__count { color: var(--ink-55); }

.k-status {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 6px;
  border-radius: var(--radius-pill);
  font-size: var(--text-13);
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.k-status__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
}

.k-status--queued { color: var(--ink-72); background: var(--ink-06); }
.k-status--queued .k-status__dot { color: var(--ink-55); }
.k-status--running { color: var(--live); background: var(--live-14); }
.k-status--running .k-status__dot { animation: k-breathe var(--t-cove) var(--ease-inout) infinite alternate; }
.k-status--editing { color: var(--edit); background: var(--edit-14); }
.k-status--done { color: var(--done); background: var(--done-14); }
.k-status--failed { color: var(--danger); background: var(--danger-14); }

@keyframes k-breathe { from { opacity: 1; } to { opacity: 0.4; } }

.k-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-5, 20px);
  color: var(--ink-88);
  background: var(--surf-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-l);
  box-shadow: var(--edge-top), var(--shadow-1);
}

.k-card--interactive { transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease); }
.k-card--interactive:hover,
.k-card--interactive[data-demo-state="hover"] { border-color: var(--line-2); box-shadow: var(--edge-top), var(--shadow-2); }
.k-card--interactive[data-demo-state="focus"] { box-shadow: var(--focus-ring); }
.k-card.k-is-selected { border-color: var(--acc-22); box-shadow: var(--select-glow), var(--edge-top), var(--shadow-1); }

.k-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-18);
  font-weight: 600;
  line-height: 24px;
}

.k-card p { margin: 0; color: var(--ink-72); font-size: var(--text-16); line-height: 24px; }

/* Public-face primitives: foundation tokens only. Weights are the type scale's
   own 400/500/600 as bare numbers; the foundation declares no weight token and
   the gallery check refuses any var() these primitives do not find in it. */
.k-feature-card, .k-product-frame { font-weight: 400; }
.k-feature-card__eyebrow { align-self: flex-start; display: inline-flex; align-items: center; min-height: var(--space-6); padding-inline: var(--space-2); border-radius: var(--radius-pill); color: var(--accent); background: var(--acc-14); font-size: var(--text-13); font-weight: 600; }
.k-feature-card__title { margin: 0; color: var(--ink); font-family: var(--display); font-size: var(--text-28); font-weight: 600; line-height: var(--space-7); }
.k-card .k-feature-card__lead { max-width: calc(var(--space-9) * 8); margin-top: calc(var(--space-2) - var(--space-3)); }
.k-feature-card__bullets { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.k-feature-card__bullet { display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr); gap: var(--space-3); color: var(--ink-88); font-size: var(--text-15); line-height: var(--space-6); }
.k-feature-card__thread { position: relative; display: flex; justify-content: center; }
.k-feature-card__thread::before { content: ""; position: absolute; top: calc(var(--space-6) / 2); bottom: calc(var(--space-3) * -1 - var(--space-6) / 2); width: calc(var(--space-1) / 4); background: var(--line-2); }
.k-feature-card__thread[data-last="true"]::before { display: none; }
.k-feature-card__thread i { width: calc(var(--space-3) / 2); height: calc(var(--space-3) / 2); margin-top: calc((var(--space-6) - var(--space-3) / 2) / 2); border-radius: var(--radius-pill); background: var(--accent); }
.k-feature-card__product { min-width: 0; margin-top: var(--space-2); }
.k-rail { position: relative; }
.k-tick { display: none; position: absolute; width: var(--tick-size); height: var(--tick-size); pointer-events: none; }
section.k-rail > .k-tick { display: block; }
.k-tick::before, .k-tick::after { content: ""; position: absolute; background: var(--tick-ink); }
.k-tick::before { width: 100%; height: calc(var(--space-1) / 4); top: 50%; }
.k-tick::after { height: 100%; width: calc(var(--space-1) / 4); left: 50%; }
.k-tick.k-tl { top: calc(var(--tick-size) / -2); left: calc(var(--tick-size) / -2); }
.k-tick.k-tr { top: calc(var(--tick-size) / -2); right: calc(var(--tick-size) / -2); }
.k-tick.k-bl { bottom: calc(var(--tick-size) / -2); left: calc(var(--tick-size) / -2); }
.k-tick.k-br { right: calc(var(--tick-size) / -2); bottom: calc(var(--tick-size) / -2); }
.k-product-frame { min-width: 0; padding: calc(var(--space-3) / 2); border-radius: var(--radius-m); background: var(--surf-2); box-shadow: var(--frame-bezel); }
.k-product-frame__media { position: relative; display: grid; min-width: 0; overflow: hidden; border-radius: var(--radius-s); background: var(--surf-0); }
.k-product-frame__media > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.k-product-frame__fallback { display: grid; place-content: center; justify-items: center; gap: var(--space-3); padding: var(--space-4); color: var(--ink-55); font-size: var(--text-13); text-align: center; background: var(--surf-2); }
.k-product-frame__fallback > .k-icon { width: calc(var(--space-6) * 2); height: calc(var(--space-6) * 2); color: var(--tick-ink); }
.k-product-frame__controls { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-s); box-shadow: var(--edge-top-2); }
.k-product-frame.k-is-marketing { transform: perspective(calc(var(--space-3) * 100)) rotateY(-6deg); }
@media (prefers-reduced-motion: reduce) { .k-product-frame.k-is-marketing { transform: none; } }

.k-stat-tile { gap: 4px; padding: 16px 20px; }
.k-stat-tile__label, .k-stat-tile__delta { color: var(--ink-55); font-size: var(--text-13); line-height: 18px; }
.k-stat-tile__value { color: var(--ink); font-family: var(--display); font-size: var(--text-28); font-weight: 600; line-height: 32px; font-variant-numeric: tabular-nums; }
.k-tone-done { color: var(--done); }
.k-tone-amber { color: var(--amber); }
.k-tone-danger { color: var(--danger); }

.k-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surf-2);
}

.k-thumb > img,
.k-thumb > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.k-thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: var(--thumb-vignette); box-shadow: var(--thumb-inset); }

.k-clip-grid { --k-grid-columns: 4; display: grid; grid-template-columns: repeat(var(--k-grid-columns), minmax(0, 1fr)); gap: 16px; }
.k-clip-grid__cell { min-width: 0; }
.k-clip-card { min-width: 44px; min-height: 44px; gap: 0; padding: 6px; cursor: pointer; transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease); }
.k-clip-card:hover,
.k-clip-card[data-demo-state="hover"] { border-color: var(--line-2); box-shadow: var(--edge-top), var(--shadow-2); }
.k-clip-card:focus-visible { box-shadow: var(--focus-ring); }
.k-clip-card__media, .k-skeleton--media { width: 100%; aspect-ratio: 9 / 16; }
.k-clip-card__media { overflow: hidden; }
.k-clip-card__preview { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-quick) var(--ease); }
.k-clip-card__preview.k-is-visible { opacity: 1; }
.k-media-chip { display: inline-flex; height: 24px; align-items: center; gap: 6px; padding: 0 8px; border-radius: var(--radius-pill); color: var(--ink); background: color-mix(in srgb, var(--surf-0) 72%, transparent); backdrop-filter: var(--blur); font-size: var(--text-13); font-weight: 500; line-height: 18px; }
.k-clip-card__duration { position: absolute; bottom: 8px; left: 8px; z-index: 1; }
.k-clip-card__score { position: absolute; right: 8px; bottom: 8px; z-index: 1; }
.k-clip-card__score i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.k-clip-card__title { display: -webkit-box; overflow: hidden; margin: 12px 10px 0; color: var(--ink); font-size: var(--text-15); font-weight: 500; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.k-clip-card__meta { display: flex; min-width: 0; align-items: center; gap: 6px; margin: 6px 10px 0; color: var(--ink-55); font-size: var(--text-13); line-height: 18px; }
.k-clip-card__actions { display: flex; min-height: 44px; align-items: center; gap: 4px; margin: 8px 6px 2px; }
.k-clip-card__actions > .k-button:last-child { margin-left: auto; }
.k-clip-card__actions > .k-tooltip-wrap:last-child { margin-left: auto; }
.k-clip-card__hover-actions { display: flex; gap: 4px; opacity: 0; pointer-events: none; transition: opacity var(--t-micro) var(--ease) 120ms; }
.k-clip-card:hover .k-clip-card__hover-actions,
.k-clip-card[data-demo-state="hover"] .k-clip-card__hover-actions { opacity: 1; pointer-events: auto; transition-delay: 0ms; }
.k-clip-card.k-is-failed .k-clip-card__media > :not(.k-media-chip) { opacity: 0.55; }
.k-media-error { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-24); }
.k-clip-card__error { display: grid; min-height: 44px; gap: 8px; padding: 12px 10px 6px; }
.k-clip-card__error p { color: var(--ink-55); font-size: var(--text-13); line-height: 18px; }

.k-list { overflow: hidden; border: 1px solid var(--line-1); border-radius: var(--radius-m); }
.k-list > span { display: block; }
.k-list-row {
  position: relative;
  display: flex;
  min-width: 44px;
  min-height: 56px;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  color: var(--ink-88);
  cursor: pointer;
  transition: background var(--t-micro) var(--ease);
}
.k-list-row::after { content: ""; position: absolute; right: 16px; bottom: 0; left: 72px; height: 1px; background: var(--line-1); }
.k-list > span:last-child .k-list-row::after { display: none; }
.k-list-row--two { min-height: 72px; }
.k-list-row:hover,
.k-list-row[data-demo-state="hover"] { background: var(--ink-04); }
.k-list-row.k-is-selected { background: var(--acc-08); }
.k-list-row.k-is-selected::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent); }
.k-list-row:focus-visible,
.k-list-row[data-demo-state="focus"] { box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 4px var(--accent); }
.k-list-row__thumb { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 8px; color: var(--ink-55); }
.k-list-row__copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.k-list-row__title { overflow: hidden; color: var(--ink); font-size: var(--text-15); font-weight: 500; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.k-list-row__meta { overflow: hidden; color: var(--ink-55); font-size: var(--text-13); line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.k-list-row__actions, .k-list-row__hover-actions { display: flex; align-items: center; gap: 4px; }
.k-list-row__hover-actions { opacity: 0; pointer-events: none; transition: opacity var(--t-micro) var(--ease) 120ms; }
.k-list-row:hover .k-list-row__hover-actions,
.k-list-row[data-demo-state="hover"] .k-list-row__hover-actions { opacity: 1; pointer-events: auto; transition-delay: 0ms; }

.k-glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
@supports not (backdrop-filter: blur(1px)) { .k-glass { background: rgba(12,18,29,0.96); } }

.k-sheet-layer,
.k-modal-layer { position: fixed; inset: 0; pointer-events: none; }
.k-sheet-layer { z-index: var(--z-sheet); }
.k-sheet__scrim { position: absolute; inset: 0; pointer-events: auto; background: var(--sheet-scrim); animation: k-fade-in var(--t-quick) var(--ease) both; }
.k-sheet { position: absolute; inset: 0 0 0 auto; display: grid; width: 480px; max-width: 100%; grid-template-rows: 64px minmax(0, 1fr) auto; pointer-events: auto; border-left: 1px solid var(--line-2); box-shadow: var(--edge-top-2), var(--shadow-2); animation: k-sheet-in var(--t-fast) var(--ease-inout) both; }
.k-sheet__grab { display: none; }
.k-sheet__header, .k-drawer__header { position: relative; z-index: var(--z-sticky); display: flex; height: 64px; align-items: center; gap: 8px; padding: 0 20px; }
.k-sheet__header::after, .k-drawer__header::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--line-1); opacity: 0; transition: opacity var(--t-micro) var(--ease); }
.k-sheet__header.k-is-scrolled::after, .k-drawer__header.k-is-scrolled::after { opacity: 1; }
.k-sheet__header h2, .k-drawer__header h2 { flex: 1; margin: 0; color: var(--ink); font-size: var(--text-22); font-weight: 600; line-height: 28px; }
.k-sheet__header .k-button:last-child { margin-left: auto; }
.k-sheet__header > .k-tooltip-wrap:last-child { margin-left: auto; }
.k-sheet__body, .k-drawer__body { overflow: auto; padding: 20px; color: var(--ink-88); scrollbar-width: thin; scrollbar-color: var(--ink-12) transparent; scroll-padding: 8px; }
.k-sheet__body.k-is-scrolled, .k-drawer__body.k-is-scrolled { background-image: var(--scroll-shadow-top); background-repeat: no-repeat; background-position: top; background-size: 100% 16px; }
.k-sheet__body.k-has-more, .k-drawer__body.k-has-more { background-image: var(--scroll-shadow-bottom); background-repeat: no-repeat; background-position: bottom; background-size: 100% 16px; }
.k-sheet__body.k-is-scrolled.k-has-more, .k-drawer__body.k-is-scrolled.k-has-more { background-image: var(--scroll-shadow-top), var(--scroll-shadow-bottom); background-position: top, bottom; background-size: 100% 16px, 100% 16px; }
.k-sheet__body p, .k-drawer__body p { margin: 0 0 16px; color: var(--ink-72); font-size: var(--text-16); line-height: 24px; }
.k-sheet__footer { display: flex; min-height: 72px; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px 20px calc(16px + var(--safe-bottom)); border-top: 1px solid var(--line-1); background: var(--glass); backdrop-filter: var(--blur); }
.k-sheet__footer .k-button:first-child:not(:last-child) { margin-left: auto; }
@keyframes k-sheet-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes k-fade-in { from { opacity: 0; } to { opacity: 1; } }
.k-sheet-layer.k-is-leaving .k-sheet, .k-drawer.k-is-leaving { animation: k-sheet-out var(--t-quick) var(--ease-in) both; }
.k-sheet-layer.k-is-leaving .k-sheet__scrim { animation: k-fade-out var(--t-quick) var(--ease-in) both; }
@keyframes k-sheet-out { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes k-fade-out { from { opacity: 1; } to { opacity: 0; } }

.k-popover { position: fixed; z-index: var(--z-popover); min-width: 240px; max-width: min(360px, calc(100vw - 16px)); padding: 8px; border: 1px solid var(--line-2); border-radius: var(--radius-m); box-shadow: var(--edge-top-2), var(--shadow-2); animation: k-popover-in var(--t-quick) var(--ease) both; }
.k-popover[data-side="bottom"] { transform-origin: top; }
.k-popover[data-side="top"] { transform-origin: bottom; }
@keyframes k-popover-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.k-popover.k-is-leaving { animation: k-popover-out var(--t-micro) var(--ease-in) both; pointer-events: none; }
@keyframes k-popover-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } }
.k-menu { display: grid; }
.k-menu__item { display: grid; width: 100%; min-width: 44px; min-height: 44px; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--ink-88); background: transparent; font-size: var(--text-14); font-weight: 500; line-height: 20px; text-align: left; cursor: pointer; }
.k-menu__item small { grid-column: 2 / -1; margin-top: -8px; padding-bottom: 6px; color: var(--ink-55); font-size: var(--text-13); font-weight: 400; line-height: 18px; }
.k-menu__item:hover, .k-menu__item.k-is-active { background: var(--ink-06); }
.k-menu__item.k-is-destructive { color: var(--danger); }
.k-menu__separator { height: 1px; margin: 4px; background: var(--line-1); }

.k-modal-layer { z-index: var(--z-modal); display: grid; place-items: center; pointer-events: auto; }
.k-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ground) 60%, transparent); }
.k-modal { position: relative; width: min(440px, calc(100% - 32px)); padding: 28px; border: 1px solid var(--line-2); border-radius: var(--radius-xl); color: var(--ink-88); background: var(--surf-2); box-shadow: var(--edge-top-2), var(--shadow-3); animation: k-modal-in var(--t-quick) var(--ease) both; }
.k-modal h2 { margin: 0; color: var(--ink); font-size: var(--text-18); font-weight: 600; line-height: 24px; }
.k-modal p { margin: 8px 0 24px; color: var(--ink-72); font-size: var(--text-16); line-height: 24px; }
.k-modal footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@keyframes k-modal-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
.k-modal-layer.k-is-leaving .k-modal { animation: k-modal-out var(--t-quick) var(--ease-in) both; }
.k-modal-layer.k-is-leaving .k-modal__backdrop { animation: k-fade-out var(--t-quick) var(--ease-in) both; }
@keyframes k-modal-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.98); } }

.k-toast-stack { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; width: min(420px, calc(100% - 32px)); flex-direction: column; gap: 8px; }
.k-toast { position: relative; display: flex; min-height: 60px; align-items: center; gap: 8px; overflow: hidden; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: var(--radius-m); color: var(--ink-88); box-shadow: var(--edge-top-2), var(--shadow-2); animation: k-toast-in var(--t-fast) var(--ease) both; }
.k-toast__message { flex: 1; font-size: var(--text-15); line-height: 20px; }
.k-toast__countdown { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--accent); transform-origin: left; animation: k-countdown 4s linear both; }
.k-toast--collapsed { min-height: 44px; justify-content: center; color: var(--ink-72); font-size: var(--text-15); }
@keyframes k-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes k-countdown { to { transform: scaleX(0); } }

.k-tabs { position: relative; display: flex; gap: 24px; }
.k-tabs > button { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; gap: 6px; padding: 0 2px; border: 0; color: var(--ink-55); background: none; font-size: var(--text-14); font-weight: 500; line-height: 20px; cursor: pointer; transition: color var(--t-micro) var(--ease); }
.k-tabs > button:hover { color: var(--ink-88); }
.k-tabs[data-demo-state="hover"] > button:first-child { color: var(--ink-88); }
.k-tabs > button[aria-selected="true"] { color: var(--ink); }
.k-tabs__count { display: inline-grid; min-width: 20px; height: 20px; place-items: center; padding: 0 5px; border-radius: var(--radius-pill); color: var(--accent); background: var(--acc-14); font-size: var(--text-13); line-height: 18px; }
.k-tabs__underline { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--accent); transition: width var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
.k-tabs[data-demo-state="focus"] > button[aria-selected="true"] { box-shadow: var(--focus-ring); }

.k-segmented { position: relative; isolation: isolate; display: inline-grid; height: 44px; grid-template-columns: repeat(var(--k-segment-count), minmax(0, 1fr)); padding: 0 2px; border-radius: 10px; }
.k-segmented::before { content: ""; position: absolute; inset: 4px 0; z-index: -1; border-radius: 10px; background: var(--ink-06); }
.k-segmented__thumb { position: absolute; top: 6px; bottom: 6px; left: 2px; z-index: -1; width: calc((100% - 4px) / var(--k-segment-count)); border-radius: 8px; background: var(--surf-3); box-shadow: var(--edge-top), var(--shadow-1); transform: translateX(calc(var(--k-segment-index) * 100%)); transition: transform var(--t-micro) var(--ease); }
.k-segmented button { position: relative; z-index: 1; height: 44px; min-width: 72px; padding: 0 12px; border: 0; color: var(--ink-72); background: none; font-size: var(--text-14); font-weight: 500; line-height: 20px; cursor: pointer; }
.k-segmented button[aria-selected="true"] { color: var(--ink); }

.k-field { position: relative; display: grid; gap: 6px; width: 100%; color: var(--ink-88); }
.k-field__label { font-size: var(--text-14); font-weight: 500; line-height: 20px; }
.k-input-shell { display: flex; min-height: 44px; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-m); color: var(--ink); background: var(--surf-2); transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease); }
.k-input-shell:hover, .k-input-shell[data-demo-state="hover"] { border-color: var(--line-3); }
.k-input-shell:focus-within, .k-input-shell.k-is-focused, .k-input-shell[data-demo-state="focus"] { border-color: var(--accent); box-shadow: var(--focus-ring); }
.k-input-shell.k-is-error { border-color: var(--danger); }
.k-input-shell.k-is-disabled { border-color: var(--line-1); background: var(--ink-04); }
.k-input-shell input, .k-input-shell textarea { width: 100%; min-width: 0; min-height: 44px; padding: 0 14px; border: 0; outline: 0; color: var(--ink); background: transparent; font-weight: 400; font-size: var(--text-16); line-height: 24px; font-family: var(--sans); }
.k-input-shell input::placeholder, .k-input-shell textarea::placeholder { color: var(--ink-55); }
.k-input-shell input:disabled { color: var(--ink-38); -webkit-text-fill-color: var(--ink-38); }
.k-input-shell.k-has-leading { padding-left: 14px; }
.k-input-shell.k-has-leading input { padding-left: 10px; }
.k-input-shell > .k-button { margin-right: 4px; }
.k-field__helper { display: flex; min-height: 18px; align-items: center; gap: 6px; color: var(--ink-55); font-size: var(--text-13); line-height: 18px; }
.k-field__helper.k-is-error { color: var(--danger); }
.k-input-shell--textarea { min-height: 88px; height: auto; align-items: flex-start; }
.k-input-shell textarea { min-height: 88px; max-height: 192px; padding-block: 12px; resize: none; }
.k-field__counter { position: absolute; right: 0; bottom: 0; font-size: var(--text-13); line-height: 18px; font-variant-numeric: tabular-nums; }
.k-select__trigger { display: flex; width: 100%; height: 44px; align-items: center; justify-content: space-between; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius-m); color: var(--ink); background: var(--surf-2); font-size: var(--text-16); line-height: 24px; cursor: pointer; }
.k-select__trigger:hover { border-color: var(--line-3); }
.k-select__trigger[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--focus-ring); }
.k-toggle-row { display: flex; min-width: 44px; min-height: 44px; align-items: center; gap: 12px; padding: 0; border: 0; color: var(--ink-88); background: none; font-size: var(--text-14); font-weight: 500; line-height: 20px; text-align: left; cursor: pointer; }
.k-toggle { display: flex; width: 44px; height: 24px; align-items: center; padding: 2px; border: 0; border-radius: var(--radius-pill); background: var(--ink-12); cursor: pointer; transition: background var(--t-micro) var(--ease); }
.k-toggle__thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); box-shadow: var(--shadow-1); transition: transform var(--t-micro) var(--ease-toggle); }
.k-toggle-row[aria-checked="true"] .k-toggle { background: var(--accent); }
.k-toggle-row[aria-checked="true"] .k-toggle__thumb { transform: translateX(20px); }
.k-toggle-row:focus-visible { box-shadow: none; }
.k-toggle-row:focus-visible .k-toggle { box-shadow: var(--focus-ring); }
.k-stepper { display: grid; width: 120px; height: 44px; grid-template-columns: 36px 1fr 36px; align-items: center; border: 1px solid var(--line-2); border-radius: var(--radius-m); background: var(--surf-2); }
.k-stepper > .k-control-stack { min-width: 36px; }
.k-stepper .k-button { border: 0; background: transparent; box-shadow: none; }
.k-stepper input { width: 100%; height: 42px; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-weight: 400; font-size: var(--text-16); line-height: 24px; font-family: var(--sans); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.k-stepper input::-webkit-inner-spin-button { display: none; }
.k-stepper.k-is-disabled { background: var(--ink-04); }
.k-stepper.k-is-disabled input { color: var(--ink-38); }
.k-slider { position: relative; display: flex; height: 44px; align-items: center; }
.k-slider input { width: 100%; height: 44px; margin: 0; background: linear-gradient(90deg, var(--accent) var(--k-slider-value), var(--ink-12) var(--k-slider-value)); border-radius: var(--radius-pill); cursor: pointer; appearance: none; background-size: 100% 4px; background-repeat: no-repeat; background-position: center; }
.k-slider input::-webkit-slider-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: var(--shadow-1); appearance: none; }
.k-slider__value { position: absolute; left: var(--k-slider-value); bottom: 38px; z-index: 1; height: 24px; padding: 3px 8px; border-radius: var(--radius-pill); color: var(--ink); background: var(--surf-3); font-size: var(--text-13); line-height: 18px; font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.k-radio-row { display: grid; width: 100%; min-height: 44px; grid-template-columns: 20px 1fr; align-items: center; gap: 12px; padding: 4px 0; border: 0; color: var(--ink-88); background: none; text-align: left; cursor: pointer; }
.k-radio-row__mark { display: grid; width: 21px; height: 21px; place-items: center; border: 2px solid var(--line-3); border-radius: 50%; }
.k-radio-row[aria-checked="true"] .k-radio-row__mark { border-color: var(--accent); }
.k-radio-row[aria-checked="true"] .k-radio-row__mark i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.k-radio-row strong { display: block; color: var(--ink-88); font-size: var(--text-14); font-weight: 500; line-height: 20px; }
.k-radio-row small { display: block; color: var(--ink-55); font-size: var(--text-13); line-height: 18px; }
.k-radio-row + .k-radio-row { margin-top: 8px; }

.k-progress { display: grid; gap: 6px; width: 100%; }
.k-progress__label { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-55); font-size: var(--text-13); line-height: 18px; font-variant-numeric: tabular-nums; }
.k-progress__track { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--ink-08); }
.k-progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--t-base) var(--ease); }
.k-progress__fill.k-tone-live { background: var(--live); }
.k-progress__track.k-is-indeterminate .k-progress__fill { width: 40%; background: var(--shimmer); background-size: 200% 100%; animation: k-shimmer 1.4s linear infinite; }
@keyframes k-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.k-stage-list { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.k-stage-list[data-k-has-active="true"]::before { content: ""; position: absolute; inset: 0 0 auto; height: 48px; border-radius: var(--radius-m); background: var(--live-14); box-shadow: var(--glow-live); pointer-events: none; transform: translateY(calc(var(--k-stage-index) * 48px)); transition: transform var(--t-base) var(--ease); }
.k-stage { display: grid; min-height: 48px; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 0 12px; border-radius: var(--radius-m); }
.k-stage > * { position: relative; z-index: 1; }
.k-stage__rail { position: relative; align-self: stretch; display: flex; justify-content: center; padding-top: 14px; }
.k-stage__rail::after { content: ""; position: absolute; top: 34px; bottom: -14px; width: 1.5px; background: var(--line-2); }
.k-stage__rail.k-is-done::after { background: color-mix(in srgb, var(--done) 40%, transparent); }
.k-stage__rail.k-is-last::after { display: none; }
.k-stage__glyph { display: grid; width: 20px; height: 20px; place-items: center; border: 1.5px solid var(--line-2); border-radius: 50%; color: var(--ink-on-accent); }
.k-stage__glyph.k-is-done { border: 0; background: var(--done); }
.k-stage__glyph.k-is-active { border: 2px solid var(--live); }
.k-stage__glyph.k-is-active i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.k-stage__glyph.k-is-failed { border: 0; background: var(--danger); }
.k-stage__copy { display: flex; min-width: 0; flex-direction: column; }
.k-stage__copy strong { color: var(--ink-88); font-size: var(--text-15); font-weight: 500; line-height: 20px; }
.k-stage__cause { color: var(--danger); font-size: var(--text-13); line-height: 18px; }
.k-stage__meta { color: var(--ink-55); font-size: var(--text-13); line-height: 18px; font-variant-numeric: tabular-nums; }

.k-empty { display: flex; width: min(420px, 100%); flex-direction: column; align-items: center; margin: 30vh auto 0; color: var(--ink-72); text-align: center; }
.k-empty > .k-icon { color: var(--ink-24); }
.k-empty p { margin: 16px 0 20px; color: var(--ink-72); font-size: var(--text-16); line-height: 24px; }
.k-page { position: relative; isolation: isolate; background: var(--bg); }
.k-page::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--beam); transition: opacity var(--t-slow) var(--ease); }
.k-page::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--beam-warm); opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.k-page[data-mood="warm"]::after { opacity: 1; }
.k-page[data-state="running"]::before { animation: k-beam-breathe var(--t-cove) var(--ease-inout) infinite alternate; }
.k-page[data-state="done"]::before { animation-play-state: paused; }
@keyframes k-beam-breathe { from { opacity: 1; } to { opacity: 0.72; } }
.k-page > .k-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>"); background-size: 200px 200px; }
.k-gate { display: grid; min-height: 560px; place-items: center; padding: 40px; }
.k-gate > section { width: min(560px, 100%); text-align: center; }
.k-gate__eyebrow, .k-eyebrow { color: var(--ink-55); font-size: var(--text-13); font-weight: 600; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; }
.k-gate h1, .k-gate h2 { margin: 12px 0 8px; color: var(--ink); font-family: var(--display); font-size: var(--text-28); font-weight: 600; line-height: 32px; letter-spacing: -0.01em; }
.k-gate p { margin: 0; color: var(--ink-72); font-size: var(--text-16); line-height: 24px; }
.k-gate__actions { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }

.k-drawer { position: fixed; inset: 0 0 0 auto; z-index: var(--z-drawer); display: grid; width: min(420px, 96vw); grid-template-rows: 64px minmax(0, 1fr); border-left: 1px solid var(--line-2); box-shadow: var(--shadow-2); animation: k-sheet-in var(--t-fast) var(--ease-inout) both; }
.k-drawer__header > span { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.k-drawer__header small { color: var(--ink-55); font-size: var(--text-13); font-weight: 600; line-height: 18px; letter-spacing: 0.08em; text-transform: uppercase; }

.k-skeleton-group { display: grid; gap: 8px; width: 100%; padding-top: 4px; }
.k-skeleton { position: relative; display: block; overflow: hidden; min-height: 14px; border-radius: 6px; background: var(--skeleton-base); color: var(--ink-24); animation: k-skeleton-reveal 0ms linear 100ms both; }
.k-skeleton::after { content: ""; position: absolute; inset: 0; background: var(--shimmer); background-size: 200% 100%; animation: k-shimmer 1.4s linear infinite; }
.k-skeleton--media { min-height: 280px; border-radius: 12px; }
@keyframes k-skeleton-reveal { from { visibility: hidden; } to { visibility: visible; } }
.k-tooltip-wrap { position: relative; display: inline-flex; }
.k-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: var(--z-tooltip); width: max-content; max-width: 240px; padding: 6px 10px; border-radius: 8px; color: var(--ink); background: var(--surf-3); box-shadow: var(--shadow-2); font-size: var(--text-13); line-height: 18px; transform: translateX(-50%); }
.k-tooltip::after { content: ""; position: absolute; top: 100%; left: calc(50% - 3px); border: 3px solid transparent; border-top-color: var(--surf-3); }
.k-shortcut { display: inline-flex; height: 20px; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--ink-72); background: var(--ink-08); }
.k-shortcut kbd { color: inherit; background: none; font-weight: 400; font-size: var(--text-13); line-height: 18px; font-family: var(--mono); }
.k-shortcut--accent { color: color-mix(in srgb, var(--ink-on-accent) 80%, transparent); background: color-mix(in srgb, var(--ink-on-accent) 16%, transparent); border-color: transparent; }
.k-receipt-row { display: grid; min-height: 40px; grid-template-columns: 40% minmax(0, 60%); align-items: center; gap: 16px; border-bottom: 1px solid var(--line-1); }
.k-receipt-row > span { color: var(--ink-55); font-size: var(--text-13); line-height: 18px; }
.k-receipt-row strong { color: var(--ink-88); font-size: var(--text-15); font-weight: 400; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.k-receipt-row strong.k-is-mono { font-family: var(--mono); font-size: var(--text-13); line-height: 18px; }
.k-receipt-row strong.k-is-quote { hanging-punctuation: first; text-indent: -0.4em; }
.k-disclosure { display: grid; gap: 8px; }
.k-disclosure__trigger-row { display: flex; min-height: 44px; align-items: center; }
.k-disclosure__trigger-row .k-button .k-icon { transition: transform var(--t-micro) var(--ease); }
.k-disclosure.k-is-open .k-disclosure__trigger-row .k-button .k-icon { transform: rotate(90deg); }
.k-disclosure__clip { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-quick) var(--ease), opacity var(--t-micro) var(--ease); }
.k-disclosure.k-is-open .k-disclosure__clip { grid-template-rows: 1fr; opacity: 1; }
.k-disclosure__panel { min-height: 0; overflow: hidden; padding: 0 16px; border-radius: var(--radius-m); color: var(--ink-72); background: var(--surf-0); font-weight: 400; font-size: var(--text-13); line-height: 18px; font-family: var(--mono); }
.k-disclosure.k-is-open .k-disclosure__panel { padding-block: 16px; }
.k-disclosure__panel { position: relative; }
.k-disclosure__panel code { display: block; padding-right: 44px; color: var(--ink-72); font: inherit; overflow-wrap: anywhere; }
.k-disclosure__copy-row { position: absolute; top: 4px; right: 4px; display: grid; width: 44px; height: 44px; place-items: center; }
.k-wordmark { display: inline-flex; color: var(--ink); font-family: var(--display); font-size: var(--text-22); font-weight: 600; line-height: 28px; letter-spacing: -0.015em; }
.k-wordmark strong { color: var(--accent); font: inherit; }
.k-wordmark.k-is-compact span:first-child { display: none; }

.k-frame { padding: 6px; border-radius: var(--radius-m); background: var(--surf-2); box-shadow: var(--frame-bezel); }
.k-frame.k-is-marketing { transform: perspective(1200px) rotateY(-6deg); }
.k-frame > .k-thumb, .k-frame > .k-stage { border-radius: 8px; }
.k-player { position: relative; overflow: hidden; min-width: 44px; min-height: 44px; color: var(--ink); }
.k-player > video { display: block; width: 100%; height: 100%; border-radius: 8px; background: var(--surf-0); object-fit: contain; }
.k-player__badge { position: absolute; top: 18px; left: 18px; }
.k-player__controls { position: absolute; right: 6px; bottom: 6px; left: 6px; display: flex; height: 48px; align-items: center; gap: 8px; padding: 0 6px; border-radius: 0 0 8px 8px; box-shadow: var(--edge-top-2); opacity: 0; pointer-events: none; transition: opacity var(--t-quick) var(--ease); }
.k-player__controls.k-is-visible { opacity: 1; pointer-events: auto; }
.k-player__time { flex: 0 0 auto; color: var(--ink); font-weight: 400; font-size: var(--text-13); line-height: 18px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.k-player__scrubber { min-width: 60px; flex: 1; height: 44px; accent-color: var(--accent); }
.k-player__scrubber { margin: 0; background: linear-gradient(90deg, var(--accent) var(--k-player-progress), var(--ink-12) var(--k-player-progress)) center / 100% 4px no-repeat; appearance: none; }
.k-player__scrubber::-webkit-slider-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); appearance: none; transition: width var(--t-micro) var(--ease), height var(--t-micro) var(--ease); }
.k-player__scrubber:hover::-webkit-slider-thumb { width: 16px; height: 16px; }
.k-player__scrubber::-moz-range-track { height: 4px; border: 0; border-radius: var(--radius-pill); background: var(--ink-12); }
.k-player__scrubber::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--ink); transition: width var(--t-micro) var(--ease), height var(--t-micro) var(--ease); }
.k-player__scrubber:hover::-moz-range-thumb { width: 16px; height: 16px; }
.k-transcript { overflow: auto; max-height: 360px; scrollbar-width: thin; scrollbar-color: var(--ink-12) transparent; scroll-padding: 8px; }
.k-transcript-row { display: grid; width: 100%; min-width: 44px; min-height: 44px; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; color: var(--ink-72); cursor: pointer; transition: color var(--t-micro) var(--ease), background var(--t-micro) var(--ease); }
.k-transcript-row:hover { background: var(--ink-06); }
.k-transcript-row.k-is-active { color: var(--ink); background: var(--acc-08); }
.k-transcript-row__time { color: var(--ink-55); font-weight: 400; font-size: var(--text-13); line-height: 20px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.k-transcript-row__text { font-size: var(--text-15); line-height: 20px; hanging-punctuation: first; }
.k-transcript-row__text.k-is-kept { text-decoration: underline 2px color-mix(in srgb, var(--done) 60%, transparent); text-underline-offset: 3px; }
.k-transcript-row__text.k-is-removed { text-decoration: underline 2px color-mix(in srgb, var(--danger) 60%, transparent); text-underline-offset: 3px; }
.k-timeline { position: relative; height: 56px; margin-bottom: 24px; border-radius: var(--radius-m); background: var(--surf-2); }
.k-timeline__wave { position: absolute; inset: 8px; display: flex; align-items: center; gap: 1px; overflow: hidden; }
.k-timeline__wave i { width: 2px; max-height: 34px; flex: 0 0 2px; background: var(--ink-24); }
.k-timeline__range { position: absolute; top: 0; bottom: 0; left: var(--k-range-start); right: calc(100% - var(--k-range-end)); background: var(--acc-14); }
.k-timeline__handle { position: absolute; top: 6px; z-index: 2; width: 44px; height: 44px; background: transparent; cursor: ew-resize; }
.k-timeline__handle::before { content: ""; position: absolute; inset: 0 16px; background: var(--accent); }
.k-timeline__handle.k-is-start { left: var(--k-range-start); transform: translateX(-50%); }
.k-timeline__handle.k-is-end { left: var(--k-range-end); transform: translateX(-50%); }
.k-timeline__playhead { position: absolute; top: 0; bottom: 0; left: var(--k-playhead); z-index: 3; width: 2px; background: var(--ink); }
.k-timeline__playhead::before { content: ""; position: absolute; top: 0; left: -3px; border: 4px solid transparent; border-top-color: var(--ink); }
.k-timeline__ticks { position: absolute; top: 60px; right: 0; left: 0; height: 18px; color: var(--ink-55); font-weight: 400; font-size: var(--text-13); line-height: 18px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.k-timeline__ticks span { position: absolute; transform: translateX(-50%); }

.k-gallery { min-height: 100vh; padding: 48px 56px 80px; color: var(--ink-88); }
.k-gallery__header { max-width: 760px; margin: 0 auto 40px; }
.k-gallery__header .k-wordmark { display: flex; margin-bottom: 32px; }
.k-gallery__header h1 { max-width: 18ch; margin: 8px 0; color: var(--ink); font-family: var(--display); font-size: var(--text-36); font-weight: 600; line-height: 40px; letter-spacing: -0.015em; }
.k-gallery__header p { margin: 0; color: var(--ink-72); font-size: var(--text-16); line-height: 24px; }
.k-gallery__grid { display: grid; max-width: 1120px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 auto; }
.k-gallery__item { min-width: 0; overflow: hidden; border: 1px solid var(--line-1); border-radius: var(--radius-l); background: var(--surf-1); box-shadow: var(--edge-top), var(--shadow-1); }
.k-gallery__item > header { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line-1); }
.k-gallery__item > header h2 { margin: 0; color: var(--ink-88); font-size: var(--text-14); font-weight: 500; line-height: 20px; }
.k-gallery__item > header span { color: var(--ink-55); font-size: var(--text-13); line-height: 18px; }
.k-gallery__stage { position: relative; display: grid; min-height: 220px; align-content: center; justify-items: stretch; gap: 16px; padding: 32px; }
.k-demo-dense-row { display: flex; min-height: 44px; align-items: center; }
.k-gallery__stage > :not(.k-demo-overlay):not(.k-demo-popover):not(.k-toast-stack) { max-width: 100%; }
.k-gallery__stage .k-empty { margin-top: 0; }
.k-demo-card-width { width: min(260px, 100%); justify-self: center; }
.k-demo-player { width: min(280px, 100%); justify-self: center; }
.k-demo-receipt { width: 100%; }
.k-demo-overlay { position: relative; width: 100%; height: 620px; overflow: hidden; border-radius: var(--radius-m); }
.k-demo-overlay .k-sheet-layer, .k-demo-overlay .k-modal-layer, .k-demo-overlay .k-drawer { position: absolute; }
.k-demo-popover { position: relative; min-height: 320px; padding-top: 120px; }
.k-demo-popover .k-popover { position: absolute; }
.k-gallery__stage > .k-toast-stack { position: relative; right: auto; bottom: auto; width: 100%; }

/* breakpoint: tablet */
@media (max-width: 820px) {
  .k-page::before { background: var(--beam-phone); }
  .k-page[data-mood="warm"]::before { background: var(--beam-phone-warm); }
  .k-card { padding: var(--space-4, 16px); }
  .k-clip-grid { --k-grid-columns: 2; gap: 12px; }
  .k-clip-card__hover-actions, .k-list-row__hover-actions { display: none; }
  .k-list-row { gap: 12px; padding-inline: 12px; }
  .k-list-row > .k-status { display: none; }
  .k-list-row__actions > .k-button--secondary { display: none; }
  .k-sheet { inset: auto 0 0; width: 100%; height: min(92%, 760px); grid-template-rows: 64px minmax(0, 1fr) auto; border: 0; border-radius: 20px 20px 0 0; animation-name: k-sheet-phone-in; }
  .k-sheet__grab { position: absolute; top: 8px; left: calc(50% - 18px); z-index: 2; display: block; width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--line-2); }
  .k-sheet__header { padding-top: 8px; }
  .k-drawer { inset: auto 0 0; width: 100%; height: min(92%, 760px); border: 0; border-radius: 20px 20px 0 0; animation-name: k-sheet-phone-in; }
  .k-drawer::before { content: ""; position: absolute; top: 8px; left: calc(50% - 18px); z-index: 2; width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--line-2); }
  .k-drawer__header { padding-top: 8px; }
  .k-toast-stack { right: 16px; bottom: calc(76px + var(--safe-bottom)); left: 16px; width: auto; }
  .k-gallery__stage > .k-toast-stack { right: auto; bottom: auto; left: auto; width: 100%; }
  .k-gate { padding: 24px; }
  .k-gate__actions { flex-direction: column; }
  .k-gallery { padding: 32px 24px calc(80px + var(--safe-bottom)); }
  .k-gallery__header { margin-bottom: 32px; }
  .k-gallery__header h1 { font-size: var(--text-28); line-height: 32px; }
  .k-gallery__grid { grid-template-columns: 1fr; gap: 16px; }
  .k-gallery__stage { min-height: 190px; padding: 24px 16px; }
  .k-demo-overlay { height: 660px; }
  .k-sheet-layer.k-is-leaving .k-sheet, .k-drawer.k-is-leaving { animation-name: k-sheet-phone-out; }
}

@keyframes k-sheet-phone-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes k-sheet-phone-out { from { transform: translateY(0); } to { transform: translateY(100%); } }

@media (prefers-reduced-transparency: reduce) { .k-page > .k-grain { display: none; } }

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0; }
  .k-skeleton::after,
  .k-progress__track.k-is-indeterminate .k-progress__fill,
  .k-status--running .k-status__dot { animation: none; opacity: 0.6; }
  .k-page[data-state="running"]::before { animation: none; }
  .k-toggle__thumb { transition: none; }
}

@media (hover: none) { .k-tooltip { display: none; } }

/* ===== w4-landing.css ===== */
/* Composition only. Materials and controls belong to the existing kit. */
.w4-landing {
  /* Section 4's weights are 400/500/600 as bare numbers: the foundation
     declares no weight token and this sheet redeclares none. */
  font-weight: 400;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-16);
  line-height: normal;
  padding: var(--space-6);
}
.w4-landing *, .w4-landing *::before, .w4-landing *::after { box-sizing: border-box; }
.w4-landing__header, .w4-landing__main, .w4-landing__footer {
  width: 100%;
  max-width: calc(var(--space-10) * 14);
  margin-inline: auto;
}
.w4-landing__header { padding-block: var(--space-4); }
.w4-landing__hero {
  display: flex;
  flex-wrap: wrap;
  /* start, not center: centering a hero taller than the viewport pushes the
     card's own footer below the fold on a short desktop window. */
  align-items: start;
  gap: var(--space-7);
  padding-block: var(--space-6);
}
.w4-landing__copy { flex: 2 1 calc(var(--space-10) * 5); min-width: 0; }
/* The card and the one text link beside it are ONE column. Without this the
   link became a third flex child and floated in the empty right margin. */
.w4-landing__entry {
  flex: 1 1 calc(var(--space-10) * 4);
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}
.w4-landing__signin { width: 100%; min-width: 0; }
/* Discrete steps, not a clamp. A clamp on a viewport unit lands between the
   13/14/15/16/18/22/28/36/48 steps at almost every window width; the phone step
   still has to come down, or a 48px display face fills the fold and pushes the
   sign-in card off the screen, so the step is taken at a breakpoint instead. */
.w4-landing h1 {
  font-family: var(--display);
  font-size: var(--text-48);
  font-weight: 600;
  margin-block: var(--space-4) var(--space-6);
  overflow-wrap: anywhere;
}
.w4-landing h2 { font-family: var(--display); font-size: var(--text-28); font-weight: 600; }
.w4-landing p { margin-block: var(--space-3); }
.w4-landing__eyebrow { color: var(--accent-text); font-size: var(--text-13); }
.w4-landing__lead { font-size: var(--text-18); color: var(--ink-88); }
.w4-landing__signin > h2 { font-size: var(--text-28); }
.w4-landing__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.w4-landing__text-link .k-button__label { text-decoration: underline; }
.w4-landing__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-10) * 4)), 1fr));
  gap: var(--space-6);
  margin-block: var(--space-7) var(--space-9);
}
.w4-landing__features > .k-feature-card { min-width: 0; }
/* The proof shelf. Composition only: the shelf's own materials ship with it in
   acquisition-first-run.css, which is already in the eager census, so this adds
   spacing and a width floor and nothing else. */
.w4-landing__proof { margin-block: var(--space-7) var(--space-9); }
.w4-landing__proof-header { margin-bottom: var(--space-6); }
.w4-landing__proof .sample-showcase { width: 100%; min-width: 0; }
.w4-landing__product { padding: var(--space-4); width: 100%; }
.w4-landing__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); }
.w4-landing__footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.w4-landing .k-button { min-height: calc(var(--space-8) + var(--space-1)); min-width: calc(var(--space-8) + var(--space-1)); height: auto; }
.w4-landing .k-button__label { white-space: normal; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .w4-landing, .w4-landing::before, .w4-landing *, .w4-landing *::before, .w4-landing *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .w4-landing .k-product-frame { transform: none; }
}

/* The hero's own product, so the desktop fold's left half carries something
   below the lead instead of 650px of ground. */
.w4-landing__preview { margin-top: var(--space-6); max-width: calc(var(--space-10) * 6); }
.w4-landing .k-button { font-weight: 500; }
/* The hero's two columns need 752px of content box (400 + 320 + a 32 gap), so it
   wraps below about 800px: the stacked rules have to start above that, or there is
   a band where the preview stacks ahead of the card again. `tablet` is the
   canonical step that clears it. */
/* breakpoint: tablet */
@media (max-width: 820px) {
  .w4-landing h1 { font-size: var(--text-28); }
  .w4-landing__signin > h2 { font-size: var(--text-22); }
  /* B3. On the phone the hero stacks, and the hero's own preview stacked ahead
     of the sign-in card, pushing the one primary out of the 844px fold at rest
     and out of the viewport entirely after a wrong password. The card is the
     reason the screen exists, so on the phone it precedes the preview: the copy
     column stops being a box (its children join the hero directly) and the
     preview takes the last order slot, below the card. The desktop composition
     is untouched, so M4's two-column fold still measures as it did. */
  /* The chrome above the card is the other half of the B3 budget: the phone
     fold has to hold the header, the hero's lead-in and the whole card. */
  .w4-landing__header { padding-block: var(--space-2); }
  .w4-landing__hero { flex-direction: column; align-items: stretch; gap: var(--space-4); padding-block: var(--space-4) var(--space-6); }
  .w4-landing__copy { display: contents; }
  .w4-landing__entry { order: 1; }
  .w4-landing__preview { order: 2; margin-top: 0; max-width: none; }
}

/* ===== w4-auth.css ===== */
/* Natural document order is the keyboard order; no visual reordering. */
.w4-auth {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: var(--space-7);
  padding: var(--space-6);
  color: var(--ink);
  background: var(--bg);
}
.w4-auth > * { flex: auto; flex-basis: calc(var(--density-control) * 8); min-width: var(--space-1); }
.w4-auth__frame { max-width: calc(var(--density-control) * 12); }
.w4-auth__card { position: relative; padding: var(--space-4); display: grid; gap: var(--space-2); }
.w4-auth__form { display: grid; gap: var(--space-2); }
.w4-auth__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.w4-auth :is(button, input):not([aria-hidden="true"]) {
  min-height: calc(var(--space-8) + var(--space-1));
  min-width: calc(var(--space-8) + var(--space-1));
}
.w4-auth :focus-visible { box-shadow: var(--focus-ring); }
.w4-auth [data-copy-slot] { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .w4-auth *, .w4-auth *::before, .w4-auth *::after { animation: none; transition: none; }
}
@media (forced-colors: active) {
  .w4-auth :focus-visible { outline-style: solid; }
}

.w4-auth__form, .w4-auth .k-field { min-inline-size: var(--space-1); }
.w4-auth__frame .k-product-frame__media { overflow: visible; }

/* Embedded in the landing's signin-card slot: the landing owns the page ground,
   the beam and the display face, so the card contributes neither. */
.w4-auth--embedded { padding: 0; background: none; gap: var(--space-2); }
.w4-auth--embedded > * { flex-basis: auto; }

.w4-auth__card > :is(h1, h2, p) { margin: 0; }
.w4-auth__card > :is(h1, h2) { font-size: var(--text-28); font-weight: 600; }
.w4-auth__card > .k-eyebrow { font-size: var(--text-13); }
.w4-auth [data-copy-slot="auth-result"]:empty { display: none; }
.w4-auth__legal { font-size: var(--text-13); gap: 0; }
.w4-auth__legal-links { display: inline-flex; flex-wrap: nowrap; }
.w4-auth__legal-links .k-button__label { white-space: nowrap; }
.w4-auth .k-field { gap: var(--space-1); }

.w4-auth .ui-feedback { padding: var(--space-2); font-size: var(--text-14); font-weight: 400; line-height: 1.35; }

/* ===== w4-waitlist.css ===== */
.w4-waitlist {
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--beam), var(--bg);
  /* M9. The rail draws its corner ticks OUTSIDE itself, so whatever follows the
     rail has to clear them or the bottom pair lands on the next line of text.
     Measured before this rule: the tick boxes and the shelf's FINISHED OUTPUT
     eyebrow box intersected at both viewports, which is the walkthrough's
     "a corner tick is painted on the eyebrow below it". The harness asserts the
     boxes, not this value. */
  margin-bottom: var(--space-6);
}
.w4-waitlist .k-feature-card {
  background: none;
  box-shadow: none;
}
.w4-waitlist .k-feature-card__title {
  font-family: var(--display);
}
.w4-waitlist__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}
.w4-waitlist__form .k-button {
  min-height: calc(var(--space-8) + var(--space-1));
}
.w4-waitlist__form p {
  margin: auto;
  color: var(--ink-72);
  overflow-wrap: anywhere;
}
.w4-waitlist__form [role="alert"] {
  color: var(--danger);
}
@media (prefers-reduced-motion: reduce) {
  .w4-waitlist::before,
  .w4-waitlist::after {
    animation: none;
    transition: none;
  }
}


/* B1. styles.css locks the app document (html, body { overflow: hidden }) for the
   signed-in shell, which owns its own scroller. This public destination is reached
   from the landing, so it owns one too, with its exit above the fold at both sizes. */
[data-ui="acquisition-v3"][data-stage="waitlist"] {
  height: 100dvh;
  overflow-y: auto;
}

/* M3. The proof shelf runs on the kit type scale and kit tokens on this route: sans and
   display faces, weights at or under the 600 ceiling, sizes from the scale, no clamps. */
[data-stage="waitlist"] .acq-proof__header,
[data-stage="waitlist"] .sample-showcase {
  font-family: var(--sans);
  font-size: var(--text-16);
  font-weight: 400;
  line-height: var(--space-6);
  letter-spacing: normal;
  color: var(--ink-72);
}
[data-stage="waitlist"] .acq-proof__header .k-eyebrow {
  margin: 0 0 var(--space-2);
}
[data-stage="waitlist"] .acq-proof__header h2 {
  font-family: var(--display);
  font-size: var(--text-22);
  font-weight: 600;
  line-height: var(--space-7);
  letter-spacing: normal;
  color: var(--ink);
}
[data-stage="waitlist"] .sample-showcase h3,
[data-stage="waitlist"] .sample-card__caption h3 {
  font-family: var(--display);
  font-size: var(--text-18);
  font-weight: 600;
  line-height: var(--space-6);
  letter-spacing: normal;
  color: var(--ink);
}
[data-stage="waitlist"] .sample-showcase__state-kicker {
  font-family: var(--sans);
  font-size: var(--text-13);
  font-weight: 600;
  line-height: var(--space-5);
  letter-spacing: 0.08em;
  color: var(--ink-55);
}
[data-stage="waitlist"] .acq-proof__header > p,
[data-stage="waitlist"] .sample-showcase__state-copy,
[data-stage="waitlist"] .sample-showcase__heading > p:last-child,
[data-stage="waitlist"] .sample-card__caption p {
  font-family: var(--sans);
  font-size: var(--text-16);
  font-weight: 400;
  line-height: var(--space-6);
  letter-spacing: normal;
  color: var(--ink-72);
}
[data-stage="waitlist"] .sample-card__rank,
[data-stage="waitlist"] .sample-card__score {
  font-family: var(--sans);
  font-size: var(--text-13);
  font-weight: 600;
  line-height: var(--space-5);
  letter-spacing: normal;
}

/* ===== run-truth.css ===== */
/* Run truth drawer leaf. Theme values come only from the Track 4 foundation. */

.rt-root {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  justify-items: end;
  color: var(--ui-text);
  font-family: var(--sans);
}

.rt-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--drawer-scrim);
  cursor: default;
}

.rt-drawer {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(560px, 100%);
  height: 100%;
  border-left: 1px solid var(--ui-line);
  background: var(--ui-surface);
  box-shadow: var(--floor-lift);
  overflow: hidden;
}

.rt-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--ui-line);
}

.rt-drawer__heading {
  min-width: 0;
}

.rt-drawer__heading h2 {
  margin: var(--space-1) 0 var(--space-2);
  color: var(--ui-text);
  font: 650 var(--type-heading-2)/1.08 var(--display);
  letter-spacing: -0.025em;
}

.rt-drawer__heading h2:focus-visible {
  border-radius: var(--radius-xs);
  outline: 2px solid var(--accent-text);
  outline-offset: var(--space-1);
}

.rt-drawer__heading > p:last-child {
  max-width: 44ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body);
  line-height: 1.55;
}

.rt-drawer__eyebrow {
  margin: 0;
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.rt-close {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--density-control);
  height: var(--density-control);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-md);
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  font: 400 var(--type-heading-3)/1 var(--sans);
  cursor: pointer;
  transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}

.rt-close:hover {
  border-color: var(--ink-55);
  color: var(--ui-text);
}

.rt-close:focus-visible,
.rt-action:focus-visible,
.rt-row summary:focus-visible,
.rt-row a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.rt-live {
  min-height: 1px;
  padding: 0 var(--space-6);
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 650;
}

.rt-live:not(:empty) {
  padding-top: var(--space-3);
}

.rt-drawer__body {
  min-height: 0;
  padding: var(--space-5) var(--space-6) var(--space-7);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--ink-24) transparent;
  scrollbar-width: thin;
}

.rt-list {
  display: grid;
  gap: var(--space-3);
}

.rt-row {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-lg2);
  background: var(--ui-surface-raised);
  box-shadow: var(--shadow-xs);
}

.rt-row--blocking {
  border-color: var(--danger);
}

.rt-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.rt-row__family {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.rt-row__stale {
  margin-left: auto;
  color: var(--amber);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rt-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--type-meta);
  font-weight: 750;
  white-space: nowrap;
}

.rt-status__icon {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  font-size: var(--text-sm);
  line-height: 1;
}

.rt-status--pass {
  color: var(--ink);
}

.rt-status--live {
  color: var(--accent-text);
}

.rt-status--warning,
.rt-status--attention {
  color: var(--amber);
}

.rt-status--danger {
  color: var(--danger);
}

.rt-status--neutral {
  color: var(--ink-55);
}

.rt-row__sentence {
  margin: var(--space-4) 0 0;
  color: var(--ui-text);
  font-size: var(--type-body-large);
  font-weight: 620;
  line-height: 1.48;
}

.rt-row__code {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-1);
}

.rt-row__region-label {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 650;
}

.rt-row__code code {
  overflow-wrap: anywhere;
  color: var(--ui-text);
  font-family: var(--mono);
  font-size: var(--type-meta);
}

.rt-row__evidence {
  margin-top: var(--space-3);
  border-top: 1px solid var(--line-1);
}

.rt-row__evidence summary {
  min-height: var(--density-control);
  padding: var(--space-3) 0;
  color: var(--accent-text);
  font-size: var(--type-label);
  font-weight: 700;
  cursor: pointer;
}

.rt-row__evidence dl {
  display: grid;
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0 0 var(--space-3);
}

.rt-row__evidence dt,
.rt-row__evidence dd {
  margin: 0;
  font-size: var(--type-meta);
  line-height: 1.45;
}

.rt-row__evidence dt {
  color: var(--ui-text-muted);
}

.rt-row__evidence dd {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ui-text);
}

.rt-row__evidence time {
  display: block;
  margin-top: var(--space-1);
  color: var(--ui-text-muted);
}

.rt-row__evidence a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

.rt-row__remedy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--ink-04);
}

.rt-row__remedy p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.45;
}

.rt-action {
  min-height: var(--density-control);
  padding: 0 var(--space-4);
  border: 1px solid var(--accent-text);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent-text);
  font: 700 var(--type-label)/1 var(--sans);
  cursor: pointer;
}

.rt-source {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--amber);
  border-radius: var(--radius-md);
  color: var(--amber);
  background: var(--ui-surface-raised);
}

.rt-source--error[role="alert"] {
  border-color: var(--danger);
  color: var(--danger);
}

.rt-source--loading {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.rt-source p {
  margin: 0;
  font-size: var(--type-label);
  line-height: 1.5;
}

.rt-source__time {
  color: var(--ui-text-muted);
}

.rt-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--ui-line);
  border-radius: var(--radius-lg2);
  color: var(--ui-text-muted);
  text-align: center;
}

.rt-empty__mark {
  display: grid;
  place-items: center;
  width: var(--density-control);
  height: var(--density-control);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  font-size: var(--type-heading-3);
}

.rt-empty p {
  margin: 0;
  font-size: var(--type-body);
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .rt-drawer {
    width: 100%;
    border-left: 0;
  }

  .rt-drawer__header {
    padding: var(--space-5) var(--space-4) var(--space-4);
  }

  .rt-live {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .rt-drawer__body {
    padding: var(--space-4);
  }

  .rt-row {
    padding: var(--space-4);
  }

  .rt-row__header,
  .rt-row__remedy {
    grid-template-columns: 1fr;
  }

  .rt-row__header {
    align-items: flex-start;
  }

  .rt-row__evidence dl {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-close {
    transition-duration: 0s;
  }
}

@media (forced-colors: active) {
  .rt-drawer,
  .rt-row,
  .rt-source,
  .rt-close,
  .rt-action,
  .rt-status {
    border-color: currentColor;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .rt-scrim {
    background: transparent;
  }
}

/* ===== account-billing.css ===== */
/* FDP D2.2 — calm account statement and connected-account ledger. Token-only. */

.bill-account-scene,
.account-scene--billing {
  color: var(--ui-text);
}

.bill-stack,
.acct-conn,
.acct-conn__stack {
  display: flex;
  flex-direction: column;
}

.bill-stack { gap: var(--space-8); }
.acct-conn { gap: var(--space-9); }
.acct-conn__stack { gap: var(--space-5); }

.bill-statement {
  padding: var(--space-7);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-l);
  background: var(--card-sheen), var(--ui-surface-raised);
  box-shadow: var(--floor-lift);
}

.bill-statement.is-past-due { border-color: var(--danger); }

.bill-statement__top,
.bill-statement__footer,
.bill-section-heading,
.acct-conn__lead-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.bill-kicker,
.acct-conn__heading > span {
  display: block;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.bill-statement h2,
.bill-section-heading h3,
.bill-cancel h3,
.acct-conn__heading h2,
.acct-conn__lead h3 {
  margin: 0;
  color: var(--ui-text);
  font-family: var(--display);
  letter-spacing: -0.025em;
}

.bill-statement h2 {
  margin-top: var(--space-1);
  font-size: var(--type-heading-1);
  font-weight: 680;
  line-height: 1;
}

.bill-section-heading h3,
.bill-cancel h3,
.acct-conn__heading h2 {
  margin-top: var(--space-1);
  font-size: var(--type-heading-3);
  font-weight: 660;
  line-height: 1.15;
}

.bill-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bill-status--danger {
  border-color: var(--danger);
  color: var(--danger);
}

.bill-payment-failure {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--danger);
  border-radius: var(--radius-m);
  background: var(--danger-16);
  color: var(--ui-text);
}

.bill-payment-failure strong { color: var(--danger); }
.bill-payment-failure span { color: var(--ui-text-muted); font-size: var(--type-label); }

.bill-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-7) 0 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.bill-facts > div {
  min-width: 0;
  padding: var(--space-5) var(--space-4);
}

.bill-facts > div:first-child { padding-left: 0; }
.bill-facts > div:last-child { padding-right: 0; }
.bill-facts > div + div { border-left: 1px solid var(--ui-line); }

.bill-facts dt {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.35;
}

.bill-facts dd {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
  color: var(--ui-text);
  font: 650 var(--type-body-large)/1.35 var(--mono);
}

.bill-statement__footer {
  align-items: center;
  margin-top: var(--space-6);
}

.bill-statement__footer > p,
.bill-statement__intro,
.bill-section-heading > p,
.bill-cancel > p,
.bill-catalog-note,
.acct-conn__heading p,
.acct-conn__lead p {
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.6;
}

.bill-statement__footer > p {
  max-width: 52ch;
  margin: 0;
}

.bill-statement__intro { max-width: 62ch; margin: var(--space-4) 0 0; }
.bill-section-heading > p { max-width: 42ch; margin: 0; text-align: right; }

.bill-progress,
.bill-disabled-reason,
.acct-conn__progress {
  margin: var(--space-3) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.5;
}

.bill-progress { color: var(--accent-text); font-weight: 650; }

.bill-section,
.bill-cancel,
.acct-conn__section {
  padding-top: var(--space-7);
  border-top: 1px solid var(--ui-line);
}

.bill-section-heading { align-items: end; margin-bottom: var(--space-5); }

.bill-tier-ledger {
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.bill-tier {
  display: grid;
  grid-template-columns: minmax(108px, .8fr) minmax(190px, 1.35fr) minmax(110px, .75fr) minmax(150px, 1fr);
  align-items: center;
  gap: var(--space-4);
  min-height: 84px;
  padding: var(--space-4) 0;
  color: var(--ui-text);
}

.bill-tier + .bill-tier { border-top: 1px solid var(--ui-line); }
.bill-tier.is-current { background: var(--ink-04); }

.bill-tier__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-3);
}

.bill-tier__name strong { font: 660 var(--type-body-large)/1.2 var(--display); }
.bill-tier__name span {
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bill-tier__allowance { color: var(--ui-text-muted); font-size: var(--type-label); line-height: 1.55; }
.bill-tier__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); }
.bill-tier__price strong { font: 680 var(--type-heading-3)/1 var(--display); }
.bill-tier__price span,
.bill-tier__note { color: var(--ui-text-muted); font-size: var(--type-meta); }
.bill-tier__action { display: grid; justify-items: end; gap: var(--space-2); padding-right: var(--space-3); text-align: right; }

.bill-catalog-note { margin: var(--space-4) 0 0; }

.bill-capabilities__list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
}

.bill-capabilities__list > div:last-child { border-bottom: 1px solid var(--ui-line); }
.bill-capabilities__list > div > span:last-child { display: inline-flex; align-items: center; gap: var(--space-2); }
.bill-capabilities__list .is-included { color: var(--ui-text); }

.bill-cancel > p { max-width: 62ch; margin: var(--space-3) 0 0; }

.bill-cancel__entry,
.bill-danger-action,
.bill-quiet-action,
.acct-conn__disconnect {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--ui-text);
  font: 650 var(--type-label)/1 var(--sans);
  cursor: pointer;
}

.bill-cancel__entry { color: var(--ui-text-muted); }
.bill-danger-action { border-color: var(--danger); color: var(--danger); }
.bill-danger-action:hover:not(:disabled) { background: var(--danger-16); }
.bill-quiet-action:hover:not(:disabled),
.bill-cancel__entry:hover:not(:disabled),
.acct-conn__disconnect:hover:not(:disabled) { background: var(--ink-06); color: var(--ui-text); }

.bill-cancel__confirm {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--danger);
  border-radius: var(--radius-m);
  background: var(--danger-16);
}

.bill-cancel__confirm p { margin: 0; color: var(--ui-text); font-size: var(--type-label); }
.bill-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.v2-panel.bill-code-panel,
.bill-code-panel > div,
.bill-usage-panel {
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--radius-m) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: none;
}

.bill-code-panel__inner > div:first-child { color: var(--ui-text); }

.bill-state,
.acct-conn__state,
.acct-conn__notice {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.55;
}

.bill-state strong,
.acct-conn__state strong { color: var(--ui-text); font-size: var(--type-body-large); }
.bill-state > span { display: block; margin-top: var(--space-2); }
.bill-state.is-error { border-color: var(--danger); }

.bill-usage-page { gap: var(--space-5); }
.bill-usage-panel { padding: var(--space-6); }
.bill-usage-panel__title { margin-bottom: var(--space-5); color: var(--ui-text); font-weight: 650; }
.bill-meter__labels,
.bill-usage-panel__cap { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--ui-text-muted); }
.bill-meter__labels > span:first-child,
.bill-usage-panel__cap > span:first-child { color: var(--ui-text); }
.bill-meter.is-near-limit .bill-meter__labels > span:first-child { color: var(--amber); }
.bill-meter__track { height: 8px; margin-top: var(--space-3); overflow: hidden; border-radius: var(--radius-pill); background: var(--ink-08); }
.bill-meter__fill { height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--t-base) var(--ease); }
.bill-meter.is-near-limit .bill-meter__fill { background: var(--amber); }
.bill-usage-panel__remaining { margin-top: var(--space-3); color: var(--ui-text-muted); font-size: var(--type-label); }
.bill-usage-panel__note { margin-top: var(--space-2); color: var(--ui-text-muted); font-size: var(--type-meta); line-height: 1.6; }

.acct-conn__heading { margin-bottom: var(--space-6); }
.acct-conn__heading p { max-width: 56ch; margin: var(--space-2) 0 0; }

.acct-conn__lead {
  padding: var(--space-6);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-l);
  background: var(--ui-surface-raised);
}

.acct-conn__lead-row { align-items: center; }
.acct-conn__lead h3 { font-size: var(--type-heading-3); }
.acct-conn__lead p { max-width: 58ch; margin: var(--space-2) 0 0; }
.acct-conn__notice { border-color: var(--amber); color: var(--ui-text); }
.acct-conn__state { text-align: center; }
.acct-conn__state-action { display: flex; justify-content: center; margin-top: var(--space-2); }
.acct-conn__state--row { display: flex; align-items: center; justify-content: space-between; text-align: left; }

.acct-conn__accounts,
.acct-conn__posts { border-top: 1px solid var(--ui-line); }

.acct-conn__account {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--ui-line);
}

.acct-conn__account-copy { display: grid; flex: 1; min-width: 0; gap: var(--space-1); }
.acct-conn__account-copy strong { color: var(--ui-text); font-size: var(--type-label); }
.acct-conn__account-copy span { overflow: hidden; color: var(--ui-text-muted); font-size: var(--type-meta); text-overflow: ellipsis; white-space: nowrap; }
.acct-conn__account.needs-attention .acct-conn__account-copy span { color: var(--amber); }

.acct-conn__post {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--ui-line);
}

.acct-conn__post-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.acct-conn__post-head strong { color: var(--ui-text); font-size: var(--type-label); }
.acct-conn__post-head time { margin-left: auto; color: var(--ui-text-muted); font: 500 var(--type-meta)/1 var(--mono); white-space: nowrap; }
.acct-conn__caption { display: -webkit-box; overflow: hidden; color: var(--ui-text-muted); font-size: var(--type-label); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.acct-conn__error { color: var(--danger); font-size: var(--type-meta); line-height: 1.5; overflow-wrap: anywhere; }
.acct-conn__post-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }

.bill-statement button:focus-visible,
.bill-section button:focus-visible,
.bill-cancel button:focus-visible,
.bill-code-panel button:focus-visible,
.bill-code-panel input:focus-visible,
.acct-conn button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.bill-statement button:disabled,
.bill-section button:disabled,
.bill-cancel button:disabled,
.acct-conn button:disabled { cursor: not-allowed; }

/* Canonical value from UIFoundation.breakpoints.compact. */
/* breakpoint: compact */
@media (max-width: 640px) {
  .bill-stack { gap: var(--space-7); }
  .bill-statement { padding: var(--space-5); }
  .bill-statement__top,
  .bill-statement__footer,
  .bill-section-heading,
  .acct-conn__lead-row,
  .acct-conn__state--row { align-items: stretch; flex-direction: column; }
  .bill-section-heading > p { max-width: none; text-align: left; }
  .bill-facts { grid-template-columns: 1fr; }
  .bill-facts > div { padding: var(--space-4) 0; }
  .bill-facts > div + div { border-top: 1px solid var(--ui-line); border-left: 0; }
  .bill-tier { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-5) var(--space-2); }
  .bill-tier__name { padding-left: 0; }
  .bill-tier__action { justify-items: stretch; padding-right: 0; text-align: left; }
  .bill-tier__action button,
  .bill-statement__footer button,
  .bill-actions button,
  .bill-cancel__entry,
  .acct-conn__lead button,
  .acct-conn__state button { width: 100%; }
  .bill-actions { display: grid; grid-template-columns: 1fr; }
  .bill-usage-panel { padding: var(--space-5); }
  .acct-conn { gap: var(--space-8); }
  .acct-conn__lead { padding: var(--space-5); }
  .acct-conn__account { align-items: flex-start; flex-wrap: wrap; }
  .acct-conn__disconnect { width: 100%; }
  .acct-conn__post-head time { width: 100%; margin-left: 0; }
  .acct-conn__post-actions { justify-content: stretch; }
  .acct-conn__post-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bill-meter__fill { transition: none; }
}

/* ===== distribution-surfaces.css ===== */
/* FDP D2.4 — distribution surfaces.
   The shared foundation owns every color value; this leaf consumes names only. */

.ds-queue,
.ds-connect,
.ds-schedule,
[data-distribution-sheet] {
  box-sizing: border-box;
  color: var(--ui-text);
  font-family: var(--sans);
}

.ds-queue *,
.ds-connect *,
.ds-schedule *,
[data-distribution-sheet] * {
  box-sizing: border-box;
}

.ds-queue button,
.ds-connect button,
.ds-schedule button,
.ds-schedule input,
.ds-schedule textarea,
[data-distribution-sheet] button,
[data-distribution-sheet] input,
[data-distribution-sheet] textarea {
  font: inherit;
}

.ds-queue button:focus-visible,
.ds-connect button:focus-visible,
.ds-connect summary:focus-visible,
.ds-schedule button:focus-visible,
.ds-schedule input:focus-visible,
.ds-schedule textarea:focus-visible,
[data-distribution-sheet] button:focus-visible,
[data-distribution-sheet] input:focus-visible,
[data-distribution-sheet] textarea:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.ds-queue .ds-eyebrow,
.ds-connect .ds-eyebrow,
.ds-schedule .ds-eyebrow {
  display: block;
  margin: 0;
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Connection health is a publishing fact, before either queue or Connect. */
.ds-health {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
  gap: var(--space-5) var(--space-7);
  align-items: center;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.ds-health--blocked,
.ds-health--empty {
  border-top-color: var(--amber);
}

.ds-health__summary {
  display: grid;
  gap: var(--space-1);
}

.ds-health__summary strong {
  color: var(--ui-text);
  font: 650 var(--type-heading-3)/1.15 var(--display);
  letter-spacing: -0.02em;
}

.ds-health__summary p {
  max-width: 48ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.5;
}

.ds-health__accounts {
  display: grid;
  gap: var(--space-2);
}

.ds-health__account {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 54px;
  padding: var(--space-2) 0 var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--line-1);
}

.ds-health__account:last-child {
  border-bottom: 0;
}

.ds-health__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--acc-14);
}

.ds-health__account:not([data-health="healthy"]) .ds-health__dot {
  background: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-14);
}

.ds-health__account[data-health="revoked"] .ds-health__dot {
  background: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-16);
}

.ds-health__identity {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.ds-health__identity strong,
.ds-health__identity span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-health__identity strong {
  color: var(--ui-text);
  font-size: var(--type-body);
}

.ds-health__identity span {
  color: var(--ui-text-muted);
  font: 500 var(--type-meta)/1.3 var(--mono);
  text-transform: capitalize;
}

.ds-health__action,
.ds-keyboard-move button {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-s);
  background: var(--ui-surface);
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 650;
}

.ds-health__action--attention {
  border-color: var(--amber);
  color: var(--ui-text-attention);
}

.ds-health__action--primary {
  justify-self: end;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ui-text-on-accent);
}

.ds-health--empty {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Queue — one masthead decision, then a precise working ledger. */
.ds-queue {
  position: absolute;
  inset: 0;
  height: 100dvh;
  padding:
    calc(var(--bar-h) + var(--space-7))
    max(var(--space-6), env(safe-area-inset-right, 0px))
    calc(var(--nav-h) + var(--space-7))
    max(var(--space-6), env(safe-area-inset-left, 0px));
  overflow-x: clip;
  overflow-y: auto;
  background: var(--ui-surface);
}

.ds-queue > .ds-health,
.ds-queue .v2q-inner,
.ds-keyboard-move {
  width: min(1120px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.ds-queue > .ds-health {
  margin-bottom: var(--space-8);
}

.ds-queue .v2q {
  position: static;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: none;
}

.ds-queue .v2q-inner {
  max-width: none;
  padding: 0;
  animation: none;
}

.ds-queue .v2q-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-6);
  margin: 0 0 var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--ui-line);
}

.v2q-head__copy {
  display: grid;
  gap: var(--space-2);
}

.ds-queue .v2q-title {
  max-width: 780px;
  margin: 0;
  color: var(--ui-text);
  font: 680 clamp(var(--type-heading-1), 4vw, var(--type-display))/0.98 var(--display);
  letter-spacing: -0.045em;
}

.v2q-head__copy > p {
  max-width: 64ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body-large);
  line-height: 1.5;
}

.v2q-head__copy > p strong {
  color: var(--ui-text);
  font-weight: 650;
}

.ds-queue .v2q-primary {
  min-width: 180px;
}

.v2q-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}

.ds-queue .v2q-viewswitch {
  padding: var(--space-1);
  border-radius: var(--radius-m);
  background: var(--surf-2);
}

.ds-queue .v2q-viewswitch__btn {
  min-height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-s);
  color: var(--ui-text-muted);
}

.ds-queue .v2q-viewswitch__btn.is-active {
  background: var(--acc-14);
  color: var(--accent-text);
}

.ds-queue .v2q-head__actions .v2-btn--ghost {
  border-color: var(--ui-line);
  border-radius: var(--radius-s);
  background: none;
  color: var(--ui-text-muted);
}

.ds-queue .v2q-strip {
  display: flex;
  min-height: 48px;
  margin: 0 0 var(--space-5);
  padding: var(--space-2) 0;
  border: 0;
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ds-queue .v2q-strip__stat {
  color: var(--ui-text-muted);
  font: 550 var(--type-meta)/1.3 var(--mono);
}

.ds-queue .v2q-strip__stat b {
  color: var(--ui-text);
}

.v2q-empty {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-7) 0 var(--space-5);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.v2q-empty h2 {
  margin: 0;
  color: var(--ui-text);
  font: 650 var(--type-heading-2)/1.1 var(--display);
  letter-spacing: -0.03em;
}

.v2q-empty p {
  max-width: 58ch;
  margin: 0;
  color: var(--ui-text-muted);
  line-height: 1.55;
}

.ds-queue .v2q-loading {
  display: grid;
  min-height: 280px;
  place-content: center;
  gap: var(--space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
  text-align: center;
}

.ds-queue .v2q-loading strong {
  color: var(--ui-text);
  font: 650 var(--type-heading-3)/1.2 var(--display);
}

.ds-queue .v2q-loading span {
  color: var(--ui-text-muted);
}

.ds-queue .v2q-week,
.ds-queue .v2q-month__grid,
.ds-queue .v2q-list {
  border-radius: var(--radius-m);
  box-shadow: none;
}

.ds-queue .v2q-card {
  border-left-width: 1px;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-xs);
}

.ds-queue .v2q-ghost {
  border-radius: var(--radius-xs);
}

.ds-queue .v2q-nowline {
  box-shadow: 0 0 0 1px var(--acc-22);
}

.ds-keyboard-move {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-1);
  color: var(--ui-text-muted);
}

.ds-keyboard-move summary {
  min-height: 44px;
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 650;
}

.ds-keyboard-move p {
  margin: 0 0 var(--space-3);
  font-size: var(--type-meta);
}

.ds-keyboard-move__targets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Connect — the two jobs separate before either becomes dense. */
.ds-connect {
  position: absolute;
  inset: 0;
  height: 100dvh;
  padding:
    calc(var(--bar-h) + var(--space-7))
    max(var(--space-6), env(safe-area-inset-right, 0px))
    calc(var(--nav-h) + var(--space-8))
    max(var(--space-6), env(safe-area-inset-left, 0px));
  overflow-x: clip;
  overflow-y: auto;
  background: var(--ui-surface);
}

.ds-connect > * {
  width: min(980px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.ds-connect__masthead {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}

.ds-connect__masthead h1 {
  margin: 0;
  color: var(--ui-text);
  font: 680 clamp(var(--type-heading-1), 4vw, var(--type-display))/0.98 var(--display);
  letter-spacing: -0.045em;
}

.ds-connect__masthead p {
  max-width: 62ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body-large);
  line-height: 1.5;
}

.ds-connect__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--ui-line);
}

.ds-connect__tabs button {
  position: relative;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 0;
  background: none;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-weight: 650;
  text-align: left;
}

.ds-connect__tabs button[aria-pressed="true"] {
  color: var(--ui-text);
}

.ds-connect__tabs button[aria-pressed="true"]::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--accent);
  content: "";
}

.ds-connect__region {
  display: grid;
  gap: var(--space-8);
}

.ds-connect .v2-connect {
  position: static;
  padding: 0;
  overflow: visible;
  animation: none;
}

.ds-connect .v2-connect > * {
  width: 100%;
}

.ds-connect .v2-connect-section + .v2-connect-section {
  margin-top: var(--space-9);
}

.ds-connect .v2-connect-social-row,
.ds-connect .v2-connect-key-row {
  border-width: 0 0 1px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.v2-connect-social-empty {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  min-height: 340px;
  align-content: center;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.v2-connect-social-empty__marks {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.v2-connect-social-empty h2,
.v2-connect-developer-head h2 {
  margin: 0;
  color: var(--ui-text);
  font: 650 var(--type-heading-2)/1.08 var(--display);
  letter-spacing: -0.03em;
}

.v2-connect-social-empty p,
.v2-connect-developer-head p {
  max-width: 58ch;
  margin: 0;
  color: var(--ui-text-muted);
  line-height: 1.55;
}

.v2-connect-social-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-1);
}

.v2-connect-social-add__copy {
  display: grid;
  gap: var(--space-1);
}

.v2-connect-social-add__copy span {
  color: var(--ui-text-muted);
  font-size: var(--type-label);
}

.v2-connect-social-add__marks {
  display: flex;
  gap: var(--space-2);
}

.v2-connect-developer-head {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
}

.ds-connect .v2-connect-key-panel,
.ds-connect .v2-connect-tools,
.ds-connect .v2-connect-snippet-card {
  border-radius: var(--radius-m);
  box-shadow: none;
}

.ds-connect .v2-connect-snippet-grid {
  gap: var(--space-4);
}

.ds-connect .v2-connect-tools {
  padding: 0;
  overflow: hidden;
}

.ds-connect .v2-connect-tools summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  padding: 0 var(--space-5);
  cursor: pointer;
  font-weight: 650;
}

.ds-connect .v2-connect-tools > p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-4);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
}

.ds-connect .v2-connect-tools > div {
  padding: 0 var(--space-5) var(--space-5);
}

/* The clip scheduling modal mirrors the same calm hierarchy. */
.ds-schedule {
  width: 100%;
}

.ds-schedule__body {
  display: grid;
  gap: var(--space-6);
}

.ds-schedule__loading,
.ds-schedule__empty {
  display: grid;
  min-height: 260px;
  align-content: center;
  justify-items: start;
  gap: var(--space-2);
}

.ds-schedule__loading strong,
.ds-schedule__empty h2 {
  margin: 0;
  color: var(--ui-text);
  font: 650 var(--type-heading-3)/1.15 var(--display);
}

.ds-schedule__loading span,
.ds-schedule__empty p {
  max-width: 50ch;
  margin: 0;
  color: var(--ui-text-muted);
  line-height: 1.55;
}

.ds-button {
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  cursor: pointer;
  font-weight: 650;
}

.ds-button--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ui-text-on-accent);
}

.ds-button:disabled {
  border-color: var(--line-1);
  background: var(--ink-08);
  color: var(--ui-text-muted);
  cursor: not-allowed;
}

.ds-schedule__held {
  margin: 0;
  padding: var(--space-3) 0;
  border-width: 1px 0;
  border-color: var(--amber);
  border-radius: 0;
  background: none;
}

.ds-schedule__section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ds-schedule__section > legend,
.ds-schedule__label > strong,
.ds-schedule__datetime > span {
  margin-bottom: var(--space-2);
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 700;
}

.ds-schedule__account-list {
  display: grid;
  gap: var(--space-2);
}

.ds-schedule__account {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  cursor: pointer;
}

.ds-schedule__account.is-selected {
  border-color: var(--accent);
  background: var(--acc-08);
}

.ds-schedule__account.is-disabled {
  color: var(--ui-text-muted);
  cursor: not-allowed;
}

.ds-schedule__account input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.ds-schedule__avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-s);
  background: var(--ink-08);
}

.ds-schedule__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-schedule__account-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.ds-schedule__account-copy strong,
.ds-schedule__account-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-schedule__account-copy span,
.ds-schedule__account-state {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.ds-schedule__label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.ds-schedule__label > span {
  color: var(--ui-text-muted);
  font: 500 var(--type-meta)/1.3 var(--mono);
}

.ds-schedule__label > span.is-error {
  color: var(--ui-text-danger);
}

.ds-schedule__caption textarea,
.ds-schedule__datetime input {
  width: 100%;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}

.ds-schedule__caption textarea {
  min-height: 112px;
  padding: var(--space-3);
  resize: vertical;
  line-height: 1.5;
}

.ds-schedule__caption textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.ds-schedule__modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding: var(--space-1);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
}

.ds-schedule__modes button {
  min-height: 40px;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-weight: 650;
}

.ds-schedule__modes button[aria-checked="true"] {
  background: var(--acc-14);
  color: var(--accent-text);
}

.ds-schedule__datetime {
  display: grid;
}

.ds-schedule__datetime input {
  min-height: 46px;
  padding: 0 var(--space-3);
}

.ds-schedule__datetime small,
.ds-schedule__now-note,
.ds-schedule__disabled-reason {
  margin: var(--space-2) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.ds-schedule__datetime small strong {
  color: var(--ui-text);
}

.ds-schedule__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.ds-schedule__disabled-reason {
  margin-top: calc(var(--space-4) * -1);
  color: var(--ui-text-attention);
}

/* Four distribution sheets now share one restrained shell and footer rhythm. */
[data-distribution-sheet] .d16-sheet__header,
[data-distribution-sheet] .u4b-sheet__header,
[data-distribution-sheet] .u4b-screen-head {
  padding: var(--space-6);
  border-bottom: 1px solid var(--ui-line);
}

[data-distribution-sheet] .d16-sheet__eyebrow,
[data-distribution-sheet] .u4b-eyebrow {
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

[data-distribution-sheet] .u4b-sheet,
[data-distribution-sheet].u4b-composer,
[data-distribution-sheet].u4b-autopilot {
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  background: var(--glass-sheet);
}

[data-distribution-sheet] .u4b-post__body,
[data-distribution-sheet] .u4b-distribute__body,
[data-distribution-sheet] .u4b-autopilot__body {
  padding: var(--space-6);
}

[data-distribution-sheet] .u4b-section,
[data-distribution-sheet] .u4b-when,
[data-distribution-sheet] .u4b-cover,
[data-distribution-sheet] .u4b-hashtags,
[data-distribution-sheet] .u4b-dials,
[data-distribution-sheet] .u4b-format-section,
[data-distribution-sheet] .u4b-filmstrip-section,
[data-distribution-sheet] .u4b-composer-publish,
[data-distribution-sheet] .u4b-slots-panel,
[data-distribution-sheet] .u4b-inbox {
  margin-top: 0;
  margin-bottom: var(--space-7);
}

[data-distribution-sheet] .u4b-platform-chip,
[data-distribution-sheet] .u4b-plan-card,
[data-distribution-sheet] .u4b-proposal,
[data-distribution-sheet] .u4b-slide {
  border-radius: var(--radius-s);
  box-shadow: none;
}

[data-distribution-sheet] .u4b-plan-card {
  border-left-width: 1px;
}

[data-distribution-sheet="autopilot"] .u4b-proposal__actions .v2-btn--primary {
  border-color: var(--ui-line);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}

[data-distribution-sheet] .u4b-primary {
  position: sticky;
  z-index: 4;
  bottom: 0;
  width: 100%;
  min-height: 52px;
  box-shadow: 0 calc(var(--space-4) * -1) var(--space-6) var(--glass-sheet);
}

[data-distribution-sheet] .u4b-recall-note {
  color: var(--ui-text-muted);
}

/* Was 760px, an off-scale value the sheet already labelled compact. Snapped to
   the canonical compact value it was named for; the single-column health and
   queue stack now begins at 640px instead of 760px. */
/* breakpoint: compact */
@media (max-width: 640px) {
  .ds-health {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .ds-health--empty {
    grid-template-columns: 1fr;
  }

  .ds-health__action--primary {
    justify-self: start;
  }

  .ds-queue,
  .ds-connect {
    padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
    padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  }

  .ds-queue .v2q-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ds-queue .v2q-primary {
    width: 100%;
  }

  .v2q-toolbar {
    display: grid;
    align-items: stretch;
  }

  .v2q-toolbar > .v2q-viewswitch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    order: 1;
  }

  .v2q-toolbar > .v2q-head__actions {
    order: 2;
  }

  .ds-queue .v2q-strip {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .ds-queue .v2q-strip > * {
    flex: 0 0 auto;
  }

  .v2-connect-social-add {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .v2-connect-social-add > .v2-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  [data-distribution-sheet] .u4b-post__body,
  [data-distribution-sheet] .u4b-distribute__body,
  [data-distribution-sheet] .u4b-autopilot__body {
    padding: var(--space-4);
  }
}

/* Week is seven real day lanes, never seven squeezed columns. Was 520px, an
   off-scale value; snapped to the canonical phone value it was named for. */
/* breakpoint: phone */
@media (max-width: 480px) {
  .ds-queue,
  .ds-connect {
    padding-top: calc(var(--bar-h) + var(--space-5));
    padding-right: max(var(--space-3), env(safe-area-inset-right, 0px));
    padding-bottom: calc(var(--nav-h) + var(--space-5));
    padding-left: max(var(--space-3), env(safe-area-inset-left, 0px));
  }

  .ds-queue > .ds-health {
    margin-bottom: var(--space-6);
  }

  .ds-health__account {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ds-health__account .ds-health__action {
    grid-column: 2;
    justify-self: start;
  }

  .ds-queue .v2q-title,
  .ds-connect__masthead h1 {
    font-size: var(--type-heading-1);
  }

  .ds-queue .v2q-head {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .ds-queue .v2q-head__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .ds-queue .v2q-head__actions .v2-btn {
    width: 100%;
  }

  .ds-queue .v2q-cal {
    overflow-x: auto;
    scroll-padding-left: 52px;
    scroll-snap-type: x proximity;
  }

  .ds-queue .v2q-week {
    width: max-content;
    min-width: 0;
  }

  .ds-queue .v2q-week__head,
  .ds-queue .v2q-week__body {
    grid-template-columns: 52px repeat(7, minmax(250px, 78vw));
  }

  .ds-queue .v2q-week__head {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--ui-surface);
  }

  .ds-queue .v2q-week__dayhead,
  .ds-queue .v2q-week__col {
    scroll-snap-align: start;
  }

  .ds-connect__tabs {
    margin-bottom: var(--space-6);
  }

  .ds-connect__tabs button {
    padding: 0 var(--space-2);
    text-align: center;
  }

  .ds-connect .v2-connect-social-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .ds-connect .v2-connect-social-row > .v2-connect-health,
  .ds-connect .v2-connect-social-row > .v2-btn {
    grid-column: 3;
    justify-self: start;
  }

  .ds-schedule__account {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .ds-schedule__avatar {
    display: none;
  }

  .ds-schedule__actions {
    grid-template-columns: 1fr;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  [data-distribution-sheet] .u4b-sheet,
  [data-distribution-sheet].u4b-composer,
  [data-distribution-sheet].u4b-autopilot {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  [data-distribution-sheet] .u4b-primary {
    bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* FDP D0-05 touch contract, paid on the assembled tree. The 36px and 40px dense
   visuals are this lane's design on a fine pointer and are unchanged. */
@media (pointer: coarse) {
  .ds-queue .v2q-viewswitch__btn,
  .ds-schedule__modes button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-queue, .ds-connect, .ds-schedule, [data-distribution-sheet] { --motion: 0; }
}

@media (forced-colors: active) {
  .ds-health,
  .v2q-empty,
  .ds-schedule__account,
  .ds-schedule__caption textarea,
  .ds-schedule__datetime input,
  [data-distribution-sheet] .u4b-plan-card,
  [data-distribution-sheet] .u4b-proposal {
    border-color: currentColor;
  }
}

/* ===== home-configure.css ===== */
/* FDP D1.4: home + configure. Foundation tokens are defined in styles.css. */

.c13-config-frame,
.hc-flow,
.hc-flow * {
  box-sizing: border-box;
}

.c13-config-frame {
  min-height: 100%;
}

.hc-flow.v2-u3a-choose {
  position: absolute;
  inset: 0;
  display: block;
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: auto;
  padding:
    calc(var(--bar-h) + var(--space-6))
    max(var(--space-6), env(safe-area-inset-right, 0px))
    calc(var(--nav-h) + var(--space-9) + env(safe-area-inset-bottom, 0px))
    max(var(--space-6), env(safe-area-inset-left, 0px));
  background: var(--surf-0);
  color: var(--ui-text);
  font-family: var(--sans);
}

.hc-flow [hidden] {
  display: none !important;
}

.hc-flow button,
.hc-flow input,
.hc-flow textarea {
  font: inherit;
}

.hc-flow button {
  min-height: 44px;
}

.hc-shell {
  width: min(880px, 100%);
  margin: 0 auto;
}

.hc-episode {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--ui-line);
}

.hc-episode__reel {
  height: 58px;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.hc-episode__reel .v2-reel {
  height: 100%;
}

.hc-episode__copy {
  min-width: 0;
}

.hc-episode__copy > span,
.hc-intro > span,
.hc-home-brand__eyebrow {
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hc-episode__copy h2 {
  margin: var(--space-1) 0 0;
  overflow: hidden;
  color: var(--ui-text);
  font: 650 var(--type-heading-3)/1.15 var(--display);
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hc-episode__copy p {
  margin: var(--space-1) 0 0;
  color: var(--ui-text-muted);
  font: 500 var(--type-meta)/1.4 var(--mono);
}

.hc-progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  margin: var(--space-7) 0 var(--space-8);
}

.hc-progress > p {
  margin: 0;
  color: var(--ui-text-muted);
  font: 650 var(--type-meta)/1.2 var(--mono);
  white-space: nowrap;
}

.hc-progress ol {
  display: grid;
  grid-auto-columns: minmax(74px, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-progress li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--ui-line);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  white-space: nowrap;
}

.hc-progress li span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  font: 650 var(--type-meta)/1 var(--mono);
}

.hc-progress li[aria-current="step"] {
  border-color: var(--accent-text);
  color: var(--ui-text);
}

.hc-progress li[aria-current="step"] span,
.hc-progress li[data-complete="true"] span {
  border-color: var(--line-acc);
  color: var(--accent-text);
}

.hc-intro {
  max-width: 700px;
  margin-bottom: var(--space-8);
}

.hc-intro h1 {
  max-width: 18ch;
  margin: var(--space-3) 0 0;
  color: var(--ui-text);
  font: 680 clamp(2.45rem, 7vw, 4.8rem)/0.98 var(--display);
  letter-spacing: -0.05em;
}

.hc-intro p {
  max-width: 58ch;
  margin: var(--space-4) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body-large);
  line-height: 1.6;
}

.hc-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 180px;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-text-muted);
}

.hc-loading span {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  animation: hc-breathe var(--t-cove) var(--ease) infinite alternate;
}

@keyframes hc-breathe {
  from { opacity: 0.3; }
  to { opacity: 1; }
}

.hc-step {
  min-width: 0;
}

.hc-output-list {
  border-top: 1px solid var(--ui-line);
}

.hc-output-list .v2-u3a-format {
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hc-output-list .v2-u3a-format::before,
.hc-output-list .v2-u3a-format::after {
  display: none;
}

.hc-output-list .v2-u3a-format__toggle {
  min-height: 94px;
  padding: var(--space-5) 0;
  background: transparent;
}

.hc-output-list .v2-u3a-format.is-selected .v2-u3a-format__toggle {
  color: var(--ui-text);
}

.hc-output-list .v2-u3a-format__heading strong {
  font-size: var(--type-body-large);
}

.hc-output-list .v2-u3a-format__heading span {
  max-width: 56ch;
  color: var(--ui-text-muted);
}

.hc-output-list .v2-u3a-format.is-locked {
  background: var(--ui-surface);
}

.hc-output-list .v2-u3a-format.is-locked .v2-u3a-format__toggle {
  min-height: 76px;
  color: var(--ui-text-muted);
  cursor: not-allowed;
}

.hc-output-list .v2-u3a-format__locked {
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.hc-detail-list,
.hc-guidance-list,
.hc-context-fields,
.hc-review-meta {
  border-top: 1px solid var(--ui-line);
}

.hc-detail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  align-items: center;
  gap: var(--space-7);
  min-height: 134px;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--ui-line);
}

.hc-detail-row h3,
.hc-guidance-list h3,
.hc-context-group h3 {
  margin: 0;
  color: var(--ui-text);
  font: 650 var(--type-heading-3)/1.15 var(--display);
  letter-spacing: -0.02em;
}

.hc-detail-row p,
.hc-guidance-list p,
.hc-context-group > p,
.hc-brand p,
.hc-cap p {
  margin: var(--space-2) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.55;
}

.hc-detail-row .v2-u3a-count {
  padding: 0;
  border: 0;
  background: transparent;
}

.hc-fixed-value {
  justify-self: end;
  color: var(--ui-text);
  font: 650 var(--type-body-large)/1.2 var(--mono);
}

.hc-switch {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-2);
  min-width: 82px;
  padding: 0 var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 650;
}

.hc-switch span {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--ui-text-muted);
}

.hc-switch[aria-checked="true"] {
  border-color: var(--line-acc);
  color: var(--accent-text);
}

.hc-switch[aria-checked="true"] span {
  background: var(--accent);
}

.hc-guidance-list > section,
.hc-context-group {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-7);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--ui-line);
}

.hc-guidance-list > section > p {
  grid-column: 1;
}

.hc-guidance-list .v2-u3a-request {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.hc-guidance-list .v2-u3a-request > button:first-child {
  min-width: 180px;
}

.hc-field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--ui-line);
}

.hc-context-group > :not(h3):not(p) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.hc-context-group.hc-context-group--stacked {
  display: block;
}

.hc-context-group.hc-context-group--stacked > * + * {
  margin-top: var(--space-5);
}

.hc-people {
  display: grid;
  gap: var(--space-2);
}

.hc-people > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  gap: var(--space-2);
}

.hc-people button,
.hc-text-action,
.hc-back,
.hc-tailor {
  border: 0;
  background: transparent;
  color: var(--accent-text);
  cursor: pointer;
  font-weight: 650;
}

.hc-recording-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.hc-recording-options > button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  min-height: 132px;
  padding: var(--space-5);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--ui-text);
  cursor: pointer;
  text-align: left;
}

.hc-recording-options > button > span {
  grid-row: 1 / span 2;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
}

.hc-recording-options > button strong {
  font-size: var(--type-body-large);
}

.hc-recording-options > button small {
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.5;
}

.hc-recording-options > button.is-selected {
  border-color: var(--line-acc);
  background: var(--acc-08);
}

.hc-recording-options > button.is-selected > span {
  border: 5px solid var(--accent);
}

.hc-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ui-line);
}

.hc-actions__primary {
  display: grid;
  justify-items: end;
  gap: var(--space-2);
}

.hc-continue {
  min-width: 150px;
  padding: 0 var(--space-6);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--radius-m);
  background: var(--btn-primary-bg);
  box-shadow: var(--glow-acc);
  color: var(--ink-on-accent);
  cursor: pointer;
  font-weight: 750;
}

.hc-continue:disabled {
  border-color: var(--ui-line);
  background: var(--ui-surface);
  box-shadow: none;
  color: var(--ui-text-muted);
  cursor: not-allowed;
}

.hc-disabled-reason {
  max-width: 42ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
  text-align: right;
}

.hc-receipt {
  margin-bottom: var(--space-6);
}

.hc-verifier-receipt {
  display: none;
}

.hc-review-meta > p,
.hc-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ui-line);
}

.hc-review-meta > p span {
  color: var(--ui-text-muted);
}

.hc-review-meta .v2-u3a-notify {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--ui-line);
}

.hc-brand > div > strong {
  color: var(--ui-text);
}

.hc-cap {
  margin-top: var(--space-6);
  padding: var(--space-5) 0;
  border-block: 1px solid var(--amber);
  color: var(--ui-text);
}

.hc-flow .count-defaults {
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  border-block: 1px solid var(--ui-line);
  background: transparent;
}

.hc-review-actions {
  display: grid;
  justify-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.hc-tailor {
  justify-self: start;
  min-height: 44px;
  padding: 0;
  color: var(--ui-text-muted);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.hc-review-actions .v2-u3a-order-start {
  width: 100%;
  min-height: 58px;
  font-size: var(--type-body-large);
}

.hc-home-intro {
  margin: var(--space-4) 0 var(--space-6);
}

.hc-home-intro h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--ui-text);
  font: 680 clamp(2.15rem, 7vw, 4.4rem)/0.98 var(--display);
  letter-spacing: -0.05em;
}

.hc-home-intro p,
.hc-home-build-reason {
  max-width: 52ch;
  margin: var(--space-3) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.55;
}

.hc-home-build-reason {
  width: 100%;
  text-align: center;
}

/* Home row 10: the brand snapshot. Quiet by construction, so it cannot compete
   with the one intake focus above it: no accent, no fill beyond the surface the
   connect card already uses, and a ghost Edit rather than a second primary. */
.hc-home-brand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface);
}

.hc-home-brand__copy {
  min-width: 0;
}

/* The eyebrow above shares the sheet's one eyebrow rule, so its size comes from
   there and only the two quiet-card differences live here: it is a block, and it
   is muted rather than accent, because this card must not compete with the
   intake above it. */
.hc-home-brand__eyebrow {
  display: block;
  color: var(--ui-text-muted);
}

.hc-home-brand p {
  margin: var(--space-1) 0 0;
  color: var(--ui-text);
  font-size: var(--type-label);
  line-height: 1.45;
}

/* Content order changes, not merely width. Was an unmarked 720px; snapped to
   the nearer canonical value, so the stacked arrangement now begins at 640px
   instead of 720px. */
/* breakpoint: compact */
@media (max-width: 640px) {
  .hc-flow.v2-u3a-choose {
    padding:
      calc(var(--bar-h) + var(--space-4))
      max(var(--space-4), env(safe-area-inset-right, 0px))
      calc(var(--nav-h) + var(--space-8) + env(safe-area-inset-bottom, 0px))
      max(var(--space-4), env(safe-area-inset-left, 0px));
  }

  .hc-episode {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-3);
    padding-bottom: var(--space-4);
  }

  .hc-episode__reel {
    height: 46px;
  }

  .hc-progress {
    display: block;
    margin: var(--space-5) 0 var(--space-7);
    overflow: hidden;
  }

  .hc-progress ol {
    grid-auto-columns: minmax(64px, 1fr);
    margin-top: var(--space-3);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hc-progress li {
    display: grid;
    justify-items: start;
    gap: var(--space-1);
  }

  .hc-intro {
    margin-bottom: var(--space-6);
  }

  .hc-intro h1 {
    font-size: clamp(2.3rem, 13vw, 3.8rem);
  }

  .hc-intro p {
    font-size: var(--type-body);
  }

  .hc-output-list .v2-u3a-format__toggle {
    min-height: 112px;
    padding: var(--space-4) 0;
  }

  .hc-detail-row,
  .hc-guidance-list > section,
  .hc-context-group {
    display: block;
    min-height: 0;
    padding: var(--space-5) 0;
  }

  .hc-detail-row > :last-child,
  .hc-guidance-list .v2-u3a-request,
  .hc-context-group > :not(h3):not(p) {
    width: 100%;
    margin-top: var(--space-4);
  }

  .hc-detail-row .hc-switch {
    width: auto;
  }

  .hc-field-pair,
  .hc-recording-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .hc-field-pair {
    gap: var(--space-4);
  }

  .hc-recording-options > button {
    min-height: 112px;
  }

  .hc-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom, 0px));
  }

  .hc-actions__primary,
  .hc-continue {
    width: 100%;
  }

  .hc-actions__primary {
    justify-items: stretch;
  }

  .hc-disabled-reason {
    text-align: left;
  }

  .hc-back {
    justify-self: start;
  }

  .hc-review-meta > p,
  .hc-brand {
    align-items: flex-start;
  }

  .hc-home-intro h1 {
    font-size: clamp(2.15rem, 12vw, 3.45rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-loading span {
    animation: none;
  }
}

@media (forced-colors: active) {
  .hc-continue,
  .hc-recording-options > button,
  .hc-switch,
  .hc-output-list .v2-u3a-format {
    border-color: ButtonText;
  }
}

/* ===== history-library.css ===== */
/* FDP D2.1 History and Library.
   The stylesheet is deliberately token-only. The date spine is the one visual
   flourish; everything else stays quiet enough to scan. */

.v2-lib {
  background: var(--ground);
}

.v2-lib__inner {
  width: min(1120px, 100%);
  padding: var(--space-8) var(--space-7) calc(var(--nav-h) + var(--space-8));
}

.v2-lib__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line-1);
}

.v2-lib__eyebrow {
  grid-column: 1;
  margin: 0 0 var(--space-2);
  color: var(--accent-text);
  font: 750 var(--type-meta)/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.v2-lib__header h1 {
  grid-column: 1;
  margin: 0;
  color: var(--ui-text);
  font: 680 clamp(38px, 5vw, 58px)/0.98 var(--display);
  letter-spacing: -0.045em;
}

.v2-lib__intro {
  grid-column: 1;
  max-width: 48ch;
  margin: var(--space-4) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body-large);
  line-height: 1.55;
}

.v2-lib__count {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: end;
  margin: 0 0 var(--space-1);
  color: var(--ui-text-muted);
  font: 600 var(--type-meta)/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.v2-lib-toolbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-8);
}

.v2-lib-search {
  position: relative;
  display: flex;
  min-height: 58px;
  padding: 0 var(--space-5) 0 calc(var(--space-5) + 24px);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--surf-1);
  box-shadow: var(--shadow-xs);
}

.v2-lib-search:focus-within {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px var(--acc-08);
}

.v2-lib-search__mark {
  position: absolute;
  top: 50%;
  left: var(--space-5);
  color: var(--accent-text);
  font: 650 24px/1 var(--display);
  transform: translateY(-52%);
  pointer-events: none;
}

.v2-lib-search input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text);
  font: 580 var(--type-body-large)/1 var(--sans);
}

.v2-lib-search input:focus {
  outline: 0;
}

.v2-lib-refine {
  position: relative;
}

.v2-lib-refine summary {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 var(--space-5);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-1);
  color: var(--ui-text-muted);
  font-size: var(--type-body);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.v2-lib-refine summary::-webkit-details-marker {
  display: none;
}

.v2-lib-refine summary::after {
  content: "+";
  margin-left: var(--space-3);
  color: var(--accent-text);
  font: 500 var(--type-heading-3)/1 var(--display);
}

.v2-lib-refine[open] summary::after {
  content: "−";
}

.v2-lib-refine__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 12;
  display: grid;
  gap: var(--space-4);
  width: min(460px, calc(100vw - 32px));
  padding: var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-md);
  background: var(--glass-sheet);
  box-shadow: var(--floor-lift);
  backdrop-filter: blur(18px);
}

.v2-lib-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.v2-lib-refine__panel > .v2-btn {
  justify-self: start;
}

.v2-lib-list {
  display: grid;
  gap: var(--space-9);
}

.v2-lib-day {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--space-6);
}

.v2-lib-day__header {
  position: sticky;
  top: calc(var(--bar-h) + var(--space-5));
  align-self: start;
  padding-top: var(--space-3);
}

.v2-lib-day__header h2 {
  margin: 0;
  color: var(--ui-text);
  font: 680 var(--type-heading-2)/1.05 var(--display);
  letter-spacing: -0.025em;
}

.v2-lib-day__header span {
  display: block;
  margin-top: var(--space-2);
  color: var(--ui-text-muted);
  font: 550 var(--type-meta)/1.3 var(--mono);
}

.v2-lib-day__rows {
  min-width: 0;
  border-top: 1px solid var(--line-1);
}

.v2-lib-row {
  border: 0;
  border-bottom: 1px solid var(--line-1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.v2-lib-row:hover,
.v2-lib-row:focus-within {
  border-color: var(--line-2);
  background: var(--surf-1);
  box-shadow: none;
  transform: none;
}

.v2-lib-row__main {
  min-height: 88px;
  padding: var(--space-4) var(--space-3);
  gap: var(--space-4);
}

.v2-lib-row__thumb {
  width: 100px;
  height: 50px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surf-2);
  box-shadow: none;
}

.v2-lib-row__story h2 {
  color: var(--ui-text);
  font-size: var(--type-body-large);
  font-weight: 650;
}

.v2-lib-row__meta {
  color: var(--ui-text-muted);
}

.v2-lib-status.v2-chip {
  min-height: 28px;
  border-color: var(--line-2);
  background: transparent;
}

.v2-lib-row__actions {
  gap: var(--space-1);
}

.v2-lib-act {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-color: transparent;
  background: transparent;
}

.v2-lib-act--primary {
  width: auto;
  min-width: 122px;
  padding: 0 var(--space-4);
  border-color: var(--accent-text);
  background: var(--accent);
  color: var(--ink-on-accent);
  gap: var(--space-2);
}

.v2-lib-act--primary svg {
  width: 14px;
}

.v2-lib-act--primary span {
  white-space: nowrap;
  font-size: var(--type-meta);
  font-weight: 750;
}

.v2-lib-act--primary:hover:not(:disabled) {
  border-color: var(--accent-text);
  background: var(--accent);
  color: var(--ink-on-accent);
  filter: brightness(1.04);
}

.v2-lib-row.is-dense .v2-lib-row__main {
  min-height: 66px;
}

.v2-lib-state {
  min-height: 240px;
  border: 0;
  background: transparent;
}

.v2-lib-state[role="alert"] span {
  color: var(--ui-text-muted);
}

.v2-lib-state[role="alert"] {
  flex-direction: column;
}

/* The day spine becomes a heading above the episode rows. 40em was exactly
   640px at the 16px root, so this is a unit normalization, not a move. */
/* breakpoint: compact */
@media (max-width: 640px) {
  .v2-lib__inner {
    padding: var(--space-6) var(--space-4) calc(var(--nav-h) + var(--space-7));
  }

  .v2-lib__header {
    display: block;
    padding-bottom: var(--space-6);
  }

  .v2-lib__header h1 {
    font-size: clamp(36px, 12vw, 48px);
  }

  .v2-lib__count {
    margin-top: var(--space-4);
  }

  .v2-lib-toolbar {
    grid-template-columns: minmax(0, 1fr);
    margin: var(--space-5) 0 var(--space-7);
  }

  .v2-lib-refine summary {
    min-height: 44px;
    justify-content: space-between;
  }

  .v2-lib-refine__panel {
    position: static;
    width: 100%;
    margin-top: var(--space-2);
  }

  .v2-lib-day {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .v2-lib-day__header {
    position: static;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0;
  }

  .v2-lib-day__header h2 {
    font-size: var(--type-heading-2);
  }

  .v2-lib-row__main {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    min-height: 0;
    padding: var(--space-4) 0;
  }

  .v2-lib-row__thumb {
    width: 72px;
    height: 48px;
  }

  .v2-lib-row__story {
    align-self: center;
  }

  .v2-lib-status.v2-chip {
    align-self: start;
  }

  .v2-lib-row__actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    padding-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .v2-lib-row__actions::-webkit-scrollbar {
    display: none;
  }

  .v2-lib-act {
    min-width: 44px;
    height: 44px;
  }

  .v2-lib-act--primary {
    min-width: 132px;
  }

  .v2-lib-cuts__toggle {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-lib-search,
  .v2-lib-refine summary,
  .v2-lib-act {
    transition: none;
  }
}

@media (forced-colors: active) {
  .v2-lib-search,
  .v2-lib-refine summary,
  .v2-lib-refine__panel,
  .v2-lib-day__rows,
  .v2-lib-row,
  .v2-lib-act {
    border-color: CanvasText;
  }
}

/* Gallery feed extraction: begin */
[data-hl-gf-style="s001"] {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

[data-hl-gf-style="s002"] {
  font-size: var(--text-13);
  color: var(--ink-55);
}

[data-hl-gf-style="s003"] {
  font-size: var(--text-13);
  color: var(--ui-text-muted);
  white-space: nowrap;
}

[data-hl-gf-style="s004"] {
  margin-top: 10px;
}

[data-hl-gf-style="s005"] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

[data-hl-gf-style="s006"] {
  font-size: var(--text-13);
  color: var(--ink-55);
}

[data-hl-gf-style="s007"] {
  font-size: var(--text-13);
  color: var(--ui-text-muted);
  white-space: nowrap;
}

[data-hl-gf-style="s008"] {
  width: var(--hl-gf-s008-width);
  background: var(--accent);
}

[data-hl-gf-style="s009"] {
  margin-top: var(--hl-gf-s009-margin-top);
  width: var(--hl-gf-s009-width);
  height: var(--hl-gf-s009-height);
  padding: var(--hl-gf-s009-padding);
  border-radius: var(--hl-gf-s009-border-radius);
  flex: 0 0 auto;
  border: 1px solid var(--ink-12);
  background: transparent;
  color: var(--ink-55);
  font-size: var(--hl-gf-s009-font-size);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  cursor: var(--hl-gf-s009-cursor);
  opacity: var(--hl-gf-s009-opacity);
  transition: all var(--t-base) var(--ease);
}

[data-hl-gf-style="s010"] {
  margin-top: 12px;
  width: 100%;
  height: 34px;
  border-radius: 9px;
  border: 1px solid;
  border-color: var(--hl-gf-s010-border-color);
  background: var(--hl-gf-s010-background);
  color: var(--hl-gf-s010-color);
  font-size: var(--text-13);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: all var(--t-base) var(--ease);
}

[data-hl-gf-style="s011"] {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

[data-hl-gf-style="s012"] {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: 1.5px solid var(--ink-24);
  border-top-color: var(--accent);
  animation: spinSlow var(--t-slow) linear infinite;
  display: inline-block;
  flex: 0 0 auto;
}

[data-hl-gf-style="s013"] {
  font-size: var(--text-13);
  color: var(--ink-55);
  font-weight: 600;
}

[data-hl-gf-style="s014"] {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}

[data-hl-gf-style="s015"] {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  border: 1.5px solid var(--ink-24);
  border-top-color: var(--accent);
  animation: spinSlow var(--t-slow) linear infinite;
  display: inline-block;
  flex: 0 0 auto;
}

[data-hl-gf-style="s016"] {
  font-size: var(--text-13);
  color: var(--ink-55);
  font-weight: 600;
}

[data-hl-gf-style="s017"] {
  flex: var(--hl-gf-s017-flex);
  width: var(--hl-gf-s017-width);
  overflow: hidden;
  visibility: var(--hl-gf-s017-visibility);
  border-right: 1px solid var(--ink-08);
  display: flex;
  flex-direction: column;
}

[data-hl-gf-style="s018"] {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--ink-08);
  flex: 0 0 auto;
}

[data-hl-gf-style="s019"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

[data-hl-gf-style="s020"] {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

[data-hl-gf-style="s021"] {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-72);
  font-weight: 700;
}

[data-hl-gf-style="s022"] {
  font-size: var(--text-13);
  color: var(--ui-text-muted);
}

[data-hl-gf-style="s023"] {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px calc(var(--nav-h) + 8px);
}

[data-hl-gf-style="s024"] {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--ink-08);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

[data-hl-gf-style="s025"] {
  padding: var(--hl-gf-s025-padding);
}

[data-hl-gf-style="s026"] {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

[data-hl-gf-style="s027"] {
  font-size: var(--text-13);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-72);
  font-weight: 700;
}

[data-hl-gf-style="s028"] {
  font-size: var(--text-13);
  color: var(--ui-text-muted);
}

[data-hl-gf-style="s029"] {
  padding: 0 12px 10px;
  min-width: 0;
}

[data-hl-gf-style="s030"] {
  width: var(--hl-gf-s030-width);
  height: 30px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-72);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

[data-hl-gf-style="s031"] {
  position: relative;
  width: 4px;
  height: 66px;
  border-radius: 4px;
  background: var(--ink-16);
  cursor: pointer;
}

[data-hl-gf-style="s032"] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hl-gf-s032-height);
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--acc-40);
}

[data-hl-gf-style="s033"] {
  position: absolute;
  left: 50%;
  bottom: var(--hl-gf-s033-bottom);
  width: 10px;
  height: 10px;
  transform: translate(-50%,50%);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--acc-60);
}

[data-hl-gf-style="s034"] {
  width: 100%;
  aspect-ratio: var(--hl-gf-s034-aspect-ratio);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--ink-08);
  box-shadow: var(--floor);
  background: var(--surf-0);
  display: grid;
  place-items: center;
  color: var(--ui-text-danger);
  font-size: 13px;
  letter-spacing: 0.04em;
}

[data-hl-gf-style="s035"] {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hl-gf-s035-aspect-ratio);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--ink-08);
  box-shadow: var(--floor);
  background: var(--ground);
  margin-left: var(--hl-gf-s035-margin-left);
  margin-right: var(--hl-gf-s035-margin-right);
}

[data-hl-gf-style="s036"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--hl-gf-s036-object-fit);
  background: var(--surf-0);
  cursor: pointer;
}

[data-hl-gf-style="s037"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  pointer-events: none;
  border: 2.5px solid var(--ink-24);
  border-top-color: var(--accent);
  animation: spinSlow var(--t-slow) linear infinite;
}

[data-hl-gf-style="s038"] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 33%;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: var(--hl-gf-s038-background);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}

[data-hl-gf-style="s039"] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--glass-sheet);
  padding: 24px;
  text-align: center;
}

[data-hl-gf-style="s040"] {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

[data-hl-gf-style="s041"] {
  font-size: var(--text-13);
  color: var(--ink-55);
  margin-bottom: 16px;
  max-width: 280px;
  line-height: 1.5;
}

[data-hl-gf-style="s042"] {
  height: var(--hl-gf-s042-height);
  padding: 0 18px;
  border-radius: 9px;
  border: 1px solid var(--ink-16);
  background: var(--ink-04);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
}

[data-hl-gf-style="s043"] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: var(--hl-gf-s043-transform);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-16);
  background: var(--glass-bar);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  opacity: var(--hl-gf-s043-opacity);
  pointer-events: var(--hl-gf-s043-pointer-events);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

[data-hl-gf-style="s044"] {
  margin-left: 3px;
}

[data-hl-gf-style="s045"] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 24px;
  background: linear-gradient(180deg, transparent, var(--glass-sheet));
  opacity: var(--hl-gf-s045-opacity);
  transform: var(--hl-gf-s045-transform);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  pointer-events: var(--hl-gf-s045-pointer-events);
}

[data-hl-gf-style="s046"] {
  position: relative;
  height: var(--hl-gf-s046-height);
  margin: 0 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

[data-hl-gf-style="s047"] {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--ink-16);
}

[data-hl-gf-style="s048"] {
  position: absolute;
  left: 0;
  width: var(--hl-gf-s048-width);
  height: 3px;
  border-radius: 3px;
  background: var(--ink-38);
}

[data-hl-gf-style="s049"] {
  position: absolute;
  left: 0;
  width: var(--hl-gf-s049-width);
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--acc-60);
}

[data-hl-gf-style="s050"] {
  position: absolute;
  left: var(--hl-gf-s050-left);
  width: var(--hl-gf-s050-width);
  height: var(--hl-gf-s050-height);
  margin-left: var(--hl-gf-s050-margin-left);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--acc-60);
  opacity: var(--hl-gf-s050-opacity);
  transition: opacity var(--t-fast) var(--ease);
}

[data-hl-gf-style="s051"] {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 1px 8px 8px;
}

/* Extracted s052: the second transport button's play glyph. The style marker
   remains in JSX only to preserve its pre-extraction control identity. */
[data-hl-gf-style="s051"] > button:nth-of-type(2) > span {
  margin-left: 2px;
}

[data-hl-gf-style="s053"] {
  font-size: var(--text-13);
  color: var(--ink-72);
  margin: 0 10px;
  white-space: nowrap;
}

/* Extracted s054: elapsed/total duration suffix. */
[data-hl-gf-style="s053"] > span {
  color: var(--ui-text-muted);
}

/* Extracted s055: flexible spacer in the compact transport row. */
[data-hl-gf-style="s051"] > span:nth-of-type(2) {
  flex: 1;
}

[data-hl-gf-style="s056"] {
  position: relative;
}

[data-hl-gf-style="s057"] {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 0;
  width: 30px;
  border-radius: 10px;
  border: 1px solid var(--ink-12);
  background: var(--glass-sheet);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  opacity: var(--hl-gf-s057-opacity);
  transform: var(--hl-gf-s057-transform);
  pointer-events: var(--hl-gf-s057-pointer-events);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

[data-hl-gf-style="s058"] {
  position: relative;
}

[data-hl-gf-style="s059"] {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--ink-12);
  background: var(--glass-sheet);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: var(--hl-gf-s059-opacity);
  transform: var(--hl-gf-s059-transform);
  pointer-events: var(--hl-gf-s059-pointer-events);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

[data-hl-gf-style="s060"] {
  height: 28px;
  min-width: 56px;
  padding: 0 10px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  background: var(--hl-gf-s060-background);
  color: var(--hl-gf-s060-color);
  font-size: var(--text-13);
  font-weight: 600;
  font-family: var(--mono);
  text-align: center;
}

[data-hl-gf-style="s061"] {
  font-size: var(--text-13);
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: -0.02em;
}

[data-hl-gf-style="s062"] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 14px;
  padding-left: 2px;
}

[data-hl-gf-style="s063"] {
  flex: 0 0 16px;
  height: 1px;
  background: var(--acc-40);
}

[data-hl-gf-style="s064"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-13);
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  cursor: help;
}

[data-hl-gf-style="s065"] {
  flex: 1;
  height: 1px;
  background: var(--acc-16);
}

[data-hl-gf-style="s066"] {
  margin-top: 14px;
  font-size: var(--text-13);
  color: var(--ui-text-muted);
  white-space: nowrap;
  letter-spacing: 0.04em;
  cursor: help;
}

[data-hl-gf-style="s067"] {
  position: relative;
  padding: var(--hl-gf-s067-padding);
  border-radius: var(--hl-gf-s067-border-radius);
  border: 1.5px solid var(--line-1);
  border-left: var(--hl-gf-s067-border-left);
  background: var(--hl-gf-s067-background);
}

[data-hl-gf-style="s068"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: var(--hl-gf-s068-margin-bottom);
}

[data-hl-gf-style="s069"] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

[data-hl-gf-style="s070"] {
  font-size: var(--text-13);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hl-gf-s070-color);
}

[data-hl-gf-style="s071"] {
  font-size: var(--text-13);
  color: var(--ui-text-muted);
  letter-spacing: 0.02em;
}

[data-hl-gf-style="s072"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  flex: 0 0 auto;
  border: 1.5px solid;
  border-color: var(--hl-gf-s072-border-color);
  background: var(--hl-gf-s072-background);
}

[data-hl-gf-style="s073"] {
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: var(--hl-gf-s073-background);
  box-shadow: var(--hl-gf-s073-box-shadow);
}

[data-hl-gf-style="s074"] {
  font-size: var(--text-13);
  color: var(--hl-gf-s074-color);
  white-space: nowrap;
}

[data-hl-gf-style="s075"] {
  margin: 0;
  font-size: var(--hl-gf-s075-font-size);
  line-height: var(--hl-gf-s075-line-height);
  letter-spacing: -0.015em;
  color: var(--ink-88);
  text-wrap: pretty;
  unicode-bidi: plaintext;
  text-align: start;
}

[data-hl-gf-style="s076"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  cursor: pointer;
  text-align: left;
  border: 1px solid var(--ink-08);
  background: var(--ink-02);
  color: var(--ink-72);
  transition: background var(--t-fast) var(--ease);
}

[data-hl-gf-style="s077"] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

[data-hl-gf-style="s078"] {
  font-size: var(--text-13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-72);
}

[data-hl-gf-style="s079"] {
  font-size: var(--text-13);
  color: var(--ui-text-muted);
}

[data-hl-gf-style="s080"] {
  display: inline-flex;
  color: var(--ink-55);
  transform: var(--hl-gf-s080-transform);
  transition: transform var(--t-base) var(--ease);
}

[data-hl-gf-style="s081"] {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-hl-gf-style="s082"] {
  flex: 1;
  height: 50px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  background: var(--accent);
  color: var(--ink-on-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: var(--hl-gf-s082-cursor);
  opacity: var(--hl-gf-s082-opacity);
  box-shadow: 0 0 0 1px var(--acc-40), 0 12px 36px -16px var(--acc-60);
  transition: transform var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}

[data-hl-gf-style="s083"] {
  border-radius: 12px;
  border: 1px solid var(--ink-08);
  background: var(--ink-02);
  padding: 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-hl-gf-style="s084"] {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-hl-gf-style="s085"] {
  flex: 1;
  height: 1px;
  background: var(--ink-06);
}

[data-hl-gf-style="s086"] {
  border-radius: 10px;
  border: 1px solid var(--ink-12);
  background: var(--ink-02);
  color: var(--ink-55);
  font-size: var(--text-13);
  padding: 10px 12px;
}

[data-hl-gf-style="s087"] {
  display: flex;
  align-items: center;
  gap: 9px;
}

[data-hl-gf-style="s088"] {
  width: 11px;
  height: 11px;
  border-radius: 11px;
  border: 1.5px solid var(--ink-24);
  border-top-color: var(--accent);
  animation: spinSlow var(--t-slow) linear infinite;
  display: inline-block;
  flex: 0 0 auto;
}

[data-hl-gf-style="s089"] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-hl-gf-style="s090"] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-hl-gf-style="s091"] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-hl-gf-style="s092"] {
  font-size: var(--text-13);
  color: var(--ui-text-muted);
  line-height: 1.4;
}

[data-hl-gf-style="s093"] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-hl-gf-style="s094"] {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: var(--hl-gf-s094-min-height);
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--ink-12);
  background: var(--ink-02);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
  font-family: inherit;
}

[data-hl-gf-style="s095"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

[data-hl-gf-style="s096"] {
  font-size: var(--text-13);
  color: var(--ui-text-muted);
}

[data-hl-gf-style="s097"] {
  font-size: var(--text-13);
  color: var(--hl-gf-s097-color);
}

[data-hl-gf-style="s098"] {
  max-height: var(--hl-gf-s098-max-height);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overscroll-behavior: contain;
  border: 1px solid var(--ink-08);
  border-radius: 9px;
  padding: 4px;
}

[data-hl-gf-style="s099"] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  min-height: var(--hl-gf-s099-min-height);
  padding: var(--hl-gf-s099-padding);
  border-radius: 8px;
  border: 1px solid;
  border-color: var(--hl-gf-s099-border-color);
  background: var(--hl-gf-s099-background);
  cursor: pointer;
}

[data-hl-gf-style="s100"] {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: var(--hl-gf-s100-background);
  border: var(--hl-gf-s100-border);
}

[data-hl-gf-style="s101"] {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--hl-gf-s101-color);
}

[data-hl-gf-style="s102"] {
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--ink-12);
  background: var(--ink-04);
  color: var(--hl-gf-s102-color);
  font-size: var(--text-13);
  line-height: 1.45;
}

[data-hl-gf-style="s103"] {
  height: var(--hl-gf-s103-height);
  border-radius: 11px;
  border: 1px solid var(--acc-40);
  background: var(--hl-gf-s103-background);
  color: var(--hl-gf-s103-color);
  font-size: 13.5px;
  font-weight: 700;
  cursor: var(--hl-gf-s103-cursor);
  font-family: inherit;
}

[data-hl-gf-style="s104"] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--acc-22);
  background: var(--acc-08);
}

[data-hl-gf-style="s105"] {
  font-size: var(--text-13);
  line-height: 1.5;
  color: var(--ink);
}

[data-hl-gf-style="s106"] {
  font-size: var(--text-13);
  color: var(--ink-55);
  line-height: 1.45;
}

[data-hl-gf-style="s107"] {
  display: flex;
  gap: 8px;
}

[data-hl-gf-style="s108"] {
  flex: 1;
  height: var(--hl-gf-s108-height);
  border-radius: 10px;
  border: none;
  background: var(--hl-gf-s108-background);
  color: var(--ink-on-accent);
  font-size: 13.5px;
  font-weight: 700;
  cursor: var(--hl-gf-s108-cursor);
  opacity: var(--hl-gf-s108-opacity);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

[data-hl-gf-style="s109"] {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  border: 1.5px solid color-mix(in srgb, var(--ink-on-accent) 40%, transparent);
  border-top-color: var(--ink-on-accent);
  animation: spinSlow var(--t-slow) linear infinite;
  display: inline-block;
}

[data-hl-gf-style="s110"] {
  flex: 0 0 auto;
  height: var(--hl-gf-s110-height);
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--ink-16);
  background: var(--ink-02);
  color: var(--ink-72);
  font-size: 13px;
  font-weight: 600;
  cursor: var(--hl-gf-s110-cursor);
  font-family: inherit;
}

[data-hl-gf-style="s111"] {
  display: flex;
  gap: 10px;
}

[data-hl-gf-style="s112"] {
  flex: 0 0 auto;
  height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ink-16);
  background: var(--ink-02);
  color: var(--ink-72);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

[data-hl-gf-style="s113"] {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

[data-hl-gf-style="s114"] {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--hl-gf-s114-padding);
}

[data-hl-gf-style="s115"] {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

[data-hl-gf-style="s116"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--ink-12);
  background: var(--ink-02);
  color: var(--ink-72);
  font-size: var(--text-13);
  font-weight: 500;
}

[data-hl-gf-style="s117"] {
  transform: rotate(180deg);
  display: inline-flex;
}

[data-hl-gf-style="s118"] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
}

[data-hl-gf-style="s119"] {
  font-size: var(--text-13);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}

[data-hl-gf-style="s120"] {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  border: 1px solid var(--ink-08);
  background: var(--ink-02);
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

[data-hl-gf-style="s121"] {
  height: 26px;
  padding: 0 12px;
  border-radius: 7px;
  border: none;
  background: var(--hl-gf-s121-background);
  color: var(--hl-gf-s121-color);
  font-size: var(--text-13);
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-base) var(--ease);
}

[data-hl-gf-style="s122"] {
  display: grid;
  grid-template-columns: var(--hl-gf-s122-grid-template-columns);
  gap: var(--hl-gf-s122-gap);
  align-items: start;
}

[data-hl-gf-style="s123"] {
  position: var(--hl-gf-s123-position);
  top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

[data-hl-gf-style="s124"] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--acc-22);
  background: var(--acc-08);
  color: var(--accent);
  font-size: var(--text-13);
  font-weight: 600;
}

[data-hl-gf-style="s125"] {
  border-radius: 10px;
  border: 1px solid var(--ink-12);
  background: var(--ink-02);
  color: var(--ink-55);
  font-size: var(--text-13);
  padding: 8px 12px;
}

[data-hl-gf-style="s126"] {
  display: flex;
  align-items: center;
  gap: 9px;
}

[data-hl-gf-style="s127"] {
  width: 11px;
  height: 11px;
  border-radius: 11px;
  border: 1.5px solid var(--ink-24);
  border-top-color: var(--accent);
  animation: spinSlow var(--t-slow) linear infinite;
  display: inline-block;
  flex: 0 0 auto;
}

[data-hl-gf-style="s128"] {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  border: 1px solid var(--ink-08);
  background: var(--ink-02);
  align-self: flex-start;
}

[data-hl-gf-style="s129"] {
  height: 26px;
  padding: 0 12px;
  border-radius: 7px;
  border: none;
  background: var(--hl-gf-s129-background);
  color: var(--hl-gf-s129-color);
  font-size: var(--text-13);
  font-weight: 600;
  white-space: nowrap;
}

[data-hl-gf-style="s130"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--ink-55);
  font-size: var(--text-13);
  letter-spacing: 0.04em;
}

[data-hl-gf-style="s131"] {
  white-space: nowrap;
}

[data-hl-gf-style="s132"] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

[data-hl-gf-style="s133"] {
  font-size: var(--text-13);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

[data-hl-gf-style="s134"] {
  display: inline-flex;
  cursor: help;
}

[data-hl-gf-style="s135"] {
  display: inline-flex;
  cursor: help;
}

[data-hl-gf-style="s136"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-13);
  letter-spacing: 0.06em;
  color: var(--ink-55);
  font-weight: 600;
}

[data-hl-gf-style="s137"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-13);
  letter-spacing: 0.06em;
  /* FDP D0 (PR 1601) retuned this UNAVAILABLE badge from --amber to --danger on
     main while this branch was moving the declaration out of gallery-feed.jsx.
     The landed tone wins; only its home changed. The PR number is written
     without a leading hash because this file's own harnesses forbid anything
     that reads as a raw authored colour. */
  color: var(--danger);
  font-weight: 600;
}

[data-hl-gf-style="s138"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-13);
  letter-spacing: 0.06em;
  color: var(--accent);
  font-weight: 600;
}

[data-hl-gf-style="s139"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-13);
  letter-spacing: 0.06em;
  color: var(--ink-55);
  font-weight: 600;
}

[data-hl-gf-style="s140"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-13);
  letter-spacing: 0.06em;
  color: var(--amber);
  font-weight: 600;
}

[data-hl-gf-style="s141"] {
  margin: 0 0 16px;
  font-size: var(--hl-gf-s141-font-size);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
  outline: none;
  text-align: start;
}

[data-hl-gf-style="s142"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--ink-08);
}

[data-hl-gf-style="s143"] {
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-hl-gf-style="s144"] {
  font-size: 14px;
  color: var(--ink);
}

[data-hl-gf-style="s145"] {
  display: inline-flex;
  color: var(--ui-text-muted);
}

[data-hl-gf-style="s146"] {
  font-size: 14px;
  color: var(--ink-55);
}

[data-hl-gf-style="s147"] {
  font-size: 14px;
  color: var(--ink-55);
}

[data-hl-gf-style="s148"] {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-55);
  line-height: 1.5;
}

[data-hl-gf-style="s149"] {
  position: relative;
  width: 100%;
  aspect-ratio: var(--hl-gf-s149-aspect-ratio);
  border-radius: var(--radius);
  overflow: hidden;
}

[data-hl-gf-style="s150"] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--ink-08);
  background: radial-gradient(circle at 50% 42%, var(--ink-12), transparent 38%), linear-gradient(145deg, var(--surf-2), var(--surf-0) 72%);
  box-shadow: inset 0 0 0 1px var(--ink-02);
  color: var(--ui-text-muted);
}

[data-hl-gf-style="s151"] {
  display: grid;
  place-items: center;
  gap: 8px;
}

[data-hl-gf-style="s152"] {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--ink-16);
  background: color-mix(in srgb, var(--ground) 72%, transparent);
}

[data-hl-gf-style="s153"] {
  max-width: 220px;
  padding: 0 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-13);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-hl-gf-style="s154"] {
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--ink-08);
  background: var(--ink-02);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-hl-gf-style="s155"] {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

[data-hl-gf-style="s156"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: var(--ground);
  border: 1px solid var(--ink-08);
  display: grid;
  place-items: center;
  color: var(--ink-55);
  font-size: 13px;
}

[data-hl-gf-style="s157"] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

[data-hl-gf-style="s158"] {
  flex: 1;
  min-width: 0;
}

[data-hl-gf-style="s159"] {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

[data-hl-gf-style="s160"] {
  font-size: var(--text-13);
  color: var(--ui-text-muted);
}

[data-hl-gf-style="s161"] {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

[data-hl-gf-style="s162"] {
  margin-top: 6px;
  font-size: var(--text-13);
  color: var(--ui-text-muted);
}

[data-hl-gf-style="s163"] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--ink-16);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-13);
  font-weight: 600;
}

[data-hl-gf-style="s164"] {
  padding-top: 11px;
  border-top: 1px solid var(--ink-06);
}

[data-hl-gf-style="s165"] {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  color: var(--ink-72);
  line-height: 1.5;
}

[data-hl-gf-style="s166"] {
  margin-top: 10px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--ink-12);
  background: var(--hl-gf-s166-background);
  color: var(--hl-gf-s166-color);
  font-family: var(--sans);
  font-size: var(--text-13);
  font-weight: 600;
  cursor: pointer;
}

[data-hl-gf-style="s167"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 18px;
  align-items: start;
}

[data-hl-gf-style="s168"] {
  position: absolute;
  inset: 0;
  padding-top: var(--bar-h);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[data-hl-gf-style="s169"] {
  flex: 1 1 auto;
  max-height: none;
  overflow-y: auto;
  min-height: 0;
  padding: 20px clamp(16px, 4vw, 32px) 0;
}

[data-hl-gf-style="s170"] {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

[data-hl-gf-style="s171"] {
  scroll-margin-top: calc(var(--bar-h) + 58px);
}

[data-hl-gf-style="s172"] {
  scroll-margin-top: calc(var(--bar-h) + 58px);
}

[data-hl-gf-style="s173"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

[data-hl-gf-style="s174"] {
  flex: 0 0 auto;
  padding: 12px clamp(16px, 4vw, 32px) 0;
}

[data-hl-gf-style="s175"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: var(--hl-gf-s175-flex-direction);
}

[data-hl-gf-style="s176"] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--bar-h) + 24px) 24px 24px;
}

[data-hl-gf-style="s177"] {
  display: inline-flex;
  margin-bottom: 14px;
}

[data-hl-gf-style="s178"] {
  width: 26px;
  height: 26px;
  border-radius: 26px;
  border: 2.5px solid var(--ink-16);
  border-top-color: var(--accent);
  animation: spinSlow var(--t-slow) linear infinite;
  display: inline-block;
}

[data-hl-gf-style="s179"] {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

[data-hl-gf-style="s180"] {
  font-size: 14px;
  color: var(--ink-55);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

[data-hl-gf-style="s181"] {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--bar-h) + 24px) 24px 24px;
}

[data-hl-gf-style="s182"] {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

[data-hl-gf-style="s183"] {
  font-size: 14px;
  color: var(--ink-55);
  margin-bottom: 20px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

[data-hl-gf-style="s184"] {
  height: 42px;
  padding: 0 22px;
  border-radius: 11px;
  border: 1px solid var(--ink-16);
  background: var(--ink-02);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--sans);
  margin-right: 10px;
}

[data-hl-gf-style="s185"] {
  height: 42px;
  padding: 0 22px;
  border-radius: 11px;
  border: 1px solid var(--ink-16);
  background: var(--ink-02);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: var(--sans);
}

[data-hl-gf-style="s186"] {
  flex-direction: var(--hl-gf-s186-flex-direction);
}

[data-hl-gf-style="s187"] {
  position: absolute;
  inset: 0;
  padding-top: var(--bar-h);
  display: flex;
  flex-direction: var(--hl-gf-s187-flex-direction);
  min-height: 0;
}

[data-hl-gf-style="s188"] {
  position: absolute;
  inset: 0;
  padding-top: var(--bar-h);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[data-hl-gf-style="s189"] {
  flex: 0 0 auto;
  max-height: 46%;
  overflow-y: auto;
  padding: 20px clamp(16px, 4vw, 32px) 0;
}

[data-hl-gf-style="s190"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: var(--hl-gf-s190-flex-direction);
}

/* ===== results-delivery.css ===== */
/* FDP D1.3: the delivery moment.
   This leaf owns presentation only. Every colour resolves through a foundation
   token in styles.css so the parallel palette pass can retune underneath it. */

.request-receipt {
  display: grid;
  gap: var(--space-4);
  margin: 0 clamp(var(--space-4), 4vw, var(--space-8)) var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surf-2), var(--surf-1));
  color: var(--ui-text);
}

.request-receipt > .ui-container__body {
  display: contents;
}

.request-receipt__head,
.request-receipt__field-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.request-receipt__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--accent-text);
  font: 700 var(--type-meta)/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.request-receipt h2,
.request-receipt h3,
.request-receipt p {
  margin-top: 0;
}

.request-receipt h2 {
  margin-bottom: 0;
  font: 650 var(--text-xl)/1.2 var(--display);
  letter-spacing: -.02em;
}

.request-receipt__summary {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent-text);
  font: 700 var(--type-meta)/1 var(--mono);
  letter-spacing: .1em;
}

.request-receipt__summary.is-partial {
  border-color: var(--ui-text-attention);
  color: var(--ui-text-attention);
}

.request-receipt__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
}

.request-receipt__field {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-1);
}

.request-receipt__field.is-unhonoured {
  border-color: color-mix(in srgb, var(--ui-text-attention) 42%, var(--line-1));
}

.request-receipt__field h3 {
  margin-bottom: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  font-weight: 650;
}

.request-receipt__field-head span {
  color: var(--accent-text);
  font: 700 var(--type-meta)/1.2 var(--mono);
  text-transform: uppercase;
}

.request-receipt__field.is-unhonoured .request-receipt__field-head span {
  color: var(--ui-text-attention);
}

.request-receipt__value {
  margin: var(--space-3) 0 0;
  color: var(--ui-text);
  font-size: var(--type-body);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.request-receipt__reason,
.request-receipt__error {
  margin: var(--space-2) 0 0;
  color: var(--ui-text-attention);
  font-size: var(--type-label);
  line-height: 1.45;
}

.request-receipt.is-error {
  border-color: var(--ui-text-attention);
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .request-receipt {
    margin-inline: var(--space-3);
    padding: var(--space-4);
  }

  .request-receipt__fields {
    grid-template-columns: 1fr;
  }
}

.r3-delivery {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: clamp(var(--space-5), 4vw, var(--space-9)) max(var(--space-4), env(safe-area-inset-right)) calc(var(--nav-h) + var(--space-7)) max(var(--space-4), env(safe-area-inset-left));
  color: var(--ui-text);
  font-family: var(--sans);
}

.r3-hero {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--line-2);
}

.r3-hero__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ui-text-muted);
  font: 700 var(--type-meta)/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.r3-hero__status > :first-child,
.r3-hero__status [data-results-status="rendered"] {
  color: var(--accent-text);
}

.r3-hero__status [data-results-status="partial"] {
  color: var(--ui-text-attention);
}

.r3-hero__status [data-results-status="rendering"] {
  color: var(--ui-text-edit);
}

.r3-hero__title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-7);
}

.r3-hero__title h1 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(var(--text-4xl), 6vw, 72px);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.r3-hero__title p {
  margin: var(--space-3) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body);
  line-height: 1.5;
}

.r3-hero__utilities {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.r3-hero__utilities > button,
.r3-hero__utilities a {
  min-height: var(--density-control);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--surf-1);
  color: var(--ui-text-muted);
  font: 650 var(--type-label)/1 var(--sans);
}

.r3-hero__utilities > button:hover,
.r3-hero__utilities a:hover {
  border-color: var(--line-3);
  color: var(--ui-text);
}

.r3-partial-note {
  color: var(--ui-text-attention);
  font-size: var(--type-label);
}

.r3-keep,
.r3-delivery-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  color: var(--ui-text-muted);
}

.r3-keep__mark,
.r3-delivery-step > span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  color: var(--ui-text);
  font-weight: 800;
}

.r3-keep strong,
.r3-delivery-step strong {
  display: block;
  color: var(--ui-text);
  font-size: var(--type-label);
}

.r3-keep small,
.r3-delivery-step small {
  display: block;
  margin-top: 2px;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.r3-progress {
  width: fit-content;
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid var(--edit);
  color: var(--ui-text-edit);
  font-size: var(--type-label);
  line-height: 1.45;
}

.r3-receipt-slot {
  margin-bottom: var(--space-7);
}

.r3-receipt {
  display: grid;
  grid-template-columns: minmax(120px, .5fr) minmax(220px, 1fr) minmax(0, 2fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}

.r3-eyebrow {
  color: var(--accent-text);
  font: 700 var(--type-meta)/1.2 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.r3-receipt__cost {
  display: flex;
  gap: var(--space-3);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
}

.r3-receipt__cost strong {
  color: var(--ui-text);
}

.r3-receipt__verdicts {
  display: grid;
  gap: var(--space-2);
}

.r3-receipt__verdict {
  color: var(--ui-text-muted);
  font-size: var(--type-label);
}

.r3-receipt__verdict[data-ct1-badge="fail"] {
  color: var(--ui-text-attention);
}

.r3-formats {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--line-1);
  scrollbar-width: none;
}

.r3-formats::-webkit-scrollbar {
  display: none;
}

.r3-formats button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--density-control);
  margin-bottom: -1px;
  padding: 0 0 var(--space-2);
  border: 0;
  border-bottom: 2px solid var(--surf-1);
  background: var(--surf-1);
  color: var(--ui-text-muted);
  font: 650 var(--type-label)/1 var(--sans);
  cursor: pointer;
}

.r3-formats button b {
  color: var(--ui-text-muted);
  font: 600 var(--type-meta)/1 var(--mono);
}

.r3-formats button[aria-current="page"] {
  border-bottom-color: var(--accent);
  color: var(--ui-text);
}

.r3-screen {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: start;
  min-height: 70vh;
}

.r3-screen__rail {
  position: sticky;
  top: calc(var(--bar-h) + var(--space-4));
  max-height: calc(100vh - var(--bar-h) - var(--space-8));
  padding-right: var(--space-5);
  overflow: auto;
  border-right: 1px solid var(--line-1);
}

.r3-screen__detail {
  min-width: 0;
}

.r3-screen__detail > .scroll {
  overflow: visible;
}

.r3-rail {
  display: grid;
}

.r3-rail__clip {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--density-row);
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--line-1);
  background: var(--surf-1);
  color: var(--ui-text);
  text-align: left;
  cursor: pointer;
}

.r3-rail__clip:hover {
  background: var(--surf-2);
}

.r3-rail__clip[aria-current="true"] {
  background: var(--surf-2);
}

.r3-rail__rank {
  color: var(--ui-text-muted);
  font: 700 var(--type-numeral)/1 var(--mono);
}

.r3-rail__clip[aria-current="true"] .r3-rail__rank {
  color: var(--accent-text);
}

.r3-rail__copy {
  min-width: 0;
}

.r3-rail__copy strong {
  display: block;
  overflow: hidden;
  color: var(--ui-text);
  font-size: var(--type-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.r3-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 650;
}

.r3-state__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ui-text-muted);
}

.r3-state--edit,
.r3-state--teal {
  color: var(--ui-text-edit);
}

/* r3EditorTruth tone -> text role. FDP D0 (PR 1601) made "Edit failed" a danger
   and "Unsaved changes" an amber, and moved the done role off --ui-text onto
   --ui-text-done, while this branch was moving the mapping out of
   results-generation-v3.jsx into these classes. The landed tones win; only
   their home changed. --attention is kept as the alias for any older caller. */
.r3-state--amber,
.r3-state--attention {
  color: var(--ui-text-attention);
}

.r3-state--danger {
  color: var(--ui-text-danger);
}

.r3-state--done {
  color: var(--ui-text-done);
}

.r3-state--neutral {
  color: var(--ui-text-muted);
}

.r3-clip {
  display: grid;
  gap: var(--space-5);
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-5), 4vw, var(--space-8));
}

.r3-clip__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
}

.r3-clip__header h2 {
  max-width: 18ch;
  margin: var(--space-2) 0 0;
  font-family: var(--display);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-5xl));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.r3-player {
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  min-height: 360px;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: var(--r3-aspect, 9 / 16);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-l);
  background: var(--ground);
  box-shadow: var(--shadow-sm);
}

.r3-player > * {
  width: 100%;
  height: 100%;
}

.r3-player__placeholder {
  display: grid;
  place-items: center;
  color: var(--ui-text-muted);
}

.r3-delivery-step {
  margin: 0 auto;
}

.r3-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: min(100%, 460px);
  margin: 0 auto;
}

.r3-button,
.r3-actions--external > button,
.r3-detail-actions > button {
  min-height: var(--density-control);
  padding: 0 var(--space-5);
  border-radius: var(--radius-s);
  font: 700 var(--type-label)/1 var(--sans);
  cursor: pointer;
}

.r3-button--primary {
  flex: 1 1 180px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
  box-shadow: var(--shadow-xs);
}

.r3-button--secondary,
.r3-actions--external > button,
.r3-detail-actions > button {
  flex: 0 1 auto;
  border: 1px solid var(--line-2);
  background: var(--surf-1);
  color: var(--ui-text);
}

.r3-detail-actions {
  display: flex;
  gap: var(--space-2);
}

.r3-detail-actions > button {
  width: 100%;
}

.r3-clip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
}

.r3-style-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.r3-style-tabs button {
  min-height: var(--density-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--surf-1);
  color: var(--ui-text-muted);
  font-family: var(--sans);
}

.r3-style-tabs button[aria-selected="true"] {
  border-color: var(--accent);
  color: var(--accent-text);
}

.r3-support,
.r3-disclosure,
.r3-variants {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-1);
}

.r3-disclosure summary {
  min-height: var(--density-control);
  color: var(--ui-text);
  font-weight: 700;
  cursor: pointer;
}

.r3-variants {
  padding-left: var(--space-4);
  border-left: 1px solid var(--line-2);
}

.r3-variants > div {
  display: grid;
  gap: var(--space-3);
}

.r3-variants article,
.r3-format__grid > article {
  padding: var(--space-4);
  border: 1px solid var(--line-1);
  background: var(--surf-2);
}

.r3-format__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}

.r3-floor-slot {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line-2);
}

.r3-empty {
  display: grid;
  align-content: center;
  justify-items: start;
  min-height: 64vh;
  max-width: 680px;
}

.r3-empty h1 {
  margin: var(--space-3) 0;
  font-family: var(--display);
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  line-height: 1;
  letter-spacing: -.035em;
}

.r3-empty p {
  max-width: 54ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body-large);
  line-height: 1.6;
}

.r3-empty__action {
  margin-top: var(--space-6);
}

/* SF1: server-authored delivery facts remain a quiet truth floor. */
.r3-floor-slot .sf1-delivery {
  gap: var(--space-8);
}

.sf1-delivery__counts {
  display: grid;
  gap: var(--space-5);
}

.sf1-counts,
.sf1-lanes {
  gap: 0;
  border-top: 1px solid var(--line-1);
}

.sf1-count,
.sf1-lane {
  flex: 1 1 240px;
  align-content: start;
  min-height: var(--density-row);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--line-1);
  border-radius: 0;
  background: var(--surf-1);
}

.sf1-count__label,
.sf1-lane__label,
.sf1-lane__homes,
.sf1-lane__infeasible {
  color: var(--ui-text-muted);
}

.sf1-delivery__shelves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.sf1-shelf {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-2);
}

.sf1-shelf__title,
.sf1-floor-lane__heading {
  color: var(--ui-text);
  font: 700 var(--type-meta)/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sf1-floor-lane__section {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: var(--space-6);
}

.sf1-floor-lane__heading {
  margin: var(--space-3) 0 0;
  color: var(--ui-text-muted);
}

.sf1-floor-lane__rows {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
}

.sf1-row {
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--line-1);
}

.sf1-row__reading {
  font-size: var(--type-body-large);
  line-height: 1.45;
}

.sf1-row__neighbours,
.sf1-row__shelf {
  color: var(--ui-text-muted);
}

.sf1-row__kept {
  width: fit-content;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 650;
}

.sf1-row__media {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.sf1-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sf1-action {
  min-height: var(--density-control);
  padding: 0 var(--space-4);
  border-radius: var(--radius-s);
  font: 700 var(--type-label)/1 var(--sans);
  cursor: pointer;
}

.sf1-action--watch {
  border: 1px solid var(--line-2);
  background: var(--surf-1);
  color: var(--ui-text);
}

.sf1-action--download {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.sf1-action:disabled {
  border-color: var(--line-1);
  background: var(--surf-2);
  color: var(--ui-text-muted);
  cursor: not-allowed;
}

.sf1-row__notice {
  max-width: 58ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.5;
}

.sf1-row__notice--unavailable,
.sf1-row__notice--error {
  color: var(--ui-text-attention);
}

.sf1-row__media [data-sf1-player] {
  width: min(100%, 420px);
  margin-top: var(--space-3);
}

.sf1-surplus,
.sf1-losses {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-1);
}

/* Clip-card primitives. Inline presentation remains only where geometry comes
   from runtime media data: preview Y and waveform bar height. */
.cc-tab-glyph {
  flex: 0 0 auto;
}

.cc-tabs {
  display: flex;
  align-self: flex-start;
  max-width: 100%;
  padding: 3px;
  gap: 2px;
  overflow-x: auto;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-s);
  background: var(--surf-0);
  -webkit-overflow-scrolling: touch;
}

.cc-tabs--compact {
  display: inline-flex;
  align-self: stretch;
  overflow: visible;
}

.cc-tabs.is-overflowing {
  -webkit-mask-image: linear-gradient(90deg, var(--ink) calc(100% - 22px), var(--ink-02));
  mask-image: linear-gradient(90deg, var(--ink) calc(100% - 22px), var(--ink-02));
}

.cc-tabs__button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--surf-0);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

.cc-tabs--compact .cc-tabs__button {
  flex: 1;
  height: 24px;
  padding: 0 6px;
}

.cc-tabs__button.is-active {
  background: var(--acc-08);
  color: var(--accent-text);
}

.cc-tabs.is-narrow .cc-tabs__button {
  min-height: var(--density-control);
}

.cc-tabs--compact.is-narrow .cc-tabs__button {
  min-height: 30px;
}

.cc-banner-preview {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.cc-banner-preview__position {
  position: absolute;
  left: 50%;
  max-width: 80%;
  text-align: center;
  transform: translateX(-50%);
}

.cc-banner-preview__text {
  display: inline;
  padding: 6px 13px 4px;
  border: 1.5px dashed var(--acc-60);
  border-radius: var(--radius-s);
  background: var(--acc-16);
  color: var(--accent-text);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.85;
  letter-spacing: -.015em;
  white-space: pre-wrap;
}

.cc-banner-preview__flag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--glass-sheet);
  color: var(--accent-text);
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cc-hooks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 10px 10px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-m);
  background: var(--surf-0);
}

.cc-section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 6px var(--space-2);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cc-section-heading small {
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.cc-rule {
  flex: 1;
  height: 1px;
  background: var(--line-1);
}

.cc-spacer {
  flex: 1;
}

.cc-segmented {
  display: inline-flex;
  align-self: flex-start;
  gap: 1px;
  margin: 0 6px 9px;
  padding: 2px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-s);
  background: var(--surf-0);
}

.cc-segmented__button {
  min-height: 25px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--surf-0);
  color: var(--ui-text-muted);
  font: 650 var(--type-meta)/1 var(--sans);
  cursor: pointer;
}

.cc-segmented__button.is-narrow {
  min-height: 32px;
}

.cc-segmented__button.is-active {
  background: var(--acc-08);
  color: var(--accent-text);
}

/* The banner-cap alert. FDP D0 (PR 1601) retuned it from the neutral line and
   surface with amber text to the danger ramp, while this branch was moving the
   declaration out of clipcard.jsx. The landed tone wins; only its home changed. */
.cc-hooks__alert {
  margin: 0 6px var(--space-2);
  padding: var(--space-2) 10px;
  border: 1px solid var(--danger-40);
  border-radius: var(--radius-s);
  background: var(--danger-14);
  color: var(--danger);
  font-size: var(--type-label);
  line-height: 1.45;
}

.cc-hooks__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cc-hooks__list.is-narrow {
  max-height: 318px;
}

.cc-hooks__lane {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 6px var(--space-1);
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.cc-hooks__lane.is-first {
  padding-top: 2px;
}

.cc-hook {
  border: 1px solid var(--surf-0);
  border-radius: var(--radius-s);
  background: var(--surf-0);
  transition: background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}

.cc-hook.is-preview,
.cc-hook.is-busy {
  border-color: var(--line-2);
  background: var(--surf-2);
}

.cc-hook.is-selected {
  border-color: var(--line-acc);
  background: var(--acc-08);
}

.cc-hook__button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) 10px;
  border: 0;
  background: inherit;
  color: var(--ui-text-muted);
  text-align: left;
  cursor: pointer;
}

.cc-hook__button.is-narrow {
  min-height: var(--density-control);
  padding-block: 10px;
}

.cc-hook__mark {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border: 1px solid var(--ui-text-muted);
  border-radius: var(--radius-pill);
  background: var(--surf-0);
}

.cc-hook__mark--s {
  background: var(--ui-text-muted);
}

.cc-hook.is-selected .cc-hook__mark {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 6px var(--acc-60);
}

.cc-hook__text {
  flex: 1;
  min-width: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
}

.cc-hook.is-selected .cc-hook__text {
  color: var(--ui-text);
}

.cc-hook__state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 650;
  letter-spacing: .1em;
}

.cc-hook__state.is-selected,
.cc-hook__clock {
  color: var(--accent-text);
}

.cc-hook__progress,
.cc-hook__preview-action {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 10px 25px;
}

.cc-hook__progress-copy {
  flex: 1;
  min-width: 0;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  line-height: 1.45;
}

.cc-hook__clock {
  flex: 0 0 auto;
  font-size: var(--text-13);
}

.cc-hook__preview-action {
  gap: 10px;
  padding-bottom: 9px;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.cc-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--line-3);
  border-top-color: var(--accent);
  border-radius: var(--radius-pill);
  animation: spinSlow var(--t-slow) linear infinite;
}

.cc-button {
  min-height: 28px;
  padding: 0 11px;
  border-radius: var(--radius-s);
  font: 700 var(--text-13)/1 var(--sans);
  cursor: pointer;
}

.cc-button.is-narrow {
  min-height: 34px;
}

.cc-button--small {
  padding-inline: 14px;
  font-size: var(--type-label);
}

.cc-button--primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.cc-button--quiet {
  border: 1px solid var(--line-2);
  background: var(--surf-0);
  color: var(--ui-text-muted);
}

.cc-button--compact {
  min-height: 26px;
  padding-inline: 9px;
}

.cc-button[aria-disabled="true"],
.cc-button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.cc-hooks__under-delivered {
  padding: var(--space-2) 6px 2px;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.5;
}

.cc-banner-text {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 10px 6px 0;
  padding: 11px 0 1px;
  border-top: 1px solid var(--line-1);
}

.cc-banner-text__state {
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  letter-spacing: .08em;
}

.cc-banner-text__state.is-active {
  color: var(--accent-text);
}

.cc-field-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cc-field {
  flex: 1;
  min-width: 0;
  height: 31px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  outline: 0;
  background: var(--surf-1);
  color: var(--ui-text);
  font: var(--type-label)/1 var(--sans);
}

select.cc-field {
  padding-right: 28px;
  color: var(--ui-text-muted);
}

.cc-field.is-narrow {
  height: 38px;
}

.cc-field:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--acc-22);
  outline-offset: 1px;
}

.cc-banner-text__current {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cc-banner-text__current > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-copy-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  height: 25px;
  padding: 0 7px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--surf-0);
  color: var(--ui-text-muted);
  font: 650 var(--text-13)/1 var(--sans);
  cursor: pointer;
  transition: color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

.cc-copy-button:hover,
.cc-copy-button.is-done {
  background: var(--acc-08);
  color: var(--accent-text);
}

.cc-copy-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line-1);
}

.cc-copy-row.is-primary {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.cc-copy-row__body {
  flex: 1;
  min-width: 0;
}

.cc-copy-row__label {
  margin-bottom: var(--space-1);
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cc-copy-row__text {
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.cc-copy-row__text.is-primary {
  color: var(--ui-text);
  font-size: var(--type-body);
}

.cc-copy-row__text.is-clamped {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
}

.cc-xcopy-wrap {
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--line-1);
}

.cc-xcopy-wrap.is-stacked {
  padding: var(--space-3) var(--space-4);
}

.cc-xcopy {
  padding: 10px 11px 11px;
  border: 1px solid var(--line-1);
  background: var(--surf-0);
}

.cc-xcopy__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cc-xcopy__title {
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cc-xcopy__meta {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cc-xcopy__toggle {
  height: 25px;
  padding: 0 7px;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--surf-0);
  color: var(--ui-text-muted);
  font: 650 var(--text-13)/1 var(--sans);
  cursor: pointer;
}

.cc-xcopy__toggle.is-active {
  color: var(--accent-text);
}

.cc-xcopy__attribution {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line-1);
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.cc-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 9px 0 9px 60px;
}

.cc-jump__lead,
.cc-jump__tail {
  height: 1px;
  background: var(--acc-22);
}

.cc-jump__lead {
  flex: 0 0 14px;
  background: var(--acc-40);
}

.cc-jump__tail {
  flex: 1;
}

.cc-jump__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-text);
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: help;
}

.cc-cut-sheet {
  flex: 1;
  min-width: 0;
  padding: 18px var(--space-5) 18px 18px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(180deg, var(--ink-02), var(--ink) 14px, var(--ink) calc(100% - 14px), var(--ink-02));
  mask-image: linear-gradient(180deg, var(--ink-02), var(--ink) 14px, var(--ink) calc(100% - 14px), var(--ink-02));
}

.cc-cut-sheet.is-compact {
  padding: 14px var(--space-4);
}

.cc-cut-sheet__title {
  margin-bottom: 14px;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cc-cut-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 11px;
}

.cc-cut-row__time {
  flex: 0 0 46px;
  padding-top: 1px;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
}

.cc-cut-row__copy {
  margin: 0;
  color: var(--ui-text);
  font-size: var(--type-body);
  line-height: 1.5;
  letter-spacing: -.005em;
  text-align: start;
  unicode-bidi: plaintext;
}

.cc-cut-row__copy .is-cut {
  color: var(--ui-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--line-3);
  text-decoration-thickness: 1px;
}

.cc-mini {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--space-3) 14px var(--space-3) var(--space-4);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-m);
  background: var(--surf-0);
  transition: border-color var(--duration-base) var(--ease), background var(--duration-base) var(--ease);
}

.cc-mini.is-playing {
  border-color: var(--line-acc);
  background: var(--acc-08);
}

.cc-mini__play {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surf-0);
  color: var(--ui-text);
  transition: color var(--duration-base) var(--ease), background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}

.cc-mini.is-playing .cc-mini__play {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.cc-mini__play-glyph {
  margin-left: 2px;
}

.cc-mini__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.cc-mini__title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cc-mini__title {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 650;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-help {
  display: inline-flex;
  cursor: help;
}

.cc-mini__meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3);
}

.cc-mini__score {
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  cursor: help;
}

.cc-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}

.cc-wave > span {
  flex: 1;
  border-radius: 2px;
  background: var(--line-2);
  transition: background var(--duration-fast) var(--ease);
}

.cc-wave > span.is-played {
  background: var(--ui-text-muted);
}

.cc-wave > span.is-head {
  background: var(--accent);
  box-shadow: 0 0 6px var(--acc-60);
}

.cc-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--surf-0);
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 550;
  letter-spacing: .01em;
  transition: color var(--duration-base) var(--ease), background var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease);
}

.cc-download.is-small {
  height: 30px;
  padding-inline: 9px;
}

.cc-download.has-label {
  padding-inline: 14px;
}

.cc-download:hover {
  border-color: var(--line-3);
  color: var(--ui-text);
}

.cc-download.is-done {
  background: var(--acc-08);
  color: var(--accent-text);
}

.cc-card {
  position: relative;
  display: flex;
  min-height: 312px;
  overflow: hidden;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-l);
  background: var(--surf-2);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease), border-color var(--duration-slow) var(--ease);
}

.cc-card.is-playing {
  border-color: var(--line-acc);
  box-shadow: var(--shadow-sm);
  transform: translateY(-4px);
}

.cc-card.is-stacked {
  flex-direction: column;
}

.cc-card__edge {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: var(--radius-l);
  box-shadow: inset 1px 0 0 var(--acc-40);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease);
}

.cc-card.is-playing .cc-card__edge {
  opacity: 1;
}

.cc-card__player {
  position: relative;
  flex: 0 0 min(196px, 50%);
  border-right: 1px solid var(--line-1);
}

.cc-card__player--tabs {
  display: flex;
  flex-direction: column;
}

.cc-card.is-stacked .cc-card__player {
  flex: 0 0 auto;
  height: 190px;
  border-right: 0;
  border-bottom: 1px solid var(--line-1);
}

.cc-card.is-stacked .cc-card__player--tabs {
  height: 224px;
}

.cc-card__tabs {
  display: flex;
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-2) 0;
}

.cc-card__player-stage {
  position: relative;
  flex: 1;
}

.cc-card__banner-text {
  position: absolute;
  top: 6px;
  right: 6px;
  left: 6px;
  display: -webkit-box;
  overflow: hidden;
  padding: 5px 9px;
  border: 1px solid var(--line-acc);
  border-radius: var(--radius-s);
  background: var(--glass-sheet);
  color: var(--ui-text);
  font-size: var(--text-13);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  pointer-events: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cc-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.cc-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 18px var(--space-5) 14px;
  border-bottom: 1px solid var(--line-1);
}

.cc-card.is-stacked .cc-card__header {
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px var(--space-4) var(--space-3);
}

.cc-card__identity {
  display: flex;
  flex: 0 1 auto;
  gap: var(--space-4);
  min-width: 0;
}

.cc-card.is-stacked .cc-card__identity {
  flex-basis: 100%;
}

.cc-card__rank {
  padding-top: var(--space-1);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  font-weight: 550;
}

.cc-card__copy {
  min-width: 0;
}

.cc-card__copy h3 {
  margin: 0 0 9px;
  color: var(--ui-text);
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: start;
}

.cc-card__burned {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 9px;
}

.cc-card__burned-label {
  flex-shrink: 0;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cc-card__burned > span:last-child {
  min-width: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  font-weight: 650;
  line-height: 1.25;
}

.cc-card__burned > span.is-unburned {
  color: var(--ui-text-muted);
}

.cc-card__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.cc-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: var(--surf-0);
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  font-weight: 650;
  white-space: nowrap;
}

.cc-chip--match {
  max-width: 220px;
  overflow: hidden;
  border-color: var(--line-acc);
  background: var(--acc-08);
  color: var(--accent-text);
  text-overflow: ellipsis;
}

.cc-card__metrics {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cc-card__metric-dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--line-3);
}

.cc-card__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}

.cc-card__tweet {
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--line-1);
}

.cc-card__tweet.is-stacked {
  padding: var(--space-3) var(--space-4);
}

.cc-card__tweet-label {
  margin-bottom: 6px;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cc-card__tweet-copy {
  color: var(--ui-text);
  font-size: var(--type-body);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .r3-delivery {
    padding-top: var(--space-5);
  }

  .r3-hero {
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
  }

  .r3-hero__title {
    display: grid;
    gap: var(--space-5);
  }

  .r3-hero__title h1 {
    font-size: clamp(var(--text-3xl), 12vw, var(--text-5xl));
  }

  .r3-hero__utilities {
    justify-content: flex-start;
  }

  .r3-hero__utilities > button,
  .r3-hero__utilities a {
    min-height: var(--density-control);
  }

  .r3-receipt {
    grid-template-columns: 1fr;
  }

  .r3-formats {
    gap: var(--space-5);
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }

  .r3-screen {
    grid-template-columns: minmax(0, 1fr);
  }

  .r3-screen__detail {
    grid-row: 1;
  }

  .r3-screen__rail {
    position: static;
    grid-row: 2;
    max-height: none;
    margin-top: var(--space-7);
    padding: var(--space-5) 0 0;
    overflow: visible;
    border-top: 1px solid var(--line-2);
    border-right: 0;
  }

  .r3-rail {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .r3-rail::-webkit-scrollbar {
    display: none;
  }

  .r3-rail__clip {
    flex: 0 0 min(78vw, 280px);
    min-height: 72px;
    border: 1px solid var(--line-1);
    scroll-snap-align: start;
  }

  .r3-rail__clip[aria-current="true"] {
    border-color: var(--line-acc);
  }

  .r3-clip {
    padding: 0;
  }

  .r3-clip__header {
    display: grid;
  }

  .r3-player {
    width: min(100%, 430px);
    min-height: 440px;
    border-radius: var(--radius-m);
  }

  .r3-actions,
  .r3-delivery-step {
    width: 100%;
  }

  .r3-button,
  .r3-actions--external > button,
  .r3-detail-actions > button,
  .sf1-action {
    min-height: var(--density-control);
  }

  .r3-button--primary {
    flex-basis: 100%;
  }

  .sf1-floor-lane__section {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .sf1-floor-lane__heading {
    margin-top: 0;
  }

  .sf1-row__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cc-mini {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .cc-mini__body {
    flex-basis: calc(100% - 58px);
  }

  .cc-mini__meta {
    width: 100%;
    padding-left: 48px;
  }

  .cc-field-row {
    align-items: stretch;
    flex-direction: column;
  }

  .cc-field-row .cc-button {
    min-height: var(--density-control);
  }
}

/* FDP D0-05 touch contract, paid on the assembled tree.
   The dense desktop visuals (26px to 36px) are this lane's deliberate design and
   are unchanged. Under a coarse pointer every named control reaches the 44px
   floor, and the two controls whose compact visual is load bearing keep it while
   gaining a centered 44x44 hit area through a transparent ::after. */
@media (pointer: coarse) {
  .cc-tabs__button,
  .cc-segmented__button,
  .cc-hook__button,
  .cc-button,
  .cc-field {
    min-height: 44px;
  }

  .cc-mini__play {
    position: relative;
  }

  .cc-mini__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
  }

  .cc-download {
    position: relative;
  }

  .cc-download::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r3-delivery *,
  .cc-card,
  .cc-card *,
  .cc-mini,
  .cc-mini * {
    scroll-behavior: auto;
  }

  .cc-spinner {
    animation: none;
  }
}

@media (forced-colors: active) {
  .r3-button,
  .r3-formats button,
  .r3-rail__clip,
  .sf1-action,
  .cc-button,
  .cc-download,
  .cc-tabs__button,
  .cc-card {
    border: 1px solid var(--ink);
  }

  .r3-button:focus-visible,
  .r3-formats button:focus-visible,
  .r3-rail__clip:focus-visible,
  .sf1-action:focus-visible,
  .cc-button:focus-visible,
  .cc-download:focus-visible,
  .cc-tabs__button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
}

/* ==================================================================
   UI SLICE 3a - the focused clip keeps a real box, and keeps its own
   controls reachable, at 1440x900 and at 390x844.

   Every number below was measured in the harness Chromium against the
   built bundle (web/verify/verify_results_states.cjs, W4_LAYOUT=1),
   never inferred from the source.
   ================================================================== */

/* THE PLAYER TRANSPORT. The control row's intrinsic width is 319px (three
   transport buttons, the time readout, volume, speed, fullscreen, plus the
   row's own padding). The focused clip caps a vertical player at 270px on the
   desktop column and 260px on the phone column, and .v2u-player hides its
   overflow, so the tail of the row was painted nowhere: at 1440x900 Fullscreen
   sat at 1016-1048 against a player ending at 997 and its own centre answered
   to the stage behind it, and at 390x844 Mute, the speed control and Fullscreen
   were outside the viewport with no sideways scroll to reach them. Wrapping is
   the structural answer rather than a new magic width: every control keeps its
   size and stays inside the player at whatever width the host gives it, and a
   row that already fits is untouched, which is why the wide 16:9 player and the
   legacy feed are unchanged.

   The selector reaches the row through its extracted style attribute because
   that row carries no class of its own. A class was tried first and rejected:
   the control census derives a control's label from its parent element's
   source text (web/verify/control_inventory.cjs), so adding an attribute to
   this row moved a sibling's derived identity and grew the shared census by a
   row for an element that had not changed. The attribute is stable by
   construction, and verify_gallery_feed_css.cjs pins every one of these hooks
   against its rule, so it cannot quietly disappear. */
.v2u-results .v2u-player [data-hl-gf-style="s051"] { flex-wrap: wrap; }

/* THE VARIANT RAIL ROW. It is indented with a margin while keeping width: 100%,
   so it measured 22px wider than the rail at every width: 196-488 against a
   rail ending at 476 at 1440x900, and 48-394.5 against a 390px viewport, where
   its right edge left the screen. The rail list is a flex column, so a row with
   no fixed width stretches to the line box minus its own margin, which is
   exactly the indent this rule leaves in place. */
.v2u-results .v2u-railrow.is-variant { width: auto; }

/* breakpoint: stacked. The shorts area drops to one column and the focus
   stage turns into a column at 820px (web/styles.css, the .v2u-shorts and
   .v2u-focus__stage rules in the 820px block), so every cure below applies
   from that width down. Scoped at 640px it left the 641 to 820 band (iPad
   portrait 768, iPad mini 744) with the stacked layout and none of the cures:
   measured there, the focused player collapsed to 4x7.1 and the sticky rail
   covered the clip, the same twelve defects the 390 measurement found. */
/* breakpoint: tablet */
@media (max-width: 820px) {
  /* THE PHONE COLUMN'S TRACK. minmax(0, 1fr), not a bare 1fr: a grid track's
     automatic minimum is min-content, and the rail's min-content was set by the
     overflowing variant row above, so the single column resolved to 366.5px
     inside a 358px box and the whole shorts area overflowed itself. The desktop
     rule carries minmax(0, 1fr) for this reason already, and .v2u-studio__grid
     was cured the same way in slice 2a.1. Both ends are fixed here: the track is
     floored at zero, and the row that pushed the floor up is no longer wider
     than its rail. */
  .v2u-results .v2u-shorts { grid-template-columns: minmax(0, 1fr); }

  /* THE PLAYER'S CROSS AXIS. The stage becomes a column at this width, so the
     player's width is its cross-axis size, and the stage's align-items:
     flex-start makes that size content based. The player's only in-flow child
     is a percentage-sized box, which contributes nothing to a content
     measurement, so the focused player collapsed to 4px by 7.1px and took its
     whole transport off screen with it. A column flex item needs a definite
     cross-axis size. align-self: stretch cannot supply it here, because the
     vertical player carries `margin: 0 auto` and an auto margin in the cross
     axis absorbs the free space before stretch is considered; a percentage
     width can, and it leaves the existing max-width capping the box and the
     existing auto margins centring it. */
  .v2u-results .v2u-focus__stage > .v2u-player { width: 100%; }

  /* THE RAIL STAYS WITH ITS COLUMN. The rail plinth is sticky under the bar,
     which is right beside a focused clip and wrong above one: in the stacked
     column it pinned itself at 142-384 and the clip scrolled underneath it, so
     from 300px of scroll onward the rail covered the clip at every offset. The
     phone intent was already written (.v2u-shorts__rail { position: static })
     but the plinth rule that follows it is more specific and won at every
     width, so the intent never applied. This restores it, scoped to the shorts
     rail: the R2 rail keeps its own rule. */
  .v2u-results .v2u-shorts .v2u-rail { position: static; }

  /* THE HEADER'S ACTIONS. The header is a flex row that never wrapped, and
     its actions group is flex: 0 0 auto, so at 390 the run-level Download all
     control spanned 208.8 to 475.6 (86px past the viewport) and the honesty
     notes it carries (incl. edits, N skipped) were painted where nobody could
     read them. Both rows may wrap here; the control itself gives up its
     nowrap at this scope (screen-gallery.jsx, DownloadAll). */
  .v2u-results .v2u-results__head { flex-wrap: wrap; }
  .v2u-results .v2u-results__actions { flex-wrap: wrap; max-width: 100%; min-width: 0; }
}

/* ===== editing-panels.css ===== */
/* FDP D2.3 editing panels — editorial workbench, token-only. */

.edp-brand,
.edp-brand-state,
.edp-carousel,
.edp-midform-section,
.edp-rail,
.edp-rail-mobile,
.edp-brand *,
.edp-brand-state *,
.edp-carousel *,
.edp-midform-section *,
.edp-rail *,
.edp-rail-mobile * {
  box-sizing: border-box;
}

.edp-brand button,
.edp-brand input,
.edp-brand select,
.edp-carousel button,
.edp-carousel input,
.edp-carousel select,
.edp-midform-section button {
  font: inherit;
}

.edp-brand button,
.edp-carousel button,
.edp-midform-section button,
.edp-rail button,
.edp-rail-mobile button {
  min-height: 44px;
}

.edp-brand button:focus-visible,
.edp-brand input:focus-visible,
.edp-brand select:focus-visible,
.edp-carousel button:focus-visible,
.edp-carousel input:focus-visible,
.edp-carousel select:focus-visible,
.edp-midform-section button:focus-visible,
.edp-midform-section a:focus-visible,
.edp-midform-section summary:focus-visible,
.edp-rail button:focus-visible,
.edp-rail-mobile button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* Shared editing vocabulary */

.edp-brand-eyebrow {
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.edp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 680;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}

.edp-button:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--line-3);
  background: var(--ink-06);
}

.edp-button--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink-on-accent);
}

.edp-button--primary:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--accent-text);
  background: var(--accent);
}

.edp-button:disabled,
.edp-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.edp-text-action {
  width: fit-content;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-size: var(--type-label);
  font-weight: 680;
  cursor: pointer;
}

.edp-text-action--danger,
.edp-panel-error {
  color: var(--ui-text-danger);
}

.edp-text-action:disabled {
  color: var(--ui-text-muted);
  cursor: not-allowed;
}

.edp-disabled-reason {
  margin: var(--space-2) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.5;
}

.edp-panel-error,
.edp-panel-success {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid currentColor;
  border-radius: var(--radius-m);
  background: var(--ui-surface-raised);
  font-size: var(--type-label);
  line-height: 1.5;
}

.edp-panel-success {
  border-color: var(--ui-line);
  color: var(--ui-text);
}

.edp-cluster-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: var(--space-1);
  border-bottom: 1px solid var(--ui-line);
  background: var(--surf-1);
}

.edp-cluster-tabs button {
  border: 0;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: none;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  font-weight: 680;
  cursor: pointer;
}

.edp-cluster-tabs button[aria-selected="true"] {
  background: var(--ink-06);
  color: var(--ui-text);
  box-shadow: inset 0 -2px var(--accent);
}

.edp-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.edp-segmented button {
  flex: 1 1 auto;
  padding: 0 var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-s);
  background: var(--surf-1);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  font-weight: 650;
  cursor: pointer;
}

.edp-segmented button[aria-pressed="true"] {
  border-color: var(--line-acc);
  background: var(--acc-08);
  color: var(--accent-text);
}

.edp-control-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.edp-control-group legend {
  margin-bottom: var(--space-2);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 680;
}

.edp-range {
  display: grid;
  gap: var(--space-2);
  color: var(--ui-text);
  font-size: var(--type-label);
}

.edp-range > span {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.edp-range output {
  color: var(--accent-text);
  font-weight: 680;
}

.edp-range input {
  width: 100%;
  accent-color: var(--accent);
}

.edp-field {
  display: grid;
  gap: var(--space-2);
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 650;
}

.edp-field > span:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.edp-field small {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 500;
  line-height: 1.45;
}

.edp-field input,
.edp-field select,
.edp-brand-generate input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-s);
  background: var(--surf-1);
  color: var(--ui-text);
}

.edp-field input::placeholder,
.edp-brand-generate input::placeholder {
  color: var(--ui-text-muted);
}

.edp-visually-hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Clip edit map */

.edp-rail {
  display: grid;
  gap: var(--space-2);
}

.edp-rail-family {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line-1);
}

.edp-rail-family.is-last {
  padding-bottom: 0;
  border-bottom: 0;
}

.edp-rail-row,
.edp-rail-cut,
.edp-rail-card {
  border: 1px solid var(--line-1);
  background: none;
  color: var(--ui-text);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}

.edp-rail-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  border-color: var(--line-1);
  border-radius: var(--radius-m);
  text-align: left;
}

.edp-rail-row:hover,
.edp-rail-cut:hover,
.edp-rail-card:hover {
  border-color: var(--line-3);
  background: var(--ink-04);
}

.edp-rail-family.is-active .edp-rail-row {
  border-color: var(--line-acc);
  background: var(--ui-surface-raised);
}

.edp-rail-rank {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 650;
}

.edp-rail-family.is-active .edp-rail-rank,
.edp-rail-card.is-active .edp-rail-rank {
  color: var(--accent-text);
}

.edp-rail-row__title {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 620;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edp-rail-row__tail {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}

.edp-rail-score {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 650;
}

.edp-rail-score.is-active {
  color: var(--ui-text);
}

.edp-rail-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 720;
  white-space: nowrap;
}

.edp-rail-state svg {
  flex: 0 0 auto;
}

.edp-rail-state--editing {
  color: var(--ui-text-edit);
}

.edp-rail-state--ready {
  color: var(--accent-text);
}

.edp-rail-state__spinner {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 2px solid var(--edit-40);
  border-top-color: var(--edit);
  border-radius: var(--radius-pill);
  animation: spinSlow var(--t-slow) linear infinite;
}

.edp-rail-family__count {
  padding: 0 var(--space-3);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.edp-rail-cuts {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-1) var(--space-6);
}

.edp-rail-cuts__label {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 680;
}

.edp-rail-cuts ul {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.edp-rail-cut {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--space-3);
  border-color: var(--line-1);
  border-radius: var(--radius-s);
  text-align: left;
}

.edp-rail-cut svg,
.edp-rail-cut__score {
  color: var(--ui-text-muted);
}

.edp-rail-cut.is-selected {
  border-color: var(--line-acc);
  background: var(--acc-08);
}

.edp-rail-cut.is-selected svg,
.edp-rail-cut.is-selected .edp-rail-cut__score {
  color: var(--accent-text);
}

.edp-rail-cut__label {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text);
  font-size: var(--type-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edp-rail-cut__score {
  font-size: var(--type-meta);
}

.edp-rail-mobile {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1) 0 var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.edp-rail-card {
  display: grid;
  flex: 0 0 176px;
  gap: var(--space-2);
  min-height: 84px;
  padding: var(--space-3);
  border-radius: var(--radius-m);
  scroll-snap-align: start;
  text-align: left;
}

.edp-rail-card.is-active {
  border-color: var(--line-acc);
  background: var(--ui-surface-raised);
}

.edp-rail-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.edp-rail-card__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 620;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.edp-rail-card .edp-rail-state {
  font-size: var(--text-13);
}

.edp-rail-card .edp-rail-score {
  display: none;
}

/* Brand identity workbench */

.edp-brand {
  color: var(--ui-text);
}

.edp-brand-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--ui-line);
}

.edp-brand-header__copy {
  max-width: 620px;
}

.edp-brand-header h2,
.edp-brand-state h2,
.edp-brand--loading h2 {
  margin: var(--space-2) 0 0;
  color: var(--ui-text);
  font: 680 var(--type-heading-2)/1.08 var(--display);
  letter-spacing: -0.03em;
}

.edp-brand-header p,
.edp-brand-state p,
.edp-brand--loading p {
  max-width: 58ch;
  margin: var(--space-3) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body);
  line-height: 1.55;
}

.edp-brand-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-pill);
  color: var(--ui-text);
  font-size: var(--type-meta);
  font-weight: 680;
  white-space: nowrap;
}

.edp-brand-status.is-partial {
  color: var(--ui-text-muted);
}

.edp-brand-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  width: 46px;
  min-height: 27px !important;
  height: 27px;
  padding: 3px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink-16);
  cursor: pointer;
  transition: background var(--duration-fast);
}

.edp-brand-switch[aria-checked="true"] {
  justify-content: flex-end;
  background: var(--accent);
}

.edp-brand-switch:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.edp-brand-switch > span {
  width: 21px;
  height: 21px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  box-shadow: var(--shadow-xs);
}

.edp-brand-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: var(--space-8);
  align-items: start;
  padding-top: var(--space-7);
}

.edp-brand-canvas {
  position: sticky;
  top: calc(var(--bar-h) + var(--space-4));
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  min-height: 440px;
  padding: var(--space-6);
  border: 1px solid var(--ui-line);
  background: var(--surf-0);
}

.edp-brand-preview-wrap {
  display: grid;
  justify-items: center;
  width: 100%;
}

.edp-brand-preview {
  position: relative;
  width: min(var(--edp-frame-w), 100%);
  height: var(--edp-frame-h);
  max-height: 56vh;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  background: var(--ground);
  box-shadow: var(--floor-lift);
}

.edp-brand-preview--vertical {
  aspect-ratio: 9 / 16;
  height: auto;
}

.edp-brand-preview--wide {
  aspect-ratio: 16 / 9;
  height: auto;
}

.edp-brand-preview__scene,
.edp-brand-preview__subject,
.edp-brand-preview__hazard,
.edp-brand-preview__safe-line,
.edp-brand-preview__logo,
.edp-brand-preview__empty {
  position: absolute;
}

.edp-brand-preview__scene {
  inset: 0;
  background: radial-gradient(circle at 30% 18%, var(--acc-22), var(--surf-1) 42%, var(--ground));
}

.edp-brand-preview__subject {
  top: 28%;
  right: 10%;
  bottom: 28%;
  left: 10%;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-m);
  background: linear-gradient(145deg, var(--ink-08), var(--surf-1));
}

.edp-brand-preview__hazard {
  border: 1px dashed var(--danger);
  background: var(--danger-16);
}

.edp-brand-preview__hazard span {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  color: var(--ui-text-danger);
  font-size: var(--text-13);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.edp-brand-preview__safe-line {
  right: 0;
  left: 0;
  border-top: 1px dashed var(--edit-40);
}

.edp-brand-preview__logo {
  border: 1px solid var(--accent);
  border-radius: var(--radius-xs);
  filter: drop-shadow(0 2px 4px var(--ground));
}

.edp-brand-preview__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.edp-brand-preview__empty {
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-1);
  text-align: center;
}

.edp-brand-preview__empty span {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.edp-brand-preview__empty strong {
  color: var(--ui-text);
  font: 650 var(--type-heading-3)/1.1 var(--display);
}

.edp-brand-preview__caption {
  margin-top: var(--space-2);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  letter-spacing: 0.04em;
}

.edp-brand-notice {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-s);
  background: var(--ui-surface);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.5;
}

.edp-brand-notice--live {
  border-color: var(--line-acc);
  color: var(--accent-text);
}

.edp-brand-notice--danger {
  border-color: var(--danger);
  color: var(--ui-text-danger);
}

/* The matte-background notice is ATTENTION, not danger: the clip still renders,
   the logo simply keeps its rectangle. The D0 identity retune moved that notice
   off the old warn pair onto the attention pair, and this variant carries that
   decision into the workbench markup that replaced its inline style. It states
   the severity the way its two siblings do, through border and text colour on
   the family's shared surface, and it reads the semantic attention token rather
   than a raw amber value, which this leaf's own contract forbids
   (verify_editing_panels_design.cjs:220-221). */
.edp-brand-notice--attention {
  border-color: currentColor;
  color: var(--ui-text-attention);
}

.edp-brand-inspector {
  min-width: 0;
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.edp-brand-cluster,
.edp-carousel-cluster {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
}

.edp-brand-cluster__heading > span {
  color: var(--ui-text);
  font: 650 var(--type-heading-3)/1.15 var(--display);
}

.edp-brand-cluster__heading p {
  margin: var(--space-2) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.55;
}

.edp-brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.edp-brand-generate {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ui-line);
}

.edp-brand-generate > label {
  display: grid;
  gap: var(--space-2);
  color: var(--ui-text);
  font-size: var(--type-label);
  font-weight: 650;
}

.edp-brand-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.edp-brand-style-grid button {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-height: 92px;
  padding: var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-s);
  background: var(--surf-1);
  color: var(--ui-text-muted);
  text-align: left;
  cursor: pointer;
}

.edp-brand-style-grid button[aria-checked="true"] {
  border-color: var(--line-acc);
  background: var(--acc-08);
}

.edp-brand-style-grid strong {
  color: var(--ui-text);
  font-size: var(--type-label);
}

.edp-brand-style-grid span {
  font-size: var(--type-meta);
  line-height: 1.4;
}

.edp-operation-status {
  min-height: 20px;
  padding: 0 var(--space-6) var(--space-4);
  color: var(--ui-text-edit);
  font-size: var(--type-meta);
  font-weight: 650;
}

.edp-brand-inspector > .edp-panel-error {
  margin: 0 var(--space-6) var(--space-6);
}

.edp-brand--loading {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
}

.edp-brand-loading__canvas {
  aspect-ratio: 9 / 16;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: linear-gradient(145deg, var(--surf-2), var(--surf-0));
}

.edp-brand-state {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
}

/* Carousel restyle */

.edp-carousel {
  display: grid;
  gap: var(--space-3);
  color: var(--ui-text);
}

.edp-carousel__doors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.edp-carousel-editor {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--ui-line);
}

.edp-carousel-editor__header {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr);
  gap: var(--space-6);
  align-items: end;
}

.edp-carousel-editor__header h3 {
  margin: var(--space-2) 0 0;
  color: var(--ui-text);
  font: 680 var(--type-heading-2)/1.08 var(--display);
  letter-spacing: -0.03em;
}

.edp-carousel-editor__header p {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.55;
}

.edp-carousel-workspace {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.1fr);
  gap: var(--space-6);
  align-items: start;
}

.edp-carousel-preview {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--ui-line);
  background: var(--surf-0);
}

.edp-carousel-preview img,
.edp-carousel-preview__empty {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line-1);
  background: var(--surf-1);
  object-fit: cover;
}

.edp-carousel-preview__empty {
  display: grid;
  place-items: center;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
}

.edp-carousel-preview figcaption {
  display: grid;
  gap: var(--space-1);
}

.edp-carousel-preview figcaption strong {
  color: var(--ui-text);
  font-size: var(--type-label);
}

.edp-carousel-preview figcaption span {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  line-height: 1.45;
}

.edp-carousel-inspector {
  min-width: 0;
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.edp-carousel-placement {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.edp-colour-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--space-2);
}

.edp-colour-field > span {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-s);
}

.edp-carousel-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--ui-line);
  background: var(--surf-1);
}

.edp-carousel-submit > div {
  display: grid;
  gap: var(--space-1);
}

.edp-carousel-submit strong {
  color: var(--ui-text);
  font-size: var(--type-label);
}

.edp-carousel-submit span {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.edp-carousel .v2u-car-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.edp-carousel-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-3);
}

.edp-carousel-comparison figure {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.edp-carousel-comparison figcaption {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.edp-carousel-comparison img {
  width: 100%;
  border: 1px solid var(--ui-line);
}

/* Long-form finishing */

.edp-midform-section {
  margin: 0 0 var(--space-7);
  padding: 0 0 var(--space-7);
  border-bottom: 1px solid var(--ui-line);
  color: var(--ui-text);
}

.edp-midform-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.edp-midform-section__head h2 {
  margin: var(--space-2) 0 0;
  color: var(--ui-text);
  font: 680 var(--type-heading-2)/1.08 var(--display);
  letter-spacing: -0.03em;
}

.edp-midform-section__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.edp-midform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.edp-midform-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
}

.edp-midform-card__player {
  position: relative;
  width: 100%;
}

.edp-midform-card__not-ready {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  padding: var(--space-6);
  border: 1px solid var(--ui-line);
  background: var(--surf-0);
  text-align: center;
}

.edp-midform-card__not-ready > div {
  display: grid;
  gap: var(--space-2);
  max-width: 300px;
}

.edp-midform-card__not-ready strong {
  color: var(--ui-text);
  font-size: var(--type-body-large);
}

.edp-midform-card__not-ready span {
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.5;
}

.edp-midform-card__body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.edp-midform-card__copy {
  flex: 1;
  min-width: 0;
}

.edp-midform-card__copy h3 {
  margin: 0;
  color: var(--ui-text);
  font: 650 var(--type-heading-3)/1.22 var(--display);
}

.edp-midform-card__copy p {
  margin: var(--space-2) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.5;
}

.edp-midform-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.edp-midform-download {
  flex: 0 0 auto;
}

.edp-midform-copy {
  padding-top: var(--space-3);
  border-top: 1px solid var(--ui-line);
}

.edp-midform-copy summary {
  min-height: 44px;
  color: var(--ui-text);
  cursor: pointer;
}

.edp-midform-copy summary > span {
  display: inline-grid;
  gap: var(--space-1);
  margin-left: var(--space-2);
  vertical-align: middle;
}

.edp-midform-copy summary strong {
  font-size: var(--type-label);
}

.edp-midform-copy summary small {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 500;
}

.edp-midform-copy__body {
  padding: var(--space-2) 0 0;
}

.edp-midform-copy__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.edp-midform-copy__row[data-divided="true"] {
  border-top: 1px solid var(--line-1);
}

.edp-midform-copy__text {
  flex: 1;
  min-width: 0;
}

.edp-midform-copy__label {
  margin-bottom: var(--space-1);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.edp-midform-copy__value,
.edp-midform-copy__arc {
  color: var(--ui-text);
  font-size: var(--type-label);
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.edp-midform-copy__arc {
  display: grid;
  gap: var(--space-1);
}

.edp-copy-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1);
  min-height: 36px !important;
  padding: 0 var(--space-2);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-s);
  background: var(--ui-surface-raised);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 680;
  cursor: pointer;
}

.edp-copy-action:hover,
.edp-copy-action.is-done {
  border-color: var(--line-acc);
  color: var(--accent-text);
}

/* breakpoint: canvas */
@media (max-width: 960px) {
  .edp-brand-workspace,
  .edp-carousel-workspace {
    grid-template-columns: minmax(240px, 0.8fr) minmax(300px, 1.2fr);
    gap: var(--space-5);
  }

  .edp-brand-canvas {
    padding: var(--space-4);
  }
}

/* breakpoint: compact */
@media (max-width: 640px) {
  .edp-brand-header,
  .edp-midform-section__head {
    display: grid;
    gap: var(--space-4);
  }

  .edp-brand-status {
    justify-self: start;
  }

  .edp-brand-workspace,
  .edp-carousel-workspace,
  .edp-carousel-editor__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .edp-brand-canvas {
    position: static;
    min-height: 0;
  }

  .edp-brand-preview {
    max-height: none;
  }

  .edp-carousel-placement,
  .edp-carousel-comparison,
  .edp-brand-style-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .edp-brand-style-grid button {
    min-height: 72px;
  }

  .edp-carousel-submit,
  .edp-midform-card__body {
    align-items: stretch;
    flex-direction: column;
  }

  .edp-carousel-submit {
    display: flex;
  }

  .edp-carousel-submit .v2u-car-action,
  .edp-midform-download,
  .edp-brand-actions .edp-button {
    width: 100%;
  }

  .edp-midform-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .edp-midform-section__facts {
    justify-content: flex-start;
  }
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .edp-brand-cluster,
  .edp-carousel-cluster {
    padding: var(--space-4);
  }

  .edp-brand-inspector > .edp-panel-error {
    margin: 0 var(--space-4) var(--space-4);
  }

  .edp-brand-canvas,
  .edp-carousel-preview,
  .edp-midform-card {
    padding: var(--space-3);
  }

  .edp-rail-card {
    flex-basis: 164px;
  }

  .edp-rail-state--raw {
    font-size: 0;
  }

  .edp-rail-state--raw svg {
    width: 15px;
    height: 12px;
  }

  .edp-brand--loading {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

/* FDP D0-05 touch contract, paid on the assembled tree. The 38px and 36px dense
   visuals are this lane's design on a fine pointer and are unchanged; the floor
   is delivered where it is for, which is touch. */
@media (pointer: coarse) {
  .edp-rail-cut,
  .edp-copy-action {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .edp-rail-state__spinner {
    animation: none;
  }
}

.edit-version-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.edit-version-head.has-thumb {
  grid-template-columns: 44px minmax(0, 1fr);
}

.edit-version-head__thumb {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--ink-04);
}

/* Brand only: UIFoundation.breakpoints.phone. */
/* breakpoint: phone */
@media (max-width: 480px) {
  .edp-brand :is(button, input, select, a, [role="button"]) {
    min-height: 44px;
    min-width: 44px;
  }
  .edp-brand .edp-brand-switch { min-height: 44px !important; height: 44px; }
  .edp-brand .edp-brand-preview__hazard[data-zone="rail"] span {
    left: auto;
    right: var(--space-1);
    top: auto;
    bottom: var(--space-1);
  }
}

/* The full editor names the delivered version it is editing on top of, and the
   confirm step names the server's own time and price for the render it is about
   to queue. Both read server fields only; neither computes a number. */
.edp-active-version {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ui-line);
  border-radius: var(--radius-m);
  background: var(--surf-1);
}

.edp-active-version__label {
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.edp-active-version__name {
  overflow: hidden;
  color: var(--ui-text);
  font-size: var(--type-label);
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edp-render-quote {
  color: var(--ui-text);
  font-size: var(--type-label);
  line-height: 1.45;
}

/* The full editor's inspector is a flex column that owns the scrollbar. Its
   sections clip their own content, so a shrinkable section absorbs the
   column's overflow and crushes its controls instead of letting the column
   scroll. */
.edp-editor-section {
  flex: 0 0 auto;
}

/* The same rule for everything else the column carries, so the version block
   and the active-version line cannot be squeezed either. The narrow layout is
   excluded: there the grid itself is the scrollport and the column is in flow. */
.edp-editor-inspector:not(.is-narrow) > * {
  flex: 0 0 auto;
}

/* ===== acquisition-first-run.css ===== */
/* FDP D1.5: app-side acquisition, auth, approved samples, and first episode.
   Every paint value comes from the shared token layer in styles.css. */

[data-ui="acquisition-v3"],
[data-ui="acquisition-v3"] *,
.fr-episode,
.fr-episode * {
  box-sizing: border-box;
}

[data-ui="acquisition-v3"] button,
[data-ui="acquisition-v3"] input,
.fr-episode button {
  font: inherit;
}

.acq-state-stage {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  min-height: 100dvh;
  overflow-y: auto;
  padding:
    max(var(--space-6), var(--safe-top))
    max(var(--space-5), env(safe-area-inset-right, 0px))
    max(var(--space-6), var(--safe-bottom))
    max(var(--space-5), env(safe-area-inset-left, 0px));
  background:
    radial-gradient(circle at 50% 110%, var(--acc-22), transparent 42%),
    var(--bg);
  color: var(--ui-text);
  font-family: var(--sans);
  place-items: center;
}

.acq-notice {
  width: min(560px, 100%);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
  text-align: left;
}

.acq-notice.is-error {
  border-top-color: var(--danger);
}

.acq-eyebrow,
.acq-notice .acq-eyebrow {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--accent-text);
  font: 700 var(--type-meta)/1.2 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.acq-notice h1 {
  max-width: 13ch;
  margin: 0;
  color: var(--ui-text);
  font: 680 clamp(var(--type-heading-2), 8vw, var(--type-display))/1 var(--display);
  letter-spacing: -0.045em;
}

.acq-notice__copy {
  max-width: 44ch;
  margin: var(--space-5) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body-large);
  line-height: 1.6;
}

.acq-progress {
  display: flex;
  gap: var(--space-2);
  width: max-content;
  margin-top: var(--space-6);
}

.acq-progress i {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  animation: acqPulse var(--duration-slow) var(--ease) infinite alternate;
}

.acq-progress i:nth-child(2) { animation-delay: var(--duration-fast); }
.acq-progress i:nth-child(3) { animation-delay: var(--duration-base); }

.acq-primary {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-6);
  padding: 0 var(--space-6);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--btn-primary-bg);
  box-shadow: var(--glow-acc);
  color: var(--ui-text-on-accent);
  cursor: pointer;
  font-weight: 720;
  clip-path: polygon(var(--space-4) 0, 100% 0, 100% 100%, 0 100%, 0 var(--space-4));
}

.acq-primary:disabled {
  box-shadow: none;
  cursor: progress;
  opacity: 0.72;
}

.acq-primary:focus-visible,
.acq-text-action:focus-visible,
.sample-showcase__retry:focus-visible,
.fr-episode button:focus-visible,
.v2-auth button:focus-visible,
.v2-auth input:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
}

.acq-proof {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-9) max(var(--space-6), 4vw);
  border-top: 1px solid var(--ui-line);
  color: var(--ui-text);
  font-family: var(--sans);
}

.acq-proof__header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  align-items: end;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.acq-proof__header .acq-eyebrow,
.acq-waitlist__copy .acq-eyebrow {
  margin-top: 0;
}

.acq-proof__header h2,
.acq-waitlist__copy h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--ui-text);
  font: 680 clamp(var(--type-heading-2), 5vw, var(--type-display))/1 var(--display);
  letter-spacing: -0.045em;
}

.acq-proof__header > p,
.acq-waitlist__copy > p:last-child {
  max-width: 42ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body-large);
  line-height: 1.6;
}

.acq-waitlist {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(340px, 1.2fr);
  gap: var(--space-9);
  margin-top: calc(var(--space-9) + var(--space-7));
  padding: var(--space-9) 0;
  border-top: 1px solid var(--ui-line);
}

.acq-waitlist__form {
  align-self: end;
}

.acq-waitlist__form > label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  font-weight: 650;
}

.acq-waitlist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
}

.acq-waitlist__row input {
  min-width: 0;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 1px solid var(--ui-line);
  border-right: 0;
  border-radius: 0;
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  font-size: var(--type-body-large);
}

.acq-waitlist__row .acq-primary {
  min-height: 52px;
  margin: 0;
  white-space: nowrap;
}

.acq-waitlist__message {
  margin: var(--space-3) 0 0;
  color: var(--accent-text);
  font-size: var(--type-label);
  line-height: 1.45;
}

.acq-waitlist__message.is-error {
  color: var(--ui-text-danger);
}

.acq-waitlist__receipt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-self: end;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--accent-text);
  border-bottom: 1px solid var(--ui-line);
}

.acq-waitlist__receipt-mark {
  display: grid;
  width: var(--density-control);
  height: var(--density-control);
  border: 1px solid var(--accent-text);
  color: var(--accent-text);
  font-weight: 800;
  place-items: center;
}

.acq-waitlist__receipt h3 {
  margin: 0;
  color: var(--ui-text);
  font: 680 var(--type-heading-3)/1.2 var(--display);
}

.acq-waitlist__receipt p {
  margin: var(--space-2) 0 0;
  color: var(--ui-text-muted);
  line-height: 1.5;
}

.acq-text-action,
.sample-showcase__retry {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text-link);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 680;
}

/* Approved sample shelf. */
.sample-showcase {
  width: 100%;
  color: var(--ui-text);
  font-family: var(--sans);
}

.sample-showcase[data-sample-state="loading"],
.sample-showcase[data-sample-state="empty"],
.sample-showcase[data-sample-state="error"] {
  position: relative;
  min-height: 220px;
  padding: var(--space-7) 0;
  border-top: 1px solid var(--ui-line);
  border-bottom: 1px solid var(--ui-line);
}

.sample-showcase__state-kicker {
  margin: 0 0 var(--space-3);
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sample-showcase h3 {
  max-width: 18ch;
  margin: 0;
  color: var(--ui-text);
  font: 660 var(--type-heading-2)/1.08 var(--display);
  letter-spacing: -0.035em;
}

.sample-showcase__state-copy {
  max-width: 50ch;
  margin: var(--space-4) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body);
  line-height: 1.6;
}

.sample-showcase__loader {
  position: absolute;
  right: 0;
  bottom: var(--space-7);
  left: 0;
  height: 2px;
  overflow: hidden;
  background: var(--ui-line);
}

.sample-showcase__loader::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 28%;
  background: var(--accent);
  content: "";
  animation: sampleLoad var(--duration-scene) var(--ease) infinite alternate;
}

.sample-showcase__retry {
  margin-top: var(--space-4);
}

.sample-showcase__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

.sample-showcase__heading .sample-showcase__state-kicker {
  margin: 0;
}

.sample-showcase__heading > p:last-child {
  max-width: 42ch;
  margin: 0;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.5;
}

.sample-showcase__grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  align-items: start;
  gap: var(--space-4);
}

.sample-card {
  min-width: 0;
}

.sample-card__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  background: var(--ui-surface-raised);
  box-shadow: var(--shadow-sm);
}

.sample-card__media video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--ui-surface-raised);
  object-fit: cover;
}

.sample-card__rank {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hero-hud-line);
  background: var(--hero-hud-bg);
  color: var(--hero-hud-ink);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  backdrop-filter: blur(var(--space-2));
  -webkit-backdrop-filter: blur(var(--space-2));
}

.sample-card__caption {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0 0;
}

.sample-card__caption h3 {
  max-width: none;
  margin: 0;
  color: var(--ui-text);
  font: 650 var(--type-label)/1.35 var(--sans);
  letter-spacing: -0.01em;
}

.sample-card__caption p {
  margin: var(--space-1) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.sample-card__score {
  flex: 0 0 auto;
  color: var(--accent-text);
  font-size: var(--type-heading-3);
  font-weight: 700;
}

.sample-showcase.is-home {
  margin-top: var(--space-6);
}

.sample-showcase.is-home .sample-showcase__grid {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.sample-showcase.is-home .sample-showcase__heading {
  display: block;
}

.sample-showcase.is-home .sample-showcase__heading > p:last-child {
  margin-top: var(--space-2);
}

/* Guided first episode. Plain rails, not a card or checklist. */
.fr-episode {
  position: relative;
  width: min(720px, 100%);
  margin: 0 auto var(--space-8);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--accent-text);
  border-bottom: 1px solid var(--ui-line);
  color: var(--ui-text);
  font-family: var(--sans);
}

.fr-episode__close {
  position: absolute;
  top: var(--space-4);
  right: 0;
  display: grid;
  width: var(--density-control);
  height: var(--density-control);
  border: 0;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: var(--type-heading-3);
  place-items: center;
}

.fr-episode__copy {
  max-width: 570px;
  padding-right: var(--space-9);
}

.fr-episode__eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 720;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.fr-episode__copy h1 {
  margin: 0;
  color: var(--ui-text);
  font: 680 clamp(var(--type-heading-2), 6vw, var(--type-heading-1))/1.02 var(--display);
  letter-spacing: -0.04em;
}

.fr-episode__copy > p:last-child {
  max-width: 52ch;
  margin: var(--space-4) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body);
  line-height: 1.6;
}

.fr-episode__route {
  display: grid;
  grid-template-columns: 1fr var(--space-8) 1fr;
  align-items: stretch;
  margin-top: var(--space-7);
}

.fr-episode__route > button,
.fr-episode__route > div:not(.fr-episode__route-line) {
  display: grid;
  min-height: 94px;
  align-content: center;
  justify-items: start;
  padding: var(--space-4);
  border: 1px solid var(--ui-line);
  border-radius: 0;
  background: transparent;
  color: var(--ui-text-muted);
  text-align: left;
}

.fr-episode__route > button {
  border-color: var(--accent-text);
  background: var(--acc-08);
  color: var(--ui-text);
  cursor: pointer;
}

.fr-episode__route span {
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fr-episode__route strong {
  margin-top: var(--space-2);
  color: inherit;
  font-size: var(--type-body-large);
}

.fr-episode__route small {
  margin-top: var(--space-1);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
}

.fr-episode__route-line {
  position: relative;
}

.fr-episode__route-line::before {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  left: var(--space-2);
  height: 1px;
  background: var(--ui-line);
  content: "";
}

.fr-episode__route-line::after {
  position: absolute;
  top: calc(50% - var(--space-1));
  right: var(--space-2);
  width: var(--space-2);
  height: var(--space-2);
  border-top: 1px solid var(--ui-line);
  border-right: 1px solid var(--ui-line);
  content: "";
  transform: rotate(45deg);
}

.fr-episode__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.fr-episode__start,
.fr-episode__sample {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-weight: 680;
}

.fr-episode__start { color: var(--ui-text); }
.fr-episode__sample { color: var(--ui-text-link); }

.v2-u3a-home .fr-episode + .v2-u3a-intake .v2-u3a-eyebrow {
  color: var(--accent-text);
}

/* Auth threshold. One editorial promise beside one action card. */
.v2-auth .v2-auth__main {
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 440px);
  gap: clamp(var(--space-8), 8vw, 120px);
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: calc(var(--space-9) + var(--safe-top)) max(var(--space-6), 4vw) calc(var(--space-9) + var(--safe-bottom));
}

.v2-auth__context {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

.v2-auth__context-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-9);
}

.v2-auth__context-kicker,
.v2-auth__card-kicker {
  margin: 0 0 var(--space-3);
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-weight: 720;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.v2-auth__context h2 {
  margin: 0;
  color: var(--ui-text);
  font: 680 clamp(var(--type-heading-1), 5vw, 60px)/0.96 var(--display);
  letter-spacing: -0.055em;
}

.v2-auth__context h2 span {
  color: var(--accent-text);
}

.v2-auth__context > p:not(.v2-auth__context-kicker) {
  max-width: 40ch;
  margin: var(--space-5) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--type-body-large);
  line-height: 1.6;
}

.v2-auth__route {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ui-line);
}

.v2-auth__route span {
  display: grid;
  grid-template-columns: var(--space-8) 1fr;
  align-items: baseline;
  color: var(--ui-text-muted);
  font-size: var(--type-label);
}

.v2-auth__route i {
  color: var(--accent-text);
  font-size: var(--type-meta);
  font-style: normal;
}

.v2-auth .v2-auth__card {
  width: 100%;
  padding: var(--space-8) var(--space-7) var(--space-6);
  border: 1px solid var(--ui-line);
  border-radius: 0;
  background: var(--card-sheen), var(--ui-surface-raised);
  text-align: left;
  clip-path: polygon(var(--space-6) 0, 100% 0, 100% 100%, 0 100%, 0 var(--space-6));
}

.v2-auth .v2-auth__card::before {
  border-radius: 0;
}

.v2-auth .v2-auth__card h1 {
  margin-bottom: var(--space-2);
  font-size: var(--type-heading-2);
}

.v2-auth__card-intro {
  margin: 0 0 var(--space-6);
  color: var(--ui-text-muted);
  font-size: var(--type-label);
  line-height: 1.55;
}

.v2-auth .v2-auth__google {
  min-height: 50px;
}

.v2-auth .v2-auth__divider {
  margin: var(--space-5) 0 var(--space-3);
}

.v2-auth .v2-auth__form {
  margin: 0;
}

.v2-auth .v2-auth__form label {
  margin-top: var(--space-3);
}

.v2-auth .v2-auth__form label > span {
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  font-weight: 650;
}

.v2-auth .v2-auth__form input {
  min-height: 48px;
  border-color: var(--ui-line);
  border-radius: 0;
  background: var(--ui-surface);
  box-shadow: none;
  font-size: var(--type-body-large);
}

.v2-auth .v2-auth__submit,
.v2-auth__resend {
  min-height: 48px;
  border-radius: 0;
}

.v2-auth .v2-auth__submit {
  border-color: var(--ui-line);
}

.v2-auth__resend {
  width: 100%;
  margin-top: var(--space-3);
  border: 1px solid var(--ui-line);
  background: transparent;
  color: var(--ui-text-link);
  cursor: pointer;
  font-size: var(--type-label);
  font-weight: 650;
}

.v2-auth__resend:disabled,
.v2-auth .v2-auth__switch button:disabled,
.v2-auth .v2-auth__helper button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.v2-auth .v2-auth__helper {
  justify-content: flex-start;
  min-height: 40px;
}

.v2-auth .v2-auth__switch {
  margin-top: var(--space-2);
  color: var(--ui-text-muted);
  text-align: left;
}

.v2-auth .v2-auth__legal {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ui-line);
  color: var(--ui-text-muted);
  font-size: var(--type-meta);
  text-align: left;
}

.v2-auth .v2-auth__legal button {
  min-width: 0;
  min-height: 44px;
  padding: 0;
  color: var(--ui-text-link);
  text-decoration: none;
}

.v2-auth .v2-auth__message {
  text-align: left;
}

.v2-auth .v2-auth__message.is-error { color: var(--ui-text-danger); }
.v2-auth .v2-auth__message.is-notice { color: var(--ui-text-link); }

.v2-auth.is-recovery .v2-auth__recovery-card {
  align-self: center;
}

@keyframes acqPulse {
  from { opacity: 0.25; transform: scale(0.72); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sampleLoad {
  from { transform: translateX(-100%); }
  to { transform: translateX(360%); }
}

/* Was an unmarked 760px; snapped to the canonical compact value, so the proof
   and waitlist single-column stack now begins at 640px instead of 760px. */
/* breakpoint: compact */
@media (max-width: 640px) {
  .acq-proof {
    padding: var(--space-8) max(var(--space-4), env(safe-area-inset-right, 0px));
  }

  .acq-proof__header,
  .acq-waitlist {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .acq-proof__header h2,
  .acq-waitlist__copy h2 {
    max-width: 14ch;
  }

  .acq-waitlist {
    margin-top: var(--space-9);
    padding: var(--space-8) 0;
  }

  .acq-waitlist__row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .acq-waitlist__row input {
    border-right: 1px solid var(--ui-line);
  }

  .sample-showcase__heading {
    display: block;
  }

  .sample-showcase__heading > p:last-child {
    margin-top: var(--space-2);
  }

  .sample-showcase__grid,
  .sample-showcase.is-home .sample-showcase__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    align-items: start;
  }

  .sample-card:nth-child(3) {
    display: none;
  }

  .fr-episode {
    padding: var(--space-6) 0;
  }

  .fr-episode__route {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fr-episode__route-line {
    height: var(--space-7);
  }

  .fr-episode__route-line::before {
    top: 0;
    bottom: 0;
    left: var(--space-7);
    width: 1px;
    height: auto;
  }

  .fr-episode__route-line::after {
    top: auto;
    right: auto;
    bottom: var(--space-2);
    left: calc(var(--space-7) - var(--space-1));
    transform: rotate(135deg);
  }

  .fr-episode__actions {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .v2-auth .v2-auth__main {
    display: block;
    width: 100%;
    padding: calc(var(--space-7) + var(--safe-top)) max(var(--space-4), env(safe-area-inset-right, 0px)) calc(var(--space-7) + var(--safe-bottom));
  }

  .v2-auth__context {
    margin: 0 auto var(--space-7);
  }

  .v2-auth__context-mark {
    margin-bottom: var(--space-6);
  }

  .v2-auth__context h2 {
    font-size: clamp(var(--type-heading-1), 12vw, var(--type-display));
  }

  .v2-auth__context > p:not(.v2-auth__context-kicker),
  .v2-auth__route {
    display: none;
  }

  .v2-auth .v2-auth__card {
    max-width: none;
    margin: 0 auto;
    padding: var(--space-7) var(--space-5) var(--space-5);
  }

  .v2-auth .v2-auth__back.is-icon {
    top: var(--space-3);
    left: var(--space-3);
  }
}

/* Was an unmarked 420px; snapped to the canonical phone value. The single-column
   sample grid, and the hiding of the second and third sample cards, now begins at
   480px instead of 420px, so a 440px viewport shows one card where it showed three. */
/* breakpoint: phone */
@media (max-width: 480px) {
  .sample-showcase__grid,
  .sample-showcase.is-home .sample-showcase__grid {
    grid-template-columns: 1fr;
  }

  /* Hide only the THIRD card here, not the second. The showcase is a three-rung
     ladder and the middle rung (now 640px) already hides the third, so hiding the
     second as well made the canonical-scale snap below cost every phone in the
     421-480 band a card it used to have. The sample cards ARE the proof section's
     argument, so they are the wrong thing to lose first on a narrow viewport; two
     stacked full-width cards on a 375px phone is a scroll, not a break. */
  .sample-card:nth-child(3) {
    display: none;
  }

  .fr-episode__copy {
    padding-right: var(--space-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acq-progress i,
  .sample-showcase__loader::after,
  .v2-auth .v2-auth__card {
    animation: none !important;
    transition: none !important;
  }

  .sample-showcase__loader::after {
    width: 100%;
    transform: none;
  }
}

@media (forced-colors: active) {
  .acq-notice,
  .acq-primary,
  .acq-waitlist,
  .acq-waitlist__row input,
  .acq-waitlist__receipt,
  .sample-showcase,
  .sample-card__media,
  .fr-episode,
  .fr-episode__route > button,
  .fr-episode__route > div:not(.fr-episode__route-line),
  .v2-auth .v2-auth__card,
  .v2-auth .v2-auth__form input {
    border: 1px solid CanvasText;
  }
}

/* ===== w2-post.css ===== */
/* w2-post.css: wave 2 Post sheet. Scoped to .w2-post so the shared kit sheet
   keeps its own grammar everywhere else. Tokens only, no authored colors, no
   theme branch, no new flag. Registration in the eager CSS order is the
   integrator's step (see the lane report). */

.w2-post {
  font-family: var(--sans);
  color: var(--ink);
}

.w2-post * {
  box-sizing: border-box;
}

/* The kit sheet is a right-hand column on desktop and shares the phone frame
   with its siblings. 390px takes the whole width without overriding its inset. */
.w2-post .k-sheet {
  width: min(560px, 100%);
}

.w2-post .k-sheet__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  gap: var(--space-4);
}

.w2-post .k-sheet__body > * { flex-shrink: 0; }

/* Every readable string in this surface sits at or above 13px. */
.w2-post .k-sheet__body,
.w2-post .u4b-post__body,
.w2-post .u4b-loading,
.w2-post .u4b-outcomes,
.w2-post .u4b-doors {
  font-size: var(--text-14);
  line-height: 20px;
}

.w2-post .u4b-post__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.w2-post .u4b-loading {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-72);
  font-size: var(--text-14);
}

.w2-post .u4b-section__head {
  display: flex;
  min-height: 24px;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

/* h3 section headings under the sheet's single h2. The eyebrow class carries
   the look; the tag carries the outline. */
.w2-post h3.u4b-eyebrow {
  margin: 0;
  color: var(--ink-55);
  font-size: var(--text-13);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 18px;
  text-transform: uppercase;
}

.w2-post .u4b-section__head span,
.w2-post .u4b-section__head strong {
  font-size: var(--text-14);
}

.w2-post .u4b-platform-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.w2-post .u4b-platform-chip {
  min-height: 44px;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-align: left;
}

.w2-post .u4b-platform-chip .k-button__label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-14);
}

.w2-post .u4b-platform-chip.is-active {
  border-color: var(--accent);
}

.w2-post .u4b-platform-chip.is-disconnected {
  opacity: 0.72;
}

.w2-post .u4b-platform-chip__state {
  color: var(--ink-55);
  font-size: var(--text-13);
}

.w2-post .u4b-hashtags,
.w2-post .u4b-cover {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
  background: var(--surf-1);
}

.w2-post .u4b-hashtags > div,
.w2-post .u4b-cover__copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
}

.w2-post .u4b-hashtags p,
.w2-post .u4b-cover__copy span {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink-72);
  font-size: var(--text-13);
  line-height: 18px;
}

.w2-post .u4b-cover__preview {
  overflow: hidden;
  width: 56px;
  height: 78px;
  flex: 0 0 56px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
}

.w2-post .u4b-cover__preview.is-set {
  border-width: 2px;
  border-color: var(--accent);
}

.w2-post .u4b-cover__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w2-post .u4b-scrubber {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
}

.w2-post .u4b-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.w2-post .u4b-segmented .k-button {
  min-height: 44px;
  flex: 1 1 96px;
}

.w2-post .u4b-segmented .k-button.is-active {
  border-color: var(--accent);
  color: var(--accent-text);
}

.w2-post .u4b-when__reason,
.w2-post .u4b-post__reason {
  margin: 0;
  color: var(--ink-72);
  font-size: var(--text-13);
  line-height: 18px;
}

.w2-post .u4b-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.w2-post .u4b-calendar__days,
.w2-post .u4b-calendar__times {
  display: flex;
  overflow-x: auto;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  scrollbar-width: thin;
  scrollbar-color: var(--ink-12) transparent;
}

.w2-post .u4b-calendar__day,
.w2-post .u4b-calendar__time {
  min-height: 44px;
  flex: 0 0 auto;
  min-width: 56px;
  padding: var(--space-2);
}

.w2-post .u4b-calendar__day .k-button__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: var(--text-13);
  line-height: 16px;
}

.w2-post .u4b-calendar__day.is-active,
.w2-post .u4b-calendar__time.is-active {
  border-color: var(--accent);
}

.w2-post .u4b-calendar__day i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.w2-post .u4b-calendar p {
  margin: 0;
  color: var(--ink-55);
  font-size: var(--text-13);
  line-height: 18px;
}

.w2-post .u4b-outcomes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.w2-post .u4b-outcomes__summary {
  margin: 0;
  font-size: var(--text-14);
  line-height: 20px;
}

.w2-post .u4b-outcomes__summary.is-ok {
  color: var(--ink-88);
}

.w2-post .u4b-outcomes__summary.is-error {
  color: var(--ink);
}

.w2-post .u4b-outcomes > div {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-md);
}

.w2-post .u4b-outcomes > div.is-error {
  border-color: var(--line-3);
}

.w2-post .u4b-outcomes > div > span {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-1);
  overflow-wrap: anywhere;
  font-size: var(--text-13);
  line-height: 18px;
}

.w2-post .u4b-recall-note {
  margin: 0;
  color: var(--ink-72);
  font-size: var(--text-13);
  line-height: 18px;
}

.w2-post .u4b-doors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-1);
}

.w2-post .u4b-doors .k-button {
  min-height: 44px;
}

/* The footer is the sticky home of the one primary action. */
.w2-post .k-sheet__footer .k-button {
  min-height: 44px;
  flex: 1;
}

.w2-post .k-button:focus-visible,
.w2-post a:focus-visible,
.w2-post textarea:focus-visible,
.w2-post input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .w2-post .k-sheet {
    width: 100%;
    border-left: 0;
  }

  .w2-post .u4b-hashtags,
  .w2-post .u4b-cover {
    flex-wrap: wrap;
  }

  .w2-post .u4b-segmented .k-button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w2-post .k-sheet,
  .w2-post .k-sheet__scrim,
  .w2-post .k-button {
    animation: none;
    transition: none;
  }
}

/* Include shared caption actions and the sheet header in the touch floor. */
.w2-post button, .w2-post a { min-height: 44px; min-width: 44px; }

/* ===== w2-distribute.css ===== */
/* Distribute scope. The integrator registers this after the kit and legacy sheets. */
.w2-distribute .k-sheet { width: min(960px, 100%); max-width: 100%; }
.w2-distribute .k-sheet__body { min-width: 0; overflow: auto; }
.w2-distribute .k-sheet__footer { flex-shrink: 0; height: auto; min-height: 72px; }
.w2-distribute .k-sheet__header h2 { font-size: 22px; }
.w2-distribute h3 { font-size: 16px; margin: 0 0 8px; }
.w2-distribute p { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.w2-distribute :is(span, strong, small, label, legend, button) { font-size: 13px; }
.w2-distribute :is(button, input, a, [role="button"]) { min-height: 44px; min-width: 44px; }
.w2-distribute .k-button { max-width: 100%; }
.w2-distribute .k-button__label { min-width: 0; }
.w2-distribute .k-button--icon { width: 44px; height: 44px; }
.w2-distribute .u4b-dials { border: 0; padding: 0; margin: 24px 0; display: grid; gap: 16px; min-width: 0; }
.w2-distribute .u4b-platform-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.w2-distribute [aria-pressed="true"] { border-color: var(--accent); background: var(--acc-14); }
.w2-distribute .u4b-two-weeks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.w2-distribute .u4b-plan-day { min-width: 0; }
.w2-distribute .u4b-plan-day__lane { min-height: 88px; }
.w2-distribute .u4b-plan-card { display: block; width: 100%; height: auto; padding: 8px; text-align: left; white-space: normal; }
.w2-distribute .u4b-plan-card .k-button__label { display: block; white-space: normal; overflow: visible; }
.w2-distribute .u4b-plan-card__top { display: flex; flex-wrap: wrap; gap: 4px; }
.w2-distribute .w2-distribute__caption { display: block; overflow-wrap: anywhere; }
.w2-distribute .u4b-outcomes > div { display: flex; flex-wrap: wrap; gap: 8px; }
.w2-distribute .u4b-outcomes > div > span { min-width: 0; overflow-wrap: anywhere; }
.w2-distribute :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* breakpoint: compact */
@media (max-width: 640px) {
  .w2-distribute .k-sheet { width: 100%; max-height: 92dvh; }
  .w2-distribute .k-sheet__body { padding: 16px; }
  .w2-distribute .u4b-two-weeks { grid-template-columns: minmax(0, 1fr); }
  .w2-distribute .k-sheet__footer .k-control-stack { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .w2-distribute *, .w2-distribute *::before, .w2-distribute *::after { animation: none; transition: none; }
}

.w2-distribute .u4b-notice a { display: inline-flex; align-items: center; font-size: 13px; }

/* UIFoundation.breakpoints.phone: the body continues beneath the fixed action. */
/* breakpoint: phone */
@media (max-width: 480px) {
  .w2-distribute .k-sheet { grid-template-rows: 64px minmax(0, 1fr); }
  .w2-distribute .k-sheet__body { padding-bottom: var(--w2-footer-height, 72px); }
  .w2-distribute .k-sheet__footer { position: absolute; inset: auto 0 0; }
}

/* ===== w2-composer.css ===== */
/* Scoped sheet adoption. Integrator appends after the kit and legacy sheets. */
.w2-composer { font-size: 14px; }
.w2-composer .k-sheet { width: min(808px, 100vw); max-width: 100vw; max-height: 100dvh; box-sizing: border-box; }
.w2-composer .k-sheet__body { min-width: 0; overflow-x: hidden; overflow-y: auto; }
.w2-composer :is(button, input, textarea) { min-height: 44px; min-width: 44px; font-size: 14px; }
.w2-composer :is(p, span, small, i, strong, label, h3) { font-size: max(13px, 1em); overflow-wrap: anywhere; }
.w2-composer h3 { margin: 0; }
.w2-composer .u4b-format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w2-composer .u4b-format-grid .k-button { height: auto; white-space: normal; }
.w2-composer .u4b-format-grid .k-button__label { display: grid; gap: 4px; }
.w2-composer .u4b-filmstrip { display: flex; overflow-x: auto; max-width: 100%; }
.w2-composer .u4b-platform-pills, .w2-composer .u4b-quote-editor > div { display: flex; flex-wrap: wrap; gap: 8px; }
.w2-composer :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* breakpoint: compact */
@media (max-width: 640px) {
  .w2-composer .k-sheet { width: 100vw; }
  .w2-composer .k-sheet__footer { flex-wrap: wrap; }
  .w2-composer .k-sheet__footer > * { min-width: 0; max-width: 100%; }
}

/* ===== w2-autopilot.css ===== */
/* Autopilot scope (web/v2-autopilot.jsx on the kit sheet). The integrator
   registers this after kit/kit.css and the other wave 2 sheet scopes, so these
   rules override the kit only inside .w2-autopilot. Palette: tokens only. */
.w2-autopilot .k-sheet { width: min(920px, 100%); max-width: 100%; }
.w2-autopilot .k-sheet__body { min-width: 0; overflow: auto; }
.w2-autopilot .k-sheet__footer { flex-shrink: 0; height: auto; min-height: 72px; }
.w2-autopilot .k-sheet__header h2 { font-size: var(--text-22); }
.w2-autopilot h3 { margin: 0; font-size: var(--text-16); }
.w2-autopilot h4 { margin: 0; font-size: var(--text-15); font-weight: 600; }
.w2-autopilot p { font-size: var(--text-15); line-height: 1.5; overflow-wrap: anywhere; }
.w2-autopilot :is(span, strong, small, label, legend, i, button) { font-size: var(--text-13); }
.w2-autopilot :is(button, input, a, [role="button"]) { min-height: 44px; min-width: 44px; }
.w2-autopilot .k-button { max-width: 100%; }
.w2-autopilot .k-button__label { min-width: 0; }
.w2-autopilot .k-button--icon { width: 44px; height: 44px; }

.w2-autopilot .u4b-autopilot__lead { margin: 0 0 16px; }
.w2-autopilot .u4b-autopilot__body { display: grid; gap: 24px; min-width: 0; padding: 0; }
.w2-autopilot .u4b-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.w2-autopilot .u4b-autopilot__reason { margin: 8px 0 0; color: var(--ink-72); font-size: var(--text-13); }
.w2-autopilot .u4b-autopilot__pass { margin: 0 0 12px; }

/* The week: the start block when there is no schedule yet, the editor or the
   read-only fallback once there is one. */
.w2-autopilot .u4b-slots-panel { min-width: 0; }
.w2-autopilot .u4b-slots-start { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius-md); background: var(--surf-2); }
.w2-autopilot .u4b-slots-start p { margin: 0; }
.w2-autopilot .u4b-slots-start__note { color: var(--ink-72); font-size: var(--text-13); }
.w2-autopilot .u4b-slots-fallback { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; min-width: 0; overflow-x: auto; }
.w2-autopilot .u4b-slots-fallback section { display: grid; gap: 4px; min-width: 0; text-align: center; }
.w2-autopilot .v2q-slots { min-width: 0; overflow-x: auto; }
.w2-autopilot .u4b-slots-note { margin: 12px 0 0; font-size: var(--text-13); overflow-wrap: anywhere; }
.w2-autopilot .u4b-slots-note.is-ok { color: var(--ink-72); }
.w2-autopilot .u4b-slots-note.is-error { color: var(--danger); }

/* The inbox: one draft per row, its outcome replacing its actions in place. */
.w2-autopilot .u4b-inbox { display: grid; gap: 12px; min-width: 0; }
.w2-autopilot .u4b-proposals { display: grid; gap: 12px; min-width: 0; }
.w2-autopilot .u4b-proposal { display: grid; grid-template-columns: 40px auto minmax(0, 1fr) auto; align-items: center; gap: 13px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line-1); border-radius: var(--radius-md); background: var(--surf-2); }
.w2-autopilot .u4b-proposal__copy { min-width: 0; }
.w2-autopilot .u4b-proposal__copy h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-autopilot .u4b-proposal__meta { display: block; margin-top: 2px; color: var(--ink-55); overflow-wrap: anywhere; }
.w2-autopilot .u4b-proposal__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.w2-autopilot .u4b-proposal__outcome { display: grid; gap: 4px; min-width: 0; max-width: 260px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--ink-72); }
.w2-autopilot .u4b-proposal__outcome span { overflow-wrap: anywhere; }
.w2-autopilot .u4b-proposal__outcome.is-error { border-color: var(--danger); background: var(--danger-16); }
.w2-autopilot .u4b-loading { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink-72); font-size: var(--text-15); }
.w2-autopilot .u4b-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.w2-autopilot .u4b-notice a { display: inline-flex; align-items: center; font-size: var(--text-13); }
.w2-autopilot [aria-pressed="true"] { border-color: var(--accent); background: var(--acc-14); }
.w2-autopilot :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* breakpoint: compact */
@media (max-width: 640px) {
  .w2-autopilot .k-sheet { width: 100%; max-height: 92dvh; }
  .w2-autopilot .k-sheet__body { padding: 16px; }
  .w2-autopilot .u4b-proposal { grid-template-columns: 40px auto minmax(0, 1fr); }
  .w2-autopilot .u4b-proposal__actions,
  .w2-autopilot .u4b-proposal__outcome { grid-column: 1 / -1; width: 100%; max-width: none; }
  .w2-autopilot .u4b-slots-fallback { grid-template-columns: repeat(4, minmax(80px, 1fr)); }
  .w2-autopilot .k-sheet__footer .k-control-stack { min-width: 0; width: 100%; }
}
/* breakpoint: phone */
@media (max-width: 480px) {
  /* UIFoundation.breakpoints.phone: the real editor and fallback are day lists. */
  .w2-autopilot .u4b-slots-fallback,
  .w2-autopilot .v2q-slots__grid {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    gap: 8px;
  }
  /* styles.css:6609 pins .v2q-slots__grid to min-width 640px inside the
     compact (<=640) scroller. That rule still matched at 390 and held every
     day row 640px wide, 266px past the right edge, because the single-column
     rule below never reset the minimum. A day list needs no scroller. */
  .w2-autopilot .v2q-slots__grid { min-width: 0; }
  .w2-autopilot .v2q-slots__day,
  .w2-autopilot .u4b-slots-fallback section { min-width: 44px; min-height: 44px; }
  .w2-autopilot .v2q-slots__chip { display: flex; flex-wrap: wrap; height: auto; }
  .w2-autopilot .v2q-slots__chip button { flex-shrink: 0; }
  .w2-autopilot .u4b-section__head { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .w2-autopilot *, .w2-autopilot *::before, .w2-autopilot *::after { animation: none; transition: none; }
}

/* ===== w2-library.css ===== */
/* w2-library.css: wave 2 Library (web/v2-library.jsx on the kit).
 *
 * Scoped to .w2-lib and loaded after history-library.css, so it carries only
 * the deltas wave 2 asks for: every row action at 44px instead of the 36px
 * canvas icon, the status filters as a kit pill row outside the Refine
 * disclosure, the overflow menu trigger, and the row heading one level under
 * the date heading. Colour comes from tokens only; nothing here authors a hue
 * or branches on theme, so the palette is the palette the app already had.
 */

.w2-lib .v2-lib-toolbar {
  grid-template-areas:
    "search refine"
    "filters filters";
  row-gap: var(--space-4);
}

.w2-lib .v2-lib-search { grid-area: search; }
.w2-lib .v2-lib-refine { grid-area: refine; }
.w2-lib .v2-lib-toolbar > .k-pill-row { grid-area: filters; }

.w2-lib .v2-lib-search input {
  min-height: 44px;
  font-size: var(--text-16);
}

/* The pill row is the filter control now. It scrolls inside its own box, so a
 * long set of statuses never widens the page on a phone. */
.w2-lib .v2-lib-toolbar > .k-pill-row {
  padding-bottom: var(--space-1);
}

.w2-lib .v2-lib-refine__panel {
  width: min(320px, calc(100vw - 32px));
}

/* Row actions: 44px, labelled, and never the 36px icon square again. */
.w2-lib .v2-lib-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.w2-lib .v2-lib-act {
  width: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
}

.w2-lib .v2-lib-act.k-button--icon {
  width: 44px;
  padding: 0;
}

.w2-lib .v2-lib-act .k-button__label {
  font-size: var(--text-14);
}

.w2-lib .v2-lib-act--primary {
  min-width: 122px;
}

/* The row title moved from h2 to h3 so the date heading above it stays the
 * section heading. The type is the type it already had. */
.w2-lib .v2-lib-row__story h3 {
  margin: 0;
  color: var(--ui-text);
  font-size: var(--text-18);
  font-weight: 650;
  line-height: 24px;
  overflow-wrap: anywhere;
}

.w2-lib .v2-lib-row__story h3,
.w2-lib .v2-lib-row__reason,
.w2-lib .w2-lib-row__working {
  overflow-wrap: anywhere;
}

.w2-lib .w2-lib-row__working {
  margin: var(--space-1) 0 0;
  color: var(--ui-text-muted);
  font-size: var(--text-13);
  line-height: 18px;
}

.w2-lib .v2-lib-posting,
.w2-lib .v2-lib-cuts__toggle {
  min-height: 44px;
  padding-inline: var(--space-3);
  font-size: var(--text-13);
}

.w2-lib .w2-lib-cut__open {
  min-height: 44px;
}

.w2-lib .w2-lib-loading {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  font-size: var(--text-15);
}

.w2-lib .w2-lib-nomatch .k-empty {
  margin-top: var(--space-8);
}

/* Keyboard focus stays visible on every control this surface owns. */
.w2-lib .v2-lib-act:focus-visible,
.w2-lib .v2-lib-posting:focus-visible,
.w2-lib .v2-lib-cuts__toggle:focus-visible,
.w2-lib .w2-lib-dense:focus-visible,
.w2-lib .v2-lib-search input:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .w2-lib .v2-lib-toolbar {
    grid-template-areas:
      "search"
      "filters"
      "refine";
  }

  .w2-lib .v2-lib-row__actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .w2-lib .v2-lib-act--primary {
    min-width: 132px;
  }

  .w2-lib .v2-lib-row__story h3 {
    font-size: var(--text-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .w2-lib .v2-lib-act,
  .w2-lib .v2-lib-posting,
  .w2-lib .v2-lib-cuts__toggle,
  .w2-lib .k-pill {
    transition: none;
  }
}

@media (forced-colors: active) {
  .w2-lib .v2-lib-act,
  .w2-lib .k-pill::before {
    border-color: CanvasText;
  }
}

/* ADDENDUM_A line 544: Meta 13 in Hanken, never mono. */
.w2-lib .v2-lib-row__meta,
.w2-lib .v2-lib-row__meta span,
.w2-lib .v2-lib-day__header span,
.w2-lib .v2-lib-count {
  font-family: var(--sans);
  font-size: var(--text-13);
  color: var(--ink-55);
}
.w2-lib .w2-lib-error .k-button--primary,
.w2-lib .w2-lib-error .k-button--primary .k-button__label {
  color: var(--ink-on-accent);
  background: var(--accent);
}

/* ===== w2-calendar.css ===== */
/* w2-calendar.css: wave 2 Calendar (the queue route). Scoped to the surfaces
   this lane owns, so nothing here reaches another screen. Tokens only, no
   authored colors, no theme branch, no new flag. Registration in the eager CSS
   order is the integrator's step (see the lane report); it belongs after
   distribution-surfaces.css, whose queue rules these build on. */

/* ------------------------------------------------------------------ *
 * The conditional amber health row (queue route only)
 * ------------------------------------------------------------------ */

/* One row, not a second masthead: no eyebrow and no heading, so the calendar's
   own h1 is the only header on this route. It renders only when a connection
   needs attention, which is why the row never has a "ready" state to style. */
.w2cal-health {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1.5px solid var(--amber-40);
  border-radius: var(--radius-m);
  background: var(--amber-14);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-15);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.w2cal-health__dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--amber);
}

.w2cal-health__line {
  flex: 1 1 220px;
  margin: 0;
  font-size: var(--text-15);
  color: var(--ink);
}

.w2cal-health__accounts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 12px);
  min-width: 0;
}

.w2cal-health__account {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-width: 0;
}

.w2cal-health__identity {
  font-size: var(--text-14);
  color: var(--ink-62, var(--ink));
  overflow-wrap: anywhere;
}

/* The row's actions are kit buttons at 44px; only the amber tone is scoped. */
.w2cal-health .k-button.w2cal-health__action {
  border-color: var(--amber-40);
  color: var(--ink);
}

.w2cal-health .k-button.w2cal-health__action:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Posting slots inside the kit sheet
 * ------------------------------------------------------------------ */

.w2cal-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  font-family: var(--sans);
  color: var(--ink);
  font-size: var(--text-15);
  overflow-wrap: anywhere;
}

/* The sheet is a column on a desktop and the whole width on a phone. */
.w2cal-slots-layer .k-sheet {
  width: min(560px, 100%);
}

.w2cal-slots .v2q-slots__intro,
.w2cal-slots .v2q-slots__note,
.w2cal-slots .v2q-slots__empty-note {
  font-size: var(--text-14);
  margin: 0;
}

/* Seven day columns scroll inside their own box rather than widening the
   sheet: nothing here can push the 390px viewport sideways. */
.w2cal-slots .v2q-slots__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(132px, 1fr);
  gap: var(--space-2, 8px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.w2cal-slots .v2q-slots__day {
  min-width: 0;
}

.w2cal-slots .v2q-slots__dayhead {
  font-size: var(--text-14);
  color: var(--ink-62, var(--ink));
}

.w2cal-slots .v2q-slots__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}

.w2cal-slots .v2q-slots__chip {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-height: 44px;
  font-size: var(--text-14);
}

/* The kit icon button carries a tooltip wrapper; it must not break the row. */
.w2cal-slots .v2q-slots__chip .k-tooltip-wrap {
  display: inline-flex;
}

.w2cal-slots .v2q-slots__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

/* ------------------------------------------------------------------ *
 * Calendar controls adopted onto the kit button
 * ------------------------------------------------------------------ */

/* A week card title, a month day and a slot ghost are kit buttons now. They
   keep the calendar's own shape: the kit chrome is neutralised here rather
   than in the kit, which every other screen shares. */
.v2q .k-button.v2q-card__title,
.v2q .k-button.v2q-row__title,
.v2q .k-button.v2q-peek__rowtitle {
  justify-content: flex-start;
  min-height: 44px;
  font-size: var(--text-15);
}

.v2q .k-button.v2q-ghost,
.v2q .k-button.v2q-month__cell {
  background: none;
  justify-content: flex-start;
  font-size: var(--text-14);
}

.v2q .k-button.v2q-month__cell {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  min-height: 44px;
  padding: var(--space-2, 8px);
}

.v2q .k-button.v2q-month__cell .k-button__label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.v2q .k-button.v2q-ghost .k-button__label,
.v2q .k-button.v2q-card__status .k-button__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-width: 0;
}

/* Status reads at 13px or more whether it is a control or a plain mark. */
.v2q .v2q-card__status,
.v2q .v2q-card__status.is-readonly,
.v2q .k-button.v2q-card__status {
  font-size: var(--text-13);
}

.v2q .v2q-card__status.is-readonly {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* The view switch, the platform filters and the status cycler stay one strip
   that scrolls inside itself on a phone instead of widening the page. */
.v2q .v2q-viewswitch,
.v2q .v2q-stripfilter {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.v2q .k-button.v2q-viewswitch__btn {
  flex: 0 0 auto;
  font-size: var(--text-14);
}

.v2q .k-button.v2q-viewswitch__btn.is-active {
  border-color: var(--accent);
}

/* Long captions and long account names wrap instead of overflowing. */
.v2q .v2q-card__title,
.v2q .v2q-row__title,
.v2q .v2q-peek__rowtitle,
.v2q .v2q-unsched__title {
  overflow-wrap: anywhere;
}

/* Keyboard focus is visible on every control this lane adopted. */
.v2q .k-button:focus-visible,
.w2cal-slots .k-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The phone takes the full width and the toolbar stacks. */
/* breakpoint: phone */
@media (max-width: 480px) {
  .w2cal-health {
    align-items: flex-start;
  }

  .w2cal-slots .v2q-slots__grid {
    grid-auto-columns: minmax(126px, 1fr);
  }
}

/* Motion is decoration here; the end state is the information. */
@media (prefers-reduced-motion: reduce) {
  .w2cal-health,
  .w2cal-slots .v2q-slots__grid,
  .v2q .v2q-viewswitch,
  .v2q .v2q-stripfilter {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}

/* UIFoundation.breakpoints.phone; keep header and time lanes in one scroller. */
/* breakpoint: phone */
@media (max-width: 480px) {
  .v2q .v2q-week {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .v2q .v2q-week__head,
  .v2q .v2q-week__body {
    grid-template-columns: var(--v2q-gutter) repeat(7, minmax(250px, 78vw));
  }
  .v2q .v2q-month__grid {
    min-width: 0;
    width: 100%;
    grid-template-columns: repeat(7, minmax(44px, 1fr));
    overflow-x: auto;
  }
  .v2q :is(button, input, select, a, [role="button"]),
  .w2cal-slots :is(button, input, select, a, [role="button"]) {
    min-height: 44px;
    min-width: 44px;
    flex-shrink: 0;
  }
}

/* ===== w2-connect.css ===== */
/* w2-connect.css: wave 2 Connect place.
 *
 * Scoped to .w2-connect, the class the Connect main carries. It dresses what
 * the place already renders (the account rows, the notices, the key and
 * webhook panels) in the kit's tab strip, status chip and button, and it
 * states the phone layout. It authors no color: every value is a token from
 * the foundation or the kit, so the palette is unchanged and the theme is read
 * from :root, never branched on here.
 *
 * Registration in CSS_ORDER belongs to the integrator, once, after the other
 * wave 2 sheets. Until then this file ships to nobody and only this lane's
 * harness reads it.
 */

.w2-connect__tabs {
  position: relative;
  margin: 0 0 var(--space-5);
  border-bottom: 1px solid var(--line-1);
}

.w2-connect .k-tabs {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.w2-connect .k-tabs::-webkit-scrollbar {
  display: none;
}

.w2-connect .k-tabs > button {
  min-height: 44px;
  padding: 0 2px 10px;
  white-space: nowrap;
  font-size: var(--text-14);
}

.w2-connect__panel[hidden] {
  display: none;
}

.w2-connect__panel {
  display: block;
}

/* The account row: the chip carries the status, one kit button carries the
   action, and both keep their own line on a narrow row rather than squeezing
   the identity column. */
.w2-connect .v2-connect-social-row .k-status {
  flex: 0 0 auto;
}

.w2-connect .v2-connect-health {
  gap: 0;
}

/* Attention keeps the amber the rest of the product uses for "needs you". The
   kit has no attention tone yet, so it is re-toned here from the same token
   the foundation already spends on this row. */
.w2-connect .v2-connect-health.is-attention .k-status {
  color: var(--amber);
  background: var(--amber-16);
}

.w2-connect .v2-connect-health.is-attention .k-status__dot {
  color: var(--amber);
}

.w2-connect .v2-connect-social-row > .k-button,
.w2-connect .v2-connect-social-add > .k-button,
.w2-connect .v2-connect-key-actions > .k-button,
.w2-connect .v2-connect-notice > .k-button {
  min-height: 44px;
}

/* A long handle, endpoint URL or refusal sentence wraps instead of pushing the
   row wider than the viewport. */
.w2-connect .v2-connect-social-copy > span,
.w2-connect .v2-connect-key-copy > strong,
.w2-connect .v2-connect-notice > span,
.w2-connect .k-control-reason {
  min-width: 0;
  overflow-wrap: anywhere;
}

.w2-connect .k-control-reason {
  display: block;
  color: var(--ink-55);
  font-size: var(--text-13);
  line-height: 18px;
}

.w2-connect .k-status {
  font-size: var(--text-13);
}

.w2-connect .k-modal p {
  overflow-wrap: anywhere;
}

.w2-connect .k-tabs > button:focus-visible,
.w2-connect .k-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (forced-colors: active) {
  .w2-connect .k-status,
  .w2-connect .k-button {
    border: 1px solid currentColor;
  }
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .w2-connect__tabs {
    margin-bottom: var(--space-4);
  }

  .w2-connect .v2-connect-social-row,
  .w2-connect .v2-connect-social-add {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .w2-connect .v2-connect-social-row > .k-button,
  .w2-connect .v2-connect-social-add > .k-button {
    flex: 1 0 100%;
  }

  .w2-connect .v2-connect-key-actions {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w2-connect .k-tabs__underline,
  .w2-connect .k-status__dot,
  .w2-connect .k-button,
  .w2-connect .k-modal {
    animation: none;
    transition: none;
  }
}

/* ===== w2-account.css ===== */
/* w2-account.css: wave 2 Account, surface 26. Scoped to .w2-account__tabs and
   the two panels the wave adds, so the five personal tabs keep the finish the
   V2 U7 section of styles.css already gives them. Tokens only, no authored
   colors, no theme branch, no new flag. Registration in the eager CSS order in
   web/build_bundle.mjs is the integrator's step (see the lane report). */

/* The strip carries seven tabs. On a phone it scrolls inside its own box
   rather than wrapping or clipping, and the fade at the trailing edge is the
   only thing that says there is more. .is-at-end is set from measured scroll
   position by V2Account, so the fade is gone the moment the last tab is on
   screen and never lies about a strip that already fits. */
.w2-account__tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

.w2-account__tabs::-webkit-scrollbar {
  display: none;
}

/* currentColor, not an authored color: a mask reads only the alpha channel,
   so the opaque stop just has to be opaque. This sheet authors no color. */
.w2-account__tabs:not(.is-at-end) {
  -webkit-mask-image: linear-gradient(90deg, currentColor calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, currentColor calc(100% - 28px), transparent);
}

/* Every tab is a full 44px target and never shrinks below its label. */
.w2-account__tabs [role="tab"] {
  min-height: 44px;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--text-14);
}

.w2-account__tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Reused surfaces: Connect's own rows and the brand form are rendered whole.
   The panel gives them the account column's width and wrapping, nothing else,
   so their behaviour and their own styles stay exactly as they are. */
.w2-account__reuse {
  min-width: 0;
  width: 100%;
  font-size: var(--text-14);
  overflow-wrap: anywhere;
}

.w2-account__reuse img,
.w2-account__reuse canvas,
.w2-account__reuse svg {
  max-width: 100%;
}

.w2-account__gate {
  overflow-wrap: anywhere;
}

.w2-account__gate .v2-u7-copy {
  font-size: var(--text-14);
  line-height: 20px;
}

/* At 390px the strip is the full width of the column and the reused panels
   stack, so no fixed width can push the page sideways. */
/* breakpoint: phone */
@media (max-width: 480px) {
  .w2-account__tabs {
    width: 100%;
    max-width: 100%;
    padding-bottom: 10px;
  }

  .w2-account__reuse {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w2-account__tabs {
    scroll-behavior: auto;
  }

  .w2-account__tabs [role="tab"] {
    transition: none;
  }
}

/* The legacy desktop selectors must not shrink kit hit targets. */
.v2-u7-account .v2-u7-segments .k-button,
.v2-u7-account .v2-u7-swatches .k-button {
  min-width: calc(var(--space-8) + var(--space-1));
  min-height: calc(var(--space-8) + var(--space-1));
  height: auto;
}
.v2-u7-account .v2-u7-swatches .k-button {
  width: calc(var(--space-8) + var(--space-1));
}
.w2-account__toggle p {
  color: var(--ink-55);
  font: var(--text-13)/1.4 var(--sans);
  margin: var(--space-1) 0 var(--space-4);
}
/* Higher specificity than the legacy phone word-breaking rules. */
.v2-u7-account .w2-account__tabs {
  min-width: 0;
  max-width: 100%;
}
.v2-u7-account .w2-account__tabs [role="tab"] {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== w2-gates.css ===== */
/* w2-gates.css: the wave 2 scoped sheet for the shell gate body (the plan gate
   and the missing run gate). It is loaded after kit/kit.css, so it only steps
   the kit gate into the scene layer of the app shell, which is an absolutely
   positioned box rather than a page that scrolls with the document.

   Palette: tokens only. No literal color, no theme branch, no engine word. */

.w2-gate {
  display: grid;
  overflow-y: auto;
  min-height: 100%;
  place-items: center;
  padding: 24px 16px calc(24px + var(--safe-bottom, 0px));
}

/* The kit gate keeps its own type, spacing and centering. Inside the scene
   layer it stops reserving 560px of height it cannot use, and it never exceeds
   the width of a phone viewport. */
.w2-gate > .k-gate {
  min-height: 0;
  width: 100%;
  padding: 0;
}

.w2-gate > .k-gate > section {
  width: min(560px, 100%);
}

/* A long unbroken title, run id or sentence wraps rather than pushing the box
   sideways. */
.w2-gate h1,
.w2-gate h2,
.w2-gate p {
  overflow-wrap: anywhere;
}

.w2-gate p {
  font-size: var(--text-16);
  line-height: 24px;
}

.w2-gate .k-gate__eyebrow {
  font-size: var(--text-13);
}

/* Both return paths stay on the 44px target and stay reachable from the
   keyboard, with the kit focus ring. */
.w2-gate .k-gate__actions {
  flex-wrap: wrap;
}

.w2-gate .k-gate__actions .k-button {
  min-height: 44px;
}

.w2-gate .k-gate__actions .k-button:focus-visible {
  box-shadow: var(--focus-ring);
}

/* Phone: the two actions stack full width, in the reading order they already
   have, so neither is off screen at 390x844. */
/* breakpoint: phone */
@media (max-width: 480px) {
  .w2-gate {
    padding: 16px 16px calc(16px + var(--safe-bottom, 0px));
  }

  .w2-gate .k-gate__actions {
    flex-direction: column;
    width: min(560px, 100%);
  }

  .w2-gate .k-gate__actions .k-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w2-gate,
  .w2-gate * {
    animation: none;
    transition: none;
  }
}

/* ===== w2-boot.css ===== */
/* w2-boot.css: wave 2 boot path. Scoped to .w2-boot, the class the raw boot
   scripts put on whichever splash host is on screen (#cz-boot from index.html
   before React, [data-cz-splash] from the auth gate after it). Tokens only, no
   authored colors, no theme branch, no new flag. Registration in the eager CSS
   order is the integrator's step (see the lane report).

   This sheet has to paint before any JavaScript decides anything, so it is
   written for the first frame: the beam and the wordmark are the shell, the
   status line and the recovery block are revealed by a data attribute the boot
   scripts set as the deadline passes. Nothing here animates in or out. */

.w2-boot {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  box-sizing: border-box;
  padding: var(--space-6);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  text-align: center;
}

.w2-boot * {
  box-sizing: border-box;
}

/* The beam is the same radial token the page stage uses, so the first frame of
   the app is the first frame of the shell rather than a flat black plate. It is
   inert: no pointer target, no announcement. */
.w2-boot__beam {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--beam);
}

.w2-boot__mark,
.w2-boot__status,
.w2-boot__recovery {
  position: relative;
  z-index: 1;
}

/* The wordmark is the kit's (.k-wordmark carries the type and the accent), sized
   down here because the boot shell is a single centred mark, not a page header. */
.w2-boot .k-wordmark {
  font-size: var(--text-22);
  line-height: 28px;
  opacity: 0.86;
}

.w2-boot__ellipsis {
  margin-left: 2px;
  opacity: 0.5;
}

/* The status line holds its own height from the first frame, so the shell does
   not jump when the words arrive at three seconds. */
.w2-boot__status {
  min-height: 20px;
  margin: 0;
  max-width: min(320px, 100%);
  color: var(--ink-72);
  font-size: var(--text-14);
  line-height: 20px;
  overflow-wrap: anywhere;
}

.w2-boot[data-w2-boot-stage="shell"] .w2-boot__status {
  visibility: hidden;
}

.w2-boot[data-w2-boot-stage="waking"] .w2-boot__ellipsis,
.w2-boot[data-w2-boot-stage="recovery"] .w2-boot__ellipsis {
  display: none;
}

.w2-boot[data-w2-boot-stage="recovery"] .w2-boot__status {
  display: none;
}

/* Recovery. One heading, one reason, one primary action. */
.w2-boot__recovery {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: min(340px, 100%);
}

.w2-boot[data-w2-boot-stage="recovery"] .w2-boot__recovery {
  display: flex;
}

.w2-boot__title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--text-18);
  font-weight: 600;
  line-height: 24px;
}

.w2-boot__reason {
  margin: 0;
  color: var(--ink-72);
  font-size: var(--text-14);
  line-height: 20px;
  overflow-wrap: anywhere;
}

.w2-boot__actions {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* The recovery action is the kit button in its rendered form: the boot path runs
   before React exists, so it carries the kit's classes and the kit's 44px size
   rather than a second, hand-styled button vocabulary. */
.w2-boot .k-button {
  min-height: 44px;
}

.w2-boot .k-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .w2-boot,
  .w2-boot * {
    animation: none;
    transition: none;
  }
}

/* ===== w2-boundary.css ===== */
/* w2-boundary.css: wave 2 screen error boundary. Scoped to .w2-boundary, which
   only the kit branch of web/screen-error-boundary.jsx renders, so the admin
   bundle (no kit, no kit stylesheet) is untouched by this file. Tokens only, no
   authored colors, no theme branch, no new flag. Registration in the eager CSS
   order is the integrator's step (see the lane report). */

.w2-boundary {
  display: grid;
  width: min(100%, 680px);
  margin: 24px auto;
  padding: var(--space-5, 20px);
  gap: var(--space-3, 12px);
  box-sizing: border-box;
  border: 1px solid var(--danger);
  border-radius: var(--radius-l, 18px);
  background: var(--danger-14, var(--ink-04));
  color: var(--ink);
  font-family: var(--sans);
  /* A caught error's own message can be one unbroken token. It wraps here
     rather than pushing the two exits out of the box. */
  overflow-wrap: anywhere;
}

.w2-boundary * {
  box-sizing: border-box;
}

.w2-boundary__title {
  color: var(--ui-text-danger, var(--danger));
  font-family: var(--display, var(--sans));
  font-size: var(--text-18);
  font-weight: 600;
  line-height: 24px;
}

.w2-boundary__cause {
  color: var(--ink-72);
  font-size: var(--text-15);
  line-height: 22px;
}

/* The cause reported by the failure itself. It is quieter than the sentence
   above it and never smaller than the type floor. */
.w2-boundary__detail {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-radius: var(--radius-s, 8px);
  background: var(--ink-04);
  color: var(--ink-72);
  font-size: var(--text-13);
  line-height: 20px;
}

.w2-boundary__note {
  color: var(--ink-55);
  font-size: var(--text-13);
  line-height: 20px;
}

.w2-boundary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
}

/* Both exits are kit-sized targets, including the anchor that leaves the
   screen, which carries the kit button classes rather than a second look. */
.w2-boundary__actions .k-button {
  min-height: 44px;
}

.w2-boundary a.k-button {
  text-decoration: none;
}

.w2-boundary .k-button:focus-visible,
.w2-boundary a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* breakpoint: phone */
@media (max-width: 480px) {
  .w2-boundary {
    width: 100%;
    margin: var(--space-3, 12px) 0;
    padding: var(--space-4, 16px);
  }

  .w2-boundary__actions .k-button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w2-boundary,
  .w2-boundary .k-button {
    animation: none;
    transition: none;
  }
}

/* ===== results-phone.css ===== */
/* ==================================================================
   UI SLICE 3c: the phone touch floor on Results.

   Measured in the harness Chromium against the built bundle at 390x844
   (web/verify/verify_results_phone.cjs, W4_LAYOUT=1) before any rule was
   written. The Results surface already kept every control reachable at
   phone width (slice 3a: the wrapping transport, the stacked column, the
   header that wraps), its scrollport already ends above the shell phone
   bar when that shell is on (web/ui-shell.css insets the stage), and
   nothing scrolls sideways except the content-type strip, which is a
   strip by design. What it did not have was a touch floor: twenty-two of
   its thirty-two painted controls measured under 44px on at least one
   side (rail rows 40.5, content tabs 34, the previous and next arrows
   34x34, the saved filter chip 26, the rail filter 32, the transport and
   reload buttons 32 to 36, the ghost actions 36 to 40, and the 16x17 save
   glyph on every rail row). Every rule below is a minimum, never a size,
   so a control that already clears the floor is untouched and the desktop
   layout above 820px is byte for byte what it was. The sheet is loaded
   after every sheet that styles Results (the shell sheet stays last, which
   verify_ui_shell.cjs pins) and every selector is scoped under
   .v2u-results, so no rule can reach a surface outside Results.
   ================================================================== */

/* breakpoint: tablet */
@media (max-width: 820px) {
  /* Every text control Results paints: the kit buttons in the header and
     the focused clip's action row, the content-type tabs, the transport and
     reload buttons in the player, the rail rows and the saved filter chip. */
  .v2u-results .v2-btn,
  .v2u-results .v2-tabs__tab,
  .v2u-results .v2-chip,
  .v2u-results .v2u-railrow,
  .v2u-results button.hit,
  .v2u-results .v2u-rail__filter {
    min-height: 44px;
  }

  /* Square targets: the icon buttons (previous, next) and the transport's
     own controls, which wrap inside the player since slice 3a. */
  .v2u-results .v2-btn--icon,
  .v2u-results button.hit {
    min-width: 44px;
  }

  /* The save glyph on each rail row is a 16px mark with a button role. It
     keeps its glyph and gains a 44px box around it, centred, so the row's
     text column narrows by the difference instead of the glyph clipping. */
  .v2u-results .v2u-railrow__save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* THE EDITOR (slice 3c.1). Measured on the real #edit route at 390x844 with
     slice 3b on main: no sideways scroll, nothing covered, and fourteen of its
     nineteen painted controls under 44px, every one sized inline by
     studio-screen.jsx and studio-v2.jsx (34px style and banner segments, 36px
     rows, 16px section headers, 30px caption swatches). The full editor's root
     is the column labelled "Full editor"; every rule is scoped under it and is
     a minimum, which wins over an inline height without touching it. */
  [aria-label="Full editor"] button,
  [aria-label="Full editor"] select,
  [aria-label="Full editor"] input:not([type="range"]),
  [aria-label="Full editor"] [role="button"] {
    min-height: 44px;
  }

  /* Square targets: the caption colour swatches. */
  [aria-label="Full editor"] [role="group"][aria-label="Caption color"] button {
    min-width: 44px;
  }

  /* The versions toggle (edit-versions.jsx) carries its own inline
     `minHeight: 36`, the one control here whose inline floor a stylesheet
     minimum cannot beat; !important so the phone floor survives it, scoped to
     that control alone. Above 820px the inline value stands. */
  [aria-label="Full editor"] [data-version-list-toggle] {
    min-height: 44px !important;
  }
}

/* ===== ui-shell.css ===== */
/* ui-shell.css - UI slice 2a: the persistent rail, the phone bar, the now strip
   and the three phone tasks.

   Everything here is scoped under .v2-app--shell, the class app.jsx adds only
   when the public config carries ui_shell_v2. With the key absent not one rule
   below can match, so the page that ships today is untouched.

   Tokens only: no authored colour, no theme branch, no raw motion duration.
   The rail insets the stage through --shell-stage-left and the phone bar
   through --shell-stage-bottom, so the breakpoints live here and app.jsx keeps
   one stage element. */

.v2-app--shell {
  --shell-rail-w: 208px;
  --shell-bar-h: 64px;
  --shell-strip-h: 64px;
  --shell-stage-left: var(--shell-rail-w);
  --shell-stage-bottom: 0px;
}

/* ---- the rail ---------------------------------------------------------- */

.v2-app--shell .v2-rail {
  position: absolute;
  z-index: var(--z-topbar);
  top: var(--bar-h);
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--shell-rail-w);
  padding: 14px 10px calc(14px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  border-right: 1px solid var(--hair);
  background: var(--surf-1);
  color: var(--ink);
  font-family: var(--sans);
}

.v2-app--shell .v2-rail__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v2-app--shell .v2-rail__group + .v2-rail__group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}

.v2-app--shell .v2-rail__grouplabel {
  padding: 2px 12px 6px;
  color: var(--ink-55);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.v2-app--shell .v2-rail__foot {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}

.v2-app--shell .v2-rail__item {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding-right: 12px;
  padding-left: 12px;
  border-radius: 12px;
  color: var(--ink-72);
  text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.v2-app--shell .v2-rail__item:hover {
  background: var(--ink-06);
  color: var(--ink);
}

.v2-app--shell .v2-rail__item.is-active {
  background: var(--acc-08);
  color: var(--accent);
}

.v2-app--shell .v2-rail__item:focus-visible,
.v2-app--shell .v2-phonebar__item:focus-visible,
.v2-app--shell .v2-shell-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.v2-app--shell .v2-rail__label,
.v2-app--shell .v2-phonebar__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.v2-app--shell .v2-rail__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-app--shell .v2-rail__dot,
.v2-app--shell .v2-phonebar__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
}

.v2-app--shell .v2-rail__badge {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink-on-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* ---- the phone bar and the now strip ----------------------------------- */

.v2-app--shell .v2-phonebar,
.v2-app--shell .v2-now {
  display: none;
}

.v2-app--shell .v2-phonebar__item {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-right: 4px;
  padding-left: 4px;
  border-radius: 12px;
  color: var(--ink-72);
  font-size: 13px;
}

.v2-app--shell .v2-phonebar__text {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-app--shell .v2-phonebar__item.is-active {
  color: var(--accent);
}

.v2-app--shell .v2-now__open {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
  min-height: 44px;
  text-align: left;
}

.v2-app--shell .v2-now__title {
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-app--shell .v2-now__state {
  flex: 0 0 auto;
  margin-left: 10px;
  color: var(--ink-55);
  font-size: 13px;
  white-space: nowrap;
}

/* ---- the task sheets --------------------------------------------------- */

.v2-shell-sheet {
  display: contents;
}

.v2-shell-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.v2-shell-group__label {
  padding: 6px 4px;
  color: var(--ink-55);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.v2-shell-empty {
  margin: 6px 4px;
  color: var(--ink-55);
  font-family: var(--sans);
  font-size: 13px;
}

.v2-shell-row {
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding-right: 12px;
  padding-left: 12px;
  border-radius: 12px;
  color: var(--ink);
  text-align: left;
}

.v2-shell-row__title {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-shell-row__meta {
  flex: 0 0 auto;
  margin-left: 12px;
  color: var(--ink-55);
  font-size: 13px;
  white-space: nowrap;
}

/* breakpoint: tablet */
@media (max-width: 820px) {
  .v2-app--shell {
    --shell-stage-left: 0px;
    --shell-stage-bottom: calc(var(--shell-bar-h) + env(safe-area-inset-bottom, 0px));
  }

  .v2-app--shell .v2-rail {
    display: none;
  }

  .v2-app--shell .v2-phonebar {
    position: absolute;
    z-index: var(--z-transport);
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;
    align-items: center;
    height: calc(var(--shell-bar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
    border-top: 1px solid var(--hair);
    background: var(--glass-bar);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    font-family: var(--sans);
  }

  /* The strip is chrome, not an overlay: while it is up the stage gives back
     its height, so it never covers a row's actions. */
  .v2-app--shell.v2-app--strip {
    --shell-stage-bottom: calc(var(--shell-bar-h) + var(--shell-strip-h) + env(safe-area-inset-bottom, 0px));
  }

  .v2-app--shell .v2-now {
    position: absolute;
    z-index: var(--z-transport);
    right: 10px;
    bottom: calc(var(--shell-bar-h) + 10px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 8px;
    border: 1px solid var(--hair);
    border-radius: 14px;
    background: var(--glass-sheet);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--ink);
    font-family: var(--sans);
  }
}