/* Veranda demo on phones and small tablets. The 3D preview stays on screen
   and the options become a step-by-step panel under it: tabs per step, one
   step's choices at a time in compact swipe rows, the estimate pinned to the
   bottom with Next (Generate quote on the last step). Desktop keeps the
   sidebar from configurator.css; the fence demo does not load this file. */

.cfg-steps,
#nextStepBtn { display: none; }

@media (max-width: 900px) {
    body.page-cfg { height: 100dvh; min-height: 0; overflow: hidden; }
    .cfg-app { grid-template-rows: minmax(0, 1fr) auto; }
    .cfg-stage { height: auto; min-height: 0; }

    .cfg-side {
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px rgba(21, 23, 31, 0.06);
        z-index: 5;
    }
    /* The title stays for screen readers; the tabs say where you are. */
    .cfg-side-head {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        padding: 0;
        border: 0;
    }

    /* Step tabs */
    .cfg-steps {
        position: relative;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 10px var(--space-4);
        border-bottom: 1px solid var(--hairline);
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .cfg-steps::-webkit-scrollbar { display: none; }
    .cfg-step {
        flex: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        color: var(--ink-2);
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
    }
    .cfg-step .n {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }
    .cfg-step[aria-current="step"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
    .cfg-step[aria-current="step"] .n { color: inherit; opacity: 0.7; }
    .cfg-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

    /* One step at a time */
    .cfg-scroll {
        flex: none;
        max-height: min(36dvh, 280px);
        overflow-y: auto;
        padding: 14px var(--space-4) 16px;
    }
    .cfg-scroll .opt-group { display: none; }
    .cfg-scroll .opt-group.is-current { display: block; }
    .cfg-scroll .opt-group + .opt-group { margin-top: 0; }
    .cfg-scroll .opt-group.is-current ~ .opt-group.is-current { margin-top: 16px; }
    /* The tab already names the step; only a second group in a step (a
       side's top section) keeps its heading. */
    .cfg-scroll .opt-group legend {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .cfg-scroll .opt-group.is-current ~ .opt-group.is-current legend {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        margin-bottom: 8px;
    }

    /* Choices: one swipe row per group; the next card peeks in at the edge */
    .opt-grid {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: 0 calc(-1 * var(--space-4));
        padding: 2px var(--space-4) 4px;
        scroll-snap-type: x proximity;
        scroll-padding: 0 var(--space-4);
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }
    .opt-grid::-webkit-scrollbar { display: none; }
    .opt-grid .opt-card {
        flex: 0 0 auto;
        width: 148px;
        min-height: 64px;
        scroll-snap-align: start;
    }
    .opt-row { flex-wrap: wrap; }
    .opt-row .opt { min-height: 44px; }

    .dim { grid-template-columns: 52px minmax(0, 1fr) 80px; }
    .dim + .dim { margin-top: var(--space-4); }
    input[type="range"] { height: 32px; }

    .demo-note { margin-top: 14px; padding-top: 10px; }
    .cfg-side:not([data-last]) .demo-note { display: none; }

    /* Estimate bar: Next until the last step, then Generate quote */
    .cfg-total {
        position: static;
        padding: 10px var(--space-4) calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .cfg-total .amount { font-size: 20px; }
    #nextStepBtn { display: inline-flex; min-width: 120px; justify-content: center; }
    .cfg-side[data-last] #nextStepBtn { display: none; }
    .cfg-side:not([data-last]) #generateQuoteBtn { display: none; }

    .cfg-side[data-view="done"] .cfg-steps { display: none; }
    .cfg-side[data-view="done"] .cfg-done { max-height: 62dvh; }
}

/* Phones held sideways: preview left, steps right, both on screen */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
    .cfg-app { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); }
    .cfg-side { border-top: 0; border-left: 1px solid var(--border); box-shadow: none; }
    .cfg-scroll { flex: 1; max-height: none; }
    .cfg-side[data-view="done"] .cfg-done { max-height: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .opt-grid, .cfg-steps { scroll-behavior: smooth; }
}

/* The model is a persistent choice on desktop and phone. */
#viewerFrame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.viewer-loading { z-index: 3; pointer-events: auto; padding: var(--space-6); }
.viewer-loading[hidden], .viewer-caption[hidden], .cfg-scroll .opt-group[data-veranda-only][hidden], .cfg-step[hidden] { display: none; }
.viewer-caption { position: absolute; top: var(--space-4); right: var(--space-4); padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: 12px; pointer-events: none; }
.cfg-model { flex: none; padding: var(--space-4) 20px; border-bottom: 1px solid var(--border); }
.cfg-model .annotation { display: block; margin-bottom: var(--space-2); }
.model-switch { display: flex; }
.model-switch button { flex: 1; min-height: 40px; }
.model-switch [aria-pressed="true"] { background: var(--blue-tint); color: var(--ink); font-weight: 600; }
#cubeNote { margin-top: var(--space-2); font-size: 12.5px; color: var(--muted); }
.cfg-side[data-view="done"] .cfg-model { display: none; }
@media (max-width: 900px) {
    .cfg-side { box-shadow: none; }
    .cfg-model { padding: var(--space-2) var(--space-4); }
    .cfg-model .annotation { display: none; }
    #cubeNote { margin-top: 4px; }
    .cfg-step { border-radius: var(--radius-md); min-height: 40px; }
    .cfg-step[aria-current="step"] { background: var(--blue-tint); border-color: var(--border); color: var(--ink); }
    .viewer-caption { top: var(--space-2); right: var(--space-2); max-width: 52%; font-size: 11px; }
    .cfg-scroll { max-height: min(30dvh, 240px); }
}
@media (prefers-reduced-motion: reduce) { .load-line::after { animation: none; width: 100%; } }
#retryViewer[hidden], .mini-record dl > div[hidden] { display: none; }
.gable-note { margin-top: var(--space-2); font-size: 12.5px; color: var(--muted); }
.opt:disabled { cursor: not-allowed; color: var(--muted); background: var(--ground); }

/* Sub-options and fabric ranges come and go with their parent choice. */
.cfg-scroll .opt-group[hidden], .cfg-scroll .opt-row[hidden] { display: none; }
.pct .dim { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
.pct .dim input { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .pct .dim { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Dashboard viewer (keyed) and local viewer share the stage; the inactive one is hidden but keeps its size. */
.dash-viewer { position: absolute; inset: 0; }
.dash-viewer.is-off, #viewerFrame.is-off { visibility: hidden; }