/* Orchard configurator — a five-step guided flow. Tokens come from site.css.

   The shape is deliberately borrowed from car configurators: a sticky progress
   rail carrying the running total, one decision set on screen at a time, and
   Back / Continue sitting at the foot of the step itself rather than in a bar
   bolted to the window. */

.cfg-hero{padding-block:clamp(44px,5vw,72px) clamp(20px,2.4vw,30px)}
.cfg-hero h1{font-size:clamp(34px,4.8vw,58px);max-width:20ch}
.cfg-hero .lede{max-width:64ch;margin-top:22px}

/* ---------------------------------------------------------------- the rail */
.rail-wrap{position:sticky;top:62px;z-index:60;background:rgba(255,255,255,.88);
 -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
 border-block:1px solid var(--hair)}
.rail-row{display:flex;align-items:center;gap:24px}
.rail{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
/* The running total lives in the sticky rail now. It has to stay visible while
   you work, but it doesn't need a bar of its own bolted to the window. */
.rail-tot{text-align:right;flex:0 0 auto}
.rail-tot s{display:block;text-decoration:none;font-size:10.5px;font-weight:600;letter-spacing:.1em;
 text-transform:uppercase;color:var(--ink-3)}
.rail-tot b{font-size:17px;font-weight:600;letter-spacing:-.026em;font-variant-numeric:tabular-nums}
.rail::-webkit-scrollbar{display:none}
.rl{appearance:none;border:0;background:transparent;font:inherit;cursor:pointer;
 display:flex;align-items:center;gap:9px;padding:14px 20px 13px;white-space:nowrap;
 color:var(--ink-3);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.rl:first-child{padding-left:0}
.rl i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-style:normal;
 font-size:11.5px;font-weight:600;border:1px solid var(--hair-2);color:var(--ink-3);
 transition:background .2s,color .2s,border-color .2s}
.rl span{font-size:14px;letter-spacing:-.01em}
.rl:hover{color:var(--ink)}
.rl.done{color:var(--ink-2)}
.rl.done i{background:var(--olive);border-color:var(--olive);color:#fff}
.rl.on{color:var(--ink);border-bottom-color:var(--ink)}
.rl.on i{background:var(--ink);border-color:var(--ink);color:#fff}

/* --------------------------------------------------------------- the steps */
.stp{padding-block:clamp(34px,4vw,58px) 0;max-width:960px}
.stp-k{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
 color:var(--ink-3);margin:0 0 14px}
.stp h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.028em;margin:0}
.stp-p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:60ch;margin:16px 0 34px}
.stp-sub{font-size:20px;letter-spacing:-.022em;margin:46px 0 20px}

/* pick cards — step 1 */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:780px){.pick{grid-template-columns:1fr}}
.pk{appearance:none;font:inherit;text-align:left;cursor:pointer;background:var(--paper);
 border:1px solid var(--hair-2);border-radius:var(--r);padding:22px 20px 20px;
 transition:border-color .2s,box-shadow .2s,background .2s}
.pk:hover{border-color:var(--ink-3)}
.pk.on{border-color:var(--olive);box-shadow:0 0 0 1px var(--olive) inset,0 8px 24px -12px rgba(29,29,31,.28)}
.pk-ic{display:block;width:44px;height:44px;color:var(--ink-2);margin-bottom:16px}
.pk.on .pk-ic{color:var(--olive)}
.pk-ic svg{width:100%;height:100%}
.pk b{display:block;font-size:17px;font-weight:600;letter-spacing:-.022em;margin-bottom:5px}
.pk s{display:block;text-decoration:none;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.pk em{display:block;font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.08em;
 text-transform:uppercase;color:var(--ink-3);margin-top:12px}
.pk.on em{color:var(--olive)}
/* the small print under a summary row — what the number actually covers */
.sum-fig i{display:block;font-style:normal;font-size:11.5px;line-height:1.45;color:var(--ink-3);margin-top:2px}
.sum-fig span{max-width:30ch}

/* panels */
.panel{border:1px solid var(--hair);border-radius:var(--r);background:var(--paper);overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
 padding:14px 18px;border-bottom:1px solid var(--hair);background:var(--paper-2)}
.panel-h h2{font-size:15px;letter-spacing:-.018em;margin:0}
.panel-b{padding:20px}

/* ---- add-room menu ---- */
#addMenu{display:flex;flex-wrap:wrap;gap:6px;padding:14px 18px;border-bottom:1px solid var(--hair);
 background:var(--paper-2)}
#addMenu button{appearance:none;border:1px solid var(--hair-2);background:#fff;font:inherit;
 font-size:12.5px;padding:6px 12px;border-radius:100px;cursor:pointer;color:var(--ink-2);
 transition:border-color .2s,color .2s}
#addMenu button:hover{border-color:var(--olive);color:var(--olive)}
#addMenu button::before{content:"+ ";color:var(--olive);font-weight:600}

/* ---- the room list ----
   This replaced a drag-and-drop floor plan. Nobody was ever going to draw their
   house, the budget only reads floor areas, and a canvas of loose boxes with
   clipped labels looked like sticky notes. A list states the same thing and
   can't look untidy. */
.rlist{list-style:none;margin:0;padding:0}
.rrow{display:flex;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--hair)}
.rrow:last-child{border-bottom:0}
.rrow.out{background:rgba(238,243,232,.5)}
.rname{flex:1;min-width:0;font-size:15px;font-weight:500;letter-spacing:-.012em;
 padding:7px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink)}
.rname:hover{background:var(--paper-2)}
.rname:focus{border-color:var(--ink);background:#fff}
.step.sm span{min-width:52px;font-size:13px}
.step.sm button{width:26px;height:26px}
.rx{appearance:none;border:0;background:transparent;font:inherit;font-size:19px;line-height:1;
 width:30px;height:30px;border-radius:50%;cursor:pointer;color:var(--ink-3);flex:0 0 auto}
.rx:hover{background:var(--paper-3);color:#a8442f}
.rempty{padding:26px 18px;font-size:14px;color:var(--ink-3);font-style:italic}
.panel-h .sub{font-size:12.5px;color:var(--ink-3)}
#addMenu{border-bottom:0;border-top:1px solid var(--hair)}

/* ---- step 3: the room walk ---- */
.rstrip{display:flex;gap:6px;overflow-x:auto;padding-bottom:14px;margin-bottom:16px;scrollbar-width:none}
.rstrip::-webkit-scrollbar{display:none}
.rchip{appearance:none;border:1px solid var(--hair-2);background:#fff;font:inherit;font-size:12.5px;
 padding:7px 14px;border-radius:100px;cursor:pointer;color:var(--ink-3);white-space:nowrap;
 transition:border-color .2s,color .2s,background .2s}
.rchip:hover{color:var(--ink)}
.rchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.rm-one{max-width:720px}
#rname{flex:1;font-size:18px;font-weight:600;letter-spacing:-.022em;padding:7px 10px;
 border:1px solid transparent;border-radius:8px;background:#fff}
#rname:focus{border-color:var(--ink)}
.del{appearance:none;border:1px solid var(--hair-2);background:#fff;font:inherit;font-size:12.5px;
 padding:7px 12px;border-radius:100px;cursor:pointer;color:var(--ink-2)}
.del:hover{border-color:#a8442f;color:#a8442f}
.rp-dim{font-size:12.5px;color:var(--ink-3);margin-bottom:12px}

/* ---- options ---- */
.opt{display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:11px 0;border-top:1px solid var(--hair)}
.opt b{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em}
.opt s{display:block;text-decoration:none;font-size:12px;color:var(--ink-3);margin-top:1px}
.step{display:flex;align-items:center;gap:2px;border:1px solid var(--hair-2);border-radius:100px;
 padding:2px;flex:0 0 auto}
.step button{appearance:none;border:0;background:transparent;width:28px;height:28px;border-radius:50%;
 font:inherit;font-size:15px;line-height:1;cursor:pointer;color:var(--ink-2)}
.step button:hover{background:var(--paper-3);color:var(--ink)}
.step span{min-width:28px;text-align:center;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.opt select{width:auto;min-width:140px;padding:8px 10px;font-size:13.5px}
.sw{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw span{position:absolute;inset:0;background:var(--hair-2);border-radius:100px;transition:background .22s;cursor:pointer}
.sw span::after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;
 background:#fff;transition:transform .22s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked + span{background:var(--olive)}
.sw input:checked + span::after{transform:translateX(18px)}
.rp-cost{margin-top:16px;padding-top:14px;border-top:1px solid var(--hair);font-size:13.5px;
 color:var(--ink-2);display:flex;justify-content:space-between}
.rp-cost b{font-size:17px;color:var(--ink);letter-spacing:-.02em}
.hint{font-size:15px;color:var(--ink-3);margin:0}
.house-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px}
@media(max-width:640px){.house-grid{grid-template-columns:1fr}}

/* ---- step 5: summary ---- */
.sum-grid{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start}
.sum-grid>*{min-width:0}
@media(max-width:900px){.sum-grid{grid-template-columns:1fr}}
.sum-fig{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;font-size:14px}
.sum-fig span{color:var(--ink-2)}
.sum-fig b{font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sum-fig.big{border-top:1px solid var(--hair);margin-top:6px;padding-top:15px}
.sum-fig.big b{font-size:23px}
.sum-meta{display:flex;gap:18px;font-size:12.5px;color:var(--ink-3);padding-bottom:13px;border-bottom:1px solid var(--hair)}
#sList{list-style:none;margin:13px 0 0;padding:0}
#sList li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:7px 0;color:var(--ink-2)}
#sList li b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
#sList li.sys span{color:var(--olive)}
#sList li.empty{color:var(--ink-3);font-style:italic}
.sum-acts{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.sum-acts button{flex:1;appearance:none;border:1px solid var(--hair-2);background:#fff;
 font:inherit;font-size:13px;padding:9px 10px;border-radius:100px;cursor:pointer;color:var(--ink-2);
 white-space:nowrap}
.sum-acts button:hover{border-color:var(--ink);color:var(--ink)}
#cfgLink{font-size:11.5px;padding:8px 10px;margin-top:10px;color:var(--ink-3);width:100%}
.disclaim{font-size:11.5px;line-height:1.55;color:var(--ink-3);margin-top:14px}

/* ---- step actions ---- */
.stp-acts{max-width:960px;display:flex;align-items:center;justify-content:space-between;gap:12px;
 margin-top:clamp(30px,3.4vw,44px);padding-block:24px clamp(56px,6vw,84px);
 border-top:1px solid var(--hair)}
#btnNext{border:0;cursor:pointer;font:inherit;font-size:15px;padding:12px 26px}
#btnNext:disabled{opacity:.4;cursor:default}
.btn-ghost{appearance:none;border:1px solid var(--hair-2);background:#fff;font:inherit;font-size:14px;
 padding:11px 22px;border-radius:100px;cursor:pointer;color:var(--ink-2)}
.btn-ghost:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.btn-ghost:disabled{opacity:.35;cursor:default}

@media(max-width:620px){
  .rail-row{gap:12px}
  .rail-tot s{display:none}
  .rail-tot b{font-size:15px}
  .rl{padding:12px 13px 11px}
  .rl span{font-size:13px}
  .btn-ghost{padding:10px 16px;font-size:13.5px}
  #btnNext{padding:11px 20px;font-size:14px}
}
/* Below this the rail labels crowd; the numbers alone still show progress. */
@media(max-width:460px){.rl:not(.on) span{display:none}}

@media print{
  header.nav,.rail-wrap,.stp-acts,#addMenu,.sum-acts,.cfg-hero .lede,footer,.cookie{display:none!important}
  .sum-grid{grid-template-columns:1fr}
  .panel{border:0}
}