/*
 * cover-studio-base.css — the cover studio, base tier.
 *
 * Everything the Story Studio panels bundle (workshop-ship.css) and the flat
 * dashboard theme (studio-flat.css) used to say about the cover studio, lifted
 * out so the public cover tool and Ship step 2 are one implementation. It
 * loads BEFORE writing-tools.css on both surfaces, as those files did, so
 * ties still resolve the way they always have. Selectors are keyed on
 * #etCoverStudio (templates/tools/cover-studio.php) instead of the dashboard
 * body classes and #etShipWizStep2; the id counts are unchanged on purpose.
 * The late overrides live in cover-studio.css.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   from write-studio/workshop-ship.css
   ═══════════════════════════════════════════════════════════════════════════ */

.et-ship-cover-studio {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 -1.15rem;
    border-top: 1px solid var(--et-border);
    border-bottom: 1px solid var(--et-border);
    background: color-mix(in srgb, var(--et-bg-secondary) 55%, transparent);
    overflow: hidden;
}

.et-ship-cover-studio #coverUploadError {
    margin: 0 1.15rem;
}

.et-ship-cover-studio .et-bcc-ship-host {
    margin: 0;
    padding: 1rem 1.15rem 1.25rem;
}

@media (min-width: 992px) {
    .et-ship-cover-studio .et-bcc-ship-host {
        padding: 1.15rem 1.25rem 1.35rem;
    }
}

.et-ship-cover-block--embedded .et-ship-cover-studio {
    padding: 0;
    border: none;
    background: transparent;
}

/* ── Ship wizard step 2: Author & cover ── */
.et-ship-step2-body {
    /*
     * Vertical space the sticky preview panel spends on everything that is
     * always stacked around the cover: heading strip, add-element row, tip
     * line, saved and autosave lines, plus the rem the panel's own max-height
     * holds back.
     *
     * The properties panel that docks under the cover on selection is
     * deliberately NOT counted here. Counting it — whether by widening this
     * figure or by measuring the stack at runtime — means the artwork resizes
     * the moment you click a line of text on it, which is the one thing this
     * editor must never do: you are aiming at something and it moves. The
     * properties panel scrolls within the sticky column instead, and the cover
     * keeps whatever size the viewport gives it.
     */
    --et-bcc-preview-chrome: 11rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

/* Compact checklist chips in the step header */
.et-ship-step2-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.et-ship-step2-rail > li {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.et-ship-step2-rail__connector {
    display: none;
}

.et-ship-step2-rail__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--et-ws-surface-line, var(--et-border));
    border-radius: 0;
    background: var(--et-dash-surface, color-mix(in srgb, var(--et-bg-secondary) 70%, transparent));
    color: inherit;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.et-ship-step2-rail__item:hover {
    border-color: var(--et-ws-surface-line-strong, color-mix(in srgb, var(--et-accent-primary) 35%, var(--et-border)));
    background: var(--et-dash-surface-hover, color-mix(in srgb, var(--et-accent-primary) 6%, var(--et-bg-secondary)));
}

.et-ship-step2-rail__item:focus-visible {
    outline: 2px solid var(--et-accent-primary);
    outline-offset: 2px;
}

.et-ship-step2-rail__num {
    display: none;
}

.et-ship-step2-rail__text {
    display: contents;
}

.et-ship-step2-rail__label {
    font-weight: 600;
    color: var(--et-text-primary);
}

.et-ship-step2-rail__state {
    font-size: 0.6875rem;
    font-family: var(--et-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    letter-spacing: 0.02em;
    color: var(--et-text-muted);
}

.et-ship-step2-rail__item.is-done {
    border-color: color-mix(in srgb, var(--et-accent-success, #34d399) 40%, var(--et-ws-surface-line, var(--et-border)));
    background: color-mix(in srgb, var(--et-accent-success, #34d399) 7%, var(--et-dash-surface, var(--et-bg-secondary)));
}

.et-ship-step2-rail__item.is-done .et-ship-step2-rail__state {
    color: var(--et-accent-success, #34d399);
    font-weight: 600;
}

.et-ship-step2-rail__item.is-todo .et-ship-step2-rail__state {
    color: var(--et-accent-warning, #f59e0b);
}

.et-ship-step2-rail__item.is-optional {
    opacity: 0.92;
}

.et-ship-step2-rail__item.is-optional .et-ship-step2-rail__state {
    color: var(--et-text-muted, #9aa3b2);
    font-weight: 500;
}

.et-ship-step2-block {
    scroll-margin-top: calc(var(--et-write-sticky-top, 4.75rem) + 0.65rem);
    scroll-margin-bottom: calc(var(--et-ship-wiz-nav-h, 0px) + 0.5rem);
}

.et-ship-step2-block--author .et-ship-step2-block__body {
    gap: 0.5rem;
}

.et-ship-step2-block--studio {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.et-ship-step2-block__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.et-ship-step2-block__body--studio {
    gap: 0;
}

.et-ship-step2-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--et-ws-surface-line, var(--et-border));
    background: var(--et-dash-surface, color-mix(in srgb, var(--et-bg-secondary) 55%, transparent));
}

.et-ship-step2-details__eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--et-text-muted, #9a9aa8);
    line-height: 1.3;
}

.et-ship-step2-details .et-ship-field--author-name .et-form-label,
.et-ship-step2-details .et-bcc-field-stack--ship-grouped .et-form-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--et-text-muted, #9a9aa8);
}

.et-ship-step2-details .et-ship-field--author-name .et-ship-field-hint,
.et-ship-step2-details .et-bcc-field-stack--ship-grouped .et-ship-field-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--et-text-muted);
}

.et-ship-step2-details__save {
    align-self: flex-start;
    white-space: nowrap;
    font-size: 0.75rem;
}

.et-ship-step2-details .et-bcc-field-stack--ship-grouped {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding-top: 0.15rem;
    border-top: 1px solid color-mix(in srgb, var(--et-ws-surface-line, var(--et-border)) 80%, transparent);
}

.et-ship-step2-details .et-bcc-field-stack--ship-grouped .et-bcc-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.et-ship-step2-details .et-bcc-optional-fields--ship {
    margin: 0;
}

@media (max-width: 767.98px) {
    .et-ship-step2-details {
        padding: 0.65rem 0.7rem;
    }
}

@media (min-width: 1400px) {
    /* Inputs left, cover right, in equal halves. */
    .et-ship-step2-body {
        display: grid;
        width: 100%;
        /*
         * Two equal halves: inputs left, artwork right. Sizing the artwork
         * track to the artwork itself was tidier on paper but made the page
         * look lopsided, and it tied the track width to the cover's height
         * budget — so anything that changed the height below the cover moved
         * the column too. Half and half is stable and reads as deliberate.
         */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto auto auto auto;
        grid-template-areas: none;
        justify-content: stretch;
        column-gap: 1.75rem;
        row-gap: 0;
        align-items: start;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio > .et-ship-section-head--step2 {
        grid-column: 1 / -1;
        grid-row: 1;
        min-width: 0;
        width: 100%;
        background: transparent;
        padding: 0.15rem 0 0.55rem;
        margin: 0;
        border: 0;
    }
}

@media (min-width: 1400px) {
    .et-ship-step2-block--pen,
    .et-ship-step2-block--author {
        grid-area: auto;
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
        width: 100%;
        max-width: none;
        align-self: start;
        background: #000;
        padding: 0 0.85rem 0.55rem;
    }
}

@media (min-width: 1400px) {
    .et-ship-step2-block--author-meta {
        grid-area: auto;
        grid-column: 1;
        grid-row: 4;
        min-width: 0;
        width: 100%;
        max-width: none;
        align-self: start;
        background: #000;
        padding: 0.35rem 0.85rem 0.55rem;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio > .et-bcc-sticky-cta {
        grid-column: 1;
        grid-row: 5;
        min-width: 0;
        width: 100%;
        max-width: none;
        align-self: start;
        background: #000;
        padding: 0.55rem 0.85rem 0.85rem;
    }
}

@media (min-width: 1400px) {
    /* Flatten wrappers so preview can share the parent grid with Book details. */
    .et-ship-step2-block--studio,
    .et-ship-step2-block--studio > .et-ship-step2-block__body--studio,
    .et-ship-step2-block--studio .et-ship-cover-studio--step2,
    .et-ship-step2-block--studio .et-bcc-ship-host,
    .et-ship-step2-block--studio .et-bcc--ship,
    .et-ship-step2-block--studio .et-bcc-studio.et-bcc-workspace--ship {
        display: contents;
    }
}

@media (min-width: 1400px) {
    /* Keep upload errors / a11y titles in the controls column (not the sticky rail). */
    .et-ship-step2-block--studio > .visually-hidden,
    .et-ship-step2-block--studio #coverUploadError {
        grid-area: auto;
        grid-column: 1;
        min-width: 0;
    }
}

@media (min-width: 1400px) {
    /*
     * writing-tools.css assigns grid-area: controls|preview on workspace children.
     * After display:contents those names create phantom tracks on step2-body —
     * clear them and pin to numeric columns instead.
     */
    .et-ship-step2-body .et-ship-step2-block--studio .et-bcc-workspace__controls,
    .et-ship-step2-body .et-ship-step2-block--studio .et-bcc-inspector,
    .et-ship-step2-body .et-ship-step2-block--studio .et-bcc-workspace--ship > .et-bcc-workspace__controls {
        grid-area: auto;
        grid-column: 1;
        grid-row: 3;
        min-width: 0;
        align-self: start;
        width: 100%;
        max-width: none;
        padding: 0.55rem 0.85rem 0.75rem;
        background: #000;
    }
}

@media (min-width: 1400px) {
    /*
     * Sticky preview must not inflate row 1 to the cover height — that left a
     * ~280px dead gap under Book details. Zero the column's intrinsic height and
     * stick the inner panel instead (classic spanning-sidebar pattern).
     */
    .et-ship-step2-body .et-ship-step2-block--studio .et-bcc-preview-col,
    .et-ship-step2-body .et-ship-step2-block--studio .et-bcc-workspace--ship > .et-bcc-preview-col {
        grid-area: auto;
        grid-column: 2;
        grid-row: 2 / -1;
        position: relative;
        top: auto;
        z-index: 3;
        align-self: stretch;
        height: 0;
        min-height: 100%;
        min-width: 0;
        width: 100%;
        max-height: none;
        overflow: visible;
    }
}

@media (min-width: 1400px) {
    .et-ship-step2-block--studio .et-bcc-preview-panel {
        position: sticky;
        top: calc(var(--et-write-sticky-top, 4.75rem) + 0.5rem);
        width: 100%;
        max-width: none;
        max-height: calc(100vh - var(--et-write-sticky-top, 4.75rem) - var(--et-ship-wiz-nav-h, 4.5rem) - 1rem);
        max-height: calc(100dvh - var(--et-write-sticky-top, 4.75rem) - var(--et-ship-wiz-nav-h, 4.5rem) - 1rem);
        overflow: visible;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        padding: 0;
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        order: unset;
        padding: 0.55rem 0.85rem 0.85rem;
        background: #000;
        border-top: 1px solid color-mix(in srgb, var(--et-ws-surface-line, var(--et-border)) 88%, transparent);
        border-bottom: none;
    }
}

@media (min-width: 1400px) {
    .et-ship-cover-studio--step2 .et-bcc-card--art {
        order: 1;
    }
}

@media (min-width: 1400px) {
    .et-ship-cover-studio--step2 .et-bcc-card--text {
        order: 3;
    }
}

@media (min-width: 1400px) {
    .et-ship-cover-studio--step2 .et-bcc:not(.et-bcc--has-art) .et-bcc-card--text {
        display: none;
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__btn {
        width: 100%;
        min-height: 2.85rem;
        justify-content: center;
        gap: 0.35rem;
        border-radius: 0;
        font-size: 0.875rem;
        transition: opacity 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__btn i {
        font-size: 1.0625rem !important;
        line-height: 1;
        width: 1.0625rem;
        margin: 0;
    }
}

@media (min-width: 1400px) {
    /* Soft-disabled stays clickable so we can focus the missing field. */
    #et-bcc-sticky-cta .et-bcc-sticky-cta__btn:disabled,
    #et-bcc-sticky-cta .et-bcc-sticky-cta__btn[aria-disabled="true"],
    #et-bcc-sticky-cta .et-bcc-sticky-cta__btn.is-disabled {
        opacity: 0.45;
        filter: grayscale(0.4);
        cursor: not-allowed;
        box-shadow: none;
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__btn:disabled {
        pointer-events: none;
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__btn.is-disabled:not(:disabled) {
        cursor: pointer;
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__hint {
        margin: 0;
        font-size: 0.75rem;
        line-height: 1.35;
        color: var(--et-text-muted, #9aa3b2);
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__hint[hidden] {
        display: none !important;
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__time {
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.3;
        color: var(--et-text-muted, #9aa3b2);
        opacity: 0.85;
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta.is-blocked .et-bcc-sticky-cta__time {
        display: none;
    }
}

@media (min-width: 1400px) {
    #et-bcc-sticky-cta.is-ready .et-bcc-sticky-cta__time {
        display: block;
        color: var(--et-text-secondary, #c5cdd8);
        opacity: 1;
    }
}

@media (min-width: 1400px) {
    .et-ship-step2-block--studio .et-bcc-preview-wrap {
        flex: 0 0 auto;
        min-height: auto;
        /* Use viewport budget (not % of parent) so width can shrink with max-height
           and aspect-ratio — width:auto alone collapses an empty box to 0. */
        --et-bcc-preview-budget: calc(
            100dvh - var(--et-write-sticky-top, 4.75rem) - var(--et-ship-wiz-nav-h, 4.5rem) - var(--et-bcc-preview-chrome, 11rem)
        );
        width: min(100%, calc(var(--et-bcc-preview-budget) * 1600 / 2560));
        max-width: 100%;
        height: auto;
        max-height: var(--et-bcc-preview-budget);
        aspect-ratio: 1600 / 2560;
        margin-inline: auto;
        margin-bottom: 0.15rem;
        align-self: center;
    }
}

@media (min-width: 1400px) {
    /* Subtle divider between Book details and Cover studio */
    .et-ship-step2-body .et-ship-step2-block--studio .et-bcc-workspace__controls,
    .et-ship-step2-body .et-ship-step2-block--studio .et-bcc-inspector {
        border-top: 1px solid color-mix(in srgb, var(--et-ws-surface-line, var(--et-border)) 100%, rgba(255, 255, 255, 0.14));
        padding-top: 0.7rem;
        margin-top: 0.2rem;
    }
}

@media (min-width: 1400px) {
    /* Fixed overlays must not steal auto-placement tracks after display:contents. */
    .et-ship-step2-block--studio .et-bcc-float-preview {
        grid-area: unset;
        grid-column: unset;
        grid-row: unset;
    }
}

@media (min-width: 1400px) {
    .et-ship-step2-block--studio .et-bcc-crop-modal,
    .et-ship-step2-block--studio .et-bcc-preview-modal {
        grid-area: unset;
        grid-column: unset;
        grid-row: unset;
        justify-self: unset;
        align-self: unset;
        position: fixed !important;
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        z-index: 1200;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio > .et-ship-step2-validation {
        grid-area: auto;
        grid-column: 1;
    }
}

@media (min-width: 1400px) {
    /* Nested workspace grid is unused once wrappers are flattened. */
    .et-ship-cover-studio--step2 .et-bcc-studio.et-bcc-workspace--ship {
        grid-template-columns: unset;
        grid-template-areas: none;
        gap: 0;
    }
}

/* Compact project-cover status above the studio */
.et-ship-step2-cover-bar {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--et-ws-surface-line, var(--et-border));
    background: var(--et-dash-surface, color-mix(in srgb, var(--et-bg-secondary) 55%, transparent));
}

.et-ship-step2-cover-bar .et-ship-step2-preview {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    text-align: left;
}

.et-ship-step2-cover-bar .et-ship-step2-preview__frame {
    width: 4.5rem;
    max-width: 4.5rem;
    margin: 0;
    flex-shrink: 0;
    aspect-ratio: 1600 / 2560;
}

.et-ship-step2-cover-bar .et-ship-step2-preview__empty {
    padding: 0.35rem;
    gap: 0;
}

.et-ship-step2-cover-bar .et-ship-step2-preview__empty i {
    font-size: 1rem;
}

.et-ship-step2-cover-bar .et-ship-step2-preview__meta {
    flex: 1 1 12rem;
    min-width: 0;
    margin-top: 0;
    text-align: left;
}

.et-ship-step2-preview__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.55rem;
    margin-bottom: 0.25rem;
}

.et-ship-step2-preview__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--et-text-primary);
    font-family: var(--et-font-sans, 'DM Sans', system-ui, sans-serif);
}

.et-ship-step2-cover-bar .et-ship-step2-preview__saved,
.et-ship-step2-cover-bar .et-ship-step2-preview__row {
    justify-content: flex-start;
}

.et-ship-step2-cover-bar .et-ship-step2-preview__hint {
    margin-top: 0.15rem;
}

.et-ship-step2-status__library {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
}

.et-ship-step2-status__library.d-none {
    display: none !important;
}

/* Legacy layout hooks (kept for older markup / step 1 reuse) */
.et-ship-step2-layout {
    display: block;
}

.et-ship-step2-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.et-ship-step2-status {
    display: none;
}

@media (max-width: 575.98px) {
    .et-ship-section-head__title-row--step2 .et-ship-step2-rail {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .et-ship-section-head__title-row--step2 .et-ship-step2-rail > li {
        flex: 1 1 calc(50% - 0.2rem);
    }
}

@media (max-width: 575.98px) {
    .et-ship-section-head__title-row--step2 .et-ship-step2-rail__item {
        width: 100%;
        justify-content: space-between;
    }
}

.et-ship-step2-preview__frame:disabled,
.et-ship-step2-preview__frame[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.85;
}

.et-ship-step2-preview__frame[aria-disabled="true"]:not(.has-cover) {
    cursor: pointer;
    opacity: 1;
}

.et-ship-step2-preview__frame:disabled:hover,
.et-ship-step2-preview__frame[aria-disabled="true"]:not(.has-cover):hover {
    border-color: color-mix(in srgb, var(--et-accent-primary) 55%, var(--et-ws-surface-line, var(--et-border)));
}

.et-ship-step2-validation {
    padding: 0.7rem 0.85rem 0.7rem 0.95rem;
    border: 1px solid color-mix(in srgb, var(--et-accent-warning, #f59e0b) 40%, var(--et-ws-surface-line, var(--et-border)));
    border-left: 3px solid var(--et-accent-warning, #f59e0b);
    background: color-mix(in srgb, var(--et-accent-warning, #f59e0b) 8%, var(--et-bg-primary));
    color: var(--et-text-primary);
    font-size: 0.875rem;
    line-height: 1.45;
    border-radius: 0;
}

.et-ship-step2-validation::before {
    content: none;
}

.et-ship-step2-top {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 0.85rem;
    align-items: stretch;
}

@media (max-width: 991.98px) {
    .et-ship-step2-top {
        grid-template-columns: 1fr;
    }
}

.et-ship-step2-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--et-ws-surface-line, var(--et-border));
    border-radius: 0;
    background: var(--et-bg-primary);
    min-height: 0;
}

.et-ship-step2-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--et-ws-surface-line, var(--et-border));
    background: var(--et-dash-surface, color-mix(in srgb, var(--et-bg-secondary) 55%, transparent));
}

.et-ship-step2-card__head--compact {
    padding-bottom: 0.7rem;
}

.et-ship-step2-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    font-size: 0.8125rem;
    border-radius: 0;
    color: var(--et-ws-accent, var(--et-accent-primary));
    background: color-mix(in srgb, var(--et-ws-accent, var(--et-accent-primary)) 12%, var(--et-dash-surface-strong, transparent));
    border-left: 2px solid var(--et-ws-accent, var(--et-accent-primary));
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}

.et-ship-step2-card__icon--cover {
    color: var(--et-ws-accent, var(--et-accent-primary));
    background: color-mix(in srgb, var(--et-ws-accent, var(--et-accent-primary)) 12%, var(--et-dash-surface-strong, transparent));
    border-left-color: var(--et-ws-accent, var(--et-accent-primary));
}

.et-ship-step2-card__title {
    margin: 0 0 0.15rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--et-text-primary);
    font-family: var(--et-font-sans, 'DM Sans', system-ui, sans-serif);
}

.et-ship-step2-card__lead {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--et-text-muted);
}

.et-ship-step2-card__body {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1 1 auto;
}

.et-ship-step2-author-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5rem;
    gap: 0.75rem 1rem;
    align-items: start;
}

.et-ship-step2-author-grid--optional {
    grid-template-columns: 6.5rem minmax(0, 1fr);
}

@media (max-width: 575.98px) {
    .et-ship-step2-author-grid,
    .et-ship-step2-author-grid--optional {
        grid-template-columns: 1fr;
    }
}

/* Step 2: pen name first; cover text + copyright follow the studio on mobile */
.et-ship-step2-block--pen {
    scroll-margin-top: calc(var(--et-write-sticky-top, 4.75rem) + 0.65rem);
}

.et-ship-step2-block--author-meta {
    scroll-margin-top: calc(var(--et-write-sticky-top, 4.75rem) + 0.65rem);
}

.et-ship-step2-details--pen {
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
}

@media (min-width: 992px) {
    .et-ship-step2-block--pen {
        margin-top: 0;
        padding-top: 0;
    }
}

@media (min-width: 992px) {
    .et-ship-step2-block--author-meta {
        margin-top: 0;
        padding-top: 0;
    }
}

/* Legacy alias — pen + meta replaced the single author sticky card */
.et-ship-step2-block--author-sticky {
    margin-top: 1rem;
    padding-top: 0.75rem;
}

@media (min-width: 992px) {
    /*
     * Align Pen name card top edge with Your cover panel.
     * Sticky-bottom chrome + extra margin previously pushed Pen name down.
     */
    .et-ship-step2-block--author-sticky {
        margin-top: 0;
        padding-top: 0;
        position: static;
        z-index: auto;
        background: none;
    }
}

.et-ship-step2-block--author-sticky .et-ship-step2-details {
    border: 1px solid var(--et-ws-surface-line, rgba(255, 255, 255, 0.08));
    border-radius: 0;
    padding: 0.7rem 0.75rem 0.85rem;
    background: color-mix(in srgb, var(--et-ws-surface, #12141a) 92%, #000);
}

.et-ship-collapsible--step2 {
    margin-top: 0.15rem;
}

.et-ship-step2-sync-note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--et-text-muted);
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--et-ws-surface-line, var(--et-border));
    border-radius: 0;
    background: var(--et-dash-surface, color-mix(in srgb, var(--et-bg-secondary) 50%, transparent));
}

.et-ship-step2-sync-note i {
    margin-top: 0.15rem;
    font-size: 0.7rem;
    opacity: 0.75;
}

.et-ship-step2-preview {
    align-items: flex-start;
    text-align: left;
}

.et-ship-step2-preview__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 11rem;
    aspect-ratio: 1600 / 2560;
    margin: 0 auto;
    padding: 0;
    border: 1px dashed color-mix(in srgb, var(--et-ws-surface-line-strong, var(--et-border)) 85%, var(--et-accent-primary));
    border-radius: 0;
    background: var(--et-dash-surface, color-mix(in srgb, var(--et-bg-input, var(--et-bg-secondary)) 90%, transparent));
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.et-ship-step2-preview__frame.has-cover {
    border-style: solid;
    border-color: var(--et-ws-surface-line-strong, var(--et-border));
    box-shadow: none;
}

.et-ship-step2-preview__frame:hover,
.et-ship-step2-preview__frame.has-cover:hover {
    border-color: color-mix(in srgb, var(--et-accent-primary) 55%, var(--et-ws-surface-line, var(--et-border)));
}

.et-ship-step2-preview__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.et-ship-step2-preview__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem;
    font-size: 0.8125rem;
    color: var(--et-text-muted);
    text-align: center;
}

.et-ship-step2-preview__empty i {
    font-size: 1.35rem;
    opacity: 0.55;
    color: var(--et-accent-primary);
}

.et-ship-step2-preview__empty-hint {
    font-size: 0.6875rem;
    opacity: 0.85;
}

.et-ship-step2-preview__meta {
    width: 100%;
    margin-top: 0.15rem;
}

.et-ship-step2-preview__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.35rem;
}

.et-ship-step2-preview__dims {
    font-size: 0.75rem;
    font-family: var(--et-font-mono, ui-monospace, monospace);
    color: var(--et-text-muted);
}

.et-ship-step2-preview__saved {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.65rem;
    margin-bottom: 0.35rem;
}

.et-ship-step2-preview__saved.d-none {
    display: none !important;
}

.et-ship-step2-preview__hint {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--et-text-muted);
}

/* ── Step 2 cover designer (embedded BCC) ── */
.et-ship-step2-designer {
    scroll-margin-top: calc(var(--et-write-sticky-top, 4.75rem) + 0.75rem);
    scroll-margin-bottom: calc(var(--et-ship-wiz-nav-h, 0px) + 0.5rem);
}

.et-ship-step2-card--author,
.et-ship-step2-card--preview {
    scroll-margin-top: calc(var(--et-write-sticky-top, 4.75rem) + 0.5rem);
}

.et-ship-step2-card--designer {
    margin-top: 0.15rem;
}

.et-ship-step2-card__head--designer {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
}

.et-ship-step2-card__head--designer .et-ship-step2-designer__copy {
    flex: 1 1 12rem;
    min-width: 0;
}

.et-ship-step2-designer__open {
    flex-shrink: 0;
    margin-left: auto;
}

.et-ship-step2-designer__body {
    padding-top: 0;
    gap: 0;
}

.et-ship-cover-studio--step2 {
    /* contain/overflow boxes break sticky once wrappers flatten on desktop. */
    contain: none;
    overflow: visible;
    margin: 0;
    border: none;
    background: transparent;
}

@media (max-width: 991.98px) {
    .et-ship-cover-studio--step2 {
        contain: none;
        overflow: visible;
    }
}

.et-ship-cover-studio--step2 .et-bcc-ship-host {
    padding: 0;
}

.et-ship-cover-studio--step2 #coverUploadError {
    margin: 0 0 0.75rem;
}

.et-ship-cover-studio--step2 .et-bcc--ship-compact {
    gap: 0;
}

.et-ship-cover-studio--step2 .et-bcc-topbar--ship {
    display: none !important;
}

/*
 * Ship step 2 cover studio:
 * controls left (readable forms) + sticky cover preview right.
 * Match listing/ship zinc chrome — not a 280px tools-rail squeeze.
 */
.et-ship-cover-studio--step2 .et-bcc-studio.et-bcc-workspace--ship {
    gap: 1rem 1.25rem;
    padding: 0;
    border: none;
}

.et-ship-cover-studio--step2 .et-bcc-inspector {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    border: none;
    background: transparent;
}

.et-ship-cover-studio--step2 .et-bcc-inspector__chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0 0 0.55rem;
    margin-bottom: 0;
    border-bottom: none;
    background: transparent;
    position: static;
}

.et-ship-cover-studio--step2 .et-bcc-inspector__brand {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--et-text-muted, #9a9aa8);
}

.et-ship-cover-studio--step2 .et-bcc-inspector__reset {
    flex-shrink: 0;
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-card {
    padding: 0.85rem 0;
    border-top: none;
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-card--art {
    border-bottom: 1px solid var(--et-ws-surface-line, rgba(255, 255, 255, 0.06));
    margin-bottom: 0.15rem;
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-card--art .et-bcc-card__head {
    padding: 0 0 0.55rem;
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-card__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--et-text-muted);
}

.et-ship-cover-studio--step2 .et-bcc-art-replace {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    margin: 0;
    padding: 0.15rem 0 0.35rem;
    border: none;
    background: transparent;
}

.et-ship-cover-studio--step2 .et-bcc-art-replace__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--et-dash-accent-info, #4fc7ff);
    margin: 0 0.35rem 0 0;
    flex: 0 0 auto;
}

.et-ship-cover-studio--step2 .et-bcc-art-replace .btn {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    justify-content: center;
}

.et-ship-cover-studio--step2 .et-bcc-art-replace .btn i {
    margin-right: 0.3rem;
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 0.85rem;
    padding: 0 0 0.55rem;
    border-bottom: 1px solid var(--et-ws-surface-line, rgba(255, 255, 255, 0.06));
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    font-family: var(--et-font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn i {
    display: inline-block;
    opacity: 0.75;
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn.is-active {
    color: var(--et-text-primary);
    background: color-mix(in srgb, var(--et-bg-secondary) 85%, transparent);
    border-color: var(--et-ws-surface-line, rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 -2px 0 var(--et-dash-accent-teal, #2dd4bf);
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn:hover {
    background: color-mix(in srgb, var(--et-bg-secondary) 65%, transparent);
    border-color: var(--et-ws-surface-line, rgba(255, 255, 255, 0.06));
}

/*
 * The controls track takes whatever width the cover track does not need, which
 * on a wide monitor is a lot. Cap for readability, but not so tightly that the
 * blocks that do stretch (author meta, pen name) leave the capped ones looking
 * stranded halfway across the column.
 */
.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-field-stack,
.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tab-panel {
    max-width: 56rem;
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-element-controls {
    max-width: none;
}

@media (min-width: 768px) {
    .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-element-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-form-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.et-ship-cover-studio--step2 .et-bcc-preview-col {
    min-width: 0;
}

.et-ship-cover-studio--step2 .et-bcc-preview-panel {
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0.7rem 0.75rem 0.85rem;
    background: var(--et-dash-surface, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--et-ws-surface-line, rgba(255, 255, 255, 0.06));
}

@media (min-width: 1400px) {
    .et-ship-cover-studio--step2 .et-bcc-preview-panel {
        max-width: none;
        width: 100%;
        margin-inline: auto;
        background: transparent;
        border: 0;
        padding: 0;
    }
}

.et-ship-cover-studio--step2 .et-bcc-preview-toolbar {
    margin-bottom: 0.35rem;
    width: 100%;
}

.et-ship-cover-studio--step2 .et-bcc-preview-heading {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.et-ship-cover-studio--step2 .et-bcc-preview-wrap {
    --et-bcc-preview-budget: calc(
        100dvh - var(--et-write-sticky-top, 4.75rem) - var(--et-ship-wiz-nav-h, 4.5rem) - var(--et-bcc-preview-chrome, 11rem)
    );
    width: min(100%, calc(var(--et-bcc-preview-budget) * 1600 / 2560));
    max-width: 100%;
    height: auto;
    max-height: var(--et-bcc-preview-budget);
    margin-inline: auto;
    aspect-ratio: 1600 / 2560;
    border-radius: 0;
    align-self: center;
}

@media (min-width: 1400px) {
    /*
     * The reserve has to cover everything permanently stacked around the cover
     * inside the sticky panel — heading strip, "Add text / Add separator" row,
     * tip line, status lines — plus the 1rem the panel itself gives back. At
     * 4.25rem it did not, so the panel was permanently taller than its own
     * max-height and therefore permanently a scroll container; because it is
     * sticky it also sat under the pointer the whole way down the page, so
     * scrolling back up spent its first several turns unwinding the panel
     * instead of moving the page. Shared with the stacked breakpoint as
     * --et-bcc-preview-chrome. Nothing that appears only on selection belongs
     * in it — see the note where it is defined.
     */
    .et-ship-step2-block--studio .et-bcc-preview-wrap,
    .et-ship-cover-studio--step2 .et-bcc-preview-wrap {
        --et-bcc-preview-budget: calc(
            100dvh - var(--et-write-sticky-top, 4.75rem) - var(--et-ship-wiz-nav-h, 4.5rem) - var(--et-bcc-preview-chrome, 11rem)
        );
        width: min(100%, calc(var(--et-bcc-preview-budget) * 1600 / 2560));
        max-width: 100%;
        max-height: var(--et-bcc-preview-budget);
        height: auto;
        /* Centred, because the track is now half the row rather than a sleeve
           cut to the cover: hard left would read as a layout mistake. */
        margin-inline: auto;
        aspect-ratio: 1600 / 2560;
        align-self: start;
        flex: 0 0 auto;
        flex-shrink: 0;
        min-height: auto;
    }
}

.et-ship-cover-studio--step2 .et-bcc-preview-saved,
.et-ship-cover-studio--step2 .et-bcc-autosave {
    width: 100%;
    margin-inline: 0;
}

.et-ship-cover-studio--step2 .et-bcc-topbar--ship .et-bcc-workflow {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    padding-bottom: 0.1rem;
}

.et-ship-cover-studio--step2 .et-bcc-topbar--ship .et-bcc-workflow::-webkit-scrollbar {
    display: none;
}

.et-ship-cover-studio--step2 .et-bcc-workflow__step {
    flex: 0 0 auto;
    min-width: 5.25rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.8125rem;
    border-radius: 0;
    border-color: var(--et-border);
    background: color-mix(in srgb, var(--et-bg-secondary) 70%, transparent);
}

.et-ship-cover-studio--step2 .et-bcc-topbar__actions .btn {
    white-space: nowrap;
    min-height: 2.125rem;
}

.et-ship-cover-studio--step2 .et-bcc-card {
    border: none;
    border-top: 1px solid var(--et-border);
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    overflow: visible;
}

.et-ship-cover-studio--step2 .et-bcc-card__head {
    display: none;
}

.et-ship-cover-studio--step2 .et-bcc-card--art .et-bcc-card__head {
    display: block;
    padding: 0 0 0.65rem;
    margin: 0;
    border: none;
    background: transparent;
}

.et-ship-cover-studio--step2 .et-bcc-card--art .et-bcc-card__title {
    display: none;
}

.et-ship-cover-studio--step2 .et-bcc-card--art .et-bcc-quota-hint {
    margin: 0;
    font-size: 0.75rem;
}

.et-ship-cover-studio--step2 .et-bcc-art-compose .et-bcc-art-grid,
.et-ship-cover-studio--step2 .et-bcc-art-compose .et-bcc-actions,
.et-ship-cover-studio--step2 .et-bcc-card > .et-bcc-studio-tabs,
.et-ship-cover-studio--step2 .et-bcc-card > .et-bcc-status {
    padding-left: 0;
    padding-right: 0;
}

.et-ship-cover-studio--step2 .et-bcc-art-compose .et-bcc-art-grid {
    padding-top: 0.85rem;
}

.et-ship-cover-studio--step2 .et-bcc-art-compose .et-bcc-actions {
    padding-bottom: 0.85rem;
    margin-bottom: 0;
}

.et-ship-cover-studio--step2 .et-bcc-card > .et-bcc-studio-tabs {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.et-ship-cover-studio--step2 .et-bcc-ship-sync-note {
    margin: 0 0 0.75rem;
    border-radius: 0;
}

.et-ship-cover-studio--step2 .et-bcc-prompt-chips {
    flex-wrap: wrap;
    overflow: visible;
    max-height: none;
    gap: 0.3rem;
    padding-bottom: 0;
}

.et-ship-cover-studio--step2 .et-bcc-prompt-chips .btn,
.et-ship-cover-studio--step2 .et-bcc-prompt-chip {
    flex-shrink: 0;
}

.et-ship-cover-studio--step2 .et-bcc-studio {
    gap: 0 1rem;
    padding: 0;
    border-top: none;
}

.et-ship-cover-studio--step2 .et-bcc-preview-panel {
    border-radius: 0;
}

/* Genre overlay templates: two readable columns, not a cramped 3-up */
.et-ship-cover-studio--step2 .et-bcc-templates,
.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-templates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.et-ship-cover-studio--step2 .et-bcc-templates--genre,
.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-templates--genre {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-template-card__inner strong,
.et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-template-card__inner small {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.et-ship-cover-studio--step2 .et-bcc-preview-col .et-bcc-download-actions {
    width: 100%;
    max-width: none;
    margin-top: 0.65rem;
    padding: 0;
    gap: 0.5rem;
}

.et-ship-cover-studio--step2 .et-bcc-card--text .et-bcc-step2-wait {
    margin: 0 0 0.75rem;
}

.et-ship-cover-studio--step2 .et-bcc-card--text .et-bcc-ship-sync-note {
    margin-bottom: 0.75rem;
}

.et-ship-cover-studio--step2 .et-bcc-download-actions .btn-lg {
    min-height: 2.75rem;
}

/* Ship step 2: flatten BCC chrome to match listing cards (no purple pills/glows) */
.et-ship-cover-studio--step2 .et-bcc-workflow__step {
    border-radius: 0;
    background: color-mix(in srgb, var(--et-bg-secondary) 70%, transparent);
}

.et-ship-cover-studio--step2 .et-bcc-workflow__step:hover {
    border-color: color-mix(in srgb, var(--et-accent-primary) 35%, var(--et-border));
    color: var(--et-text-primary);
}

.et-ship-cover-studio--step2 .et-bcc-workflow__step:focus-visible {
    outline: 2px solid var(--et-accent-primary);
    outline-offset: 2px;
}

.et-ship-cover-studio--step2 .et-bcc-workflow__step.is-current {
    border-color: var(--et-border);
    background: color-mix(in srgb, var(--et-bg-secondary) 90%, transparent);
    box-shadow: inset 0 -2px 0 var(--et-text-primary);
    color: var(--et-text-primary);
}

.et-ship-cover-studio--step2 .et-bcc-workflow__step.is-complete {
    border-color: color-mix(in srgb, var(--et-accent-success) 45%, var(--et-border));
    background: color-mix(in srgb, var(--et-accent-success) 8%, var(--et-bg-secondary));
}

.et-ship-cover-studio--step2 .et-bcc-workflow__num {
    border-radius: 0;
    background: var(--et-bg-primary);
    border: 1px solid var(--et-border);
}

.et-ship-cover-studio--step2 .et-bcc-workflow__step.is-current .et-bcc-workflow__num {
    background: var(--et-text-primary);
    color: var(--et-bg-primary);
    border-color: var(--et-text-primary);
}

.et-ship-cover-studio--step2 .et-bcc-workflow__step.is-complete .et-bcc-workflow__num {
    background: var(--et-accent-success);
    border-color: color-mix(in srgb, var(--et-accent-success) 70%, var(--et-border));
    color: var(--et-on-accent, #06110f);
}

.et-ship-cover-studio--step2 .et-bcc-tabs__btn {
    border-radius: 0;
    border-color: transparent;
}

.et-ship-cover-studio--step2 .et-bcc-tabs__btn:hover {
    background: color-mix(in srgb, var(--et-bg-secondary) 65%, transparent);
    border-color: var(--et-border);
}

.et-ship-cover-studio--step2 .et-bcc-tabs__btn.is-active {
    color: var(--et-text-primary);
    background: color-mix(in srgb, var(--et-bg-secondary) 85%, transparent);
    border-color: var(--et-border);
    box-shadow: inset 0 -2px 0 var(--et-text-primary);
}

.et-ship-cover-studio--step2 .et-bcc-field-group__label,
.et-ship-cover-studio--step2 .et-bcc-genre-hint,
.et-ship-cover-studio--step2 .et-bcc-editable-hint,
.et-ship-cover-studio--step2 .et-bcc-download-hint {
    color: var(--et-text-muted);
}

.et-ship-cover-studio--step2 .et-bcc-optional-fields {
    border-radius: 0;
    background: color-mix(in srgb, var(--et-bg-secondary) 45%, transparent);
}

.et-ship-cover-studio--step2 .et-bcc-template-card__inner {
    border-radius: 0;
}

.et-ship-cover-studio--step2 .et-bcc-template-card input:checked + .et-bcc-template-card__inner {
    border-color: var(--et-text-primary);
    box-shadow: none;
}

.et-ship-cover-studio--step2 .et-bcc-template-card:hover .et-bcc-template-card__inner {
    border-color: color-mix(in srgb, var(--et-text-primary) 35%, var(--et-border));
}

.et-ship-cover-studio--step2 .et-bcc-template-card--recommended .et-bcc-template-card__inner {
    border-color: var(--et-border);
    box-shadow: none;
}

.et-ship-cover-studio--step2 .et-bcc-template-card--recommended:not(:has(input:checked)) .et-bcc-template-card__inner {
    border-color: var(--et-border);
    border-style: dashed;
}

.et-ship-cover-studio--step2 .et-bcc-template-card__genre {
    border-radius: 0;
    color: var(--et-text-secondary);
    background: color-mix(in srgb, var(--et-bg-secondary) 80%, transparent);
    border: 1px solid var(--et-border);
}

.et-ship-cover-studio--step2 .et-bcc-template-card--recommended .et-bcc-template-card__genre {
    background: color-mix(in srgb, var(--et-bg-secondary) 90%, transparent);
    color: var(--et-text-primary);
    border-color: var(--et-border);
}

.et-ship-cover-studio--step2 .et-bcc-template-card--recommended:not(:has(input:checked)) .et-bcc-template-card__genre {
    background: color-mix(in srgb, var(--et-bg-secondary) 80%, transparent);
    color: var(--et-text-secondary);
}

.et-ship-cover-studio--step2 .et-bcc-step2-wait {
    border-radius: 0;
    background: color-mix(in srgb, var(--et-bg-secondary) 50%, transparent);
    border: 1px dashed var(--et-border);
}

.et-ship-cover-studio--step2 .et-bcc-step2-wait i {
    color: var(--et-text-muted);
}

.et-ship-cover-studio--step2 .et-bcc-ship-sync-note {
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--et-ws-surface-line, var(--et-border));
    border-style: solid;
    background: transparent;
    color: var(--et-text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.et-ship-cover-studio--step2 .et-bcc-ship-sync-note i {
    opacity: 0.7;
}

.et-ship-cover-studio--step2 .et-bcc-studio--has-art .et-bcc-preview-panel {
    border-color: var(--et-border);
    box-shadow: none;
}

.et-ship-cover-studio--step2 .et-bcc-preview-wrap {
    border-radius: 0;
}

.et-ship-cover-studio--step2 .et-bcc-quick-btn {
    border-radius: 0;
}

.et-ship-cover-studio--step2 .et-bcc-quick-btn:hover {
    border-color: color-mix(in srgb, var(--et-text-primary) 30%, var(--et-border));
}

.et-ship-cover-studio--step2 .et-bcc-quick-btn.is-on {
    border-color: var(--et-text-primary);
    background: color-mix(in srgb, var(--et-bg-secondary) 85%, transparent);
    color: var(--et-text-primary);
}

.et-ship-cover-studio--step2 .et-bcc-el-control {
    border-radius: 0;
}

.et-ship-cover-studio--step2 .et-bcc-el-control--active {
    border-color: var(--et-text-primary);
    box-shadow: none;
}

.et-ship-cover-studio--step2 .et-bcc-editable-input:focus {
    border-color: var(--et-border);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--et-text-primary) 18%, transparent);
}

.et-ship-cover-studio--step2 .et-bcc-prompt-chip {
    border-radius: 0;
    border-color: var(--et-border);
    background: color-mix(in srgb, var(--et-bg-secondary) 55%, transparent);
}

.et-ship-cover-studio--step2 .et-bcc-prompt-chip:hover {
    border-color: color-mix(in srgb, var(--et-text-primary) 35%, var(--et-border));
    background: color-mix(in srgb, var(--et-bg-secondary) 80%, transparent);
    color: var(--et-text-primary);
}

.et-ship-cover-studio--step2 .et-bcc-art-replace {
    border-radius: 0;
}

.et-ship-cover-studio--step2 .et-bcc-quota-hint {
    border-radius: 0;
    background: color-mix(in srgb, var(--et-bg-secondary) 50%, transparent);
    border-color: var(--et-border);
}

.et-ship-cover-studio--step2 .et-bcc-preview-tips li::before {
    color: var(--et-text-muted);
}

.et-ship-cover-studio--step2 .et-bcc-status:not(:empty):not(.is-error):not(.is-success) {
    color: var(--et-text-muted);
}

@media (min-width: 1400px) {
    /* Sticky lives on the panel — see step2-body preview-col height:0 rules above. */
    .et-ship-step2-block--studio .et-bcc-preview-panel,
    .et-ship-cover-studio--step2 .et-bcc-workspace--ship .et-bcc-preview-panel {
        overflow: auto;
        scrollbar-width: thin;
    }
}

.et-ship-cover-studio--step2 .et-bcc-preview-saved {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--et-border);
}

.et-ship-cover-studio--step2 .et-bcc-preview-saved .et-badge-success {
    border-radius: 0;
}

.et-ship-cover-studio--step2 .et-bcc-preview-saved.is-draft .et-badge-success {
    display: inline-flex;
}

.et-ship-cover-studio--step2 .et-bcc-preview-saved:not(.d-none) ~ .et-bcc-autosave.is-saved {
    display: none !important;
}

.et-ship-cover-studio--step2 .et-bcc-placeholder {
    padding: 1.25rem 1rem;
}

.et-ship-cover-studio--step2 .et-bcc-placeholder span {
    max-width: 14rem;
}

.et-ship-cover-studio--step2 .et-bcc-layout,
.et-ship-cover-studio--step2 .et-bcc-layout-tools {
    border-radius: 0;
}

#etCoverStudio #etCoverStudio .et-bcc-float-preview:not([hidden]) {
    /* Keep float preview when the tool shows it — Layout discoverability matches Write tools */
    display: flex !important;
}

.et-ship-step2-preview__frame.is-draft-preview {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--et-accent-warm, #c9a227) 35%, var(--et-border));
}

.et-ship-step2-preview__saved.is-draft #etCoverSavedBadge {
    display: none !important;
}

.et-ship-step2-preview__saved.is-set #etCoverDraftBadge {
    display: none !important;
}

.et-bcc--ship .et-bcc-workflow__num {
    font-size: 0.7rem;
}

.et-bcc--ship .et-bcc-workflow__num i {
    font-size: 0.7rem;
}

@media (min-width: 1400px) {
    /* Sticky is on .et-bcc-preview-panel — do not re-stick the column (inflates row 1). */
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-col,
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-col {
        position: relative;
        top: auto;
        height: 0;
        min-height: 100%;
        max-height: none;
        align-self: stretch;
        overflow: visible;
    }
}

@media (max-width: 1399.98px) {
    /* Compact flow: pen name → describe art → generate → preview → cover text → typography */
    .et-ship-step2-body {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 1399.98px) {
    #etCoverStudio > .et-ship-section-head--step2 {
        order: 0;
        background: transparent;
        padding: 0.15rem 0 0.55rem;
        margin: 0;
        border: 0;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-step2-block--pen {
        order: 1;
        background: #000;
        padding: 0.55rem 0.85rem;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-step2-block--studio {
        order: 2;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-step2-block--author-meta {
        order: 3;
        margin-top: 0;
        padding-top: 0;
        background: #000;
        padding: 0.55rem 0.85rem;
    }
}

@media (max-width: 1399.98px) {
    #etCoverStudio > .et-bcc-sticky-cta {
        order: 4;
        width: 100%;
    }
}

@media (max-width: 1399.98px) {
    #etCoverStudio > .et-ship-step2-validation {
        order: 5;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-studio.et-bcc-workspace--ship {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-workspace__controls,
    .et-ship-cover-studio--step2 .et-bcc-preview-col {
        display: contents;
    }
}

@media (max-width: 1399.98px) {
    /* Keep a real box so overlay menu/add sit under the canvas, not over it. */
    .et-ship-cover-studio--step2 .et-bcc-preview-panel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-inspector__chrome {
        order: 0;
        display: flex;
        justify-content: flex-end;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-card--art {
        order: 1;
    }
}

@media (max-width: 1399.98px) {
    #et-bcc-sticky-cta {
        order: 4;
        width: 100%;
        max-width: none;
        margin-inline: 0;
        border-bottom: none;
        padding: 0.55rem 0.85rem 0.85rem;
        background: #000;
        text-align: center;
        border-top: 0;
    }
}

@media (max-width: 1399.98px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__hint,
    #et-bcc-sticky-cta .et-bcc-sticky-cta__time {
        text-align: center;
    }
}

@media (max-width: 1399.98px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__btn {
        min-height: 2.75rem;
        width: 100%;
        gap: 0.35rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 1399.98px) {
    #et-bcc-sticky-cta .et-bcc-sticky-cta__btn i {
        font-size: 1.0625rem !important;
        line-height: 1;
        width: 1.0625rem;
        margin: 0;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-preview-toolbar {
        order: 3;
        width: 100%;
        padding: 0.65rem 0.75rem 0;
        border-top: 1px solid color-mix(in srgb, var(--et-ws-surface-line, var(--et-border)) 88%, transparent);
        background: var(--et-dash-surface, rgba(255, 255, 255, 0.03));
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-preview-wrap {
        order: 4;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-preview-saved,
    .et-ship-cover-studio--step2 .et-bcc-autosave,
    .et-ship-cover-studio--step2 .et-bcc-download-actions,
    .et-ship-cover-studio--step2 .et-bcc-preview-tips,
    .et-ship-cover-studio--step2 .et-bcc-preview-note {
        order: 5;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc:not(.et-bcc--has-art) .et-bcc-card--text {
        display: none;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc.et-bcc--has-art .et-bcc-card--text {
        order: 6;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-step2-block--studio .et-bcc-preview-col,
    .et-ship-cover-studio--step2 .et-bcc-preview-col {
        order: unset;
        position: static;
        height: auto;
        min-height: 0;
        max-height: none;
        width: 100%;
        max-width: none;
        align-self: stretch;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-step2-block--studio .et-bcc-preview-panel,
    .et-ship-cover-studio--step2 .et-bcc-preview-panel {
        position: static;
        max-height: none;
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-step2-block--studio .et-bcc-preview-wrap,
    .et-ship-cover-studio--step2 .et-bcc-preview-wrap {
        --et-bcc-preview-budget: min(68dvh, 28rem);
        width: 100%;
        max-width: min(100%, 24rem);
        max-height: var(--et-bcc-preview-budget);
        height: auto;
        margin-inline: auto;
        aspect-ratio: 1600 / 2560;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-placeholder span {
        max-width: none;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-step2-block--studio .et-bcc-preview-col .et-bcc-download-actions {
        max-width: none;
        margin-inline: 0;
        padding-inline: 0.75rem;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-step2-block--studio .et-bcc-workspace__controls,
    .et-ship-step2-block--studio .et-bcc-inspector {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-inspector {
        border-left: none;
        border-right: none;
        border-bottom: none;
        max-height: none;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-studio.et-bcc-workspace--ship {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 1399.98px) {
    .et-ship-step2-block {
        scroll-margin-bottom: calc(var(--et-ship-wiz-nav-h, 5.75rem) + var(--et-dash-bottom-nav-stack, 0px) + 0.75rem);
    }
}

@media (max-width: 767.98px) {
    #etCoverStudio {
        padding-left: 0;
        padding-right: 0;
        gap: 0.65rem;
    }
}

@media (max-width: 767.98px) {
    #etCoverStudio .et-ship-step2-block--pen .et-ship-step2-details,
    #etCoverStudio .et-ship-step2-block--author-meta .et-ship-step2-details,
    #etCoverStudio > .et-ship-step2-validation {
        margin-inline: 0.65rem;
    }
}

@media (max-width: 767.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-toolbar,
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-wrap {
        padding-inline: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card--art {
        margin-inline: 0.65rem;
    }
}

@media (max-width: 767.98px) {
    #etCoverStudio #et-bcc-sticky-cta {
        margin-inline: 0.65rem;
        width: calc(100% - 1.3rem);
    }
}

@media (max-width: 767.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-wrap {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates,
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-templates,
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates--genre,
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-templates--genre {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-inspector,
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-workspace__controls {
        padding-inline: 0.65rem;
    }
}

@media (max-width: 767.98px) {
    .et-ship-step2-card__head--designer {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 767.98px) {
    .et-ship-step2-designer__open {
        width: 100%;
        margin-left: 0;
        justify-content: center;
        min-height: 2.375rem;
    }
}

@media (max-width: 767.98px) {
    .et-ship-cover-studio--step2 .et-bcc-topbar--ship {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 767.98px) {
    .et-ship-cover-studio--step2 .et-bcc-topbar__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 767.98px) {
    .et-ship-cover-studio--step2 .et-bcc-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
}

@media (max-width: 767.98px) {
    .et-ship-cover-studio--step2 .et-bcc-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .et-ship-cover-studio--step2 .et-bcc-kbd-hint {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .et-ship-cover-studio--step2 .et-bcc-tabs__btn {
        min-height: 2.375rem;
        padding-inline: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    .et-ship-cover-studio--step2 .et-bcc-preview-hint {
        white-space: normal;
        text-align: center;
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .et-ship-step2-details {
        margin-inline: 0;
    }
}

@media (max-width: 479.98px) {
    .et-ship-cover-studio--step2 .et-bcc-workflow__step {
        min-width: 4.75rem;
        padding-inline: 0.4rem;
    }
}

@media (max-width: 479.98px) {
    .et-ship-cover-studio--step2 .et-bcc-workflow__label {
        font-size: 0.6875rem;
    }
}

@media (max-width: 479.98px) {
    .et-ship-step2-preview__frame {
        max-width: min(100%, 11rem);
        margin-inline: auto;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio .et-ship-cover-studio {
        margin-inline: 0;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio,
    #etCoverStudio .et-ship-step2-block--studio,
    #etCoverStudio .et-ship-cover-studio--step2,
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-ship-host,
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-studio.et-bcc-workspace--ship {
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-col {
        width: 100%;
        max-width: none;
        align-self: stretch;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel,
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-panel {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio #et-bcc-sticky-cta {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn {
        width: 100%;
        min-height: 2.75rem;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-wrap {
        --et-bcc-preview-budget: min(68dvh, 28rem);
        width: 100%;
        max-width: min(100%, 20rem);
        max-height: var(--et-bcc-preview-budget);
        height: auto;
        margin-inline: auto;
        aspect-ratio: 1600 / 2560;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__hint,
    #etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__time {
        text-align: center;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio .et-ship-step2-details {
        margin-inline: 0;
    }
}

#etCoverStudio .et-ship-step2-card,
#etCoverStudio .et-ship-step2-rail__item,
#etCoverStudio .et-ship-step2-cover-bar,
#etCoverStudio .et-ship-step2-status__inner,
#etCoverStudio .et-ship-step2-validation,
#etCoverStudio .et-ship-step2-sync-note {
    border-color: var(--et-ws-surface-line, rgba(255, 255, 255, 0.06));
    border-radius: 0;
    background: var(--et-bg-primary, #0c0c0e);
}

#etCoverStudio .et-ship-step2-rail__num {
    border-radius: 0;
}

#etCoverStudio .et-ship-step2-card__head,
#etCoverStudio .et-ship-step2-block__head {
    background: transparent;
    border-bottom-color: var(--et-ws-surface-line, rgba(255, 255, 255, 0.06));
}

#etCoverStudio .et-ship-step2-card__icon,
#etCoverStudio .et-ship-step2-card__icon--cover {
    color: var(--et-ws-accent, var(--et-accent-primary));
    background: color-mix(in srgb, var(--et-ws-accent, var(--et-accent-primary)) 12%, var(--et-dash-surface-strong, rgba(255, 255, 255, 0.08)));
    border: 0;
    border-left: 2px solid var(--et-ws-accent, var(--et-accent-primary));
    border-radius: 0;
}

#etCoverStudio .et-ship-step2-card__title,
#etCoverStudio .et-ship-step2-block__title,
#etCoverStudio .et-ship-step2-status__title {
    font-family: var(--et-font-sans, 'DM Sans', system-ui, sans-serif);
    font-weight: 600;
    letter-spacing: -0.02em;
}

#etCoverStudio .et-ship-step2-rail__item,
#etCoverStudio .et-ship-step2-cover-bar,
#etCoverStudio .et-ship-step2-status__inner {
    background: var(--et-dash-surface, rgba(255, 255, 255, 0.04));
}

#etCoverStudio .et-ship-step2-rail__item:hover {
    background: var(--et-dash-surface-hover, rgba(255, 255, 255, 0.065));
    border-color: var(--et-ws-surface-line-strong, rgba(255, 255, 255, 0.1));
}

#etCoverStudio .et-ship-step2-rail__item.is-done {
    border-color: color-mix(in srgb, var(--et-accent-success, #34d399) 35%, var(--et-ws-surface-line, rgba(255, 255, 255, 0.06)));
    background: color-mix(in srgb, var(--et-accent-success, #34d399) 7%, var(--et-dash-surface, rgba(255, 255, 255, 0.04)));
}

#etCoverStudio .et-ship-step2-preview__frame {
    background: var(--et-dash-surface, rgba(255, 255, 255, 0.04));
    box-shadow: none;
}

#etCoverStudio .et-ship-step2-preview__frame.has-cover {
    box-shadow: none;
    border-color: var(--et-ws-surface-line-strong, rgba(255, 255, 255, 0.1));
}

#etCoverStudio .et-ship-step2-sync-note {
    background: var(--et-dash-surface, rgba(255, 255, 255, 0.04));
    border-style: solid;
}

#etCoverStudio .et-ship-step2-validation {
    background: color-mix(in srgb, var(--et-accent-warning, #f59e0b) 8%, var(--et-bg-primary, #0c0c0e));
}

#etCoverStudio .et-ship-step2-card--author,
#etCoverStudio .et-ship-step2-block--pen,
#etCoverStudio .et-ship-step2-block--author-meta {
    scroll-margin-top: calc(var(--et-write-sticky-top, 4.75rem) + 0.85rem);
    scroll-margin-bottom: calc(var(--et-ship-wiz-nav-h, 0px) + 0.75rem);
}

@media (min-width: 992px) {
    #etCoverStudio .et-ship-cover-studio--step2 {
        padding-bottom: 1.25rem;
        scroll-margin-bottom: calc(var(--et-ship-wiz-nav-h, 3.85rem) + 1.5rem);
    }
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-topbar--ship,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card {
    border-color: var(--et-ws-surface-line, rgba(255, 255, 255, 0.06));
    border-radius: 0;
}

#etCoverStudio .et-bcc-inspector .et-form-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--et-text-muted, #9a9aa8);
    margin-bottom: 0.35rem;
}

#etCoverStudio .et-bcc-inspector .et-form-control,
#etCoverStudio .et-bcc-inspector .form-control,
#etCoverStudio .et-bcc-inspector .form-select {
    border-radius: 0 !important;
    border-color: var(--et-ship-line);
    background: rgba(0, 0, 0, 0.35);
}

#etCoverStudio .et-bcc-inspector .et-form-control:focus,
#etCoverStudio .et-bcc-inspector .form-control:focus,
#etCoverStudio .et-bcc-inspector .form-select:focus {
    border-color: color-mix(in srgb, var(--et-ship-accent-sky) 55%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--et-ship-accent-sky) 16%, transparent);
}

#etCoverStudio .et-ship-step2-details .et-ship-step2-author-grid--optional {
    gap: 0.65rem 0.75rem;
}

/* Step progress chips */
#etCoverStudio .et-ship-step2-rail__item {
    border-color: var(--et-ship-line);
    border-left: 3px solid transparent;
    background: var(--et-ship-fill);
}

#etCoverStudio .et-ship-step2-rail__item.is-done {
    border-left-color: var(--et-ship-accent);
}

#etCoverStudio .et-ship-step2-rail__item.is-todo {
    border-left-color: var(--et-ship-accent-warm);
}

#etCoverStudio .et-ship-step2-details {
    border-color: var(--et-ship-line);
    background: var(--et-ship-fill);
}

/* ── Cover studio ── */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector__brand {
    color: var(--et-text-muted, #9a9aa8);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-art-replace {
    padding: 0.45rem 0.65rem;
    margin: 0 0 0.65rem;
    border: 1px solid var(--et-ship-line);
    border-left: 3px solid var(--et-ship-accent-sky);
    background: var(--et-ship-fill);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn.is-active {
    box-shadow: inset 0 -2px 0 var(--et-ship-accent);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel {
    border-color: var(--et-ship-line);
    background: var(--et-ship-fill);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-heading {
    color: var(--et-text-muted);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-ship-sync-note {
    border: 1px solid var(--et-ship-line);
    border-left: 3px solid var(--et-ship-accent-sky);
    background: color-mix(in srgb, var(--et-ship-accent-sky) 8%, transparent);
    color: var(--et-text-secondary);
    font-size: 0.72rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card__inner {
    border-color: var(--et-ship-line);
    background: var(--et-ship-fill);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card input:checked + .et-bcc-template-card__inner {
    border-color: color-mix(in srgb, var(--et-ship-accent) 55%, transparent);
    box-shadow: inset 3px 0 0 var(--et-ship-accent);
}

/* Book details card: sidebar chrome + stacked cover fields */
#etCoverStudio .et-ship-step2-details {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: stretch;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--et-ship-line);
    border-left: 3px solid var(--et-ship-accent-sky);
    background: var(--et-ship-fill);
    border-radius: 0;
}

#etCoverStudio .et-ship-step2-details__eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--et-text-muted, #9a9aa8);
}

#etCoverStudio .et-ship-step2-details .et-ship-field--author-name .et-form-label,
#etCoverStudio .et-ship-step2-details .et-bcc-field-stack--ship-grouped .et-form-label {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--et-text-muted, #9a9aa8) !important;
    margin-bottom: 0.35rem;
}

#etCoverStudio .et-ship-step2-details .et-ship-field--author-name .et-ship-field-hint,
#etCoverStudio .et-ship-step2-details .et-bcc-field-stack--ship-grouped .et-ship-field-hint {
    display: block !important;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--et-text-muted);
}

#etCoverStudio .et-ship-step2-details .et-form-control--emphasis {
    min-height: 2.5rem;
    font-size: 1rem;
    font-weight: 600;
}

#etCoverStudio .et-ship-step2-details .et-ship-field--author-name,
#etCoverStudio .et-ship-step2-details .et-bcc-field-stack--ship-grouped {
    grid-area: unset;
    align-self: stretch;
}

#etCoverStudio .et-ship-step2-details__save {
    grid-area: unset;
    align-self: flex-start;
    margin-bottom: 0;
}

#etCoverStudio .et-ship-step2-details .et-bcc-field-stack--ship-grouped {
    gap: 0.6rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--et-ship-line);
}

#etCoverStudio .et-ship-step2-details .et-bcc-field-row--thirds {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

@media (max-width: 575.98px) {
    #etCoverStudio .et-ship-step2-details .et-bcc-field-row--thirds {
        grid-template-columns: 1fr;
    }
}

/* Pass 3: cover studio density + sticky preview chrome */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector__brand {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-art-replace__status {
    font-family: var(--et-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--et-ship-accent);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel {
    border-left: 3px solid var(--et-ship-accent);
}

/* ── Ship cover ↔ Write tools-sidebar parity ── */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector {
    position: relative;
    z-index: 1;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-form-label,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates-label,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-group-label,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-advanced__summary,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-slider-label {
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--et-text-muted, #9a9aa8) !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-form-control,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .form-control,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .form-select,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-editable-input {
    min-height: 2.5rem;
    border-radius: 0 !important;
    border: 1px solid var(--et-ship-line, rgba(255, 255, 255, 0.08));
    background: var(--et-ss-inset, var(--et-bg-card-solid, #101012)) !important;
    color: var(--et-text-primary);
    box-shadow: none !important;
    cursor: text;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .form-select {
    cursor: pointer;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-form-control:focus,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .form-control:focus,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .form-select:focus,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-editable-input:focus {
    border-color: color-mix(in srgb, var(--et-ship-accent-sky, #4fc7ff) 55%, transparent) !important;
    outline: 2px solid color-mix(in srgb, var(--et-ship-accent-sky, #4fc7ff) 45%, transparent) !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs {
    gap: 0;
    padding: 0;
    margin-bottom: 0.85rem;
    border-bottom: none;
    background: transparent;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn {
    flex: 1 1 0;
    min-height: 2.25rem;
    border-radius: 0 !important;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--et-font-sans, 'DM Sans', system-ui, sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -0.01em;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn + .et-bcc-tabs__btn {
    box-shadow: inset 1px 0 0 var(--et-ship-line, rgba(255, 255, 255, 0.06));
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn.is-active {
    background: var(--et-ship-fill, rgba(255, 255, 255, 0.04));
    color: var(--et-text-primary);
    font-weight: 600;
    border-color: transparent;
    box-shadow: inset 0 -2px 0 var(--et-ship-accent, #2dd4bf) !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card__inner {
    border-radius: 0 !important;
    border-left: 3px solid transparent;
    background: var(--et-ship-fill, rgba(255, 255, 255, 0.03));
    min-height: 3.5rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card input:checked + .et-bcc-template-card__inner {
    border-color: var(--et-ship-line, rgba(255, 255, 255, 0.1));
    border-left-color: var(--et-ship-accent, #2dd4bf);
    box-shadow: none !important;
    background: color-mix(in srgb, var(--et-ship-accent, #2dd4bf) 8%, transparent);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card--recommended:not(:has(input:checked)) .et-bcc-template-card__inner {
    border-left-color: var(--et-ship-accent-sky, #4fc7ff);
    border-style: solid;
    border-color: var(--et-ship-line);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card__genre {
    border-radius: 0 !important;
    color: var(--et-ship-accent-sky, #4fc7ff);
    background: color-mix(in srgb, var(--et-ship-accent-sky, #4fc7ff) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--et-ship-accent-sky, #4fc7ff) 28%, transparent);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card--recommended .et-bcc-template-card__genre {
    background: var(--et-ship-accent, #2dd4bf);
    color: #041512;
    border-color: var(--et-ship-accent, #2dd4bf);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-genre-hint {
    color: var(--et-ship-accent-sky, #4fc7ff) !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-overlay-design,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-optional-fields {
    border: 1px solid var(--et-ship-line, rgba(255, 255, 255, 0.08));
    border-left: 3px solid var(--et-ship-accent-sky, #4fc7ff);
    background: var(--et-ship-fill, rgba(255, 255, 255, 0.03));
    border-radius: 0 !important;
    padding: 0.65rem 0.75rem 0.85rem;
    margin-top: 0.85rem;
}

/* Fonts & colors is a plain disclosure, not a boxed panel. */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-advanced {
    border: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 0.85rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-el-control {
    border-radius: 0 !important;
    border: 1px solid var(--et-ship-line);
    border-left: 3px solid transparent;
    background: var(--et-ship-fill);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-el-control--active {
    border-left-color: var(--et-ship-accent, #2dd4bf);
    border-color: var(--et-ship-line);
    box-shadow: none !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-layout-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    padding: 0.35rem;
    background: var(--et-ship-fill);
    border: 1px solid var(--et-ship-line);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-layout-tool {
    flex: 1 1 auto;
    min-height: 2rem;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border-radius: 0;
    font-size: 0.8125rem;
    font-weight: 500;
}

#etCoverStudio .et-ship-cover-studio--step2 .form-range {
    accent-color: var(--et-ship-accent, #2dd4bf);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-editable-hint {
    color: var(--et-ship-accent-sky, #4fc7ff);
}

#etCoverStudio .et-ship-cover-studio--step2 .pickr .pcr-button {
    border-radius: 0 !important;
    border: 1px solid var(--et-ship-line) !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-panel-lede {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    max-width: 36rem;
}

/* The swatches sit in the Fonts & colors summary now, between its label and
   its chevron, so they carry no box of their own — the accordion header is the
   box. The accent-edged panel this replaced is what used to sit above the
   template picker. */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-live-colors {
    gap: 0.28rem;
    margin-right: 0.1rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates-label {
    margin-bottom: 0.35rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates--genre {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card__inner {
    min-height: 4.25rem;
    padding: 0.65rem 0.7rem;
    align-items: flex-start;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates--genre .et-bcc-template-card__inner small {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.35;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-overlay-design {
    margin-top: 0.75rem;
    padding: 0.55rem 0.7rem 0.7rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-overlay-design .et-bcc-template-group-label {
    margin: 0 0 0.25rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-overlay-design .et-bcc-advanced__note {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-overlay-design__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 0.75rem;
    margin-top: 0;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-field--range {
    grid-column: 1 / -1;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-advanced {
    margin-top: 0.65rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-advanced:not([open]) {
    padding-bottom: 0.45rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-advanced__summary {
    list-style: none;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-advanced__summary::-webkit-details-marker {
    display: none;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-advanced__summary::after {
    content: '+';
    float: right;
    color: var(--et-text-muted);
    font-weight: 700;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-advanced[open] > .et-bcc-advanced__summary::after {
    content: '−';
}

/* Book text fields: Write-like inset stack */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-field-stack {
    gap: 0.85rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-optional-fields {
    margin-top: 0.35rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-optional-fields__summary {
    font-family: var(--et-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--et-text-muted);
}

/* Layout controls denser */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-el-control__head {
    margin-bottom: 0.35rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-element-toggle {
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Separator picker — ship chrome */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-field--sep .et-form-label {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--et-text-muted, #9a9aa8) !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-sep-picker {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.3rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-sep-picker__btn {
    border-color: var(--et-ship-line);
    background: color-mix(in srgb, var(--et-ship-fill) 90%, transparent);
    border-radius: 0;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-sep-picker__btn.is-active {
    border-color: color-mix(in srgb, var(--et-ship-accent-sky) 55%, var(--et-ship-line));
    background: color-mix(in srgb, var(--et-ship-accent-sky) 12%, transparent);
    box-shadow: inset 0 -2px 0 var(--et-ship-accent-sky);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-overlay-design input[type="range"] {
    accent-color: var(--et-ship-accent-sky, #4fc7ff);
}

/* Quiet autosave chip inside book details */
#etCoverStudio .et-ship-step2-details__save {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--et-text-muted, #9a9aa8) !important;
    font-family: var(--et-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: 0.5625rem !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 !important;
    min-height: 0 !important;
}

#etCoverStudio .et-ship-step2-details__save.is-saved {
    color: var(--et-ship-accent, #2dd4bf) !important;
}

/* Pass polish: book details density + optional reset */
.et-ship-step2-details .et-bcc-optional-fields--ship,
#etCoverStudio .et-ship-step2-details .et-bcc-optional-fields--ship {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

#etCoverStudio .et-ship-step2-details .et-bcc-field-group--ship-cover {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.75rem;
}

@media (max-width: 575.98px) {
    #etCoverStudio .et-ship-step2-details .et-bcc-field-group--ship-cover {
        grid-template-columns: 1fr;
    }
}

#etCoverStudio .et-ship-step2-details .et-bcc-field-stack--ship-grouped {
    gap: 0.55rem;
    margin-bottom: 0;
}

#etCoverStudio .et-ship-step2-details .et-bcc-field {
    margin-bottom: 0;
}

#etCoverStudio .et-ship-step2-details .et-form-control {
    min-height: 2.35rem;
}

#etCoverStudio .et-ship-step2-details .et-bcc-field-row--thirds {
    gap: 0.5rem;
}

/* Separator picker denser on ship */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-sep-picker__btn {
    min-height: 2.85rem;
    padding: 0.35rem 0.15rem 0.3rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-sep-picker__name {
    font-size: 0.6875rem;
}

#etCoverStudio .et-ship-cover-studio--step2 #et-bcc-generate,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-actions .btn-et-primary {
    background: color-mix(in srgb, var(--et-ws-cta-bg, #f4f4f5) 92%, transparent) !important;
    border-color: transparent !important;
    color: var(--et-ws-cta-fg, #0a0a0b) !important;
    font-weight: 600 !important;
    filter: none;
}

#etCoverStudio .et-ship-cover-studio--step2 #et-bcc-generate:hover,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-actions .btn-et-primary:hover {
    background: var(--et-ws-cta-hover, #ffffff) !important;
    filter: none;
}

#etCoverStudio .et-ship-cover-studio--step2 #et-bcc-generate:disabled,
#etCoverStudio .et-ship-cover-studio--step2 #et-bcc-generate[aria-disabled="true"] {
    background: rgba(244, 244, 245, 0.35) !important;
    color: rgba(10, 10, 11, 0.55) !important;
    opacity: 1;
    cursor: not-allowed;
}

#etCoverStudio .et-ship-step2-details,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-art-replace,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-ship-sync-note,
#etCoverStudio .et-ship-step2-rail__item {
    border-left-width: 1px;
    border-left-color: var(--et-ship-line);
}

#etCoverStudio .et-ship-step2-details {
    background: var(--et-ws-artifact-panel, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--et-ws-surface-line, rgba(255, 255, 255, 0.1));
}

#etCoverStudio .et-ship-step2-rail__item.is-done,
#etCoverStudio .et-ship-step2-rail__item.is-todo,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card input:checked + .et-bcc-template-card__inner {
    border-left-color: var(--et-ship-line);
    box-shadow: none !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel {
    background: var(--et-ws-artifact-panel, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--et-ws-surface-line, rgba(255, 255, 255, 0.1));
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-art-replace,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-ship-sync-note {
    background: var(--et-ws-artifact-panel, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--et-ws-surface-line, rgba(255, 255, 255, 0.1));
}

/* Scope-style tabs (Write Auto/Selection): zinc inset, not teal underline */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn.is-active,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--et-text-primary);
    font-weight: 600;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 -2px 0 var(--et-ws-cta-bg, #f4f4f5) !important;
}

/* Prompt-like primary field: teal border signal like Write YOUR PROMPT */
#etCoverStudio .et-ship-cover-studio--step2 #et-bcc-prompt,
#etCoverStudio .et-ship-cover-studio--step2 textarea.et-bcc-textarea {
    border: 1px solid var(--et-ws-artifact-accent, var(--et-dash-accent-teal, #2dd4bf)) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-form-control:focus,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .form-control:focus,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .form-select:focus,
#etCoverStudio .et-ship-step2-details .et-form-control:focus {
    /* One 1px teal border is the focus state for every field (16 Sep 2026): the ring that was here sat outside the field's own edge and read as a second border. */
    border: 1px solid var(--et-acc-teal, #2dd4bf) !important;
    outline: none !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-step2-card__head {
    background: transparent;
    border-bottom-color: var(--et-ws-surface-line, rgba(255, 255, 255, 0.1));
}

#etCoverStudio .et-ship-step2-card__icon,
#etCoverStudio .et-ship-step2-card__icon--cover {
    border-left: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--et-text-secondary);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chip,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chips .btn {
    border-radius: 0 !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card__inner {
    border-left-width: 1px !important;
    border-left-color: var(--et-ship-line, rgba(255, 255, 255, 0.1)) !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card input:checked + .et-bcc-template-card__inner {
    border-color: rgba(255, 255, 255, 0.18) !important;
    border-left-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 -2px 0 var(--et-ws-cta-bg, #f4f4f5) !important;
}

/* Step2 readiness chips — flat like Write scope tabs */
#etCoverStudio .et-ship-step2-rail__item.is-done {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 -2px 0 var(--et-dash-accent-teal, #2dd4bf);
}

#etCoverStudio .et-ship-step2-rail__item.is-todo {
    background: var(--et-ship-fill, rgba(255, 255, 255, 0.03)) !important;
    border-color: var(--et-ship-line, rgba(255, 255, 255, 0.1)) !important;
}

/* ── Ship: cap the template gallery ───────────────────────────────────────
 * Step 2 measured 4,018px against 556px / 1,071px / 758px for the other
 * steps, and half of it was one control: the genre template grid at 2,041px.
 * That grew when the cards started rendering real cover previews — worth the
 * space on the dedicated cover tool, far too much inside a wizard step, where
 * it pushed "Cover text & listing" a full three screens below the fold.
 *
 * Keep the previews; give the gallery its own scroll instead of letting it
 * set the length of the page.
 *
 * No overscroll-behavior: contain here. The gallery is 58vh of ordinary page
 * content, not an overlay, so the wheel has to keep chaining to the page once
 * the gallery hits an end — containing it stranded anyone whose pointer
 * happened to be over the cards.
 */
#etCoverStudio #et-bcc-templates {
    max-height: min(58vh, 25rem);
    overflow-y: auto;
    padding-right: 0.35rem;
}

/* The group headings stay put while the cards scroll under them. */
#etCoverStudio #et-bcc-templates .et-bcc-template-group-label {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.3rem 0 0.25rem;
    background: #000;
}

#etCoverStudio .et-ship-step2-details,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-art-replace,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-ship-sync-note {
    border: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel {
    background: rgba(255, 255, 255, 0.04) !important;
}

#etCoverStudio .et-ship-step2-details .et-bcc-field-stack--ship-grouped,
#etCoverStudio .et-ship-step2-card__head {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Cover prompt stays the one teal-bordered field, like Write's prompt */
#etCoverStudio .et-ship-cover-studio--step2 #et-bcc-prompt,
#etCoverStudio .et-ship-cover-studio--step2 textarea.et-bcc-textarea {
    border: 1px solid var(--et-ws-artifact-accent, var(--et-dash-accent-teal, #2dd4bf)) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

#etCoverStudio .et-ship-step2-rail__item.is-done {
    box-shadow: none;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card input:checked + .et-bcc-template-card__inner {
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

@media (max-width: 1399.98px) {
    #etCoverStudio .et-ship-step2-rail {
        width: 100%;
    }
}

@media (max-width: 1399.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs,
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio .et-ship-step2-details .et-bcc-field-row--thirds {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-actions .btn,
    #etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn {
        width: 100%;
        min-height: 2.75rem;
    }
}

@media (max-width: 767.98px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-wrap,
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-wrap {
        max-width: min(100%, 16.5rem);
    }
}

/* =============================================================================
 * Step 2 — Write manuscript + tools rail
 * ============================================================================= */
#etCoverStudio #etCoverStudio .et-ship-section-head--step2 .et-ship-step2-rail,
#etCoverStudio #etCoverStudio .et-ship-section-head--step2 .et-ship-section-head__desc {
    display: none;
}

#etCoverStudio #etCoverStudio .et-ship-section-head--step2 {
    padding: 0.15rem 0 0.55rem;
    border: 0;
    margin: 0;
    background: transparent;
}

#etCoverStudio #etCoverStudio .et-ship-section-head__title {
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em;
    color: #fff !important;
}

/*
 * Start over lives in this chrome, at the top of the studio (cover-studio.css
 * order 16). The kicker is "Cover studio" so the reset is labelled; do not
 * hide the header — that used to take the button with it and bury the only
 * way to abandon a cover at the bottom of the step.
 */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector__chrome {
    display: flex !important;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--et-ui-line, rgba(255, 255, 255, 0.08));
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card__head {
    margin: 0 0 0.45rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--et-text-muted, #9aa0aa);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card__hint {
    display: none;
}

#etCoverStudio .et-ship-step2-details,
#etCoverStudio .et-ship-step2-details--pen {
    padding: 0;
    background: transparent !important;
    border: 0 !important;
}

#etCoverStudio .et-ship-step2-details__eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--et-text-muted, #9aa0aa);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel,
#etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-panel {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-heading {
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--et-text-muted, #9aa0aa);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-wrap {
    border-radius: 0;
    background: #111;
}

#etCoverStudio #et-bcc-sticky-cta {
    border: 0;
    padding: 0.35rem 0 0.75rem;
}

#etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn,
#etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn.btn-et-primary {
    background: var(--et-acc-teal, #2dd4bf) !important;
    color: #06110f !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 700;
    min-height: 2.5rem;
    font-size: 0.875rem;
    gap: 0.35rem;
}

#etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn i,
#etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn.btn-et-primary i {
    font-size: 1.0625rem !important;
    line-height: 1;
    width: 1.0625rem;
    margin: 0;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn.is-active,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: var(--et-text-primary);
    box-shadow: none !important;
    border: 0;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chips .btn,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chip,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-actions .btn {
    background: rgba(255, 255, 255, 0.07);
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--et-text-secondary);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chip:hover {
    background: rgba(255, 255, 255, 0.11);
    color: var(--et-text-primary);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-toolbar {
    min-height: 2rem;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-quick-btn {
    border-radius: 0;
    background: transparent;
    border: 0;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-autosave,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-saved {
    border: 0 !important;
    background: transparent !important;
    padding-left: 0;
    padding-right: 0;
}

#etCoverStudio #etCoverStudio {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

@media (min-width: 1400px) {
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-workspace__controls,
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-inspector {
        border-left: 0;
        border-right: 0;
        background: transparent;
        max-width: none;
        width: 100%;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-panel {
        align-items: stretch;
        justify-content: flex-start;
        padding: 0 !important;
        width: 100%;
        margin-inline: auto;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-wrap,
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-wrap {
        /* Matches the reserve above — see the note there on the sticky panel. */
        --et-bcc-preview-budget: calc(
            100dvh - var(--et-write-sticky-top, 4.75rem) - var(--et-ship-wiz-nav-h, 4.5rem) - var(--et-bcc-preview-chrome, 11rem)
        );
        width: min(100%, calc(var(--et-bcc-preview-budget) * 1600 / 2560)) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        max-height: var(--et-bcc-preview-budget);
        align-self: start;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-col {
        border-left: 0;
        padding-left: 0;
    }
}

#etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn,
#etCoverStudio > .et-bcc-sticky-cta .et-bcc-sticky-cta__btn,
#etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-actions .btn-et-primary {
    background: var(--et-acc-teal, #2dd4bf) !important;
    background-image: none !important;
    color: #06110f !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
}

#etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn:hover:not(:disabled),
#etCoverStudio > .et-bcc-sticky-cta .et-bcc-sticky-cta__btn:hover:not(:disabled),
#etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn:hover:not(:disabled) {
    background: #5eead4 !important;
    color: #06110f !important;
    filter: none;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-actions .btn-et-ghost,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-art-replace .btn,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-assist {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: var(--et-text-secondary, #a1a1aa) !important;
    font-weight: 600;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-actions .btn-et-ghost:hover:not(:disabled),
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-art-replace .btn:hover:not(:disabled),
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-assist:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--et-text-primary, #f4f4f5) !important;
    border-color: transparent !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chip,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chips .btn,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card__inner {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--et-text-secondary, #a1a1aa);
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn:hover,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chip:hover,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chips .btn:hover,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card:hover .et-bcc-template-card__inner {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--et-text-primary, #f4f4f5);
    border-color: transparent !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn.is-active,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn.is-active,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-prompt-chip.is-on,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card input:checked + .et-bcc-template-card__inner {
    background: color-mix(in srgb, var(--et-acc-teal, #2dd4bf) 12%, transparent) !important;
    border-color: color-mix(in srgb, var(--et-acc-teal, #2dd4bf) 32%, rgba(255, 255, 255, 0.12)) !important;
    color: var(--et-text-primary, #f4f4f5) !important;
    box-shadow: none !important;
}

#etCoverStudio > .et-bcc-sticky-cta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.55rem 0 0.75rem;
}

#etCoverStudio > .et-bcc-sticky-cta .et-bcc-sticky-cta__btn {
    width: 100%;
    min-height: 2.5rem;
    justify-content: center;
    gap: 0.35rem;
}

#etCoverStudio #etCoverStudio .et-ship-step2-block--author-meta .et-ship-step2-details,
#etCoverStudio #etCoverStudio .et-bcc-workspace__controls {
    background: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.75rem 0.85rem;
}

/* Author uses the same inset as Genre — do not double-pad the pen card. */
#etCoverStudio #etCoverStudio .et-ship-step2-block--pen .et-ship-step2-details {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: 100%;
    max-width: none;
    align-items: stretch;
}

#etCoverStudio #etCoverStudio .et-form-control,
#etCoverStudio #etCoverStudio .et-bcc-textarea,
#etCoverStudio #etCoverStudio .et-bcc-inspector .et-form-control {
    background: var(--et-flat-control, rgba(255, 255, 255, 0.07)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--et-text-primary, #fafafa) !important;
}

#etCoverStudio .et-bcc-autosave[hidden] {
    display: none !important;
}

#etCoverStudio #etCoverStudio .et-form-label,
#etCoverStudio #etCoverStudio .et-bcc-field .et-form-label {
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
}

#etCoverStudio #etCoverStudio {
    background: transparent !important;
    padding: 0 !important;
}

#etCoverStudio #et-bcc-gen-ready-hint,
#etCoverStudio .et-bcc-sticky-cta__hint {
    display: none !important;
}

#etCoverStudio .et-ship-step2-details__eyebrow {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card__title,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-heading {
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
    color: #fff !important;
}

#etCoverStudio #etCoverStudio > .et-bcc-sticky-cta,
#etCoverStudio #etCoverStudio #et-bcc-sticky-cta {
    background: #000 !important;
    padding: 0.55rem 0.85rem 0.85rem !important;
    border-top: 0 !important;
}

#etCoverStudio #etCoverStudio .et-bcc-preview-col,
#etCoverStudio #etCoverStudio .et-bcc-preview-panel {
    background: transparent !important;
}

/* Cover layout workspace — Write chrome, not public-tool purple */
#etCoverStudio .et-bcc-preview-modal__dialog,
#etCoverStudio .et-bcc-preview-modal__head,
#etCoverStudio .et-bcc-preview-modal__body,
#etCoverStudio .et-bcc-preview-modal__inspector {
    background: #000;
    border-radius: 0;
    box-shadow: none;
}

#etCoverStudio .et-bcc-preview-modal__title,
#etCoverStudio .et-bcc-overlay-menu__title {
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
}

#etCoverStudio .et-bcc-preview-modal__done,
#etCoverStudio .et-bcc-preview-modal .btn-et-primary {
    background: var(--et-acc-teal, #2dd4bf) !important;
    color: #06110f !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
}

#etCoverStudio .et-bcc-expand-btn {
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 0 !important;
    color: #fff !important;
}

#etCoverStudio .et-bcc-preview-modal__inspector .et-bcc-overlay-menu__field select,
#etCoverStudio .et-bcc-preview-modal__inspector .et-bcc-overlay-menu__field textarea {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fafafa !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-group-label,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates-head,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates-label,
#etCoverStudio #et-bcc-templates .et-bcc-template-group-label {
    background: #000 !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-overlay-design {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-step2-block--pen,
#etCoverStudio .et-ship-step2-block--pen .et-ship-step2-details,
#etCoverStudio #etCoverStudio #bookAuthorName {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
    text-align: left !important;
}

@media (min-width: 1400px) {
    #etCoverStudio #etCoverStudio .et-ship-step2-block--pen,
    #etCoverStudio #etCoverStudio .et-ship-step2-block--studio .et-bcc-inspector {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn:hover,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn.is-active,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn:hover,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn.is-active {
    border: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn.is-active,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-tabs__btn.is-active {
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: inset 0 -2px 0 var(--et-acc-teal, #2dd4bf) !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-templates,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates--genre,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-templates--genre {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card__inner,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card input:checked + .et-bcc-template-card__inner {
    min-height: 4.5rem !important;
    padding: 0.7rem 0.75rem !important;
    overflow: visible !important;
    align-items: flex-start !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card__inner strong,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-card__inner small {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.35 !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates--genre .et-bcc-template-card__inner small {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Overlay editor — Write chrome, docked under the cover (never floats over art) */
#etCoverStudio .et-bcc-overlay-menu[hidden],
#etCoverStudio .et-bcc-overlay-add[hidden] {
    display: none !important;
}

#etCoverStudio .et-bcc-overlay-menu--docked,
#etCoverStudio .et-kdp-ship .et-bcc-overlay-menu--docked {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    background: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0.75rem 0 0.35rem !important;
    margin-top: 0.55rem !important;
    z-index: 1;
    flex: 0 0 auto;
}

/* Keep the cover box a fixed aspect; scroll the properties, never shrink the art. */
#etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-wrap,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-wrap {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-height: auto !important;
}

#etCoverStudio {
    scrollbar-gutter: stable;
}

/*
 * Stacked layout: the cover is sized from the viewport budget, so the panel
 * opening below it lengthens the page instead of squeezing the art.
 */
#etCoverStudio .et-bcc-preview-panel > .et-bcc-overlay-menu--docked {
    flex: 0 0 auto;
    max-height: min(42vh, 24rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    /* Chains to the page on purpose: this panel sits in the document, not over
       it, so trapping the wheel here left the page unscrollable whenever the
       pointer was resting on the properties. */
    overscroll-behavior: auto;
}

@media (min-width: 1400px) {
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-panel > .et-bcc-overlay-menu--docked {
        /* Shorter than the stacked cap: the cover already claims most of the
           sticky column, so a tall panel would scroll the artwork you are
           editing off the top of the screen. */
        max-height: min(34vh, 19rem) !important;
        padding-bottom: 0.6rem !important;
    }
}

/*
 * Two-column layout: the panel stays docked under the cover here too. Floating
 * it into the gutter looked tidier but the sticky preview panel scrolls its own
 * overflow at this width, so an absolutely positioned child sitting outside the
 * panel's box was clipped away — clicking a line of type opened a panel nobody
 * could see. The cover is fixed-aspect and cannot shrink, so the panel simply
 * scrolls into view beneath it.
 */
@media (min-width: 1400px) {
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-panel > .et-bcc-overlay-menu--docked .et-bcc-overlay-menu__hint {
        display: block;
    }
}

#etCoverStudio .et-bcc-preview-wrap {
    position: relative;
    z-index: 6;
    isolation: isolate;
}

#etCoverStudio .et-bcc-preview-wrap.is-ready .et-bcc-canvas {
    pointer-events: auto !important;
    z-index: 2;
}

#etCoverStudio .et-bcc-hit-layer {
    z-index: 4;
    pointer-events: none;
}

#etCoverStudio .et-bcc-hit {
    pointer-events: auto;
}

#etCoverStudio .et-bcc-preview-wrap .et-bcc-placeholder,
#etCoverStudio .et-bcc-preview-wrap .et-bcc-preview-loading {
    pointer-events: none !important;
}

#etCoverStudio .et-bcc-overlay-menu__row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.55rem !important;
}

#etCoverStudio .et-bcc-overlay-menu__field:has(textarea),
#etCoverStudio .et-bcc-overlay-menu__field textarea {
    grid-column: 1 / -1;
}

#etCoverStudio .et-bcc-overlay-menu__field input[type="range"] {
    accent-color: var(--et-acc-teal, #2dd4bf);
}

#etCoverStudio .et-bcc-overlay-menu__field span {
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #b8b8c4;
}

#etCoverStudio .et-bcc-overlay-menu__field select,
#etCoverStudio .et-bcc-overlay-menu__field textarea,
#etCoverStudio .et-bcc-overlay-menu__field input[type="range"] {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fafafa !important;
    min-height: 2.35rem;
}

#etCoverStudio .et-bcc-overlay-menu__field textarea {
    min-height: 4.25rem;
    resize: vertical;
}

/*
 * Selecting a block on the cover focuses this box for you, so its focus ring
 * fires on a click you did not make on the field itself. Teal is the accent
 * this studio uses for "you are being asked to fill this in", which read as a
 * prompt rather than as a side effect of picking something on the artwork.
 * Keep an indicator — it is the only sign of where the keyboard went — in the
 * panel's own neutral tone.
 */
#etCoverStudio .et-bcc-overlay-menu__field textarea:focus,
#etCoverStudio .et-bcc-overlay-menu__field textarea:focus-visible,
#etCoverStudio .et-bcc-overlay-menu__field select:focus,
#etCoverStudio .et-bcc-overlay-menu__field select:focus-visible {
    border: 0 !important;
    outline: 2px solid rgba(255, 255, 255, 0.32) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.11) !important;
}

#etCoverStudio .et-bcc-overlay-add:not([hidden]),
#etCoverStudio .et-bcc-overlay-add--layout:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.45rem;
    position: relative;
    z-index: 1;
}

#etCoverStudio .et-bcc-overlay-add .btn {
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #f4f4f5 !important;
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif);
    font-weight: 600;
    min-height: 2.25rem;
}

#etCoverStudio .et-bcc-overlay-add .btn:hover {
    background: color-mix(in srgb, var(--et-acc-teal, #2dd4bf) 18%, transparent) !important;
    color: #fff !important;
}

#etCoverStudio .et-bcc-overlay-menu__foot .btn,
#etCoverStudio .et-bcc-overlay-menu__reset-pos {
    border: 0 !important;
    border-radius: 0 !important;
}

#etCoverStudio .et-bcc-preview-hint {
    background: transparent !important;
    border: 0 !important;
    color: #b8b8c4 !important;
    font-size: 0.75rem;
    padding: 0.35rem 0 0 !important;
}

/* Chapter-polish language: full-bleed fields, square, teal focus */
#etCoverStudio #etCoverStudio .et-ship-field--author-name .et-form-label,
#etCoverStudio #etCoverStudio .et-bcc-genre-bar .et-form-label {
    display: block;
    width: 100%;
    margin: 0 0 0.35rem;
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif);
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--et-text-muted, #9ca3af) !important;
}

#etCoverStudio #etCoverStudio #bookAuthorName,
#etCoverStudio #etCoverStudio #et-bcc-genre {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    text-align: left !important;
    border-radius: 0 !important;
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif);
}

#etCoverStudio #etCoverStudio #bookAuthorName:focus,
#etCoverStudio #etCoverStudio #et-bcc-genre:focus {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--et-acc-teal, #2dd4bf) 28%, transparent) !important;
}

#etCoverStudio #etCoverStudio .et-bcc-genre-bar,
#etCoverStudio #etCoverStudio .et-bcc-genre-bar .et-bcc-field {
    width: 100%;
    max-width: none;
}

#etCoverStudio .et-bcc-textarea,
#etCoverStudio .et-bcc-inspector .et-form-control {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #fafafa !important;
}

#etCoverStudio .et-bcc-textarea:focus {
    /* One 1px teal border is the focus state for every field (16 Sep 2026): the ring that was here sat outside the field's own edge and read as a second border. */
    border: 1px solid var(--et-acc-teal, #2dd4bf) !important;
    outline: none !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-cover-studio--step2 #et-bcc-prompt,
#etCoverStudio .et-ship-cover-studio--step2 textarea.et-bcc-textarea {
    border: 1px solid #2dd4bf !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

#etCoverStudio .et-bcc-autosave {
    /* "Cover saves automatically" follows --et-text-muted, like Ship's save
       read-out. #71717a is 4.35:1 on this near-black panel at 12px, under the
       4.5 small text needs (measured on step 2, 8 Sep 2026). */
    color: var(--et-text-muted, #9ca3af) !important;
    font-size: 0.75rem !important;
}

#etCoverStudio .btn-et-ghost,
#etCoverStudio .et-bcc-inspector .btn-et-ghost {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #2dd4bf !important;
    font-weight: 700 !important;
}

#etCoverStudio .btn-et-ghost:hover,
#etCoverStudio .et-bcc-inspector .btn-et-ghost:hover {
    background: rgba(45, 212, 191, 0.12) !important;
    color: #5eead4 !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector,
#etCoverStudio .et-ship-step2-block--pen,
#etCoverStudio .et-ship-step2-block--studio {
    background: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-collapsible--step2,
#etCoverStudio .et-ship-collapsible--step2[open] {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 !important;
}

/*
 * Author & cover: two black columns with a page-chrome gap between them.
 * "Your cover" lives inside the preview panel, not on the #0c0c0e page fill.
 */
#etCoverStudio #etCoverStudio {
    background: transparent !important;
}

#etCoverStudio #etCoverStudio {
    background: transparent !important;
}

@media (min-width: 1400px) {
    #etCoverStudio #etCoverStudio {
        column-gap: 1.75rem !important;
        row-gap: 0 !important;
    }
}

#etCoverStudio #etCoverStudio .et-bcc-preview-col,
#etCoverStudio #etCoverStudio .et-bcc-preview-panel {
    background: #000 !important;
}

#etCoverStudio #etCoverStudio .et-bcc-preview-panel {
    padding: 0.7rem 0.85rem 0.85rem !important;
    box-sizing: border-box;
}

#etCoverStudio #etCoverStudio {
    background: transparent !important;
}

#etCoverStudio #etCoverStudio .et-ship-section-head,
#etCoverStudio #etCoverStudio .et-ship-section-head--step2 {
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Author name needs air under the step title; Genre was padded twice (card head + KDP bar). */
#etCoverStudio #etCoverStudio .et-ship-section-head--step2 {
    padding-bottom: 0.9rem !important;
}

#etCoverStudio #etCoverStudio .et-ship-step2-block--pen {
    padding-top: 0.45rem !important;
}

#etCoverStudio #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card--art .et-bcc-card__head,
#etCoverStudio #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-card--art .et-bcc-card__head {
    padding: 0 !important;
    margin: 0 !important;
}

#etCoverStudio #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card--art .et-bcc-card__head:not(:has(.et-bcc-quota-hint:not([hidden]))) {
    display: none !important;
}

#etCoverStudio #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-card,
#etCoverStudio #etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector .et-bcc-card--art {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#etCoverStudio #etCoverStudio .et-bcc-genre-bar,
#etCoverStudio #etCoverStudio .et-kdp-ship .et-bcc-genre-bar,
#etCoverStudio #etCoverStudio .et-bcc-art-side--ship {
    padding: 0 !important;
    margin: 0 0 0.55rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

@media (min-width: 1400px) {
    #etCoverStudio #etCoverStudio .et-ship-step2-block--studio .et-bcc-workspace__controls,
    #etCoverStudio #etCoverStudio .et-ship-step2-block--studio .et-bcc-inspector {
        padding-top: 0.2rem !important;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio #etCoverStudio > .et-ship-section-head--step2 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        background: transparent !important;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-col,
    #etCoverStudio #etCoverStudio .et-ship-step2-block--studio .et-bcc-workspace--ship > .et-bcc-preview-col {
        grid-row: 2 / -1 !important;
    }
}

/* Layout tab: no cards around title / subtitle / author / series / tagline / book # */
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-el-control,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-el-control--active,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-el-control--off {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}



/* ═══════════════════════════════════════════════════════════════════════════
   from write-studio/workshop-ship.css — the Ship collapsible, second pass
   (Optional cover details uses it on both surfaces)
   ═══════════════════════════════════════════════════════════════════════════ */
.et-ship-collapsible {
    border: 1px solid var(--et-border-subtle, rgba(0, 0, 0, 0.08));
    border-radius: var(--et-radius-sm, 0.375rem);
    background: var(--et-bg-primary);
}

.et-ship-collapsible__summary {
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.et-ship-collapsible__summary::-webkit-details-marker {
    display: none;
}

.et-ship-collapsible__summary::before {
    content: '\f285';
    font-family: "bootstrap-icons";
    font-weight: normal;
    font-size: 0.6875rem;
    margin-right: 0.5rem;
    color: var(--et-text-muted);
    display: inline-block;
    transition: transform 0.15s ease;
}

.et-ship-collapsible[open] > .et-ship-collapsible__summary::before {
    transform: rotate(90deg);
}

.et-ship-collapsible__body {
    padding: 0 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* A `display` on a details' child overrides the UA rule that hides it while
   the details is shut, so this `display: flex` kept every collapsible on Ship
   permanently open: measured 14 Sep 2026 on step 3, "End-of-book pages" shut
   and still painting a 510px body of focusable fields directly under its own
   summary, and "Publish on Entangled Text" the same. The arrow rotated and
   nothing else happened. Every surface that draws this collapsible ships it
   shut (step 2's copyright block, the cover tool's optional fields), so the
   guard belongs beside the declaration that needs it. */
.et-ship-collapsible:not([open]) > .et-ship-collapsible__body {
    display: none;
}

.et-ship-back-matter-grid .et-ship-field-hint {
    margin-top: 0.35rem;
}

.et-ship-collapsible__intro {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--et-text-muted);
}

.et-ship-field-hint {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--et-text-muted);
}

.et-ship-field-hint--kdp {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.85;
}

.et-ship-field-hint.text-danger-et {
    color: var(--et-accent-danger, #c0392b);
    font-style: normal;
    font-weight: 500;
}

.et-ship-collapsible__summary-label {
    display: inline;
}

.et-ship-collapsible__optional {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.65em;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--et-text-muted);
    opacity: 0.9;
}

#etCoverStudio .et-ship-field-hint,
#etCoverStudio .et-ship-collapsible__intro {
    font-size: 0.72rem;
    color: var(--et-text-muted);
}

#etCoverStudio .et-ship-collapsible {
    border: 1px solid var(--et-ship-line);
    background: var(--et-ship-fill);
}

#etCoverStudio .et-ship-collapsible__summary {
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
}

#etCoverStudio .et-ship-collapsible__body {
    padding: 0 0.7rem 0.75rem;
    border-top: 1px solid var(--et-ship-line-soft);
}

#etCoverStudio .et-ship-collapsible__optional {
    border-radius: 0 !important;
}

#etCoverStudio .et-ship-collapsible {
    border: 0 !important;
    border-left: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-collapsible__body {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

#etCoverStudio .et-ship-collapsible__summary {
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

#etCoverStudio .et-ship-field-hint--kdp {
    display: none !important;
}

#etCoverStudio .et-ship-collapsible__summary,
#etCoverStudio .et-ship-collapsible__summary-label {
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
    color: #fff !important;
}

#etCoverStudio .et-ship-collapsible__intro,
#etCoverStudio .et-ship-collapsible__optional {
    font-size: 0.8125rem !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

#etCoverStudio .et-ship-back-matter-grid .et-ship-field-hint,
#etCoverStudio .et-ship-field--ai-disclosure .et-ship-field-hint {
    display: none !important;
}

#etCoverStudio .et-ship-field-hint {
    color: #71717a !important;
    font-size: 0.75rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   from studio-flat.css
   ═══════════════════════════════════════════════════════════════════════════ */

.et-app-shell.et-page-write.et-studio-drafting.et-ship-mode #et-bcc-sticky-cta .et-bcc-sticky-cta__btn i,
.et-app-shell.et-page-write.et-studio-drafting.et-ship-mode #et-bcc-sticky-cta .et-bcc-sticky-cta__btn.btn-et-primary i {
    font-size: 1.0625rem !important;
    line-height: 1 !important;
}

#etCoverStudio .et-ship-step2-block--author-meta .et-ship-step2-details,
#etCoverStudio .et-bcc-workspace__controls {
    background: #000 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

#etCoverStudio .et-form-control,
#etCoverStudio .et-bcc-textarea {
    background: var(--et-flat-control, rgba(255, 255, 255, 0.07)) !important;
    border: 0 !important;
    border-radius: 0 !important;
}

#etCoverStudio > .et-bcc-sticky-cta .et-bcc-sticky-cta__btn,
#etCoverStudio #et-bcc-sticky-cta .et-bcc-sticky-cta__btn {
    background: var(--et-acc-teal, #2dd4bf) !important;
    color: #06110f !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
}

#etCoverStudio {
    background: transparent !important;
    padding: 0 !important;
}

#etCoverStudio .et-form-label {
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
}

#etCoverStudio #et-bcc-gen-ready-hint,
#etCoverStudio .et-bcc-sticky-cta__hint {
    display: none !important;
}

#etCoverStudio .et-ship-section-head__title,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card__title,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-heading {
    font-family: var(--et-gdocs-font, 'DM Sans', system-ui, sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    text-transform: none !important;
    color: #fff !important;
}

#etCoverStudio .et-bcc-preview-col,
#etCoverStudio .et-bcc-preview-panel {
    background: transparent !important;
    border-left: 0 !important;
}

#etCoverStudio .et-bcc-preview-modal__done,
#etCoverStudio .et-bcc-preview-modal .btn-et-primary {
    background: var(--et-acc-teal, #2dd4bf) !important;
    color: #06110f !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
}

#etCoverStudio .et-bcc-preview-modal__dialog,
#etCoverStudio .et-bcc-preview-modal__head,
#etCoverStudio .et-bcc-preview-modal__inspector {
    background: #000 !important;
    border-radius: 0 !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-template-group-label,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates-head,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates-label,
#etCoverStudio #et-bcc-templates .et-bcc-template-group-label {
    background: #000 !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-overlay-design {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-step2-block--pen,
#etCoverStudio .et-ship-step2-block--pen .et-ship-step2-details,
#etCoverStudio .et-ship-field--author-name,
#etCoverStudio #bookAuthorName {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
    text-align: left !important;
}

#etCoverStudio .et-ship-step2-block--pen .et-ship-step2-details {
    padding: 0 !important;
}

#etCoverStudio .et-bcc-overlay-menu[hidden],
#etCoverStudio .et-bcc-overlay-add[hidden] {
    display: none !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn:hover,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn.is-active {
    border: 0 !important;
    background: transparent !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-tabs__btn.is-active {
    box-shadow: inset 0 -2px 0 #2dd4bf !important;
    color: #fff !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-templates--genre {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.6rem !important;
}

#etCoverStudio .et-bcc-overlay-menu,
#etCoverStudio .et-bcc-overlay-menu--docked {
    background: #000 !important;
    border: 0 !important;
    box-shadow: none !important;
}

#etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-wrap,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-wrap {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    min-height: auto !important;
}

#etCoverStudio .et-bcc-preview-panel > .et-bcc-overlay-menu--docked {
    max-height: min(42vh, 24rem) !important;
    overflow-y: auto !important;
}

/*
 * Once the page splits into form + sticky cover the preview panel scrolls its
 * own overflow, so a panel positioned out of flow beside the cover was clipped
 * to nothing. Keep it docked under the artwork at every width; the cover is
 * fixed-aspect, so opening it still cannot move the art.
 */
@media (min-width: 1400px) {
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-panel > .et-bcc-overlay-menu--docked {
        max-height: min(34vh, 19rem) !important;
    }
}

#etCoverStudio .et-bcc-hit-layer {
    z-index: 4;
}

#etCoverStudio .et-bcc-hit {
    pointer-events: auto;
}

#etCoverStudio .et-ship-step2-block--studio .et-bcc-crop-modal,
#etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-modal {
    position: fixed !important;
    inset: 0 !important;
    grid-column: unset !important;
    grid-row: unset !important;
    width: auto !important;
    height: auto !important;
    z-index: 1200 !important;
}

#etCoverStudio .et-bcc-textarea {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 0 !important;
    border-radius: 0 !important;
}

#etCoverStudio .et-ship-cover-studio--step2 #et-bcc-prompt,
#etCoverStudio .et-ship-cover-studio--step2 textarea.et-bcc-textarea {
    border: 1px solid #2dd4bf !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-preview-panel,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-inspector,
#etCoverStudio .et-ship-step2-block--pen {
    background: #000 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

#etCoverStudio {
    background: transparent !important;
}

#etCoverStudio {
    background: transparent !important;
}

#etCoverStudio .et-ship-section-head--step2 {
    padding-bottom: 0.9rem !important;
}

#etCoverStudio .et-ship-step2-block--pen {
    padding-top: 0.45rem !important;
}

#etCoverStudio .et-bcc-genre-bar,
#etCoverStudio .et-bcc-art-side--ship {
    padding: 0 !important;
    margin: 0 0 0.55rem !important;
    border: 0 !important;
    background: transparent !important;
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-card--art .et-bcc-card__head:not(:has(.et-bcc-quota-hint:not([hidden]))) {
    display: none !important;
}

@media (min-width: 1400px) {
    #etCoverStudio {
        column-gap: 1.75rem !important;
        row-gap: 0 !important;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-workspace__controls,
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-inspector {
        padding-top: 0.2rem !important;
    }
}

#etCoverStudio .et-bcc-preview-col,
#etCoverStudio .et-bcc-preview-panel {
    background: #000 !important;
}

#etCoverStudio .et-bcc-preview-panel {
    padding: 0.7rem 0.85rem 0.85rem !important;
    box-sizing: border-box;
}

#etCoverStudio {
    background: transparent !important;
}

#etCoverStudio .et-ship-section-head,
#etCoverStudio .et-ship-section-head--step2 {
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (min-width: 1400px) {
    #etCoverStudio > .et-ship-section-head--step2 {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        background: transparent !important;
    }
}

@media (min-width: 1400px) {
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-preview-col,
    #etCoverStudio .et-ship-step2-block--studio .et-bcc-workspace--ship > .et-bcc-preview-col {
        grid-row: 2 / -1 !important;
    }
}

#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-el-control,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-el-control--active,
#etCoverStudio .et-ship-cover-studio--step2 .et-bcc-el-control--off {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}