/* designs.css — 2026-09-07 the six-designs pass. Three entry paths, the design
   cards + detail dialog + ladder, the status pill, the review form, contextual
   building copy, mobile floors. Loaded after configurator.css, before design.css. */
.paths{ display:grid; gap:.6rem; padding:1.25rem 1.5rem 1rem; }
.path{ display:flex; flex-direction:column; gap:.2rem; text-decoration:none; padding:.9rem 1rem; min-height:2.75rem;
  border:1px solid var(--border); border-radius:calc(var(--radius) + 2px); background:var(--card); color:var(--foreground);
  transition:border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.path:hover{ border-color:var(--ring); transform:translateY(-1px); box-shadow:var(--shadow-2, none); }
.path:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.path-primary{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
.path-primary .path-why{ color:oklch(1 0 0 / .78); }
.path-name{ font-family:var(--font-sans); font-weight:700; font-size:1.0625rem; line-height:1.25; }
.path-why{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.45; color:var(--muted-foreground); }
.section-dark .paths-card .path{ color:var(--ink); }
.section-dark .paths-card .path-primary{ color:var(--primary-foreground); }
.paths-card .form-card-head h2{ font-size:1.25rem; }

.design-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:3rem; }
@media (min-width:40rem){ .design-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:64rem){ .design-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; } }
.design-card{ display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:1rem; background:var(--card);
  transition:border-color .3s, box-shadow .3s, transform .3s; }
.design-card:hover{ border-color:color-mix(in oklab, var(--accent) 45%, transparent); box-shadow:var(--shadow-soft); transform:translateY(-2px); }
.design-img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; background:#EFEAE1; }
.design-card{ position:relative; container-type:inline-size; }
.design-cap{ position:absolute; top:calc(100cqw * 2 / 3 - 1.6rem); right:.6rem; font-family:var(--font-sans); font-size:.6875rem; letter-spacing:.02em; color:#fff; background:rgba(2,9,18,.55); padding:.15rem .45rem; pointer-events:none; }
.design-body{ display:flex; flex-direction:column; gap:.45rem; padding:1.25rem 1.5rem 1.5rem; flex:1; }
.design-tag{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin:0; }
.design-std{ font-family:var(--font-sans); font-size:.8125rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--copper-deep, var(--wood-deep)); }
.design-dims{ font-size:1.5rem; line-height:1; color:var(--ink); }
.design-name{ font-family:var(--font-display); font-size:1.75rem; line-height:1.1; margin:0; letter-spacing:-.015em; }
.design-benefit{ font-family:var(--font-sans); font-size:1rem; line-height:1.5; color:var(--ink-2, var(--muted-foreground)); margin:0; }
.design-best{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; color:var(--foreground); margin:.5rem 0 0; padding-top:.75rem; border-top:1px solid var(--border); }
.design-best > span, .design-versus > span{ display:block; font-size:.8125rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--copper-deep, var(--wood-deep)); margin-bottom:.2rem; }
.design-facts{ list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.25rem; font-family:var(--font-sans); font-size:.9375rem; line-height:1.45; color:var(--ink-2, var(--muted-foreground)); }
.design-facts li{ position:relative; padding-left:1rem; }
.design-facts li::before{ content:""; position:absolute; left:0; top:.6em; width:.35rem; height:.35rem; border-radius:999px; background:var(--wood); }
.design-shown{ font-family:var(--font-sans); font-size:.9375rem !important; line-height:1.5; color:var(--ink-3, var(--muted-foreground)); margin:.5rem 0 0; }
.design-actions{ margin-top:auto; padding-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; }
.design-actions .btn{ min-height:2.75rem; }
.design-actions .textlink{ min-height:2.75rem; }
.design-ladder-wrap{ margin-top:2.5rem; padding:1.5rem 1.5rem 1.25rem; background:var(--card); border:1px solid var(--border); border-radius:1rem; }
.design-ladder-wrap .label{ margin:0 0 .75rem; }
.design-ladder{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.design-ladder li{ display:grid; grid-template-columns:5.5rem 1fr; grid-template-areas:"size name" "size note"; column-gap:1rem; row-gap:.15rem; padding:.7rem 0; border-top:1px solid var(--border); font-family:var(--font-sans); }
.design-ladder li:first-child{ border-top:0; }
.ladder-size{ grid-area:size; font-size:1.25rem; line-height:1.2; color:var(--ink); }
.ladder-name{ grid-area:name; font-weight:700; font-size:1rem; line-height:1.3; }
.ladder-note{ grid-area:note; font-size:.9375rem; line-height:1.45; color:var(--ink-2, var(--muted-foreground)); }
@media (min-width:48rem){ .design-ladder li{ grid-template-columns:6rem 12rem 1fr; grid-template-areas:"size name note"; align-items:baseline; } }
.design-ladder-wrap .use-caveat{ margin-top:1rem; }
/* the detail dialog */
.design-dialog{ width:min(44rem, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:1px solid var(--border); border-radius:1rem; background:var(--card); color:var(--foreground); box-shadow:var(--shadow-elevated); overflow:auto; }
.design-dialog::backdrop{ background:oklch(0.22 0.012 60 / .55); }
.design-detail{ position:relative; padding:1.5rem 1.5rem 1.75rem; display:grid; gap:.6rem; }
.design-close{ position:absolute; top:.75rem; right:.75rem; width:2.75rem; height:2.75rem; border:1px solid var(--border); border-radius:999px; background:var(--card); font-size:1.5rem; line-height:1; cursor:pointer; color:var(--foreground); }
.design-close:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; }
.design-detail-name{ font-size:2rem; margin:0; padding-right:3rem; }
.design-detail-img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:.75rem; background:#EFEAE1; margin-top:.5rem; }
.design-spec{ margin:.5rem 0 0; }
.design-spec dd{ text-align:right; }
.design-versus{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; margin:.25rem 0 0; }
.design-pdf{ min-height:2.75rem; }
@media (max-width:40rem){ .design-dialog{ width:calc(100vw - 1rem); max-height:calc(100vh - 1rem); } .design-detail{ padding:1.25rem 1rem 1.5rem; } }

/* status pill + review status */
.status-pill{ display:inline-flex; align-items:center; gap:.4rem; margin:.25rem 0 .5rem; padding:.35rem .7rem; border-radius:999px; border:1px solid var(--border);
  font-family:var(--font-sans); font-size:.9375rem; font-weight:600; letter-spacing:.02em; color:var(--foreground); background:var(--card); }
.status-pill[data-status="standard"]{ border-color:var(--moss, #4e7a52); color:var(--moss, #4e7a52); }
.status-pill[data-status="modified"]{ border-color:var(--wood); color:var(--wood-deep); }
.status-pill[data-status="custom"]{ border-color:var(--ink); color:var(--ink); }
.chosen-design{ font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; margin:0 0 .75rem; padding:.7rem .9rem; border-left:2px solid var(--wood); background:oklch(0.973 0.011 84.6); border-radius:0 .5rem .5rem 0; }
.chosen-design strong{ font-weight:700; }
.chosen-design .textlink{ min-height:2.75rem; padding:.5rem .35rem; display:inline-flex; align-items:center; }
.concept-note{ margin-top:.75rem; }
.usable-note{ margin:.5rem 0 0; font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; color:var(--muted-foreground); }
.usable-note:empty{ display:none; }
.review-status{ max-width:48rem; margin:1.25rem auto 0; display:grid; gap:.75rem; }
.result-block .review-status{ max-width:none; }
.review-status .rs-card{ padding:1rem 1.125rem; border:1px solid var(--border); border-radius:var(--glass-radius, .9rem); background:var(--glass-bg-strong, var(--card)); font-family:var(--font-sans); font-size:.9375rem; line-height:1.55; }
.review-status .rs-card p{ margin:0; }
.review-status ul{ margin:.4rem 0 0; padding-left:1.1rem; }
.review-status li{ margin:.15rem 0; }
.review-status .rs-flag{ border-color:color-mix(in oklab, var(--wood) 50%, var(--border)); }
.rs-title{ font-weight:700; }
/* the review form */
.review-form textarea, .review-form select{ width:100%; font-family:var(--font-sans); font-size:1rem; color:var(--foreground); padding:.8rem .875rem; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px); background:color-mix(in oklab, #ffffff 82%, transparent); resize:vertical; }
.review-form textarea:focus, .review-form select:focus{ outline:none; border-color:var(--ring); box-shadow:0 0 0 3px oklch(.55 .07 55 / .16); }
.review-form .qual-group .chips{ margin-top:.2rem; }
.review-form .chip{ font-size:.9375rem; }
.check-row{ display:flex; align-items:flex-start; gap:.6rem; margin-top:.6rem; font-family:var(--font-sans); font-size:.9375rem; line-height:1.45; cursor:pointer; min-height:2.75rem; }
.check-row input{ appearance:none; -webkit-appearance:none; width:2.75rem; height:2.75rem; margin:-.6rem 0 -.6rem -.6rem; flex:0 0 auto; position:relative; cursor:pointer; background:none; border:0; }
.check-row input::before{ content:""; position:absolute; left:50%; top:50%; width:1.25rem; height:1.25rem; transform:translate(-50%,-50%); border:2px solid var(--wood-deep); border-radius:.3rem; background:var(--card); }
.check-row input:checked::before{ background:var(--wood-deep); }
.check-row input:checked::after{ content:""; position:absolute; left:50%; top:50%; width:.7rem; height:.4rem; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translate(-50%,-65%) rotate(-45deg); }
.check-row input:focus-visible{ outline:none; box-shadow:none; }
.check-row input:focus-visible::before{ box-shadow:var(--focus-ring); }
.review-form .btn[type="submit"]{ width:100%; justify-content:center; }
.review-done{ font-family:var(--font-sans); font-size:1rem; line-height:1.6; }
.review-done .label{ margin-bottom:.35rem; }
.review-done .pk-share-btns{ margin-top:.9rem; }
.review-retry{ margin-top:.75rem; }
/* building type + units */
.custom-grid-type{ grid-template-columns:1fr; }
@media (min-width:48rem){ .door-plan .custom-grid-type{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.custom-field select{ font:inherit; font-size:1rem; min-height:2.75rem; padding:.4rem .7rem; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px); background:var(--card); color:inherit; width:100%; }
.units-row{ display:flex; align-items:center; gap:.75rem; margin:.5rem 0 0; }
.units-row .label{ margin:0; }
.units-seg{ display:inline-flex; gap:.25rem; }
.units-seg button{ font-family:var(--font-sans); font-size:.9375rem; min-height:2.75rem; padding:.5rem .8rem; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--foreground); cursor:pointer; }
.units-seg button[aria-checked="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* the stage: honest note for simplified previews, reset view, no scroll trap */
.stage-note{ position:absolute; left:.875rem; right:.875rem; bottom:3.5rem; z-index:2; margin:0; padding:.5rem .75rem; border-radius:.6rem;
  background:oklch(1 0 0 / .9); border:1px solid var(--border); font-family:var(--font-sans); font-size:.8125rem; line-height:1.4; color:var(--foreground); }
.builder-visual .cfg-stage{ touch-action:pan-y; }
.builder-visual three-d-stage{ touch-action:pan-y; }
.cfg-viewbar button.view-reset{ font-weight:600; }
.stage-fallback-svg{ display:block; width:100%; height:100%; }
/* mobile floors: stage height leaves room for the flow; the sticky bar never covers the review form */
@media (max-width:60rem){
  .builder-visual three-d-stage{ height:36vh; min-height:13rem; }
  .steps li.is-current > span:last-child{ white-space:nowrap; }
  .design-actions .btn{ flex:1 1 auto; justify-content:center; }
}
body.form-in-view .sticky-cta{ transform:translateY(100%); }

.review-line{ color:var(--wood-deep); font-weight:600; }
.review-update{ margin-top:1rem; }
/* the drag hint moves to the top-right so it never collides with the wider view bar (Reset view) or the badge */
.builder-visual .cfg-hint{ left:auto; right:.875rem; top:.625rem; bottom:auto; }
@media (max-width:60rem){
  .builder-visual .cfg-hint{ display:none; } /* the view bar is the affordance on a phone; the hint was hiding behind the badge */
  .stage-summary{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem; padding:.5rem .75rem; margin-top:.4rem; }
  .stage-summary span{ font-size:.6875rem; } /* 11px hard floor for labels */
  .stage-summary strong{ font-size:.9375rem; line-height:1.2; margin-top:.05rem; } /* 15px reading floor */
  .cfg-viewbar button{ min-height:2.75rem; padding:.5rem .55rem; font-size:.9375rem; } /* 15px reading floor */
}

/* step 1 (two paths): Start over, the stale-review notice */
.start-over{ text-align:center; margin:.5rem 0 0; }
.start-over .textlink{ font-size:.9375rem; min-height:2.75rem; }
.review-stale{ margin:0 auto 1rem; max-width:32rem; padding:.7rem 1rem; border-radius:.6rem; border:1px solid color-mix(in oklab, var(--wood) 50%, var(--border)); background:oklch(0.973 0.011 84.6); font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; }
.rec-choice .textlink{ font-size:.9375rem; min-height:2.75rem; }

/* step 2 (two paths): the spec sheet on a chosen standard plan, the custom-exit notes */
.spec-sheet{ margin:1rem 0 0; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--glass-radius, .9rem); background:var(--glass-bg-strong, var(--card)); font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; }
.spec-sheet .label{ margin:0 0 .35rem; }
.spec-sheet ul{ margin:.25rem 0 .75rem; padding-left:1.1rem; }
.spec-sheet li{ margin:.1rem 0; }
.spec-sheet .spec-pdf{ min-height:2.75rem; }
.custom-exit{ margin:.75rem 0 0; padding:.75rem .9rem; border-left:2px solid var(--wood); background:oklch(0.973 0.011 84.6); border-radius:0 .5rem .5rem 0; font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; }
.custom-exit .textlink{ min-height:2.75rem; padding:.5rem .35rem; display:inline-flex; align-items:center; }

/* step 3 (two paths): the custom intake, the openings schedule, the outcome, the plan-view layer */
.custom-intake .intake-sec{ margin:1rem 0 0; padding:.9rem 1rem; border:1px solid var(--border); border-radius:.75rem; background:color-mix(in oklab, #ffffff 55%, transparent); }
.custom-intake details.intake-sec > summary{ cursor:pointer; list-style:none; font-family:var(--font-sans); font-weight:700; font-size:1rem; min-height:2.75rem; display:flex; align-items:center; gap:.5rem; }
.custom-intake details.intake-sec > summary::-webkit-details-marker{ display:none; }
.custom-intake details.intake-sec > summary::before{ content:'+'; font-weight:700; width:1rem; color:var(--wood-deep); }
.custom-intake details.intake-sec[open] > summary::before{ content:'−'; }
.custom-intake .intake-sec .label{ margin:0 0 .5rem; }
.custom-intake .custom-grid{ margin-top:.6rem; }
.custom-intake .units-row{ margin-top:.6rem; flex-wrap:wrap; }
.custom-intake .chips .chip{ font-size:.9375rem; }
.openings{ display:grid; gap:.5rem; margin-top:.5rem; }
.opening-row{ display:grid; grid-template-columns:minmax(0,1.4fr) 4.5rem minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) 2.75rem; gap:.4rem; align-items:end; }
.opening-row label{ display:flex; flex-direction:column; gap:.2rem; font-family:var(--font-sans); font-size:.9375rem; color:var(--foreground); } /* 15px reading floor */
.opening-row input, .opening-row select{ font:inherit; font-size:1rem; min-height:2.75rem; padding:.4rem .5rem; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px); background:var(--card); color:var(--foreground); width:100%; min-width:0; }
.opening-row .opening-remove{ min-height:2.75rem; border:1px solid var(--border); border-radius:.6rem; background:var(--card); cursor:pointer; font-size:1.1rem; }
.opening-row .opening-note{ grid-column:1 / -1; }
@media (max-width:48rem){ .opening-row{ grid-template-columns:minmax(0,1fr) 3.5rem 2.75rem; } .opening-row .opening-w, .opening-row .opening-h, .opening-row .opening-wall{ grid-column:span 1; } .opening-row label:nth-child(3){ grid-column:1; } }
.scope{ display:grid; gap:.25rem; margin-top:.5rem; }
.scope .check-row{ margin-top:0; }
.custom-outcome{ margin:1rem 0 0; padding:1rem 1.1rem; border:1px solid color-mix(in oklab, var(--wood) 50%, var(--border)); border-radius:.75rem; background:oklch(0.973 0.011 84.6); font-family:var(--font-sans); font-size:.9375rem; line-height:1.55; }
.custom-outcome p{ margin:0 0 .5rem; }
.custom-outcome ul{ margin:.25rem 0 .75rem; padding-left:1.1rem; }
.custom-outcome .btn{ margin:.25rem .5rem .25rem 0; }
.plan-view{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#EFEAE1; z-index:1; }

/* intake grids: long labels wrap, columns size to content */
.custom-intake .custom-grid{ grid-template-columns:repeat(auto-fit, minmax(10rem, 1fr)); gap:.6rem; }
.custom-intake .custom-field > span{ white-space:normal; line-height:1.3; display:block; margin-bottom:.25rem; }

/* step 4 (two paths §3.5): on a phone, ONE active step on screen. The body carries data-mstep (1–4);
   only that step's block shows in the flow. Desktop keeps the full flow. */
@media (max-width:60rem){
  body[data-mstep] .builder-flow > .step-block{ display:none; }
  body[data-mstep="1"] #use{ display:block; }
  body[data-mstep="2"] #step2:not([hidden]){ display:block; }
  body[data-mstep="3"] #step3{ display:block; }
  body[data-mstep="4"] #result:not([hidden]){ display:block; }
  body[data-mstep="4"] #step3.step-locked{ display:none; }
  .steps li[role="button"]{ cursor:pointer; }
  .steps li[aria-disabled="true"]{ cursor:default; opacity:.55; }
  .builder-flow > .step-block{ scroll-margin-top:calc(36vh + 6.5rem); }
}
.steps li[role="button"]:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:.4rem; }
.intake-summary{ margin:.5rem 0 0; padding:.9rem 1rem; border:1px solid var(--border); border-radius:.75rem; background:color-mix(in oklab, #ffffff 55%, transparent); font-family:var(--font-sans); font-size:.9375rem; line-height:1.5; }
.intake-summary .label{ margin:0 0 .35rem; }
.intake-summary .textlink{ min-height:2.75rem; }

/* QA 2026-09-08: reading-text floor on the caveats and the consent line; the custom swatch's native input fills its 44px */
.use-caveat, .consent-note{ font-size:.9375rem !important; }
.sw-custom input[type="color"]{ width:100%; height:100%; border:0; padding:0; margin:0; box-sizing:border-box; }