@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.b6pgxrrsua.bundle.scp.css';

/* _content/SpecStep.Web/Components/Marketing/Sections/CtaSection.razor.rz.scp.css */
/* CTA — dark "hero card" section at the bottom of the landing
   page. PR-T37 (2026-05-08) — pinned to a stable dark slate
   independent of [data-theme] because this block is INTENTIONALLY
   dark in both modes (the design's visual climax / conversion
   surface). Was: background: var(--ink) which became
   light-on-light in dark mode after the marketing palette
   converged with the app tokens. */

.cta[b-7l5vark8qb] {
    background: #1B1F2A;
    color: #F0EAD6;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}
.cta .container[b-7l5vark8qb] {
    position: relative;
    z-index: 1;
    text-align: center;
}
.cta .eyebrow[b-7l5vark8qb] {
    color: #B8B0A0;
    display: block;
    margin-bottom: 14px;
}
.cta h2[b-7l5vark8qb] {
    color: #F0EAD6;
    margin: 0;
}
.cta h2 em[b-7l5vark8qb] { font-style: normal; color: var(--otto-accent); }
.cta p.sub[b-7l5vark8qb] {
    color: #B8B0A0;
    font-size: 19px;
    margin: 18px auto 0;
    max-width: 520px;
}
.cta .ctas[b-7l5vark8qb] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}

/* Override the marketing-shell button colors for the always-dark
   section. Primary keeps the accent green for cohesion with the
   app's primary CTA; ghost reads on the dark background.
   TASK-161 (2026-05-08) — was --accent-500 (#21b878, 2.56:1 with
   white text — axe-core FAIL). Bumped to --accent-700 (#117b50,
   ~5.3:1) to match .sf-marketing .btn-primary.

   NOTE 2026-05-15 — these .btn-primary / .btn-ghost rules now
   apply ONLY to the signed-in variant ("Open your workspace" +
   "Read the API docs"). The anon sign-in row has been migrated
   to the .sf-oauth-btn shared class below so the three OAuth
   providers read as equal peers (the green primary on Microsoft
   was implying SpecStep preferred MS sign-in). */
.cta .btn-primary[b-7l5vark8qb] { background: var(--accent-700, #117b50); color: #fff; border-color: var(--accent-700, #117b50); }
.cta .btn-primary:hover[b-7l5vark8qb] { background: var(--accent-600, #169a63); border-color: var(--accent-600, #169a63); }
.cta .btn-ghost[b-7l5vark8qb] { background: transparent; color: #F0EAD6; border-color: #3A3F50; }
.cta .btn-ghost:hover[b-7l5vark8qb] { border-color: #F0EAD6; color: #F0EAD6; }

/* 2026-05-15 — unified OAuth sign-in button. Used by the three
   provider buttons in the anon CtaSection state (Microsoft,
   Google, GitHub). Every provider shares this base — identical
   height, background, border, hover. The ONLY per-provider
   differentiator is the logo inside .sf-oauth-btn__logo, so the
   row reads as three equal peers (Linear / Vercel / Notion
   pattern). 5.3:1+ contrast on the dark CTA background. */
.cta .sf-oauth-btn[b-7l5vark8qb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* 2026-05-15 — design-reviewer feedback: was 240px, which produced a
       2+1 orphan at ~680px viewport (Microsoft + Google on row one,
       GitHub alone on row two, stretched). 200px fits all three on a
       single row at 640px+; flex-wrap still stacks them below 540px. */
    min-width: 200px;
    height: 44px;
    padding: 0 18px;
    border-radius: 6px;
    border: 1px solid #3A3F50;
    background: #232735;
    color: #F0EAD6;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    transition: border-color 120ms ease-out, background 120ms ease-out;
    cursor: pointer;
}
.cta .sf-oauth-btn:hover[b-7l5vark8qb] {
    background: #2A2F40;
    border-color: #F0EAD6;
    color: #F0EAD6;
}
.cta .sf-oauth-btn:focus-visible[b-7l5vark8qb] {
    outline: 2px solid #F0EAD6;
    outline-offset: 2px;
}
.cta .sf-oauth-btn__logo[b-7l5vark8qb] {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}
/* GitHub Invertocat ships with fill="currentColor" so it can
   adapt to dark/light contexts. On the dark CTA we want it
   white. The --invert modifier sets color on the IMG container
   (works because the svg uses currentColor); a CSS filter
   fallback covers browsers that don't propagate `color` into
   the inline image. */
.cta .sf-oauth-btn__logo--invert[b-7l5vark8qb] {
    filter: brightness(0) invert(1);
}
.cta .sf-oauth-btn__label[b-7l5vark8qb] {
    white-space: nowrap;
}
/* Vendor-variant hooks. Empty for now — all three providers
   render identically. Kept as named hooks so future per-vendor
   tweaks (e.g., a brand-mandated micro-adjustment) have a
   dedicated home without re-shaping the row. */
.cta .sf-oauth-btn--microsoft[b-7l5vark8qb] {}
.cta .sf-oauth-btn--google[b-7l5vark8qb] {}
.cta .sf-oauth-btn--github[b-7l5vark8qb] {}

/* Orbital rings — two dashed circles spinning in opposite directions. */
.cta .agent-orbit[b-7l5vark8qb] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta .agent-orbit .ring[b-7l5vark8qb] {
    position: absolute;
    width: 760px;
    height: 760px;
    border-radius: 999px;
    border: 1px dashed #3A3F50;
    animation: spin-b-7l5vark8qb 60s linear infinite;
}
.cta .agent-orbit .ring.r2[b-7l5vark8qb] {
    width: 520px;
    height: 520px;
    animation-duration: 42s;
    animation-direction: reverse;
}
@keyframes spin-b-7l5vark8qb { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cta .agent-orbit .ring[b-7l5vark8qb] { animation: none !important; }
}

/* TASK-178 (2026-05-08) — clickwrap ToS acceptance.
   Sits above the OAuth buttons; gates them via aria-disabled +
   the cta__btn-disabled class until the box is checked.

   2026-05-16 — `.cta__tos` is now a sibling block of `.cta .ctas`
   (previously a flex child with `flex-basis: 100%` forcing a row
   break). Standalone block gives a clear two-group visual hierarchy:
   ToS section above, button row below, with explicit vertical
   spacing between them. `.cta .ctas` keeps its own `margin-top`
   so the gap reads consistently regardless of whether ToS is
   present (signed-in branch has no ToS). */
.cta__tos[b-7l5vark8qb] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    max-width: 560px;
    margin: 32px auto 0;
    text-align: left;
    color: #B8B0A0;
    font-size: 13px;
    line-height: 1.5;
}
.cta__tos + .ctas[b-7l5vark8qb] {
    /* Tighter spacing when the ToS block sits directly above the
       button row — they read as a pair. Overrides `.cta .ctas`'s
       default 32px margin-top so the two blocks visually belong
       together rather than feeling estranged. */
    margin-top: 18px;
}
.cta__tos-checkbox[b-7l5vark8qb] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent-700, #117b50);
    cursor: pointer;
}
.cta__tos-label[b-7l5vark8qb] {
    flex: 1 1 auto;
    cursor: pointer;
    color: #D4CDB9;
}
.cta__tos-label a[b-7l5vark8qb] {
    color: #F0EAD6;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cta__tos-label a:hover[b-7l5vark8qb] {
    color: #FFFFFF;
}

/* Soft flash applied via JS when a user clicks a disabled OAuth
   button — draws the eye to the missing acknowledgment. */
.cta__tos-label--flash[b-7l5vark8qb] {
    animation: cta-tos-flash-b-7l5vark8qb 600ms ease-out;
}
@keyframes cta-tos-flash-b-7l5vark8qb {
    0% { color: #FF8A65; }
    100% { color: #D4CDB9; }
}
@media (prefers-reduced-motion: reduce) {
    .cta__tos-label--flash[b-7l5vark8qb] { animation: none; color: #FF8A65; }
}

/* Visually-disabled state for the OAuth anchors. Pointer cursor
   stays "not-allowed" so it's clear these buttons aren't usable;
   the inline JS bounces the click + focuses the checkbox. */
.cta__btn-disabled[b-7l5vark8qb] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: auto; /* still receives clicks so the JS bouncer fires */
}
/* _content/SpecStep.Web/Components/Marketing/Sections/ExternalConnectorsSection.razor.rz.scp.css */
/* External Connectors marketing section — PR 5 (2026-05-13).
   Sister to WhatYouGetSection.razor.css; section base (.s/.s .head)
   duplicated because Blazor CSS isolation scopes per component. */
.s[b-g1aok5uuho] { padding: 96px 0; }
.s .head[b-g1aok5uuho] { max-width: 720px; margin-bottom: 48px; }
.s .head .eyebrow[b-g1aok5uuho] { margin-bottom: 14px; display: block; }
.s .head h2[b-g1aok5uuho] { margin: 0; }
/* PR-T34 (2026-05-13) — was an otto-accent underlined em (same shape
   as WhatYouGet / MeetTheTeam / Tools), but the blue + underline on
   "the folder you've already been working in" read as a hyperlink.
   Falling back to default italic <em> matches the Hero's PR-T33
   resolution of the same anti-pattern. */
.s .head h2 em[b-g1aok5uuho] {
    color: inherit;
}
.s .head p.sub[b-g1aok5uuho] {
    font-size: 19px;
    color: var(--muted-2);
    margin-top: 18px;
    max-width: 600px;
}

/* Provider tile row — three flex tiles, matches the visual density
   of the package cards in WhatYouGetSection. Plain glyph + name; no
   SVG logo assets needed (provider trademarks would add a licensing
   tail; the tile shape + name is plenty for "we support these"). */
.ec-tiles[b-g1aok5uuho] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.ec-tile[b-g1aok5uuho] {
    flex: 1 1 200px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-family: var(--marketing-font-ui);
}
.ec-tile__glyph[b-g1aok5uuho] {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}
.ec-tile__name[b-g1aok5uuho] {
    font-size: 16px;
    font-weight: 600;
}
/* 2026-05-15 — disabled "Coming soon" variant for the Dropbox tile.
   Design-reviewer feedback: pure opacity-fade reads as "this tile failed
   to load." Switched to a dashed border + muted logo + sub-label so the
   row reads as a deliberate roadmap promise rather than a broken tile.
   Tile shape stays at full opacity; only the logo + name shift muted. */
.ec-tile--disabled[b-g1aok5uuho] {
    cursor: not-allowed;
    border-style: dashed;
    background: transparent;
}
.ec-tile--disabled .ec-tile__glyph[b-g1aok5uuho] {
    opacity: 0.45;
    filter: grayscale(60%);
}
.ec-tile--disabled .ec-tile__name[b-g1aok5uuho] {
    color: var(--muted);
}
.ec-tile__hint[b-g1aok5uuho] {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    margin-top: 2px;
}

/* Pro+ pill + footer note. Pill reuses the existing
   .sf-pill--success token; the note picks up the same muted body
   color as the section sub-line so the gating doesn't read louder
   than the value prop above it. */
.ec-footer[b-g1aok5uuho] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted-2);
    font-size: 14px;
}
.ec-footer__note[b-g1aok5uuho] {
    color: var(--muted-2);
    font-family: var(--marketing-font-ui);
}
/* _content/SpecStep.Web/Components/Marketing/Sections/HeroSection.razor.rz.scp.css */
/* HeroSection — scoped CSS isolation. Markup ported verbatim from
   the design bundle's sections/01-hero.html. Colors + utility class
   names reference tokens defined in app.css under .sf-marketing
   (paper, ink, otto, etc.). */

.hero[b-izbiaehih5] {
    padding: 64px 0 72px;
    position: relative;
    overflow: hidden;
}
.hero-grid[b-izbiaehih5] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 72px;
    align-items: center;
}
@media (max-width: 980px) {
    .hero-grid[b-izbiaehih5] { grid-template-columns: 1fr; gap: 40px; }
}
.hero-grid > *[b-izbiaehih5] { min-width: 0; }

.hero .eyebrow[b-izbiaehih5] { margin-bottom: 20px; display: block; }
.hero h1[b-izbiaehih5] { margin: 0; }
/* PR-T33 (2026-05-07) — was a cyan gradient highlight on "a team",
   which over-promoted the phrase and read as a marker pen on a
   serif headline. Falling back to default <em> italics keeps the
   emphasis but doesn't compete with the eyebrow chip / hero CTA. */
.hero h1 em[b-izbiaehih5] {
    color: inherit;
}
.hero .lede[b-izbiaehih5] {
    font-size: 21px;
    color: var(--muted-2);
    max-width: 560px;
    margin-top: 24px;
    line-height: 1.55;
}
.hero .ctas[b-izbiaehih5] {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.hero .meta[b-izbiaehih5] {
    margin-top: 24px;
    font-family: var(--marketing-font-ui);
    font-size: 12px;
    color: var(--muted);
}
.hero .meta .pill[b-izbiaehih5] {
    display: inline-block;
    padding: 4px 10px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 999px;
    margin-right: 8px;
}

/* Stage — Otto in a chat */
.stage[b-izbiaehih5] {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-width: 540px;
    margin-left: auto;
}
.stage .otto-mount[b-izbiaehih5] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-55%);
    width: 38%;
    aspect-ratio: 0.8;
}
.stage .otto-mount img[b-izbiaehih5] { width: 100%; height: 100%; display: block; }

.chatbox[b-izbiaehih5] {
    position: absolute;
    left: 32%;
    top: 50%;
    transform: translateY(-50%);
    width: 70%;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 18px;
    /* PR-T37 (2026-05-08) — was rgba(27,31,42,.08) (hardcoded ink hex), invisible on dark backgrounds. Switched to neutral black at .12 so the chatbox reads on both palettes. */
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
    font-family: var(--marketing-font-ui);
    font-size: 14px;
    color: var(--ink-2);
}
.chatbox .turn[b-izbiaehih5] {
    padding: 10px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
}
.chatbox .turn:last-child[b-izbiaehih5] { border-bottom: none; padding-bottom: 0; }
.chatbox .who[b-izbiaehih5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
    font-weight: 600;
}
.chatbox .who .dot[b-izbiaehih5] { width: 8px; height: 8px; border-radius: 999px; }
.chatbox .turn.otto .who .dot[b-izbiaehih5] { background: var(--agent-otto); }
.chatbox .turn.you .who .dot[b-izbiaehih5] { background: var(--ink); }
.chatbox .turn.alan .who .dot[b-izbiaehih5] { background: var(--agent-alan); }
.chatbox .typing[b-izbiaehih5] { display: inline-flex; gap: 4px; align-items: center; height: 14px; }
.chatbox .typing span[b-izbiaehih5] {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--muted);
    opacity: .4;
    animation: dot-b-izbiaehih5 1.2s ease-in-out infinite;
}
.chatbox .typing span:nth-child(2)[b-izbiaehih5] { animation-delay: .15s; }
.chatbox .typing span:nth-child(3)[b-izbiaehih5] { animation-delay: .3s; }
@keyframes dot-b-izbiaehih5 {
    0%, 80%, 100% { opacity: .3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

/* Floating agent halos.
   2026-05-14 — v1-launch Batch A H-A7. Hero stage calmer pass:
   • halo count halved 4→2 (h2 + h4 dropped in the markup); the two
     surviving halos sit diagonally for visual balance.
   • float amplitude halved 8px → 4px.
   • loop period slowed 5s → 8s.
   Together: each halo moves less, less often, and there are fewer
   of them. Above-the-fold motion is ambient rather than busy. */
.halo[b-izbiaehih5] {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    overflow: hidden;
    border: 2px solid var(--card);
    /* PR-T37 (2026-05-08) — same shift to neutral black for dark-mode legibility. */
    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
    background: var(--card);
    animation: halofloat-b-izbiaehih5 8s ease-in-out infinite;
}
.halo img[b-izbiaehih5] { width: 100%; height: 100%; display: block; }
.halo.h1[b-izbiaehih5] { left: -3%; top: 6%; animation-delay: 0s; }
.halo.h3[b-izbiaehih5] { right: 8%; bottom: 6%; animation-delay: 1.2s; }
@keyframes halofloat-b-izbiaehih5 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* 2026-05-14 — v1-launch Batch A H-A7. .marq + .marq-track rules
   retired with the marquee strip markup. The `.marq-track` entry
   in the prefers-reduced-motion override is no longer needed
   either; halos + typing dots remain gated. */
@media (prefers-reduced-motion: reduce) {
    .halo[b-izbiaehih5],
    .chatbox .typing span[b-izbiaehih5] { animation: none !important; }
}

/* PR-MCP1 (2026-05-13) — Hero feature-strip. Sits below the CTAs.
   Tagline rhythm (dot separators, no pills) so it reads as a
   single statement rather than a feature list. The 4 items map
   1:1 to the strongest credible programmability claims; the deep
   dive lives in slot 7 (#mcp-native). */
.hero__feature-strip[b-izbiaehih5] {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: var(--muted-2);
    font-family: var(--marketing-font-ui);
    font-size: 13px;
    font-weight: 500;
}
.hero__feature-strip-sep[b-izbiaehih5] {
    color: var(--muted-2);
    opacity: 0.6;
}
@media (max-width: 640px) {
    .hero__feature-strip[b-izbiaehih5] { font-size: 12px; gap: 8px; }
}
/* _content/SpecStep.Web/Components/Marketing/Sections/HowItWorksSection.razor.rz.scp.css */
/* Section base — shared between How-It-Works, What-You-Get, Meet-
   the-Team, Tools. Lifted from the bundle's section.s rule. */
.s[b-rxpgbaxbai] {
    padding: 96px 0;
}
.s .head[b-rxpgbaxbai] {
    max-width: 720px;
    margin-bottom: 56px;
}
.s .head .eyebrow[b-rxpgbaxbai] { margin-bottom: 14px; display: block; }
.s .head h2[b-rxpgbaxbai] { margin: 0; }
/* PR-T34 (2026-05-13) — was an otto-accent underlined em. Reading
   as a hyperlink on prose phrases, see ExternalConnectorsSection
   for the full note. Default italic emphasis matches the Hero. */
.s .head h2 em[b-rxpgbaxbai] {
    color: inherit;
}
.s .head p.sub[b-rxpgbaxbai] {
    font-size: 19px;
    color: var(--muted-2);
    margin-top: 18px;
    max-width: 600px;
}

/* Orchestration timeline */
.orchestrate[b-rxpgbaxbai] { background: var(--paper); }

.timeline[b-rxpgbaxbai] {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
}
@media (max-width: 880px) {
    .timeline[b-rxpgbaxbai] { grid-template-columns: 1fr; gap: 24px; }
}

.timeline .legend[b-rxpgbaxbai] {
    position: sticky;
    top: 96px;
    align-self: start;
}
.timeline .legend .title[b-rxpgbaxbai] {
    font-family: var(--marketing-font-ui);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
    font-weight: 600;
}
.timeline .legend .agents[b-rxpgbaxbai] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.lg-agent[b-rxpgbaxbai] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--marketing-font-ui);
    font-size: 11px;
    color: var(--muted-2);
    padding: 6px 8px;
    border-radius: 8px;
    transition: background .2s;
}
.lg-agent.active[b-rxpgbaxbai] { background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.lg-agent img[b-rxpgbaxbai] { width: 24px; height: 24px; border-radius: 999px; display: block; background: var(--paper-2); }
.lg-agent .name[b-rxpgbaxbai] { font-weight: 600; color: var(--ink); }
/* Initiative I follow-up (2026-05-06) — opacity .4 rendered the
   .name text at #a1a19e on --paper, 2.41:1 — well below WCAG AA's
   4.5:1 for small text. Bumped to .65, which renders --ink (#1B1F2A)
   text at ~5:1 on the cream paper background. The visual "dimmed
   inactive agent" intent is preserved (still distinctly less
   prominent than the active agents at opacity 1) just less
   aggressively dim. */
.lg-agent.dim[b-rxpgbaxbai] { opacity: .65; }

.beats[b-rxpgbaxbai] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* 2026-05-14 — v1-launch Batch A H-A1. `.beat` is now a <button>
   so keyboard users can activate it natively. Button defaults
   would otherwise center the text, render a system font, and
   carry a UA border — explicit overrides below restore the prior
   visual treatment. Width: 100% restores the prior block-level
   <div>'s natural flow inside the .beats stack. `text-align: left`
   matches the prior left-aligned grid columns. */
.beat[b-rxpgbaxbai] {
    width: 100%;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 18px;
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 18px;
    color: inherit;
    font: inherit;
    text-align: left;
    position: relative;
    transition: transform .25s, border-color .25s, box-shadow .25s;
    cursor: pointer;
}
.beat:focus-visible[b-rxpgbaxbai] {
    outline: 2px solid var(--accent, var(--ink));
    outline-offset: 3px;
}
.beat.active[b-rxpgbaxbai] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}
.beat .av[b-rxpgbaxbai] {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--card);
    box-shadow: 0 0 0 1px var(--rule);
}
.beat .av img[b-rxpgbaxbai] { width: 100%; height: 100%; }
.beat .av .you-mark[b-rxpgbaxbai] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    color: var(--ink);
}
.beat .who[b-rxpgbaxbai] {
    font-family: var(--marketing-font-ui);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* PR follow-up to #122 — close the last axe-core contrast gap.
       Several per-agent accents (Iris #7DDFA7, Quill #E5C3A6, etc.)
       fail WCAG AA at 4.5:1 against the cream paper background when
       used as solid 11px text. Mix the accent ~40/60 with ink so
       the per-agent color cue survives but the text reads at
       contrast. Tested against axe-core baseline. */
    color: color-mix(in oklab, var(--accent) 40%, var(--ink) 60%);
    font-weight: 700;
    margin-bottom: 6px;
}
.beat .what[b-rxpgbaxbai] { font-size: 18px; line-height: 1.5; color: var(--ink); }
.beat[data-agent="otto"][b-rxpgbaxbai]     { --accent: var(--agent-otto); }
.beat[data-agent="stax"][b-rxpgbaxbai]     { --accent: var(--agent-stax); }
.beat[data-agent="alan"][b-rxpgbaxbai]     { --accent: var(--agent-alan); }
.beat[data-agent="lyra"][b-rxpgbaxbai]     { --accent: var(--agent-lyra); }
.beat[data-agent="hush"][b-rxpgbaxbai]     { --accent: var(--agent-hush); }
.beat[data-agent="argus"][b-rxpgbaxbai]    { --accent: var(--agent-argus); }
.beat[data-agent="vetta"][b-rxpgbaxbai]    { --accent: var(--agent-vetta); }
.beat[data-agent="vera"][b-rxpgbaxbai]     { --accent: var(--agent-vera); }
.beat[data-agent="iris"][b-rxpgbaxbai]     { --accent: var(--agent-iris); }
.beat[data-agent="sterling"][b-rxpgbaxbai] { --accent: var(--agent-sterling); }
.beat[data-agent="linus"][b-rxpgbaxbai]    { --accent: var(--agent-linus); }
.beat[data-agent="quill"][b-rxpgbaxbai]    { --accent: var(--agent-quill); }
.beat[data-agent="mercer"][b-rxpgbaxbai]   { --accent: var(--agent-mercer); }
.beat[data-agent="ada"][b-rxpgbaxbai]      { --accent: var(--agent-ada); }
/* PR-T34 (2026-05-07) — beats for the new specialists who joined
   the conversation thread (Marc, Trip, Codd, Atlas, Tally). Same
   pattern as the original 14; accent vars defined in tokens.css. */
.beat[data-agent="marc"][b-rxpgbaxbai]     { --accent: var(--agent-marc); }
.beat[data-agent="trip"][b-rxpgbaxbai]     { --accent: var(--agent-trip); }
.beat[data-agent="codd"][b-rxpgbaxbai]     { --accent: var(--agent-codd); }
.beat[data-agent="atlas"][b-rxpgbaxbai]    { --accent: var(--agent-atlas); }
.beat[data-agent="tally"][b-rxpgbaxbai]    { --accent: var(--agent-tally); }
.beat[data-agent="you"][b-rxpgbaxbai]      { --accent: var(--ink); }

.beat-controls[b-rxpgbaxbai] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    align-items: center;
}
.beat-controls .btn-sm[b-rxpgbaxbai] {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: var(--card);
    font-family: var(--marketing-font-ui);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: var(--ink);
}
.beat-controls .btn-sm:hover[b-rxpgbaxbai] { border-color: var(--ink); }
.beat-controls .progress[b-rxpgbaxbai] {
    flex: 1;
    height: 3px;
    background: var(--rule);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.beat-controls .progress[b-rxpgbaxbai]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--p, 0%);
    background: var(--otto-accent);
    transition: width .4s;
}

/* 2026-05-14 — v1-launch Batch A H-A6. Honor prefers-reduced-motion
   throughout the orchestration timeline. The transitions on
   `.beat` (transform + border-color + box-shadow) are kept but
   disabled here so the active-beat state flip is instant. The
   progress bar transition is similarly disabled. The JS
   IntersectionObserver auto-tick is gated against the same media
   query inside the inline <script> — the user still gets the
   timeline content, they just don't see it auto-play. */
@media (prefers-reduced-motion: reduce) {
    .beat[b-rxpgbaxbai],
    .beat-controls .progress[b-rxpgbaxbai]::after {
        transition: none !important;
    }
}
/* _content/SpecStep.Web/Components/Marketing/Sections/MeetTheTeamSection.razor.rz.scp.css */
/* Meet the team — 14-agent grid + per-agent <dialog> modal. */

.s[b-zrm9nlvgm9] { padding: 96px 0; }
.s .head[b-zrm9nlvgm9] { max-width: 720px; margin-bottom: 56px; }
.s .head .eyebrow[b-zrm9nlvgm9] { margin-bottom: 14px; display: block; }
.s .head h2[b-zrm9nlvgm9] { margin: 0; }
/* PR-T34 (2026-05-13) — was an otto-accent underlined em. Reading
   as a hyperlink on prose phrases, see ExternalConnectorsSection
   for the full note. Default italic emphasis matches the Hero. */
.s .head h2 em[b-zrm9nlvgm9] {
    color: inherit;
}
.s .head p.sub[b-zrm9nlvgm9] {
    font-size: 19px;
    color: var(--muted-2);
    margin-top: 18px;
    max-width: 600px;
}

.loading[b-zrm9nlvgm9], .loaderror[b-zrm9nlvgm9] {
    color: var(--muted);
    font-family: var(--marketing-font-ui);
    font-size: 14px;
}

.roster-grid[b-zrm9nlvgm9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.agent-card[b-zrm9nlvgm9] {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 18px;
    padding: 20px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 100%;
    font: inherit;
    color: inherit;
    display: block;
}
.agent-card:hover[b-zrm9nlvgm9] {
    transform: translateY(-3px);
    /* PR-T37 (2026-05-08) — neutral-black so the hover lift reads on dark backgrounds too. */
    box-shadow: 0 14px 28px rgba(0, 0, 0, .14);
    border-color: var(--accent);
}
.agent-card .pic[b-zrm9nlvgm9] {
    aspect-ratio: 1;
    background: var(--paper-2);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.agent-card .pic img[b-zrm9nlvgm9] { width: 100%; height: 100%; display: block; }
.agent-card .num[b-zrm9nlvgm9] {
    font-family: var(--marketing-font-ui);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--muted);
}
.agent-card h4[b-zrm9nlvgm9] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 2px 0 0;
}
.agent-card .role[b-zrm9nlvgm9] {
    font-family: var(--marketing-font-ui);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    /* PR-T2 follow-up (2026-05-06) — same axe-core fix as PR #131
       on .beat .who. The raw per-agent accents (Otto #7BD0E5, Lyra
       #F5A8C4, etc.) all fail WCAG AA at 4.5:1 against the cream
       --card background when used as 11px bold solid text. Mix
       40/60 with --ink so the per-agent color cue survives at
       contrast. */
    color: color-mix(in oklab, var(--accent) 40%, var(--ink) 60%);
    font-weight: 700;
    margin: 6px 0 10px;
}
.agent-card .bio[b-zrm9nlvgm9] {
    font-family: var(--marketing-font-ui);
    font-size: 13px;
    color: var(--muted-2);
    line-height: 1.5;
}

/* Per-agent accent map. The CSS variable cascade resolves
   --accent on the card from --agent-{slug} (defined in tokens.css). */
.agent-card[data-a="otto"][b-zrm9nlvgm9]     { --accent: var(--agent-otto); }
.agent-card[data-a="stax"][b-zrm9nlvgm9]     { --accent: var(--agent-stax); }
.agent-card[data-a="alan"][b-zrm9nlvgm9]     { --accent: var(--agent-alan); }
.agent-card[data-a="lyra"][b-zrm9nlvgm9]     { --accent: var(--agent-lyra); }
.agent-card[data-a="vetta"][b-zrm9nlvgm9]    { --accent: var(--agent-vetta); }
.agent-card[data-a="iris"][b-zrm9nlvgm9]     { --accent: var(--agent-iris); }
.agent-card[data-a="sterling"][b-zrm9nlvgm9] { --accent: var(--agent-sterling); }
.agent-card[data-a="linus"][b-zrm9nlvgm9]    { --accent: var(--agent-linus); }
.agent-card[data-a="vera"][b-zrm9nlvgm9]     { --accent: var(--agent-vera); }
.agent-card[data-a="quill"][b-zrm9nlvgm9]    { --accent: var(--agent-quill); }
.agent-card[data-a="hush"][b-zrm9nlvgm9]     { --accent: var(--agent-hush); }
.agent-card[data-a="mercer"][b-zrm9nlvgm9]   { --accent: var(--agent-mercer); }
.agent-card[data-a="ada"][b-zrm9nlvgm9]      { --accent: var(--agent-ada); }
.agent-card[data-a="argus"][b-zrm9nlvgm9]    { --accent: var(--agent-argus); }

/* Dialog modal — native <dialog> element. Browser handles focus +
   Escape; we style the backdrop via ::backdrop. */
.agent-modal[b-zrm9nlvgm9] {
    border: 1px solid var(--rule);
    border-radius: 22px;
    padding: 0;
    background: var(--card);
    color: var(--ink);
    /* 2026-05-15 — bumped 720→880 so the 320×400-viewBox intro
       animation has room to breathe in the pic column without the
       SVG's antenna/shadow getting cropped. */
    max-width: 880px;
    width: calc(100vw - 64px);
    max-height: calc(100vh - 64px);
    overflow: hidden;
}
.agent-modal[b-zrm9nlvgm9]::backdrop {
    background: color-mix(in oklab, var(--ink) 65%, transparent);
    backdrop-filter: blur(2px);
}
.agent-modal__close[b-zrm9nlvgm9] {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    color: var(--muted);
    padding: 4px 10px;
}
.agent-modal__close:hover[b-zrm9nlvgm9] { color: var(--ink); }

.agent-modal__body[b-zrm9nlvgm9] {
    display: grid;
    /* 2026-05-15 — pic column 200→320→340 so the intro.html stage
       (280×360) + meta + bubble fit without scaling down awkwardly.
       340 matches the /agents/{slug} hero-art iframe size with a
       little extra room for the bubble's wrap-enabled content. */
    grid-template-columns: 340px 1fr;
    gap: 32px;
    padding: 32px;
}
@media (max-width: 640px) {
    .agent-modal__body[b-zrm9nlvgm9] { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
}
.agent-modal__pic[b-zrm9nlvgm9] {
    /* 2026-05-15 — explicit min-height so the 320×400 viewBox of
       intro.html renders at full size (matches /agents/{slug}). The
       prior 0.8 aspect-ratio at 200px wide gave a 200×250 frame that
       cropped the SVG's antenna + shadow. 460 (was 400) accommodates
       the .stage (360) + .meta (~50) + antenna headroom from the
       intro.html .wrap padding without overflow-clipping the top. */
    aspect-ratio: 0.8;
    min-height: 460px;
    background: var(--paper-2);
    border-radius: 12px;
    overflow: hidden;
    /* `position: relative` to anchor the absolutely-positioned
       fallback PNG underlay (.agent-modal__pic-fallback) so it
       stacks directly under the animated-intro iframe. The PNG
       renders immediately on dialog open; the iframe layers on top
       once its intro.html finishes loading. */
    position: relative;
}
.agent-modal__pic img[b-zrm9nlvgm9] { width: 100%; height: 100%; }
/* 2026-05-15 — Static full-body PNG fallback. Renders behind the
   animated-intro iframe at the same dimensions; the iframe's
   transparent background lets the agent's reveal play on top while
   the PNG remains visible during the iframe's load + as a graceful
   fallback if the iframe fails entirely. No JS state tracking. */
.agent-modal__pic-fallback[b-zrm9nlvgm9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
/* Animated-intro iframe — fills the pic frame, no border, transparent,
   layered above the fallback underlay. */
.agent-modal__pic iframe[b-zrm9nlvgm9] {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    display: block;
}

.agent-modal__meta .num[b-zrm9nlvgm9] {
    font-family: var(--marketing-font-ui);
    font-size: 10px;
    letter-spacing: .2em;
    color: var(--muted);
}
.agent-modal__meta h3[b-zrm9nlvgm9] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    letter-spacing: -0.01em;
    margin: 4px 0 6px;
    color: var(--ink);
}
.agent-modal__meta .role[b-zrm9nlvgm9] {
    font-family: var(--marketing-font-ui);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-2);
    font-weight: 700;
    margin-bottom: 16px;
}
.agent-modal__meta .bio[b-zrm9nlvgm9],
.agent-modal__meta .joins[b-zrm9nlvgm9] {
    font-family: var(--marketing-font-ui);
    font-size: 14px;
    color: var(--muted-2);
    line-height: 1.55;
    margin: 0 0 12px;
}
.agent-modal__meta .joins strong[b-zrm9nlvgm9] { color: var(--ink); }
.accent-row[b-zrm9nlvgm9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    font-family: var(--marketing-font-ui);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}
.accent-swatch[b-zrm9nlvgm9] {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid var(--rule);
}
/* _content/SpecStep.Web/Components/Marketing/Sections/PitchSection.razor.rz.scp.css */
.pitch[b-jmg9vv2n4n] {
    background: var(--paper-2);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}
.pitch .row[b-jmg9vv2n4n] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 24px 0;
}
@media (max-width: 780px) {
    .pitch .row[b-jmg9vv2n4n] { grid-template-columns: 1fr; }
}
.pitch .step[b-jmg9vv2n4n] {
    padding: 32px;
    border-right: 1px solid var(--rule);
    position: relative;
}
.pitch .step:last-child[b-jmg9vv2n4n] { border-right: none; }
@media (max-width: 780px) {
    .pitch .step[b-jmg9vv2n4n] { border-right: none; border-bottom: 1px solid var(--rule); }
    .pitch .step:last-child[b-jmg9vv2n4n] { border-bottom: none; }
}
.pitch .num[b-jmg9vv2n4n] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 48px;
    line-height: 1;
    /* Initiative I follow-up (2026-05-06) — was var(--otto-accent)
       which is 1.51:1 on --paper-2. Switched to --otto-accent-on-light
       (~4.8:1) so axe-core's 3:1 large-text gate passes. */
    color: var(--otto-accent-on-light);
    margin-bottom: 12px;
}
.pitch .step h3[b-jmg9vv2n4n] { margin-bottom: 8px; }
.pitch .step p[b-jmg9vv2n4n] { color: var(--muted-2); font-size: 15px; }
/* _content/SpecStep.Web/Components/Marketing/Sections/ToolsSection.razor.rz.scp.css */
/* ToolsSection — PR-MCP1 (2026-05-13) reframed as the MCP-native
   deep-dive. Section base (.s/.s .head/.s .head h2 em) duplicated
   from WhatYouGetSection.razor.css per the established per-section
   CSS isolation pattern (Blazor scopes class names per component,
   so each section file declares its own .s base). */

.s[b-x7a4nnqre7] { padding: 96px 0; }
.s .head[b-x7a4nnqre7] { max-width: 720px; margin-bottom: 48px; }
.s .head .eyebrow[b-x7a4nnqre7] {
    margin-bottom: 14px;
    display: block;
    /* PR-MCP1 follow-up (2026-05-13) — override the global
       .sf-marketing .eyebrow color from var(--muted) to
       var(--muted-2). On this section's --paper-2 background,
       --muted (#6b7280 light) reads ~4.4:1 against #f3f4f6 —
       under WCAG AA's 4.5:1 small-text gate. axe-core caught it on
       / (LiveAccessibilityE2ETests.Landing_AxeCore_NoNewViolationsBeyondBaseline).
       --muted-2 (#5b5d63 light) clears at ~5.4:1. */
    color: var(--muted-2);
}
.s .head h2[b-x7a4nnqre7] { margin: 0; }
/* PR-T34 (2026-05-13) — was an otto-accent underlined em. Reading
   as a hyperlink on prose phrases, see ExternalConnectorsSection
   for the full note. Default italic emphasis matches the Hero. */
.s .head h2 em[b-x7a4nnqre7] {
    color: inherit;
}
.s .head p.sub[b-x7a4nnqre7] {
    font-size: 19px;
    color: var(--muted-2);
    margin-top: 18px;
    max-width: 600px;
}

/* Section background — keeps the prior Tools section's contrasting
   paper-2 wash so slot 7 still reads as a visual break from the
   surrounding sections. */
.tools[b-x7a4nnqre7] {
    background: var(--paper-2);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

/* Pillar cards — same visual idiom as WhatYouGetSection's
   .pkg-cards: bordered, rounded, Helvetica body + Georgia heading.
   3-up on desktop, 1-up on mobile (matches the .package
   responsive break at 880px). */
.mcp-pillars[b-x7a4nnqre7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}
@media (max-width: 880px) {
    .mcp-pillars[b-x7a4nnqre7] { grid-template-columns: 1fr; }
}
.mcp-pillar[b-x7a4nnqre7] {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 22px;
    font-family: var(--marketing-font-ui);
    font-size: 14px;
    color: var(--muted-2);
    display: flex;
    flex-direction: column;
}
.mcp-pillar h3[b-x7a4nnqre7] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.mcp-pillar p[b-x7a4nnqre7] {
    margin: 0 0 16px;
    line-height: 1.55;
}
.mcp-pillar code.sf-mono[b-x7a4nnqre7] {
    font-family: var(--marketing-font-mono);
    font-size: 12.5px;
    background: var(--paper-2);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--ink);
}
.mcp-pillar__link[b-x7a4nnqre7] {
    margin-top: auto;
    font-weight: 600;
    color: var(--otto-accent-on-light);
    text-decoration: none;
}
.mcp-pillar__link:hover[b-x7a4nnqre7] { text-decoration: underline; }

/* Footer chip row — the existing 4 AI-coder chips, reframed under
   a "Picked up natively by:" label so they read as evidence rather
   than the whole point. The chip row's grid + cell styles stay the
   same as the prior PR-L2 markup so the visual rhythm is preserved. */
.tools-row[b-x7a4nnqre7] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tools-row__label[b-x7a4nnqre7] {
    font-family: var(--marketing-font-ui);
    font-size: 12px;
    color: var(--muted-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.tools .row[b-x7a4nnqre7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
}
@media (max-width: 780px) {
    .tools .row[b-x7a4nnqre7] { grid-template-columns: repeat(2, 1fr); }
}
.tools .cell[b-x7a4nnqre7] {
    padding: 28px 20px;
    border-right: 1px solid var(--rule);
    text-align: center;
    font-family: var(--marketing-font-ui);
    font-size: 14px;
    color: var(--ink);
}
.tools .cell:last-child[b-x7a4nnqre7] { border-right: none; }
@media (max-width: 780px) {
    .tools .cell:nth-child(2)[b-x7a4nnqre7] { border-right: none; }
    .tools .cell:nth-child(-n+2)[b-x7a4nnqre7] { border-bottom: 1px solid var(--rule); }
}
.tools .cell .lg[b-x7a4nnqre7] {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.tools .cell .sub[b-x7a4nnqre7] {
    font-size: 12px;
    color: color-mix(in oklab, var(--muted) 70%, var(--ink) 30%);
}
/* _content/SpecStep.Web/Components/Marketing/Sections/WhatYouGetSection.razor.rz.scp.css */
/* What you get — file tree + package cards. Section base
   (.s/.s .head) duplicated from HowItWorksSection.razor.css
   because Blazor CSS isolation scopes per component. */
.s[b-pxs0zu8ipm] { padding: 96px 0; }
.s .head[b-pxs0zu8ipm] { max-width: 720px; margin-bottom: 56px; }
.s .head .eyebrow[b-pxs0zu8ipm] { margin-bottom: 14px; display: block; }
.s .head h2[b-pxs0zu8ipm] { margin: 0; }
/* PR-T34 (2026-05-13) — was an otto-accent underlined em. Reading
   as a hyperlink on prose phrases, see ExternalConnectorsSection
   for the full note. Default italic emphasis matches the Hero. */
.s .head h2 em[b-pxs0zu8ipm] {
    color: inherit;
}
.s .head p.sub[b-pxs0zu8ipm] {
    font-size: 19px;
    color: var(--muted-2);
    margin-top: 18px;
    max-width: 600px;
}

.package[b-pxs0zu8ipm] {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
    align-items: start;
}
@media (max-width: 880px) {
    .package[b-pxs0zu8ipm] { grid-template-columns: 1fr; }
}
.filetree[b-pxs0zu8ipm] {
    /* PR-T37 (2026-05-08) — pinned to a stable dark slate (was
       var(--ink) which inverted in dark mode after the marketing
       palette converged with the app tokens). The filetree is a
       "code block" affordance and reads best as a dark surface
       regardless of theme — same intent as the CTA section. */
    background: #1B1F2A;
    color: #F0EAD6;
    border-radius: 18px;
    padding: 28px;
    font-family: var(--marketing-font-mono);
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    overflow-x: auto;
}
/* PR-T2 follow-up (2026-05-06) — #7A8294 on the filetree's dark
   --paper-3 background renders at 4.26:1 for 13px text, just
   under WCAG AA. Lifted to a slightly lighter slate that holds the
   "dim comment" character (still distinctly muted vs .acc / .file)
   while reaching ~5:1. */
.filetree .dim[b-pxs0zu8ipm] { color: #969FB3; }
.filetree .acc[b-pxs0zu8ipm] { color: var(--otto-accent); }
.filetree .file[b-pxs0zu8ipm] { color: #D8D5C5; }
.filetree .new[b-pxs0zu8ipm] { color: var(--agent-lyra); }

.pkg-cards[b-pxs0zu8ipm] { display: flex; flex-direction: column; gap: 16px; }
.pkg-card[b-pxs0zu8ipm] {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 20px;
    font-family: var(--marketing-font-ui);
    font-size: 14px;
    color: var(--muted-2);
}
.pkg-card h4[b-pxs0zu8ipm] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    color: var(--ink);
    margin: 0 0 8px;
}
.pkg-card .agent-chip[b-pxs0zu8ipm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: var(--paper-2);
    border-radius: 999px;
    font-size: 11px;
    color: var(--ink);
    font-weight: 600;
    margin-top: 10px;
}
.pkg-card .agent-chip img[b-pxs0zu8ipm] { width: 18px; height: 18px; border-radius: 999px; }
/* _content/SpecStep.Web/Components/Pages/Brand.razor.rz.scp.css */
/* Brand page — public asset + license surface at /brand.
   2026-05-16. Co-located CSS for the brand-specific blocks only:
   downloads grid, color swatches, logo light/dark pair, Powered-by
   live preview, snippet pre. Everything else inherits .sf-prose-page +
   .sf-prose + .sf-apidocs__layout from app.css so the page reads
   structurally identical to /about + /faq + /release-notes. */

.sf-brand__lede[b-80lqrak0xr] {
    /* 2026-05-16 — design-reviewer L4: was bare 18px, off-token.
       --text-16 + 1.55 line-height matches the .sf-prose body
       register and the lede's accent border still gives it visual
       weight without overpowering. */
    font-size: var(--text-16, 16px);
    line-height: 1.55;
    color: var(--fg-muted, #5b5d63);
    border-left: 3px solid var(--accent-700, #117b50);
    padding-left: 14px;
    margin: 0 0 32px;
}
.sf-brand__lede strong[b-80lqrak0xr] {
    color: var(--fg, #1b1b1f);
}

/* ── Quick downloads — 4-tile grid ──────────────────────────────── */
.sf-brand__downloads[b-80lqrak0xr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin: 16px 0 40px;
}
.sf-brand__download[b-80lqrak0xr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--fg, #1b1b1f);
    transition: border-color 120ms, transform 120ms, background 120ms;
}
.sf-brand__download:hover[b-80lqrak0xr] {
    border-color: var(--accent-700, #117b50);
    background: var(--bg-sunken, #f3f4f6);
    transform: translateY(-1px);
}
.sf-brand__download-art[b-80lqrak0xr] {
    /* 2026-05-16 — design-reviewer H1: was 72×72 plain. Bumped to
       96px tall with --bg-sunken tint so wide lockup SVGs render at
       a readable size without the square mark dominating by
       comparison, and the bounding-box tint defends mark-reversed
       (paper on dark) if it ever lands in this row.
       The Brand.razor template now omits explicit height= on the
       child <img>s so this slot drives sizing via max-width +
       max-height + object-fit. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96px;
    background: var(--bg-sunken, #f3f4f6);
    border-radius: 8px;
    margin-bottom: 4px;
    padding: 12px 8px;
    box-sizing: border-box;
}
.sf-brand__download-art img[b-80lqrak0xr] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.sf-brand__download-name[b-80lqrak0xr] {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg, #1b1b1f);
}
.sf-brand__download-meta[b-80lqrak0xr] {
    font-size: 12px;
    color: var(--fg-muted, #5b5d63);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ── Logo light/dark pair ───────────────────────────────────────── */
/* 2026-05-16 — design-reviewer H2: split figure into an explicit
   display zone (160px min-height, flex-centered) + a caption strip
   (ruled top border, neutral background) so the figcaption text
   doesn't sit on top of the colored figure background and the
   display zone has guaranteed breathing room under 150% browser
   zoom. */
.sf-brand__logo-pair[b-80lqrak0xr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 16px 0 24px;
}
.sf-brand__logo-figure[b-80lqrak0xr] {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin: 0;
}
.sf-brand__logo-figure__display[b-80lqrak0xr] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    padding: 24px;
}
.sf-brand__logo-figure__display img[b-80lqrak0xr] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.sf-brand__logo-figure figcaption[b-80lqrak0xr] {
    font-size: 13px;
    color: var(--fg-muted, #5b5d63);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    text-align: center;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated, #fff);
}
.sf-brand__logo-figure--light .sf-brand__logo-figure__display[b-80lqrak0xr] {
    background: #FAFAF7;
}
.sf-brand__logo-figure--dark .sf-brand__logo-figure__display[b-80lqrak0xr] {
    background: #0F1115;
}

/* ── File list — denser than .sf-prose default ─────────────────── */
.sf-brand__file-list[b-80lqrak0xr] {
    list-style: none;
    padding: 0;
    margin: 12px 0 32px;
}
.sf-brand__file-list li[b-80lqrak0xr] {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    line-height: 1.6;
}
.sf-brand__file-list li:last-child[b-80lqrak0xr] {
    border-bottom: none;
}
.sf-brand__file-list code[b-80lqrak0xr] {
    background: var(--bg-sunken, #f3f4f6);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
}

/* ── Color swatch grid ──────────────────────────────────────────── */
.sf-brand__swatch-grid[b-80lqrak0xr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0 32px;
}
.sf-brand__swatch[b-80lqrak0xr] {
    display: grid;
    /* 2026-05-16 — design-reviewer C2: was `auto auto` with chip
       grid-row: 1/3 + meta: grid-row: 3 — meta floated into an
       implicit 3rd row outside the chip's span, leaving the chip
       top-aligned against three text lines. Now `auto auto auto`
       with chip span 1/4 so the chip vertically centers against
       all three text rows. */
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 12px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.sf-brand__swatch-chip[b-80lqrak0xr] {
    grid-row: 1 / 4;
    width: 48px;
    height: 48px;
    border-radius: 8px;
}
.sf-brand__swatch-chip--bordered[b-80lqrak0xr] {
    box-shadow: inset 0 0 0 1px var(--border);
}
.sf-brand__swatch-name[b-80lqrak0xr] {
    grid-column: 2;
    font-size: 14px;
    font-weight: 600;
    color: var(--fg, #1b1b1f);
    line-height: 1.2;
}
.sf-brand__swatch-hex[b-80lqrak0xr] {
    grid-column: 2;
    font-size: 13px;
    line-height: 1.2;
}
.sf-brand__swatch-hex code[b-80lqrak0xr] {
    background: transparent;
    padding: 0;
    color: var(--fg, #1b1b1f);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.sf-brand__swatch-meta[b-80lqrak0xr] {
    grid-column: 2;
    grid-row: 3;
    font-size: 12px;
    color: var(--fg-muted, #5b5d63);
    margin-top: 2px;
}

/* ── Powered-by live preview + snippet ─────────────────────────── */
.sf-brand__badge-preview[b-80lqrak0xr] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin: 16px 0 0;
}
.sf-brand__badge-preview--light[b-80lqrak0xr] {
    background: #FAFAF7;
}
.sf-brand__badge-preview--dark[b-80lqrak0xr] {
    background: #0F1115;
}
.sf-brand__badge-preview-label[b-80lqrak0xr] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted, #5b5d63);
    font-weight: 600;
}
.sf-brand__badge-preview--dark .sf-brand__badge-preview-label[b-80lqrak0xr] {
    color: #a8a8a8;
}
.sf-brand__snippet[b-80lqrak0xr] {
    /* 2026-05-16 — design-reviewer L5: was light-mode-only fallback
       on --bg-sunken / --fg. The tokens resolve correctly under both
       themes today; fallbacks are defensive only and intentionally
       biased to the light mode that matches the marketing layout
       (where these snippets are most often viewed). */
    background: var(--bg-sunken, #f3f4f6);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 8px 0 24px;
    overflow-x: auto;
    font-size: 12.5px;
    line-height: 1.55;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--fg, #1b1b1f);
}
.sf-brand__snippet code[b-80lqrak0xr] {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* ── Responsive — single column at narrow viewports ────────────── */
@media (max-width: 640px) {
    .sf-brand__downloads[b-80lqrak0xr] { grid-template-columns: 1fr 1fr; }
    .sf-brand__badge-preview[b-80lqrak0xr] { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* _content/SpecStep.Web/Components/Pages/Interview.razor.rz.scp.css */
/* Project association row — sits below the main sf-conversation__meta
   strip, still inside the header, using the same font scale and gap
   rhythm as the meta strip above it. */
.sf-conversation__project-row[b-i0xbhpeszk] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8, 8px);
    font-size: var(--text-13);
    padding-top: var(--space-6, 6px);
}

/* Inline select inherits sf-input + sf-input--inline sizing. A small
   max-width cap keeps long project names from blowing out the header. */
.sf-conversation__project-select[b-i0xbhpeszk] {
    max-width: 220px;
    cursor: pointer;
}

.sf-conversation__project-select:disabled[b-i0xbhpeszk] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Project-name button — quiet link-style tap target so it reads as
   "clickable for details" without competing with the status pill. */
.sf-conversation__project-link[b-i0xbhpeszk] {
    padding: 2px 6px;
    font-size: var(--text-13);
    color: var(--accent-500, #2563eb);
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sf-conversation__project-link:hover[b-i0xbhpeszk] {
    background: var(--bg-sunken);
    color: var(--accent-600, #1d4ed8);
}

/* Inline error message below / beside the row controls. */
.sf-conversation__project-error[b-i0xbhpeszk] {
    color: var(--danger-fg, #dc2626);
}

/* Project summary modal — narrower than the mockup lightbox, wider
   than the api-key reveal. The backdrop + .sf-modal card shape comes
   from the existing global rule (.sf-modal-backdrop > .sf-modal). */
.sf-modal--project-summary[b-i0xbhpeszk] {
    max-width: 420px;
}

.sf-conversation__project-modal-desc[b-i0xbhpeszk] {
    margin: 0 0 var(--space-12, 12px);
    color: var(--fg);
    font-size: var(--text-14, 14px);
    line-height: 1.5;
}
/* _content/SpecStep.Web/Components/Settings/AiAgentsPanel.razor.rz.scp.css */
/* Scoped styles for AiAgentsPanel — 2026-05-26 redesign.
   All new classes are prefixed agent-drawer* or agent-drawer-section*.
   No app.css edits required. Token-based; no hardcoded color values. */

/* ---- Actions column: shrink-to-fit the row's icon buttons (2026-06-01) ----
   Was capped at 220–260px for three TEXT buttons (Enable/Disable, Public ↗,
   Edit), which overflowed the cap and clipped the rightmost button off the
   right edge — the owner couldn't reach it. The actions are now compact
   Lucide-SVG icon buttons (~28px each), so size the column to its content and
   keep the icons on one line. */
.col-actions[b-ym6yprmbld] {
    width: 1%;
    white-space: nowrap;
}

/* The icon group lives in a DIV inside a NORMAL <td> (not a flex <td>): a
   `display:flex` <td> shrinks to its content height, so its border-bottom
   floated mid-row (the stray line the owner spotted) and the icons sat
   top-aligned instead of centered. With the flex on this inner div, the <td>
   keeps full row height + vertical-align:middle, so the icons line up with the
   Status pill. Left-aligned under the "Actions" header. */
.agent-actions[b-ym6yprmbld] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
}

/* Enable/Disable confirm — rendered as a colspan row below the agent row
   (the bespoke admin-table confirm pattern, à la WebhooksPanel / ApiKeysPanel),
   because the question + Confirm/Cancel never fit inside the actions cell.
   Tuck it up under its row. */
.agent-confirm-row > td[b-ym6yprmbld] {
    padding-top: 0;
}

/* ---- Preview badge + character name inline ---- */
.agent-name-line[b-ym6yprmbld] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: nowrap;
}

/* ---- sf-tier-chip--preview (amber; new variant) ----
   No matching rule in app.css as of 2026-05-26. Added here,
   scoped to this component. Uses --warning-bg / --warning-fg
   which exist in both light and dark themes. */
.sf-tier-chip--preview[b-ym6yprmbld] {
    background: var(--warning-bg);
    color: var(--warning-fg);
}

/* ---- sf-inline-confirm alignment ---- */
.sf-inline-confirm[b-ym6yprmbld] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    white-space: nowrap;
}

/* ================================================================
   Agent edit drawer — slide-in from right.
   Mirrors the sf-detail-sheet pattern from app.css but scoped here
   so the admin panel does not depend on the generation-level sheet.
   Width: 480px (narrower than sf-detail-sheet's 560px) to keep the
   table visible on ≥1024px viewports.
   ================================================================ */

.agent-drawer-overlay[b-ym6yprmbld] {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 21, 0.32);
    z-index: 90;
    border: none;
    cursor: default;
    /* Animate in */
    animation: agent-drawer-fade-b-ym6yprmbld var(--motion-duration-fast) var(--motion-easing-out) both;
}

.agent-drawer[b-ym6yprmbld] {
    position: fixed;
    top: 68px; /* matches .sf-topbar height */
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-pop);
    z-index: 91;
    display: flex;
    flex-direction: column;
    animation: agent-drawer-slide-b-ym6yprmbld var(--motion-duration-base) var(--motion-easing-emphatic) both;
}

@keyframes agent-drawer-fade-b-ym6yprmbld {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes agent-drawer-slide-b-ym6yprmbld {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Header */
.agent-drawer__header[b-ym6yprmbld] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-20) var(--space-24);
    border-bottom: 1px solid var(--border);
    flex: none;
}

.agent-drawer__identity[b-ym6yprmbld] {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    flex: 1;
    min-width: 0;
}

.agent-drawer__avatar[b-ym6yprmbld] {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-8);
    flex: 0 0 auto;
    object-fit: cover;
}

.agent-drawer__names[b-ym6yprmbld] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.agent-drawer__character[b-ym6yprmbld] {
    font-weight: var(--weight-semibold);
    font-size: var(--text-16);
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-drawer__role[b-ym6yprmbld] {
    color: var(--fg-muted);
    font-size: var(--text-13);
}

.agent-drawer__close[b-ym6yprmbld] {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-6);
    color: var(--fg-muted);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agent-drawer__close:hover[b-ym6yprmbld] {
    background: var(--bg-sunken);
    color: var(--fg);
}

.agent-drawer__close:focus-visible[b-ym6yprmbld] {
    outline: 2px solid var(--accent-500);
    outline-offset: 2px;
}

/* Scrollable body */
.agent-drawer__body[b-ym6yprmbld] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-24);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Sections within the drawer body */
.agent-drawer-section[b-ym6yprmbld] {
    padding-bottom: var(--space-24);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-24);
}

.agent-drawer-section:last-child[b-ym6yprmbld] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.agent-drawer-section__title[b-ym6yprmbld] {
    font-size: var(--text-13);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-subtle);
    margin: 0 0 var(--space-16);
}

/* Drawer footer — single Save + Cancel */
.agent-drawer__footer[b-ym6yprmbld] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    padding: var(--space-16) var(--space-24);
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
}

/* Mobile: full-width drawer, no overlay */
@media (max-width: 768px) {
    .agent-drawer[b-ym6yprmbld] {
        width: 100vw;
        top: 0;
    }
    .agent-drawer-overlay[b-ym6yprmbld] {
        display: none;
    }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .agent-drawer-overlay[b-ym6yprmbld],
    .agent-drawer[b-ym6yprmbld] {
        animation: none;
    }
}
/* _content/SpecStep.Web/Components/Shared/AgentConversationFeed.razor.rz.scp.css */
/* PR-M2 (2026-05-06) — agent conversation feed.

   Builds on the global .sf-turn / .sf-turn--agent / .sf-turn__bubble
   primitives in app.css (originally for Interview.razor's chat).
   This file owns the FEED-specific overlays:
     - per-agent left accent rule via --bubble-accent (set inline)
     - status variants (failed dim, retried)
     - per-turn stats row under the bubble body
     - compact variant for the workspace in-flight row treatment
*/

.sf-gd-feed[b-1te14x5djb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12, 12px);
}

.sf-gd-feed__skeleton[b-1te14x5djb],
.sf-gd-feed__empty[b-1te14x5djb] {
    color: var(--fg-subtle);
    font-size: var(--text-13, 13px);
    padding: var(--space-12, 12px) 0;
    text-align: center;
}

.sf-gd-feed-error[b-1te14x5djb] {
    color: var(--danger-fg, #c0392b);
    font-size: var(--text-13, 13px);
    padding: var(--space-12, 12px);
    border: 1px solid var(--danger-border, color-mix(in srgb, currentColor 30%, transparent));
    border-radius: var(--radius-8, 8px);
    background: var(--danger-bg, color-mix(in srgb, currentColor 5%, transparent));
}

/* TASK-185 hotfix (2026-05-09) — the rules below targeting the
   bubble's Builder-rendered inner DOM (.sf-gd-feed__bubble,
   .sf-gd-feed__role, .sf-gd-feed__body, .sf-gd-feed__narration,
   .sf-gd-feed__stats, .sf-gd-feed__stat*, .sf-gd-feed__item--failed)
   were promoted to global app.css. Blazor scoped CSS attributes
   ([b-xxx]) only apply to elements declared in Razor markup syntax;
   RenderBubble uses RenderTreeBuilder so those elements never carried
   the scope attribute and the scoped selectors silently no-op'd. The
   only rules that should live in this scoped file are those targeting
   the Razor-template wrappers (sf-gd-feed root <ol>, the skeleton/empty
   <li>, the now-playing card stack, the expander button) — those ARE
   declared in markup and DO get the scope attribute. */

/* Paused state — the wrapper dims and disables pointer events.
   aria-hidden is set in the Razor; the feed is historical context,
   not actionable, while the user resolves the clarification. */
.sf-gd-feed--paused[b-1te14x5djb] {
    opacity: 0.45;
    pointer-events: none;
}

/* ── Compact variant — workspace in-flight row ──
   Single-line inline entries, no headshots, no narration, no stats
   row. Just "AgentName · action verb" per item. */
.sf-gd-feed--compact[b-1te14x5djb] {
    gap: var(--space-4, 4px);
}
.sf-gd-feed--compact .sf-gd-feed__item[b-1te14x5djb] {
    /* Override .sf-turn's flex layout — compact mode is a single
       line per entry, no avatar block. */
    display: block;
}
.sf-gd-feed--compact .sf-gd-feed__bubble[b-1te14x5djb] {
    background: transparent;
    border: 0;
    border-left: 2px solid var(--bubble-accent, var(--border));
    border-radius: 0;
    padding: var(--space-4, 4px) var(--space-8, 8px);
    max-width: 100%;
}
.sf-gd-feed--compact .sf-turn__meta[b-1te14x5djb] {
    margin-bottom: 0;
    gap: var(--space-4, 4px);
}
.sf-gd-feed--compact .sf-gd-feed__role[b-1te14x5djb],
.sf-gd-feed--compact .sf-turn__time[b-1te14x5djb] {
    /* Tighten the meta line on a single-line compact row. */
    font-size: var(--text-11, 11px);
}
/* sf-gd-feed--compact .sf-gd-feed__body — promoted to global app.css
   per the TASK-185 hotfix note above (Builder-rendered element). */

/* TASK-176 diffstat rules (.sf-diffstat, .sf-diffstat__added,
   .sf-diffstat__removed, the right-align contexts, and the compact-mode
   density override) all promoted to global app.css per the TASK-185
   hotfix note at the top of this file — RenderDiffStat is Builder-API,
   so scoped CSS attributes never reached the chip. Tokens used (no new
   tokens added — verified by the design review at
   docs/design/reviews/2026-05-08-conversation-diff-stats/):
     --success-bg / --success-fg (added — green) — WCAG AA both themes
     --danger-bg / --danger-fg (removed — red) — WCAG AA both themes
     --font-mono, --text-12, --space-4, --radius-pill */

/* ────────────────────────────────────────────────────────────
   TASK-177 (2026-05-08) — "now-playing" stack.

   Replaces the ever-growing flat list with a one-card-prominent
   view: active card on top + (full mode) one prev card peek behind
   it slightly stacked + dimmed. New SignalR pushes trigger a
   CSS drop-in animation via the .sf-now-playing__card--enter
   modifier which the Razor side flips on for one render cycle.

   Mock + design critique at:
     docs/design/reviews/2026-05-08-conversation-now-playing/

   No new design tokens — every value pulls from tokens.css
   (--motion-duration-*, --motion-easing-*, --space-*, --border,
   --bg-elevated, --fg-*, --accent-500).
   ──────────────────────────────────────────────────────────── */

.sf-now-playing[b-1te14x5djb] {
    position: relative;
}

.sf-now-playing__stack[b-1te14x5djb] {
    position: relative;
    perspective: 600px;
    /* Reserve room for the peek card (translateY(8px) + scale shift)
       so the expander button below doesn't overlap. */
    padding-bottom: 16px;
}

.sf-now-playing__card[b-1te14x5djb] {
    position: relative;
    transform-origin: top center;
    transition:
        transform var(--motion-duration-base) var(--motion-easing-out),
        opacity var(--motion-duration-base) var(--motion-easing-out);
    will-change: transform, opacity;
}

.sf-now-playing__card--active[b-1te14x5djb] {
    z-index: 3;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Peek card. Absolutely positioned so it sits BEHIND the active
   card at the same anchor; max-height clips so only the top edge
   is visible — enough to imply context, not enough to compete.
   2026-05-12 — peek leans lower-LEFT (was lower-right via centered
   shrink). Negative translateX shifts it left so the active card's
   right edge stays clean. Auto-fades after 1.5s so the screen
   doesn't keep accumulating "stacked" cards while the user reads
   the active one — when a new push arrives, @key on the prev1 div
   restarts the keyframe with the new prev card. */
.sf-now-playing__card--prev1[b-1te14x5djb] {
    z-index: 2;
    position: absolute;
    top: 0; left: 0; right: 0;
    transform: translate(-8px, 8px) scale(0.97);
    pointer-events: none;
    overflow: hidden;
    max-height: 52px;
    animation: sf-now-playing-prev-autofade-b-1te14x5djb var(--motion-duration-slow) var(--motion-easing-out) 1500ms forwards;
}

@keyframes sf-now-playing-prev-autofade-b-1te14x5djb {
    from { opacity: 0.5; }
    to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    /* Skip the fade; just sit at the dim peek opacity so the
       reduced-motion user still sees the contextual card. */
    .sf-now-playing__card--prev1[b-1te14x5djb] {
        animation: none;
        opacity: 0.5;
    }
}

/* Drop-in keyframe: new card arrives from above, fades + scales
   into place. Duration matches --motion-duration-slow so it's
   noticeable without feeling like a load. */
@keyframes sf-now-playing-card-drop-in-b-1te14x5djb {
    from { opacity: 0; transform: translateY(-24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sf-now-playing__card--enter[b-1te14x5djb] {
    animation: sf-now-playing-card-drop-in-b-1te14x5djb var(--motion-duration-slow) var(--motion-easing-emphatic) both;
}

@media (prefers-reduced-motion: reduce) {
    .sf-now-playing__card[b-1te14x5djb] { transition: none; }
    .sf-now-playing__card--enter[b-1te14x5djb] { animation: none; }
}

/* Active card gets a subtle shadow lift over the peek card. */
.sf-now-playing__card--active .sf-turn__bubble[b-1te14x5djb] {
    box-shadow: var(--shadow-2);
}

/* ── Expander (View all N actions) ──────────────────────── */
.sf-now-playing__expander[b-1te14x5djb] {
    margin-top: var(--space-12);
}

.sf-now-playing__expander-btn[b-1te14x5djb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fg-subtle);
    font-size: var(--text-12);
    font-family: inherit;
    font-weight: var(--weight-medium);
    padding: var(--space-4) 0;
}
.sf-now-playing__expander-btn:hover[b-1te14x5djb] { color: var(--fg); }
.sf-now-playing__expander-btn:focus-visible[b-1te14x5djb] {
    outline: 2px solid var(--accent-500);
    outline-offset: 2px;
    border-radius: var(--radius-4);
}

.sf-now-playing__expander-chevron[b-1te14x5djb] {
    width: 12px;
    height: 12px;
    transition: transform var(--motion-duration-fast) var(--motion-easing-out);
}
.sf-now-playing__expander-btn[aria-expanded="true"] .sf-now-playing__expander-chevron[b-1te14x5djb] {
    transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
    .sf-now-playing__expander-chevron[b-1te14x5djb] { transition: none; }
}

/* ── History list (always in DOM; visibility toggled by class) ── */
.sf-now-playing__history[b-1te14x5djb] {
    margin: var(--space-12) 0 0 0;
    padding: var(--space-12) 0 0 0;
    list-style: none;
    display: none;
    border-top: 1px solid var(--border);
}
.sf-now-playing__history.is-open[b-1te14x5djb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/* ── Compact variant (Workspace row): single card, no peek ── */
.sf-now-playing--compact .sf-now-playing__stack[b-1te14x5djb] {
    padding-bottom: 0;
}
.sf-now-playing--compact .sf-now-playing__card--prev1[b-1te14x5djb] {
    display: none;
}
.sf-now-playing--compact .sf-now-playing__expander[b-1te14x5djb] {
    display: none;
}

.sf-now-playing__compact-link[b-1te14x5djb] {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--text-12);
    color: var(--fg-subtle);
    text-decoration: none;
}
.sf-now-playing__compact-link:hover[b-1te14x5djb] {
    color: var(--accent-500);
    text-decoration: underline;
}
/* _content/SpecStep.Web/Components/Shared/AnimatedCost.razor.rz.scp.css */
/* PR-M2 (2026-05-06) — animated $ counter primitive.
   The numeric span is plain text; layout / sizing is owned by the
   caller's container. We just provide a hover/transition cue so the
   updating tween reads as a deliberate UI affordance, not a glitch. */

.sf-cost-counter[b-09hihxd71p] {
    display: inline;
    font-variant-numeric: tabular-nums;
    transition: color var(--motion-duration-fast, 150ms) var(--motion-easing-out, ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .sf-cost-counter[b-09hihxd71p] { transition: none; }
}
/* _content/SpecStep.Web/Components/Shared/GenerationProgressBar.razor.rz.scp.css */
/* PR-M2 (2026-05-06) — wrapper for the .sf-progress primitive +
   the optional % label / stage caption row.

   The track itself (.sf-progress + .sf-progress__bar) is defined
   globally in app.css; this component only owns the meta row + the
   compact variant's slimmer track override. */

.sf-gd-progress[b-5zl24f9rwm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 8px);
}

.sf-gd-progress__meta[b-5zl24f9rwm] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-12, 12px);
}

.sf-gd-progress__pct[b-5zl24f9rwm] {
    font-size: var(--text-13, 13px);
    font-weight: var(--weight-semibold, 600);
    color: var(--accent-fg);
    font-variant-numeric: tabular-nums;
}

.sf-gd-progress__stage[b-5zl24f9rwm] {
    font-size: var(--text-12, 12px);
    color: var(--fg-subtle);
}

/* Compact variant — workspace in-flight row treatment. The track
   stays the global 4px from .sf-progress; we just remove gap so the
   row above doesn't gain vertical air. */
.sf-gd-progress--compact[b-5zl24f9rwm] {
    gap: 0;
}
/* _content/SpecStep.Web/Components/Shared/GenerationProgressChip.razor.rz.scp.css */
/* 2026-05-19 — topbar progress chip. Mirrors the sf-bell pattern for
   layout (relative wrapper + always-rendered dropdown revealed on
   hover / focus-within / pinned-open). The chip's progress fill +
   per-item bars compose the existing .sf-progress / .sf-progress__bar
   primitives from app.css. */

.sf-progress-chip[b-diz7uvmil7] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Always-present transparent bridge below the button so the cursor
   crossing into the dropdown stays inside :hover (same trick as
   sf-bell::after). */
.sf-progress-chip[b-diz7uvmil7]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--space-8);
    pointer-events: auto;
}

.sf-progress-chip__btn[b-diz7uvmil7] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    color: var(--fg);
    font-size: var(--text-12);
    line-height: 1;
    height: 28px;
}

.sf-progress-chip__btn:hover[b-diz7uvmil7] {
    background: var(--bg-elevated);
}

.sf-progress-chip__btn:focus-visible[b-diz7uvmil7] {
    outline: 2px solid var(--accent-500);
    outline-offset: 2px;
}

.sf-progress-chip__state-icon[b-diz7uvmil7] {
    font-size: 10px;
    line-height: 1;
    color: var(--accent-500);
}

.sf-progress-chip__bar[b-diz7uvmil7] {
    position: relative;
    display: inline-block;
    width: 96px;
    height: 6px;
    background: var(--bg-sunken);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.sf-progress-chip__fill[b-diz7uvmil7] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--accent-500);
    transition: width var(--motion-duration-base) var(--motion-easing-out);
}

/* Count badge — small pill in the upper-right corner, same shape +
   placement convention as sf-bell__badge but smaller (the bar
   already carries the "running" signal; the badge is a count, not a
   prominent alert). */
.sf-progress-chip__badge[b-diz7uvmil7] {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    background: var(--accent-500);
    color: #fff;
    font-size: 9px;
    font-weight: var(--weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* State modifiers — worst-state-wins drives the icon + fill + badge
   accent. Tokens fall back to the same palette the workspace pill
   uses so the chip stays visually consistent with the row. */
.sf-progress-chip--clarification .sf-progress-chip__fill[b-diz7uvmil7],
.sf-progress-chip--clarification .sf-progress-chip__badge[b-diz7uvmil7] {
    background: var(--state-paused-fg, #b58200);
}
.sf-progress-chip--clarification .sf-progress-chip__state-icon[b-diz7uvmil7] {
    color: var(--state-paused-fg, #b58200);
    animation: sf-progress-chip-pulse-b-diz7uvmil7 1.6s ease-in-out infinite;
}
.sf-progress-chip--clarification .sf-progress-chip__btn[b-diz7uvmil7] {
    border-color: var(--state-paused-fg, #b58200);
}

.sf-progress-chip--retrying .sf-progress-chip__fill[b-diz7uvmil7],
.sf-progress-chip--retrying .sf-progress-chip__badge[b-diz7uvmil7] {
    background: var(--state-paused-fg, #b58200);
}
.sf-progress-chip--retrying .sf-progress-chip__state-icon[b-diz7uvmil7] {
    color: var(--state-paused-fg, #b58200);
    animation: sf-progress-chip-spin-b-diz7uvmil7 1.4s linear infinite;
}

.sf-progress-chip--active .sf-progress-chip__fill[b-diz7uvmil7],
.sf-progress-chip--active .sf-progress-chip__badge[b-diz7uvmil7] {
    background: var(--accent-500);
}

.sf-progress-chip--queued .sf-progress-chip__fill[b-diz7uvmil7],
.sf-progress-chip--queued .sf-progress-chip__badge[b-diz7uvmil7] {
    background: var(--fg-muted);
}

@keyframes sf-progress-chip-pulse-b-diz7uvmil7 {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

@keyframes sf-progress-chip-spin-b-diz7uvmil7 {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sf-progress-chip__state-icon[b-diz7uvmil7] { animation: none !important; }
    .sf-progress-chip__fill[b-diz7uvmil7]       { transition: none; }
}

/* ---- dropdown ---- always rendered, revealed by :hover /
       :focus-within / .sf-progress-chip--open (touch / keyboard
       pinned). Same mechanism as sf-bell-dropdown. */
.sf-progress-chip__dropdown[b-diz7uvmil7] {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-8));
    right: 0;
    min-width: 300px;
    max-width: 360px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-8);
    box-shadow: 0 8px 32px -8px rgba(0,0,0,0.25);
    z-index: 1000;
}

.sf-progress-chip:hover .sf-progress-chip__dropdown[b-diz7uvmil7],
.sf-progress-chip:focus-within .sf-progress-chip__dropdown[b-diz7uvmil7],
.sf-progress-chip--open .sf-progress-chip__dropdown[b-diz7uvmil7] {
    display: block;
}

.sf-progress-chip__dropdown-header[b-diz7uvmil7] {
    padding: var(--space-12) var(--space-16);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-13, 13px);
}

.sf-progress-chip__list[b-diz7uvmil7] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sf-progress-chip__item[b-diz7uvmil7] {
    display: block;
    padding: var(--space-12) var(--space-16);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.sf-progress-chip__item:last-child[b-diz7uvmil7] { border-bottom: 0; }
.sf-progress-chip__item:hover[b-diz7uvmil7] { background: var(--bg-sunken); }

.sf-progress-chip__item-row[b-diz7uvmil7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
}

.sf-progress-chip__item-row--meta[b-diz7uvmil7] {
    margin-top: 2px;
    font-size: var(--text-12);
    color: var(--fg-muted);
}

.sf-progress-chip__item-name[b-diz7uvmil7] {
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.sf-progress-chip__item-pct[b-diz7uvmil7] {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-12);
    color: var(--fg-muted);
}

.sf-progress-chip__item-state[b-diz7uvmil7] {
    font-size: var(--text-12);
}

.sf-progress-chip__item-retry[b-diz7uvmil7] {
    color: var(--state-paused-fg, #b58200);
    font-weight: var(--weight-medium);
    font-size: var(--text-12);
}

.sf-progress-chip__item-bar[b-diz7uvmil7] {
    margin-top: 6px;
}

.sf-progress-chip__footer[b-diz7uvmil7] {
    display: block;
    padding: var(--space-12) var(--space-16);
    text-align: right;
    color: var(--accent-500);
    text-decoration: none;
    font-size: var(--text-13, 13px);
    border-top: 1px solid var(--border);
}
.sf-progress-chip__footer:hover[b-diz7uvmil7] { text-decoration: underline; }

/* Narrow screen — collapse to just the bar + badge, no padding. */
@media (max-width: 640px) {
    .sf-progress-chip__bar[b-diz7uvmil7] { width: 56px; }
    .sf-progress-chip__btn[b-diz7uvmil7] { padding: 4px 6px; }
}
/* _content/SpecStep.Web/Components/Shared/PackageAddendaList.razor.rz.scp.css */
/* TASK-181 (2026-05-08) — scoped styles for PackageAddendaList. The
   .sf-card shell is styled in app.css; this file owns only the
   addenda-specific layout (header row, item rows, expanded body,
   section list). All colors come from existing tokens. */

.sf-addenda__header[b-tvthstykjd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.sf-addenda__count[b-tvthstykjd] {
    margin-top: var(--space-4);
}

.sf-addenda__empty[b-tvthstykjd],
.sf-addenda__error[b-tvthstykjd] {
    margin: var(--space-8) 0 0;
}

/* ── List rows ───────────────────────────────────────────────────── */

.sf-addenda__list[b-tvthstykjd] {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.sf-addendum-item[b-tvthstykjd] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-6);
    transition: border-color 0.12s ease, background 0.12s ease;
}

.sf-addendum-item:hover[b-tvthstykjd] {
    border-color: var(--brand-border);
}

.sf-addendum-item--expanded[b-tvthstykjd] {
    grid-template-columns: 1fr;
    background: var(--bg-sunken);
    border-color: var(--brand-border);
}

.sf-addendum-item__summary[b-tvthstykjd] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-12);
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sf-addendum-item__summary:focus-visible[b-tvthstykjd] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-4);
}

.sf-addendum-item__title-col[b-tvthstykjd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sf-addendum-item__title[b-tvthstykjd] {
    font-weight: var(--weight-semibold);
    font-size: var(--text-14);
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-addendum-item__date[b-tvthstykjd] {
    font-size: var(--text-12);
    color: var(--fg-muted);
}

.sf-addendum-item__chevron[b-tvthstykjd] {
    color: var(--fg-muted);
    font-size: var(--text-12);
}

.sf-addendum-item__download[b-tvthstykjd] {
    /* Live in the second grid column on the collapsed row; on the
       expanded row, the grid collapses to one column so the download
       sits below the summary instead — that's fine, treat it as a
       primary action. */
    align-self: center;
    justify-self: end;
}

/* ── Expanded body ───────────────────────────────────────────────── */

.sf-addendum-item__body[b-tvthstykjd] {
    grid-column: 1 / -1;
    margin-top: var(--space-8);
    padding-top: var(--space-12);
    border-top: 1px solid var(--border);
}

.sf-addendum-item__description[b-tvthstykjd] {
    margin: 0 0 var(--space-12);
    color: var(--fg-muted);
    font-size: var(--text-13);
    line-height: 1.5;
}

.sf-addendum-item__sections-label[b-tvthstykjd] {
    margin: 0 0 var(--space-8);
    font-size: var(--text-12);
    font-weight: var(--weight-semibold);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sf-addendum-sections[b-tvthstykjd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

/*
 * Session 4 (BACKLOG 2026-05-10) — inline-preview rendering. Each
 * section is an <article> with a header (title + download link)
 * + a body that renders sanitized markdown via UserMarkdownRenderer
 * (which wraps content in .sf-prose). The article is its own
 * lightly-bordered card so the 5 sections visually stack.
 */
.sf-addendum-section[b-tvthstykjd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-4);
}

.sf-addendum-section__header[b-tvthstykjd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.sf-addendum-section__title[b-tvthstykjd] {
    margin: 0;
    font-size: var(--text-14);
    font-weight: var(--weight-semibold);
    color: var(--fg);
}

.sf-addendum-section__loading[b-tvthstykjd],
.sf-addendum-section__error[b-tvthstykjd] {
    margin: 0;
    font-size: var(--text-13);
}

.sf-addendum-section__error a[b-tvthstykjd] {
    color: var(--accent-700);
}

/* The markdown body itself flows under the header — UserMarkdownRenderer
 * wraps content in .sf-prose which app.css already styles. */
.sf-addendum-section .sf-prose[b-tvthstykjd] {
    font-size: var(--text-13);
    color: var(--fg);
}

/* ── Footer ──────────────────────────────────────────────────────── */

.sf-addenda__footer[b-tvthstykjd] {
    margin-top: var(--space-12);
    padding-top: var(--space-12);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

/* Reusable success pill — fall back to local styling if app.css's
   .sf-pill ever moves. The expected source of truth is app.css; this
   block is defensive. */
.sf-pill--success[b-tvthstykjd] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-8);
    background: var(--success-bg);
    color: var(--success-fg);
    border: 1px solid var(--success-border);
    border-radius: 999px;
    font-size: var(--text-11);
    font-weight: var(--weight-semibold);
}
/* _content/SpecStep.Web/Components/Shared/RequestChangeChoiceModal.razor.rz.scp.css */
/* TASK-181 (2026-05-08) — scoped styles for RequestChangeChoiceModal.
   The .sf-modal-backdrop + .sf-modal shell is styled in app.css; this
   file owns only the choice-modal-specific layout (cards, form chrome,
   section toggles). All colors come from existing tokens. */

.sf-choice-modal[b-ynoih7jent] {
    /* Override the 560px default for the wider 2-card layout. */
    max-width: 720px;
}

/* Header padding mirrors .sf-modal__header from app.css since the
   shared rule only matches the explicit .sf-modal__header element and
   we use a bare h3 here for parity with the delete-confirm modal. */
h3[b-ynoih7jent] {
    margin: 0;
    padding: var(--space-20) var(--space-24) var(--space-8);
    font-size: var(--text-18);
    color: var(--fg);
}

.sf-choice-modal__sub[b-ynoih7jent] {
    color: var(--fg-muted);
    font-size: var(--text-14);
    margin: 0;
    padding: 0 var(--space-24) var(--space-16);
    line-height: 1.5;
}

/* ── Choice step: 2 option cards side-by-side ────────────────────── */

.sf-choice-modal__options[b-ynoih7jent] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    padding: 0 var(--space-24) var(--space-16);
}

.sf-choice-modal__option[b-ynoih7jent] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    padding: var(--space-16);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-8);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.sf-choice-modal__option:hover[b-ynoih7jent] {
    border-color: var(--brand-border);
    background: var(--bg-sunken);
}

.sf-choice-modal__option:focus-visible[b-ynoih7jent] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.sf-choice-modal__option--selected[b-ynoih7jent] {
    border-color: var(--brand);
    background: var(--brand-bg);
    box-shadow: 0 0 0 1px var(--brand) inset;
}

.sf-choice-modal__badge[b-ynoih7jent] {
    display: inline-block;
    align-self: flex-start;
    padding: 2px var(--space-8);
    background: var(--success-bg);
    color: var(--success-fg);
    border: 1px solid var(--success-border);
    border-radius: 999px;
    font-size: var(--text-11);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-4);
}

.sf-choice-modal__option-title[b-ynoih7jent] {
    font-size: var(--text-16);
    font-weight: var(--weight-semibold);
    color: var(--fg);
}

.sf-choice-modal__option-desc[b-ynoih7jent] {
    font-size: var(--text-13);
    color: var(--fg-muted);
    line-height: 1.5;
}

.sf-choice-modal__option-meta[b-ynoih7jent] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-12);
    row-gap: var(--space-4);
    margin: var(--space-8) 0 0;
    font-size: var(--text-12);
}

.sf-choice-modal__option-meta > div[b-ynoih7jent] {
    display: contents;
}

.sf-choice-modal__option-meta dt[b-ynoih7jent] {
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--weight-semibold);
}

.sf-choice-modal__option-meta dd[b-ynoih7jent] {
    margin: 0;
    color: var(--fg);
}

/* ── Form step: textarea + section chips + explainer ─────────────── */

.sf-change-form__textarea[b-ynoih7jent] {
    display: block;
    width: calc(100% - calc(var(--space-24) * 2));
    margin: 0 var(--space-24);
    padding: var(--space-12);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-6);
    font: inherit;
    color: var(--fg);
    resize: vertical;
    min-height: 96px;
    box-sizing: border-box;
}

.sf-change-form__textarea:focus-visible[b-ynoih7jent] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-bg);
}

.sf-change-form__textarea[disabled][b-ynoih7jent] {
    opacity: 0.6;
    cursor: not-allowed;
}

.sf-change-form__char-count[b-ynoih7jent] {
    padding: var(--space-4) var(--space-24) var(--space-12);
    text-align: right;
    color: var(--fg-muted);
    font-size: var(--text-12);
}

.sf-change-form__sections-label[b-ynoih7jent] {
    margin: var(--space-8) var(--space-24) var(--space-4);
    font-size: var(--text-13);
    font-weight: var(--weight-semibold);
    color: var(--fg);
}

.sf-change-form__sections-hint[b-ynoih7jent] {
    margin: 0 var(--space-24) var(--space-8);
    font-size: var(--text-12);
    color: var(--fg-muted);
}

.sf-change-form__sections[b-ynoih7jent] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding: 0 var(--space-24) var(--space-16);
}

.sf-section-toggle[b-ynoih7jent] {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-12);
    background: var(--bg-elevated);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: var(--text-12);
    font-weight: var(--weight-medium);
}

.sf-section-toggle--on[b-ynoih7jent] {
    background: var(--brand-bg);
    color: var(--brand-fg, var(--brand));
    border-color: var(--brand);
}

.sf-change-form__infer-note[b-ynoih7jent] {
    margin: 0 var(--space-24) var(--space-16);
    padding: var(--space-12);
    background: var(--info-bg, var(--bg-sunken));
    border: 1px solid var(--info-border, var(--border));
    border-radius: var(--radius-6);
    color: var(--fg-muted);
    font-size: var(--text-13);
    line-height: 1.5;
}

/* Inline error message inside the form (e.g. transport failure). */
.sf-modal__error[b-ynoih7jent] {
    margin: 0 var(--space-24) var(--space-12);
    padding: var(--space-8) var(--space-12);
    background: var(--danger-bg);
    color: var(--danger-fg);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-6);
    font-size: var(--text-13);
}

/* Body paragraph (used in the success step). */
p:not(.sf-modal__error):not(.sf-choice-modal__sub):not(.sf-change-form__sections-label):not(.sf-change-form__sections-hint):not(.sf-change-form__infer-note)[b-ynoih7jent] {
    margin: 0;
    padding: 0 var(--space-24) var(--space-16);
    color: var(--fg);
    font-size: var(--text-14);
    line-height: 1.5;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .sf-choice-modal__options[b-ynoih7jent] {
        grid-template-columns: 1fr;
    }
}