/*
 * Export layout and file splitting (2 Oct 2026).
 *
 * Linked by templates/partials/export/export-layout-options.php, so Ship's
 * Export step and the public KDP publisher tool share one copy. The class names
 * are new on purpose: the Export step's old folds carry rules in five
 * stylesheets (workshop-ship.css, studio-flat.css, write-studio-dash-align.css
 * and others), and new names keep this layout out of that cascade.
 *
 * Owner: "step 4 export looks a little sloppy ... especially the new sections
 * for splitting the file. Also the layout options and the preview should be in
 * 2 columns side by side so the user can see the changes in real time".
 */

/* ── Layout: controls beside the live preview ─────────────────────────── */

.et-export-layout-preview {
    container-type: inline-size;
    container-name: et-export-layout;
}

.et-export-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 12px;
}

/* Side by side once there is room for a readable page next to the fields. */
@container et-export-layout (min-width: 720px) {
    .et-export-layout-grid.has-preview {
        grid-template-columns: minmax(300px, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
    .et-export-layout-grid.has-preview .et-export-layout-grid__preview {
        position: sticky;
        top: 60px;
    }
    .et-export-layout-grid.has-preview .et-export-live-preview__mount {
        height: min(72vh, 760px);
    }
}

.et-export-layout-grid__controls {
    min-width: 0;
}

.et-export-fields__head {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--d2-sec, #A1A6AE);
}

.et-export-fields + .et-export-fields__head {
    margin-top: 20px;
}

.et-export-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px 14px;
}

.et-export-field {
    min-width: 0;
}

/* Long option names ("KDP / Kindle (EPUB + front matter)", "Standard (Chapter
   N: Title)") get a full row, so a closed select reads whole; the short
   formatting fields pair up. */
/* Only beside a preview: alone (the public KDP tool) the column is the whole
   width and a full row would be a 1,200px select. */
.et-export-layout-grid.has-preview .et-export-layout-grid__controls > div.et-export-fields:first-of-type {
    grid-template-columns: minmax(0, 1fr);
}

.et-export-layout-grid.has-preview #etExportLayoutCustomize > .et-export-field:first-child {
    grid-column: 1 / -1;
}

.et-export-field .et-form-label {
    display: block;
    margin: 0 0 4px;
}

.et-export-field select {
    width: 100%;
}

.et-export-field__hint {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--d2-muted, #7C828B);
}

.et-export-field__hint:empty {
    display: none;
}

.et-export-field--check {
    display: flex;
    align-items: flex-end;
}

.et-export-layout-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    font-size: 13px;
    color: var(--d2-text, #E4E6EA);
    cursor: pointer;
}

.et-export-layout-check .form-check-input {
    flex: none;
    margin: 0;
}

.et-export-layout-reset {
    margin-top: 16px;
}

/* The preview: a page on its own surface, the status beside its title. */
.et-export-live-preview {
    border: 1px solid var(--d2-line, #1C1E22);
    background: var(--d2-card, #0F1013);
}

.et-export-live-preview__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid var(--d2-line, #1C1E22);
}

.et-export-live-preview .et-export-preview__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--d2-strong, #F4F5F7);
}

.et-export-live-preview .et-export-preview__title .et-dash-section-icon {
    margin: 0;
    font-size: 14px;
}

.et-export-live-preview__status {
    font-size: 12px;
    color: var(--d2-muted, #7C828B);
}

.et-export-live-preview__mount {
    height: 560px;
}

.et-export-live-preview__mount > p {
    margin: 0;
    padding: 12px;
}

.et-export-live-preview__mount .et-export-preview__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

/* ── Split into several files ─────────────────────────────────────────── */

.et-ship-split__body {
    display: grid;
    gap: 16px;
    max-width: 760px;
    padding: 4px 0 8px;
}

.et-ship-split__lede,
.et-ship-split__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--d2-sec, #A1A6AE);
}

.et-ship-split__note {
    font-size: 12px;
    color: var(--d2-muted, #7C828B);
}

.et-ship-split__every .et-form-label {
    display: block;
    margin: 0 0 4px;
}

.et-ship-split__every-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.et-ship-split__every-row input[type="number"] {
    width: 96px;
    flex: none;
}

.et-ship-split__hint {
    font-size: 13px;
    color: var(--d2-muted, #7C828B);
}

.et-ship-split__hint.is-on {
    color: var(--d2-text, #E4E6EA);
}

.et-ship-split__hint.is-warn {
    color: var(--et-warning, #F59E0B);
}

.et-ship-split__matter {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.et-ship-split__matter > legend.et-form-label {
    float: none;
    width: auto;
    margin: 0 0 6px;
    padding: 0;
    font-size: 13px;
    line-height: 1.4;
}

.et-ship-split__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.et-ship-split__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px;
    background: var(--d2-card-2, #16171B);
    border: 1px solid var(--d2-line, #1C1E22);
    cursor: pointer;
}

.et-ship-split__option:hover {
    border-color: var(--d2-field-line, #26292E);
}

.et-ship-split__option:has(> input:checked) {
    border-color: var(--d2-accent, #2DD4BF);
}

.et-ship-split__option > input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--d2-accent, #2DD4BF);
}

.et-ship-split__option-text {
    display: grid;
    gap: 3px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--d2-sec, #A1A6AE);
}

.et-ship-split__option-text strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--d2-strong, #F4F5F7);
}

/* ── Ship's format tiles: flush with the text around them ─────────────── */

/* A Bootstrap row whose negative margins another sheet zeroed left every
   tile 6px in from the copy above it. A plain grid has no gutter to undo.
   The doubled id outranks the step's older body-class chains. */
#etShipWizStep4:not(#et-x) .et-ship-export-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

#etShipWizStep4:not(#et-x) .et-ship-more-formats .et-ship-export-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 10px 0 0;
}

#etShipWizStep4:not(#et-x) .et-ship-export-grid > [class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Tiles in one row match heights when a label wraps ("ElevenLabs .zip" on a phone). */
#etShipWizStep4:not(#et-x) .et-ship-export-grid > [class*="col-"] > .et-ship-export-tile,
#etShipWizStep4:not(#et-x) .et-ship-export-grid > [class*="col-"] > form > .et-ship-export-tile {
    height: 100%;
}

@media (max-width: 575.98px) {
    #etShipWizStep4:not(#et-x) .et-ship-export-grid--primary {
        grid-template-columns: minmax(0, 1fr);
    }
    #etShipWizStep4:not(#et-x) .et-ship-more-formats .et-ship-export-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}