/* nav.css — one screen at a time at every width, the rail with Back and Start over (2026-09-09, nav fork). */

/* one active block in the flow, at every width (the phone-only rule in designs.css is superseded) */
body[data-show] .builder-flow > .step-block{ display:none !important; }
body[data-show="use"] #use{ display:block !important; }
body[data-show="step2"] #step2:not([hidden]){ display:block !important; }
body[data-show="result"] #result:not([hidden]){ display:block !important; }
#step3{ display:none !important; } /* the review builds from the plan-details primary; the "ready to review?" screen is retired */
#step2 .sb-head #reviewStale{ display:block; margin:.75rem 0 0; }

/* the rail */
.steps{ position:static !important; top:auto; z-index:auto; background:transparent !important; box-shadow:none !important; border:0 !important; border-bottom:2px solid var(--poster-blue, #004890) !important; border-radius:0 !important; padding:.25rem 0 .75rem !important; margin:0 0 1.25rem !important; backdrop-filter:none !important; }
.rail-bar{ display:flex; align-items:center; gap:1rem; justify-content:space-between; padding:.25rem 0 .5rem; }
.rail-bar .rail-back{ min-height:2.75rem; font-family:var(--font-sans); font-weight:600; color:var(--poster-blue, #004890); }
.rail-bar .rail-path{ margin-left:auto; font-family:var(--font-sans); font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--poster-blue, #004890); border:2px solid var(--poster-blue, #004890); padding:.3rem .6rem; }
.rail-bar .rail-start-over{ min-height:2.75rem; font-family:var(--font-sans); font-weight:600; }
.steps .track{ display:none; }
.steps ol.steps-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:.5rem; }
.steps li{ cursor:pointer; border-radius:0 !important; box-shadow:none !important; background:transparent !important; border-top:.3rem solid var(--border); padding:.6rem .25rem .5rem !important; align-items:flex-start !important; }
.steps li.is-current{ border-top-color:var(--poster-yellow, #FFE018); }
.steps li.is-done{ border-top-color:var(--poster-blue, #004890); }
.steps li[aria-disabled="true"]{ cursor:default; opacity:.5; }
.steps li .step-num{ width:1.75rem !important; height:1.75rem !important; border-radius:50% !important; font-family:var(--font-sans) !important; font-size:.8125rem !important; font-weight:700; display:inline-flex; align-items:center; justify-content:center; background:var(--paper-2, #eee); color:var(--ink) !important; flex:none; }
.steps li.is-current .step-num{ background:var(--poster-blue, #004890); color:#fff !important; }
.steps li.is-done .step-num{ background:var(--poster-blue, #004890); color:#fff !important; }
.steps li > span:last-child{ font-family:var(--font-sans); font-weight:600; font-size:.9375rem; line-height:1.2; color:var(--ink); }
.steps li > span:last-child::before{ content:'Step ' attr(data-n) ' of ' attr(data-of); display:block; font-family:var(--font-sans); font-size:.75rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.15rem; }
.steps li > span:last-child::before{ content:'Step ' attr(data-n) ' of ' attr(data-of); }
@media (max-width:40rem){
  .steps li > span:last-child{ font-size:.8125rem; }
  .steps li:not(.is-current) > span:last-child{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .steps li{ position:relative; }
}

/* plan details on the standard path: no fit questions, one primary, two ways out */
body[data-flow="standard"] #verdictWhy, body[data-flow="standard"] #fitLedger, body[data-flow="standard"] #tightenFit, body[data-flow="standard"] #conceptNote{ display:none !important; }
.plan-next{ margin:1.25rem 0 .5rem; }
.plan-next .btn{ width:100%; justify-content:center; background:var(--poster-blue, #004890); color:#fff; border:0; border-radius:0; font-family:var(--font-poster, inherit); font-weight:400; text-transform:uppercase; font-size:1.25rem; letter-spacing:.03em; min-height:3.25rem; }
.plan-next .btn:hover, .plan-next .btn:focus-visible{ background:var(--poster-ink, #020912); outline:3px solid var(--poster-yellow, #FFE018); outline-offset:2px; }
.plan-exits{ display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin:.25rem 0 0; }
.plan-exits .textlink{ min-height:2.75rem; }
body[data-flow="standard"] #recChoice{ display:none !important; }

/* the custom intake in two pages */
#doorPlanForm[data-page="1"] [data-pg="2"]{ display:none !important; }
#doorPlanForm[data-page="2"] [data-pg="1"]{ display:none !important; }
#doorPlanForm[data-page="2"] > .pq-rule{ display:none; }
.intake-pagenav{ margin-top:1rem; }
.intake-back{ margin-left:1rem; min-height:2.75rem; }
#doorPlanForm[data-page="2"] #secDims, #doorPlanForm[data-page="2"] #secHeights, #doorPlanForm[data-page="2"] #secOpenings{ open:1; }

/* quick filters on the six cards */
.design-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:2rem 0 -1.5rem; }
.design-filters .filters-label{ margin:0 .5rem 0 0; display:inline; }
.design-filters .chip[aria-pressed="true"]{ background:var(--poster-blue, #004890); color:#fff; box-shadow:none; }
.design-card[hidden]{ display:none !important; }

/* 1. on a phone the pinned stage stands down on the review and the send form: the review carries its own concept picture */
@media (max-width:60rem){
  body[data-show="result"] .builder-visual{ display:none !important; }
  body[data-show="use"] .builder-visual three-d-stage{ height:clamp(11rem, 26vh, 16rem); }
}
/* 6. desktop: the rail stays in view while the spec sheet scrolls */
@media (min-width:60rem){
  .steps{ position:sticky !important; top:0; z-index:25; background:var(--poster-white, #FCFCFC) !important; }
}
/* share this concept: removed (Zak, 2026-09-09) */
#shareRow, .share-row{ display:none !important; }
/* the two ways out sit as one quiet row under the primary */
.plan-exits{ text-align:left; justify-content:flex-start; }
/* the size tab has nothing to say on a standard plan; the fit accordion is a Help-me-choose tool */
body[data-flow="standard"] #fsNav [data-fs="size"], body[data-flow="standard"] .fs-panel[data-fs="size"], body[data-flow="standard"] #fsNext{ display:none !important; }
body[data-flow="standard"] #adjustContents{ display:none !important; }
/* 4. the send form's context questions fold */
.lead-more{ margin:1rem 0 0; border:1px solid var(--border); border-radius:0; padding:0 1rem; background:#fff; }
.lead-more > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3rem; padding:.6rem 0; }
.lead-more > summary::-webkit-details-marker{ display:none; }
.lead-more > summary .label{ margin:0; color:var(--poster-blue, #004890); }
.lead-more > summary .rf-optional{ font-family:var(--font-sans); font-size:.8125rem; color:var(--ink-3); }
.lead-more > summary::after{ content:'+'; font-size:1.25rem; color:var(--poster-blue, #004890); margin-left:.5rem; }
.lead-more[open] > summary::after{ content:'\2212'; }
.lead-more .qual-group{ padding-bottom:.75rem; }
.plan-exits .textlink{ display:inline-block; margin:0; text-align:left; }

/* ── 2026-09-16, Handley demo-day fixes (Zak) ── */
/* the rail spans the full builder width on desktop; the old max-width left it hugging the left column */
.steps{ max-width:none !important; width:100%; }
/* Why-the-yard cards: as many as the yard can claim, spread evenly and centred, never a 4-column grid with a hole */
@media (min-width:768px){ .section-sand .grid.grid-4{ grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); } }
/* a custom building: the brief and the dimensions pages are a form, the 3D only appears at the concept step */
body[data-flow="custom"][data-show="use"] .builder-visual{ display:none !important; }
body[data-flow="custom"][data-show="use"] .builder{ grid-template-columns:1fr; }
body[data-flow="custom"][data-show="use"] .builder-flow{ max-width:52rem; margin-inline:auto; width:100%; }
/* the bottom band keeps only the yard's mark, centred */
.poster-quote-band .wrap.band-grid{ grid-template-columns:1fr !important; justify-items:center; text-align:center; }
/* footer: one stacked block instead of a space-between row that left holes; the sticky bar clears inside the dark footer, not below it */
.footer-bottom{ display:grid; gap:.6rem; justify-content:start; }
.footer-bottom .build-tag{ justify-self:start; }
body{ padding-bottom:0; }
.site-footer{ padding-bottom:calc(3rem + 4.5rem); }

/* ── Tier 1 (Mobbin assessment, 2026-09-16) ── */
/* 1. desktop, standard plan: the finish panels stack as decision blocks; the tab strip retires. Phones keep the tabs. */
@media (min-width:60rem){
  body[data-flow="standard"] #fsNav{ display:none !important; }
  body[data-flow="standard"] .fs-panel[data-fs="roof"], body[data-flow="standard"] .fs-panel[data-fs="siding"], body[data-flow="standard"] .fs-panel[data-fs="trim"], body[data-flow="standard"] .fs-panel[data-fs="options"]{ display:block !important; }
  body[data-flow="standard"] .fs-panel[data-fs="siding"], body[data-flow="standard"] .fs-panel[data-fs="trim"], body[data-flow="standard"] .fs-panel[data-fs="options"]{ margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
}
.fs-q{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; line-height:1.2; margin:0 0 .6rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .75rem; }
.fs-q .fs-q-pick{ font-family:var(--font-sans); font-weight:500; font-size:.9375rem; color:var(--ink-3); }
.fs-q .fs-q-pick:empty{ display:none; }
/* 2. the rail's next-step line */
.rail-next{ display:block; width:100%; font-size:.9375rem; color:var(--ink-3); margin:.3rem 0 0; }
/* 3. inline help */
.help-inline{ margin:.75rem 0 0; font-size:.9375rem; color:var(--ink-3); }
.help-inline a, .help-inline summary{ color:var(--poster-blue, #004890); text-decoration:underline; cursor:pointer; min-height:2.75rem; display:inline-flex; align-items:center; }
.help-inline summary{ list-style:none; } .help-inline summary::-webkit-details-marker{ display:none; }
.help-inline p{ margin:.35rem 0 0; }
/* 5. the sent screen: the yard's reply-time promise and a call button beside the summary link */
.reply-time{ margin:.5rem 0 0; font-weight:600; }
.sent-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
/* the rail bar keeps Back, the path badge and Start over on one line; the next-step hint takes its own line under them */
.rail-bar{ flex-wrap:wrap; }
.rail-bar > *{ flex:none; white-space:nowrap; }
.rail-bar .rail-next{ flex:1 0 100%; white-space:normal; }

/* ── 2026-09-16, Handley meeting feedback (Zak + Mike) ── */
/* A. the rail, v2 (2026-09-18, Zak: functionally better, still looks poor). One row, one visual system:
   Back, an inline numbered stepper with connectors, the plan badge, Start over. Pattern: QuickBooks, Unity and lululemon checkouts.
   On a phone the other steps collapse to dots and only the current step keeps its name (Salesforce, Deputy). */
.steps{ display:flex !important; flex-wrap:nowrap !important; align-items:center; gap:.25rem 1.25rem; padding:.3rem 0 !important; border-bottom:1px solid var(--border) !important; }
.steps::before{ display:none !important; }
.rail-bar{ display:contents; }
.steps .rail-back{ order:0; flex:none; min-height:2.75rem; font-family:var(--font-sans); font-weight:600; font-size:.9375rem; color:var(--poster-blue, #004890); white-space:nowrap; }
.steps .rail-step{ display:none; }
.steps ol.steps-grid{ order:1; flex:0 1 auto; min-width:0; display:flex !important; align-items:center; gap:0; margin:0; padding:0; grid-template-columns:none; }
.steps ol.steps-grid li{ flex:0 1 auto; min-width:0; display:inline-flex !important; align-items:center !important; gap:.5rem; height:auto; white-space:nowrap; min-height:2.75rem; padding:0 !important; border:0 !important; background:transparent !important; opacity:1; overflow:visible; font-family:var(--font-sans); font-size:.9375rem; font-weight:500; color:var(--ink-3); text-align:left; }
.steps ol.steps-grid li::after{ display:none !important; }
.steps ol.steps-grid li > span:last-child::before{ content:none !important; } /* the STEP n OF N eyebrow retires; the numbered circle says it */
.steps ol.steps-grid li + li::before{ content:''; flex:1 1 1rem; min-width:.75rem; max-width:3rem; width:3rem; height:2px; margin:0 .75rem; background:var(--border); }
.steps ol.steps-grid li.is-done + li::before{ background:var(--poster-blue, #004890); }
.steps ol.steps-grid li > span{ position:static; width:auto; height:auto; overflow:visible; clip:auto; }
.steps ol.steps-grid .step-num{ flex:none; display:inline-grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:50%; border:1.5px solid color-mix(in oklab, var(--ink-3) 55%, transparent); background:transparent; color:var(--ink-3); font-family:var(--font-sans); font-size:.8125rem !important; font-weight:700; line-height:1; }
.steps ol.steps-grid .step-num::before{ display:none !important; }
.steps ol.steps-grid li.is-done{ color:var(--foreground); }
.steps ol.steps-grid li.is-done .step-num{ background:var(--poster-blue, #004890); border-color:var(--poster-blue, #004890); color:#fff; }
.steps ol.steps-grid li.is-current{ color:var(--foreground); font-weight:700; }
.steps ol.steps-grid li.is-current .step-num{ background:var(--poster-blue, #004890); border-color:var(--poster-blue, #004890); color:#fff; box-shadow:0 0 0 3px var(--poster-yellow, #FFE018) !important; animation:none !important; transform:none !important; }
.steps ol.steps-grid li:hover > span:last-child, .steps ol.steps-grid li:focus-visible > span:last-child{ text-decoration:underline; }
.steps .rail-next{ order:2; flex:none; display:block; width:auto; margin:0; font-size:.9375rem; color:var(--ink-3); white-space:nowrap; }
.steps .rail-next:empty{ display:none; }
.steps .rail-next::before{ content:none; }
.steps .rail-path{ order:3; flex:none; margin-left:auto; border-width:1px; font-weight:600; padding:.25rem .55rem; }
.steps .rail-start-over{ order:4; flex:none; min-height:2.75rem; font-size:.9375rem; font-weight:600; color:var(--ink-2, var(--foreground)); white-space:nowrap; }
@media (min-width:60rem){ .steps ol.steps-grid li{ flex:none; } } /* names never squeeze into the connectors */
body[data-flow="custom"] .steps .rail-next{ display:none; } /* four steps leave no room for the time note */
@media (max-width:80rem){ .steps .rail-next{ display:none; } }
@media (max-width:72rem){ /* small desktops and tablets: only the current step keeps its name */
  .steps ol.steps-grid li:not(.is-current) > span:last-child{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}
@media (max-width:60rem){ /* phones: arrow, current step with its count, a round start-over */
  .steps{ gap:.25rem .75rem; }
  .steps .rail-path{ display:none; }
  .steps .rail-back, .steps .rail-start-over{ font-size:0; min-width:2.75rem; display:inline-flex; align-items:center; justify-content:flex-start; text-decoration:none; }
  .steps .rail-back::before{ content:'←'; font-size:1.375rem; line-height:1; }
  .steps .rail-start-over{ margin-left:auto; justify-content:flex-end; }
  .steps .rail-start-over::before{ content:'↺'; font-size:1.375rem; line-height:1; }
  .steps ol.steps-grid{ flex:1 1 auto; }
  .steps ol.steps-grid li:not(.is-current){ display:none !important; }
  .steps ol.steps-grid li::before{ display:none !important; }
  .steps ol.steps-grid li.is-current{ min-width:0; flex:1 1 auto; }
  .steps ol.steps-grid li.is-current > span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .steps ol.steps-grid li.is-current::after{ display:inline !important; content:attr(data-n) ' of ' attr(data-of); position:static; flex:none; width:auto; height:auto; background:none; margin-left:.15rem; font-weight:500; color:var(--ink-3); }
}
/* B. the view controls: one row that never wraps. On a phone they sit in a strip under the stage instead of over the model; reset is a round icon. */
.cfg-viewbar .view-reset svg{ width:1rem; height:1rem; vertical-align:-.15rem; margin-right:.35rem; }
@media (max-width:60rem){
  .builder-visual .cfg-stage{ display:flex; flex-direction:column; }
  .builder-visual .cfg-stage three-d-stage{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
  .builder-visual .cfg-viewbar{ position:static; order:9; flex-wrap:nowrap; justify-content:flex-start; gap:.2rem; max-width:none; padding:.3rem .5rem; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; background:oklch(1 0 0 / .92); border-radius:0 0 var(--glass-radius, .9rem) var(--glass-radius, .9rem); }
  .builder-visual .cfg-viewbar::-webkit-scrollbar{ display:none; }
  .builder-visual .cfg-viewbar button{ flex:none; scroll-snap-align:start; padding:.5rem .4rem; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .builder-visual .cfg-viewbar .view-reset{ width:2.5rem; padding:0; display:inline-flex; align-items:center; justify-content:center; }
  .builder-visual .cfg-viewbar .view-reset svg{ margin:0; width:1.1rem; height:1.1rem; }
  .builder-visual .cfg-viewbar .view-reset .vr-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  /* C. less of the phone is pinned: the stage caps at 30vh and the summary card (moved by nav.js) scrolls with the options */
  .builder-visual three-d-stage{ height:29vh; min-height:11rem; }
  .builder-flow > .stage-summary{ margin:0 0 1rem; }
}