/* Storyteller — unified design language (V1 UX Polish)
   Calm. Elegant. Invisible. */

:root {
    /* Ink */
    --st-ink: #111111;
    --st-ink-soft: #1a1a1a;
    --st-text: #444444;
    --st-text-secondary: #666666;
    --st-muted: #888888;
    --st-faint: #999999;
    --st-disabled: #cccccc;

    /* Surfaces */
    --st-bg: #ffffff;
    --st-bg-soft: #fafafa;
    --st-bg-hover: #f6f6f6;
    --st-bg-selected: #f3f3f3;
    --st-rule: #ebebeb;
    --st-rule-soft: #f2f2f2;
    --st-border: #e8e8e8;
    --st-border-strong: #dddddd;
    --st-focus-ring: rgba(17, 17, 17, 0.28);

    /* Accent (sparing) */
    --st-record: #e53935;
    --st-progress: #4a90e2;
    --st-overlay: rgba(17, 17, 17, 0.28);
    --st-overlay-soft: rgba(255, 255, 255, 0.72);

    /* Product wordmark — Story (near-black) + fellow (warm gold/brown) */
    --st-brand-ink: #111111;
    --st-brand-gold: #a67c52;

    /* Type */
    --st-font-sans:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
    --st-font-serif:
        "Iowan Old Style",
        "Palatino Linotype",
        Palatino,
        "Book Antiqua",
        Georgia,
        "Times New Roman",
        serif;

    --st-size-caption: 13px;
    --st-size-meta: 15px;
    --st-size-body: 16px;
    --st-size-body-lg: 17px;
    --st-size-lead: 20px;
    --st-size-title: 28px;
    --st-size-display: 34px;
    --st-size-hero: 52px;

    --st-tracking-tight: -0.03em;
    --st-tracking-display: -0.035em;
    --st-line-body: 1.65;
    --st-line-reader: 1.8;

    /* Layout */
    --st-space-1: 8px;
    --st-space-2: 12px;
    --st-space-3: 16px;
    --st-space-4: 24px;
    --st-space-5: 32px;
    --st-space-6: 48px;
    --st-space-7: 64px;
    --st-page-pad-x: 40px;
    --st-page-pad-y: 48px;
    --st-measure: 680px;
    --st-measure-narrow: 520px;
    /* Manuscript/page prose measure — shared desktop reading column */
    --st-measure-reader: 860px;
    /*
     * Desktop application canvas: outer content shell shared by Read Manuscript,
     * conversation workspace, and utility pages. Prose/forms stay on tighter
     * measures inside this canvas.
     */
    --st-desktop-canvas: min(var(--st-measure-reader), 100%);
    --st-desktop-workspace: min(1180px, 100%);
    --st-desktop-form: min(44rem, 100%);
    --st-desktop-prose: min(42rem, 100%);
    /* Utility pages share the manuscript desktop canvas, not a nested narrow column. */
    --st-desktop-utility: var(--st-desktop-canvas);
    --st-radius-sm: 10px;
    --st-radius-md: 14px;
    --st-radius-pill: 999px;
    --st-touch: 44px;

    /* Motion */
    --st-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --st-duration: 220ms;
    --st-duration-slow: 320ms;

    /* Legacy aliases used across screens */
    --color-question: var(--st-ink);
    --color-reflection: var(--st-text);
    --color-instruction: var(--st-text-secondary);
    --color-secondary: var(--st-faint);
    --color-record: var(--st-record);
    --color-progress: var(--st-progress);
}

/* ——— Buttons ——— */

.st-btn,
.btn-begin,
.btn-continue,
.btn-membership,
.dev-gate-continue,
.project-home-primary,
.session-recovery-primary,
.projects-create-button,
.projects-next-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--st-touch);
    padding: 12px 28px;
    border: none;
    border-radius: var(--st-radius-pill);
    background: var(--st-ink);
    color: #fff;
    font-family: inherit;
    font-size: var(--st-size-body);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--st-duration) var(--st-ease),
        color var(--st-duration) var(--st-ease),
        border-color var(--st-duration) var(--st-ease),
        opacity var(--st-duration) var(--st-ease),
        box-shadow var(--st-duration) var(--st-ease);
}

.st-btn:hover,
.btn-begin:hover,
.btn-continue:hover,
.btn-membership:hover,
.dev-gate-continue:hover,
.project-home-primary:hover,
.session-recovery-primary:hover,
.projects-create-button:hover,
.projects-next-button:hover {
    background: #2a2a2a;
}

.st-btn:active,
.btn-begin:active,
.btn-continue:active,
.btn-membership:active,
.project-home-primary:active,
.session-recovery-primary:active {
    background: #000;
}

.st-btn:disabled,
.btn-begin:disabled,
.btn-continue:disabled,
.project-home-primary:disabled,
.session-recovery-primary:disabled,
.projects-create-button:disabled,
.projects-next-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.st-btn--block,
.project-home-primary,
.session-recovery-primary {
    display: flex;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.st-btn--secondary,
.projects-cancel-button,
.projects-back-button,
.projects-later-button,
.project-export-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--st-touch);
    padding: 12px 20px;
    border: 1px solid var(--st-border-strong);
    border-radius: var(--st-radius-sm);
    background: var(--st-bg);
    color: var(--st-ink);
    font-family: inherit;
    font-size: var(--st-size-meta);
    font-weight: 400;
    cursor: pointer;
    transition:
        background-color var(--st-duration) var(--st-ease),
        border-color var(--st-duration) var(--st-ease);
}

.st-btn--secondary:hover,
.projects-cancel-button:hover,
.projects-back-button:hover,
.projects-later-button:hover,
.project-export-option:hover:not(:disabled) {
    background: var(--st-bg-soft);
    border-color: #ccc;
}

.st-btn--outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--st-touch);
    padding: 12px 24px;
    border: 1px solid var(--st-ink);
    border-radius: var(--st-radius-pill);
    background: transparent;
    color: var(--st-ink);
    font-family: inherit;
    font-size: var(--st-size-body);
    font-weight: 500;
    cursor: pointer;
    transition:
        background-color var(--st-duration) var(--st-ease),
        color var(--st-duration) var(--st-ease);
}

.st-btn--outline:hover {
    background: var(--st-bg-soft);
}

.st-btn--danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--st-touch);
    padding: 12px 24px;
    border: none;
    border-radius: var(--st-radius-pill);
    background: var(--st-record);
    color: #fff;
    font-family: inherit;
    font-size: var(--st-size-body);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--st-duration) var(--st-ease);
}

.st-btn--danger:hover {
    background: #c62828;
}

.st-btn--text,
.project-resume-secondary,
.project-home-secondary-btn,
.project-timeline-create,
.project-export-cancel,
.session-recovery-secondary,
.session-recovery-tertiary,
.link-secondary,
.chapter-reader-text-btn {
    border: none;
    background: transparent;
    padding: 10px 4px;
    min-height: var(--st-touch);
    font-family: inherit;
    font-size: var(--st-size-body);
    font-weight: 400;
    color: var(--st-ink);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--st-duration) var(--st-ease), opacity var(--st-duration) var(--st-ease);
}

.session-recovery-tertiary,
.project-export-cancel,
.link-secondary {
    color: var(--st-muted);
    font-size: var(--st-size-meta);
}

.st-btn--text:hover,
.project-resume-secondary:hover,
.project-home-secondary-btn:hover:not(:disabled),
.project-timeline-create:hover,
.session-recovery-secondary:hover,
.link-secondary:hover,
.chapter-reader-text-btn:hover {
    color: #000;
}

.project-home-secondary-btn:disabled {
    color: var(--st-disabled);
    cursor: default;
    text-decoration: none;
}

/* ——— Focus (keyboard) ——— */

:focus {
    outline: none;
}

:focus-visible {
    outline: 1px solid var(--st-focus-ring);
    outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--st-focus-ring);
}

.st-btn:focus-visible,
.btn-begin:focus-visible,
.btn-continue:focus-visible,
.btn-membership:focus-visible,
.btn-mic:focus-visible,
.project-home-primary:focus-visible,
.session-recovery-primary:focus-visible,
.menu-toggle:focus-visible,
.projects-menu-item:focus-visible,
.projects-type-card:focus-visible,
.projects-new-button:focus-visible,
.project-export-option:focus-visible,
.plan-card:focus-visible {
    outline: 1px solid var(--st-focus-ring);
    outline-offset: 2px;
}

/* ——— Cards ——— */

.st-card,
.plan-card,
.projects-type-card,
.project-export-panel {
    background: var(--st-bg);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-md);
    transition:
        border-color var(--st-duration) var(--st-ease),
        background-color var(--st-duration) var(--st-ease);
}

.plan-card {
    border-radius: 16px;
}

.plan-card:hover,
.projects-type-card:hover {
    background: var(--st-bg-soft);
    border-color: var(--st-border-strong);
}

.plan-card.is-selected,
.projects-type-card.is-selected {
    border-color: var(--st-ink);
    background: var(--st-bg-selected);
}

/* ——— Typography helpers ——— */

.st-eyebrow,
.project-resume-heading,
.chapter-reader-project {
    font-size: var(--st-size-caption);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--st-faint);
}

.st-empty,
.projects-menu-empty,
.project-resume-empty,
.chapter-reader-missing p,
.chapter-reader-loading-text {
    font-size: var(--st-size-lead);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.45;
    color: #333;
}

.projects-menu-empty {
    font-size: var(--st-size-meta);
    color: var(--st-muted);
    letter-spacing: 0;
}

.st-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--st-size-meta);
    color: var(--st-muted);
}

.st-loading-dot,
.project-home-writing-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--st-progress);
    animation: st-pulse 1.4s ease-in-out infinite;
}

@keyframes st-pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes st-fade-soft {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Screen enter — subtle, once per activation */
.screen.is-active {
    animation: st-fade-in var(--st-duration-slow) var(--st-ease) both;
}

/*
 * Quiet scroll — one shared treatment for customer-facing scroll surfaces.
 * Keeps overflow scrolling (wheel / trackpad / touch / keyboard); hides
 * scrollbar chrome only. Prefer .st-scroll-quiet or the selectors below
 * over per-screen scrollbar copies.
 */
.st-scroll-quiet,
#screen-subscription > .subscription-layout,
#screen-help > .help-layout,
#screen-about > .about-layout,
#screen-project-home.is-active.is-utility-settings > .project-home-layout,
.chapter-reader-scroll,
.projects-menu-panel,
#screen-app.is-active .voice-stage > .app-question-area,
#screen-app.is-active .voice-stage > .app-processing,
.continuous-response-panel,
.app-say,
.app-say-input,
.global-search-results,
.import-material-panel,
.editorial-rewrite-panel,
.chapter-replace-panel {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge */
}

.st-scroll-quiet::-webkit-scrollbar,
#screen-subscription > .subscription-layout::-webkit-scrollbar,
#screen-help > .help-layout::-webkit-scrollbar,
#screen-about > .about-layout::-webkit-scrollbar,
#screen-project-home.is-active.is-utility-settings > .project-home-layout::-webkit-scrollbar,
.chapter-reader-scroll::-webkit-scrollbar,
.projects-menu-panel::-webkit-scrollbar,
#screen-app.is-active .voice-stage > .app-question-area::-webkit-scrollbar,
#screen-app.is-active .voice-stage > .app-processing::-webkit-scrollbar,
.continuous-response-panel::-webkit-scrollbar,
.app-say::-webkit-scrollbar,
.app-say-input::-webkit-scrollbar,
.global-search-results::-webkit-scrollbar,
.import-material-panel::-webkit-scrollbar,
.editorial-rewrite-panel::-webkit-scrollbar,
.chapter-replace-panel::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/*
 * Viewport-locked screens own an inner scroller — pin the document so a
 * second page scrollbar cannot appear beside them.
 */
html:has(#screen-subscription.is-active),
html:has(#screen-project-home.is-active.is-utility-settings),
html:has(#screen-app.is-active),
html:has(#screen-pending-chapter-proposal.is-active),
body:has(#screen-subscription.is-active),
body:has(#screen-project-home.is-active.is-utility-settings),
body:has(#screen-app.is-active),
body:has(#screen-pending-chapter-proposal.is-active) {
    overflow: hidden;
    height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html:has(#screen-subscription.is-active)::-webkit-scrollbar,
html:has(#screen-project-home.is-active.is-utility-settings)::-webkit-scrollbar,
html:has(#screen-app.is-active)::-webkit-scrollbar,
html:has(#screen-pending-chapter-proposal.is-active)::-webkit-scrollbar,
body:has(#screen-subscription.is-active)::-webkit-scrollbar,
body:has(#screen-project-home.is-active.is-utility-settings)::-webkit-scrollbar,
body:has(#screen-app.is-active)::-webkit-scrollbar,
body:has(#screen-pending-chapter-proposal.is-active)::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/*
 * Document-scrolling surfaces: hide chrome only — do not lock overflow,
 * or long content becomes unreachable.
 */
html:has(#screen-chapter-reader.is-active),
html:has(#screen-editorial-reading.is-active),
html:has(#screen-prologue.is-active),
html:has(#screen-welcome.is-active),
html:has(#screen-session-recovery.is-active),
html:has(#screen-help.is-active),
html:has(#screen-about.is-active),
html:has(#screen-collaboration.is-active),
html:has(#screen-export.is-active),
html:has(#screen-invitation.is-active),
html:has(#screen-project-home.is-active:not(.is-utility-settings)),
body:has(#screen-chapter-reader.is-active),
body:has(#screen-editorial-reading.is-active),
body:has(#screen-prologue.is-active),
body:has(#screen-welcome.is-active),
body:has(#screen-session-recovery.is-active),
body:has(#screen-help.is-active),
body:has(#screen-about.is-active),
body:has(#screen-collaboration.is-active),
body:has(#screen-export.is-active),
body:has(#screen-invitation.is-active),
body:has(#screen-project-home.is-active:not(.is-utility-settings)) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html:has(#screen-chapter-reader.is-active)::-webkit-scrollbar,
html:has(#screen-editorial-reading.is-active)::-webkit-scrollbar,
html:has(#screen-prologue.is-active)::-webkit-scrollbar,
html:has(#screen-welcome.is-active)::-webkit-scrollbar,
html:has(#screen-session-recovery.is-active)::-webkit-scrollbar,
html:has(#screen-help.is-active)::-webkit-scrollbar,
html:has(#screen-about.is-active)::-webkit-scrollbar,
html:has(#screen-collaboration.is-active)::-webkit-scrollbar,
html:has(#screen-export.is-active)::-webkit-scrollbar,
html:has(#screen-invitation.is-active)::-webkit-scrollbar,
html:has(#screen-project-home.is-active:not(.is-utility-settings))::-webkit-scrollbar,
body:has(#screen-chapter-reader.is-active)::-webkit-scrollbar,
body:has(#screen-editorial-reading.is-active)::-webkit-scrollbar,
body:has(#screen-prologue.is-active)::-webkit-scrollbar,
body:has(#screen-welcome.is-active)::-webkit-scrollbar,
body:has(#screen-session-recovery.is-active)::-webkit-scrollbar,
body:has(#screen-help.is-active)::-webkit-scrollbar,
body:has(#screen-about.is-active)::-webkit-scrollbar,
body:has(#screen-collaboration.is-active)::-webkit-scrollbar,
body:has(#screen-export.is-active)::-webkit-scrollbar,
body:has(#screen-invitation.is-active)::-webkit-scrollbar,
body:has(#screen-project-home.is-active:not(.is-utility-settings))::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .screen.is-active {
        animation: none;
    }
}

@media (max-width: 768px) {
    :root {
        --st-page-pad-x: 24px;
        --st-page-pad-y: 32px;
        --st-size-hero: 36px;
        --st-size-display: 28px;
        --st-size-title: 24px;
    }
}

/* Desktop canvas steps — keep Read Manuscript / conversation / utilities aligned */
@media (min-width: 1024px) {
    :root {
        --st-desktop-workspace: min(1100px, 100%);
    }
}

@media (min-width: 1200px) {
    :root {
        --st-measure-reader: 880px;
        --st-desktop-canvas: min(var(--st-measure-reader), 100%);
        --st-desktop-workspace: min(1180px, 100%);
    }
}

@media (min-width: 1440px) {
    :root {
        --st-measure-reader: 900px;
        --st-desktop-canvas: min(var(--st-measure-reader), 100%);
        --st-desktop-workspace: min(1240px, 100%);
    }
}

/*
 * Shared desktop page shell — one centered canvas for manuscript-aligned
 * screens (utilities, reading, help, subscription). Forms stay narrower
 * inside via .st-desktop-form-block. Apply the canvas to the page shell
 * itself; do not left-pin a narrower inner column.
 */
@media (min-width: 1024px) {
    .st-desktop-page,
    #screen-help > .help-layout,
    #screen-about > .about-layout,
    #screen-subscription > .subscription-layout,
    #screen-export > .export-layout,
    #screen-project-home.is-active.is-utility-settings > .project-home-layout,
    .project-home-layout.is-settings {
        width: 100%;
        max-width: var(--st-desktop-canvas);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    /*
     * Editor's Note / editorial home — same approved desktop content canvas
     * as Version History (broad working-page width, shared left edge).
     */
    .project-home-layout.is-editorial-home,
    .project-home-layout.is-versions-home {
        width: 100%;
        max-width: min(900px, 100%);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .st-desktop-form-block,
    #screen-export .export-header,
    #screen-export .export-status,
    #screen-export .export-form,
    #screen-export .export-footer,
    .project-home-layout.is-settings .project-settings-form,
    .project-home-layout.is-settings .project-backup-panel {
        width: 100%;
        max-width: var(--st-desktop-form);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .st-desktop-prose-block {
        width: 100%;
        max-width: var(--st-desktop-prose);
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
}