/* ==========================================================================
   The Press Kit — Social Multi-Export (/darkroom/social-resize/)

   Adds the preset checklist, live crop-thumbnail strip, and two-column
   stage layout on top of the shared dk-* instrument components. Flat solid
   colors only, --pt-*/--color-* tokens — no gradients, no shimmer. Rendered
   crop thumbnails on <canvas> are the sole image exemption (house rule).
   ========================================================================== */

/* --- Two-column stage: preview + checklist -------------------------------- */
.pk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 780px) {
    .pk-layout {
        grid-template-columns: 1fr;
    }
}

.pk-focal-hint {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    color: var(--pt-text-muted);
}

/* --- Preset checklist ----------------------------------------------------- */
.pk-presets {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 520px;
    overflow-y: auto;
    padding: 1rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 0.5rem;
}

.pk-group__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--pt-border);
    margin-bottom: 0.5rem;
}

.pk-group__name {
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.pk-group__toggles {
    display: inline-flex;
    gap: 0.25rem;
}

.pk-group__toggle {
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pt-text-secondary);
    background: transparent;
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.25rem;
    padding: 0.1875rem 0.4375rem;
    cursor: pointer;
    transition: color var(--pt-dur) var(--pt-ease),
                border-color var(--pt-dur) var(--pt-ease);
}

.pk-group__toggle:hover {
    color: var(--pt-text);
    border-color: var(--pt-accent);
}

.pk-preset {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0;
    cursor: pointer;
}

.pk-preset input {
    accent-color: var(--pt-accent);
    width: 1rem;
    height: 1rem;
    flex: none;
}

.pk-preset__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--pt-text-secondary);
}

.pk-preset__dims {
    flex: none;
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

/* --- Live crop-preview thumbnails ----------------------------------------- */
.pk-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.875rem;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: 0.5rem;
}

.pk-thumbs__empty {
    font-size: 0.8125rem;
    color: var(--pt-text-muted);
    margin: 0;
}

.pk-thumb {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    width: 120px;
}

.pk-thumb__canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--pt-border-strong);
    border-radius: 0.25rem;
    background: var(--pt-surface-raised);
}

.pk-thumb__canvas.is-upscaled {
    border-color: var(--pt-accent);
}

.pk-thumb__cap {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.pk-thumb__name {
    font-size: 0.6875rem;
    line-height: 1.2;
    color: var(--pt-text-secondary);
}

.pk-thumb__dim {
    font-family: var(--pt-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
}

.pk-thumb__from {
    font-family: var(--pt-font-ui);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-accent);
}

.pk-thumb__from:empty {
    display: none;
}

/* --- Mobile: preview above, presets below, thumbs as a scroll strip ------- */
@media (max-width: 640px) {
    /* Drop the internal checklist scroll so the list flows with the page
       instead of trapping a nested scroll region on a phone. */
    .pk-presets {
        max-height: none;
        overflow-y: visible;
    }

    /* One horizontal-scroll strip so live crops never push the presets far
       down the page. */
    .pk-thumbs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pk-thumb { flex: 0 0 auto; }

    /* Touch tap targets ≥40px on the checklist. */
    .pk-preset {
        padding: 0.5rem 0;
        min-height: 2.5rem;
    }

    .pk-group__toggle { padding: 0.375rem 0.625rem; }
}