/* ==========================================================================
   Export profile editor - the three-pane dialog shared by the Profiles screen
   and the upload flow.

   Settings sit in the middle with a preview either side: the chosen design on
   the left, the sheet it prints onto on the right. Both panes are placed by
   grid rather than DOM order, so the form still comes first for keyboard use.
   ========================================================================== */

.pf-split {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 330px);
    gap: 0;
    padding: 0;
    overflow: hidden;
    align-items: stretch;
}

.pf-settings     { grid-column: 2; min-width: 0; padding: 20px; overflow-y: auto; }
.pf-pane-voucher { grid-column: 1; grid-row: 1; border-right: 1px solid var(--border); }
.pf-pane-page    { grid-column: 3; grid-row: 1; border-left:  1px solid var(--border); }

.pf-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    overflow-y: auto;
}

.pf-pane-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 12px 14px 10px; flex: none;
}
.pf-pane-head h3 {
    margin: 0; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-3);
}

.pf-pane-note {
    margin: 0; padding: 0 14px 14px;
    font-size: .72rem; color: var(--text-3); line-height: 1.45;
}

/* Each stage is a fixed box that centres its shrink-wrapper.
   The height is deliberately explicit rather than flexed: the fitting maths
   needs to know how much room it has *before* it scales anything, and a
   flex-sized stage would depend on the very content being fitted. */
.pf-stage {
    display: grid; place-items: center;
    padding: 0 14px 12px;
    overflow: hidden;
    flex: none;
}
.pf-stage-voucher { height: 260px; }
.pf-stage-page    { height: 420px; }

/* The wrapper is the layout box: it is sized to the *scaled* result and clips
   the full-size iframe transformed inside it. Same approach as the export
   screen's paper shadow, which is the one that behaves. */
.pf-shrink {
    overflow: hidden;
    line-height: 0;
    max-width: 100%;
}
.pf-stage iframe {
    border: 0; display: block; background: transparent;
    transform-origin: top left;
}

/* The sheet is a printed page - white in either theme. The aspect ratio is a
   placeholder for the moment before the first render; once a render lands the
   box is sized in pixels, and those already carry the true proportions. */
.pf-paper {
    background: #fff;
    box-shadow: var(--shadow);
    aspect-ratio: 210 / 297;
    height: 100%;
}

/* ── Sheet size picker ───────────────────────────────────────────────
   Chosen the same way as a design: a row of cards, each drawn at the real
   proportions of the sheet it selects. */

.pf-paper-list { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 420px) { .pf-paper-list { grid-template-columns: repeat(2, 1fr); } }

.pf-paper-opt {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 10px 6px 8px;
    border: 2px solid var(--border); border-radius: 10px;
    background: var(--surface-2); cursor: pointer;
    font-family: inherit; color: var(--text-2);
    transition: border-color .12s, background .12s;
}
.pf-paper-opt:hover { border-color: var(--border-2); }
.pf-paper-opt[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); }
.pf-paper-opt[aria-checked="true"] b { color: var(--brand); }

/* The chip is the sheet in miniature; its height is fixed so the four cards
   line up and only the widths differ, which is what makes A3/A4/A5 read as
   one shape and Letter as another. */
.pf-paper-chip {
    display: block; height: 34px;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: 2px;
}
.pf-paper-opt[aria-checked="true"] .pf-paper-chip { border-color: var(--brand); background: #fff; }

.pf-paper-opt b  { font-size: .82rem; font-weight: 700; line-height: 1; }
.pf-paper-opt em { font-style: normal; font-size: .64rem; color: var(--text-3); text-align: center; }

/* A pane with nothing to show yet, or one whose render failed. */
.pf-stage.is-empty::after {
    content: attr(data-empty);
    font-size: .78rem;
    color: var(--text-3);
    text-align: center;
    line-height: 1.5;
    padding: 0 6px;
}
.pf-stage.is-empty > * { display: none; }

/* ── Narrow ──────────────────────────────────────────────────────────
   One column, previews above the settings so the design stays visible
   while the form is edited rather than being pushed off-screen. */
@media (max-width: 1000px) {
    .pf-split { grid-template-columns: 1fr 1fr; overflow-y: auto; }

    .pf-settings     { grid-column: 1 / -1; grid-row: 2; overflow: visible; }
    .pf-pane-voucher { grid-column: 1; grid-row: 1; border-right: 1px solid var(--border); }
    .pf-pane-page    { grid-column: 2; grid-row: 1; border-left: 0; }

    .pf-pane {
        overflow: visible;
        border-bottom: 1px solid var(--border);
    }
    .pf-stage-voucher { height: 190px; }
    .pf-stage-page    { height: 300px; }
}

@media (max-width: 560px) {
    .pf-split { grid-template-columns: 1fr; }
    .pf-settings     { grid-row: 3; }
    .pf-pane-voucher { grid-column: 1; grid-row: 1; border-right: 0; }
    .pf-pane-page    { grid-column: 1; grid-row: 2; }
}