/* Round 8 (Mark's feedback, 2026-10-16): a compact, professional form. Numbered accordion steps, small controls, no nested scroll pane, an always-visible
   Add to cart bar. Loaded AFTER print.css/real.css; page-builder's tokens (:root) are reused, nothing is redefined. FOR PAGE-BUILDER TO REVIEW. */
body{padding-bottom:84px}
.layout{gap:14px}
.flow{display:flex;flex-direction:column;gap:12px}
/* accordion */
.acc{padding:0;overflow:hidden}
.acc-hd{margin:0}
.acc-h{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--font);color:var(--ink);min-height:56px}
.acc-h:focus-visible{outline:3px solid var(--c-sky);outline-offset:-3px}
.acc .num{flex:0 0 30px;height:30px;font-size:15px;line-height:30px}
.acc.done .num{background:linear-gradient(135deg,#10b981,#047857);box-shadow:none}
.acc.done .num::before{content:"\2713"}
.acc.done .num span{display:none}
.acc-t{font:800 17px/1.2 var(--font);letter-spacing:-.01em}
.acc-v{flex:1;min-width:0;text-align:right;font:600 14px var(--font);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-b{padding:2px 14px 16px;border-top:1px solid var(--line)}
.acc-b[hidden]{display:none}
.blk+.blk{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.blk .step-sub{margin:0 0 10px;font-size:14px}
.label{font-size:13px;margin:12px 0 6px}
.acc-b>.blk:first-child>.label:first-child{margin-top:8px}
.hint{font-size:13px;margin:6px 0 0}
/* standard sizes: small pills */
.chips{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px}
.chip{min-height:44px;border-width:1.5px;border-radius:12px;padding:6px 10px;gap:0}
.chip .big{font-size:15px}
.chip .small{font-size:12px}
.chip .badge{font:700 11px/1.2 var(--font2);color:#8a5300;margin-top:1px}
.chip .badge.ok{color:var(--ok)}
/* orientation / fit / quantity segmented controls */
.seg button{min-height:36px;padding:0 14px;font-size:14px}
.seg{padding:3px}
.seg svg{width:14px;height:14px}
#qMinus,#qPlus{width:40px!important;font-size:19px!important}
#qty{height:36px!important;width:56px!important}
.row{margin-top:10px;gap:10px}
.sqft{margin-top:12px;padding:8px 12px;border-radius:12px}
.sqft b{font-size:26px}
/* fit to your image */
.fw-list{display:flex;flex-wrap:wrap;gap:6px}
.fw{min-height:44px;padding:6px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;text-align:left;cursor:pointer;font:600 13px var(--font);color:var(--ink);display:flex;flex-direction:column;gap:0}
.check.off{opacity:.6}.check.off input{cursor:not-allowed}
.fw b{font:800 15px var(--font)}.fw .badge{display:block;font:700 11px/1.2 var(--font2);color:#8a5300;margin-top:1px}
.fw[aria-pressed=true]{border-color:var(--brand);background:var(--brand-tint)}
.fw[disabled]{opacity:.55;cursor:not-allowed}
.label.sub{font-size:12px;font-weight:600;opacity:.8}
.fw-own{margin-top:8px;gap:10px}.fw-res{font:600 13px var(--font);color:var(--ink);padding-bottom:10px}.fw-res .badge{margin-left:6px}
/* paper: a compact list */
.media{gap:6px}
.mcard{grid-template-columns:34px 1fr auto;gap:10px;border-width:1.5px;border-radius:12px;padding:8px 10px}
.mcard .swatch{width:34px;height:34px;border-radius:8px}
.mcard .t{font-size:15px}
.mcard .d{font-size:12.5px;margin-top:0}
.mcard .p{font-size:14px}
.mcard .p span:last-child{font-size:11px!important}
/* finishing + quality + shipping: tighter */
.meter-wrap{margin-top:8px}
.qmsg{font-size:14px}
.sizes-tbl{margin-top:8px}
.later{font-size:13.5px}
.zip-row{gap:8px}
.ship-opt{padding:6px 0;font-size:14px}
/* upload */
.drop{padding:16px 12px;border-radius:14px}
.drop .ic{width:40px;height:40px;margin-bottom:6px}
.drop .ic svg{width:20px;height:20px}
.drop h3{font-size:16px}
.drop p{font-size:14px;margin-bottom:10px}
.terms-notice{font-size:13.5px;padding:10px 12px}
.upl{padding:10px;border-radius:12px}
.upl-n small{color:var(--muted);font-weight:600}
.up-stages{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0;padding:0;list-style:none;font:700 12px var(--font2);color:var(--muted)}
.up-stages li{display:flex;align-items:center;gap:5px}
.up-stages li::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid #d9cbb9;background:#fff}
.up-stages li.on{color:var(--ink)}
.up-stages li.on::before{border-color:var(--brand);background:var(--brand)}
.up-stages li.done{color:var(--ok)}
.up-stages li.done::before{border-color:var(--ok);background:var(--ok)}
.up-stages li+li::after{content:none}
.up-note{font-size:13px;color:var(--muted);margin:6px 0 0}
/* preview card */
.step.pv-card{padding:12px 14px 14px}
.pv-h{margin-bottom:8px}
.step h2{font-size:18px}
/* the summary card + the always-visible bar */
.sum{padding:14px}
.sum .tot b{font-size:38px}
.sticky{display:block!important}
.sticky-in{max-width:1240px}
.sticky .btn.pri{min-width:min(60vw,320px)}
@media(min-width:1024px){
  .layout{grid-template-columns:minmax(0,1fr) 440px;gap:20px}
  /* NO nested scroll pane (Mark): the page scrolls, the aside is an ordinary column */
  .aside{position:static;max-height:none;overflow:visible;padding:0}
  .step{padding:0}
  .step.pv-card{padding:12px 14px 14px}
}
@media(min-width:1024px){.acc-b{padding:4px 18px 18px}}
/* checking a file: no server progress to show, so the bar is indeterminate */
.bar.indet i{width:38%!important;animation:indet 1.3s ease-in-out infinite}
@keyframes indet{0%{margin-left:-38%}100%{margin-left:100%}}
/* finishing options and the soft-image tick: compact rows */
#finList .check,.check{padding:8px 12px;border-radius:12px;gap:10px;border-width:1.5px}
#finList .check .ct{font-size:14.5px}
#finList .check .cp{font-size:13.5px}
/* page-builder's look check (round 8): a slim bar, a one-line price, 44 px targets on touch, centred chevrons, calmer disabled state */
.sticky{padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
.sticky-in{margin:0 auto;gap:12px}
.sticky .s-p small{white-space:nowrap;font-size:11px}
.sticky .s-p b{display:block;white-space:nowrap;font-size:26px}
.sticky .s-p b.nop{font:700 14px var(--font);letter-spacing:0;color:var(--muted);padding-top:3px}
.sticky .btn.pri{min-width:0;flex:1 1 auto;min-height:48px;font-size:16px}
@media(min-width:1024px){.sticky .btn.pri{flex:0 0 320px}.sticky{padding-inline:28px}}
.btn.pri[disabled],.btn.pri[aria-disabled=true]{background:#e8dccb;color:#5b4b3a;box-shadow:none}
.hint,.step-sub{color:#5b4b3a}
.mcard .p{min-width:76px;text-align:right}
.mcard .p span:last-child{font-size:12px!important}
@media(max-width:1023px){
  .seg button{min-height:44px}
  .chip,.fw,.mcard{min-height:44px}
  #qMinus,#qPlus{width:44px!important;height:44px!important}
  #qty{height:44px!important}
}
@media(max-width:1023px){.sticky .s-p{flex:1 1 auto;min-width:0}.sticky .btn.pri{flex:0 0 50%;padding:0 12px;font-size:15px}.sticky .s-p small{font-size:10.5px;letter-spacing:.03em}}

/* ---- round 8b: tightening ---- */
/* a finished step: number stays, a check follows the title, and "Edit" shows while it is collapsed */
.acc.done .num{background:linear-gradient(135deg,#10b981,#047857)}
.acc.done .num::before{content:none}
.acc.done .num span{display:inline}
.acc.done .acc-t::after{content:"\2713";color:var(--ok);margin-left:6px;font-weight:800}
.acc-e{display:none;flex:0 0 auto;font:700 13px var(--font);color:var(--brand);text-decoration:underline}
.acc.done .acc-h[aria-expanded=false] .acc-e{display:inline}
.acc-v{white-space:normal;line-height:1.2;max-width:52%}
/* chevron: one element, one rotation, no transition (a mid-animation capture looked broken) */
.chev{flex:0 0 10px;width:10px;height:10px;margin:0 4px 4px 2px;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:rotate(45deg);position:static}
.chev::before{content:none!important}
.acc-h[aria-expanded=true] .chev{transform:rotate(-135deg);margin:4px 4px 0 2px}
/* the bar steps aside while the summary card's own Add to cart is on screen */
.sticky.off{display:none!important}
/* paper and finishing: one line per row */
.mcard{grid-template-columns:30px 1fr auto;padding:6px 10px;min-height:44px}
.mcard .swatch{width:30px;height:30px}
.mcard .mt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;min-width:0}
.mcard .t{font-size:15px}
.mcard .d{display:inline;font-size:12.5px;margin:0}
.mcard .p{min-width:0;font:700 14px var(--font2);white-space:nowrap}
#finList .check{padding:6px 12px;min-height:44px;align-items:center;margin-top:6px}
.cont{margin-top:12px;display:flex;justify-content:flex-end}
.terms-notice{font-size:12.5px;line-height:1.45}
.acc-v{flex:0 1 auto;margin-left:auto;max-width:60%;text-align:right}
.acc-t{white-space:nowrap}
/* phone: the green number badge already shows "done", so no check after the title, and the one-line summary never truncates */
@media(max-width:600px){
  .acc.done .acc-t::after{content:none}
  .acc-h{gap:10px;padding:12px}
  .acc-t{font-size:16px}
  .acc-v{max-width:none;flex:0 0 auto;white-space:nowrap;overflow:visible;text-overflow:clip}
}

.fin-dlg{max-width:min(420px,calc(100vw - 24px))}
.fin-b{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.fin-t{margin:0;font:800 18px var(--font);color:var(--ink)}
.fin-cv{max-width:100%;border:1px solid var(--line);border-radius:6px;background:#fff}
.fin-sz{margin:0;font:700 14px var(--font);color:var(--ink)}
.fin-w{margin:0;font:600 14px/1.4 var(--font);color:var(--body);text-align:left}
.fin-btns{display:flex;gap:8px;width:100%;flex-wrap:wrap}.fin-btns .btn{flex:1 1 140px;min-height:44px}
.fin-cap{margin:0;font:600 12px/1.35 var(--font);color:var(--muted)}
.fin-see{background:none;border:0;padding:6px 4px;font:700 13px var(--font);color:var(--brand);text-decoration:underline;cursor:pointer;min-height:36px}
.fin-w a{color:var(--brand);font-weight:700}