/**
 * PrintifySign — Display Configure View Styles
 *
 * File:    assets/display/display-configure.css
 * Phase:   v2.0 Phase 4C-1 — Configure View Foundation
 * Status:  NEW file. Scoped to body.psd-display-active.psd-d-mode-configure
 *          (double scope per PHASE-4C-CONFIGURE-FLOW-BLUEPRINT §16 Guard 5).
 *
 * ─── PURPOSE ─────────────────────────────────────────────────────────────
 *
 * The Configure page is a deliberately calm vertical column:
 *
 *   Header  (back link · product name · 1-line spec)
 *   Visual  (large silhouette, reusing card variants for shell continuity)
 *   Decisions (size → quantity → artwork → subtotal)
 *   CTA     (Add to cart)
 *   Trust   (production turnaround line)
 *
 * Single column desktop AND mobile. No two-column layouts. No tabs. No
 * accordions. No sidebars. Whitespace IS the design.
 *
 * ─── BLUEPRINT CONFORMANCE ───────────────────────────────────────────────
 *   §4.3 — Whitespace spacing table (tokens only)
 *   §5   — .psd-d-c-* selector vocabulary
 *   §6   — Pill-segment sizes, stepper qty, conversational upload
 *   §8   — Mobile floor refinements
 *   §11  — Pacing: only the price has a 180ms (dur-fast) fade; nothing
 *          else autoplays or scroll-animates
 *   §14  — Constraints (NOT SaaS-dense, NOT cinematic, calm only)
 *   §16 Guard 1 — Zero new tokens; every value via --psd-l-*
 *   §16 Guard 5 — Every selector double-scoped under both body classes
 *
 * ─── NO !important ANYWHERE ──────────────────────────────────────────────
 */


/* ════════════════════════════════════════════════════════════════════════
   1. PAGE WRAPPER
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure {
    background: var(--psd-l-paper);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-page {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: calc(var(--psd-l-nav-height) + var(--psd-l-section-vpad)) var(--psd-l-section-gutter) var(--psd-l-section-vpad);
    display: flex;
    flex-direction: column;
}


/* ════════════════════════════════════════════════════════════════════════
   2. HEADER (back link + product name + spec)
   Blueprint §4.2
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure .psd-d-c-header {
    display: flex;
    flex-direction: column;
    gap: var(--psd-l-space-3);
    margin-bottom: var(--psd-l-space-7);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    color: var(--psd-l-text-secondary);
    text-decoration: none;
    line-height: 1;
    padding: 4px 0;
    transition: color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-back:hover {
    color: var(--psd-l-ink);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-back-arrow {
    display: inline-block;
    font-size: 1.05em;
    line-height: 1;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-title {
    font-family: var(--psd-l-font-display);
    font-size: clamp(28px, 4.2vw, 40px);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1.1;
    letter-spacing: -0.6px;
    color: var(--psd-l-ink);
    margin: 0;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-subtitle {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-body);
    line-height: var(--psd-l-leading-relaxed);
    color: var(--psd-l-text-secondary);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════════
   3. VISUAL (reuses .psd-d-visual-- silhouette variants from display.css)
   Blueprint §4.2 + Decision 1 (A): consistent silhouette, larger scale
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure .psd-d-c-visual {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto var(--psd-l-space-9);
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(ellipse 60% 50% at 50% 35%, rgba(255, 245, 224, 0.12), transparent 70%),
        linear-gradient(160deg, #1a1a18 0%, #0d0d0c 100%);
    border-radius: var(--psd-l-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* The .psd-d-visual--{variant} .psd-d-visual-silhouette rules live in
   display.css (already enqueued for the Display body class). They apply
   here automatically because the Configure visual uses the same
   .psd-d-visual--{variant} class. The silhouette is sized as a
   percentage of its parent, so the larger 720px wrapper makes it bigger
   naturally — no override needed. Shell-continuity win per §3 Move 1
   reasoning embedded in Decision 1 (A). */


/* ════════════════════════════════════════════════════════════════════════
   4. DECISIONS COLUMN
   Blueprint §4.2 (single column, ~640px max) + §4.3 (32px row gap)
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure .psd-d-c-decisions {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--psd-l-space-6);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-eyebrow {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-eyebrow);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--psd-l-text-secondary);
    margin: 0 0 var(--psd-l-space-1);
    align-self: flex-start;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-row {
    display: flex;
    flex-direction: column;
    gap: var(--psd-l-space-3);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-row-label {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: 0.4px;
    color: var(--psd-l-text-secondary);
    line-height: 1;
}


/* ════════════════════════════════════════════════════════════════════════
   5. SIZE — pill segments
   Blueprint §6.1
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure .psd-d-c-size-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--psd-l-space-3);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-size-option {
    flex: 0 1 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--psd-l-border-light);
    border-radius: var(--psd-l-radius-md);
    cursor: pointer;
    font-family: var(--psd-l-font-body);
    color: var(--psd-l-text-primary);
    text-align: left;
    opacity: 0.85;
    transition: opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                border-color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-size-option:hover {
    opacity: 1;
    border-color: var(--psd-l-border-dark);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-size-option.is-active {
    opacity: 1;
    background: var(--psd-l-ink);
    border-color: var(--psd-l-ink);
    color: var(--psd-l-text-inverse);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-size-option-label {
    font-size: var(--psd-l-type-body);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: -0.1px;
    line-height: 1.1;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-size-option-spec {
    font-size: 12px;
    font-weight: var(--psd-l-weight-regular);
    letter-spacing: 0;
    opacity: 0.75;
    line-height: 1.2;
}


/* ════════════════════════════════════════════════════════════════════════
   6. QUANTITY — stepper
   Blueprint §6.2
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure .psd-d-c-qty {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--psd-l-border-light);
    border-radius: var(--psd-l-radius-md);
    overflow: hidden;
    align-self: flex-start;
    transition: border-color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-qty:hover {
    border-color: var(--psd-l-border-dark);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-qty-btn {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    color: var(--psd-l-ink);
    font-family: var(--psd-l-font-display);
    font-size: 18px;
    font-weight: var(--psd-l-weight-regular);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-qty-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-qty-input {
    width: 56px;
    height: 40px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--psd-l-border-light);
    border-right: 1px solid var(--psd-l-border-light);
    text-align: center;
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-body);
    font-weight: var(--psd-l-weight-medium);
    color: var(--psd-l-ink);
    line-height: 1;
    padding: 0;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-qty-input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.02);
}


/* ════════════════════════════════════════════════════════════════════════
   7. UPLOAD — three-state row (pre · file · defer)
   Blueprint §6.3
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-prose {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-body);
    line-height: var(--psd-l-leading-relaxed);
    color: var(--psd-l-text-secondary);
    margin: 0 0 var(--psd-l-space-3);
    max-width: 520px;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--psd-l-space-3);
    margin: 0 0 var(--psd-l-space-2);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--psd-l-ink);
    border-radius: var(--psd-l-radius-pill);
    color: var(--psd-l-ink);
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-meta);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-btn:hover {
    background: var(--psd-l-ink);
    color: var(--psd-l-text-inverse);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-or {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    color: var(--psd-l-text-secondary);
    line-height: 1;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-defer {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    color: var(--psd-l-text-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-defer:hover {
    color: var(--psd-l-gold-deep);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-hint {
    font-family: var(--psd-l-font-body);
    font-size: 12px;
    color: var(--psd-l-text-secondary);
    margin: 0;
    line-height: 1.4;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-error {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    color: var(--psd-l-gold-deep);
    margin: var(--psd-l-space-2) 0 0;
}

/* State machine — only the active state's contents are visible.
   Pre-state markup is static in PHP; file/defer markup is JS-rendered
   into .psd-d-c-upload-dynamic. */

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload[data-state="pre"] .psd-d-c-upload-dynamic {
    display: none;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload[data-state="file"] .psd-d-c-upload-pre,
body.psd-display-active.psd-d-mode-configure .psd-d-c-upload[data-state="defer"] .psd-d-c-upload-pre {
    display: none;
}

/* Confirmed-state shared visual */
body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-confirmed {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-body);
    line-height: var(--psd-l-leading-relaxed);
    color: var(--psd-l-text-primary);
    margin: 0 0 var(--psd-l-space-2);
    max-width: 520px;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-check {
    display: inline-block;
    color: var(--psd-l-gold-deep);
    font-weight: var(--psd-l-weight-medium);
    margin-right: 4px;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-filename {
    font-family: var(--psd-l-font-display);
    font-weight: var(--psd-l-weight-medium);
    color: var(--psd-l-ink);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-meta {
    color: var(--psd-l-text-secondary);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-actions {
    margin: 0;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-action {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    color: var(--psd-l-text-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
    line-height: 1.4;
    transition: color var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-action:hover {
    color: var(--psd-l-gold-deep);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-action-sep {
    color: var(--psd-l-text-secondary);
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
}


/* ════════════════════════════════════════════════════════════════════════
   8. SUBTOTAL summary
   Blueprint §6.4
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure .psd-d-c-summary {
    /* Slightly more breathing room before the price than other rows —
       the price IS the conclusion of the decision sequence. */
    margin-top: var(--psd-l-space-3);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-summary-block {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--psd-l-space-4);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-summary-amt {
    font-family: var(--psd-l-font-display);
    font-size: clamp(22px, 3.4vw, 28px);
    font-weight: var(--psd-l-weight-medium);
    letter-spacing: -0.4px;
    color: var(--psd-l-gold-deep);
    line-height: 1;
    transition: opacity var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-summary-amt.is-updating {
    opacity: 0;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-summary-note {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    color: var(--psd-l-text-secondary);
    line-height: 1.3;
}


/* ════════════════════════════════════════════════════════════════════════
   9. CTA — Add to cart
   Blueprint §7 (no mini-cart, no celebration; calm primary button)
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure .psd-d-c-cta-row {
    margin-top: var(--psd-l-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--psd-l-space-3);
    align-items: flex-start;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--psd-l-ink);
    border: 0;
    border-radius: var(--psd-l-radius-pill);
    color: var(--psd-l-text-inverse);
    font-family: var(--psd-l-font-display);
    font-size: var(--psd-l-type-body);
    font-weight: var(--psd-l-weight-medium);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--psd-l-dur-fast) var(--psd-l-ease-standard),
                transform var(--psd-l-dur-fast) var(--psd-l-ease-standard);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-cta:hover {
    background: var(--psd-l-gold-deep);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-cta:active {
    transform: translateY(1px);
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-cta.is-busy {
    opacity: 0.75;
    cursor: progress;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-cta[disabled] {
    cursor: not-allowed;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-cta-arrow {
    display: inline-block;
    line-height: 1;
}

body.psd-display-active.psd-d-mode-configure .psd-d-c-cta-error {
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    color: var(--psd-l-text-secondary);
    margin: 0;
    line-height: 1.4;
    max-width: 480px;
}


/* ════════════════════════════════════════════════════════════════════════
   10. TRUST line
   Blueprint §4.2 (small, body-secondary)
   ════════════════════════════════════════════════════════════════════════ */

body.psd-display-active.psd-d-mode-configure .psd-d-c-trust {
    margin: var(--psd-l-space-7) auto 0;
    max-width: 640px;
    font-family: var(--psd-l-font-body);
    font-size: var(--psd-l-type-meta);
    color: var(--psd-l-text-secondary);
    line-height: var(--psd-l-leading-relaxed);
    text-align: center;
}


/* ════════════════════════════════════════════════════════════════════════
   11. MOBILE — single-column already; just tighter spacing
   Blueprint §8
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {

    body.psd-display-active.psd-d-mode-configure .psd-d-c-page {
        padding-top: calc(var(--psd-l-nav-height) + var(--psd-l-section-vpad));
        /* section-vpad mobile floor is set platform-wide in display.css §8 */
    }

    body.psd-display-active.psd-d-mode-configure .psd-d-c-header {
        margin-bottom: var(--psd-l-space-5);
        gap: var(--psd-l-space-2);
    }

    body.psd-display-active.psd-d-mode-configure .psd-d-c-visual {
        max-width: 100%;
        max-height: 360px;
        aspect-ratio: 4 / 3;
        margin-bottom: var(--psd-l-space-7);
    }

    body.psd-display-active.psd-d-mode-configure .psd-d-c-decisions {
        gap: var(--psd-l-space-5);
    }

    body.psd-display-active.psd-d-mode-configure .psd-d-c-qty-btn {
        width: 44px;
        height: 44px;
    }

    body.psd-display-active.psd-d-mode-configure .psd-d-c-qty-input {
        height: 44px;
    }

    body.psd-display-active.psd-d-mode-configure .psd-d-c-cta {
        width: 100%;
        justify-content: center;
        padding: 16px 24px;
    }

    body.psd-display-active.psd-d-mode-configure .psd-d-c-cta-row {
        align-items: stretch;
    }

    body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-hint {
        font-size: 12px;
    }
}


/* ════════════════════════════════════════════════════════════════════════
   12. REDUCED MOTION — neutralize the price fade and any state transitions
   Blueprint §11 + Platform DNA Rule 8
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    body.psd-display-active.psd-d-mode-configure .psd-d-c-summary-amt,
    body.psd-display-active.psd-d-mode-configure .psd-d-c-summary-amt.is-updating,
    body.psd-display-active.psd-d-mode-configure .psd-d-c-size-option,
    body.psd-display-active.psd-d-mode-configure .psd-d-c-qty,
    body.psd-display-active.psd-d-mode-configure .psd-d-c-qty-btn,
    body.psd-display-active.psd-d-mode-configure .psd-d-c-upload-btn,
    body.psd-display-active.psd-d-mode-configure .psd-d-c-cta,
    body.psd-display-active.psd-d-mode-configure .psd-d-c-back {
        transition: none;
    }
    body.psd-display-active.psd-d-mode-configure .psd-d-c-summary-amt.is-updating {
        opacity: 1;
    }
}