/* =========================================================================
   mirror — styles
   A conversation with yourself, guided by curiosity.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Design tokens (added 2026-05-30, foundation-v1 — Direction D + G)
   Single source of truth for color, type, space, radius, motion.
   INK tokens are WCAG-checked: --ink … --ink-faint all clear AA (>=4.5:1) on
   the light surfaces (--bg / --surface); the *-on-dark pair clears AA on
   --brand-deep. Migration is incremental — legacy hardcoded hex (e.g. var(--ink-muted),
   var(--ink-faint), #999 muted text) is being pointed at these over time; see the
   hex->token map in docs/plan-2026-05-26/forward-motion-2026-05-30.md.
   Caveat: some muted hex sits on DARK panels — use --ink-muted-on-dark there,
   not --ink-muted, when migrating those rules.
   --------------------------------------------------------------------------- */
:root {
    /* Brand / accent */
    --brand: #3a4a6b;             /* primary navy — buttons, accents, links */
    --brand-deep: #26344d;        /* dark panels */
    --brand-mid: #6b8cae;         /* lighter slate — gradients, hover */

    /* Ink (text) — WCAG AA on --bg and --surface */
    --ink: #1c2331;               /* primary body (~13:1) */
    --ink-strong: #141a26;        /* headings / emphasis */
    --ink-secondary: #3f4a5d;     /* secondary (~7:1) */
    --ink-muted: #525d6e;         /* muted/helper (~6:1) — replaces var(--ink-muted)/var(--ink-muted) on light bg */
    --ink-faint: #5e6a7c;         /* faintest readable (~4.7:1) — replaces var(--ink-faint)/#999/#888 on light bg */
    --ink-on-dark: #e8edf3;       /* text on --brand-deep */
    --ink-muted-on-dark: #aab6c6; /* muted text on --brand-deep (>=4.5:1) */

    /* Surfaces */
    --bg: #f0f2f5;                /* page background */
    --surface: #ffffff;          /* cards */
    --surface-subtle: #f7f9fb;   /* subtle raised panels */
    --surface-sunken: #eef2f7;   /* insets */
    --border: #d8dee7;           /* hairlines */
    --border-strong: #c2cad6;

    /* Signal colors (portrait paragraph signals, status pills) */
    --signal-affirm: #386b4b;    /* green */
    --signal-amber: #6e5e2b;     /* gold */
    --signal-rose: #7a2828;      /* correction / red */

    /* Type */
    --font-serif: 'Georgia', 'Times New Roman', serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.5rem;
    --text-display: 3.5rem;
    --leading: 1.6;
    --leading-tight: 1.3;

    /* Space (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* Radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.12s;
    --dur: 0.2s;
    --dur-slow: 0.35s;

    /* Elevation */
    --shadow-sm: 0 1px 3px rgba(28, 35, 49, 0.08);
    --shadow-md: 0 4px 16px rgba(28, 35, 49, 0.10);

    /* Focus ring (a11y) */
    --focus-ring: 0 0 0 3px rgba(58, 74, 107, 0.45);
}

/* Accessibility: honor reduced-motion globally (Direction G) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Accessibility: a visible, consistent keyboard focus ring (Direction G).
   Mouse clicks won't trigger :focus-visible, so this only shows for keyboard
   users — no visual cost to pointer users. */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* Portrait depth toggle (presentation-mode-v1) — user-controlled "how much to
   show". Render-only: glance hides the full body, full shows it. Tokens + a 44px
   tap target (a11y). */
.portrait-depth-toggle {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    margin: 0 0 var(--space-4);
}
.depth-pill {
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    color: var(--ink-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    min-height: 44px;
    cursor: pointer;
    transition: color var(--dur) var(--ease),
                background var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.depth-pill:hover { color: var(--ink); border-color: var(--border-strong); }
.depth-pill-active,
.depth-pill-active:hover {
    color: var(--surface);
    background: var(--brand);
    border-color: var(--brand);
}
/* Glance mode: show only the summary; hide the full body + its lens strip. */
body.pmode-glance #portrait-content,
body.pmode-glance #portrait-lens-strip { display: none !important; }

/* Grounding bar (revamp-v1, Direction E) — a whisper-quiet FIXED top bar: the
   wordmark is always home + one contextual "you are here" label. Fixed so it
   never becomes a flex child of a centering body (can't disturb layout). Uses
   only existing palette tokens (no color-scheme change). */
.grounding-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--space-5);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.grounding-home {
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}
.grounding-home:hover { color: var(--ink); }
.grounding-context {
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    color: var(--ink-faint);
}
.grounding-context:not(:empty)::before {
    content: "·";
    margin: 0 var(--space-3);
    color: var(--ink-faint);
}

/* Sessions experiment (always-live branch, 2026-06-18): a session tag + overall-progress bar, right-aligned
   in the grounding bar. margin-left:auto on both so whichever shows first gets pushed to the right end. */
.grounding-session {
    margin-left: auto;
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    color: var(--ink-faint);
    white-space: nowrap;
}
.grounding-progress {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}
.grounding-session:not([hidden]) + .grounding-progress { margin-left: var(--space-3); }
/* Mobile: the nowrap session tag + the fixed-width bar could overflow off the right edge on narrow
   screens — let the tag ellipsize and drop the secondary in-progress bar below a breakpoint (S9). */
@media (max-width: 480px) {
    .grounding-session { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
    .grounding-progress { display: none; }
}
.grounding-progress-track {
    display: inline-block;
    width: 60px;
    height: 5px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}
.grounding-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--ink-muted);
    transition: width 0.6s ease;
}
/* Bonus stretch (units-clarity, 2026-06-22): once the necessary core set (10) is crossed, the bar
   refills toward the ceiling (20) in a brighter accent — signalling "bonus", not the core run. */
.grounding-progress-bonus .grounding-progress-fill { background: #6f86ad; }
.grounding-progress-label {
    font-family: var(--font-serif);
    font-size: 0.72rem;
    color: var(--ink-faint);
}
/* Portrait-page variant (standalone page, centered under the title). */
.portrait-session-tag {
    display: flex; align-items: center; justify-content: center; gap: 0.9rem;
    margin-top: 0.5rem; font-family: var(--font-serif); font-size: 0.85rem; color: #8a93a3;
}
/* (the portrait-page progress-bar rules were removed with the overall-% — the portrait shows the
   unit COUNT only; the in-progress bar is a live session-page affordance. 2026-06-19) */

/* ---------------------------------------------------------------------------
   Always-present shell (revamp-v1) — the persistent 3-tab frame on product
   pages (session + portrait). Single centered column; the page's own panels
   stack inside. Reuses the existing .portrait-tabs styling for the nav.
   --------------------------------------------------------------------------- */
.shell {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.shell-tabs {
    margin-bottom: var(--space-5);
}
/* Tab row deferred on the session page until the first real question (fresh-eyes wave-2) — keeps
   the starter screen calm instead of showing 5 tabs of unearned/empty surfaces. */
.shell-tabs.shell-tabs-deferred { display: none; }
.shell-empty {
    max-width: 600px;
    margin: var(--space-8) auto;
    padding: var(--space-6);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.shell-empty-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--text-xl);
    color: var(--ink);
    margin: 0 0 var(--space-3);
}
.shell-empty-body {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--ink-muted);
    margin: 0 0 var(--space-5);
}
.shell-empty-action {
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    color: var(--surface);
    background: var(--brand);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    min-height: 44px;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
.shell-empty-action:hover { background: var(--brand-deep); }
/* Slice B: capability cards rendered inside the Advisor/Together tabs. */
.shell-cap-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    text-align: left;
}

/* ---------------------------------------------------------------------------
   Reset and base
   --------------------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-serif);
    color: var(--ink);
    background: var(--bg);
    line-height: var(--leading);
    min-height: 100vh;
}

.deploy-badge {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 10000;
    max-width: min(22rem, calc(100vw - 1.5rem));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.3rem 0.45rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.68rem;
    line-height: 1.2;
    color: rgba(28, 35, 49, 0.62);
    background: rgba(240, 242, 245, 0.86);
    border: 1px solid rgba(58, 74, 107, 0.16);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(28, 35, 49, 0.06);
    backdrop-filter: blur(6px);
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Landing page
   --------------------------------------------------------------------------- */

.landing-body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.landing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.landing-title {
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    background: linear-gradient(135deg, #3a4a6b, #6b8cae, #a0b4c8, #6b8cae, #3a4a6b);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 6s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.landing-tagline {
    font-size: 1.15rem;
    color: var(--ink-muted);
    font-style: italic;
    max-width: 360px;
    line-height: 1.7;
}

.landing-preview {
    max-width: 400px;
    text-align: center;
}

.landing-preview-label {
    font-size: 0.85rem;
    color: var(--ink-faint);
    margin-bottom: 0.75rem;
    font-style: italic;
}

.landing-preview-box {
    background: linear-gradient(135deg, rgba(58, 74, 107, 0.04), rgba(107, 140, 174, 0.06));
    border: 1px solid rgba(107, 140, 174, 0.15);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    text-align: left;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

.landing-preview-box p {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: var(--ink-muted);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.landing-preview-box p:last-child {
    margin-bottom: 0;
}

.landing-footer {
    margin-top: 1.75rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.landing-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.landing-error {
    max-width: 32rem;
    margin: 1rem auto 0;
    padding: 0.75rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    color: #5a3a3a;
    background: #f7eded;
    border: 1px solid #d6b8b8;
    border-radius: 3px;
    text-align: center;
}
/* Sign-in SUCCESS (?signin=ok) reuses the .landing-error element but must not look like an error. */
.landing-error.landing-status-ok {
    color: var(--ink-secondary);
    background: var(--surface-subtle);
    border-color: var(--border);
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.begin-button {
    display: inline-block;
    padding: 0.85rem 2.8rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #3a4a6b;
    background: transparent;
    border: 1.5px solid #3a4a6b;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.05em;
}

.begin-button:hover {
    background: #3a4a6b;
    color: #f0f2f5;
}

.begin-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Begin is the single primary CTA — give it real weight (filled, not ghost). */
.begin-button {
    background: #3a4a6b;
    color: #f0f2f5;
}

.begin-button:hover {
    background: #26344d;
    border-color: #26344d;
    color: #f0f2f5;
}

/* Disabled couple-mode stub on landing — dashed border + reduced opacity
   signals "coming soon" without claiming it works yet. */
.begin-button-disabled,
.begin-button:disabled {
    opacity: 0.5;
    border-style: dashed !important;
    cursor: not-allowed;
}

.begin-button-disabled:hover {
    background: transparent;
    color: #3a4a6b;
}

/* ---------------------------------------------------------------------------
   Session page
   --------------------------------------------------------------------------- */

.session-body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8vh;
}

/* Obs 7 (founder test, 2026-06-13): the session content column was a shrink-to-fit flex
   child of the centered body, so it tracked its WIDEST visible content and re-centered —
   which made the Possibilities accordion (and tab switches) change the column WIDTH on
   expand, reading as a horizontal shift instead of a vertical expand. Pin it to a stable
   ≤1100 column so expansion changes only HEIGHT. The inner .shell still caps + centers at
   1100; tabs with their own max-widths (Portrait 640, Advisor/Together 600) are unaffected. */
body.session-body #main-content {
    width: 100%;
    max-width: 1100px;
    box-sizing: border-box;
}

.session-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1100px;
    gap: 2rem;
    padding: 0 2rem;
}

.session-container {
    flex: 1;
    max-width: 640px;
    padding: 2rem 0;
    position: relative;
}

/* ---------------------------------------------------------------------------
   Model panel (desktop sidebar)
   --------------------------------------------------------------------------- */

.model-panel {
    width: 340px;
    flex-shrink: 0;
    padding: 2rem 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    position: sticky;
    top: 8vh;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
}

.model-panel.visible {
    opacity: 1;
    pointer-events: auto;
}

.model-panel-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #d5dbe3;
}

.model-panel-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}

.model-panel-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.model-panel-content::-webkit-scrollbar {
    width: 3px;
}

.model-panel-content::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

.model-paragraph {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #4a5568;
    margin-bottom: 1rem;
    animation: modelFadeIn 0.5s ease forwards;
}

/* Obs#3B (friend walkthrough, 2026-06-13): "the whole picture" should read as a
   portrait you can scan. The organizing thesis leads (larger, weightier); the
   "Reads worth keeping alive" set becomes a soft label + quietly left-railed rows —
   scannable WITHOUT becoming a bullet list (the perceptive-friend register holds). */
.model-paragraph-lead {
    font-size: 1.06rem;
    line-height: 1.55;
    font-weight: 500;
    color: #2f3a4d;
    margin-bottom: 1.15rem;
}
.model-reads-label {
    margin: 1.35rem 0 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.model-read-row {
    padding-left: 0.7rem;
    border-left: 2px solid rgba(73, 99, 144, 0.28);
    margin-bottom: 0.6rem;
}
.model-read-row strong { color: #2f3a4d; }

/* M-D Step 1 (2026-05-25): section headers produced by the model_updater
   once the document grows past ~200 words. Headers are organization, not
   personality claims, so they get a softer visual treatment and skip the
   right/wrong/edit reaction row. Letter-spacing + small caps signal
   "label", not "content"; the thin underline carries the section break. */
.model-section-header {
    margin: 1.5rem 0 0.65rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(73, 99, 144, 0.25);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    animation: modelFadeIn 0.5s ease forwards;
}

/* First section header in the panel shouldn't have a giant top margin
   (the panel already has its own padding). */
.model-panel-content > .model-section-header:first-child,
.model-fullscreen-content > .model-section-header:first-child {
    margin-top: 0.25rem;
}

/* F5 (2026-05-26): the portrait page's version of the section divider.
   Same visual language as .model-section-header — small caps, letter-
   spacing, thin underline — but scaled for the portrait page's larger
   paragraph size and more spacious layout. Section headers are
   organization markers, not personality claims, so they skip the
   correction row (yes / not_me / more / less / soften). */
.portrait-section-header {
    margin: 2rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(73, 99, 144, 0.3);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* First header on the portrait page doesn't need a giant top margin
   (the portrait-content container already provides spacing above). */
.portrait-content > .portrait-section-header:first-child {
    margin-top: 0.4rem;
}

.model-para-wrapper {
    position: relative;
    margin-bottom: 1rem;
}

.model-para-wrapper .model-paragraph {
    margin-bottom: 0.25rem;
}

.model-reactions {
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.model-para-wrapper:hover .model-reactions {
    opacity: 1;
}

.model-react-btn {
    font-family: var(--font-serif);
    font-size: 0.75rem;
    color: #bbb;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    transition: color 0.2s ease;
}

.model-react-btn:hover {
    color: #666;
}

.model-paragraph.editing {
    outline: none;
    border: 1px dashed #6b8cae;
    border-radius: 3px;
    padding: 0.5rem;
    background: #fff;
}

.model-edit-save {
    margin-top: 0.25rem;
}

.model-save-btn {
    color: #1a1a1a;
    font-weight: 400;
}

.model-empty-state {
    font-size: 0.9rem;
    color: #bbb;
    font-style: italic;
}

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

/* ---------------------------------------------------------------------------
   Model toggle (mobile floating button)
   --------------------------------------------------------------------------- */

.model-toggle {
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 1.5rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: #3a4a6b;
    color: #f0f2f5;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    /* Opacity-only transition (no scale): a labelled pill that stays calm. */
    transition: opacity 0.3s ease;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
}

.model-toggle.visible {
    opacity: 1;
    pointer-events: auto;
}

.model-toggle:hover {
    background: #45557a;
}

.model-toggle-icon {
    font-size: 1rem;
    line-height: 1;
}

.model-toggle-label {
    white-space: nowrap;
    font-weight: 500;
}


/* ---------------------------------------------------------------------------
   Model fullscreen (mobile view)
   --------------------------------------------------------------------------- */

.model-fullscreen {
    position: fixed;
    inset: 0;
    background: #f0f2f5;
    z-index: 200;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

.model-fullscreen.active {
    transform: translateX(0);
}

.model-fullscreen-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #d5dbe3;
}

.model-back-btn {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 0.2s ease;
}

.model-back-btn:hover {
    color: #1a1a1a;
}

.model-fullscreen-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
}

.model-fullscreen-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.model-fullscreen-content .model-paragraph {
    font-size: 1.05rem;
    color: #333;
}

/* Progress bar */
.progress-bar {
    width: 100%;
    height: 2px;
    background: #d5dbe3;
    margin-bottom: 3rem;
    border-radius: 1px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3a4a6b, #6b8cae);
    width: 0%;
    transition: width 0.6s ease;
    border-radius: 1px;
}

/* Question */
.question-area {
    margin-bottom: 2.5rem;
    transition: opacity 0.35s ease, transform 0.35s ease;
    opacity: 1;
    transform: translateY(0);
}

.question-area.transitioning {
    opacity: 0;
    transform: translateY(12px);
}

.question-area.processing {
    opacity: 0.4;
    transition: opacity 0.5s ease;
}

.question-preamble {
    font-size: 1rem;
    line-height: 1.7;
    color: #5a6d82;
    font-style: italic;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #d5dbe3;
    animation: modelFadeIn 0.6s ease forwards;
}

/* (The contenteditable hover/focus underline + the edit hint were removed with the
   rewrite-question affordance, 2026-06-12 — reconsider item in docs/roadmap.md Track 1.) */
.question-text {
    font-size: 1.35rem;
    line-height: 1.65;
    color: #1c2331;
    font-weight: 400;
}

.question-subtext {
    font-size: 0.92rem;
    color: #888;
    font-style: italic;
    margin-top: 0.75rem;
}

/* HARMONY_LANE V2: Mirror's thinking-aloud line under the question — deliberately the
   same family as .question-preamble so observation (above) and wondering (below)
   bracket the question in one voice. No border: it belongs to the question. */
.question-wondering {
    font-size: 1rem;
    line-height: 1.7;
    color: #5a6d82;
    font-style: italic;
    margin-top: 0.85rem;
    animation: modelFadeIn 0.6s ease forwards;
}

/* Founder round 5: the tappable possibilities live INSIDE the wondering sentence
   (the under-box chips are retired). A wondering-link keeps the musing register —
   same ink, same italic — and only a soft dashed underline says "tappable".
   Tapping copies the phrase into the box; "something else" clears it. */
.wondering-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-style: inherit;
    color: #44566b;
    border-bottom: 1px dashed #9fb0c3;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.wondering-link:hover {
    color: #1c2331;
    border-bottom-color: #6b8cae;
}
.wondering-link:active { opacity: 0.8; }
.wondering-link-other {
    color: #7a8899;
}

/* (The full-page New Chat composer styles were removed 2026-06-12 — the ✏️ tile
   now starts a fresh thread over the same memory; git history holds the page.) */

/* Answer area */
.answer-area {
    margin-bottom: 1.5rem;
    transition: opacity 0.35s ease, transform 0.35s ease;
    opacity: 1;
    transform: translateY(0);
}

.answer-area.transitioning {
    opacity: 0;
    transform: translateY(12px);
}

.answer-area.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Free text lead area (for choice questions) */
.choice-freeform-lead {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.choice-freeform-lead .text-input {
    min-height: 60px;
}

.choice-divider-label {
    font-size: 0.85rem;
    color: var(--ink-faint);
    text-align: center;
    margin: 0.5rem 0;
    font-style: italic;
}

/* Choice buttons */
.choice-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.choice-button {
    display: block;
    width: 100%;
    padding: 1rem 1.25rem;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: #1c2331;
    background: #fff;
    border: 1px solid #c8d0da;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.choice-button {
    cursor: text;
    outline: none;
}

.choice-button:hover {
    border-color: #3a4a6b;
    background: #f7f9fc;
}

.choice-button:focus {
    border-color: #6b8cae;
    border-style: dashed;
    background: #fff;
}

.choice-button.selected {
    border-color: #3a4a6b;
    background: #3a4a6b;
    color: #f0f2f5;
}

/* Group 2: Respond differently row */
.choice-alt-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.choice-alt-btn {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0;
    transition: color 0.2s ease;
}

.choice-alt-btn:hover {
    color: #3a4a6b;
}

.choice-alt-sep {
    color: #ccc;
    line-height: 1.5;
}

.choice-complicated-area {
    margin-top: 0.5rem;
}

.choice-complicated-btns {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 0.4rem;
}

/* Freeform option on choice questions */
.choice-freeform {
    /* no extra margin — contained in alt-row */
}

.choice-freeform-toggle {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #777;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem 0;
    font-style: italic;
    transition: color 0.2s ease;
}

.choice-freeform-toggle:hover {
    color: #444;
}

.choice-freeform-input {
    display: none;
    margin-top: 0.5rem;
}

.choice-freeform.expanded .choice-freeform-toggle {
    display: none;
}

.choice-freeform.expanded .choice-freeform-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.choice-freeform-textarea {
    min-height: 80px;
}

.choice-freeform-send {
    align-self: flex-end;
}

/* Text input */
.text-input {
    width: 100%;
    padding: 1rem 1.25rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #1c2331;
    background: #fff;
    /* Gentle promotion graduated from the #4 bake-off (2026-06-20): a slightly more
       defined resting border + a whisper of shadow, so the input reads as the primary
       place to act without shouting. Tiles stayed as-is (founder kept control). */
    border: 1.5px solid #aeb9c8;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(40, 60, 90, 0.05);
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.text-input:focus {
    outline: none;
    border-color: #3a4a6b;
}

.text-input::placeholder {
    color: #9aa5b4;
    font-style: italic;
}

/* Navigation area */
.nav-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity 0.2s ease;
}

.nav-area.hidden {
    opacity: 0;
    pointer-events: none;
}

.submit-button {
    padding: 0.7rem 2rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #f0f2f5;
    background: #3a4a6b;
    border: 1.5px solid #3a4a6b;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.03em;
}

.submit-button:hover {
    background: #4a5c7d;
}

/* Early exit / skip button */
.exit-button {
    padding: 0.5rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: #888;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.02em;
}

.exit-button:hover {
    color: #555;
    border-color: #bbb;
}

/* Polish for the "Show me what you can help with now" button (E4 M-C bridge,
   placement polish 2026-05-25 evening per research signal that the chip
   needs to be more prominent). Lives alongside the other nav-area buttons
   but reads as a primary call-to-action when visible — light blue tint,
   stronger border, slightly larger touch target. The intent: testers
   shouldn't have to scan a row of grey utility buttons to notice it. */
.exit-button#show-uses-btn {
    background: rgba(73, 130, 184, 0.06);
    border: 1px solid rgba(73, 130, 184, 0.25);
    color: #3a5a7b;
    padding: 0.5rem 0.95rem;
    border-radius: 18px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(73, 130, 184, 0.08);
}

.exit-button#show-uses-btn:hover {
    background: rgba(73, 130, 184, 0.12);
    border-color: rgba(73, 130, 184, 0.45);
    color: #2d4a68;
}

/* Reverse styling: in case any future need to make it look like a normal
   utility button again, remove the rule block above. */

.save-button {
    padding: 0.5rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--ink-faint);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.02em;
    margin-left: auto;
}

.save-button:hover {
    color: #6b8cae;
    border-color: #c8d0da;
}

.save-button.save-confirmed {
    color: #6b8cae;
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   Nav area layout
   --------------------------------------------------------------------------- */

.nav-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* ---------------------------------------------------------------------------
   Response mode picker
   --------------------------------------------------------------------------- */

.response-modes {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1.25rem;
    transition: opacity 0.2s ease;
}

/* When positioned at the top of the page, the mode tiles work as a
   tab strip: tighter top margin, subtle separating border below, centered
   so the steering channels feel like a persistent top-level affordance
   rather than a footer. PRINCIPLES.md #1, #28. */
.response-modes-top {
    margin-top: 0;
    margin-bottom: 1.2rem;
    padding: 0.65rem 0 0.85rem;
    border-bottom: 1px solid #e1e7ed;
    align-items: center;
}

.response-modes-top .response-modes-tiles {
    justify-content: center;
}

.response-modes-explainer {
    font-size: 0.85rem;
    color: var(--ink-muted, #525d6e);   /* a clear label, not a faint aside */
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
}

.response-modes-top .response-modes-explainer {
    text-align: center;
}

.response-modes-tiles {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.response-modes.hidden {
    opacity: 0;
    pointer-events: none;
}

.mode-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 56px;
    background: #fff;
    border: 1px solid #b3bfcd;          /* a touch more defined than the old faint hairline */
    border-radius: 8px;
    cursor: pointer;
    padding: 0.3rem 0;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(40, 60, 90, 0.06);   /* reads as raised / actionable, not flat */
}

.mode-tile:hover {
    border-color: #6b8cae;
    background: #f7f9fc;
}

.mode-tile.active {
    border-color: #3a4a6b;
    background: #f0f4f8;
}

.mode-tile-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.mode-tile-label {
    font-family: var(--font-serif);
    font-size: 0.78rem;
    color: var(--ink-muted, #525d6e);   /* readable, not greyed-out */
    margin-top: 0.2rem;
    letter-spacing: 0.02em;
}

.mode-tile.active .mode-tile-label {
    color: #333;
}

/* ---------------------------------------------------------------------------
   Starter menu
   --------------------------------------------------------------------------- */

/* (S15: .starter-subtitle removed — unused; the menu emits .starter-heading.) */

.starter-heading {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: #1c2331;
    text-align: center;
    margin: 0.5rem auto 1rem;
    font-style: italic;
}

.starter-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.starter-line-tile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.85rem 1.1rem;
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #1c2331;
    background: #fff;
    border: 1px solid #c8d0da;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.08s ease;
}

.starter-line-tile:hover {
    border-color: #3a4a6b;
    background: #f5f8fc;
    transform: translateX(3px);
}

.starter-line-tile:active {
    transform: translateX(3px) scale(0.99);
}

.starter-line-tile:focus-visible {
    outline: 2px solid #3a4a6b;
    outline-offset: 2px;
}

.starter-line-tile-icon {
    font-size: 1.45rem;
    flex-shrink: 0;
    width: 1.9rem;
    text-align: center;
    line-height: 1;
}

.starter-line-tile-phrase {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #1c2331;
    line-height: 1.4;
}

/* (The "Or warm up with —" starter row styles were removed 2026-06-12 — the either/or
   round is a fifth equal tile in the main stack now, founder decision.) */

/* ---------------------------------------------------------------------------
   Media browser sections — clearer visual separation per triage 2026-05-15 #4.
   Each section (type input / genre chips / grid / refinements) gets a small
   italic label and breathing-room margin.
   --------------------------------------------------------------------------- */

.media-section-label {
    margin: 0 0 0.4rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
}

/* Give each section (label + content pair) clear vertical breathing room.
   The first .media-section-label has no top margin; subsequent labels get
   one to mark the start of a new section. */
.movie-browser > .media-section-label + *,
.music-browser > .media-section-label + *,
.book-browser > .media-section-label + * {
    margin-top: 0;
}

.movie-browser > .media-section-label:not(:first-child),
.music-browser > .media-section-label:not(:first-child),
.book-browser > .media-section-label:not(:first-child) {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e1e7ed;
}

/* (S15: the .starter-grid / .starter-card* rules were removed — the starter menu was redesigned to
   line-tiles (.starter-stack / .starter-line-tile in mirror.js); these classes are no longer emitted.) */

/* ---------------------------------------------------------------------------
   Binary set (this-or-that pairs)
   --------------------------------------------------------------------------- */

.binary-set-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.binary-row {
    display: flex;
    gap: 0.5rem;
}

.binary-option {
    flex: 1;
    padding: 0.85rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    background: #fff;
    border: 1px solid #c8d0da;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.binary-option:hover {
    border-color: #3a4a6b;
    background: #f7f9fc;
}

.binary-option.selected {
    border-color: #3a4a6b;
    background: #3a4a6b;
    color: #f0f2f5;
}

.binary-both {
    padding: 0.3rem 0.6rem;
    font-family: var(--font-serif);
    font-size: 0.7rem;
    color: #999;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    align-self: center;
}

.binary-both:hover {
    color: #3a4a6b;
    border-color: #3a4a6b;
}

.binary-both.active {
    color: #3a4a6b;
    border-color: #3a4a6b;
    background: #edf1f7;
}

.binary-done-btn {
    margin-top: 0.75rem;
    padding: 0.6rem 1.5rem;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: #f0f2f5;
    background: #3a4a6b;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: center;
}

.binary-done-btn:hover {
    background: #2c3a55;
}

/* ---------------------------------------------------------------------------
   Movie browser
   --------------------------------------------------------------------------- */

.movie-browser {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.movie-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.movie-filter-chip {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #5a6d82;
    background: #fff;
    border: 1px solid #c8d0da;
    border-radius: 16px;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.movie-filter-chip:hover {
    border-color: #3a4a6b;
    color: #3a4a6b;
}

.movie-filter-chip.active {
    background: #3a4a6b;
    color: #f0f2f5;
    border-color: #3a4a6b;
}

.movie-ref-label {
    font-size: 0.8rem;
    color: var(--ink-muted);
    margin-right: 0.25rem;
}

.movie-ref-chip {
    font-size: 0.8rem;
    padding: 0.25rem 0.7rem;
}

.movie-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    min-height: 200px;
}

.movie-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    padding: 0;
}

.movie-card:hover {
    border-color: #3a4a6b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(58, 74, 107, 0.12);
}

.movie-card.selected {
    border-color: #3a4a6b;
    border-width: 2px;
    box-shadow: 0 4px 16px rgba(58, 74, 107, 0.2);
}

.movie-poster {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
}

.movie-poster-placeholder {
    width: 100%;
    aspect-ratio: 2/3;
    background: #e8ecf0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--ink-muted);
    padding: 0.5rem;
    text-align: center;
}

.movie-card-info {
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.movie-card-title {
    font-size: 0.78rem;
    color: #1c2331;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.movie-card-year {
    font-size: 0.7rem;
    color: var(--ink-muted);
}

.movie-loading {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ink-muted);
    font-style: italic;
    padding: 2rem 0;
}

.movie-search-row {
    display: flex;
    gap: 0.5rem;
}

.movie-search-input {
    flex: 1;
    padding: 0.6rem 0.85rem;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: #1c2331;
    background: #fff;
    border: 1px solid #c8d0da;
    border-radius: 4px;
    transition: border-color 0.2s ease;
}

.movie-search-input:focus {
    outline: none;
    border-color: #3a4a6b;
}

.movie-search-input::placeholder {
    color: #9aa5b4;
    font-style: italic;
}

.movie-freeform {
    margin-top: 0.25rem;
}

.media-attribution {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: #9aa5b4;
    margin-top: 0.5rem;
}

.tmdb-logo {
    height: 12px;
    opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Music browser
   --------------------------------------------------------------------------- */

.music-browser {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Music grid was a single tall column of Spotify-embed cards, which
   produced the "one-column sprawl" complaint from tester #2 (2026-05-23).
   Spotify embeds are tall, so 4-col like movies/books doesn't fit; 2-col
   on desktop is a good compromise — pairs cards side-by-side without
   cramming. Falls back to 1-col on narrow screens via the media query
   below. */
.music-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    min-height: 200px;
}

@media (max-width: 640px) {
    .music-grid {
        grid-template-columns: 1fr;
    }
}

.music-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.music-card:hover {
    border-color: #3a4a6b;
}

.music-embed {
    border: none;
    border-radius: 6px 6px 0 0;
}

.music-card-info {
    padding: 0.5rem 0.75rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.music-card-title {
    font-size: 0.9rem;
    color: #1c2331;
    font-weight: 400;
}

.music-card-artist {
    font-size: 0.8rem;
    color: var(--ink-muted);
}

.music-select-btn {
    align-self: stretch;
    margin: 0.5rem 0.75rem 0.75rem;
    padding: 0.6rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 500;
    color: #f0f2f5;
    background: #3a4a6b;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.music-select-btn:hover {
    background: #2c3a55;
    color: #f0f2f5;
}

/* Book grid reuses movie card styles */
.book-browser {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    min-height: 200px;
}

@media (max-width: 640px) {
    .movie-grid,
    .book-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .movie-card-title {
        font-size: 0.72rem;
    }
}

/* ---------------------------------------------------------------------------
   Loading indicator
   --------------------------------------------------------------------------- */

.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2.5rem 0;
    min-height: 200px;
}

/* M03 — the picked-poster acknowledgement on the wait surface (set by showPickedPoster()). Empty =
   collapsed (no layout shift / no stray flex gap); fades + scales in when a poster is flashed, then
   clears when the question lands. */
.thinking-poster:empty { display: none; }
.thinking-poster { text-align: center; }
.thinking-poster-img {
    width: 84px; height: auto; max-height: 124px; border-radius: 8px; object-fit: cover;
    box-shadow: 0 3px 14px rgba(20, 30, 48, 0.20);
    opacity: 0; transform: scale(0.9) translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.thinking-poster.thinking-poster-in .thinking-poster-img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .thinking-poster-img { transition: none; opacity: 1; transform: none; }
}

/* ===========================================================================
   THINKING_STREAM — the wait-time give-back. Calm, low-contrast, about-the-person
   fragments faded into the empty waiting screen. Two live-switchable
   representations: .ts-variant-thought (a single monologue, the default) and
   .ts-variant-cards (the constellation). Hidden until .ts-active.
   =========================================================================== */
.thinking-stream { display: none; }
.thinking-stream.ts-active {
    display: block; width: 100%; max-width: 34rem; margin: 0.25rem auto 0; text-align: left;
}
/* While the stream is live, the central loading line shows a real "doing" status (fades between
   fragments) instead of the generic rotating phrases. */
.thinking-text { transition: opacity 0.2s ease; }
.thinking-text.ts-central-live { font-style: italic; color: var(--ink-muted, #525d6e); }

.ts-frag {                                  /* a label + body, fades up on .ts-in */
    opacity: 0; transform: translateY(7px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.ts-frag.ts-in { opacity: 1; transform: none; }
.ts-label {
    display: block; font-size: 0.7rem; letter-spacing: 0.03em;
    color: var(--ink-faint, #5e6a7c); margin-bottom: 0.12rem; font-style: italic;
}
.ts-text { color: var(--ink-muted, #525d6e); font-size: 1rem; line-height: 1.5; }
.ts-kind-wondering .ts-text { font-style: italic; }
.ts-kind-words .ts-text { color: var(--ink, #1c2331); }

/* 'thought' — a single calm first-person monologue, one column, lines breathing in. */
.ts-variant-thought .ts-status {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.72rem; font-style: italic; color: var(--ink-faint, #5e6a7c);
    margin-bottom: 0.9rem; opacity: 0.85;
}
.ts-variant-thought .ts-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand-mid, #6b8cae); animation: ts-pulse 1.8s ease-in-out infinite;
}
.ts-variant-thought .ts-frag {
    border-left: 2px solid var(--border, #d8dee7); padding-left: 0.75rem; margin: 0.7rem 0;
}
.ts-variant-thought .ts-frag .ts-text { font-family: var(--font-serif); }

/* 'cards' — the constellation: scattered soft cards fading in parallel. */
.ts-variant-cards .ts-frag {
    background: var(--surface, #fff); border: 1px solid var(--border, #d8dee7);
    border-radius: var(--radius-lg, 8px); padding: 0.6rem 0.85rem; margin: 0.5rem 0;
    max-width: 17rem; box-shadow: 0 1px 4px rgba(40, 60, 90, 0.05);
}
.ts-variant-cards .ts-frag:nth-child(even) { margin-left: auto; }   /* scatter: alternate alignment */
.ts-variant-cards .ts-frag:nth-child(odd) { margin-right: auto; }

@keyframes ts-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* 'steps' — the progress checklist + YAKE concepts line. Each row fades in; 'done' rows flip a
   spinner to a checkmark; the trailing pending row keeps spinning. */
.ts-variant-steps .ts-step {
    display: flex; align-items: flex-start; gap: 10px; margin: 0.55rem 0;
    opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease;
    font-size: 1rem; line-height: 1.45; color: var(--ink-muted, #525d6e);
}
.ts-variant-steps .ts-step.ts-in { opacity: 1; transform: none; }
.ts-variant-steps .ts-step-checked { color: var(--ink, #1c2331); }
.ts-variant-steps .ts-step-pending { color: var(--ink-faint, #5e6a7c); }
.ts-step-ic { flex: 0 0 18px; display: inline-flex; justify-content: center; align-items: center; height: 1.45rem; }
.ts-step-ic .ts-spin {
    width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid var(--border, #d8dee7); border-top-color: var(--brand-mid, #6b8cae);
    display: inline-block; animation: ts-spin 0.8s linear infinite;
}
.ts-step-ic .ts-check { color: var(--brand-mid, #6b8cae); font-weight: bold; font-size: 0.95rem; }
.ts-step-ic .ts-step-mark { color: var(--ink-faint, #5e6a7c); font-size: 0.8rem; }
.ts-kw {
    display: inline-block; font-size: 0.82rem; color: var(--brand-deep, #26344d);
    background: rgba(107, 140, 174, 0.14); border-radius: 6px; padding: 2px 8px; margin: 0 2px 3px 0;
}
@keyframes ts-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ts-frag { transition: none; opacity: 1; transform: none; }
    .ts-variant-thought .ts-dot { animation: none; }
    .ts-variant-steps .ts-step { transition: none; opacity: 1; transform: none; }
    .ts-step-ic .ts-spin { animation: none; }
}

.thinking-dots {
    display: flex;
    gap: 10px;
}

.thinking-dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #6b8cae;
    animation: dot-bounce 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
.thinking-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes dot-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.thinking-text {
    font-size: 1.05rem;
    color: #6b8cae;
    font-style: italic;
    transition: opacity 0.3s ease;
    animation: thinking-pulse 2s ease-in-out infinite;
}

@keyframes thinking-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ---------------------------------------------------------------------------
   Completion screen
   --------------------------------------------------------------------------- */

.completion-screen {
    text-align: center;
}

.completion-title {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.completion-subtitle {
    font-size: 1.05rem;
    color: #888;
    font-style: italic;
    margin-bottom: 2.5rem;
}

.completion-content {
    text-align: left;
    margin-bottom: 2rem;
}

.completion-closing {
    font-size: 0.9rem;
    color: var(--ink-muted);
    font-style: italic;
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Share link on completion */
.completion-share {
    text-align: center;
    margin-bottom: 2rem;
}

.share-label {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-bottom: 0.5rem;
}

.portrait-share-link {
    display: block;
    font-size: 0.85rem;
    color: #6b8cae;
    word-break: break-all;
    margin-bottom: 0.5rem;
    text-decoration: none;
}

.portrait-share-link:hover {
    text-decoration: underline;
}

.portrait-copy-btn {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #3a4a6b;
    background: transparent;
    border: 1px solid #3a4a6b;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.portrait-copy-btn:hover {
    background: #3a4a6b;
    color: #f0f2f5;
}

/* Standalone portrait page */
.portrait-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 4rem 2rem 3rem;
    min-height: 100vh;
}

.portrait-header {
    text-align: center;
    margin-bottom: 3rem;
}

.portrait-title {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    background: linear-gradient(135deg, #3a4a6b, #6b8cae, #a0b4c8, #6b8cae, #3a4a6b);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 6s ease-in-out infinite;
    margin-bottom: 0.5rem;
}

.portrait-subtitle {
    font-size: 0.95rem;
    color: var(--ink-muted);
    font-style: italic;
}

/* Inbox stub — Phase 3 backend exists (questions_inbox), but the
   full share-and-leave-question UI is deferred. Visible counter
   signals the capability even at zero. */
.portrait-inbox-stub {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: #8a98ab;
    font-style: italic;
    cursor: help;
}

/* Multi-tab dossier stub — LT-4 in purpose-first-next-build-plan.md.
   Only "Portrait" tab is active. Others are dashed-border disabled
   buttons that telegraph the planned dossier facets without claiming
   they work. */
.portrait-tabs {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #e2e6ec;
}

.portrait-tab {
    padding: 0.45rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #3a4a6b;
    background: transparent;
    border: 1.5px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.portrait-tab.portrait-tab-active {
    border-bottom-color: #3a4a6b;
    font-weight: 500;
}

.portrait-tab.portrait-tab-disabled,
.portrait-tab:disabled {
    color: #a8b0bc;
    border-style: dashed;
    border-color: #d5dbe3;
    border-bottom-color: transparent;
    cursor: not-allowed;
}

.portrait-content {
    margin-bottom: 3rem;
}

.portrait-content .insight-content {
    margin-bottom: 1.25rem;
}

.portrait-footer {
    text-align: center;
}

.portrait-closing {
    font-size: 0.9rem;
    color: var(--ink-muted);
    font-style: italic;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.portrait-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Save-this-portrait panel — appears when the "Save this portrait" button is clicked. */
.save-panel {
    margin-top: 1.25rem;
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem 1.25rem;
    background: #f7f8fa;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
}

.save-panel-hint {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    color: #5a6473;
    line-height: 1.45;
}

/* Warning copy in the return-link panel — honest about what the link is
   (the session URL with full reopen authority) and what's coming
   (a separate, safer share-with-friends link). */
.save-panel-warning {
    margin: 0 0 0.85rem 0;
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
    color: #6b4a3a;
    background: #fbf5ec;
    border-left: 3px solid #c89556;
    border-radius: 0 4px 4px 0;
    line-height: 1.5;
}

/* Disabled "Share with someone" stub — sits next to the return link button.
   Dashed border + "(soon)" label signals there is a separate share concept
   coming without us claiming it works yet. */
.portrait-share-disabled,
.portrait-copy-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed !important;
}

.save-panel-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.save-panel-url {
    flex: 1;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    background: #fff;
    border: 1px solid #cfd5de;
    border-radius: 6px;
    color: #1f2937;
    overflow-x: auto;
}

.save-panel-copy {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    background: #2f6f9f;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.save-panel-copy:hover {
    background: #245a82;
}

/* Portrait correction — per-paragraph signal buttons. Subtle by default;
   show as quiet text-button row beneath each paragraph. */
.portrait-paragraph {
    margin-bottom: 1.5rem;
    padding-left: 0.85rem;
    border-left: 3px solid transparent;
    transition: border-color 0.25s ease, background 0.25s ease;
}

/* Per-signal left-border accent on a paragraph that has been marked.
   Stays visible after the click so the trace persists even after the
   "Noted." text fades. Restored from server state on reload. */
.portrait-paragraph-marked {
    background: rgba(107, 140, 174, 0.02);
}

.portrait-paragraph[data-correction-signal="yes"] {
    border-left-color: #7ea88e;       /* soft green — confirmation */
}
.portrait-paragraph[data-correction-signal="not_me"] {
    border-left-color: #b07a7a;       /* muted red — disagreement */
}
.portrait-paragraph[data-correction-signal="more"] {
    border-left-color: #c89a4f;       /* warm amber — expand */
}
.portrait-paragraph[data-correction-signal="less"] {
    border-left-color: #6b8cae;       /* blue — tighten */
}

.portrait-correction {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.portrait-paragraph:hover .portrait-correction,
.portrait-paragraph-marked .portrait-correction {
    /* Marked paragraphs stay fully visible — the user already engaged
       with the affordance; no point hiding it behind hover state. */
    opacity: 1;
}

/* Mobile / touch devices don't fire :hover, so the buttons would stay at
   0.55 opacity forever and many users wouldn't notice them. Force full
   opacity wherever hover isn't a primary input. */
@media (hover: none) {
    .portrait-correction {
        opacity: 1;
    }
}

.correction-btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    background: transparent;
    color: #6b7280;
    border: 1px solid #d8dce4;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.correction-btn:hover {
    background: #eef2f7;
    color: #1f2937;
}

.correction-btn-active {
    background: #2f6f9f;
    color: #fff;
    border-color: #2f6f9f;
}

.correction-btn-active:hover {
    background: #245a82;
    color: #fff;
    border-color: #245a82;
}

.correction-noted {
    margin-left: 0.4rem;
    font-size: 0.75rem;
    font-style: italic;
    color: #6b7280;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.correction-noted.correction-noted-fade {
    opacity: 1;
}

/* One-line correction drawer. Opens for not_me / more so the user can
   say what feels off or what to explore. Submitting empty (or Esc) just
   keeps the click signal. */
.correction-drawer {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    align-items: stretch;
}

.correction-drawer-input {
    flex: 1;
    padding: 0.35rem 0.6rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #1f2937;
    background: #fbfcfd;
    border: 1px solid #d8dce4;
    border-radius: 4px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.correction-drawer-input:focus {
    outline: none;
    border-color: #2f6f9f;
    background: #fff;
}

.correction-drawer-send {
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    color: #fff;
    background: #2f6f9f;
    border: 1px solid #2f6f9f;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.correction-drawer-send:hover {
    background: #245a82;
    border-color: #245a82;
}

.insight-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.insight-section:last-child {
    border-bottom: none;
}

.insight-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #999;
    margin-bottom: 0.4rem;
    font-weight: 400;
}

.insight-content {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #2d3748;
}

/* ---------------------------------------------------------------------------
   Error page
   --------------------------------------------------------------------------- */

.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
}

.error-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.75rem;
}

.error-message {
    font-size: 1rem;
    color: #888;
    margin-bottom: 2rem;
}

/* ---------------------------------------------------------------------------
   Admin page
   --------------------------------------------------------------------------- */

.admin-container {
    max-width: 600px;
    margin: 3rem auto;
    padding: 2rem;
}

.admin-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 2rem;
    letter-spacing: 0.05em;
}

.admin-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 1.25rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 400;
    color: #1a1a1a;
}

.stat-label {
    font-size: 0.8rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.25rem;
}

.admin-info {
    font-size: 0.85rem;
    color: #aaa;
}

/* ---------------------------------------------------------------------------
   Preview directory
   --------------------------------------------------------------------------- */

.preview-directory-container {
    max-width: 960px;
    margin: 3rem auto;
    padding: 2rem;
}

.preview-directory-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.preview-directory-kicker {
    margin: 0 0 0.4rem;
    color: #87909a;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.preview-directory-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.preview-directory-admin-link,
.preview-open-link {
    color: #2d3f5f;
    text-decoration: none;
    border-bottom: 1px solid rgba(45, 63, 95, 0.28);
}

.preview-directory-admin-link:hover,
.preview-open-link:hover {
    color: #111827;
    border-bottom-color: #111827;
}

.preview-directory-message {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 1.25rem;
    background: #fff;
    color: #67707a;
}

.preview-table {
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.preview-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.3fr) minmax(120px, 1fr) minmax(180px, 1.3fr) minmax(170px, 1fr) 80px;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem;
    border-top: 1px solid #edf0f2;
    font-size: 0.9rem;
}

.preview-row:first-child {
    border-top: 0;
}

.preview-row-heading {
    background: #f6f7f8;
    color: #7a8490;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.preview-source {
    color: #1f2937;
    font-weight: 500;
}

.preview-subtext {
    margin-top: 0.2rem;
    color: #8a94a0;
    font-size: 0.8rem;
}

.preview-version {
    display: inline-block;
    max-width: 100%;
    color: #475569;
    overflow-wrap: anywhere;
    white-space: normal;
}

.preview-directory-footnote {
    margin-top: 1.2rem;
    color: #9aa2ad;
    font-size: 0.82rem;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .session-wrapper {
        padding: 0 1.25rem;
    }

    /* Hide desktop model panel on mobile */
    .model-panel {
        display: none;
    }

    /* Show mobile toggle on mobile (when .visible is added by JS) */
    .model-toggle {
        display: none;
    }

    .model-toggle.visible {
        display: flex;
    }

    .session-body {
        padding-top: 6vh;
    }

    .session-container {
        padding: 1.25rem 0;
    }
}

@media (max-width: 640px) {
    .landing-title {
        font-size: 2.5rem;
    }

    .landing-actions {
        flex-direction: column;
        width: 100%;
    }

    .landing-actions .begin-button {
        width: min(100%, 220px);
    }

    .question-text {
        font-size: 1.15rem;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .preview-directory-container {
        padding: 1.25rem;
    }

    .preview-directory-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .preview-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .preview-row-heading {
        display: none;
    }

    .binary-option {
        font-size: 0.85rem;
        padding: 0.7rem 0.5rem;
    }

    .starter-heading {
        font-size: 1rem;
    }

    .starter-line-tile {
        padding: 0.7rem 0.9rem;
        font-size: 1rem;
    }

    .starter-line-tile-icon {
        font-size: 1.3rem;
        width: 1.7rem;
    }

    .starter-line-tile-phrase {
        font-size: 1rem;
    }
}

/* ---------------------------------------------------------------------------
   LLM-resolved media results — shown when literal search failed.
   --------------------------------------------------------------------------- */

.media-resolved-header {
    grid-column: 1 / -1;
    margin: 0 0 0.5rem;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: #5b6a7f;
    font-style: italic;
}

.movie-card-rationale,
.music-card-rationale {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--ink-muted);
    font-style: italic;
    line-height: 1.3;
}

.movie-resolved-card,
.music-resolved-card {
    border-color: #b7791f;
    background: #fffbf2;
}

/* ---------------------------------------------------------------------------
   User-agency affordance ("this doesn't fit me") — PRINCIPLES.md #28
   --------------------------------------------------------------------------- */

.doesnt-fit-wrap {
    margin: 0.75rem 0 0;
    font-family: var(--font-serif);
}

.doesnt-fit-link {
    background: none;
    border: none;
    padding: 0.2rem 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.85rem;
    color: #8a96a6;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: #c8d0da;
    text-underline-offset: 3px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.doesnt-fit-link:hover {
    color: #3a4a6b;
    text-decoration-color: #6b8cae;
}

.doesnt-fit-panel {
    margin-top: 0.6rem;
    padding: 0.85rem 0.95rem;
    background: #f5f8fc;
    border: 1px solid #d5dde7;
    border-radius: 8px;
}

.doesnt-fit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.doesnt-fit-chip {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #3a4a6b;
    background: #fff;
    border: 1px solid #c8d0da;
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.doesnt-fit-chip:hover {
    background: #eef3f9;
    border-color: #6b8cae;
}

.doesnt-fit-chip.selected {
    background: #3a4a6b;
    border-color: #3a4a6b;
    color: #fff;
}

.doesnt-fit-note {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: #1c2331;
    background: #fff;
    border: 1px solid #c8d0da;
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    resize: vertical;
    min-height: 2.6rem;
}

.doesnt-fit-note:focus {
    outline: 2px solid #3a4a6b;
    outline-offset: 1px;
}

.doesnt-fit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.55rem;
}

.doesnt-fit-cancel,
.doesnt-fit-send {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.doesnt-fit-cancel {
    background: transparent;
    border: 1px solid #c8d0da;
    color: #5b6a7f;
}

.doesnt-fit-cancel:hover {
    background: #eef3f9;
}

.doesnt-fit-send {
    background: #3a4a6b;
    border: 1px solid #3a4a6b;
    color: #fff;
}

.doesnt-fit-send:hover {
    background: #2c3a55;
}

/* ---------------------------------------------------------------------------
   Strategic kernel — opt-in addition (Rumelt brainstorm 2026-05-15).
   The portrait stays exactly as before; this section appears below as a
   Frankenstein addition the user can engage with or ignore. PRINCIPLES.md
   #26 (portrait is descriptive, not advisory) is preserved by gating
   behind explicit user action.
   --------------------------------------------------------------------------- */

.kernel-affordance {
    margin: 2rem auto 1rem;
    max-width: 36rem;
    text-align: center;
}

.kernel-affordance-intro {
    margin: 0 0 0.7rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #5b6a7f;
    font-style: italic;
    line-height: 1.55;
}

.kernel-affordance-btn {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #3a4a6b;
    background: rgba(58, 74, 107, 0.06);
    border: 1px solid rgba(58, 74, 107, 0.22);
    border-radius: 999px;
    padding: 0.55rem 1.3rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.kernel-affordance-btn:hover {
    background: rgba(58, 74, 107, 0.12);
    box-shadow: 0 2px 6px rgba(58, 74, 107, 0.15);
}

.kernel-affordance-btn:active {
    transform: scale(0.98);
}

.kernel-affordance-btn:disabled {
    opacity: 0.7;
    cursor: default;
    background: rgba(58, 74, 107, 0.06);
    box-shadow: none;
}

/* M43 — the live Recommendations wedge surfaced as a real entry (mirrors the kernel affordance). */
.recs-affordance { margin: 1.5rem auto 1rem; max-width: 36rem; text-align: center; }
.recs-affordance-intro {
    margin: 0 0 0.7rem; font-family: var(--font-serif); font-size: 0.95rem;
    color: #5b6a7f; font-style: italic; line-height: 1.55;
}
.recs-affordance-btn {
    font-family: var(--font-serif); font-size: 0.95rem; color: #3a4a6b;
    background: rgba(58, 74, 107, 0.06); border: 1px solid rgba(58, 74, 107, 0.22);
    border-radius: 999px; padding: 0.55rem 1.3rem; cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.recs-affordance-btn:hover { background: rgba(58, 74, 107, 0.12); box-shadow: 0 2px 6px rgba(58, 74, 107, 0.15); }
.recs-affordance-btn:active { transform: scale(0.98); }
.recs-affordance-btn:disabled { opacity: 0.7; cursor: default; box-shadow: none; }
.recs-output { margin: 1.1rem auto 0; max-width: 32rem; text-align: left; }
.recs-output-title {
    margin: 0 0 0.8rem; font-family: var(--font-serif); font-size: 1rem;
    color: #2c3647; font-weight: 600; text-align: center;
}
.recs-output-empty { margin: 0; font-size: 0.9rem; color: #5b6a7f; line-height: 1.6; text-align: center; }
.recs-output-row { margin: 0 0 1rem; }
.recs-output-label { margin: 0 0 0.15rem; font-size: 0.95rem; color: #1c2331; font-weight: 600; }
.recs-output-why { margin: 0; font-size: 0.9rem; color: #5b6a7f; font-style: italic; line-height: 1.55; }

.kernel-section {
    margin: 1.4rem auto 0;
    max-width: 40rem;
    padding: 1.4rem 1.6rem 1.5rem;
    background: #fffbeb;
    border: 1px solid #f6d77a;
    border-radius: 10px;
    text-align: left;
    box-shadow: 0 2px 10px rgba(183, 121, 31, 0.08);
}

.kernel-heading {
    margin: 0 0 0.3rem;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: #5a3a0e;
}

.kernel-note {
    margin: 0 0 1.1rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #8a6722;
    font-style: italic;
    line-height: 1.45;
}

.kernel-label {
    margin: 0.95rem 0 0.25rem;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    color: #8a6722;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kernel-body {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: #1c2331;
}

.kernel-policy {
    font-style: italic;
}

.kernel-actions {
    margin: 0.2rem 0 0;
    padding-left: 1.25rem;
}

.kernel-action {
    margin: 0.35rem 0;
    font-family: var(--font-serif);
    font-size: 0.98rem;
    line-height: 1.5;
    color: #1c2331;
}

/* ---------------------------------------------------------------------------
   Chat-with-your-portrait — Phase 2 of persistent-portraits surfaced.
   Decision-sounding-board mode is live; the other two are disabled stubs.
   --------------------------------------------------------------------------- */

.chat-affordance {
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(58, 74, 107, 0.025), rgba(107, 140, 174, 0.04));
    border: 1px solid rgba(107, 140, 174, 0.18);
    border-radius: 10px;
}

.chat-affordance-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: #3a4a6b;
    margin-bottom: 0.5rem;
}

.chat-affordance-intro {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 1rem;
    line-height: 1.55;
}

.chat-mode-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.chat-mode-btn {
    padding: 0.4rem 0.85rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #3a4a6b;
    background: transparent;
    border: 1.5px solid #3a4a6b;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chat-mode-btn:hover:not(:disabled) {
    background: #3a4a6b;
    color: #f0f2f5;
}

.chat-mode-btn.chat-mode-active {
    background: #3a4a6b;
    color: #f0f2f5;
}

.chat-mode-btn.chat-mode-disabled,
.chat-mode-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
}

.chat-start-block {
    margin-top: 0.5rem;
}

.chat-start-prompt {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    margin-bottom: 0.5rem;
}

.chat-topic-input,
.chat-message-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1c2331;
    background: #fff;
    border: 1px solid #cfd5de;
    border-radius: 6px;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.chat-topic-input:focus,
.chat-message-input:focus {
    outline: none;
    border-color: #3a4a6b;
}

.chat-start-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.6rem;
}

.chat-start-btn,
.chat-send-btn {
    padding: 0.55rem 1.4rem;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: #f0f2f5;
    background: #3a4a6b;
    border: 1.5px solid #3a4a6b;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chat-start-btn:hover:not(:disabled),
.chat-send-btn:hover:not(:disabled) {
    background: #26344d;
    border-color: #26344d;
}

.chat-start-btn:disabled,
.chat-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.chat-start-hint {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    color: var(--ink-muted);
    font-style: italic;
}

.chat-transcript {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.chat-turn {
    padding: 0.7rem 1rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e3e8ef;
}

.chat-turn-user {
    background: #f3f6fa;
    border-color: #d8dce4;
}

.chat-turn-agent {
    background: #fff;
    border-left: 3px solid #6b8cae;
}

.chat-turn-role {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.72rem;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    margin-bottom: 0.25rem;
    font-style: italic;
}

.chat-turn-body {
    font-family: var(--font-serif);
    font-size: 0.97rem;
    line-height: 1.55;
    color: #1c2331;
    margin: 0;
    white-space: pre-wrap;
}

.chat-turn-typing {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    font-style: italic;
    color: var(--ink-muted);
    padding: 0.5rem 0.25rem;
    background: transparent;
    border: none;
}

.chat-input-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.chat-input-row .chat-send-btn {
    align-self: flex-end;
}

.chat-closed-note {
    margin-top: 0.85rem;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: var(--ink-muted);
    font-style: italic;
    text-align: center;
}

/* ---------------------------------------------------------------------------
   Error banner — PRINCIPLES.md #30
   --------------------------------------------------------------------------- */

.error-banner {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9500;
    max-width: min(36rem, calc(100vw - 2rem));
    padding: 0.7rem 1rem;
    background: #fef2f2;
    border: 1px solid #c53030;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(197, 48, 48, 0.15);
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    animation: error-banner-in 0.18s ease-out;
}

@keyframes error-banner-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.error-banner-text {
    flex: 1;
    line-height: 1.45;
}

/* Ops-Errors MVP: when the server attached a correlation id (via the
   X-Correlation-Id header), show it next to the message so users can
   quote it back. Monospace + dim color signals "reference code". */
.error-banner-ref {
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    font-size: 0.78rem;
    color: #7a2828;
    opacity: 0.75;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.error-banner-close {
    background: transparent;
    border: none;
    color: #7a2828;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.2rem;
    margin-top: -0.15rem;
}

.error-banner-close:hover {
    color: #1c2331;
}

/* ---------------------------------------------------------------------------
   Developer feedback widget — only rendered when ?dev=1 is in URL
   --------------------------------------------------------------------------- */

#dev-feedback-fab {
    /* Position: bottom-LEFT to avoid colliding with the deploy badge
       (which sits bottom-right). PRINCIPLES.md #29 — persistent UI
       affordances must not occlude content; that includes other
       persistent affordances. */
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 9000;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #1c2331;
    background: #fef3c7;
    border: 1px solid #b7791f;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transition: background 0.15s, transform 0.08s, box-shadow 0.15s;
}

#dev-feedback-fab:hover {
    background: #fde68a;
    box-shadow: 0 3px 9px rgba(0,0,0,0.16);
    transform: translateY(-1px);
}

#dev-feedback-fab:active {
    transform: scale(0.97);
}

#dev-feedback-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 26, 46, 0.45);
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.dev-feedback-panel {
    width: min(28rem, 100%);
    background: #fff;
    border: 1px solid #c8d0da;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    padding: 1.1rem 1.2rem 1rem;
    font-family: var(--font-serif);
    color: #1c2331;
}

.dev-feedback-panel h3 {
    margin: 0 0 0.3rem;
    font-size: 1.1rem;
    color: #1c2331;
}

.dev-feedback-title {
    cursor: move;
    user-select: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.dev-feedback-drag-hint {
    font-size: 0.7rem;
    color: #b0b8c4;
    font-weight: normal;
    letter-spacing: 0.04em;
}

.dev-feedback-hint {
    margin: 0 0 0.85rem;
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
}

.dev-feedback-label {
    display: block;
    font-size: 0.85rem;
    color: #3a4a6b;
    margin: 0.55rem 0 0.25rem;
}

.dev-feedback-comment,
.dev-feedback-element,
.dev-feedback-author,
.dev-feedback-target {
    width: 100%;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    background: #f7fafc;
    border: 1px solid #c8d0da;
    border-radius: 6px;
    padding: 0.55rem 0.7rem;
    box-sizing: border-box;
}

.dev-feedback-comment {
    resize: vertical;
    min-height: 5rem;
}

.dev-feedback-comment:focus,
.dev-feedback-element:focus,
.dev-feedback-author:focus,
.dev-feedback-target:focus {
    outline: 2px solid #3a4a6b;
    outline-offset: 1px;
}

.dev-feedback-status {
    margin: 0.55rem 0 0;
    min-height: 1.1rem;
    font-size: 0.82rem;
    color: var(--ink-muted);
    font-style: italic;
}

.dev-feedback-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.55rem;
}

.dev-feedback-cancel,
.dev-feedback-send {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    padding: 0.4rem 0.95rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease;
}

.dev-feedback-cancel {
    background: transparent;
    border: 1px solid #c8d0da;
    color: #3a4a6b;
}

.dev-feedback-cancel:hover {
    background: #f5f8fc;
}

.dev-feedback-send {
    background: #3a4a6b;
    border: 1px solid #3a4a6b;
    color: #fff;
}

.dev-feedback-send:hover {
    background: #2c3a55;
}

.dev-feedback-send:disabled,
.dev-feedback-cancel:disabled {
    opacity: 0.5;
    cursor: default;
}

/* =========================================================================
   Maximalist tabs prototype — styles for the 5-tab portrait page surface.
   All proposals visible as working surfaces; deep backend ops show stubs.
   ========================================================================= */

/* HTML5 [hidden] attribute should always win — several elements below set
   display: flex/grid, which without this rule would override the default
   [hidden] { display: none } behavior. Single source of truth that lets
   JS toggle visibility just by flipping `.hidden = true/false`. */
[hidden] {
    display: none !important;
}

/* Tab panel container — only the active one is visible at a time.
   The [hidden] attribute does the display:none work; fade animation adds
   a small bit of life to tab switches. */
.tab-panel {
    animation: tab-panel-fade-in 0.18s ease;
}

@keyframes tab-panel-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Generic "coming soon" placeholder for tab panels not yet built. */
.tab-coming-soon {
    max-width: 38rem;
    margin: 3rem auto;
    padding: 2.5rem 2rem;
    background: #f7f9fb;
    border: 1px dashed #cfd6df;
    border-radius: 8px;
    text-align: center;
}

.tab-coming-soon h2 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: #3a4a6b;
    margin-bottom: 0.85rem;
    font-weight: 500;
}

.tab-coming-soon p {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
}


/* -------------------------------------------------------------------------
   Connected Apps tab (Protocol stub)
   ------------------------------------------------------------------------- */
.connected-apps-content {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1rem 0;
}

.connected-apps-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: #1c2331;
    margin-bottom: 0.65rem;
}

.connected-apps-intro {
    font-family: var(--font-serif);
    font-size: 0.97rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.connected-apps-empty {
    padding: 1.25rem 1.5rem;
    background: #f7f9fb;
    border: 1px dashed #cfd6df;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: center;
}

.connected-apps-empty-label {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--ink-muted);
    font-style: italic;
    margin: 0;
}

.connected-apps-section {
    margin-bottom: 1.25rem;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    overflow: hidden;
}

.connected-apps-expander {
    width: 100%;
    padding: 0.85rem 1.1rem;
    text-align: left;
    background: #fbfcfd;
    border: none;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 0.97rem;
    color: #1c2331;
    transition: background 0.15s ease;
}

.connected-apps-expander:hover {
    background: #eef2f7;
}

.expander-chevron {
    display: inline-block;
    margin-right: 0.45rem;
    color: #6b8cae;
    transition: transform 0.15s ease;
}

.connected-apps-expand-body {
    padding: 1rem 1.25rem 1.25rem;
    background: #fff;
    border-top: 1px solid #e2e6ec;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: #4a5568;
    line-height: 1.6;
}

.connected-apps-example-intro {
    font-style: italic;
    color: var(--ink-muted);
    margin-bottom: 0.85rem;
}

.connected-apps-card {
    padding: 0.9rem 1rem;
    background: #f7f9fb;
    border: 1px solid #e2e6ec;
    border-radius: 6px;
    margin-bottom: 0.85rem;
}

.connected-apps-card:last-child {
    margin-bottom: 0;
}

.connected-apps-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.connected-apps-card-name {
    font-weight: 500;
    color: #1c2331;
    font-size: 0.97rem;
}

.connected-apps-card-meta {
    font-size: 0.8rem;
    color: var(--ink-muted);
    font-style: italic;
}

.connected-apps-card-scope {
    font-size: 0.88rem;
    color: #4a5568;
    margin-bottom: 0.4rem;
}

.connected-apps-card-purpose {
    font-size: 0.88rem;
    color: #4a5568;
    line-height: 1.55;
    margin-bottom: 0.65rem;
}

.connected-apps-revoke-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    color: #6b4a3a;
    background: #fbf5ec;
    border: 1px solid #c89556;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-serif);
    transition: background 0.15s ease;
}

.connected-apps-revoke-btn:hover {
    background: #f5ead4;
}

.connected-apps-revoke-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

.connected-apps-bullets {
    margin: 0.5rem 0 0.85rem 1.4rem;
    padding: 0;
    font-size: 0.92rem;
    color: #4a5568;
    line-height: 1.55;
}

.connected-apps-bullets li {
    margin-bottom: 0.4rem;
}

.connected-apps-dev-stub {
    padding: 0.75rem 0.9rem;
    background: #f5f3ec;
    border-left: 3px solid #c89556;
    border-radius: 0 4px 4px 0;
    font-size: 0.88rem;
    color: #4a5568;
}

.connected-apps-footer-note {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: #f7f9fb;
    border-left: 3px solid #6b8cae;
    border-radius: 0 4px 4px 0;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #4a5568;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Cards tab
   ------------------------------------------------------------------------- */
.cards-content {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1rem 0;
}

.cards-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: #1c2331;
    margin-bottom: 0.6rem;
}

.cards-intro {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

.cards-type-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.cards-type-btn {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem 1.1rem;
    text-align: left;
    background: #fff;
    border: 1.5px solid #d5dbe3;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: var(--font-serif);
}

.cards-type-btn:hover {
    border-color: #3a4a6b;
    background: #f7f9fb;
}

.cards-type-name {
    font-size: 0.97rem;
    color: #1c2331;
    font-weight: 500;
}

.cards-type-desc {
    font-size: 0.83rem;
    color: var(--ink-muted);
    font-style: italic;
    line-height: 1.4;
}

.cards-create-form {
    margin-bottom: 2rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(58, 74, 107, 0.025), rgba(107, 140, 174, 0.04));
    border: 1px solid rgba(107, 140, 174, 0.18);
    border-radius: 10px;
}

.cards-create-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}

.cards-create-type-label {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: #3a4a6b;
    font-weight: 500;
}

.cards-create-close {
    background: transparent;
    border: none;
    font-size: 1.4rem;
    color: var(--ink-muted);
    cursor: pointer;
    padding: 0.25rem 0.55rem;
    line-height: 1;
}

.cards-create-close:hover {
    color: #1c2331;
}

.cards-create-field {
    margin-bottom: 1rem;
}

.cards-create-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: #1c2331;
    margin-bottom: 0.4rem;
}

.cards-create-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    background: #fff;
    border: 1px solid #cfd5de;
    border-radius: 5px;
    resize: vertical;
}

select.cards-create-input {
    cursor: pointer;
}

.cards-create-input:focus {
    outline: none;
    border-color: #3a4a6b;
}

.cards-create-submit {
    padding: 0.6rem 1.3rem;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: #fff;
    background: #3a4a6b;
    border: 1px solid #3a4a6b;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0.5rem;
}

.cards-create-submit:hover {
    background: #26344d;
}

.cards-output-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #1c2331;
    font-weight: 500;
    margin-bottom: 0.85rem;
}

.cards-output-label {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-style: italic;
    color: #3a4a6b;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
    margin-top: 0.85rem;
}

.cards-output-body {
    font-family: var(--font-serif);
    font-size: 0.93rem;
    color: #4a5568;
    line-height: 1.55;
    margin-bottom: 0.5rem;
}

.cards-output-stub {
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    background: #f5f3ec;
    border-left: 3px solid #c89556;
    border-radius: 0 4px 4px 0;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #4a5568;
    line-height: 1.55;
}

/* Card list */
.cards-list-section {
    margin-top: 2rem;
}

.cards-list-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: #3a4a6b;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 0.85rem;
}

.cards-list-empty {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: var(--ink-muted);
    font-style: italic;
    padding: 1.25rem;
    background: #f7f9fb;
    border-radius: 6px;
    text-align: center;
}

.card-item {
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 6px;
    margin-bottom: 0.65rem;
}

.card-item-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.35rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.card-item-type {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #3a4a6b;
    font-weight: 500;
}

.card-item-date {
    font-family: var(--font-serif);
    font-size: 0.78rem;
    color: var(--ink-muted);
    font-style: italic;
}

.card-item-summary {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: #1c2331;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.card-item-actions {
    display: flex;
    gap: 0.5rem;
}

.card-item-reopen,
.card-item-delete {
    padding: 0.3rem 0.75rem;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    background: transparent;
    border: 1px solid #cfd5de;
    border-radius: 4px;
    color: #4a5568;
    cursor: pointer;
}

.card-item-reopen:hover {
    background: #3a4a6b;
    color: #fff;
    border-color: #3a4a6b;
}

.card-item-delete:hover {
    background: #b07a7a;
    color: #fff;
    border-color: #b07a7a;
}

/* -------------------------------------------------------------------------
   Inbox tab — Filter pitch surface
   ------------------------------------------------------------------------- */
.inbox-content {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1rem 0;
}

.inbox-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: #1c2331;
    margin-bottom: 0.6rem;
}

.inbox-intro {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Persona URL section */
.inbox-url-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(58, 74, 107, 0.025), rgba(107, 140, 174, 0.04));
    border: 1px solid rgba(107, 140, 174, 0.18);
    border-radius: 8px;
}

.inbox-url-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.inbox-url-btn {
    padding: 0.6rem 1.3rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #fff;
    background: #3a4a6b;
    border: 1.5px solid #3a4a6b;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.inbox-url-btn:hover {
    background: #26344d;
}

.inbox-url-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.inbox-url-hint {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
}

.inbox-url-label {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    margin-bottom: 0.6rem;
}

.inbox-url-row-active {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.inbox-url-input {
    flex: 1;
    padding: 0.55rem 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    background: #fff;
    border: 1px solid #cfd5de;
    border-radius: 4px;
    color: #1c2331;
}

.inbox-url-copy {
    padding: 0.55rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #fff;
    background: #3a4a6b;
    border: 1px solid #3a4a6b;
    border-radius: 4px;
    cursor: pointer;
}

.inbox-url-copy:hover {
    background: #26344d;
}

.inbox-url-note {
    font-family: var(--font-serif);
    font-size: 0.83rem;
    color: #6b7280;
    font-style: italic;
    line-height: 1.5;
    margin: 0;
}

/* Filter pills */
.inbox-filter-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.inbox-filter-label {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-right: 0.5rem;
}

.inbox-filter-btn {
    padding: 0.3rem 0.85rem;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    color: #6b7280;
    background: transparent;
    border: 1px solid #d8dce4;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.inbox-filter-btn:hover {
    background: #eef2f7;
    color: #1c2331;
}

.inbox-filter-btn.inbox-filter-active {
    background: #3a4a6b;
    color: #fff;
    border-color: #3a4a6b;
}

/* Submission items */
.inbox-submissions {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.inbox-empty {
    font-family: var(--font-serif);
    font-size: 0.93rem;
    color: var(--ink-muted);
    font-style: italic;
    text-align: center;
    padding: 1.5rem;
    background: #f7f9fb;
    border-radius: 6px;
}

.inbox-item {
    padding: 1rem 1.2rem;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    border-left: 4px solid #d8dce4;
}

.inbox-item.inbox-score-high {
    border-left-color: #7ea88e;
}

.inbox-item.inbox-score-mid {
    border-left-color: #c89556;
}

.inbox-item.inbox-score-low {
    border-left-color: #b07a7a;
}

.inbox-item-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.inbox-item-left {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.inbox-score-badge {
    padding: 0.2rem 0.6rem;
    font-family: var(--font-serif);
    font-size: 0.78rem;
    font-weight: 500;
    background: #f0f3f7;
    border-radius: 999px;
    color: #1c2331;
}

.inbox-score-high .inbox-score-badge {
    background: rgba(126, 168, 142, 0.18);
    color: #4a6754;
}

.inbox-score-mid .inbox-score-badge {
    background: rgba(200, 149, 86, 0.15);
    color: #8a6433;
}

.inbox-score-low .inbox-score-badge {
    background: rgba(176, 122, 122, 0.15);
    color: #7a4848;
}

.inbox-item-example-chip {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  background: rgba(200, 160, 60, 0.22);
  border: 1px solid rgba(200, 160, 60, 0.4);
  white-space: nowrap;
}

.inbox-example-note {
  font-size: 0.84rem;
  opacity: 0.75;
  margin: 0 0 0.6rem;
}

.inbox-item-category {
    font-family: var(--font-serif);
    font-size: 0.8rem;
    color: var(--ink-muted);
    text-transform: lowercase;
}

.inbox-item-meta {
    font-family: var(--font-serif);
    font-size: 0.8rem;
    color: var(--ink-muted);
    font-style: italic;
}

.inbox-item-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: #1c2331;
    margin-bottom: 0.2rem;
}

.inbox-item-sender {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    color: var(--ink-muted);
    margin-bottom: 0.6rem;
    font-style: italic;
}

.inbox-item-body {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: #4a5568;
    line-height: 1.55;
    margin-bottom: 0.85rem;
}

.inbox-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.inbox-inspect-btn,
.inbox-reply-btn,
.inbox-archive-btn {
    padding: 0.35rem 0.8rem;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    background: transparent;
    border: 1px solid #cfd5de;
    border-radius: 4px;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.15s ease;
}

.inbox-inspect-btn:hover,
.inbox-reply-btn:hover {
    background: #3a4a6b;
    color: #fff;
    border-color: #3a4a6b;
}

.inbox-archive-btn:hover {
    background: #b07a7a;
    color: #fff;
    border-color: #b07a7a;
}

.inbox-inspector {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: #f7f9fb;
    border-left: 3px solid #6b8cae;
    border-radius: 0 4px 4px 0;
}

.inbox-inspector-label {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    font-style: italic;
    color: #3a4a6b;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.inbox-inspector-body {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #4a5568;
    line-height: 1.55;
    margin-bottom: 0.5rem;
}

.inbox-inspector-stub {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    color: var(--ink-muted);
    font-style: italic;
    line-height: 1.5;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* Settings expander */
.inbox-settings-section {
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.inbox-settings-btn {
    width: 100%;
    padding: 0.85rem 1.1rem;
    text-align: left;
    background: #fbfcfd;
    border: none;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    transition: background 0.15s ease;
}

.inbox-settings-btn:hover {
    background: #eef2f7;
}

.inbox-settings-body {
    padding: 1rem 1.25rem 1.25rem;
    background: #fff;
    border-top: 1px solid #e2e6ec;
}

.inbox-settings-intro {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #4a5568;
    line-height: 1.55;
    margin-bottom: 1rem;
}

.inbox-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.inbox-settings-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    background: #f7f9fb;
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #1c2331;
    cursor: pointer;
}

.inbox-settings-row:hover {
    background: #eef2f7;
}

.inbox-settings-stub {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    background: #f5f3ec;
    border-left: 3px solid #c89556;
    border-radius: 0 4px 4px 0;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #4a5568;
    line-height: 1.55;
}

.inbox-footer-note {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: #f7f9fb;
    border-left: 3px solid #6b8cae;
    border-radius: 0 4px 4px 0;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #4a5568;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Persona public page (/persona/<token>) — Filter sender-side
   ------------------------------------------------------------------------- */
.persona-public-container {
    max-width: 42rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.persona-public-header {
    text-align: center;
    margin-bottom: 2rem;
}

.persona-public-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: #3a4a6b;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.persona-public-subtitle {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--ink-muted);
    font-style: italic;
}

.persona-public-explainer {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: #f7f9fb;
    border-radius: 8px;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
}

.persona-public-explainer p {
    margin-bottom: 0.85rem;
}

.persona-public-explainer p:last-child {
    margin-bottom: 0;
}

.persona-public-explainer-honest {
    color: #1c2331 !important;
}

.persona-public-openness {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(58, 74, 107, 0.025), rgba(107, 140, 174, 0.04));
    border: 1px solid rgba(107, 140, 174, 0.18);
    border-radius: 8px;
}

.persona-public-openness-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    color: #3a4a6b;
    font-weight: 500;
    margin-bottom: 0.85rem;
}

.persona-public-openness-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.persona-public-openness-col {
    font-family: var(--font-serif);
}

.persona-public-openness-label {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.4rem;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    font-style: italic;
}

.persona-public-openness-list {
    margin: 0 0 0 1rem;
    padding: 0;
    font-size: 0.92rem;
    color: #1c2331;
    line-height: 1.55;
}

.persona-public-openness-list li {
    margin-bottom: 0.3rem;
}

.persona-public-openness-closed li {
    color: #6b7280;
    font-style: italic;
}

.persona-public-openness-note {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
    margin: 0;
}

.persona-public-form {
    background: #fff;
    padding: 1.5rem 1.75rem;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
}

.persona-public-field {
    margin-bottom: 1.25rem;
}

.persona-public-field-optional .persona-public-label::after {
    content: ' (optional)';
    color: var(--ink-faint);
    font-weight: 400;
    font-size: 0.85em;
    font-style: italic;
}

.persona-public-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    margin-bottom: 0.4rem;
}

.persona-public-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    background: #fbfcfd;
    border: 1px solid #cfd5de;
    border-radius: 5px;
}

.persona-public-input:focus {
    outline: none;
    border-color: #3a4a6b;
    background: #fff;
}

.persona-public-textarea {
    resize: vertical;
    min-height: 7rem;
}

.persona-public-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.persona-public-submit {
    align-self: flex-start;
    padding: 0.65rem 1.5rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #fff;
    background: #3a4a6b;
    border: 1.5px solid #3a4a6b;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.persona-public-submit:hover {
    background: #26344d;
}

.persona-public-submit:disabled {
    opacity: 0.5;
    cursor: default;
}

.persona-public-actions-note {
    font-family: var(--font-serif);
    font-size: 0.83rem;
    color: var(--ink-muted);
    font-style: italic;
    margin: 0;
}

.persona-public-error {
    margin-top: 0.85rem;
    padding: 0.7rem 1rem;
    background: #fef2f2;
    border: 1px solid #c53030;
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: #7a2828;
}

.persona-public-confirmation {
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, rgba(126, 168, 142, 0.08), rgba(126, 168, 142, 0.04));
    border: 1px solid rgba(126, 168, 142, 0.25);
    border-radius: 8px;
}

.persona-public-confirmation-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: #4a6754;
    font-weight: 500;
    margin-bottom: 0.85rem;
}

.persona-public-confirmation-body {
    font-family: var(--font-serif);
    font-size: 0.97rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.persona-public-confirmation-note {
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: var(--ink-muted);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.persona-public-footer {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    background: #f7f9fb;
    border-radius: 6px;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.55;
}

/* -------------------------------------------------------------------------
   Journal tab
   ------------------------------------------------------------------------- */
.journal-content {
    max-width: 42rem;
    margin: 0 auto;
    padding: 1rem 0;
}

.journal-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    color: #1c2331;
    margin-bottom: 0.6rem;
}

.journal-intro {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

.journal-prompt-section {
    margin-bottom: 2.5rem;
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(58, 74, 107, 0.025), rgba(107, 140, 174, 0.04));
    border: 1px solid rgba(107, 140, 174, 0.18);
    border-radius: 10px;
}

.journal-prompt-heading {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: #3a4a6b;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.journal-prompt-question {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: #1c2331;
    font-style: italic;
    line-height: 1.55;
    margin-bottom: 1rem;
}

.journal-mode-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.journal-mode-btn {
    padding: 0.4rem 0.95rem;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #3a4a6b;
    background: transparent;
    border: 1.5px solid #3a4a6b;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.journal-mode-btn:hover {
    background: #3a4a6b;
    color: #fff;
}

.journal-mode-btn.journal-mode-active {
    background: #3a4a6b;
    color: #fff;
}

.journal-mode-panel {
    margin-top: 0.5rem;
}

.journal-entry-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #1c2331;
    background: #fff;
    border: 1px solid #cfd5de;
    border-radius: 5px;
    resize: vertical;
    min-height: 5.5rem;
    margin-bottom: 0.8rem;
}

.journal-entry-input:focus {
    outline: none;
    border-color: #3a4a6b;
}

.journal-write-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.journal-submit-btn {
    padding: 0.55rem 1.3rem;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: #fff;
    background: #3a4a6b;
    border: 1px solid #3a4a6b;
    border-radius: 4px;
    cursor: pointer;
}

.journal-submit-btn:hover {
    background: #26344d;
}

.journal-write-hint {
    font-family: var(--font-serif);
    font-size: 0.83rem;
    color: var(--ink-muted);
    font-style: italic;
}

/* Pick-between-two mode */
.journal-pick-intro {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    color: #6b7280;
    line-height: 1.55;
    margin-bottom: 0.85rem;
    font-style: italic;
}

.journal-pick-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.journal-pick-option {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.15rem;
    text-align: left;
    background: #fff;
    border: 1.5px solid #d5dbe3;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: var(--font-serif);
}

.journal-pick-option:hover {
    border-color: #3a4a6b;
    background: #f7f9fb;
}

.journal-pick-label {
    font-size: 0.85rem;
    color: #3a4a6b;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    font-style: italic;
}

.journal-pick-body {
    font-size: 0.95rem;
    color: #1c2331;
    line-height: 1.55;
}

.journal-pick-neither {
    border-style: dashed;
    background: transparent;
}

.journal-pick-neither .journal-pick-body {
    color: #6b7280;
    font-style: italic;
}

/* Confirmation block */
.journal-confirmation {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(126, 168, 142, 0.08);
    border-left: 3px solid #7ea88e;
    border-radius: 0 4px 4px 0;
}

.journal-confirmation-body {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: #1c2331;
    line-height: 1.55;
    margin-bottom: 0.6rem;
}

.journal-confirmation-stub {
    font-family: var(--font-serif);
    font-size: 0.83rem;
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* Past entries */
.journal-entries-section {
    margin-bottom: 2.5rem;
}

.journal-entries-heading {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: #3a4a6b;
    text-transform: lowercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 0.85rem;
}

.journal-entries-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.journal-entries-empty {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: var(--ink-muted);
    font-style: italic;
    padding: 1.25rem;
    background: #f7f9fb;
    border-radius: 6px;
    text-align: center;
}

.journal-entry-item {
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 6px;
    position: relative;
}

.journal-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}

.journal-entry-mode {
    font-family: var(--font-serif);
    font-size: 0.78rem;
    color: #6b8cae;
    text-transform: lowercase;
    letter-spacing: 0.05em;
}

.journal-entry-date {
    font-family: var(--font-serif);
    font-size: 0.78rem;
    color: var(--ink-muted);
    font-style: italic;
}

.journal-entry-body {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    color: #1c2331;
    line-height: 1.55;
    margin-bottom: 0.5rem;
}

.journal-entry-delete {
    padding: 0.25rem 0.65rem;
    font-family: var(--font-serif);
    font-size: 0.78rem;
    color: #6b7280;
    background: transparent;
    border: 1px solid #cfd5de;
    border-radius: 4px;
    cursor: pointer;
}

.journal-entry-delete:hover {
    background: #b07a7a;
    color: #fff;
    border-color: #b07a7a;
}

/* (F8 retired: portrait history slider — Journal becomes Weekly
    Check-In history via C3, not portrait-diff-over-time.) */

/* =============================================================
   N=3 ADDITIVE FEATURES — added 2026-05-25.
   Pure additions to expose every direction proposal in front of
   testers without removing existing surfaces. See:
   docs/feedback/themes/2026-05-25.md for the rationale.
   ============================================================= */

/* --- B1: Landing page alt-tagline (Nadia's candidate) ------- */

/* --- B2: Portrait tabs — primary label + alt framing -------- */
.portrait-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    line-height: 1.2;
}

.portrait-tab-label {
    font-size: 0.88rem;
    color: #3a4a6b;
}

.portrait-tab-alt {
    font-size: 0.7rem;
    color: var(--ink-faint);
    font-style: italic;
    font-weight: 400;
}

.portrait-tab.portrait-tab-active .portrait-tab-label {
    font-weight: 500;
}

.portrait-tab.portrait-tab-active .portrait-tab-alt {
    color: var(--ink-muted);
}

/* --- B3: Framing-alternatives panels inside tabs ------------ */
.framing-alt-panel {
    margin: 0 0 1.6rem 0;
    padding: 0;
    background: #f6f5ef;
    border: 1px solid #e3dfd1;
    border-radius: 6px;
    overflow: hidden;
}

.framing-alt-summary {
    padding: 0.65rem 0.9rem;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    color: var(--ink-muted);
    font-style: italic;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.framing-alt-summary::-webkit-details-marker {
    display: none;
}

.framing-alt-summary::before {
    content: '▸ ';
    display: inline-block;
    margin-right: 0.3rem;
    transition: transform 0.15s ease;
}

.framing-alt-panel[open] .framing-alt-summary::before {
    content: '▾ ';
}

.framing-alt-summary:hover {
    color: #3a4a6b;
}

.framing-alt-body {
    padding: 0.4rem 1rem 1rem;
    border-top: 1px solid #e3dfd1;
    background: #fafaf6;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: #4a5568;
    line-height: 1.6;
}

.framing-alt-body p {
    margin: 0.6rem 0;
}

.framing-alt-body ul {
    margin: 0.4rem 0 0.6rem 1.2rem;
    padding: 0;
}

.framing-alt-body li {
    margin: 0.2rem 0;
}

.framing-alt-body em {
    font-style: italic;
    color: #3a4a6b;
}

/* --- B4: Cards canon-validation badges ---------------------- */
.cards-type-validation {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.15rem 0.55rem;
    font-family: var(--font-serif);
    font-size: 0.7rem;
    font-style: italic;
    border-radius: 999px;
    line-height: 1.3;
}

.cards-type-validation-strong {
    background: rgba(73, 130, 96, 0.10);
    color: #386b4b;
    border: 1px solid rgba(73, 130, 96, 0.25);
}

.cards-type-validation-medium {
    background: rgba(165, 138, 60, 0.10);
    color: #6e5e2b;
    border: 1px solid rgba(165, 138, 60, 0.25);
}

.cards-type-validation-weak {
    background: rgba(150, 150, 160, 0.08);
    color: #6b7280;
    border: 1px solid rgba(150, 150, 160, 0.22);
}

/* --- F9: Per-component minimize / restore ------------------------------ */
/* Replaces the old "Show me" layout-mode pills (B5). Any panel with class
   .minable-panel + data-panel-id="<id>" supports a header toggle that
   collapses the body, leaving the header bar (and a "+" restore button)
   visible. The collapsed-state-stays-visible property is the cliff-fix:
   you always know a panel is hidden because its header is still there. */

.minable-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.minable-panel-title {
    /* shared with existing panel-specific title classes, which already set
       size/color. This class is just here so the toggle button can position
       itself relative to the title row. */
}

.minable-panel-toggle {
    margin-left: auto;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 1px solid #c2cad4;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-muted);
    font-size: 1rem;
    font-family: var(--font-serif);
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.minable-panel-toggle:hover {
    background: #fff;
    border-color: var(--ink-muted);
    color: #3a4a6b;
}

/* When the panel is minimized, hide its body — header (with the now-"+"
   toggle) stays visible so the user can restore it. */
.minable-panel[data-minimized="true"] .minable-panel-body {
    display: none !important;
}

/* Trim padding on minimized panels so the collapsed bar feels compact. */
.minable-panel[data-minimized="true"] {
    padding-bottom: 0.4rem;
}

/* --- B9: Don't-read-too-much checkbox ------------------------ */
.dont-read-too-much {
    margin: 0.6rem 0 0.4rem;
    padding: 0.4rem 0;
}

.dont-read-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 0.84rem;
    color: var(--ink-muted);
    line-height: 1.45;
}

.dont-read-checkbox {
    margin-top: 0.18rem;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.dont-read-text {
    flex: 1;
    font-style: italic;
}

.dont-read-label:hover {
    color: #3a4a6b;
}

/* --- B7: Why Mirror thinks this drawer ----------------------- */
.model-panel-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.why-mirror-drawer {
    margin-left: auto;
}

.why-mirror-summary {
    cursor: pointer;
    list-style: none;
    padding: 0.12rem 0.5rem;
    border: 1px solid #c2cad4;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-muted);
    font-size: 0.74rem;
    font-style: italic;
    font-family: var(--font-serif);
    user-select: none;
}

.why-mirror-summary::-webkit-details-marker {
    display: none;
}

.why-mirror-summary:hover {
    color: #3a4a6b;
    border-color: var(--ink-muted);
}

.why-mirror-body {
    margin-top: 0.5rem;
    padding: 0.65rem 0.8rem;
    background: #fafaf6;
    border: 1px solid #e3dfd1;
    border-radius: 4px;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    color: #4a5568;
    line-height: 1.55;
}

.why-mirror-body p {
    margin: 0.45rem 0;
}

.why-mirror-stage {
    font-weight: 500;
    color: #3a4a6b;
}

.why-mirror-stub {
    font-size: 0.77rem;
    color: var(--ink-faint);
    font-style: italic;
}

/* --- B8: "Soften" correction button -------------------------- */
.correction-btn-soften {
    /* Slight visual distinction from existing yes/not-me/more/less.
       Inherits base .correction-btn styling; this only adds a hint. */
    font-style: italic;
}

.correction-btn-soften.correction-btn-active {
    background: rgba(165, 138, 60, 0.10);
    border-color: rgba(165, 138, 60, 0.45);
    color: #6e5e2b;
}

/* =============================================================
   C-ROUND ADDITIONS — Generative UI halfway move (2026-05-25).
   "Suggested next" cards above the tab bar, populated by an LLM
   call that ranks surfaces grounded in the user's portrait.
   See docs/feedback/brainstorms/2026-05-25-generative-ui-and-coherence.md
   ============================================================= */

/* =============================================================
   B6 (2026-05-29): consumer summary panel on the portrait page.
   Renders the B4 summarizer's dossier/summary.md above the prose.
   ============================================================= */

.portrait-summary-panel {
    margin: 0 auto 2rem;
    max-width: 640px;
    padding: 1.1rem 1.4rem 1.25rem;
    background: linear-gradient(135deg, rgba(58, 74, 107, 0.05), rgba(107, 140, 174, 0.09));
    border: 1px solid rgba(58, 74, 107, 0.16);
    border-left: 3px solid #6b8cae;
    border-radius: 8px;
}

.portrait-summary-label {
    font-family: var(--font-serif);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.5rem;
}

.portrait-summary-text {
    font-family: var(--font-serif);
    font-size: 1.25rem;   /* lede — a clear step above the 1.05rem body so the
                             "In a glance" read becomes the focal point (Dir A2) */
    line-height: 1.6;
    color: #2d3748;
    margin: 0;
}

.suggested-next {
    margin: 0 auto 1.8rem;
    max-width: 920px;
    padding: 1rem 1.25rem 1.25rem;
    background: linear-gradient(135deg, rgba(58, 74, 107, 0.04), rgba(107, 140, 174, 0.07));
    border: 1px solid rgba(58, 74, 107, 0.14);
    border-radius: 8px;
}

.suggested-next-header {
    margin-bottom: 0.85rem;
}

.suggested-next-title {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-weight: 500;
    color: #3a4a6b;
    margin-bottom: 0.2rem;
}

.suggested-next-subtitle {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.78rem;
    color: var(--ink-faint);
    font-style: italic;
}

.suggested-next-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.7rem;
}

.suggested-next-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    text-align: left;
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-serif);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.suggested-next-card:hover {
    border-color: #3a4a6b;
    background: #f7f9fb;
    transform: translateY(-1px);
}

.suggested-next-card:focus {
    outline: 2px solid rgba(58, 74, 107, 0.35);
    outline-offset: 2px;
}

.suggested-next-card-icon-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.suggested-next-card-icon {
    font-size: 1.05rem;
    color: #6b8caf;
}

.suggested-next-card-tag {
    padding: 0.08rem 0.5rem;
    background: rgba(58, 74, 107, 0.07);
    border: 1px solid rgba(58, 74, 107, 0.15);
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
}

.suggested-next-card-title {
    font-size: 0.97rem;
    color: #1c2331;
    font-weight: 500;
    line-height: 1.35;
}

.suggested-next-card-justification {
    font-size: 0.8rem;
    color: var(--ink-muted);
    line-height: 1.5;
}

.suggested-next-card-justification-label {
    font-style: italic;
    color: var(--ink-faint);
    margin-right: 0.15rem;
}

.suggested-next-card-justification-body {
    font-style: italic;
}

.suggested-next-card-cta {
    margin-top: auto;
    padding-top: 0.4rem;
    font-size: 0.82rem;
    color: #3a4a6b;
    font-weight: 500;
    text-align: right;
}

@media (max-width: 640px) {
    .suggested-next-list {
        grid-template-columns: 1fr;
    }
}


/* (S16: the E11 .capability-readiness-strip / .cap-readiness-chip* block was removed — the
   readiness-chip strip was retired (revamp-v1); no template or JS emits these classes anymore.) */

/* ============================================================
   M-D Step 2 — Semantic lenses on the portrait (2026-05-25 evening)
   Section chips above the portrait. Clicking a chip dims
   paragraphs not in that section while keeping matching ones at
   full contrast. Preserves the prose-as-one-document feel while
   solving scannability.
   ============================================================ */
.portrait-lens-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0 0 1.2rem;
    padding: 0.5rem 0;
    font-family: var(--font-serif);
    font-size: 0.75rem;
    color: #5a6b80;
}

.portrait-lens-strip-label {
    color: #7a8a9b;
    font-style: italic;
    margin-right: 0.3rem;
}

.portrait-lens-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.28rem 0.7rem;
    border-radius: 14px;
    background: rgba(73, 99, 144, 0.06);
    border: 1px solid rgba(73, 99, 144, 0.20);
    color: #3a5067;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    font-size: inherit;
}

.portrait-lens-chip:hover {
    background: rgba(73, 99, 144, 0.12);
    border-color: rgba(73, 99, 144, 0.35);
}

.portrait-lens-chip-active {
    background: rgba(73, 99, 144, 0.20);
    border-color: rgba(73, 99, 144, 0.55);
    color: #1c2331;
    font-weight: 500;
}

/* When a lens is active, dim ALL paragraphs by default. Specific lens-tag
   class on a paragraph overrides this back to full contrast. */
.portrait-content.portrait-lens-active .portrait-paragraph {
    opacity: 0.28;
    transition: opacity 0.4s ease;
}

.portrait-content.portrait-lens-active .portrait-paragraph.portrait-paragraph-lens-match {
    opacity: 1;
}

/* Restore the default no-lens state when the user clears (clicks the
   active lens chip again, or clicks a "Show all" chip). */
.portrait-content .portrait-paragraph {
    transition: opacity 0.4s ease;
}

/* ============================================================
   M-C Step 2 — Baseline Milestone screen (2026-05-25 evening)
   Replaces the immediate redirect-to-portrait at Q15 with a
   celebration moment that explicitly invites continuation.
   ============================================================ */
.baseline-milestone-screen {
    max-width: 560px;
    margin: 2.5rem auto;
    padding: 2.5rem 2rem;
    text-align: center;
    background: linear-gradient(160deg, rgba(73, 130, 96, 0.06), rgba(73, 99, 144, 0.08));
    border: 1px solid rgba(73, 99, 144, 0.18);
    border-radius: 12px;
    font-family: var(--font-serif);
    animation: baselineFadeIn 0.6s ease-out;
}

@keyframes baselineFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.baseline-milestone-icon {
    font-size: 2rem;
    color: #6b8aa8;
    margin-bottom: 0.5rem;
}

.baseline-milestone-title {
    font-size: 1.55rem;
    color: #2d4a68;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 0 0 0.85rem;
}

.baseline-milestone-subtitle {
    font-size: 1rem;
    color: #4a5a70;
    line-height: 1.55;
    margin: 0 auto 1.5rem;
    max-width: 460px;
}

.baseline-milestone-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 0 1rem;
}

.baseline-milestone-btn {
    padding: 0.65rem 1.4rem;
    font-family: var(--font-serif);
    font-size: 0.95rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    letter-spacing: 0.01em;
}

.baseline-milestone-btn-primary {
    background: #3a5a7b;
    border-color: #3a5a7b;
    color: white;
    font-weight: 500;
}

.baseline-milestone-btn-primary:hover {
    background: #2d4a68;
    border-color: #2d4a68;
}

.baseline-milestone-btn-secondary {
    background: white;
    border-color: #c2cad4;
    color: #3a5a7b;
}

.baseline-milestone-btn-secondary:hover {
    background: #f0f4f8;
    border-color: #6b8aa8;
}

.baseline-milestone-note {
    font-size: 0.82rem;
    color: #7a8a9b;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

/* ============================================================
   E10 — In-session Decide chat modal (2026-05-25 evening)
   Opens when "Help me decide" is invoked mid-session. Modal
   overlay that lets the user chat with their forming portrait
   WITHOUT leaving the session. Session UI stays underneath,
   ready to resume when modal closes.
   ============================================================ */
.in-session-chat-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 35, 49, 0.32);
    backdrop-filter: blur(2px);
    z-index: 998;
}

/* M07 phase-1 — portrait-so-far preview overlay (mirrors the in-session chat modal). */
.portrait-preview-backdrop {
    position: fixed; inset: 0; background: rgba(28, 35, 49, 0.32);
    backdrop-filter: blur(2px); z-index: 998;
}
.portrait-preview-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90%; max-width: 600px; max-height: 85vh; background: #fafbfc;
    border: 1px solid rgba(73, 99, 144, 0.30); border-radius: 12px;
    box-shadow: 0 8px 32px rgba(28, 35, 49, 0.22); z-index: 999;
    display: flex; flex-direction: column; padding-bottom: 1.25rem;
    animation: inSessionChatEnter 0.3s ease-out;
}
.portrait-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.4rem 0.3rem; flex: 0 0 auto;
}
.portrait-preview-title { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; color: #1c2331; }
.portrait-preview-close {
    background: none; border: none; font-size: 1.5rem; line-height: 1; color: #6b7689;
    cursor: pointer; padding: 0 0.25rem;
}
.portrait-preview-close:hover { color: #1c2331; }
.portrait-preview-note {
    margin: 0 1.4rem 0.6rem; font-size: 0.85rem; color: #6b7689; font-style: italic;
    line-height: 1.5; flex: 0 0 auto;
}
.portrait-preview-body {
    flex: 1 1 auto; overflow-y: auto; padding: 0.2rem 1.4rem; margin-bottom: 0.9rem;
    font-family: var(--font-serif); color: #2c3647; line-height: 1.7;
}
.portrait-preview-loading { color: #6b7689; font-style: italic; }
.portrait-preview-keep {
    align-self: center; flex: 0 0 auto; font-family: var(--font-serif); font-size: 0.95rem;
    color: #3a4a6b; background: rgba(58, 74, 107, 0.06); border: 1px solid rgba(58, 74, 107, 0.22);
    border-radius: 999px; padding: 0.5rem 1.4rem; cursor: pointer;
}
.portrait-preview-keep:hover { background: rgba(58, 74, 107, 0.12); }

.in-session-chat-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 560px;
    max-height: 85vh;
    background: #fafbfc;
    border: 1px solid rgba(73, 99, 144, 0.30);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(28, 35, 49, 0.22);
    z-index: 999;
    display: flex;
    flex-direction: column;
    font-family: var(--font-serif);
    animation: inSessionChatEnter 0.3s ease-out;
}

@keyframes inSessionChatEnter {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.in-session-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid rgba(73, 99, 144, 0.15);
}

.in-session-chat-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: #2d4a68;
    letter-spacing: 0.01em;
}

.in-session-chat-close {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.3rem;
}

.in-session-chat-close:hover {
    color: #1c2331;
}

.in-session-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.in-session-chat-intro {
    color: #5a6b80;
    font-size: 0.9rem;
    margin: 0 0 0.5rem;
    font-style: italic;
}

.in-session-chat-topic {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #c2cad4;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    box-sizing: border-box;
}

.in-session-chat-topic:focus {
    outline: none;
    border-color: #6b8aa8;
}

.in-session-chat-start-btn,
.in-session-chat-send-btn {
    padding: 0.55rem 1.1rem;
    background: #3a5a7b;
    border: 1px solid #3a5a7b;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    transition: background 0.2s ease;
    align-self: flex-start;
    margin-top: 0.5rem;
}

.in-session-chat-start-btn:hover,
.in-session-chat-send-btn:hover {
    background: #2d4a68;
}

.in-session-chat-start-btn:disabled,
.in-session-chat-send-btn:disabled {
    background: #99a8ba;
    border-color: #99a8ba;
    cursor: default;
}

.in-session-chat-transcript {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.in-session-chat-turn {
    padding: 0.7rem 0.95rem;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 92%;
}

.in-session-chat-turn-agent {
    background: rgba(73, 99, 144, 0.08);
    color: #2d3a52;
    align-self: flex-start;
    border: 1px solid rgba(73, 99, 144, 0.18);
}

.in-session-chat-turn-user {
    background: #3a5a7b;
    color: white;
    align-self: flex-end;
}

.in-session-chat-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.4rem;
    border-top: 1px solid rgba(73, 99, 144, 0.10);
    padding-top: 0.6rem;
}

.in-session-chat-input {
    flex: 1;
    padding: 0.55rem 0.8rem;
    border: 1px solid #c2cad4;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
    box-sizing: border-box;
    min-height: 60px;
}

.in-session-chat-input:focus {
    outline: none;
    border-color: #6b8aa8;
}

.in-session-chat-send-btn {
    margin-top: 0;
    align-self: stretch;
    flex-shrink: 0;
}

.in-session-chat-closed-note {
    text-align: center;
    color: #5a6b80;
    font-style: italic;
    font-size: 0.88rem;
    margin: 0.8rem 0 0;
}

.in-session-chat-footer {
    padding: 0.55rem 1.2rem;
    border-top: 1px solid rgba(73, 99, 144, 0.10);
    background: rgba(73, 99, 144, 0.03);
    border-radius: 0 0 12px 12px;
}

.in-session-chat-footer-note {
    font-size: 0.78rem;
    color: #7a8a9b;
    font-style: italic;
}

/* Mobile — full-width modal */
@media (max-width: 640px) {
    .in-session-chat-modal {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        top: 0;
        left: 0;
        transform: none;
        border-radius: 0;
    }
}

/* ============================================================
   DEV VIEW CONTROLS — only visible when ?dev=1 in URL
   (the panel itself sets hidden=false from its own script).
   Small floating panel for comparing dev/consumer renderings.
   ============================================================ */
.dev-view-controls-panel {
    /* Sits above the dev-feedback-fab (#dev-feedback-fab lives at
       bottom: 18px, height ~38px). 4.5rem clears the fab with a small
       gap so both dev tools are visible and clickable. The fab was
       being occluded by this panel before this offset existed. */
    position: fixed;
    bottom: 4.5rem;
    left: 0.7rem;
    background: rgba(28, 35, 49, 0.92);
    color: rgba(255, 255, 255, 0.92);
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    line-height: 1.35;
    z-index: 10000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    max-width: 230px;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.dev-view-controls-panel.dev-view-controls-collapsed {
    padding: 0.35rem 0.5rem;
    max-width: none;
}

.dev-view-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.45rem;
}

.dev-view-controls-title {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
}

.dev-view-controls-collapse,
.dev-view-controls-expand {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
    border-radius: 3px;
}

.dev-view-controls-collapse:hover,
.dev-view-controls-expand:hover {
    color: white;
    background: rgba(255, 255, 255, 0.10);
}

.dev-view-controls-expand {
    font-size: 1.1rem;
}

.dev-view-controls-section {
    margin-bottom: 0.55rem;
}

.dev-view-controls-section:last-of-type {
    margin-bottom: 0.3rem;
}

.dev-view-controls-section-label {
    margin: 0 0 0.25rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
}

.dev-view-controls-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.12rem 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
}

.dev-view-controls-row:hover {
    color: white;
}

.dev-view-controls-row input {
    margin: 0;
    cursor: pointer;
}

.dev-view-controls-reset {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0.2rem;
    font-family: inherit;
}

.dev-view-controls-reset:hover {
    color: white;
    border-color: rgba(255, 255, 255, 0.40);
}

/* ============================================================
   THE VIEW-LAYER HIDE RULES — these are the actual switches
   the dev view controls flip. Each rule is independent; each
   matches one body class to one set of elements. Add a new
   toggle by adding (a) a body class here, (b) a checkbox in
   _dev_view_controls.html, (c) the element class on whatever
   should hide.

   IMPORTANT: only display: none changes here. No behavior
   forks anywhere. If you ever feel the need to put logic
   behind a body class, stop and reconsider (see the
   discussion in the conversation log about Type 1 vs.
   Type 3 toggles).
   ============================================================ */

/* Consumer mode: hide everything tagged as a research instrument. */
body.view-consumer .research-instrument {
    display: none !important;
}

/* Independent helpers (can be combined with view-consumer or used alone). */
body.hide-deploy-badge .deploy-badge {
    display: none !important;
}

body.hide-stub-markers .stub-mock-marker {
    display: none !important;
}

body.hide-honest-disclaimers .honest-disclaimer {
    display: none !important;
}

/* Mobile: pin the panel slightly differently to avoid overlap with
   the "Use Mirror" floating button. */
@media (max-width: 640px) {
    .dev-view-controls-panel {
        bottom: 4.5rem; /* clears the floating Use-Mirror button */
        max-width: calc(100vw - 1.4rem);
    }
}


/* =============================================================
   D-ROUND ADDITIONS — Phase D polish (2026-05-25, Sofia feedback)
   ============================================================= */

/* --- D3: Readiness pills on Cards type buttons ----------------- */
.cards-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    align-items: center;
}

.cards-type-readiness {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-family: var(--font-serif);
    font-size: 0.72rem;
    font-style: italic;
    border-radius: 999px;
    line-height: 1.3;
}

.cards-type-readiness-ready {
    background: rgba(73, 130, 96, 0.14);
    color: #2d5a3d;
    border: 1px solid rgba(73, 130, 96, 0.32);
    font-style: normal;
    font-weight: 500;
}

.cards-type-readiness-partial {
    background: rgba(73, 99, 144, 0.10);
    color: #3a4a6b;
    border: 1px solid rgba(73, 99, 144, 0.26);
}

.cards-type-readiness-mock {
    background: rgba(165, 138, 60, 0.12);
    color: #6e5e2b;
    border: 1px solid rgba(165, 138, 60, 0.30);
}

.cards-type-readiness-needs-setup {
    background: rgba(180, 140, 110, 0.12);
    color: #6b4a35;
    border: 1px solid rgba(180, 140, 110, 0.30);
}

/* When pills are stacked, override the earlier .cards-type-validation
   alignment so both pills sit on the same row. */
.cards-type-pills .cards-type-validation {
    align-self: auto;
    margin-top: 0;
}

/* --- D3 (cont.): Readiness pills on Suggested-next cards ------- */
.suggested-next-readiness {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    font-family: var(--font-serif);
    font-size: 0.66rem;
    font-style: italic;
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
}

.suggested-next-readiness-ready {
    background: rgba(73, 130, 96, 0.14);
    color: #2d5a3d;
    border: 1px solid rgba(73, 130, 96, 0.32);
    font-style: normal;
    font-weight: 500;
}

.suggested-next-readiness-engaged {
    background: rgba(73, 130, 96, 0.20);
    color: #1f4830;
    border: 1px solid rgba(73, 130, 96, 0.42);
    font-style: normal;
    font-weight: 500;
}

.suggested-next-readiness-partial {
    background: rgba(73, 99, 144, 0.10);
    color: #3a4a6b;
    border: 1px solid rgba(73, 99, 144, 0.26);
}

.suggested-next-readiness-needs-setup {
    background: rgba(180, 140, 110, 0.12);
    color: #6b4a35;
    border: 1px solid rgba(180, 140, 110, 0.30);
}

/* --- D4: "From your session" group header + pending card variant */
.suggested-next-group-header {
    grid-column: 1 / -1;
    margin: 0.6rem 0 0.1rem;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--ink-muted);
    padding-bottom: 0.3rem;
    border-bottom: 1px dashed rgba(107, 122, 141, 0.25);
}

/* Pending cards (user already engaged with the thread) get a subtle
   accent border so they read as "yours, in progress" vs. "new ideas". */
.suggested-next-card-pending {
    border-left: 3px solid rgba(73, 130, 96, 0.50);
    padding-left: calc(1rem - 2px);
}

/* =============================================================
   E-LIST STAGE 1 — "Use Mirror" slide-in capability panel
   (2026-05-25, Sofia-inspired). Floating button bottom-right;
   panel slides in from the right edge. See:
   templates/_capability_panel.html and agents/capability_assessor.py
   ============================================================= */

.use-mirror-btn {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    z-index: 1450;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #3a4a6b, #5a6f97);
    color: #fff;
    border: 1px solid rgba(58, 74, 107, 0.45);
    border-radius: 999px;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(58, 74, 107, 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.use-mirror-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(58, 74, 107, 0.36);
}

.use-mirror-btn:active {
    transform: translateY(0);
}

.use-mirror-btn-icon {
    font-size: 1rem;
    color: #d6dce8;
}

.use-mirror-btn-text {
    line-height: 1;
}

.capability-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 35, 49, 0.18);
    z-index: 1460;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.capability-panel-backdrop-open {
    opacity: 1;
}

.capability-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 92vw);
    z-index: 1470;
    background: #fff;
    border-left: 1px solid #d5dbe3;
    box-shadow: -8px 0 32px rgba(28, 35, 49, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Animation removed for now — initial transform-then-translate had
       a stubborn ordering bug under the cards-tab CSS load. Panel just
       appears on hidden=false. Animation can come back later. */
}

.capability-panel[hidden] {
    display: none;
}

/* Kept as a no-op for backward compat with JS that still toggles this
   class. The slide-in animation can be reintroduced here later. */
.capability-panel-open {
    /* intentionally empty */
}

.capability-panel-header {
    padding: 1.2rem 1.4rem 0.8rem;
    border-bottom: 1px solid #e2e6ec;
    position: relative;
}

.capability-panel-title {
    margin: 0 0 0.25rem;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: #1c2331;
    font-weight: 500;
}

.capability-panel-subtitle {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.82rem;
    color: var(--ink-muted);
    font-style: italic;
    line-height: 1.5;
    padding-right: 2.2rem;
}

/* Tester feedback 2026-05-28: the × was hard to hit. Larger hit area
   + slightly bigger glyph + bumped offset to give it more breathing
   room from the edge. */
.capability-panel-close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    min-width: 2.6rem;
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.capability-panel-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #2c3e50;
}

.capability-panel-close:active {
    background: rgba(0, 0, 0, 0.14);
}

.capability-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.2rem 1.2rem;
}

.capability-panel-empty {
    margin: 1rem 0;
    font-family: var(--font-serif);
    font-size: 0.88rem;
    color: var(--ink-faint);
    font-style: italic;
    text-align: center;
}

.capability-panel-footer {
    padding: 0.75rem 1.4rem 1rem;
    border-top: 1px solid #e2e6ec;
    background: #fafaf6;
}

.capability-panel-footer-note {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 0.74rem;
    color: var(--ink-faint);
    font-style: italic;
    line-height: 1.55;
}

.capability-card {
    margin-bottom: 0.85rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid #d5dbe3;
    border-radius: 6px;
    font-family: var(--font-serif);
}

.capability-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}

.capability-card-name {
    font-size: 0.97rem;
    font-weight: 500;
    color: #1c2331;
    line-height: 1.3;
}

.capability-card-pill {
    flex-shrink: 0;
    padding: 0.12rem 0.55rem;
    font-size: 0.7rem;
    font-style: italic;
    border-radius: 999px;
    line-height: 1.3;
    white-space: nowrap;
}

.capability-card-pill-ready {
    background: rgba(73, 130, 96, 0.14);
    color: #2d5a3d;
    border: 1px solid rgba(73, 130, 96, 0.32);
    font-style: normal;
    font-weight: 500;
}

.capability-card-pill-try_partial {
    background: rgba(73, 99, 144, 0.10);
    color: #3a4a6b;
    border: 1px solid rgba(73, 99, 144, 0.26);
}

.capability-card-pill-needs_one_clue,
.capability-card-pill-needs_another {
    background: rgba(165, 138, 60, 0.12);
    color: #6e5e2b;
    border: 1px solid rgba(165, 138, 60, 0.30);
}

.capability-card-pill-mock {
    background: rgba(150, 150, 160, 0.10);
    color: #6b7280;
    border: 1px solid rgba(150, 150, 160, 0.26);
}

.capability-card-desc {
    margin: 0.1rem 0 0.55rem;
    font-size: 0.82rem;
    color: var(--ink-muted);
    line-height: 1.45;
}

.capability-card-need {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.7rem;
    background: #fafaf6;
    border-left: 3px solid #c8c0a8;
    border-radius: 0 4px 4px 0;
    font-size: 0.82rem;
    color: #4a5568;
    line-height: 1.5;
}

.capability-card-need-label {
    font-style: italic;
    color: var(--ink-faint);
    margin-right: 0.15rem;
}

.capability-card-need-body {
    font-style: italic;
}

.capability-card-action {
    width: 100%;
    margin-top: 0.2rem;
    padding: 0.45rem 0.8rem;
    background: #fff;
    border: 1px solid #c2cad4;
    border-radius: 5px;
    font-family: var(--font-serif);
    font-size: 0.86rem;
    color: #3a4a6b;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.capability-card-action:hover {
    background: #f7f9fb;
    border-color: var(--ink-muted);
}

/* Ready-state cards get a stronger CTA */
.capability-card-ready .capability-card-action {
    background: #3a4a6b;
    border-color: #3a4a6b;
    color: #fff;
}

.capability-card-ready .capability-card-action:hover {
    background: #2c3a55;
    border-color: #2c3a55;
}

/* Mock-state cards get a subdued look */
.capability-card-mock {
    background: #fafafb;
    border-color: #e3e6ec;
}

.capability-card-mock .capability-card-name {
    color: #4a5568;
}

/* (F9 retired: Quiet-mode hiding of the Use Mirror button.) */

@media (max-width: 540px) {
    .capability-panel {
        width: 100vw;
        border-left: none;
    }
    .use-mirror-btn {
        bottom: 0.8rem;
        right: 0.8rem;
        font-size: 0.85rem;
        padding: 0.5rem 0.85rem;
    }
}

/* ===================================================================
   revamp-v1 batch — Add-a-thought pill (B), concise insights panel
   (Slice C), declutter (Slice D). All on existing design tokens; no new
   color values introduced (primary button matches .submit-button).
   =================================================================== */

/* (The "Add a thought" composer styles were removed 2026-06-12 with the composer
   itself — absorbed by the fresh-thread New Chat; /api/volunteer remains UI-less.) */

/* --- Slice C: concise insights panel (lead + section tags, expandable) --- */
.model-concise {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    animation: modelFadeIn 0.5s ease forwards;
}
.model-lead {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--ink);
}
.model-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.model-tag {
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    color: var(--ink-secondary);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.6rem;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.model-tag:hover {
    background: var(--surface);
    border-color: var(--brand-mid);
    color: var(--ink);
}
.model-expand-toggle {
    align-self: flex-start;
    margin-top: var(--space-3);
    background: none;
    border: none;
    color: var(--brand);
    font-size: var(--text-xs);
    font-family: inherit;
    cursor: pointer;
    padding: 0.2rem 0;
    letter-spacing: 0.02em;
}
.model-expand-toggle:hover { text-decoration: underline; }

/* --- Slice D: tucked "don't read into this" info marker --- */
.dont-read-info {
    margin-left: 0.3rem;
    color: var(--ink-faint);
    cursor: help;
    font-size: 0.85em;
}

/* Alt-offer pill (QUESTIONER_ALT_OFFER): the "or go this way" one-tap redirect.
   Subtle, secondary affordance shown under the question when the selector was torn. */
.alt-offer-pill {
    display: inline-block;
    margin: 0.6rem 0 0.2rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-style: italic;
    color: #4a5a72;
    background: rgba(120, 140, 170, 0.10);
    border: 1px solid rgba(120, 140, 170, 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.alt-offer-pill:hover {
    background: rgba(120, 140, 170, 0.18);
    border-color: rgba(120, 140, 170, 0.55);
}
.alt-offer-pill:active { transform: scale(0.98); }
.alt-offer-pill:disabled { opacity: 0.5; cursor: default; }

/* ===========================================================================
   LOOK & FEEL BAKE-OFF (look-and-feel branch) — styles for the three live-
   understanding variants + the corner switcher. Throwaway scaffolding: remove
   the losing variants' styles when a winner is picked. Calm/editorial per the
   product attitude; uses the theme's light-surface ink tokens so contrast
   matches the rest of the app (the switcher keeps a dark chip on purpose).
   =========================================================================== */
.lf-switcher {
    position: fixed; left: 14px; bottom: 14px; z-index: 9000;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px; border-radius: 999px;
    background: rgba(22, 32, 44, 0.88);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}
.lf-switcher-title {
    color: #aab6c6; text-transform: uppercase; letter-spacing: 0.08em;
    font-size: 10px; padding: 0 4px;
}
.lf-switcher-btn {
    border: 0; cursor: pointer; border-radius: 999px;
    padding: 5px 10px; font-size: 12px; color: #d7e0ea;
    background: transparent; transition: background 0.15s ease, color 0.15s ease;
}
.lf-switcher-btn:hover { background: rgba(255, 255, 255, 0.10); color: #ffffff; }
.lf-switcher-btn.active { background: linear-gradient(135deg, #3f6f9f, #5a8ab5); color: #fff; }

.lf-glance { display: flex; flex-direction: column; gap: 10px; }
.lf-glance-label {
    margin: 0; font-size: 11px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-muted);
}
.lf-glance-lead { margin: 0; font-size: var(--text-base); line-height: var(--leading); color: var(--ink); }

/* V2 — soft qualitative maturity legend (no numbers). Dark ink on light surface. */
.lf-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.lf-dim {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 6px 11px; border-radius: 10px; font-size: var(--text-sm);
    background: var(--surface-sunken); border: 1px solid var(--border);
}
.lf-dim-name { color: var(--ink); }
.lf-dim-band { font-size: 11px; color: var(--ink-faint); }
.lf-dim-taking_shape {
    background: rgba(63, 111, 159, 0.12); border-color: rgba(63, 111, 159, 0.32);
}
.lf-dim-taking_shape .lf-dim-band { color: var(--ink-secondary); }
.lf-dim-clearly_seen {
    background: rgba(46, 150, 110, 0.14); border-color: rgba(46, 150, 110, 0.42);
}
.lf-dim-clearly_seen .lf-dim-band { color: #1f7a55; }
.lf-dim-clearly_seen .lf-dim-name::after { content: ' \2713'; color: #1f7a55; font-size: 11px; }
.lf-dim-empty { opacity: 0.55; }
.lf-legend-dormant { margin-top: 2px; }
.lf-legend-dormant > summary {
    cursor: pointer; font-size: 12px; color: var(--ink-muted);
    list-style: none; padding: 2px 0;
}
.lf-legend-dormant > summary::-webkit-details-marker { display: none; }
.lf-legend-dormant > summary::before { content: '\25B8  '; }
.lf-legend-dormant[open] > summary::before { content: '\25BE  '; }
.lf-legend-dormant .lf-legend { margin-top: 6px; }

/* V3 — the developing portrait: blur -> resolve on each update. Dark ink. */
.lf-hero-portrait {
    margin: 0; font-size: var(--text-lg); line-height: var(--leading); color: var(--ink);
    transition: filter 0.8s ease, opacity 0.8s ease;
}
.lf-hero-portrait.lf-resolving { filter: blur(7px); opacity: 0.45; }
.lf-hero-foot { margin: 0; font-size: 12px; color: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   The per-dimension accordion (founder 2026-06-12; design rationale in
   docs/glance-accordion.md). Anatomy: small-caps dimension label + the maturity
   band AS A WORD (italic, lighter ink — words can't be misread as percentages)
   + a rotating down-caret, over the one-sentence collapsed line; the whole
   <summary> is one tap target; rows expand independently and persist. At
   "clearly seen" the band word fades (the settled-confidence move) — a maxed
   meter reads as a finished game, an absent one as quiet certainty. */
.lf-acc { border-top: 1px solid var(--border, #e3e8ee); }
.lf-acc:first-of-type { border-top: none; }
.lf-acc-head {
    list-style: none; cursor: pointer; display: block;
    padding: 0.55rem 0 0.5rem;
}
.lf-acc-head::-webkit-details-marker { display: none; }
.lf-acc-headrow { display: flex; align-items: baseline; gap: 8px; }
.lf-acc-name {
    font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-secondary, #5b6a7f);
}
.lf-acc-band {
    margin-left: auto; font-style: italic; font-size: 0.78rem;
    color: var(--ink-muted, #5a6d82);
}
/* FUTURE_REFLECTION: stepped maturity gauge + the "fuller picture" link on the live panel. */
.lf-gauge { margin-left: auto; display: inline-flex; gap: 2px; align-self: center; }
.lf-seg { width: 11px; height: 4px; border-radius: 2px; background: var(--border-strong, #c2cad6); }
.lf-seg.on { background: var(--brand-mid, #6b8cae); }
.lf-picture-link {
    display: inline-block; margin-top: 10px; font-size: 0.82rem; font-weight: 600;
    color: var(--brand, #3a4a6b); background: none; border: none; cursor: pointer; padding: 4px 0;
}
.lf-picture-link:hover { color: var(--brand-deep, #26344d); }

/* QUESTION_NAV — quiet back arrow + skip link, and the read-only review overlay. */
.qnav-back {
    display: inline-block; background: none; border: none; cursor: pointer;
    color: var(--ink-faint, #5e6a7c); font-size: var(--text-sm, 0.875rem);
    padding: 2px 0; margin: 0 0 6px; opacity: 0.8;
}
.qnav-back:hover { opacity: 1; color: var(--ink-secondary, #3f4a5d); }
.qnav-skip {
    color: var(--ink-faint, #5e6a7c); font-size: var(--text-sm, 0.875rem);
    text-decoration: none; border-bottom: 1px dotted currentColor; opacity: 0.85;
}
.qnav-skip:hover { opacity: 1; color: var(--ink-secondary, #3f4a5d); }
.qnav-overlay {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
    justify-content: center; padding: 1.25rem;
    background: rgba(20, 26, 38, 0.45); animation: qnavfade 0.15s ease;
}
@keyframes qnavfade { from { opacity: 0; } to { opacity: 1; } }
.qnav-card {
    background: var(--surface, #fff); border: 1px solid var(--border-strong, #c2cad6);
    border-radius: 14px; padding: 1.25rem 1.4rem 1.1rem; max-width: 36rem; width: 100%;
    box-shadow: 0 8px 30px rgba(20, 26, 38, 0.2);
}
.qnav-pos {
    font-size: var(--text-xs, 0.75rem); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-faint, #5e6a7c); margin-bottom: 0.5rem;
}
.qnav-rev-preamble { font-style: italic; color: var(--ink-muted, #525d6e); font-size: 0.92rem; margin: 0 0 0.4rem; }
.qnav-rev-q { font-size: 1.08rem; color: var(--ink-strong, #141a26); line-height: 1.45; margin: 0 0 0.7rem; }
.qnav-rev-a {
    font-size: 0.95rem; line-height: 1.55; color: var(--ink, #1c2331);
    background: var(--surface-sunken, #eef2f7); border-radius: 9px; padding: 0.65rem 0.8rem;
    max-height: 9rem; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.qnav-rev-a-skip { color: var(--ink-faint, #5e6a7c); font-style: italic; }
.qnav-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }
.qnav-step {
    font-size: 0.85rem; padding: 0.35rem 0.7rem; border: 1px solid var(--border, #d8dee7);
    border-radius: 7px; background: var(--surface, #fff); color: var(--ink-secondary, #3f4a5d); cursor: pointer;
}
.qnav-step:hover:not(:disabled) { border-color: var(--brand-mid, #6b8cae); }
.qnav-step:disabled { opacity: 0.4; cursor: default; }
.qnav-done {
    margin-left: auto; font-size: 0.86rem; font-weight: 600; padding: 0.4rem 0.9rem;
    border: none; border-radius: 7px; background: var(--brand, #3a4a6b); color: #fff; cursor: pointer;
}
.qnav-done:hover { background: var(--brand-deep, #26344d); }

/* LATENCY_GIVEBACK — a quiet typing caret while the preamble streams in (the "noticing" beat). */
.preamble-typing::after {
    content: '▋'; margin-left: 1px; color: var(--brand-mid, #6b8cae);
    animation: preambleblink 1s steps(1) infinite;
}
@keyframes preambleblink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .preamble-typing::after { display: none; } }
.lf-acc-caret {
    color: var(--ink-muted, #5a6d82); font-size: 0.8rem; line-height: 1;
    transition: transform 0.2s ease;
}
.lf-acc[open] > .lf-acc-head .lf-acc-caret { transform: rotate(180deg); }
.lf-acc-line {
    display: block; margin-top: 0.3rem;
    font-size: 0.95rem; line-height: 1.55; color: var(--ink, #2a3648);
}
/* The maturity band also modulates the sentence's ink: forming reads lighter. */
.lf-acc-forming .lf-acc-line { color: var(--ink-secondary, #5b6a7f); }
.lf-acc-clearly_seen .lf-acc-band { opacity: 0.45; }
.lf-acc-body { padding: 0.1rem 0 0.8rem; }
.lf-acc-para {
    font-size: 0.92rem; line-height: 1.6; color: var(--ink-secondary, #44566b);
    margin: 0 0 0.6rem;
}
/* "(wondering)" chart paragraphs render in the product's own wondering register —
   the hedge stays, dressed as a musing rather than a raw marker. */
.lf-acc-para-wondering {
    font-style: italic;
    color: var(--ink-muted, #5a6d82);
}
.lf-acc-wondering-tag { color: var(--ink-faint, #8a96a8); }
/* Obs#4: inner chart "## subheaders" and "* / -" bullet lists, rendered (not literal). */
.lf-acc-subhead {
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--ink-muted, #6b7686); margin: 0.7rem 0 0.35rem;
}
.lf-acc-body > .lf-acc-subhead:first-child { margin-top: 0.1rem; }
.lf-acc-list { margin: 0.2rem 0 0.6rem; padding-left: 1.1rem; }
.lf-acc-list li {
    font-size: 0.92rem; line-height: 1.6; color: var(--ink-secondary, #44566b);
    margin: 0 0 0.3rem;
}
.lf-acc .model-para-wrapper { margin-bottom: 0.6rem; }
@media (prefers-reduced-motion: reduce) {
    .lf-acc-caret { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lf-hero-portrait { transition: opacity 0.4s ease; }
    .lf-hero-portrait.lf-resolving { filter: none; opacity: 0; }
    .lf-switcher-btn { transition: none; }
}


/* PREAMBLE_FIRST: the give-before-ask preview easing in above the thinking indicator. */
.preamble-preview-in {
  animation: preamblePreviewIn 0.45s ease-out;
}

@keyframes preamblePreviewIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}


/* Landing resume: the quiet continue link for returning users. */
.landing-resume {
  margin-top: 0.9rem;
  font-size: 0.92rem;
  opacity: 0.85;
}

.landing-resume a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* P10: the empty-Continue skip offer — quiet, inline, self-dismissing. */
.empty-skip-hint {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

.empty-skip-hint a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* P11 bake-off: V1/V2 quiet mode strip + the variant switcher pill. */
/* The change-topic zone — toggle + strip, OPEN by default, BELOW the answer flow
   (founder 2026-06-12 fourth revision: answering the current line is the main act;
   the alternative waits underneath, behind a soft rule). */
.change-topic-zone {
    margin: 1.1rem 0 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e3e8ee;
}
/* (S17: the .change-topic-toggle rules were removed — M17 made the strip always-open, no toggle element.) */

/* Change-topic strip (fresh-eyes UX 2026-06-16 redesign): no longer a collapsible
   "Move on to new ↑" toggle with pill/oval tiles. Now an inline sentence ("Or change
   the thread to new:") above a row of square, slightly-larger tiles that match the
   site's other tiles (white, soft border + shadow, ~12px corners) — consistent with the
   starter menu and cards rather than the old circular outliers. */
.response-modes-quiet { margin: 0.4rem 0 0.2rem; }
.response-modes-quiet .response-modes-explainer {
  display: block;
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-muted, #525d6e);
  margin: 0 0 0.6rem;
}
/* (The wave-2 quiet-toggle affordance was removed in M17 (2026-06-17): the strip is always open,
   not minimizable — no .response-modes-toggle class is applied anymore.) */
.response-modes-quiet .response-modes-tiles { gap: 0.55rem; justify-content: flex-start; }
.response-modes-quiet .mode-tile {
  width: 76px;
  height: 72px;
  padding: 0.4rem 0.3rem;
  opacity: 1;                       /* founder wants these prominent, not faded */
  border-radius: 12px;              /* square-cornered, matches the starter tiles + cards */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.response-modes-quiet .mode-tile-icon { font-size: 1.4rem; }
.response-modes-quiet .mode-tile-label { font-size: 0.82rem; color: var(--ink, #1c2331); }
.response-modes-quiet .mode-tile:hover { background: #f7f9fc; border-color: #6b8cae; }

/* (bake-off switcher removed 2026-06-12 — V2 graduated) */

/* (#4 input-vs-strip hierarchy bake-off RESOLVED 2026-06-20: founder kept the TILES as
   control — the "prominent, not faded" intent stands — and only the box's gentle
   promotion graduated, folded into the base .text-input rule above. The body.bakeoff-demoted
   variant + the ?bakeoff switcher (CSS here + JS in mirror.js) were removed.) */

/* =========================================================================
   Session boundary (units-of-understanding C, 2026-06-18)
   The soft nudge (quiet, dismissable) + the wall (calm, never alarming — the
   interview pausing is a gentle handoff, not an error or a locked door).
   ========================================================================= */
.session-nudge {
    margin: var(--space-4) auto var(--space-5);
    max-width: 640px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.session-nudge-text { margin: 0; color: var(--ink-secondary); font-size: var(--text-sm); line-height: var(--leading-tight); }
.session-nudge-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.session-nudge-read {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--brand); font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
}
.session-nudge-read:hover { text-decoration: underline; }
.session-nudge-dismiss {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--ink-faint); font-size: var(--text-sm); white-space: nowrap;
}
.session-nudge-dismiss:hover { color: var(--ink-secondary); }

.session-wall {
    margin: var(--space-6) auto;
    max-width: 600px;
    padding: var(--space-6) var(--space-5);
    text-align: center;
}
.session-wall-title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    color: var(--ink-strong);
    margin: 0 0 var(--space-4);
}
.session-wall-body {
    color: var(--ink-secondary);
    font-size: var(--text-base);
    line-height: var(--leading);
    margin: 0 auto var(--space-4);
    max-width: 52ch;
}
.session-wall-actions {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-3); margin: var(--space-5) 0 var(--space-4);
}
.session-wall-primary {
    background: var(--brand); color: #fff; border: none; cursor: pointer;
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
    font-size: var(--text-base); font-weight: 600;
}
.session-wall-primary:hover { background: var(--brand-deep); }
.session-wall-secondary {
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--brand); font-size: var(--text-sm); font-weight: 600;
}
.session-wall-secondary:hover { text-decoration: underline; }
.session-wall-coming {
    color: var(--ink-faint); font-size: var(--text-xs); line-height: var(--leading-tight);
    margin: var(--space-5) auto 0; max-width: 48ch;
}

/* Sign in with Google (returning-user auth, 2026-06-19). A clean custom button for the alpha;
   swap to Google's official branded asset before a public launch (brand guidelines). */
.google-signin, .session-google-signin {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-secondary);
    font-size: var(--text-sm); font-weight: 600; text-decoration: none; cursor: pointer;
}
.google-signin:hover, .session-google-signin:hover { background: var(--surface-subtle); border-color: var(--brand-mid); }
.google-g {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: #fff; border: 1px solid var(--border); color: #4285f4;
    font-weight: 700; font-size: 0.8rem; line-height: 1;
}
.landing-signin { margin-top: var(--space-3); }
.landing-signin .google-signin { font-size: var(--text-xs); }

/* Advisor-tab open chat (units-of-understanding boundary, 2026-06-19) — the post-interview /
   anytime "talk to your portrait" conversation, embedded in the tab (not a modal). */
.advisor-chat { margin: 0 auto var(--space-5); max-width: 640px; text-align: left; }
.advisor-chat-intro {
    color: var(--ink-secondary); font-size: var(--text-sm); line-height: var(--leading);
    margin: 0 0 var(--space-4);
}
/* C3 (units-clarity, 2026-06-22): example-ask chips so "ask anything" isn't a blank box. */
.advisor-chat-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.advisor-chat-sugg-label { font-size: var(--text-sm); color: var(--ink-muted); }
.advisor-chat-sugg {
    font: inherit; font-size: var(--text-sm); color: var(--brand);
    background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 999px;
    padding: 0.3rem 0.8rem; cursor: pointer; transition: border-color 0.13s, background 0.13s;
}
.advisor-chat-sugg:hover { border-color: var(--brand-mid); background: var(--surface); }
.advisor-chat-sugg-or { font-size: var(--text-sm); color: var(--ink-faint); font-style: italic; }
.advisor-chat-start-btn {
    background: var(--brand); color: #fff; border: none; cursor: pointer;
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
    font-size: var(--text-base); font-weight: 600;
}
.advisor-chat-start-btn:hover { background: var(--brand-deep); }
.advisor-chat-start-btn:disabled { opacity: 0.6; cursor: default; }
.advisor-chat-transcript {
    display: flex; flex-direction: column; gap: var(--space-3);
    margin-bottom: var(--space-4); max-height: 50vh; overflow-y: auto;
    padding: var(--space-2) 0;
}
.advisor-chat-turn {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm); line-height: var(--leading); max-width: 88%;
    white-space: pre-wrap;
}
.advisor-chat-turn-agent { background: var(--surface-subtle); border: 1px solid var(--border); color: var(--ink); align-self: flex-start; }
.advisor-chat-turn-user { background: var(--brand); color: #fff; align-self: flex-end; }
.advisor-chat-input-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.advisor-chat-input {
    flex: 1; resize: vertical; min-height: 2.6rem;
    padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-family: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--surface);
}
.advisor-chat-input:focus { outline: none; border-color: var(--brand-mid); }
.advisor-chat-send-btn {
    background: var(--brand); color: #fff; border: none; cursor: pointer;
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
    font-size: var(--text-sm); font-weight: 600; flex-shrink: 0;
}
.advisor-chat-send-btn:hover { background: var(--brand-deep); }
.advisor-chat-send-btn:disabled { opacity: 0.6; cursor: default; }

/* ============================================================
   Always-live convergence Phase 1 — the in-session "Your portrait" reading tab.
   The rich synthesized read (glance + sectioned prose + depth), available live.
   Reuses .model-section-header / .model-paragraph from renderModelParagraphs.
   ============================================================ */
.live-portrait-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 0.5rem 0 2.5rem;
}
.lp-empty {
    color: var(--ink-muted, #6b7280);
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    line-height: 1.6;
    padding: 1.6rem 0.2rem;
}
.lp-glance {
    margin: 0 0 1rem;
    padding: 0.9rem 1.1rem;
    background: #fafaf6;
    border: 1px solid #e3ddc9;
    border-radius: 8px;
}
.lp-glance-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint, #9ca3af);
    margin-bottom: 0.35rem;
}
.lp-glance-text {
    margin: 0;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--ink, #2b2f36);
}
.lp-depth {
    display: flex;
    gap: 0.4rem;
    margin: 0 0 1.2rem;
}
.lp-depth-pill {
    padding: 0.3rem 0.85rem;
    border: 1px solid #cdd3da;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-muted, #6b7280);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lp-depth-pill:hover { border-color: #b8c3d2; }
.lp-depth-pill-active {
    background: var(--brand-deep, #475e90);
    border-color: var(--brand-deep, #475e90);
    color: #fff;
}
.lp-body {
    font-family: var(--font-serif, Georgia, serif);
    line-height: 1.65;
    color: var(--ink, #2b2f36);
}
.lp-mode-glance .lp-body { display: none; }
.lp-note {
    margin-top: 1.4rem;
    color: var(--ink-faint, #9ca3af);
    font-size: 0.82rem;
    font-style: italic;
}

/* Per-paragraph correction row (text-anchored) — quiet until hovered/focused so the read stays calm. */
.lp-correction {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0.15rem 0 0.4rem;
    opacity: 0.35;
    transition: opacity 0.15s ease;
}
.model-para-wrapper:hover .lp-correction,
.lp-correction:focus-within,
.lp-correction[data-active-signal] { opacity: 1; }
.lp-corr-btn {
    padding: 0.12rem 0.5rem;
    border: 1px solid #d5dbe3;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-muted, #6b7280);
    font-size: 0.72rem;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.lp-corr-btn:hover { border-color: #b8c3d2; }
.lp-corr-btn-active {
    background: var(--brand-deep, #475e90);
    border-color: var(--brand-deep, #475e90);
    color: #fff;
}
.lp-corr-btn-soften.lp-corr-btn-active { background: #8e6b35; border-color: #8e6b35; }
.lp-corr-noted {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--ink-faint, #9ca3af);
    margin-left: 0.2rem;
}
.lp-corr-drawer {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 0.6rem;
}
.lp-corr-drawer-input {
    flex: 1;
    max-width: 420px;
    padding: 0.3rem 0.5rem;
    border: 1px solid #cdd3da;
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: var(--font-serif, Georgia, serif);
}
.lp-corr-drawer-send {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--brand-deep, #475e90);
    border-radius: 6px;
    background: var(--brand-deep, #475e90);
    color: #fff;
    font-size: 0.78rem;
    cursor: pointer;
}

/* Persistent save/return-link affordance. */
.lp-save { margin-top: 1.6rem; }
.lp-save-btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid #cdd3da;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-muted, #6b7280);
    font-size: 0.84rem;
    cursor: pointer;
}
.lp-save-btn:hover { border-color: #b8c3d2; }
.lp-save-panel {
    margin-top: 0.7rem;
    padding: 0.8rem 1rem;
    background: #fafaf6;
    border: 1px solid #e3ddc9;
    border-radius: 8px;
}
.lp-save-hint { margin: 0 0 0.4rem; font-size: 0.88rem; color: var(--ink, #2b2f36); }
.lp-save-warn { margin: 0 0 0.6rem; font-size: 0.78rem; color: #8e6b35; }
.lp-save-row { display: flex; gap: 0.4rem; }
.lp-save-url {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid #cdd3da;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--ink-muted, #6b7280);
    background: #fff;
}
.lp-save-copy {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--brand-deep, #475e90);
    border-radius: 6px;
    background: var(--brand-deep, #475e90);
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
}