/* Build Your Own — draft page. Extends arc.css / arc-detail.css tokens and
   components (cfg-row, cfg-opt, cfg-stage, readout, swbtns) with the few
   things unique to this page: the draft ribbon, step numbers, and the
   enquiry form. Kept in its own file so nothing here can regress the main
   site's stylesheet. */

.draftband {
  background: var(--ink); color: var(--paper);
  padding: 10px 0; font-size: var(--t-xs);
}
.draftband .wrap { display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; }
.draftband .mono { color: var(--paper); opacity: .82; }
.draftband .mono:first-child { opacity: 1; font-weight: 500; }

.bld-hero { padding-bottom: 0; }

.bld-step { display: flex; align-items: baseline; gap: 12px; margin: clamp(28px, 3.5vw, 44px) 0 14px; }
.bld-step:first-child { margin-top: 0; }
.bld-step .stepnum { color: var(--ink-50); letter-spacing: .14em; font-size: var(--t-xs); }
.bld-step h2, .bld-step h3 { font-size: var(--t-lg); }
.bld-step .desc { display: none; }
.bld-step + .cfg-row { margin-top: 0; }
@media (min-width: 700px) {
  .bld-step { align-items: flex-start; }
  .bld-step .desc { display: block; font-size: var(--t-sm); color: var(--ink-70); max-width: 46ch; margin-left: auto; }
}

/* Module A's own description (id=modADesc) is NOT a .bld-step .desc -- it's a
   sibling <p> below the step heading, always visible at every width. Unlike
   the other step captions, this is the only content Module A's card has in
   pair mode (its old wing-type radiogroup #rowA is hidden then, replaced by
   the width/length ladders docked in .modctls below), so it can never be
   mobile-only hidden the way .bld-step .desc is. */
.moddesc { display: block; font-size: var(--t-sm); color: var(--ink-70); max-width: 52ch; margin: -6px 0 16px; }

/* In pair mode each module's own width + length ladders are relocated here,
   directly under that module's heading, so Module A always has visible
   controls of its own instead of stranding them in the side panel below. */
.modctls { display: flex; flex-wrap: wrap; gap: 18px 40px; }
.modctls:empty { display: none; }
.modctls .widthctl { margin: 0; }

.finnote { font-size: var(--t-xs); color: var(--ink-50); margin-top: -4px; }
/* .bld-color-block pairs a round swatch row with this note directly below it.
   The negative margin above was tuned for plain text preceding it elsewhere
   on the page, but here it pulls the note up under the swatch circles —
   worse once a swatch is selected, since the selected-state ring
   (box-shadow, see .swbtns button[aria-pressed]) extends past the circle's
   own box without adding to its layout height. Give this note real
   clearance instead of a negative pull. */
.bld-color-block .finnote { margin-top: 12px; }

/* Live "starting from" price -- computed from real geometry (build-page.js),
   never a labelled dimension on the drawing itself. Kept monochrome, same
   ink/paper tokens as the rest of the drafting-office system. */
.bld-price {
  margin-top: 12px; border: var(--hair) solid var(--ink); background: var(--paper-2);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.bld-price-tiers { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.bld-price-tier { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; }
.bld-price-tier + .bld-price-tier { border-left: var(--hair) solid var(--rule); padding-left: 24px; }
.bld-price-label { color: var(--ink-50); }
.bld-price-value { font-family: var(--sans); font-size: var(--t-lg); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.bld-price-value--kit { font-size: var(--t-lg); }
.bld-price-value--kitsupply { font-size: var(--t-lg); }
.bld-price-value--mixed { font-size: var(--t-lg); }
/* Over 4.5 m wide there is no delivered-module price to show. The tier stays
   on screen and states why rather than vanishing, so the road-transport
   limit reads as part of the system instead of a missing number. */
.bld-price-tier.is-na .bld-price-label { opacity: .55; }
.bld-price-tier.is-na .bld-price-value { font-size: var(--t-sm); font-weight: 500; opacity: .55; letter-spacing: .01em; }
.bld-price-note { color: var(--ink-50); }
.bld-tech-review-note {
  display: block; margin-top: 8px; font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .02em; color: var(--tan);
}
@media (max-width: 480px) {
  .bld-price-tier { flex: 0 0 auto; }
  .bld-price-tier + .bld-price-tier { border-left: none; padding-left: 0; border-top: var(--hair) solid var(--rule); padding-top: 10px; }
  .bld-price-tiers { flex-direction: column; }
}

.bld-form { display: flex; flex-direction: column; gap: 16px; max-width: 480px; }
.bld-form .frow { display: flex; flex-direction: column; gap: 6px; }
.bld-form label { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); }
.bld-form input, .bld-form textarea {
  font: inherit; font-size: var(--t-sm); padding: 11px 12px;
  border: var(--hair) solid var(--rule); background: var(--paper); color: var(--ink);
  resize: vertical;
}
.bld-form input:focus, .bld-form textarea:focus { outline: none; border-color: var(--ink); }
#bldSummaryLine { border: var(--hair) solid var(--rule); background: var(--paper-2); padding: 10px 12px; font-size: var(--t-xs); }
.bld-form .btn { align-self: flex-start; }

/* Interior + exterior finish previews — compact side-by-side pair beneath
   the plan stage so the whole configurator (plan + both looks) fits on one
   screen without extra scrolling. */
.bld-mini-row { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bld-mini-interior, .bld-mini-exterior { min-width: 0; }
.bld-mini-cap { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-70); }
.bld-mini-stage { position: relative; width: 100%; aspect-ratio: 4/3; background: var(--paper-2); border: var(--hair) solid var(--rule); overflow: hidden; }
.bld-mini-interior .finnote, .bld-mini-exterior .finnote { margin-top: 8px; }
/* When JS relocates the colour-selector block into a mini card on mobile
   (see js/build-page.js mobileColorPlacement), give it its own breathing
   room instead of butting straight up against the finnote above it. */
.bld-mini-interior .bld-color-block, .bld-mini-exterior .bld-color-block { margin-top: 14px; }
.bld-mini-interior .bld-color-block .bld-step, .bld-mini-exterior .bld-color-block .bld-step { margin: 0 0 10px; }
@media (max-width: 640px) {
  .bld-mini-row { grid-template-columns: 1fr; }
  .bld-mini-stage { aspect-ratio: 16/9; }
}

/* Finished view -- photoreal hero render swapped by layout (single / pair)
   and cladding colour, once both are chosen. Reuses the .elm-photo-stack /
   .asm-photo-layer crossfade already defined in arc.css for the interior
   and exterior mini previews above. Renders are indicative, not dimensionally
   exact -- see the finnote under this block. */
.bld-hero-block { margin-top: 22px; }
.bld-hero-stage { position: relative; width: 100%; aspect-ratio: 3/2; background: var(--paper-2); border: var(--hair) solid var(--rule); overflow: hidden; }
.bld-hero-block .finnote { margin-top: 10px; }

.bld-dl { margin-top: 16px; }
.bld-dl svg { width: 14px; height: 14px; }
.bld-dl[disabled] { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------------------
   Stage 3 -> stage 4/5 handoff. The configurator used to terminate in its own
   mailto form, which dead-ended the six-stage journey: a visitor configured a
   home and then had nowhere to go. This block replaces it with the fork the
   architecture always intended -- Elements (optional, stage 4) or straight on
   to the enquiry pack (stage 5) -- with the carried configuration shown above
   it so the handoff is visibly lossless.
   --------------------------------------------------------------------------- */
.bld-handoff { border-top: var(--hair) solid var(--rule); }

.handoff-recap {
  margin: 0 0 22px; padding: 14px 16px;
  background: var(--paper-2); border: var(--hair) solid var(--rule);
}
.handoff-recap-h {
  display: block; font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-50); margin-bottom: 6px;
}
.handoff-recap p { margin: 0; color: var(--ink); }

.handoff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.handoff-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px; text-decoration: none; color: inherit;
  background: var(--paper); border: var(--hair) solid var(--rule);
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.handoff-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.handoff-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* The optional stage leads, because interiors are the richer next step -- but
   it is tinted rather than solid so it never outranks the enquiry itself. */
.handoff-card.is-primary { background: var(--forest); border-color: var(--forest); }
.handoff-card.is-primary,
.handoff-card.is-primary h3,
.handoff-card.is-primary p { color: var(--paper); }
.handoff-card.is-primary .handoff-stage { color: var(--tan); }
.handoff-card.is-primary:hover { border-color: var(--tan); }

.handoff-stage {
  font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-50);
}
.handoff-card h3 { margin: 0; font-size: var(--t-lg); line-height: 1.2; }
.handoff-card p { margin: 0; font-size: var(--t-sm); color: var(--ink-70); line-height: 1.5; }

.handoff-go {
  margin-top: auto; padding-top: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .06em; text-transform: uppercase;
}
.handoff-go svg { width: 15px; height: 9px; }
.handoff-card:hover .handoff-go svg { transform: translateX(3px); }
.handoff-go svg { transition: transform .18s ease; }

.bld-handoff .finnote { margin-top: 16px; }

/* Not ready yet: a quiet secondary route under the enquiry card. */
.bld-notready {
  margin-top: 16px; padding: 18px 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; align-items: start;
  border: var(--hair) dashed var(--rule); background: var(--paper);
}
.bld-notready h3 { margin: 0 0 10px; font-size: var(--t-base); line-height: 1.3; }
.bld-notready .bld-dl { margin: 0; }
.bld-notready-keep label { display: block; font-size: var(--t-sm); color: var(--ink-70); margin-bottom: 8px; }
.bld-keep-row { display: flex; gap: 8px; }
.bld-keep-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 10px 12px;
  border: var(--hair) solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 0;
}
.bld-keep-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.bld-keep-row .btn-quiet { margin: 0; white-space: nowrap; }
.bld-keep-msg { margin: 8px 0 0; font-size: var(--t-xs); color: var(--ink-70); min-height: 1em; }
.bld-keep-msg:empty { display: none; }
@media (max-width: 720px) {
  .bld-notready { grid-template-columns: 1fr; padding: 16px; }
}

@media (max-width: 720px) {
  .handoff-grid { grid-template-columns: 1fr; }
  .handoff-card { padding: 18px; }
}

/* ==========================================================================
   How-to-use intro strip
   ========================================================================== */
/* How-to-use intro strip -- leads the Configure stage, directly above the
   live Module A / B configurator. No product-specific copy or imagery --
   just orientation for using the tool below it. */
.bld-howto { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(20px, 3vw, 32px); }
.bld-howto .secnum { display: block; margin-bottom: 14px; }
.bld-howto h1 { font-size: var(--t-2xl); margin: 0 0 12px; }
.bld-howto .lede { margin: 0; font-size: var(--t-base); color: var(--ink-70); max-width: 62ch; }

/* "Your Arc Kit has been expanded" banner -- surfaces only once the live
   configuration's area has moved off the 48 sqm default. Tan-bordered so it
   reads as an update notice, distinct from the steady price panel below. */
.bld-expand-banner {
  margin-top: 12px; border: var(--hair) dashed var(--tan);
  background: color-mix(in srgb, var(--tan) 7%, transparent);
  padding: 14px 18px; display: flex; flex-direction: column; gap: 5px;
}
.bld-expand-h { display: block; color: var(--tan); }
.bld-expand-row { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink); }
.bld-expand-sub { display: block; color: var(--ink-70); margin-top: 4px; }
.bld-expand-total { font-family: var(--serif); font-style: italic; font-size: var(--t-lg); color: var(--ink); }

/* Unpriced "Add Arc Elements later" block, at the foot of the handoff
   section -- deliberately quiet (no price panel, no forest CTA) since the
   whole point is that it is not part of the automatic price. */
.bld-elements-later {
  margin-top: 28px; padding-top: 24px; border-top: var(--hair) solid var(--rule);
  display: flex; flex-direction: column; gap: 8px; max-width: 60ch;
}
.bld-elements-later h3 { margin: 0; font-size: var(--t-lg); }
.bld-elements-later p { margin: 0; font-size: var(--t-sm); color: var(--ink-70); line-height: 1.6; }
.bld-elements-later .btn-quiet { margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; width: fit-content; }

@media (max-width: 620px) {
  .bld-expand-total { font-size: var(--t-base); }
}

/* ---------------------------------------------------------- range switch
   Two ranges share one configurator: the dwelling matrix (wings, widths,
   lengths, three supply pathways) and the wellness pavilions (fixed design,
   fixed price). The switch sits under the page lede so the visitor makes that
   choice before any control below it means anything. */
.rangeswitch { margin-top: clamp(20px, 2.8vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.rangeswitch-h { color: var(--ink-50); }
.rangeswitch .cfg-row { flex-wrap: wrap; }
/* four tabs: two up at desktop widths is plenty, and they wrap to a stack on
   a phone rather than squeezing the labels. */
.rangeswitch .cfg-opt { flex: 1 1 200px; min-width: 0; }
.rs-sub { display: block; font-size: 9px; letter-spacing: .1em; }

/* wellness panel: the plan sits under the render rather than beside it, so it
   gets its own top rule and a little air from the caption above. */
.wl-plan { margin-top: clamp(22px, 3vw, 34px); }
.wl-pdf { color: var(--ink-70); text-decoration: underline; text-underline-offset: 3px; }
.wl-pdf:hover { color: var(--ink); }
.wl-io-step { margin-top: clamp(30px, 4vw, 48px); }
.wl-recap { margin-top: clamp(26px, 3.4vw, 40px); }

/* ---------------------------------------------------------------- .bld-disc
   Width-rule and layout explainers inside the configurator panel. Closed by
   default: the ladder reads as the answer, the reasoning is one click away.
   Styling comes from arc-ux.css (.disc); this only sets the placement. */
.bld-disc { margin: clamp(14px, 2vw, 22px) 0 clamp(4px, 1vw, 10px); }
.bld-disc .disc:last-of-type { border-bottom: var(--hair, 1px) solid var(--rule, #c9c4b6); }
.bld-disc .disc > summary { padding-block: .8rem; }

/* ---- Studio cabins (js/cabins.js): fixed designs, real renders */
.cb-ext-stage { aspect-ratio: 1672/941; }
.cb-int-stage { aspect-ratio: 4/3; }
.bld-mini-cap.cb-gap { margin-top: 22px; }
.cb-plan { background: #fbfaf6; border: var(--hair) solid var(--rule); }
.cb-plan img { display: block; width: 100%; height: auto; }
#cabinsConfig .bld-price { margin-top: 22px; }
#cabinsConfig .cfg-panel .bld-step + .cfg-row { margin-bottom: 22px; }
.cb-path-row { flex-direction: column; align-items: stretch; }
.cb-path-row .cfg-opt { text-align: left; }
.bld-price-tier.is-chosen .bld-price-label { color: var(--forest); }
#cabinsConfig .readout { margin-bottom: 20px; }
.cb-col { margin-top: 18px; } .cb-col .bld-step { margin: 0 0 10px; }