/*
 * cover-studio-public.css — how the cover studio sits on the public tool page.
 *
 * Layout only. The studio itself — every control, the preview, the type
 * card, the rules list — is templates/tools/cover-studio.php laid out by
 * cover-studio-base.css and cover-studio.css, exactly as on Ship step 2, and
 * this file must never restyle any of it. What differs is the page around it:
 * the public page has no Kestrel column, no progress column, no step heading
 * and no pen-name block, and it has a sticky site nav. So the grid gets a
 * wider preview column, the preview starts on the first row and sticks below
 * the nav, the "generate first" note sits with the type controls it explains
 * rather than at the top of the page, and on a phone the cover appears once,
 * full width, where Generate was pressed — not as Ship's sticky strip.
 *
 * Loaded by public/tool.php only; Ship never sees it. Keyed on the frame's
 * finish class, which only the public page has, and written at one id more
 * than cover-studio.css because those rules carry !important and must be
 * outranked here without touching them.
 */

.et-cover-studio-frame--download {
    padding: 0.25rem 0 0;
}

/* Quota sits with Artwork, just under Start over. It used to be the public
   page's first word (order 5), which put a status chip above the reset. */
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--art > .et-bcc-card__head {
    order: 24 !important;
    margin: 0 !important;
}
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-quota-hint {
    display: inline-block;
    margin: 0 0 0.25rem !important;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    background: rgba(255, 255, 255, 0.04);
}

/* The "generate artwork first" note belongs with the type controls it
   explains — under the Typography label, as on Ship (cover-studio.css §10). */
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-step2-wait {
    order: 70 !important;
    grid-row: auto !important;
}

@media (min-width: 992px) {
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 36%) !important;
        column-gap: 2rem !important;
    }
    /* No heading spans row 1 here, so the cover starts at the top. */
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-col {
        grid-column: 2 !important;
        grid-row: 1 / span 99 !important;
        order: 0 !important;
        align-self: stretch !important;
        position: relative !important;
        display: block !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
    }
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel {
        position: sticky !important;
        top: calc(var(--et-public-nav-h, 4.5rem) + 0.75rem) !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Cover height = width / 0.625. Reserve the nav, the toolbar, add-text,
       the download and the collapsed resize row — not the open slider list. */
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-wrap {
        width: min(100%, calc((100dvh - var(--et-public-nav-h, 4.5rem) - 22rem) * 0.625)) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

/* Stacked: one column, and the cover once, where Generate was pressed. Ship's
   phone layout turns the preview into a sticky strip above the type controls;
   on a public page that strip read as a second header. */
@media (max-width: 991.98px) {
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-col {
        order: 42 !important;
        grid-column: 1 !important;
        grid-row: auto !important;
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 0 1.25rem !important;
        z-index: auto !important;
    }
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        max-height: none !important;
        height: auto !important;
        padding: 0.75rem !important;
    }
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-preview-panel > .et-bcc-preview-wrap {
        /* Tall enough to read, short enough that add-text and download sit
           on the same screen as the picture. */
        width: min(100%, 22rem, calc(46dvh * 0.625)) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text {
        grid-row: auto !important;
    }
}

/* An older sheet pins the typography card to grid row 2, and a row-pinned item
   is placed before every auto-placed one whatever its order — so the moment
   artwork existed the card jumped above the description and Generate. Ship
   has a step heading in row 1 and lives with it; here the card takes its
   place in the flow (order 70: after the title and author fields). */
@media (min-width: 992px) {
    .et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text {
        grid-row: auto !important;
    }
}

/* ── Margins ──────────────────────────────────────────────────────────────
 * The studio's blocks disagree about their left inset: the panels that carry
 * a surface (Genre, the description grid, the cover-text fields) pad by 14px,
 * while the bare ones between them (the status line, the upload hint, the
 * optional-details summary, the quota chip) have none. Inside the dashboard
 * shell that is invisible — the page gutter absorbs it. Here the studio sits
 * 12px from the window, so those lines land 12px from the edge of the screen
 * while their neighbours sit at 26, and the column reads as ragged.
 *
 * One gutter, applied to the bare blocks, so every line starts on the same
 * vertical. Ship is untouched: this file is the public page's only.
 */
.et-cover-studio-frame--download {
    --et-cs-gutter: 0.875rem;
    padding-inline: clamp(0.25rem, 1vw, 0.75rem);
}
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card__head,
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-actions,
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-upload-hint,
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-status,
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-inspector__chrome,
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-optional-fields--ship,
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-step2-wait {
    padding-inline: var(--et-cs-gutter) !important;
}
/* The templates box and the accordions draw their own edge, so they keep it —
   only their contents move in to meet the same line. */
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc > summary {
    padding-inline: var(--et-cs-gutter) !important;
}
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-acc > :not(summary) {
    margin-inline: var(--et-cs-gutter) !important;
}
/* The type card's own children sat at 9px against the panels' 14. */
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-card--text > .et-bcc-studio-tabs > .et-bcc-tab-panel > .et-bcc-panel-lede {
    padding-inline: var(--et-cs-gutter) !important;
}
/* A hint under a field is that field's, so it lines up with the field, not
   with the block's edge — and sits against the upload button it describes. */
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-upload-hint {
    margin-top: -0.85rem !important;
}

/* Cover text leads (order 17–22): title, author, optional lines, genre.
 * Then the picture, then Generate. The public page used to lift only the
 * title above the button and leave everything else; both surfaces now share
 * the one order in cover-studio.css. */
/* The labels line up with the panels' 14px inset like every other bare line. */
.et-cover-studio-frame--download #etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio#etCoverStudio .et-bcc-section-label {
    padding-inline: var(--et-cs-gutter) !important;
}