:root {
    --ui-body-size: 1rem;
    --ui-small-size: 1rem;
    --ui-label-size: 1rem;
    --ui-meta-size: 0.9375rem;
    --ui-control-height: 44px;
    --ui-gold-text: #866020;
}

body {
    font-size: var(--ui-body-size);
    line-height: 1.5;
}

.eyebrow-text {
    font-size: var(--ui-meta-size);
    line-height: 1.45;
}

/* Pale gold remains a dark-panel accent; informational text on paper needs contrast. */
.legal-shell .eyebrow-text,
.admin-local-login-card > .eyebrow-text,
.billing-return .eyebrow-text,
.funnel-body .sign-in-card .eyebrow-text,
.generation-copy > .eyebrow-text,
.reader-rail > .eyebrow-text,
.reader-stage .locked-remainder > small,
.reader-stage .completion-quote > div small {
    color: var(--ui-gold-text);
}

.funnel-body .sign-in-card > small {
    color: var(--muted);
}

.library-heading h1,
.admin-header h1,
.admin-bootstrap-card h1 {
    margin-top: 0;
}

input:not([type="hidden"]),
select,
textarea {
    font-size: 1rem;
    line-height: 1.4;
}

.desktop-nav,
.header-actions {
    font-size: var(--ui-small-size);
}

.header-cta,
.button-primary,
.button-secondary,
.button-ivory,
.button-quiet {
    min-height: var(--ui-control-height);
    font-size: var(--ui-small-size);
}

.header-cta {
    padding-block: 11px;
}

.authenticated-new-ebook-form {
    margin: 0;
}

.text-action {
    min-height: 36px;
    padding-block: 8px;
    font-size: var(--ui-small-size);
    line-height: 1.3;
}

/* Keep the final continuation action inside its panel on narrow screens. */
.reader-stage .locked-remainder > form { min-width: 0; max-width: 100%; }
.reader-stage .locked-remainder .button-primary { box-sizing: border-box; max-width: 100%; white-space: normal; }
.reader-stage .locked-remainder .button-primary > span { min-width: 0; }

/* One SVG arrow system for every directional action. The viewBox and shared
   stroke keep the shaft/head aligned; em sizing follows the adjacent text. */
.ui-arrow {
    display: block;
    width: 1.75em;
    height: 1.25em;
    flex: 0 0 auto;
    color: currentColor;
    rotate: 0deg;
}

.ui-arrow-left {
    rotate: 180deg;
}

.ui-arrow-up {
    rotate: -90deg;
}

.ui-arrow-down {
    rotate: 90deg;
}

.ui-arrow-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65em;
}

.cover-shell .direction-option {
    position: relative;
    cursor: pointer;
}

.cover-shell .direction-option-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cover-shell .direction-option.selected {
    border-color: var(--gold);
    background: #fff8e7;
    box-shadow: inset 0 0 0 2px var(--gold), 0 16px 38px rgba(47, 18, 35, .11);
    transform: none;
}

.cover-shell .direction-option-title,
.cover-shell .direction-option-description {
    display: block;
}

.cover-shell .direction-option-title {
    color: var(--plum);
    font: 600 1.375rem/1.2 var(--serif);
}

.cover-shell .direction-option-description {
    min-height: 4.8rem;
    margin: 10px 0 19px;
    color: var(--muted);
    font: 1rem/1.5 var(--serif);
}

.cover-shell .direction-option .direction-option-hit {
    position: absolute;
    z-index: 5;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: inherit;
    cursor: pointer;
    opacity: 0;
}

.cover-shell .direction-option:focus-within {
    outline: 3px solid rgba(130, 52, 91, .42);
    outline-offset: 3px;
}

.cover-shell .direction-option-action {
    width: 100%;
    padding: 13px 0 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--soft);
    border-top: 1px solid var(--line);
    font-size: 1rem;
    font-weight: 800;
}

.cover-shell .direction-option .ui-arrow {
    transition: transform .2s ease;
}

.cover-shell .direction-option:hover .ui-arrow,
.cover-shell .direction-option:focus-within .ui-arrow {
    transform: translateX(0.18em);
}

.submit-idea {
    min-height: var(--ui-control-height);
    font-size: var(--ui-small-size);
}

/* Keep the complete prompt and scrollbar clear: the CTA is in its own row. */
.public-home .idea-field textarea {
    display: block;
    resize: vertical;
    padding: 17px 18px;
    min-height: 180px;
    scrollbar-gutter: stable;
}

.public-home .submit-idea {
    position: static;
    flex-shrink: 0;
    border-radius: 5px;
}

.public-home .submit-idea span {
    display: inline;
}

.public-home .submit-idea:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.public-home .submit-idea:focus-visible {
    outline: 3px solid rgba(117, 55, 91, .28);
    outline-offset: 3px;
}

.idea-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    text-align: left;
}

.idea-character-count {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

.idea-character-count.is-at-limit {
    color: var(--plum);
}

.idea-character-count.is-over-limit,
.idea-length-feedback {
    color: #9b234c;
}

.idea-length-feedback {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
}

.idea-length-feedback:empty {
    margin: 0;
}

@media (max-width: 480px) {
    .idea-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .public-home .submit-idea {
        width: 100%;
        justify-content: center;
    }
}

.idea-examples button {
    min-height: 38px;
    font-size: var(--ui-label-size);
}

.hero-proof {
    font-size: var(--ui-label-size);
}

.account-menu-label strong {
    font-size: var(--ui-small-size);
}

.account-menu-label small {
    font-size: var(--ui-meta-size);
}

.account-menu-panel nav a {
    font-size: var(--ui-small-size);
}

.account-menu-panel nav a small {
    font-size: var(--ui-meta-size);
    line-height: 1.3;
}

.account-menu-section > span {
    font-size: var(--ui-meta-size);
}

.account-menu-section nav a {
    min-height: 42px;
}

.account-menu-signout button {
    font-size: var(--ui-small-size);
}

.account-menu-summary span {
    font-size: var(--ui-meta-size);
}

.library-stats small {
    font-size: var(--ui-label-size);
    letter-spacing: 1px;
}

.library-stats span {
    font-size: var(--ui-small-size);
}

.library-cover > small,
.library-cover i {
    font-size: var(--ui-label-size);
}

.library-cover i {
    letter-spacing: .45px;
}

.library-copy > small {
    font-size: var(--ui-meta-size);
}

.library-copy > p {
    height: 48px;
    font-size: var(--ui-small-size);
    line-height: 1.5;
}

.library-copy > div span {
    font-size: var(--ui-label-size);
}

.idea-card > label,
.select-field span,
.choice-fieldset legend,
.custom-title label,
.editor-panel label,
.field-label,
.planning-tools label,
.cover-style-label {
    font-size: var(--ui-label-size);
}

.direction-intro p,
.planning-tools p,
.editor-panel p,
.planning-heading > p {
    font-size: var(--ui-small-size);
}

.signin-note,
.sign-in-card > small,
.development-access small {
    font-size: var(--ui-label-size);
}

.choice-grid label span,
.format-grid label span {
    min-height: 54px;
    font-size: var(--ui-small-size);
}

.add-chapter input {
    min-height: var(--ui-control-height);
}

.add-chapter button {
    min-height: var(--ui-control-height);
    padding-inline: 16px;
    font-size: var(--ui-small-size);
}

.chapter-edit textarea {
    font-size: var(--ui-small-size);
}

.chapter-edit {
    display: grid;
    gap: 7px;
}

.chapter-edit-field {
    display: grid;
    gap: 4px;
}

.chapter-edit-field span,
.add-chapter-fields label {
    color: var(--plum);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.chapter-edit input,
.chapter-edit textarea,
.add-chapter-fields input,
.add-chapter-fields textarea {
    width: 100%;
    padding: 8px 10px;
    color: var(--ink);
    background: #fcfaf6;
    border: 1px solid var(--line);
    border-radius: 4px;
    outline: none;
}

.chapter-edit input {
    min-height: 36px;
    font: 600 17px/1.2 var(--serif);
}

.chapter-edit textarea {
    min-height: 48px;
    height: 48px;
    resize: vertical;
    font: var(--ui-small-size)/1.45 var(--sans);
}

.chapter-edit input:focus,
.chapter-edit textarea:focus,
.add-chapter-fields input:focus,
.add-chapter-fields textarea:focus {
    border-color: var(--soft);
    box-shadow: 0 0 0 3px rgba(117, 55, 91, .08);
}

.chapter-edit .text-action {
    justify-self: start;
    opacity: 1;
    padding: 2px 0;
}

.add-chapter {
    align-items: stretch;
}

.add-chapter-fields {
    flex: 1;
    display: grid;
    gap: 8px;
}

.add-chapter-fields label {
    display: grid;
    gap: 5px;
}

.add-chapter-fields input {
    height: auto;
    min-height: var(--ui-control-height);
    margin: 0;
    font: var(--ui-small-size)/1.3 var(--sans);
}

.add-chapter-fields textarea {
    min-height: 52px;
    margin: 0;
    resize: vertical;
    font: var(--ui-small-size)/1.45 var(--sans);
}

.add-chapter > button {
    align-self: end;
}

.chapter-controls button {
    min-width: 42px;
    min-height: 42px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chapter-controls .ui-arrow {
    width: 1.4em;
    height: 1em;
}

.chapter-controls .exclude-button {
    min-width: 92px;
    padding-inline: 12px;
    font-size: var(--ui-small-size);
}

.chapter-row.excluded {
    opacity: 1;
    background: #f5f0ed;
}

.chapter-row.excluded .chapter-edit,
.chapter-row.excluded .chapter-position {
    opacity: .48;
}

.chapter-row.excluded .chapter-controls {
    opacity: 1;
}

.chapter-exclusion-control {
    display: grid;
    gap: 5px;
}

.chapter-exclusion-label {
    color: #9e8d88;
    font: 700 0.75rem/1.1 var(--sans);
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

.chapter-row.excluded .chapter-controls .exclude-button {
    color: var(--plum);
    background: #fffaf5;
    border-color: #c9aeba;
    font-weight: 750;
}

.outline-feedback {
    margin: 0 23px;
    padding: 12px 0 0;
    color: #8b3948;
    font-size: var(--ui-small-size);
    font-weight: 700;
}

.preview-badge,
.library-eyebrow,
.funnel-progress,
.option-set-label {
    font-size: var(--ui-meta-size);
}

.library-stats small {
    font-size: var(--ui-meta-size);
}

.library-stats span {
    font-size: var(--ui-small-size);
}

.library-copy > small {
    font-size: var(--ui-meta-size);
}

.library-copy > div span {
    font-size: var(--ui-meta-size);
}

.library-copy a {
    font-size: var(--ui-small-size);
}

.outline-summary span,
.save-state strong {
    font-size: var(--ui-label-size);
}

.save-state small,
.planning-tools small {
    font-size: var(--ui-meta-size);
}

.generation-checklist li,
.generation-status p {
    font-size: var(--ui-small-size);
}

.generation-status small,
.generation-checklist small {
    font-size: var(--ui-meta-size);
}

.reader-controls button {
    min-height: var(--ui-control-height);
    min-width: var(--ui-control-height);
    font-size: var(--ui-small-size);
}

.reader-page-status b {
    font-size: var(--ui-small-size);
}

.reader-page-status small,
.reader-motion-toggle {
    font-size: var(--ui-meta-size);
}

/* One centered location/progress line, with the same height on every page.
   Keyboard help remains accessible off-screen instead of adding another row. */
.reader-controls .reader-page-status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--ui-control-height);
}

.reader-status-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    min-width: 0;
    white-space: nowrap;
}

.reader-status-primary [data-reader-page-label] {
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    line-height: 1.3;
}

.reader-status-primary [data-reader-page-count] {
    flex: 0 0 auto;
    white-space: nowrap;
    font: 600 var(--ui-small-size)/1.3 var(--sans);
    font-variant-numeric: tabular-nums;
    color: var(--plum);
    unicode-bidi: isolate;
}

.reader-status-separator {
    flex: 0 0 auto;
    color: var(--plum);
    font: 600 var(--ui-small-size)/1.3 var(--sans);
}

.reader-keyboard-help {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.reader-controls button { display: inline-flex; align-items: center; justify-content: center; }

.reader-motion-toggle input {
    accent-color: var(--plum);
}

.reader-motion-toggle input:focus-visible {
    outline: 3px solid rgba(181, 138, 69, 0.5);
    outline-offset: 3px;
}

.admin-header .eyebrow-text {
    font-size: var(--ui-meta-size);
}

.admin-nav a {
    font-size: var(--ui-small-size);
}

.admin-stat small,
.admin-table th,
.admin-toolbar label,
.admin-form label,
.admin-credit-form label {
    font-size: var(--ui-label-size);
}

.admin-stat span,
.admin-table,
.admin-toolbar input,
.admin-toolbar select,
.admin-form input,
.admin-form select,
.admin-form textarea,
.admin-credit-form input,
.admin-credit-form select,
.admin-credit-form textarea {
    font-size: var(--ui-small-size);
}

.admin-table td small,
.admin-form .help-text,
.admin-meta,
.admin-credit-help,
.admin-field-error {
    font-size: var(--ui-meta-size);
}

.admin-table td strong {
    font-size: var(--ui-small-size);
}

.admin-table code,
.admin-mono,
.admin-card > header > a,
.admin-pagination {
    font-size: var(--ui-meta-size);
}

.admin-badge {
    font-size: var(--ui-meta-size) !important;
}

.admin-toolbar button,
.admin-form button {
    min-height: var(--ui-control-height);
    font-size: var(--ui-small-size);
}

@media (max-width: 680px) {
    .header-cta,
    .button-primary,
    .button-secondary,
    .button-ivory,
    .button-quiet,
    .admin-toolbar button,
    .admin-form button {
        min-height: 46px;
    }

    .choice-grid label span,
    .format-grid label span {
        min-height: 58px;
    }

    .chapter-controls button {
        min-width: 44px;
        min-height: 44px;
    }

    .chapter-controls .exclude-button {
        min-width: 100px;
    }
}

.qualification-feedback {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 12px 14px;
    color: var(--plum);
    background: #fbf4e8;
    border: 1px solid #e4c98f;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1.45;
}

.qualification-feedback strong {
    font-weight: 750;
}

.qualification-feedback-error {
    color: #8e234b;
    background: #fff4f0;
    border-color: #e4b5a7;
}

.loading-status {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    color: var(--plum);
    font-size: 15px;
    font-weight: 650;
}

/* The HTML hidden attribute must win over the shared loading layout. */
.loading-status[hidden] {
    display: none !important;
}

.loading-status::before {
    width: 15px;
    height: 15px;
    content: "";
    border: 2px solid rgba(75, 24, 53, .22);
    border-top-color: var(--plum);
    border-radius: 50%;
    animation: ebookempress-spin .8s linear infinite;
}

form[aria-busy="true"] button[type="submit"] {
    cursor: wait;
}

@keyframes ebookempress-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-status::before,
    .global-loading-spinner {
        animation: none;
    }
}

/* Cover directions are quiet style swatches, not miniature cover compositions.
   Keep the visual cue contained so it can never collide with the copy below it. */
.cover-shell .direction-option {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cover-shell .direction-swatch {
    position: relative;
    isolation: isolate;
    flex: 0 0 126px;
    height: 126px;
    min-height: 126px;
    margin: 0 0 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(45, 12, 32, .08);
}

.cover-shell .direction-swatch::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 11px;
    border: 1px solid rgba(255, 248, 233, .35);
    pointer-events: none;
}

.cover-shell .direction-swatch img,
.cover-shell .direction-swatch i,
.cover-shell .direction-swatch b {
    display: none !important;
}

.cover-shell .direction-editorialclassic .direction-swatch {
    background: linear-gradient(135deg, #4b1835 0%, #7b365a 100%);
}

.cover-shell .direction-boldmodern .direction-swatch {
    background: linear-gradient(135deg, #103c4b 0 57%, #e76f51 57% 100%);
}

.cover-shell .direction-botanical .direction-swatch {
    background: linear-gradient(135deg, #234936 0%, #7d8c6b 100%);
}

.cover-shell .direction-darkpremium .direction-swatch {
    background: radial-gradient(circle at 72% 18%, #65314f 0%, #160d18 72%);
}

.cover-shell .direction-cleanprofessional .direction-swatch {
    background: linear-gradient(135deg, #eef1eb 0%, #cbd6ce 100%);
    border-color: #d4ddd6;
}

.cover-shell .direction-cleanprofessional .direction-swatch::before {
    border-color: rgba(52, 88, 73, .28);
}

.cover-shell .direction-friendly .direction-swatch {
    background: linear-gradient(135deg, #f0c8c0 0%, #d98983 100%);
}

.cover-shell .direction-option-description {
    min-height: 0;
    flex: 1 1 auto;
}

.cover-shell .direction-option-action {
    flex: 0 0 auto;
    margin-top: auto;
}

.cover-shell .cover-direction-picker-compact .direction-swatch {
    flex-basis: 90px;
    height: 90px;
    min-height: 90px;
    margin-bottom: 16px;
}

@media (max-width: 700px) {
    .cover-shell .direction-swatch,
    .cover-shell .cover-direction-picker-compact .direction-swatch {
        flex-basis: 112px;
        height: 112px;
        min-height: 112px;
    }
}

/* Keep the funnel's navigation in one predictable place while the content
   above it remains freely scrollable. The extra shell space prevents the
   fixed bar from covering the last editable row on long steps. */
.funnel-body {
    overflow-x: hidden;
}

.funnel-body .funnel-shell {
    padding-bottom: calc(90px + 76px);
}

.funnel-body .direction-shell {
    width: min(1080px, calc(100% - 40px));
}

.funnel-body .funnel-step-actions {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 72px;
    box-sizing: border-box;
    margin: 0;
    padding: 12px max(20px, calc((100% - 1080px) / 2)) calc(12px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "back status next";
    align-items: center;
    gap: 24px;
    background: rgba(255, 253, 248, .97);
    border-top: 1px solid #d9cfc4;
    box-shadow: 0 -10px 28px rgba(53, 22, 40, .12);
    backdrop-filter: blur(10px);
}

.funnel-body .funnel-step-actions > a,
.funnel-body .funnel-step-actions > form,
.funnel-body .funnel-step-actions > button {
    margin: 0;
}

.funnel-body .funnel-step-actions > form {
    display: flex;
}

.funnel-body .funnel-back-action {
    grid-area: back;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    justify-self: start;
}

.funnel-body .funnel-next-action {
    grid-area: next;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    justify-self: end;
}

.funnel-body form.funnel-next-action > button {
    width: max-content;
    max-width: 100%;
}

.funnel-body .funnel-next-action:disabled,
.funnel-body .funnel-next-action button:disabled,
.funnel-body .funnel-next-action.disabled {
    cursor: not-allowed;
    opacity: .45;
    transform: none;
}

.funnel-body .funnel-step-actions > a.button-secondary,
.funnel-body .funnel-step-actions > a.button-primary,
.funnel-body .funnel-step-actions > form > button,
.funnel-body .funnel-step-actions > button {
    min-height: 54px;
    padding-block: 0;
    padding-inline: 24px;
}

.funnel-body .funnel-action-status {
    position: static;
    grid-area: status;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    justify-self: center;
    text-align: center;
    text-overflow: ellipsis;
    transform: none;
    white-space: nowrap;
    pointer-events: none;
}

.funnel-body .direction-actions.funnel-step-actions,
.funnel-body .title-planning-shell .title-flow-actions.funnel-step-actions,
.funnel-body .outline-actions.funnel-step-actions,
.funnel-body .cover-shell .cover-footer-actions.funnel-step-actions {
    padding-top: 12px;
    border-top-color: #d9cfc4;
}

.cover-shell .cover-generation-tools {
    margin: 24px 0 0;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.cover-shell .cover-generation-tools form,
.cover-shell .cover-generation-tools button {
    margin: 0;
}

@media (min-width: 761px) {
    .outline-shell .chapter-row {
        padding-right: 220px;
    }

    .outline-shell .chapter-edit {
        min-width: 0;
    }
}

.outline-shell .chapter-copy {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
}

.outline-shell .outline-read-only .chapter-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
    padding: 20px 8px;
}

.outline-shell .outline-read-only .chapter-position {
    position: static;
    grid-column: 1;
    grid-row: 1;
}

.outline-shell .outline-read-only .chapter-copy {
    grid-column: 2;
    grid-row: 1;
}

.outline-shell .outline-read-only .preview-badge {
    position: static;
    grid-column: 3;
    grid-row: 1;
}

@media (max-width: 760px) {
    .funnel-body .funnel-shell {
        width: min(100% - 22px, 1080px);
        padding-bottom: calc(90px + 86px);
    }

    .funnel-body .funnel-step-actions {
        min-height: 72px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "back next";
        gap: 8px;
    }

    .funnel-body .funnel-step-actions > a.button-secondary,
    .funnel-body .funnel-step-actions > a.button-primary,
    .funnel-body .funnel-step-actions > form > button,
    .funnel-body .funnel-step-actions > button {
        width: 100%;
        min-height: 54px;
        height: 100%;
        padding-block: 8px;
        padding-inline: 10px;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.4;
    }

    .funnel-body .funnel-back-action,
    .funnel-body .funnel-next-action {
        align-self: stretch;
    }

    .funnel-body form.funnel-next-action > button {
        height: 100%;
    }

    .funnel-body .funnel-step-actions .ui-arrow {
        display: none;
    }

    .funnel-body .funnel-step-actions .ui-arrow-link > span {
        min-width: 0;
    }

    .outline-shell .outline-read-only .chapter-row {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .outline-shell .outline-read-only .chapter-position {
        grid-row: 1 / span 2;
    }

    .outline-shell .outline-read-only .chapter-copy {
        grid-row: auto;
    }

    .outline-shell .outline-read-only .preview-badge {
        grid-column: 2;
        justify-self: start;
    }

    .outline-shell .outline-read-only .chapter-row:has(> .preview-badge) .chapter-copy {
        grid-row: 2;
    }

    .funnel-body .funnel-action-status {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        width: max-content;
        max-width: calc(100vw - 28px);
        padding: 7px 12px;
        overflow: hidden;
        background: rgba(255, 253, 248, .98);
        border: 1px solid #d9cfc4;
        border-radius: 999px;
        box-shadow: 0 6px 18px rgba(53, 22, 40, .12);
        text-align: center;
        text-overflow: ellipsis;
        transform: translateX(-50%);
    }

    .cover-shell .cover-generation-tools {
        padding: 14px;
    }
}

.site-footer .footer-inner p {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.site-footer .footer-inner nav {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

@media (max-width: 680px) {
    .site-footer .footer-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer .footer-inner nav {
        justify-content: center;
    }
}

/* A generated asset may disappear during cleanup or a retry. Keep the page
   useful and branded when its metadata outlives the stored file. */
.asset-fallback {
    display: grid;
    place-items: center;
    gap: 0.6rem;
    min-height: 180px;
    padding: 1.5rem;
    color: var(--plum);
    background: linear-gradient(145deg, #f8eee5, #fffaf4);
    border: 1px dashed #cdb8a8;
    border-radius: 0.5rem;
    text-align: center;
}

.asset-fallback[hidden] {
    display: none !important;
}

.asset-fallback-mark {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
    filter: drop-shadow(0 0.5rem 0.7rem rgba(45, 12, 32, 0.18));
}

.asset-fallback strong {
    font: 600 1.05rem/1.2 var(--serif);
}

.asset-fallback span {
    max-width: 26rem;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.generated-cover > .asset-fallback,
.library-cover > .asset-fallback {
    position: absolute;
    inset: 0;
    z-index: 2;
    min-height: 0;
    border: 0;
    border-radius: inherit;
    color: #fff8e9;
    background: radial-gradient(circle at 50% 25%, #7b405f, transparent 42%), linear-gradient(145deg, #53132f, #281020 90%);
}

.generated-cover > .asset-fallback .asset-fallback-mark,
.library-cover > .asset-fallback .asset-fallback-mark {
    width: 5rem;
    height: 5rem;
}

.generated-cover > .asset-fallback span,
.library-cover > .asset-fallback span {
    color: #f2dfd2;
}

.generated-cover.asset-load-failed > .cover-type {
    display: none;
}

.asset-access-gate {
    width: min(650px, 100%);
}

/* Operator screens are information-dense, but their labels and metadata
   should still be comfortable to read without zooming. */
.admin-alert p,
.admin-alert > a,
.admin-report-layout h3 small,
.admin-report-list dt,
.admin-report-list dd small,
.admin-header .eyebrow-text,
.admin-header > p,
.admin-stat small,
.admin-detail-item small,
.admin-card > header > a,
.admin-toolbar label,
.admin-bootstrap-card > .eyebrow-text,
.admin-bootstrap-form label {
    font-size: 0.9375rem;
    line-height: 1.45;
}

.admin-nav a,
.admin-meta,
.admin-toolbar input,
.admin-toolbar select,
.admin-table,
.admin-pagination,
.admin-list li,
.admin-credit-help,
.admin-report-list dt,
.reader-motion-toggle {
    font-size: 1rem;
    line-height: 1.5;
}

.admin-table th {
    font-size: 0.9375rem;
    line-height: 1.3;
}

.admin-table td > small,
.admin-table code,
.admin-mono,
.admin-field-error {
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Account profile */
.profile-body {
    background: #f5efe6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.profile-body > main[role="main"] {
    flex: 1 0 auto;
}

.profile-shell {
    width: min(960px, calc(100% - 48px));
    margin-inline: auto;
    padding: clamp(58px, 7vw, 94px) 0 132px;
}

.profile-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 42px;
}

.profile-header h1 {
    margin: 0 0 14px;
    color: var(--plum);
    font: 500 clamp(44px, 5vw, 64px)/.98 var(--serif);
    letter-spacing: -1.4px;
}

.profile-header p,
.profile-card-heading p {
    margin: 0;
    color: var(--muted);
    font: 17px/1.55 var(--serif);
}

.profile-header .button-secondary {
    white-space: nowrap;
}

.profile-card {
    padding: 38px 40px 34px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(53, 22, 40, .13);
}

.profile-card-heading {
    padding-bottom: 26px;
    border-bottom: 1px solid var(--line);
}

.profile-card-heading h2 {
    margin: 0 0 8px;
    color: var(--plum);
    font: 600 30px/1.1 var(--serif);
}

.profile-form {
    padding-top: 30px;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 22px;
}

.profile-field {
    min-width: 0;
}

.profile-field label {
    display: block;
    margin: 0 0 9px;
    color: var(--plum);
    font-size: var(--ui-small-size);
    font-weight: 750;
}

.profile-form input {
    width: 100%;
    min-height: 52px;
    padding: 12px 15px;
    color: var(--ink);
    background: #fffdfa;
    border: 1px solid #cdbeb1;
    border-radius: 7px;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(53, 22, 40, .04);
    font-size: var(--ui-small-size);
}

.profile-form input:hover:not([readonly]) {
    border-color: #b69a87;
}

.profile-form input:focus-visible {
    border-color: var(--soft);
    box-shadow: 0 0 0 4px rgba(117, 55, 91, .12);
}

.profile-email-field {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.profile-email-field input {
    color: #665961;
    background: #f2ece4;
    border-color: #ded1c5;
    cursor: not-allowed;
}

.profile-help {
    margin: 9px 0 0;
    color: var(--muted);
    font-size: var(--ui-meta-size);
    line-height: 1.45;
    font-weight: 500;
}

.profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.profile-notice {
    margin-top: 22px;
    padding: 13px 16px;
    border-radius: 6px;
    font-size: var(--ui-small-size);
}

.profile-notice:empty {
    display: none;
}

.profile-success {
    color: #315c45;
    background: #edf5ee;
    border: 1px solid #cbdccc;
}

.profile-error {
    color: #713541;
    background: #fff3ef;
    border: 1px solid #e5c8bf;
}

.profile-field-error {
    display: block;
    margin-top: 7px;
    color: #9b3d4d;
    font-size: var(--ui-small-size);
    font-weight: 600;
}

@media (max-width: 680px) {
    .profile-shell {
        width: calc(100% - 32px);
        padding: 44px 0 96px;
    }

    .profile-header {
        align-items: stretch;
        flex-direction: column;
        gap: 22px;
        display: flex;
    }

    .profile-header .button-secondary {
        width: 100%;
    }

    .profile-card {
        padding: 28px 22px 24px;
    }

    .profile-card-heading h2 {
        font-size: 26px;
    }

    .profile-form-grid {
        grid-template-columns: 1fr;
    }

    .profile-email-field {
        grid-column: auto;
    }

    .profile-actions {
        flex-direction: column-reverse;
    }

    .profile-actions .button-primary,
    .profile-actions .button-secondary {
        width: 100%;
    }
}

/* Direction page: keep supporting copy as readable as the main controls. */
.funnel-body .funnel-progress {
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    line-height: 1.3;
}

.funnel-body .direction-header .eyebrow-text,
.funnel-body .sign-in-card .eyebrow-text {
    font-size: 0.875rem;
    line-height: 1.25;
}

.assistant-seal.logo-seal,
.assistant-seal.large.logo-seal,
.admin-bootstrap-seal.logo-seal {
    display: grid;
    place-items: center;
    flex: none;
    color: transparent;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    font-size: 0;
}

.assistant-seal.logo-seal {
    width: 60px;
    height: 52px;
}

.assistant-seal.large.logo-seal {
    width: 96px;
    height: 76px;
    margin-inline: auto;
}

.assistant-seal.logo-seal img,
.admin-bootstrap-seal.logo-seal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.funnel-body .idea-recap {
    padding-right: 18px;
}

.funnel-body .idea-recap > span,
.funnel-body .select-field > span:first-child,
.funnel-body .choice-fieldset legend {
    font-size: 0.9375rem;
    line-height: 1.3;
}

.funnel-body .idea-recap p,
.funnel-body .direction-intro p,
.funnel-body .sign-in-card p {
    font-size: 1rem;
    line-height: 1.55;
}

.funnel-body .text-action,
.funnel-body .choice-grid label span,
.funnel-body .direction-actions strong,
.funnel-body .direction-actions div span,
.funnel-body .signin-note,
.funnel-body .sign-in-card > small {
    font-size: 0.9375rem;
    line-height: 1.4;
}

.funnel-body .choice-grid label span {
    min-height: 58px;
}

.funnel-body .field-error {
    margin-top: 7px;
    color: #9b3d4d;
    font-size: 0.875rem;
    line-height: 1.35;
}

.admin-bootstrap-seal.logo-seal {
    width: 108px;
    height: 80px;
    margin-bottom: 22px;
}

.preview-brand > .preview-brand-mark {
    width: 48px;
    height: 40px;
    display: block;
    background: transparent;
    border-radius: 0;
}

.preview-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.book-monogram {
    width: 78px;
    height: 64px;
    background: transparent;
    border-radius: 0;
}

.book-monogram img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 680px) {
    .funnel-body .funnel-progress {
        font-size: 0.875rem;
        letter-spacing: 0.035em;
    }

    .funnel-body .direction-header .eyebrow-text,
    .funnel-body .sign-in-card .eyebrow-text {
        font-size: 0.8125rem;
    }

    .funnel-body .assistant-seal.logo-seal {
        width: 55px;
        height: 48px;
    }

    .funnel-body .assistant-seal.large.logo-seal {
        width: 84px;
        height: 68px;
    }
}

/* Title generation: keep saved options visible while a new durable set is running. */
.title-planning-shell .commercial-strip span {
    font-size: 0.875rem;
    line-height: 1.35;
    letter-spacing: 0.04em;
}

.title-planning-shell .commercial-strip b {
    font-size: 0.9375rem;
}

.title-planning-shell .planning-heading .eyebrow-text,
.title-planning-shell .option-set-label {
    font-size: 0.875rem;
    line-height: 1.3;
}

.title-planning-shell .planning-heading > p,
.title-planning-shell .planning-tools small,
.title-planning-shell .generation-wait p {
    font-size: 1rem;
    line-height: 1.55;
}

.title-planning-shell .planning-tools {
    margin-top: 32px;
    display: block;
}

.title-planning-shell .planning-tools > form,
.title-planning-shell .title-limit-message {
    min-height: 74px;
}

.title-planning-shell .planning-tools > form,
.title-planning-shell .title-limit-message {
    display: flex;
    align-items: center;
}

.title-planning-shell .title-limit-message {
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    color: var(--muted);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 7px;
}

.title-planning-shell .title-limit-message strong,
.title-planning-shell .title-limit-message span {
    display: block;
}

.title-planning-shell .title-limit-message strong {
    color: var(--plum);
    font: 600 1.05rem/1.3 var(--serif);
}

.title-planning-shell .title-limit-message span {
    text-align: right;
}

.title-planning-shell .planning-tools button {
    font-size: 1rem;
}

.title-planning-shell .title-flow-actions {
    margin-top: 32px;
    padding-top: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--line);
}

.title-planning-shell .title-next-form {
    display: flex;
}

.title-planning-shell .title-next-form button {
    margin-left: auto;
}

.title-planning-shell .flow-next-hint {
    min-height: var(--ui-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--muted);
    font: 650 1rem/1.35 var(--sans);
    text-align: right;
}

.title-planning-shell .generation-wait {
    width: 100%;
    box-sizing: border-box;
    margin: 30px auto 0;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--plum);
    background: rgba(255, 253, 248, .84);
    border: 1px solid #ddcdbd;
    border-radius: 10px;
    box-shadow: 0 15px 34px rgba(53, 22, 40, .08);
}

.title-planning-shell .generation-spinner {
    width: 32px;
    height: 32px;
    flex: none;
    border: 3px solid #eadfd3;
    border-top-color: var(--plum);
    border-radius: 50%;
    animation: title-generation-spin .85s linear infinite;
}

.title-planning-shell .generation-wait h2 {
    margin: 0 0 6px;
    color: var(--plum);
    font: 600 1.35rem/1.2 var(--serif);
}

.title-planning-shell .title-generation-wait:not(.title-generation-failure) h2 {
    margin-bottom: 0;
}

.title-planning-shell .generation-wait p {
    margin: 0;
    color: var(--muted);
}

.title-planning-shell .title-generation-failure {
    display: block;
    background: #fff8f2;
    border-color: #dfbcae;
}

.title-planning-shell .title-generation-failure .field-error {
    margin: 8px 0 0;
    color: #713541;
}

.title-planning-shell .title-generation-failure form {
    margin-top: 17px;
}

/* Title choices are editorial options, not miniature book covers. Keep the
   copy prominent and let the later Cover step own all artwork previews. */
.title-planning-shell .title-options {
    align-items: stretch;
    gap: 20px;
}

.title-planning-shell .title-option {
    min-width: 0;
    min-height: 0;
    padding: 22px;
    gap: 18px;
    border-radius: 12px;
    border: 2px solid var(--line);
    box-shadow: 0 16px 40px rgba(53, 22, 40, .09);
    box-sizing: border-box;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.title-planning-shell .title-option:hover {
    transform: none;
    border-color: #b998aa;
    box-shadow: 0 20px 46px rgba(53, 22, 40, .13);
}

.title-planning-shell .title-copy {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
}

.title-planning-shell .title-option-submit {
    min-width: 0;
    min-height: 0;
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 6px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.title-planning-shell .title-option-submit:focus-visible {
    outline: 3px solid rgba(189, 138, 61, .7);
    outline-offset: 5px;
}

.title-planning-shell .title-option-title {
    display: block;
    margin: 0;
    color: var(--plum);
    font: 600 clamp(1.45rem, 1.8vw, 1.85rem)/1.12 var(--serif);
    letter-spacing: -.02em;
    text-wrap: balance;
}

.title-planning-shell .title-option-subtitle {
    display: block;
    margin: 16px 0 0;
    padding-top: 14px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    font: italic 1.05rem/1.55 var(--serif);
}

.title-planning-shell .title-option-action {
    box-sizing: border-box;
    flex: 0 0 44px;
    min-height: 44px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--plum);
    background: #fbf6f0;
    border: 1px solid #ccb8c2;
    border-radius: 4px;
    font: 750 1rem/1.2 var(--sans);
    text-align: center;
}

.title-planning-shell .title-option.selected {
    border-color: var(--plum);
    background: #fff8e7;
    outline: none;
    box-shadow: inset 0 0 0 2px var(--gold), 0 18px 44px rgba(53, 22, 40, .16);
}

.title-planning-shell .title-option.selected .title-option-action {
    color: #fff8e9;
    background: var(--plum);
    border-color: var(--plum);
    box-shadow: 0 5px 13px rgba(75, 24, 53, .2);
}

.title-planning-shell .title-option.selected .title-option-action::before {
    content: "✓";
    margin-right: .55em;
    color: var(--gold-light);
    font-size: 1.15em;
    font-weight: 900;
}

/* The form itself is the card, so all available card space submits the same
   choice while the action treatment remains visible at the bottom. */
.title-planning-shell .title-option {
    cursor: pointer;
}

/* Keep the button at the bottom when titles have different line counts. */
.title-planning-shell .title-option-submit .title-copy {
    flex: 1 1 auto;
}

/* The shared field-error rule sets display:block, so explicitly keep idle
   feedback out of the card's flex layout and preserve the intended bottom inset. */
.title-planning-shell .title-option-ajax-feedback[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .title-planning-shell .title-option {
        display: flex;
        min-height: 0;
    }
}

@media (max-width: 600px) {
    .title-planning-shell .title-option {
        padding: 22px;
    }

    .title-planning-shell .title-option-title {
        font-size: 1.6rem;
    }

    .title-planning-shell .title-option-subtitle {
        font-size: 1rem;
    }
}

/* Library cards stay compact: the complete cover is fitted into a portrait
   frame, with readable book details overlaid on an opaque lower panel. */
.library-shell .library-heading > div {
    width: 100%;
    max-width: none;
}

.library-shell .library-heading h1 {
    max-width: none;
}

.library-shell .library-plan-callout {
    margin: 28px 0 38px;
    padding: 22px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    box-shadow: var(--shadow);
}

.library-shell .library-plan-message {
    flex: 1;
    min-width: 0;
}

.library-shell .library-plan-label {
    color: #9a6a24;
    font: 800 .75rem/1.3 var(--sans);
    letter-spacing: .09em;
}

.library-shell .library-plan-callout h2 {
    margin: 5px 0 4px;
    color: var(--plum);
    font: 600 1.5rem/1.2 var(--serif);
}

.library-shell .library-plan-callout p {
    margin: 0;
    color: var(--muted);
    font: 1rem/1.5 var(--sans);
}

.library-shell .library-plan-callout > .button-primary {
    flex: none;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 1rem;
    white-space: nowrap;
}

.library-shell .library-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 18px;
    align-items: start;
}

.library-card {
    position: relative;
    overflow: hidden;
    border-color: #e2d4c8;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.library-card:hover,
.library-card:focus-within {
    transform: translateY(-4px);
    border-color: #b9874d;
    box-shadow: 0 22px 48px rgba(47, 18, 35, .16);
}

.library-card-main-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.library-card-main-link::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    cursor: pointer;
}

.library-card-main-link:focus-visible::after {
    outline: 3px solid #7a294d;
    outline-offset: -4px;
}

.library-shell .library-cover {
    position: relative;
    display: block;
    height: auto;
    aspect-ratio: 2 / 3;
    min-height: 0;
    overflow: hidden;
    background: #f1e8dd;
}

.library-shell .library-cover > img:not(.library-planning-art) {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f1e8dd;
}

.library-shell .library-cover > .library-planning-art {
    position: absolute;
    top: 4%;
    left: 50%;
    z-index: 0;
    display: block;
    width: auto;
    height: 50%;
    max-width: 82%;
    object-fit: contain;
    background: transparent;
    filter: drop-shadow(0 .75rem 1rem rgba(53, 18, 39, .16));
    transform: translateX(-50%);
}

.library-shell .library-copy.library-cover-info-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 12px 14px 13px;
    color: var(--ink);
    background: #fffaf4;
    border-top: 1px solid #ddcbbb;
}

.library-shell .library-copy.library-cover-info-panel > .library-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: 0;
}

.library-shell .library-card-meta > small {
    min-width: 0;
    color: #896432;
    font: 600 .6875rem/1.2 var(--sans);
    letter-spacing: .035em;
}

.library-shell .library-copy .library-status-badge {
    position: static;
    z-index: auto;
    flex: none;
    padding: 4px 8px;
    color: #fffaf4;
    background: #351328;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    font: 700 .6875rem/1.2 var(--sans);
    letter-spacing: .045em;
    text-transform: uppercase;
}

.library-shell .library-copy h2 {
    min-height: 0;
    display: -webkit-box;
    margin: 8px 0 4px;
    overflow: hidden;
    color: var(--plum);
    font: 600 1.125rem/1.2 var(--serif);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.library-shell .library-copy > p {
    height: auto;
    min-height: 0;
    max-height: 2.9em;
    display: -webkit-box;
    margin: 0 0 8px;
    overflow: hidden;
    color: var(--muted);
    font: .875rem/1.45 var(--serif);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.library-shell .library-cover-progress {
    position: absolute;
    top: 12px;
    right: 12px;
    left: 12px;
    z-index: 2;
    padding: 9px 10px 8px;
    color: #fffaf4;
    background: rgba(47, 18, 35, .94);
    border: 1px solid rgba(255, 250, 244, .24);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(25, 8, 18, .2);
    pointer-events: none;
}

.library-shell .library-cover-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border: 0;
}

.library-shell .library-cover-progress-meta span {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #fffaf4;
    font: 600 .75rem/1.2 var(--sans);
    letter-spacing: 0;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.library-shell .library-cover-progress-meta b {
    flex: none;
    color: #efcf86;
    font: 700 .75rem/1.2 var(--sans);
}

.library-shell .library-cover-progress-track {
    height: 4px;
    margin-top: 7px;
    overflow: hidden;
    background: rgba(255, 250, 244, .24);
    border-radius: 999px;
}

.library-shell .library-cover-progress-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #bd8751, #f0d28e);
    border-radius: inherit;
    transition: width .55s ease;
}

.library-shell .library-copy.library-cover-info-panel > .library-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0 0;
    border-top: 1px solid var(--line);
}

.library-shell .library-copy .library-card-actions > span:first-child {
    max-width: 48%;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.4;
    text-transform: none;
}

.library-shell .library-copy .library-card-actions .library-card-open-label {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    color: var(--plum);
    font-size: .9375rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
}

.library-shell .library-copy .library-card-actions .library-card-open-label > span {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
}

.library-shell .library-copy .library-card-open-label .ui-arrow {
    flex: none;
}

.library-card-download {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 16px 16px;
}

.library-card-download form {
    min-width: 0;
    margin: 0;
}

.library-card-download .library-export-button {
    width: 100%;
    min-height: 68px;
    padding: 7px 3px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-color: rgba(74, 25, 50, .16);
    cursor: pointer;
}

.library-export-icon {
    width: 43px;
    height: 31px;
    display: grid;
    place-items: center;
    color: var(--plum);
    background: #fff;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    clip-path: polygon(0 0, 72% 0, 100% 28%, 100% 100%, 0 100%);
    font: 800 .55rem/1 var(--sans);
    letter-spacing: .025em;
}

.library-export-label {
    color: var(--muted);
    font: 700 .625rem/1.1 var(--sans);
}

.library-card-download .library-export-button:hover {
    color: var(--plum);
    background: #fff7eb;
    border-color: var(--gold);
    box-shadow: 0 5px 14px rgba(47, 18, 35, .09);
    transform: translateY(-1px);
}

.library-card-download .library-export-button:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}

.library-card-download .library-download-upgrade {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .library-shell .library-plan-callout {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        padding: 18px;
    }

    .library-shell .library-plan-callout > .button-primary {
        width: 100%;
    }

    .library-shell .library-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Keep the signed-in credit balance beside account actions, never between the
   library and new-book navigation items. */
.header-credit-balance {
    min-height: 38px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--plum);
    background: #fffaf3;
    border: 1px solid var(--line);
    border-radius: 22px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}

.header-credit-balance:hover,
.header-credit-balance:focus-visible {
    background: #f8edf2;
    border-color: #c3a5b5;
}

.header-credit-balance:focus-visible {
    outline: 3px solid rgba(117, 55, 91, .28);
    outline-offset: 2px;
}

.header-credit-balance strong {
    font-size: 1rem;
    font-weight: 750;
}

.header-credit-balance span {
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 550;
}

.generation-scope-strip {
    background: #f8f1e7;
    border: 1px solid #e4d4bf;
}

.library-stats-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.library-stats-compact article:last-child {
    border-right: 0;
}

.preview-toolbar-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-toolbar-actions > a {
    white-space: nowrap;
}

@media (max-width: 1350px) {
    .preview-toolbar > .preview-toolbar-actions {
        display: flex !important;
    }
}

@media (max-width: 600px) {
    .preview-toolbar-actions {
        gap: 7px;
    }

    .preview-toolbar-actions .header-credit-balance {
        min-height: 36px;
        padding-inline: 8px;
    }

    .preview-toolbar-actions .button-secondary {
        padding: 10px 11px;
    }

    .library-stats-compact article {
        border-right: 0;
    }
}

@media (max-width: 440px) {
    .header-inner-authenticated {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .header-inner-authenticated .brand-name {
        display: none;
    }

    .header-inner-authenticated .header-actions {
        gap: 8px;
        min-width: 0;
    }
}

@media (max-width: 360px) {
    .header-inner-authenticated {
        gap: 4px;
    }

    .header-inner-authenticated .header-actions {
        gap: 4px;
    }

    .header-inner-authenticated .authenticated-create {
        width: 40px;
        height: 40px;
    }

    .header-inner-authenticated .account-avatar {
        width: 34px;
        height: 34px;
    }

    .header-credit-balance {
        min-height: 34px;
        padding-inline: 7px;
    }

    .header-credit-balance span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 760px) {
    .title-planning-shell .title-flow-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .title-planning-shell .title-flow-actions > * {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .title-planning-shell .title-next-form {
        display: flex;
        justify-content: stretch;
    }

    .title-planning-shell .title-next-form button {
        width: 100%;
        margin-left: 0;
    }
}

/* Outline generation needs a real, visible progress state before the chapter
   list arrives. Keep it consistent with cover generation without restoring a
   redundant autosave panel in the heading. */
.outline-shell .generation-wait {
    width: 100%;
    box-sizing: border-box;
    margin: 30px auto 0;
    padding: 30px 34px;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--gold);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.outline-shell .generation-spinner {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    margin-top: 2px;
    border: 4px solid #e8dcd2;
    border-top-color: var(--plum);
    border-right-color: var(--gold);
    border-radius: 50%;
    animation: outline-generation-spin .85s linear infinite;
}

.outline-shell .generation-wait-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.outline-shell .generation-status-label {
    display: block;
    color: var(--gold);
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.35;
}

.outline-shell .generation-wait h2 {
    margin: 8px 0 9px;
    color: var(--plum);
    font: 600 1.65rem/1.18 var(--serif);
}

.outline-shell .generation-wait p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.outline-shell .generation-wait small {
    display: block;
    margin-top: 13px;
    color: var(--muted);
    font-size: .9375rem;
    line-height: 1.5;
}

.outline-shell .generation-wait-failed {
    background: #fff5ef;
    border-color: #e4c6b9;
}

.outline-shell .generation-wait-failed .field-error {
    margin-top: 7px;
    color: #713541;
}

.outline-shell .generation-wait-failed form {
    margin-top: 17px;
}

@keyframes outline-generation-spin {
    to { transform: rotate(360deg); }
}

@keyframes title-generation-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .outline-shell .generation-spinner,
    .title-planning-shell .generation-spinner {
        animation: none;
    }
}

@media (max-width: 680px) {
    .outline-shell .generation-wait {
        padding: 22px;
    }

    .outline-shell .generation-wait h2 {
        font-size: 1.4rem;
    }
}

/* Shared request state: the indicator is fixed so it never inserts a row or
   changes the height of the section containing the action that was clicked. */
.global-loading-status {
    position: fixed;
    top: 88px;
    left: 50%;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100vw - 32px);
    min-height: 44px;
    padding: 10px 16px;
    color: var(--plum);
    background: rgba(255, 252, 247, .97);
    border: 1px solid #decfbe;
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(53, 22, 40, .16);
    transform: translateX(-50%);
    pointer-events: none;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
}

.global-loading-status[hidden] {
    display: none !important;
}

.global-loading-spinner {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(75, 24, 53, .22);
    border-top-color: var(--plum);
    border-radius: 50%;
    animation: ebookempress-spin .8s linear infinite;
}

/* Pending controls remain visibly disabled even during native form
   serialization, when their disabled property is intentionally deferred. */
html[data-request-pending] [data-request-disabled="true"] {
    opacity: .58;
    filter: saturate(.72);
    cursor: not-allowed !important;
    pointer-events: none;
    user-select: none;
}

/* The visible choice card is the control's presentation. Keep the native
   radio input hidden while the shared pending state dims other controls; the
   generic opacity rule must never make the browser's radio circle flash into
   view during an AJAX navigation. */
html[data-request-pending] .choice-grid label input[type="radio"][data-request-disabled="true"] {
    opacity: 0;
}

/* Title selection is an in-place save. Disable the other cards during the
   request without dimming or repainting the whole card grid; the selected
   state changes once, after the server confirms it. */
html[data-request-pending] .title-planning-shell form[data-ajax-form="title-selection"] .title-option-submit[data-request-disabled="true"] {
    opacity: 1;
    filter: none;
}

/* Cover selection is also an in-place save. Keep the cards calm while the
   server confirms the choice instead of dimming the whole selection grid. */
html[data-request-pending] .cover-shell form[data-ajax-form="cover-selection"] .cover-candidate-submit[data-request-disabled="true"] {
    opacity: 1;
    filter: none;
}

html[data-request-pending] {
    cursor: wait;
}

.profile-actions {
    align-items: center;
}

.profile-loading-status {
    flex: 0 1 260px;
    min-width: 220px;
    min-height: 24px;
    margin: 0 auto 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Keep the status slot in the action row even while it is hidden. The reserved
   space prevents the save button and card from jumping when a request starts. */
.profile-loading-status[hidden] {
    display: flex !important;
    visibility: hidden;
}

/* A completed profile save is quiet inline feedback, not a full-width alert.
   The loading state below restores the spinner and plum treatment in the same
   fixed-height slot. */
.profile-loading-status.profile-feedback-success {
    color: #315c45;
    font-weight: 750;
}

.profile-loading-status.profile-feedback-success::before {
    display: none;
}

.profile-loading-status[data-loading-active="true"] {
    color: var(--plum);
    font-weight: 650;
}

.profile-loading-status[data-loading-active="true"]::before {
    display: block;
}

@media (max-width: 680px) {
    .global-loading-status {
        top: 74px;
    }

    .profile-actions {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .profile-loading-status {
        flex: 1 1 auto;
        min-width: 0;
    }

    .profile-actions .button-primary {
        width: auto;
        flex: 0 0 auto;
    }
}

@media (max-width: 680px) {
    .title-planning-shell .generation-wait {
        align-items: flex-start;
        padding: 22px;
    }

    .title-planning-shell .generation-wait h2 {
        font-size: 1.2rem;
    }
}

/* Cover direction chooser: keep the visual system, but make every decision readable. */
.funnel-body .direction-header p {
    max-width: 620px;
    margin: 8px 0 0;
    color: rgba(255, 248, 233, .84);
    font: 1rem/1.5 var(--serif);
}

.cover-shell .commercial-strip span {
    font-size: 0.875rem;
    line-height: 1.35;
    letter-spacing: 0.04em;
}

.cover-shell .commercial-strip b {
    font-size: 0.9375rem;
}

.cover-shell .commercial-alert {
    font-size: 1rem;
    line-height: 1.5;
}

.library-alert {
    font-size: 1rem;
    line-height: 1.5;
}

.cover-shell .planning-heading .eyebrow-text,
.cover-shell .save-state small {
    font-size: 0.875rem;
    line-height: 1.35;
}

.cover-shell .planning-heading > p {
    font-size: 1rem;
    line-height: 1.55;
}

.planning-shell .planning-heading {
    max-width: none;
}

.cover-shell .cover-directions {
    gap: 20px;
}

.cover-shell .direction-option {
    padding: 22px 22px 24px;
}

.cover-shell .direction-swatch {
    height: 140px;
    margin-bottom: 20px;
}

.cover-shell .direction-swatch img {
    width: 132px;
    height: 108px;
}

.cover-shell .direction-option h2 {
    font-size: 1.375rem;
    line-height: 1.2;
}

.cover-shell .direction-option p {
    min-height: 4.8rem;
    margin: 10px 0 19px;
    font-size: 1rem;
    line-height: 1.5;
}

.cover-shell .direction-option button {
    min-height: 46px;
    padding-block: 12px;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.cover-shell .cover-note {
    padding: 19px 22px;
}

.cover-shell .cover-note strong {
    font-size: 1rem;
    line-height: 1.35;
}

.cover-shell .cover-note small {
    font-size: 0.875rem;
    line-height: 1.45;
}

.cover-shell .cover-direction-actions {
    margin-top: 32px;
    padding-top: 23px;
    border-top: 1px solid var(--line);
}

.cover-shell .cover-direction-actions .flow-next-hint {
    min-height: var(--ui-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--muted);
    font: 650 1rem/1.35 var(--sans);
    text-align: right;
}

@media (max-width: 700px) {
    .cover-shell .direction-option p {
        min-height: 0;
    }

    .cover-shell .direction-option-description {
        min-height: 0;
    }

    .cover-shell .direction-swatch {
        height: 150px;
    }

    .cover-shell .cover-next-set {
        padding: 18px 14px;
    }
}

@media (max-width: 760px) {
    .cover-shell .cover-direction-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .cover-shell .cover-direction-actions > * {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .cover-shell .cover-direction-actions .flow-next-hint {
        justify-content: center;
    }
}

/* Cover generation and access states: make waiting and paywall decisions unmistakable. */
.cover-shell .cover-generation-wait {
    width: 100%;
    box-sizing: border-box;
    margin: 30px auto 0;
    padding: 26px 30px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--plum);
    background: rgba(255, 253, 248, .84);
    border: 1px solid #ddcdbd;
    border-radius: 10px;
    box-shadow: 0 15px 34px rgba(53, 22, 40, .08);
}

.cover-shell .cover-generation-wait .generation-spinner {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    margin: 0;
    border: 3px solid #eadfd3;
    border-top-color: var(--plum);
    border-radius: 50%;
    animation: cover-generation-spin .85s linear infinite;
}

.cover-shell .cover-generation-wait .generation-wait-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.subscription-eyebrow,
.profile-test-eyebrow,
.subscription-card-label,
.subscription-kicker {
    display: block;
    color: var(--gold);
    font-size: .875rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.35;
}

.cover-shell .cover-generation-wait h2 {
    margin: 0 0 6px;
    color: var(--plum);
    font: 600 1.35rem/1.2 var(--serif);
}

.cover-shell .cover-generation-wait p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.5;
}

.cover-shell .generation-wait-failed .generation-spinner {
    display: none;
}

.cover-shell .generation-wait-failure {
    flex: 0 1 310px;
    padding: 17px 18px;
    background: #fff5ef;
    border: 1px solid #e4c6b9;
    border-radius: 8px;
}

.cover-shell .generation-wait-failure strong {
    color: #713541;
    font-size: 1rem;
}

.cover-shell .generation-wait-failure .field-error {
    margin-top: 7px;
    color: #713541;
    font-size: .9375rem;
}

.cover-shell .generation-wait-failure form {
    margin-top: 17px;
}

@keyframes cover-generation-spin {
    to { transform: rotate(360deg); }
}

.cover-shell .planning-heading .eyebrow-text {
    font-size: .9375rem;
    line-height: 1.35;
}

.cover-shell .option-set-label {
    font-size: .9375rem;
    letter-spacing: .12em;
}

.cover-shell .cover-candidate {
    padding: 20px;
    box-sizing: border-box;
    border-width: 2px;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cover-shell .cover-candidate.selected {
    border-width: 2px;
    box-shadow: inset 0 0 0 2px var(--gold), 0 18px 46px rgba(47, 18, 35, .14);
}

.cover-shell .selected-ribbon {
    padding: 7px 10px;
    font-size: .75rem;
    letter-spacing: .06em;
}

.cover-shell .candidate-meta {
    padding: 18px 2px 14px;
}

.cover-shell .candidate-meta strong {
    font-size: 1.25rem;
    line-height: 1.2;
}

.cover-shell .candidate-meta small {
    margin-top: 7px;
    font-size: .875rem;
    line-height: 1.35;
    letter-spacing: .04em;
}

.cover-shell .selection-ribbon-hidden {
    display: none;
}

.cover-shell .cover-candidate-submit {
    width: 100%;
    min-height: 48px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--plum);
    border: 1px solid var(--plum);
    border-radius: 4px;
    font: 750 .9375rem/1.35 var(--sans);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* The complete cover card is the selection control, matching Titles. */
.cover-shell form.cover-candidate {
    display: flex;
    flex-direction: column;
}

.cover-shell form.cover-candidate .cover-candidate-submit {
    min-height: 0;
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 5px;
    font: inherit;
    text-align: left;
}

.cover-shell form.cover-candidate .cover-candidate-submit:hover {
    background: transparent;
}

.cover-shell form.cover-candidate .cover-candidate-submit:focus-visible {
    outline: 3px solid rgba(189, 138, 61, .55);
    outline-offset: 5px;
}

.cover-shell form.cover-candidate.selected .cover-candidate-submit {
    box-shadow: none;
}

.cover-shell .cover-candidate-action {
    min-height: 48px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: var(--plum);
    background: transparent;
    border: 1px solid #cfb5c2;
    border-radius: 4px;
    font: 750 .9375rem/1.35 var(--sans);
}

.cover-shell .cover-candidate.selected .cover-candidate-action {
    color: #fff;
    background: var(--plum);
    border-color: var(--plum);
    box-shadow: inset 0 0 0 2px var(--gold-light);
}

.cover-shell .generated-cover,
.cover-shell .candidate-meta,
.cover-shell .cover-candidate-action {
    width: 100%;
}

.cover-shell .generated-cover {
    display: block;
}

.cover-shell .cover-type .generated-cover-title {
    max-width: 95%;
    margin: 24% 0 8%;
    color: inherit;
    font: 500 clamp(20px, 2.25vw, 34px)/.95 var(--serif);
    letter-spacing: -.7px;
}

.cover-shell .cover-type .generated-cover-subtitle {
    max-width: 85%;
    margin: 8% 0 0;
    font: italic 9px/1.45 var(--serif);
}

.cover-shell .cover-type .generated-cover-author {
    position: absolute;
    bottom: 9%;
    font-size: 6px;
    font-weight: 750;
    letter-spacing: 1.8px;
}

.cover-shell .layout-left-modern .cover-type .generated-cover-title {
    margin: 0 0 7%;
    font-size: clamp(22px, 2.5vw, 37px);
}

.cover-shell .layout-left-modern .cover-type .generated-cover-subtitle {
    margin-top: 7%;
}

.cover-shell .layout-left-modern .cover-type .generated-cover-author {
    left: 11%;
    bottom: 8%;
}

.cover-shell .layout-lower-editorial .cover-type .generated-cover-title {
    margin: 0 0 7%;
}

.cover-shell .cover-next-set {
    margin-top: 32px;
    padding: 26px;
    background: rgba(255, 252, 247, .88);
    border: 1px solid var(--line);
    border-radius: 9px;
}

.cover-shell .cover-next-set-heading {
    max-width: 760px;
    margin: 0 auto 22px;
    text-align: center;
}

.cover-shell .cover-next-set-heading h2 {
    margin: 0 0 7px;
    color: var(--plum);
    font: 600 1.65rem/1.2 var(--serif);
}

.cover-shell .cover-next-set-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.5;
}

.cover-shell .cover-direction-picker-compact .direction-swatch {
    height: 95px;
}

.cover-shell .cover-direction-picker-compact .direction-swatch img {
    width: 96px;
    height: 78px;
}

.cover-shell .cover-direction-picker-compact .direction-option-description {
    min-height: 3.2rem;
}

.cover-shell .cover-limit-message {
    margin-top: 30px;
    padding: 22px 24px;
    display: grid;
    gap: 6px;
    color: #3d5b4b;
    background: #f1f6f0;
    border: 1px solid #c8d8ca;
    border-radius: 8px;
    text-align: center;
}

.cover-shell .cover-limit-message strong {
    font-size: 1.05rem;
}

.cover-shell .cover-next-link.disabled {
    pointer-events: none;
    opacity: .45;
}

.cover-shell .cover-candidate-submit:hover {
    background: var(--soft);
    border-color: var(--soft);
}

.cover-shell .cover-candidate-submit:focus-visible {
    outline: 3px solid rgba(189, 138, 61, .42);
    outline-offset: 3px;
}

.cover-shell .cover-candidate.selected .cover-candidate-submit {
    box-shadow: inset 0 0 0 2px var(--gold-light);
}

.cover-shell .cover-selection-ajax-feedback {
    margin-top: 8px;
}

.cover-shell .cover-candidate form button,
.cover-shell .cover-footer-actions > a,
.cover-shell .cover-footer-actions form button {
    min-height: 48px;
    font-size: .9375rem;
    line-height: 1.35;
}

.cover-shell .cover-footer-actions > form:last-child,
.cover-shell .cover-footer-actions > a.cover-subscribe-cta {
    flex: 1 1 auto;
}

/* Subscription page */
.subscription-shell {
    padding: 64px 0 112px;
}

.subscription-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 34px;
}

.subscription-header > div {
    width: 100%;
    max-width: none;
}

.subscription-header h1 {
    margin: 10px 0 14px;
    color: var(--plum);
    font: 500 clamp(40px, 4vw, 52px)/1.02 var(--serif);
    letter-spacing: -1.5px;
}

.subscription-header p,
.subscription-section-heading p,
.subscription-status-card p,
.subscription-active-note p {
    color: var(--muted);
    font: 1.0625rem/1.6 var(--serif);
}

.subscription-header p {
    max-width: none;
    margin: 0;
}

.subscription-alert {
    display: grid;
    gap: 5px;
    margin: 0 0 24px;
    padding: 17px 20px;
    color: #70452d;
    background: #fff1dc;
    border: 1px solid #e7cda8;
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1.5;
}

.subscription-alert strong {
    color: #613521;
}

.subscription-limit-callout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px 32px;
    margin: 0 0 28px;
    padding: 24px 28px;
    background: #fffaf3;
    border: 1px solid #e7cda8;
    border-top: 4px solid #bb7b25;
    border-radius: 9px;
    box-shadow: 0 16px 38px rgba(53, 22, 40, .07);
}

.subscription-limit-copy .subscription-eyebrow {
    color: #9a6119;
}

.subscription-limit-copy h2 {
    margin: 8px 0 8px;
    color: var(--plum);
    font: 500 clamp(25px, 3vw, 34px)/1.15 var(--serif);
}

.subscription-limit-copy p {
    margin: 0;
    color: var(--muted);
    font: 1rem/1.55 var(--sans);
}

.subscription-limit-copy .subscription-limit-promise {
    margin-top: 10px;
    color: var(--plum);
    font-weight: 700;
}

.subscription-limit-copy .subscription-limit-saved {
    margin-top: 8px;
    font-size: .9375rem;
}

.subscription-limit-callout > a {
    white-space: nowrap;
}

.subscription-status-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px 32px;
    margin-bottom: 58px;
    padding: 30px 34px;
    background: var(--deep);
    border-radius: 10px;
    box-shadow: 0 22px 54px rgba(53, 13, 36, .16);
}

.subscription-status-card h2,
.subscription-active-note h2 {
    margin: 9px 0 7px;
    color: #fffaf1;
    font: 500 2rem/1.15 var(--serif);
}

.subscription-status-card p {
    margin: 0;
    color: #d8c9d0;
}

.subscription-status-card .subscription-card-label {
    color: var(--gold-light);
}

.subscription-status-summary {
    min-width: 215px;
    display: grid;
    align-content: center;
    gap: 10px;
    color: #d8c9d0;
    font-size: .9375rem;
    line-height: 1.35;
}

.subscription-status-summary span {
    display: block;
}

.subscription-status-summary b {
    color: var(--gold-light);
    font: 600 1.35rem var(--serif);
}

.subscription-status-action {
    grid-column: 1 / -1;
}

.subscription-status-card > *,
.subscription-billing-details > div {
    min-width: 0;
}

.subscription-status-card .subscription-account-type {
    margin-top: 12px;
    color: #fffaf1;
    font-weight: 600;
}

.subscription-billing-details {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 20px 32px;
    margin: 0;
    line-height: 1.5;
}

.subscription-billing-details:empty {
    display: none;
}

.subscription-billing-details dt {
    color: #d8c9d0;
    font-size: 1rem;
}

.subscription-billing-details dd {
    margin: 5px 0 0;
    color: #fffaf1;
    font-size: 1.125rem;
    font-weight: 600;
}

.subscription-billing-note {
    grid-column: 1 / -1;
}

.subscription-billing-note p + p {
    margin-top: 8px;
}

.subscription-status-action .button-primary,
.subscription-active-note .button-primary {
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 54px;
    white-space: normal;
}

.subscription-status-action .button-primary > span,
.subscription-active-note .button-primary > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.subscription-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 32px;
}

.subscription-section-heading h2 {
    margin: 9px 0 0;
    color: var(--plum);
    font: 500 clamp(34px, 4vw, 48px)/1.05 var(--serif);
}

.subscription-section-heading p {
    max-width: 390px;
    margin: 0;
}

.subscription-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.subscription-plan-card {
    position: relative;
    min-width: 0;
    overflow-wrap: anywhere;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 29px 26px 25px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--gold);
    border-radius: 8px;
    box-shadow: 0 15px 38px rgba(53, 22, 40, .08);
}

.subscription-plan-card.is-featured {
    box-shadow: 0 15px 38px rgba(53, 22, 40, .08);
}

.subscription-plan-badge {
    position: absolute;
    top: -14px;
    right: 20px;
    max-width: calc(100% - 40px);
    padding: 6px 9px;
    color: var(--deep);
    background: var(--gold-light);
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.subscription-plan-card h3 {
    margin: 0 0 15px;
    color: var(--plum);
    font: 600 1.35rem/1.2 var(--serif);
}

.subscription-price {
    color: var(--plum);
    font: 600 2.8rem/1 var(--serif);
}

.subscription-price sup {
    font-size: 1.2rem;
    vertical-align: top;
}

.subscription-price small {
    color: var(--muted);
    font: 1rem var(--sans);
}

.subscription-credits {
    margin-top: 15px;
    color: var(--gold);
    font-size: .9375rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.subscription-plan-card ul {
    flex: 1 1 auto;
    margin: 29px 0 31px;
    padding: 0;
    color: var(--muted);
    list-style: none;
    font-size: 1rem;
    line-height: 1.45;
}

.subscription-plan-card li {
    margin: 13px 0;
}

.subscription-plan-card li::before {
    content: "✓";
    margin-right: 9px;
    color: var(--sage);
    font-weight: 800;
}

.subscription-plan-card .button-primary {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    height: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    font-size: .9375rem;
}

.subscription-plan-card .button-primary > span {
    min-width: 0;
}

.billing-return .simple-card {
    min-width: 0;
    padding: clamp(24px, 6vw, 55px);
}

.subscription-status-card {
    overflow-wrap: anywhere;
}

.billing-return h1 {
    font-size: clamp(32px, 5vw, 42px);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.subscription-empty,
.subscription-active-note {
    padding: 36px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 9px;
}

.subscription-active-note {
    background: var(--deep);
    color: #fff;
    min-width: 0;
    overflow-wrap: anywhere;
}

.subscription-active-note p {
    max-width: 650px;
    margin: 0 0 22px;
    color: #d8c9d0;
}

.subscription-test-mode-note {
    display: grid;
    gap: 4px;
    align-self: start;
    min-width: 220px;
    padding: 14px 16px;
    color: #315c45;
    background: #edf5ee;
    border: 1px solid #cbdccc;
    border-radius: 6px;
    font-size: .95rem;
    line-height: 1.4;
}

.subscription-test-mode-note span {
    color: #597066;
}

.subscription-test-mode-panel {
    background: #315c45;
}

.subscription-gate .subscription-kicker {
    margin-bottom: 8px;
}

.subscription-gate > p {
    font-size: 1rem;
    line-height: 1.55;
}

.subscription-gate-cta {
    display: inline-flex;
    margin-top: 5px;
    min-height: 48px;
    align-items: center;
    font-size: .9375rem;
}

/* Owner-only test reset */
.profile-test-card {
    display: grid;
    gap: 20px;
    margin-top: 28px;
    padding: 30px 32px;
    background: #fff5ef;
    border: 1px solid #e4c6b9;
    border-radius: 9px;
}

.profile-body {
    /* Setting updates must not let the browser choose a moving form control
       or notice as a viewport anchor during pending/confirmed state changes. */
    overflow-anchor: none;
}

.profile-billing-card {
    background: #f4f7f2;
    border-color: #cbdccc;
}

.profile-billing-card h2,
.profile-billing-card p,
.profile-billing-card .profile-test-eyebrow {
    color: #315c45;
}

.profile-billing-form {
    display: grid;
    grid-template-columns: minmax(170px, .8fr) minmax(260px, 1.4fr) auto;
    align-items: end;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #cbdccc;
}

.profile-billing-summary,
.profile-billing-form select {
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #b9cdbd;
    border-radius: 6px;
    background: #fffdf8;
}

.profile-billing-summary {
    display: flex;
    align-items: center;
    color: #315c45;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.profile-billing-form [data-ajax-feedback] {
    grid-column: 1 / -1;
}

.profile-billing-form [data-ajax-feedback][hidden] {
    display: none !important;
}

.profile-billing-form .profile-field label {
    color: #315c45;
}

.profile-billing-form select {
    width: 100%;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.profile-billing-form select:focus-visible {
    outline: none;
    border-color: #5f8b70;
    box-shadow: 0 0 0 4px rgba(95, 139, 112, .14);
}

.profile-billing-form .button-primary {
    min-height: 48px;
}

.profile-billing-form .button-primary:hover {
    /* Keep the save target stationary as pending state removes/restores hover. */
    transform: none;
}

.profile-billing-note {
    padding-top: 2px;
    font-size: .95rem !important;
}

.profile-test-card h2 {
    margin: 8px 0 7px;
    color: #713541;
    font: 600 1.55rem/1.2 var(--serif);
}

.profile-test-card p {
    max-width: 760px;
    margin: 0;
    color: #705a5d;
    font-size: 1rem;
    line-height: 1.55;
}

.profile-reset-form {
    display: grid;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #e4c6b9;
}

.profile-reset-form label {
    color: #713541;
    font-size: .9375rem;
    font-weight: 650;
}

.profile-reset-form > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-reset-form input {
    width: 160px;
    min-height: 46px;
    padding: 10px 12px;
    color: var(--ink);
    background: #fffdf8;
    border: 1px solid #d7b5aa;
    border-radius: 5px;
    font-size: 1rem;
}

.button-danger {
    min-height: 46px;
    padding: 11px 17px;
    color: #fff;
    background: #713541;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: .9375rem;
    font-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
    .cover-shell .generation-spinner {
        animation: none;
    }
}

@media (max-width: 900px) {
    .subscription-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 700px) {
    .cover-shell .cover-generation-wait {
        padding: 26px 22px;
        flex-wrap: wrap;
    }

    .cover-shell .cover-generation-wait .generation-wait-copy {
        flex-basis: calc(100% - 64px);
    }

    .cover-shell .generation-wait-failure {
        flex-basis: 100%;
    }

    .cover-shell .cover-generation-wait h2 {
        font-size: 1.4rem;
    }

    .cover-shell .save-state {
        min-width: 0;
    }

    .subscription-shell {
        padding: 42px 0 86px;
    }

    .subscription-header,
    .subscription-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .subscription-header h1 {
        font-size: 42px;
    }

    .subscription-header .button-secondary {
        width: 100%;
    }

    .subscription-status-card {
        grid-template-columns: 1fr;
        padding: 25px 22px;
    }

    .subscription-limit-callout {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .subscription-limit-callout > a {
        width: 100%;
        justify-content: center;
    }

    .subscription-status-summary {
        min-width: 0;
    }

    .subscription-plan-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-reset-form > div {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-reset-form input,
    .profile-reset-form .button-danger {
        width: 100%;
    }

    .profile-billing-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .profile-billing-form .button-primary {
        width: 100%;
    }
}

/* Readability floor for legacy surfaces.
   Functional interface text should be comfortable to read without zooming.
   Decorative type inside generated cover artwork is intentionally excluded. */
.site-footer .footer-inner p,
.site-footer .footer-inner nav,
.site-footer .footer-inner nav a,
.site-footer .footer-inner small,
.legal-shell p,
.legal-shell li,
.legal-shell a,
.billing-return p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Operator console */
.admin-shell .admin-header .eyebrow-text,
.admin-shell .admin-nav a,
.admin-shell .admin-stat small,
.admin-shell .admin-detail-item small,
.admin-shell .admin-stat span,
.admin-shell .admin-detail-item span,
.admin-shell .admin-meta,
.admin-shell .admin-card > header p,
.admin-shell .admin-card > header > a,
.admin-shell .admin-toolbar label,
.admin-shell .admin-toolbar input,
.admin-shell .admin-toolbar select,
.admin-shell .admin-table,
.admin-shell .admin-table th,
.admin-shell .admin-table td,
.admin-shell .admin-pagination,
.admin-shell .admin-empty,
.admin-shell .admin-list li,
.admin-shell .admin-alert strong,
.admin-shell .admin-alert p,
.admin-shell .admin-alert > a,
.admin-shell .admin-report-list dt,
.admin-shell .admin-report-list dd small,
.admin-shell .admin-report-layout h3 small,
.admin-credit-form label,
.admin-credit-form input,
.admin-credit-form select,
.admin-credit-form textarea,
.admin-credit-help,
.admin-field-error {
    font-size: 1rem;
    line-height: 1.5;
}

.admin-shell .admin-meta b {
    font-size: 1.1rem;
}

.admin-shell .admin-table td > strong {
    font-size: 1rem;
    line-height: 1.4;
}

.admin-shell .admin-table td > small,
.admin-shell .admin-table code,
.admin-shell .admin-mono,
.admin-shell .admin-badge {
    font-size: 0.9375rem !important;
    line-height: 1.35 !important;
}

.admin-shell .admin-badge {
    padding: 6px 10px !important;
    letter-spacing: .03em;
}

.admin-shell .admin-report-list dd {
    font-size: 1.0625rem;
}

.admin-bootstrap-card > .eyebrow-text,
.admin-bootstrap-form label,
.admin-bootstrap-form .admin-copy,
.admin-bootstrap-back {
    font-size: 1rem;
    line-height: 1.5;
}

/* Creation funnel */
.funnel-body .funnel-progress,
.funnel-body .direction-header .eyebrow-text,
.funnel-body .sign-in-card .eyebrow-text,
.funnel-body .idea-recap > span,
.funnel-body .select-field > span:first-child,
.funnel-body .choice-fieldset legend,
.funnel-body .text-action,
.funnel-body .choice-grid label span,
.funnel-body .direction-actions strong,
.funnel-body .direction-actions div span,
.funnel-body .signin-note,
.funnel-body .sign-in-card > small,
.funnel-body .field-error,
.title-planning-shell .commercial-strip span,
.title-planning-shell .commercial-strip b,
.title-planning-shell .planning-heading .eyebrow-text,
.title-planning-shell .option-set-label,
.cover-shell .commercial-strip span,
.cover-shell .commercial-strip b,
.cover-shell .commercial-alert,
.cover-shell .planning-heading .eyebrow-text,
.cover-shell .option-set-label,
.cover-shell .selected-ribbon,
.cover-shell .candidate-meta small,
.cover-shell .cover-note small,
.cover-shell .cover-footer-actions > a,
.cover-shell .cover-footer-actions form button,
.cover-shell .generation-status-label,
.cover-shell .generation-wait-copy > small,
.cover-shell .generation-wait-failure .field-error,
.profile-test-eyebrow,
.subscription-card-label,
.subscription-kicker,
.subscription-plan-badge {
    font-size: 0.9375rem;
    line-height: 1.45;
}

/* Progress, reader and completion states */
.generation-percent,
.generation-checklist small,
.generation-leave-note,
.completion-quote > div small,
.completion-quote > div span,
.completion-quote dl div,
.mini-plans span,
.mini-plans small,
.mini-plans .text-action,
.reader-notice,
.quote-notice {
    font-size: 1rem;
    line-height: 1.55;
}

.generation-copy > .eyebrow-text,
.reader-rail > .eyebrow-text,
.locked-remainder > small,
.title-page small,
.contents-page small,
.chapter-page > .page-inner > small {
    font-size: 1rem;
    line-height: 1.4;
}

.locked-remainder > p,
.locked-remainder .completion-quote > div span,
.locked-remainder .completion-quote dl div,
.locked-remainder .subscription-gate > p {
    font-size: 1rem;
    line-height: 1.6;
}

.preview-toolbar b,
.preview-toolbar small,
.reader-rail > p,
.reader-rail > small,
.reader-rail li,
.reader-rail li span,
.reader-rail li a,
.reader-page-status b,
.reader-page-status small,
.reader-motion-toggle,
.page-number,
.page-label,
.title-page small,
.contents-page small,
.chapter-page > .page-inner > small,
.title-page b,
.contents-page li,
.contents-page li b,
.chapter-page p,
.chapter-page li,
.chapter-page aside,
.chapter-page figcaption,
.locked-remainder > small {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.chapter-page h4 {
    margin: 22px 0 8px;
    color: var(--plum);
    font: 600 18px/1.4 var(--serif);
}

.chapter-figure {
    margin: 20px 0 15px;
}

.chapter-figure .chapter-art {
    margin: 0;
    object-fit: contain;
}

.chapter-figure figcaption,
.chapter-page .chapter-caption {
    margin: 3px 0 0;
    text-align: center;
    line-height: 1.35;
}

/* Structured editor */
.editor-header p,
.editor-notice,
.field-label,
.editor-panel label,
.text-field,
.editor-panel input,
.editor-panel textarea,
.block-editor > small,
.editor-panel > small,
.editor-chapters > small,
.block-editor textarea,
.block-editor em,
.block-editor p,
.revision-panel > p,
.revision-panel article b,
.revision-panel article span,
.revision-panel article time,
.editor-chapters a,
.reader-rail li a,
.chapter-edit-link {
    font-size: 1rem;
    line-height: 1.5;
}

@media (max-width: 680px) {
    .funnel-body .funnel-progress,
    .funnel-body .direction-header .eyebrow-text,
    .funnel-body .sign-in-card .eyebrow-text {
        font-size: 0.9375rem;
    }

    .add-chapter > button {
        align-self: flex-start;
    }
}

/* Cover direction cards use the same calm selection language as title cards. The
   swatch remains a style cue, while the footer action communicates state. */
.cover-shell .cover-direction-picker .direction-option {
    min-width: 0;
    min-height: 0;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
    border: 2px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(53, 22, 40, .09);
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    transform: none;
}

.cover-shell .cover-direction-picker .direction-option:hover {
    border-color: #b998aa;
    box-shadow: 0 20px 46px rgba(53, 22, 40, .13);
    transform: none;
}

.cover-shell .cover-direction-picker .direction-option:focus-within {
    outline: 3px solid rgba(189, 138, 61, .7);
    outline-offset: 5px;
}

.cover-shell .cover-direction-picker .direction-swatch,
.cover-shell .cover-direction-picker.cover-direction-picker-compact .direction-swatch {
    width: 100%;
    flex: 0 0 126px;
    height: 126px;
    min-height: 126px;
    margin: 0;
}

.cover-shell .cover-direction-picker .direction-option-title {
    display: block;
    margin: 0;
    color: var(--plum);
    font: 600 clamp(1.45rem, 1.8vw, 1.85rem)/1.12 var(--serif);
    letter-spacing: -.02em;
    text-wrap: balance;
}

.cover-shell .cover-direction-picker .direction-option-description {
    display: block;
    min-height: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 14px 0 0;
    color: var(--muted);
    border-top: 1px solid var(--line);
    font: italic 1.05rem/1.55 var(--serif);
}

.cover-shell .cover-direction-picker .direction-option-action {
    box-sizing: border-box;
    width: 100%;
    flex: 0 0 44px;
    min-height: 44px;
    margin-top: auto;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--plum);
    background: #fbf6f0;
    border: 1px solid #ccb8c2;
    border-radius: 4px;
    font: 750 1rem/1.2 var(--sans);
    text-align: center;
}

.cover-shell .cover-direction-picker .direction-option.selected {
    border-color: var(--plum);
    background: #fff8e7;
    outline: none;
    box-shadow: inset 0 0 0 2px var(--gold), 0 18px 44px rgba(53, 22, 40, .16);
}

.cover-shell .cover-direction-picker .direction-option.selected .direction-option-action {
    color: #fff8e9;
    background: var(--plum);
    border-color: var(--plum);
    box-shadow: 0 5px 13px rgba(75, 24, 53, .2);
}

.cover-shell .cover-direction-picker .direction-option.selected .direction-option-action::before {
    content: "✓";
    margin-right: .55em;
    color: var(--gold-light);
    font-size: 1.15em;
    font-weight: 900;
}

@media (max-width: 700px) {
    .cover-shell .cover-direction-picker .direction-swatch,
    .cover-shell .cover-direction-picker.cover-direction-picker-compact .direction-swatch {
        flex-basis: 112px;
        height: 112px;
        min-height: 112px;
    }
}

/* Respect the operating-system motion preference across every route, not only the reader. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}
.book-size-shell{position:relative}.book-size-heading{margin-bottom:27px}.book-size-heading .eyebrow-text{display:block;color:var(--gold)}.scope-card{position:relative;padding:28px 32px 30px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.scope-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}.scope-card-heading h2{margin:5px 0 0;color:var(--plum);font:500 27px var(--serif)}.scope-lock-note{padding:7px 10px;color:var(--sage);background:#eef3ee;border:1px solid #d3dfd5;border-radius:18px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}.scope-locked-message{margin-top:18px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;color:#405448;background:#eef3ee;border:1px solid #d3dfd5;border-radius:5px;font-size:11px}.scope-locked-message span{color:#718076}.book-size-form{padding-top:25px}.scope-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.scope-field{display:flex;flex-direction:column;gap:7px;color:var(--plum);font-size:10px;font-weight:800}.scope-field>small{color:var(--muted);font-size:9px;font-weight:400;line-height:1.45}.scope-input-wrap{height:55px;padding:0 14px;display:flex;align-items:center;gap:8px;background:#fcfaf6;border:1px solid #dfd3c8;border-radius:4px}.scope-input-wrap:focus-within{border-color:var(--soft);box-shadow:inset 0 0 0 1px var(--soft)}.scope-input-wrap input{min-width:0;width:100%;height:100%;padding:0;color:var(--ink);background:transparent;border:0;outline:0;font:500 22px var(--serif)}.scope-input-wrap small{color:var(--muted);font:400 11px var(--sans)}.scope-price-card{margin-top:24px;padding:19px 20px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:#f8f1e7;border:1px solid #e4d4bf;border-radius:6px}.scope-price-card>div>strong,.scope-price-card>div>p{display:block}.scope-price-card>div>strong{margin-top:4px;color:var(--plum);font:500 30px var(--serif)}.scope-price-card>div>p{margin:5px 0 0;color:var(--muted);font-size:10px}.scope-price-card dl{min-width:230px;margin:0}.scope-price-card dl div{display:flex;justify-content:space-between;gap:18px;padding:7px 0;border-bottom:1px solid #e4d4bf}.scope-price-card dl div:last-child{border-bottom:0}.scope-price-card dt{color:var(--muted);font-size:10px}.scope-price-card dd{margin:0;color:var(--plum);font-weight:800}.scope-actions{margin-top:24px;padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line)}.scope-actions p{max-width:520px;margin:0;color:var(--muted);font:12px/1.5 var(--serif)}.scope-actions .button-primary{white-space:nowrap}.draft-reset-control{position:absolute;z-index:3;top:19px;right:0}.draft-reset-control>.text-action{padding:6px 0;color:var(--soft);font-size:10px}.draft-reset-dialog{width:min(450px,calc(100% - 30px));padding:27px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 25px 80px rgba(36,13,27,.25);color:var(--ink)}.draft-reset-dialog::backdrop{background:rgba(34,14,27,.28)}.draft-reset-dialog-copy h2{margin:7px 0;color:var(--plum);font:500 27px var(--serif)}.draft-reset-dialog-copy p{margin:0;color:var(--muted);font:13px/1.55 var(--serif)}.draft-reset-dialog-actions{margin-top:24px;display:flex;justify-content:flex-end;align-items:center;gap:10px}.draft-reset-dialog-actions form{display:flex}.draft-reset-dialog-actions button{white-space:nowrap}.generation-scope-strip{margin:0 auto 23px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:18px;color:var(--muted);background:#f8f1e7;border:1px solid #e4d4bf;border-radius:5px;font-size:10px}.generation-scope-strip strong{color:var(--plum);font-size:12px}.generation-scope-strip span:last-child{white-space:nowrap}.read-only-note{margin:0 0 18px;padding:11px 14px;color:#405448;background:#eef3ee;border:1px solid #d3dfd5;border-radius:5px;font:12px/1.45 var(--serif)}.outline-read-only .chapter-row{min-height:92px;padding-right:25px}.outline-read-only .chapter-copy h2{margin:0;color:var(--plum);font:600 18px/1.2 var(--serif)}.outline-read-only .chapter-copy p{margin:7px 0 0;color:var(--muted);font:12px/1.5 var(--serif)}
@media(max-width:760px){.draft-reset-control{top:6px;right:0}.scope-card{padding:22px 18px 23px}.scope-card-heading{display:block}.scope-lock-note{display:inline-block;margin-top:12px}.scope-field-grid{grid-template-columns:1fr}.scope-price-card{display:block}.scope-price-card dl{min-width:0;margin-top:15px}.scope-actions{align-items:stretch;flex-direction:column;gap:16px}.scope-actions .button-primary{width:100%;text-align:center}.generation-scope-strip{align-items:flex-start;flex-direction:column;gap:4px}.generation-scope-strip span:last-child{white-space:normal}.draft-reset-dialog-actions{align-items:stretch;flex-direction:column}.draft-reset-dialog-actions>*{width:100%}.draft-reset-dialog-actions form button,.draft-reset-dialog-actions .button-secondary{width:100%;text-align:center}}
@media(max-width:680px){.funnel-progress span:nth-of-type(n+4),.funnel-progress i:nth-of-type(n+3){display:inline}.funnel-progress{gap:3px;font-size:8px;letter-spacing:.5px}.funnel-progress i{width:8px;margin:0 2px}}

/* Scope and outline information is part of the decision, not fine print. Keep
   it readable at the same scale as the rest of the funnel. */
.book-size-shell .commercial-strip,
.outline-shell .commercial-strip,
.book-size-shell .generation-scope-strip,
.outline-shell .generation-scope-strip {
    font-size: 0.9375rem;
    line-height: 1.45;
}

.book-size-shell .commercial-strip span {
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.025em;
}

.book-size-shell .commercial-strip b,
.outline-shell .commercial-strip b,
.book-size-shell .generation-scope-strip strong,
.outline-shell .generation-scope-strip strong {
    font-size: 1rem;
}

.book-size-shell .commercial-strip b {
    font-size: 1.125rem;
}

.book-size-shell .eyebrow-text,
.outline-shell .planning-heading .eyebrow-text {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.scope-lock-note {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

.scope-locked-message {
    font-size: 0.9375rem;
    line-height: 1.45;
}

.scope-field {
    font-size: 0.9375rem;
}

.scope-field > small,
.scope-input-wrap small {
    font-size: 0.8125rem;
    line-height: 1.5;
}

.scope-field-heading {
    min-height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2px 12px;
}

.scope-field-heading > span {
    color: var(--plum);
}

.scope-field-heading > small {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: right;
}

.scope-credit-rates {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.scope-credit-rates strong {
    color: var(--plum);
}

.scope-price-card .eyebrow-text {
    color: #865713;
    font-size: 0.9375rem;
    line-height: 1.35;
    letter-spacing: 0.07em;
}

.scope-price-card > div > p,
.scope-price-card dt,
.scope-price-card dd,
.scope-actions p {
    font-size: 0.9375rem;
    line-height: 1.5;
}

.scope-price-card dd {
    font-size: 1rem;
}

.scope-card-heading h2 {
    margin-top: 0;
}

.scope-actions {
    display: block;
    padding: 1rem 1.125rem;
    border: 1px solid #d9bd91;
    border-left: 4px solid #b77a21;
    border-radius: 6px;
    background: #fbf3e5;
}

.scope-actions p {
    width: 100%;
    max-width: none;
    margin: 0;
    color: #5a183b;
    font-size: 1rem;
    line-height: 1.55;
}

.scope-actions p strong {
    font-weight: 800;
}

.outline-read-only-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.outline-read-only-note > span:first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.outline-read-only-note .draft-reset-control {
    position: static;
    flex: 0 0 auto;
}

.reset-draft-button {
    min-height: 44px;
    padding: 0 18px;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.outline-shell .read-only-note,
.outline-shell .chapter-copy p,
.outline-shell .chapter-exclusion-label {
    font-size: 0.9375rem;
    line-height: 1.55;
}

.outline-shell .outline-summary span {
    font-size: 0.9375rem;
}

@media (max-width: 760px) {
    .outline-read-only-note {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .outline-read-only-note .reset-draft-button {
        width: 100%;
    }
}

/* Credit balance and book scope are important funnel information, not tiny badges. */
.funnel-shell > .commercial-strip {
    width: 100%;
    min-height: 58px;
    margin: 13px auto 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    box-sizing: border-box;
    border-radius: 8px;
}

.funnel-shell > .commercial-strip span {
    min-width: 0;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: 0.015em;
    text-align: center;
    text-transform: none;
}

.funnel-shell > .commercial-strip span + span {
    border-left: 1px solid var(--line);
}

.funnel-shell > .commercial-strip b {
    color: var(--plum);
    font-size: 1.25rem;
    line-height: 1;
}

.funnel-shell .generation-scope-strip {
    width: 100%;
    min-height: 58px;
    margin: 0 auto 23px;
    padding: 12px 20px;
    box-sizing: border-box;
    align-items: center;
    gap: 18px;
    font-size: 1rem;
    line-height: 1.45;
}

.funnel-shell .generation-scope-strip strong,
.funnel-shell .generation-scope-strip span:last-child {
    font-size: 1rem;
    line-height: inherit;
}

.funnel-shell .generation-scope-strip strong {
    font-size: 1.125rem;
}

@media (max-width: 600px) {
    .funnel-shell > .commercial-strip {
        grid-template-columns: 1fr;
    }

    .funnel-shell > .commercial-strip span {
        padding: 10px 14px;
    }

    .funnel-shell > .commercial-strip span + span {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .funnel-shell .generation-scope-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

.book-details-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
    padding-top: 25px;
}

.book-details-input {
    width: 100%;
    height: 55px;
    padding: 0 14px;
    color: var(--ink);
    background: #fcfaf6;
    border: 1px solid #dfd3c8;
    border-radius: 4px;
    font: 14px var(--sans);
}

.book-details-input:focus,
.book-year-input:focus-within {
    border-color: var(--soft);
    box-shadow: inset 0 0 0 1px var(--soft);
    outline: 0;
}

.book-details-fields .optional-label {
    margin-left: 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 400;
}

.book-year-input {
    padding: 0 14px;
}

.book-year-input input {
    width: 100%;
    height: 100%;
    padding: 0;
    color: var(--ink);
    background: transparent;
    border: 0;
    outline: 0;
    font: 500 22px var(--serif);
}

@media (max-width: 680px) {
    .book-details-fields {
        grid-template-columns: 1fr;
        gap: 17px;
    }
}

/* One shared, accessible stepper makes the current place in the funnel clear. */
.funnel-body .funnel-progress {
    flex-wrap: nowrap;
    gap: 0;
}

.funnel-progress span {
    min-height: 34px;
    padding: 6px 9px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    white-space: nowrap;
}

.funnel-progress span.is-complete {
    color: var(--plum);
}

.funnel-progress span.is-current {
    color: var(--deep);
    background: #f5e8ef;
    border-color: #caa7b6;
    box-shadow: inset 0 0 0 1px rgba(87, 25, 59, .08);
    font-weight: 850;
}

.funnel-progress i.is-complete {
    background: var(--gold);
}

@media (max-width: 1000px) {
    .funnel-body .funnel-progress {
        flex-wrap: wrap;
        gap: 8px;
        font-size: .875rem;
        letter-spacing: .025em;
    }

    .funnel-body .funnel-progress span {
        min-height: 30px;
        max-width: 100%;
        padding: 5px 8px;
        display: inline-flex;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .funnel-body .funnel-progress i {
        display: none;
    }
}

.book-size-shell .scope-lock-warning {
    margin-top: 24px;
    padding: 15px 18px;
    color: #51394a;
    background: #fbf4e9;
    border: 1px solid #e7d5bc;
    border-left: 4px solid #bb7b25;
    border-radius: 6px;
}

.book-size-shell .scope-lock-warning p {
    max-width: none;
    margin: 0;
    color: inherit;
    font: 400 1rem/1.55 var(--sans);
}

.book-size-shell .scope-lock-warning p strong {
    color: var(--plum);
    font-weight: 750;
}

/* Context warnings must be readable, not the compact marketing-strip size. */
.title-planning-shell .title-context-notice {
    display: block;
    max-width: none;
    padding: 18px 22px;
    font: 400 1rem/1.6 var(--sans);
    text-align: start;
}

.title-planning-shell .title-context-notice b,
.title-planning-shell .title-context-notice span {
    display: block;
}

.title-planning-shell .title-context-notice b {
    margin-bottom: 4px;
}

/* One planning status panel across titles, chapter plans and cover options. */
.funnel-body .planning-generation-wait {
    --planning-status-heading-height: 1.62rem;
    width: 100%;
    box-sizing: border-box;
    margin: 30px auto 0;
    padding: 26px 30px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 18px;
    color: var(--plum);
    background: rgba(255, 253, 248, .84);
    border: 1px solid #ddcdbd;
    border-radius: 10px;
    box-shadow: 0 15px 34px rgba(53, 22, 40, .08);
}

.funnel-body .planning-generation-wait .generation-spinner {
    display: block;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    flex: 0 0 32px;
    margin: 0;
    border: 3px solid #eadfd3;
    border-top-color: var(--plum);
    border-radius: 50%;
    /* Align to the heading, not to the whole heading/description block.
       The serif's visible letters sit slightly below its line-box center. */
    translate: 0 calc((var(--planning-status-heading-height) - 32px) / 2 + 2px);
    animation: planning-generation-spin .85s linear infinite;
}

.funnel-body .planning-generation-wait .generation-wait-copy {
    min-width: 0;
    flex: 1;
}

.funnel-body .planning-generation-wait h2 {
    margin: 0;
    color: var(--plum);
    font: 600 1.35rem/1.2 var(--serif);
}

.funnel-body .planning-generation-wait p {
    max-width: none;
    margin: 6px 0 0;
    color: var(--muted);
    font: 400 1rem/1.5 var(--sans);
}

.funnel-body .planning-generation-failed {
    background: #fff8f2;
    border-color: #dfbcae;
}

.funnel-body .planning-generation-failed .field-error {
    color: #713541;
}

.funnel-body .planning-generation-failed form {
    margin-top: 17px;
}

.planning-locked-notice {
    margin: 18px 0;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #405448;
    background: #eef3ee;
    border: 1px solid #d3dfd5;
    border-radius: 6px;
}

.planning-locked-notice p {
    margin: 0;
    font: 400 1rem/1.55 var(--sans);
}

.planning-locked-notice .draft-reset-control {
    position: static;
    flex: 0 0 auto;
}

.direction-card > .planning-locked-notice {
    margin: 22px 34px 0;
}

.outline-card > .planning-locked-notice {
    margin: 18px 23px;
}

@keyframes planning-generation-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .funnel-body .planning-generation-wait .generation-spinner { animation: none; }
}

@media (max-width: 680px) {
    .funnel-body .planning-generation-wait { padding: 22px; --planning-status-heading-height: 1.44rem; }
    .funnel-body .planning-generation-wait h2 { font-size: 1.2rem; }
    .planning-locked-notice { flex-direction: column; align-items: stretch; }
    .planning-locked-notice .reset-draft-button { width: 100%; }
}

/* Keep the account menu reachable on narrow creation-step screens. */
@media (max-width: 420px) {
    .funnel-body .header-inner-authenticated .brand-name { display: none; }
}

/* Browser reading size, independent of the downloadable book templates. */
.reader-stage .title-page h2 { line-height: 1.1; }
.reader-stage .title-page p { max-width: 400px; font-size: 1.125rem; line-height: 1.5; }
.reader-stage .title-page b,
.reader-stage .title-page small,
.reader-stage .copyright-page p { font-size: 1rem; line-height: 1.6; }
.reader-stage .chapter-page p,
.reader-stage .chapter-page li,
.reader-stage .chapter-page aside,
.reader-stage .chapter-page blockquote { font-size: 1.125rem; line-height: 1.5; }
.reader-rail li,
.reader-rail li span,
.reader-rail li a { font-size: 1rem; }

/* Updating a server-rendered region must not trigger viewport anchoring. */
body:has([data-ajax-region]) { overflow-anchor: none; }
[data-ajax-region] button:hover { transform: none; }