@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

/* =====================================================================
   Do The Interview — marketing design tokens (public / anonymous pages)
   --------------------------------------------------------------------
   Consumed by the .dti-marketing shell, the marketing header/footer, and
   the scoped page CSS (Home, occasion pages). Additive and scoped: the
   authenticated FluentUI app is untouched and keeps Segoe UI.
   Direction locked with the owner: warm serif/sans pairing, a deep-blue
   trust anchor warmed by a tempered gold accent ("warmer, tempered").
   ===================================================================== */
:root {
    --dti-ink: #2b3a5b;          /* deep blue — primary text, trust anchor */
    --dti-ink-deep: #22304d;     /* darkest blue — footer, strong headings */
    --dti-blue: #46588a;         /* mid blue — buttons, links, icon chips */
    --dti-blue-hover: #3a4a78;
    --dti-taupe: #b6907e;        /* warm taupe — gradient warm stop */
    --dti-gold: #c89b5a;         /* tempered gold accent — celebration spark */
    --dti-gold-soft: #e7c27a;    /* lighter gold — accents on dark */
    --dti-parchment: #f8f5f0;    /* warm off-white — section backgrounds */
    --dti-tint-blue: #eef1f8;    /* cool tint — calm chips / tender pages */
    --dti-tint-gold: #faf1e2;    /* warm tint — celebration chips */
    --dti-muted: #5c6573;        /* secondary text */
    --dti-line: rgba(43, 58, 91, 0.13); /* hairline borders */

    /* hero gradients — warm (home / celebration) vs calm (tender pages) */
    --dti-grad-warm: linear-gradient(135deg, #2b3a5b 0%, #6a5a83 42%, #c89b5a 100%);
    --dti-grad-calm: linear-gradient(135deg, #2b3a5b 0%, #46588a 58%, #7f819a 100%);

    --dti-font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
    --dti-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

    --dti-radius: 14px;
    --dti-radius-lg: 18px;
    --dti-maxw: 1120px;
}

/* Marketing shell: applies the brand type ONLY within static/anonymous pages
   (StaticLayout adds .dti-marketing). The authenticated app never gets this. */
.dti-marketing {
    font-family: var(--dti-font-body);
    color: var(--dti-ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.dti-marketing h1,
.dti-marketing h2,
.dti-marketing h3,
.dti-marketing .dti-wordmark {
    font-family: var(--dti-font-head);
    color: var(--dti-ink);
    letter-spacing: -0.01em;
    font-weight: 600;
    margin: 0;
}

/* Marketing footer: brand navy instead of the FluentUI neutral footer — scoped to
   .dti-marketing so the authenticated app's footer is unchanged. */
.dti-marketing footer {
    background: var(--dti-ink-deep);
    color: rgba(255, 255, 255, 0.82);
}

.dti-marketing footer a {
    color: rgba(255, 255, 255, 0.82);
}

.dti-marketing footer a:hover {
    color: #fff;
}

body {
    --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
    /* Baseline text raise (owner 2026-06-24): lift the FluentUI base ramp 14→16px so body text and
       FluentUI components read a little larger app-wide, alongside the +14% bump to the custom px sizes.
       Set on body so it cascades into the (non-shadow-DOM) FluentUI components. */
    --type-ramp-base-font-size: 16px;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
}

.navmenu-icon {
    display: none;
}

/* Sticky site header. FluentLayout renders as <div class="layout">, FluentHeader
   as <div class="header"> (with FluentUI's scoped attributes). Target the direct
   child to avoid colliding with the unrelated .header class FluentDataGrid uses
   inside its own scoped CSS. */
.layout > .header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Compact the header — it only carries a few nav icons for now. Fixed, slim height with
       centered content. If this changes, keep the `calc(100dvh - 80px)` body sizing below in sync
       (80 ~= header height 40 + footer height ~40). */
    min-height: 40px !important;
    height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* The header is a flex row, but its children default to align-self: stretch (FluentUI), which
   overrides the header's align-items:center and leaves everything top-aligned. Force the direct
   children (home button, account button, login/logout wrapper) to center. */
.layout > .header > * {
    align-self: center !important;
}

/* The login/logout control nests its button in <div class="nav-item"> + <form>; centering alone
   doesn't fix it because the wrapper/form carry vertical box spacing. Flatten + center them. */
.layout > .header .nav-item,
.layout > .header .nav-item form {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Anonymous header CTAs (Sign up free / Log in). The header bar is accent (blue), so a blue Accent
   button blends in and the wrong one draws the eye. Plain styled anchors give full contrast control:
   the PRIMARY "Sign up free" is a high-contrast white pill that pops; the SECONDARY "Log in" is a
   subtle white outline that recedes. */
.layout > .header .hdr-auth-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.layout > .header .hdr-cta-primary,
.layout > .header .hdr-cta-secondary {
    display: inline-block;
    border-radius: 999px;
    padding: 5px 16px;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}
.layout > .header .hdr-cta-primary {
    background: #fff;
    color: #2c3e5e;
    border: 1px solid #fff;
    font-weight: 600;
}
.layout > .header .hdr-cta-primary:hover {
    background: #eef0f7;
}
.layout > .header .hdr-cta-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.65);
    font-weight: 500;
}
.layout > .header .hdr-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* FluentDataGrid action cells (a column with Align.End) lay their content on the text baseline,
   so icon-only buttons — and a taller Accent button next to plain ones — ride high in the row.
   Same root cause as the header nav icons: force the cell to flex-center its content vertically.
   `!important` is needed to beat FluentUI's scoped cell CSS. Scoped to end-justified cells, which
   in this app are always action columns. (specs/011-start-interview row buttons) */
.fluent-data-grid td.col-justify-end {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px;
}

/* GENERAL fix for the recurring "button rides high in the row" bug: the rule above only catches
   columns that remembered Align.End. Any data-grid cell holding an inline control (button/anchor)
   has the same baseline problem, so flex-center *those* cells vertically regardless of Align — this
   way a new action column is centered even if Align.End is forgotten. Horizontal alignment is left
   alone (no justify-content), and text/ellipsis cells are untouched because the selector only matches
   cells that actually contain a control. Covers the FluentUI custom elements + a raw <button>. */
.fluent-data-grid td:has(fluent-button),
.fluent-data-grid td:has(fluent-anchor),
.fluent-data-grid td:has(button) {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
}

.main {
    min-height: calc(100dvh - 80px);
    color: var(--neutral-foreground-rest);
    align-items: stretch !important;
}

.body-content {
    align-self: stretch;
    min-height: calc(100dvh - 80px);
    display: flex;
    /* FluentBodyContent's scoped CSS sets overflow-y: auto + height: 100% with a class +
       attribute selector (higher specificity than ours), which would re-establish an
       internal scroll container whenever content can't fit the clamped height — most
       noticeable after the viewport is shrunk. !important is needed to win the cascade.
       overflow-x: clip keeps the original "no horizontal scroll" intent without forcing
       overflow-y back to auto (which `hidden` would do per CSS spec). */
    overflow-y: visible !important;
    overflow-x: clip !important;
    height: auto !important;
}

.content {
    padding: 0.5rem 1.5rem;
    align-self: stretch !important;
    width: 100%;
}

.manage {
    width: 100dvw;
}

footer {
    background: var(--neutral-layer-4);
    color: var(--neutral-foreground-rest);
    align-items: center;
    padding: 10px 10px;
}

    footer a {
        color: var(--neutral-foreground-rest);
        text-decoration: none;
    }

        footer a:focus {
            outline: 1px dashed;
            outline-offset: 3px;
        }

        footer a:hover {
            text-decoration: underline;
        }

.alert {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
}

/* FocusOnNavigate (Routes.razor, Selector="h1") programmatically focuses the page's <h1> after every
   navigation so screen-reader users land on the heading. To be focusable the heading gets tabindex="-1",
   and the browser then draws a focus ring around it — a block-level <h1> spans the full content width, so
   the ring reads as a stray full-width box (most visible on a static landing like SessionPaused, where
   nothing steals focus afterward). Headings aren't interactive, so suppress the ring on them; keyboard
   focus rings on actual controls (links, buttons, inputs) are unaffected. */
h1:focus {
    outline: none;
}

/* Shared shell for static placeholder pages (About, Pricing, Support, FAQ, Privacy, Terms).
   Lightweight: small column of text + a back-to-home link, on a warm parchment background
   that picks up the same palette as the Home page sections. */
.placeholder {
    background: #f9f6f1;
    min-height: calc(100dvh - 200px);
}

.placeholder-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 24px;
}

    .placeholder-inner h1 {
        font-size: 2.2rem;
        font-weight: 700;
        margin: 0 0 16px;
        line-height: 1.2;
        color: #2c3e5e;
    }

    .placeholder-inner .lead {
        font-size: 1.15rem;
        line-height: 1.55;
        margin: 0 0 16px;
        color: #2c3e5e;
    }

    .placeholder-inner p {
        font-size: 1rem;
        line-height: 1.6;
        margin: 0 0 16px;
        color: #555;
    }

    .placeholder-inner .back-link {
        display: inline-block;
        margin-top: 24px;
        color: #4a5d8a;
        text-decoration: none;
        font-weight: 500;
    }

        .placeholder-inner .back-link:hover {
            text-decoration: underline;
        }


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    margin: 20px 0;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::before {
        content: "An error has occurred. "
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* Standard screen-reader-only utility class — content is in the DOM and read
   by assistive tech, but is not visible. Used by RecordingStateAnnouncer
   for ARIA live region announcements (spec 003 — FR-015). */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Base styling applied to every card-item inside a DTI vertical carousel
   (InterviewQuestionCarousel, ConnectStatusCarousel, etc.). The companion
   JS module at wwwroot/js/dti-carousel.js sets inline transform + opacity
   based on each item's distance from its container's vertical center;
   these transitions interpolate the changes smoothly. Default scale/opacity
   are the "fully shrunk" state so pre-JS rendering is unobtrusive. */
.dti-carousel-item {
    scroll-snap-align: center;
    transform-origin: center;
    transform: scale(0.55);
    opacity: 0.15;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

@media (max-width: 600px) {
    .header-gutters {
        margin: 0.5rem 3rem 0.5rem 1.5rem !important;
    }

    [dir="rtl"] .header-gutters {
        margin: 0.5rem 1.5rem 0.5rem 3rem !important;
    }

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

        #main-menu > div:first-child:is(.expander) {
            display: none;
        }

    .navmenu {
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }

        #navmenu-toggle ~ nav {
            display: none;
        }

        #navmenu-toggle:checked ~ nav {
            display: block;
        }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: 15px;
        left: unset;
        right: 20px;
        width: 20px;
        height: 20px;
        border: none;
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }
}

/* Spec 014 — idle session warning overlay (IdleSessionWatcher.razor). A centered, dimmed modal that
   warns before the idle reap navigates to the static paused page. Any interaction cancels it. */
.idle-warning-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
}

.idle-warning-card {
    background: var(--neutral-layer-floating, #fff);
    color: var(--neutral-foreground-rest, #242424);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    padding: 24px;
    max-width: 440px;
    width: calc(100% - 32px);
}


/* ============================================================================
   Interview editor — spec 017 "rooms" styles (the iv-* classes).
   Moved out of Components/Pages/Interviews/InterviewEditor.razor (2026-06-23) to
   shrink that component. These were a plain global <style> block in that file, so
   they remain global here and extracted room child components inherit them
   unchanged. (Historical: the listen-back cards once mirrored the in-call
   InterviewQuestionCard — big centered text, uppercase status; 2026-06-12 the
   room joined the page's one warm card language while the in-call surface kept
   its own look.)
   ============================================================================ */
    /* owner 2026-07-06 — the Listen-back answers ride the same ROUTE language as Account home
       (InterviewProgressList's curved rail): one line runs down the page and curves in/out of
       every card, docking beside its number badge. More air between stops than the plain list had. */
    .iv-q-route { display: flex; flex-direction: column; gap: 28px; padding-left: 26px; }
    .iv-q-route .iv-q-card { margin: 0; position: relative; }
    /* the IN curve: arrives from above at the rail's x, curves right, docks at the card's edge
       level with the number badge (~27px down) */
    .iv-q-route .iv-q-card::before {
        content: ''; position: absolute; left: -24px; top: -15px; bottom: calc(100% - 27px); width: 24px;
        border-left: 2px solid #DDD6C8; border-bottom: 2px solid #DDD6C8; border-bottom-left-radius: 16px;
    }
    /* the OUT curve: leaves the card's edge below the badge, curves left, heads down to the next stop */
    .iv-q-route .iv-q-card:not(:last-child)::after {
        content: ''; position: absolute; left: -24px; top: 27px; bottom: -15px; width: 24px;
        border-left: 2px solid #DDD6C8; border-top: 2px solid #DDD6C8; border-top-left-radius: 16px;
    }
    /* a QUIET MOMENT line (owner 2026-07-06): one statement + one link, standing apart from its
       neighbors — the same voice as the pronoun quiet-confirm, never clumped with housekeeping */
    .iv-quietline { margin: 24px 0 0; font-size: 15px; color: var(--iv-ink-soft, #5A6478); }
    /* the autosave whisper: true but unimportant — smallest voice in the room, last word in the card */
    .iv-autosave { margin: 20px 0 0; font-size: 12.5px; color: #A7ADB8; }

    /* the under-title separator, worn by every room with a title (owner 2026-07-06). On the rail
       pages (.railed) it is also the route's ORIGIN: a stub drops from it at the rail's x and
       overlaps invisibly into the first note's segment, so the line reads continuous. */
    .iv-q-sep { border-top: 2px solid #DDD6C8; margin: 2px 0 18px; }
    .iv-q-sep.railed { position: relative; }
    .iv-q-sep.railed::after {
        content: ''; position: absolute; left: 2px; top: 0; height: 56px;
        border-left: 2px solid #DDD6C8;
    }
    /* the intro NOTES ride the rail too (owner 2026-07-06): bumped right with the cards, each with
       a small bullet beside its text (off the line), a straight rail segment threading past them */
    .iv-q-route .iv-q-note { margin: 0; position: relative; padding-left: 16px; }
    .iv-q-route .iv-q-note::before {
        content: ''; position: absolute; left: -24px; top: -16px; bottom: -16px;
        border-left: 2px solid #DDD6C8;
    }
    /* the line rises from the first note to the separator, no further */
    .iv-q-route .iv-q-note:first-child::before { top: -18px; }
    .iv-q-route .iv-q-note::after {
        content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
        width: 7px; height: 7px; border-radius: 50%; background: #C9C1B0;
    }
    /* the QUESTIONS page rides the same rail (owner 2026-07-06): its rows are the stops, docking
       beside each number badge (~26px down: 13px row padding + half the 24px badge) */
    .iv-q-route .iv-qrow { position: relative; margin-bottom: 20px; }
    .iv-q-route .iv-qrow::before {
        content: ''; position: absolute; left: -24px; top: -11px; bottom: calc(100% - 26px); width: 24px;
        border-left: 2px solid #DDD6C8; border-bottom: 2px solid #DDD6C8; border-bottom-left-radius: 16px;
    }
    .iv-q-route .iv-qrow:not(:last-child)::after {
        content: ''; position: absolute; left: -24px; top: 26px; bottom: -11px; width: 24px;
        border-left: 2px solid #DDD6C8; border-top: 2px solid #DDD6C8; border-top-left-radius: 16px;
    }
    /* the first row's line reaches up through the section gap toward the intro note */
    .iv-q-route .iv-qrow:first-child::before { top: -26px; }
    /* the SortableJS drag clone must not carry a floating piece of the rail */
    .iv-qrow-fallback::before, .iv-qrow-fallback::after { content: none; }
    .iv-q-card { margin: 0 0 10px; }
    .iv-q-card-inner {
        background: #fff;
        border: 1px solid var(--iv-line);
        border-radius: 12px;
        padding: 14px 16px 10px;
        text-align: left;
    }
    /* number badge + content column — mirrors the Questions list page's iv-qrow/iv-qnum */
    .iv-q-row { display: flex; align-items: flex-start; gap: 12px; }
    .iv-q-col { flex: 1; min-width: 0; }
    .iv-q-meta {
        display: flex; align-items: center; gap: 8px;
        font-size: 14px;
        color: var(--iv-ink-soft);
        margin-bottom: 7px;
    }
    .iv-q-status {
        font-size: 13px; font-weight: 600; border-radius: 999px; padding: 2px 10px;
        background: #F0EDE7; color: #5A6478;
    }
    .iv-q-status.answered { background: var(--iv-pill); color: var(--iv-accent); }
    .iv-q-text {
        font-size: 17.5px;
        line-height: 1.45;
        color: var(--iv-ink);
        font-weight: 600;
        margin-bottom: 10px;
    }
    .iv-q-audio {
        width: 100%;
        height: 38px;
        margin-bottom: 0.75rem;
    }
    /* the card footer (owner 2026-07-06): keep-pill left, reset right, with air on both
       sides of the separator line */
    .iv-q-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 0.9rem;
        padding-top: 0.9rem;
        border-top: 1px solid #EFEBE3;
    }
    /* spec 023 — per-answer keep/leave-out toggle pill (bottom-left of the card footer) */
    .iv-q-keep {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 14.5px; font-weight: 600; line-height: 1;
        border: 1px solid transparent; border-radius: 999px; padding: 6px 14px;
        cursor: pointer;
        transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .iv-q-keep svg { width: 15px; height: 15px; }
    /* the footer's reset (a Fluent stealth button) keeps pace with the pill */
    .iv-q-actions fluent-button::part(control) { font-size: 14.5px; }
    .iv-q-keep.in  { background: var(--iv-pill); color: var(--iv-accent); }
    .iv-q-keep.out { background: var(--iv-gold-bg); color: var(--iv-gold); border-color: rgba(176,122,18,.35); }
    .iv-q-keep:hover { border-color: var(--iv-accent); }
    .iv-q-keep svg { display: block; }

    /* spec 017 hub — the calm vertical journey (mirrors mockups/interview-home.html) */
    :root {
        --iv-ink: #25324B; --iv-ink-soft: #5A6478; --iv-accent: #2C4A7E; --iv-card: #FFFFFF;
        --iv-line: #ECE7DE; --iv-pill: #EEF2F8; --iv-gold: #B07A12; --iv-gold-bg: #FBF3E2;
        --iv-rail: #DDE2EA;
    }
    /* the page header (Back + title) is centered in a column that matches the content below it */
    .iv-pagehead { margin: 0 auto; }
    /* the quiet guide words — the cards' grammar, soft so the name keeps the weight */
    .iv-title-soft { font-weight: 400; color: var(--iv-ink-soft); }
    /* in the page title the guide words shrink too, so they don't crowd the name */
    .iv-h2-soft { font-weight: 400; color: var(--iv-ink-soft); font-size: 0.62em; }
    /* Back on its own quiet line above the title — a understated blue text link (matches staging) */
    .iv-backrow { margin: 0 0 4px; }
    .iv-back { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; color: var(--iv-accent);
               text-decoration: none; cursor: pointer; }
    .iv-back-chev { width: 14px; height: 14px; flex: 0 0 auto; }
    .iv-hub { max-width: 620px; margin: 4px auto 28px; }
    .iv-journey-v { padding: 0 4px; }
    .iv-stage { display: flex; gap: 14px; }
    .iv-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 24px; }
    .iv-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--iv-rail); background: var(--iv-card);
              display: flex; align-items: center; justify-content: center; flex: 0 0 auto; z-index: 1; }
    .iv-dot svg { width: 12px; height: 12px; color: #fff; }
    .iv-dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--iv-accent); display: block; }
    .iv-line { width: 2px; flex: 1; background: var(--iv-rail); min-height: 18px; }
    .iv-stage:last-child .iv-line { display: none; }
    .iv-stage.iv-done .iv-dot { background: var(--iv-accent); border-color: var(--iv-accent); }
    .iv-stage.iv-done .iv-line { background: var(--iv-accent); }
    .iv-stage.iv-current .iv-dot { border-color: var(--iv-accent); }
    .iv-stage.iv-movie.iv-done .iv-dot { background: var(--iv-gold); border-color: var(--iv-gold); }
    .iv-stage.iv-movie.iv-current .iv-dot { border-color: var(--iv-gold); }
    .iv-stage.iv-movie.iv-current .iv-dot i { background: var(--iv-gold); }

    .iv-content { flex: 1; padding-bottom: 48px; min-width: 0; }
    .iv-stitle { font-size: 18px; font-weight: 600; margin: 1px 0 2px; color: var(--iv-ink); }
    /* a done step whose title IS the edit affordance — the pencil tucks right beside the name (like the
       builder done-rows), replacing a separate second-line "Edit …" link */
    .iv-stitle-edit { display: inline-flex; align-items: baseline; gap: 8px; background: none; border: none;
                      padding: 0; margin: 1px 0 2px; cursor: pointer; font-family: inherit; text-align: left;
                      color: inherit; text-decoration: none; }
    .iv-stitle-edit .iv-stitle { margin: 0; }
    .iv-edit-pen { color: var(--iv-accent); font-size: 19px; opacity: .8; flex: 0 0 auto; }
    .iv-stitle-edit:hover .iv-edit-pen { opacity: 1; }
    .iv-goldtext { color: var(--iv-gold); }
    .iv-ssum { font-size: 15.5px; color: var(--iv-ink-soft); }
    .iv-stage.iv-todo .iv-stitle { color: #9aa2b1; font-weight: 500; }
    .iv-stage.iv-todo .iv-ssum { color: #aab1bd; }

    .iv-revisit { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--iv-accent);
                  text-decoration: none; margin-top: 6px; cursor: pointer; }
    .iv-chev { width: 13px; height: 13px; }
    .iv-ico { width: 19px; height: 19px; }

    .iv-action { margin-top: 12px; }
    .iv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
              background: var(--iv-accent); color: #fff; border: none; cursor: pointer;
              font-size: 19.5px; font-weight: 600; font-family: inherit; padding: 15px 20px; border-radius: 11px;
              box-shadow: 0 1px 2px rgba(37,50,75,.18); }
    .iv-btn.iv-gold { background: var(--iv-gold); }
    .iv-btn:disabled { opacity: .55; cursor: default; }
    .iv-btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
                   background: #fff; color: var(--iv-accent); border: 1.5px solid #C9D4E6; cursor: pointer;
                   font-size: 17px; font-weight: 600; font-family: inherit; padding: 12px 18px; border-radius: 10px; margin-top: 10px; }
    .iv-btn-soft:disabled { opacity: .55; cursor: default; }
    /* Two stacked primary buttons in a stage action (no-photos "Add your photos" + gold "Finish
       this conversation") need breathing room so they don't read as one block (owner 2026-06-18). */
    .iv-action .iv-btn + .iv-btn { margin-top: 10px; }

    /* (the per-voice finished-movie hero + in-flight pulse left with spec 028 increment 4 —
       every movie is the story's now, rendered from /Stories/{id}/Movie) */

    /* the More-options menu: items grew sub-lines (lifecycle verbs, 2026-06-12) — let each item
       size to its content instead of the web component's fixed row height, and give the list
       breathing room so titles and sub-lines read as pairs. The Class lands on a WRAPPER div
       around the fluent-menu element (checked rendered DOM) — keep the wrapper invisible and
       style the menu surface itself, or the wrapper shows as a second box behind the menu. */
    .iv-top-menu { background: none; padding: 0; }
    .iv-top-menu fluent-menu { min-width: 330px; padding-top: 6px; padding-bottom: 6px; }
    .iv-top-menu fluent-menu-item { height: auto; min-height: 32px; padding-top: 5px; padding-bottom: 5px; }
    .iv-menu-sub { display: block; font-size: 14px; color: var(--iv-ink-soft); font-weight: 400;
                   margin-top: 1px; white-space: normal; line-height: 1.4; }

    /* focused rooms */
    /* the one room scaffold (owner 2026-06-12): title (+ optional room tools) outside the cards,
       one intro line, content below — all on the page's single 620px column */
    .iv-roomhead { max-width: 620px; margin: 0 auto 10px; display: flex; align-items: center; }
    .iv-roomtitle { font-size: 23px; font-weight: 600; color: var(--iv-ink); }
    .iv-room { max-width: 620px; margin: 0 auto; }
    .iv-roomintro { font-size: 16px; color: var(--iv-ink-soft); max-width: 620px; margin: 2px auto 14px; }
    /* the generic white content card every room hangs its content in */
    .iv-card { background: #fff; border: 1px solid var(--iv-line); border-radius: 12px; padding: 18px 20px; }
    .iv-photosec { background: #fff; border: 1px solid var(--iv-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
    /* "Your movie at a glance" storyboard — each answer (in order) with the photos that will appear on it,
       so the shared-pool spread is visible and "how it'll play" is one clear picture, not scattered chips. */
    .iv-sbrow { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid #f0ede7; }
    .iv-sbrow:first-of-type { border-top: none; }
    .iv-sbnum { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--iv-pill); color: var(--iv-accent);
                display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; margin-top: 1px; }
    .iv-sbmain { flex: 1; min-width: 0; }
    .iv-sbq { font-size: 16px; color: var(--iv-ink); }
    .iv-sbside { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    /* sit the time's right edge over the button's label (the button insets its text by 10px of padding) */
    .iv-sbdur { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; color: var(--iv-ink-soft); white-space: nowrap; padding-right: 10px; }
    .iv-sbthumbs { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 6px; }
    /* skeleton: the square gently pulses while the photo loads; the loaded image (opaque, object-fit:cover)
       paints over it. Honors reduced-motion. */
    .iv-sbthumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--iv-line); background: #f1ebdf; cursor: default; animation: iv-skel 1.3s ease-in-out infinite; }
    .iv-sbthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .iv-sbthumb-over { opacity: 0.32; }
    @keyframes iv-skel { 0%, 100% { background-color: #f1ebdf; } 50% { background-color: #e2dac9; } }
    @media (prefers-reduced-motion: reduce) { .iv-sbthumb { animation: none; } }
    .iv-sbmore { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 10px;
                 border-radius: 8px; background: var(--iv-pill); color: var(--iv-accent); font-size: 13.5px; font-weight: 500; }
    .iv-sbcard { display: inline-flex; align-items: center; gap: 6px; height: 56px; padding: 0 14px; border-radius: 8px;
                 border: 1px dashed #cdd6e4; color: var(--iv-ink-soft); font-size: 13.5px; }
    .iv-sbcap { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--iv-ink-soft); }
    .iv-sbcap svg { flex: 0 0 auto; color: var(--iv-accent); }
    .iv-sbcap-warn { color: var(--iv-gold); font-weight: 500; }
    .iv-sbcap-warn svg { color: var(--iv-gold); }
    .iv-sbcap-empty { color: #9aa2b1; }

    /* new-conversation — the front-door wizard (spec 021; pixel ref mockups/stories.html) */
    .iv-create { max-width: 520px; margin: 8px auto 28px; }
    /* wizard screens carry ONE line now — the question itself (the breadcrumb was folded in / dropped,
       owner 2026-06-16), so the title is the first element and owns the gap down to the content */
    .iv-create-title { font-size: 29.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--iv-ink); margin: 2px 0 22px; }
    .iv-create-sub { font-size: 18px; color: var(--iv-ink-soft); margin: 0 0 24px; }
    /* the breadcrumb header every screen past ① wears — the mis-tap safety net */
    .iv-crumb { font-size: 18px; color: var(--iv-ink-soft); margin: 0 0 4px; }
    .iv-crumb b { color: var(--iv-ink); font-weight: 600; }
    /* spec 027 — occasion crumb with its icon (the lens fork's context anchor) */
    .iv-crumb-icon { display: flex; align-items: center; gap: 8px; }
    /* layered helper line under a box; the breathing example reads in ink against the soft label.
       Left margin tucks the helper under the box's TEXT line (border + control inset + padding),
       so the screen has two clean edges: boxes/buttons flush left, text lines flush at the inset. */
    .iv-helper { font-size: 17px; color: var(--iv-ink-soft); margin: 8px 2px 0 10px; }
    .iv-helper .rx-example { color: var(--iv-ink); }
    /* wizard buttons are content-sized and lighter than the full-width journey button
       (mockup .btn-primary: radius 10, no shadow, no chevron) */
    .iv-btn.iv-fit { width: auto; font-size: 18px; padding: 12px 20px; border-radius: 10px; box-shadow: none; }
    .iv-btn.iv-fit-sm { font-size: 17px; padding: 10px 18px; margin-top: 16px; }
    /* ⑤g the roster — the grown card's interior at full size (mockup "⑤g: roster") */
    .iv-create.iv-create-wide { max-width: 620px; }
    /* person rows are the shared ConversationRow component (its own stylesheet); only the
       container and the dashed add box are styled here */
    .iv-rrows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
    .iv-rrow-add { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px dashed var(--iv-line);
                   border-radius: 10px; padding: 11px 14px; }
    .iv-rbody { display: flex; flex-direction: column; flex: 1; min-width: 0; }
    .iv-flabel { display: block; font-size: 16px; font-weight: 600; color: var(--iv-ink); margin-bottom: 6px; }
    .iv-opt { font-weight: 400; font-size: 0.88em; color: var(--iv-ink-soft); }
    .iv-fhint { font-size: 14px; color: var(--iv-ink-soft); line-height: 1.5; margin: 8px 0 0; }
    /* a couple of warm, concrete examples — calm em-dash markers, not heavy bullets (spec 017) */
    .iv-examples { margin: 5px 0 0; padding: 0; list-style: none; }
    .iv-examples li { font-size: 14px; font-style: italic; color: var(--iv-ink-soft); line-height: 1.5;
                      position: relative; padding-left: 14px; }
    .iv-examples li::before { content: "—"; position: absolute; left: 0; font-style: normal; color: #c3c9d2; }
    .iv-cerror { font-size: 15px; color: var(--error-foreground-rest); margin: 14px 0 0; }

    /* questions room — single column: your questions + the ways to add ("who" is now its own stage) */
    .iv-setup { max-width: 620px; margin: 4px auto 28px; display: flex; flex-direction: column; gap: 22px; }
    /* spec 021 US5: the quiet reuse offer (mockup "Questions: reuse") */
    .iv-offer { background: var(--iv-pill); border-radius: 10px; padding: 12px 16px; font-size: 16px; color: var(--iv-ink-soft); }
    .iv-offer b { color: var(--iv-ink); }
    .iv-offer-link { background: none; border: none; padding: 0; font: inherit; font-size: 16px;
                     color: var(--iv-accent); cursor: pointer; }
    .iv-offer-link:hover:not(:disabled) { text-decoration: underline; }
    .iv-offer-link:disabled { opacity: .55; cursor: default; }
    /* (the old .iv-sec card-with-its-own-heading is gone — rooms wear the shared iv-roomhead /
       iv-roomintro scaffold and hang content in cards directly, owner 2026-06-12) */

    /* question rows */
    .iv-qrow { display: flex; gap: 12px; background: #fff; border: 1px solid var(--iv-line); border-radius: 12px; padding: 13px 14px 10px; margin-bottom: 10px; }
    .iv-qrow.editing { border-color: #C9D4E6; box-shadow: 0 0 0 3px rgba(44,74,126,.08); }
    /* drag-to-reorder (SortableJS): the grip is the affordance, the list is the sort container */
    .iv-qlist { display: flex; flex-direction: column; }
    .iv-qgrip { display: flex; align-items: center; flex: 0 0 auto; color: #c2cad8; cursor: grab; margin-top: 1px; touch-action: none; }
    .iv-qgrip:active { cursor: grabbing; }
    .iv-qrow:hover .iv-qgrip { color: var(--iv-ink-soft); }
    .iv-qgrip svg { width: 18px; height: 18px; }
    /* the gap left behind where the card will drop */
    .iv-qrow-ghost { opacity: .35; }
    .iv-qrow-ghost .iv-qbody { visibility: hidden; }
    /* the lifted card following the finger/cursor (forceFallback clone) */
    .iv-qrow-fallback { box-shadow: 0 10px 26px rgba(37,50,75,.20); border-color: var(--iv-accent); opacity: .97; cursor: grabbing; }
    .iv-qrow-chosen { cursor: grabbing; }
    .iv-qnum { width: 24px; height: 24px; border-radius: 50%; background: var(--iv-pill); color: var(--iv-accent);
               font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; }
    .iv-qbody { flex: 1; min-width: 0; }
    /* position-based opening guidance on the first question (gold stays reserved for the movie, so this
       uses the calm "your part" blue pill) */
    .iv-opening { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #EFEBE3; }
    .iv-opening-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--iv-pill); color: var(--iv-accent);
                       font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
    .iv-opening-chip svg { width: 13px; height: 13px; }
    .iv-opening-why { display: block; font-size: 14px; color: var(--iv-ink-soft); margin-top: 7px; line-height: 1.45; }
    .iv-qtext { font-size: 17.5px; color: var(--iv-ink); line-height: 1.45; }
    .iv-qactions { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
    .iv-qa { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--iv-ink-soft);
             cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; }
    .iv-qa:hover:not(:disabled) { color: var(--iv-accent); }
    .iv-qa:disabled { opacity: .35; cursor: default; }
    .iv-qa svg { width: 15px; height: 15px; }
    .iv-qa.del:hover { color: #b3402f; }
    .iv-qgrow { flex: 1; }
    .iv-editrow { display: flex; gap: 8px; margin-top: 8px; }
    .iv-btn-mini { font: inherit; font-size: 15.5px; font-weight: 600; border-radius: 8px; padding: 7px 14px; cursor: pointer; border: 1.5px solid transparent; }
    .iv-btn-mini.save { background: var(--iv-accent); color: #fff; }
    .iv-btn-mini.save:disabled { opacity: .55; cursor: default; }
    .iv-btn-mini.cancel { background: #fff; color: var(--iv-ink-soft); border-color: #D7DBE2; }

    /* add affordances — "write your own" is a slightly raised composer (frequent path); its
       placeholder carries the instruction, no label (the room says it once) */
    .iv-addq { margin-top: 20px; }
    .iv-composer { display: flex; gap: 8px; background: #fff; border: 1.5px solid #C9D4E6; border-radius: 12px; padding: 9px;
                   box-shadow: 0 1px 2px rgba(37,50,75,.06); transition: border-color .15s, box-shadow .15s; }
    .iv-composer:focus-within { border-color: var(--iv-accent); box-shadow: 0 0 0 3px rgba(44,74,126,.10); }
    .iv-composer-add { background: var(--iv-accent); color: #fff; border: none; border-radius: 9px; width: 44px; flex: 0 0 auto;
                       display: flex; align-items: center; justify-content: center; cursor: pointer; }
    .iv-composer-add:disabled { opacity: .5; cursor: default; }
    .iv-composer-add svg { width: 18px; height: 18px; }

    /* the two "ways" sit side by side as the secondary add options */
    .iv-ways { display: flex; flex-direction: row; gap: 10px; margin-top: 14px; }
    .iv-way { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 11px; background: #fff;
              border: 1px solid var(--iv-line); border-radius: 12px; padding: 13px 14px; cursor: pointer; text-align: left; font-family: inherit; }
    .iv-way:hover:not(:disabled) { border-color: #C9D4E6; }
    .iv-way:disabled { opacity: .55; cursor: default; }
    .iv-way-ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
    .iv-way-ico svg { width: 18px; height: 18px; }
    .iv-way.lib .iv-way-ico { background: #E7EDF6; color: var(--iv-accent); }
    .iv-way.ai .iv-way-ico { background: var(--iv-gold-bg); color: var(--iv-gold); }
    .iv-way-txt { display: flex; flex-direction: column; min-width: 0; }
    .iv-way-t { font-size: 16.5px; font-weight: 600; color: var(--iv-ink); }
    .iv-way-s { font-size: 13.5px; color: var(--iv-ink-soft); line-height: 1.35; }
    @media (max-width: 560px) { .iv-ways { flex-direction: column; } }

/* ============================================================================
   Spec 027 — occasion in-card setup flow (the 3-beat numbered-rail accordion).
   GLOBAL (was per-builder scoped CSS) so the dumb shared primitives
   (OccasionLetterhead / OccasionRailStep / OccasionNameBeat / OccasionDetailsBeat /
   OccasionYesNo / OccasionPersonRow / OccasionAddRow) and every occasion builder
   that composes them share one stylesheet. See HonoringLifeBuilder.razor et al.
   ============================================================================ */
.oc-card { padding: 6px 20px 20px; animation: oc-card-in .3s ease both .06s; }
@keyframes oc-card-in { from { opacity: 0; } to { opacity: 1; } }

/* centered occasion letterhead — the occasion icon inline with the title, a short rule with air beneath */
.oc-hrow { display: flex; align-items: center; justify-content: center; gap: 9px; }
.oc-mark { display: inline-flex; align-items: center; }
.oc-mark svg { width: 21px; height: 21px; }
.oc-occ { font-family: var(--iv-head, 'Fraunces', Georgia, serif); font-size: 19px; font-weight: 600; color: var(--iv-ink); }
.oc-rule { width: 52px; height: 2px; border-radius: 1px; background: #DDE2EA; margin: 13px auto 18px; }

/* past beat 1 the letterhead recedes to a small, left-aligned crumb — a quiet thread of identity */
.oc-crumb { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.oc-crumb-mark { display: inline-flex; align-items: center; }
.oc-crumb-mark svg { width: 14px; height: 14px; }
.oc-crumb-label { font-size: 13px; font-weight: 600; color: var(--iv-ink-soft); }

/* the numbered journey rail: progress + content are one system */
.oc-step { display: flex; gap: 13px; }
.oc-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 26px; }
.oc-node {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
    border: 2px solid #DDE2EA; color: #A7AEBA; background: #fff; flex: 0 0 auto;
}
.oc-node.done { background: var(--iv-accent); border-color: var(--iv-accent); color: #fff; }
.oc-node.cur { border-color: var(--iv-accent); color: var(--iv-accent); background: var(--iv-tint, #EEF2F8); }
.oc-conn { width: 2px; flex: 1; background: var(--iv-accent); margin: 3px 0; min-height: 16px; }
.oc-conn.dim { background: #E4E7ED; }
.oc-body { flex: 1; min-width: 0; padding-bottom: 15px; }

/* the active beat's question (warm serif) */
.oc-q { font-family: var(--iv-head, 'Fraunces', Georgia, serif); font-size: 17px; font-weight: 600; color: var(--iv-ink); margin: 3px 0 10px; }
.oc-q-tight { margin-top: 0; }
.oc-lead { font-size: 13.5px; color: var(--iv-ink-soft); margin: -4px 0 12px; }

.oc-inline { display: flex; gap: 12px; align-items: center; }

/* a completed beat = plain text (no box — the rail check says "done"), pencil tucked beside the value */
.oc-done {
    display: flex; align-items: baseline; gap: 7px;
    width: 100%; text-align: left;
    padding: 6px 2px; background: none; border: none; cursor: pointer; font-family: inherit;
}
.oc-done-lab { font-size: 13px; color: var(--iv-ink-soft); flex: 0 0 auto; }
.oc-done-dot { color: var(--iv-ink-soft); }
.oc-done-val { font-size: 14.5px; font-weight: 600; color: var(--iv-ink); }
.oc-done-pen { color: var(--iv-accent); font-size: 18px; margin-left: 2px; }

/* a ghost row = an upcoming beat, previewed faintly so the finish is visible from where you stand */
.oc-ghost { font-size: 15px; color: #AEB3BD; font-weight: 500; padding-top: 3px; }
.oc-ghost-sub { font-size: 12.5px; color: #C3C7CF; display: block; margin-top: 2px; font-weight: 400; }

/* drifting single-example hint (beat 1) */
.oc-hint { font-size: 13px; color: #8a8f9a; margin-top: 10px; min-height: 20px; }

/* spec 029 — the open builder's quiet person/topic reflection: a statement of what we heard + ONE flip
   link (the quiet-choices pattern — never a radio/checkbox) */
.oc-reflect { font-size: 14px; color: #5f6674; margin: 2px 0 12px; }
.oc-flip { background: none; border: none; padding: 0; font: inherit; color: var(--iv-accent, #2C4A7E); cursor: pointer; }
.oc-flip:hover { text-decoration: underline; }

/* live char counter (beat 2) — the scrolling example "lives" beneath it are the shared SubjectLifeExamples */
.oc-count { text-align: right; font-size: 12px; color: #a7adb8; margin-top: 4px; height: 15px; opacity: 0; transition: opacity .2s ease; }
.oc-count.show { opacity: 1; }

/* ③ the two status-neutral yes/no questions */
.oc-qrow { display: flex; align-items: center; gap: 14px; padding: 12px 0 12px 2px; }
.oc-qrow + .oc-qrow { border-top: 1px solid #F2EEE7; }
.oc-qtext { flex: 1; font-size: 15px; color: var(--iv-ink); }
.oc-seg { display: flex; border: 1px solid #E4DDD0; border-radius: 9px; overflow: hidden; flex: 0 0 auto; }
.oc-seg button { background: #fff; border: none; padding: 8px 17px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--iv-ink-soft); cursor: pointer; }
.oc-seg button + button { border-left: 1px solid #E4DDD0; }
.oc-seg button.on { background: var(--iv-accent); color: #fff; }
.oc-seg button:hover:not(.on) { color: var(--iv-accent); background: #F6F7FB; }

/* the resolved "we'll talk to" grammar line + the witness group */
.oc-wt { display: flex; align-items: baseline; gap: 7px; padding: 10px 2px 2px; }
.oc-wt-lab { font-size: 13px; color: var(--iv-ink-soft); flex: 0 0 auto; }
.oc-wt-val { font-size: 15px; font-weight: 600; color: var(--iv-ink); }
.oc-wt-pen { background: none; border: none; cursor: pointer; color: var(--iv-accent); font-size: 18px; padding: 0 4px; line-height: 1; }
.oc-grouplab { font-size: 13px; color: var(--iv-ink-soft); margin: 12px 0 6px 2px; }

/* each person we'll talk with — name + a relationship field (the field is the descriptor) */
.oc-need {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 13px; margin: 8px 0;
    background: #F6F7FB; border: 1px solid var(--iv-accent); border-radius: 12px;
}
.oc-need.err { border-color: #C9534B; background: #FCF4F3; }
.oc-need-body { flex: 1; min-width: 0; }
.oc-need-name { font-size: 15px; font-weight: 600; color: var(--iv-ink); }
.oc-relfield {
    width: 100%; height: 34px; box-sizing: border-box;
    border: 1px solid #D9E0EA; border-radius: 8px; padding: 0 11px;
    font-family: inherit; font-size: 13.5px; color: var(--iv-ink); background: #fff; margin-top: 7px;
}
.oc-relfield.err { border-color: #C9534B; }
.oc-relfield::placeholder { color: #a7adb8; }
.oc-required { font-size: 12px; color: #C9534B; margin-top: 4px; font-weight: 600; }
.oc-need-x { flex: 0 0 auto; background: none; border: none; cursor: pointer; font-size: 20px; color: #9aa0ad; line-height: 1; }
.oc-need-x:hover { color: var(--iv-accent); }

.oc-addrow { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.oc-addrow input {
    flex: 1; height: 40px; box-sizing: border-box;
    border: 1px solid var(--iv-line); border-radius: 9px; padding: 0 12px;
    font-family: inherit; font-size: 14px; color: var(--iv-ink); background: #fff;
}
.oc-addrow input::placeholder { color: #9aa0ad; }
.oc-mini {
    border: 1px solid var(--iv-line); background: #fff; border-radius: 9px; padding: 0 15px; height: 40px;
    font-family: inherit; font-size: 14px; color: var(--iv-accent); cursor: pointer; font-weight: 600;
}
.oc-mini:disabled { color: #b7bcc6; cursor: default; }

/* warm block when both questions are "No" */
.oc-block {
    margin-top: 12px; padding: 11px 13px;
    background: #FBF3E2; border: 1px solid #E7D6AE; border-radius: 11px;
    font-size: 13.5px; color: #6b6048;
}

/* spec 028 increment 0 — the "ask everyone the same questions" quiet flip (statement + soft link, never a
   checkbox); sits under the circle's people list, above the lock */
.oc-sameq { padding: 12px 2px 0; font-size: 13px; }
.oc-sameq-lab { color: var(--iv-ink-soft); }
.oc-sameq-flip {
    background: none; border: none; cursor: pointer; padding: 0 0 0 4px;
    font-family: inherit; font-size: 13px; color: var(--iv-accent);
}
.oc-sameq-flip:hover { text-decoration: underline; }

/* one lock at the floor — ends the setup; greyed only when nothing is chosen yet */
.oc-lock {
    margin-top: 16px; width: 100%;
    background: var(--iv-accent); color: #fff; border: none; border-radius: 10px;
    padding: 12px 18px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.oc-lock.off { background: #EDEAE3; color: #b0ada4; cursor: default; }

/* weddings (multi-subject): name both partners in beat 1, and a per-guest "who are they here for?" focus */
.oc-pair { display: flex; align-items: center; gap: 10px; }
.oc-pair-amp { color: var(--iv-ink-soft); font-family: var(--iv-head, 'Fraunces', Georgia, serif); font-size: 16px; }
.wd-focusrow { display: flex; align-items: center; gap: 9px; margin: 9px 0 2px; flex-wrap: wrap; }
.wd-focuslab { font-size: 12.5px; color: var(--iv-ink-soft); flex: 0 0 auto; }
.wd-seg button { padding: 6px 12px; font-size: 13px; }

/* spec 027 add-a-voice — the "add one more voice to this story" form on the occasion roster: stacks a name
   box, the optional [A][B][Both] focus, and a required relationship over the shared oc-* primitives. */
.oc-addvoice {
    display: flex; flex-direction: column; gap: 9px; align-items: stretch;
    padding: 13px; margin-top: 10px;
    background: #F6F7FB; border: 1px solid var(--iv-line); border-radius: 12px;
}
.oc-av-name {
    width: 100%; height: 40px; box-sizing: border-box;
    border: 1px solid var(--iv-line); border-radius: 9px; padding: 0 12px;
    font-family: inherit; font-size: 14px; color: var(--iv-ink); background: #fff;
}
.oc-av-name::placeholder { color: #9aa0ad; }
.oc-addvoice .oc-relfield { margin-top: 0; }
.oc-addvoice .wd-focusrow { margin: 1px 0; }
.oc-av-add { align-self: flex-start; }

@media (prefers-reduced-motion: reduce) { .oc-card { animation: none; } }