/* Sauna setup wizard (/setup). Uses the tokens in platform.css; see DESIGN.md. */
.wz-app{background:var(--paper)}
.wz-top{border-bottom:1px solid var(--line);background:var(--paper)}
.wz-top-inner{max-width:1120px;margin:0 auto;padding:.75rem 16px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.wz-signin{color:var(--rust);font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.wz-main{max-width:1120px;margin:0 auto;padding:1rem 16px 3rem}
.wz-progress{list-style:none;margin:0 0 1.25rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.wz-progress li{display:flex}
.wz-progress li>span,.wz-progress a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.35rem .85rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:.875rem;font-weight:560;text-decoration:none}
.wz-progress a{color:var(--rust)}
.wz-progress .is-current>span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wz-progress .is-done a{background:var(--rust-wash);border-color:var(--rust-line);color:var(--rust-ink)}
.wz-grid{display:grid;gap:1.5rem;align-items:start}
.wz-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
.wz-card h1{font-size:1.875rem;letter-spacing:-.02em}
.wz-form{margin-top:1.25rem}
.wz-form>label,.wz-form>p{max-width:40rem}
.wz-form>input{margin-bottom:1.125rem}
.wz-form>input:has(+.wz-hint),.wz-form>input:has(+.field-error){margin-bottom:.375rem}
.wz-hint,.wz-fine{font-size:.875rem;color:var(--ink-2);margin:0 0 1.125rem}
.wz-fine{margin:.75rem 0 0}
.wz-form button[type=submit]:not(.secondary){margin-top:.5rem}
.field-error{display:block;color:var(--red);font-size:.875rem;margin:0 0 1rem}
.wz-find{margin:0 0 1.25rem}
.wz-match-area:empty{display:none}
.wz-matches{list-style:none;margin:0 0 .75rem;padding:0;display:grid;gap:.5rem}
.wz-match{border:1px solid var(--rust-line);background:var(--rust-wash);border-radius:var(--radius-sm);padding:.75rem;display:grid;gap:.5rem}
.wz-match .wz-hint{margin:0}
.wz-new{font-size:.9375rem;color:var(--ink-2);margin:0 0 1rem}
.wz-pills{border:0;margin:0 0 1.125rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.wz-pills legend{font-size:.9375rem;font-weight:560;margin-bottom:.5rem;padding:0;width:100%}
.wz-pill{position:relative;display:inline-flex;margin:0}
/* The real radio or checkbox covers the whole chip, so the tap target is the chip (44px), not a 1px dot. */
.wz-pill input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;min-height:0;padding:0;margin:0;cursor:pointer}
.wz-pill span{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding:.4rem 1rem;border:1px solid var(--line-control);border-radius:999px;background:var(--surface);font-weight:560;cursor:pointer}
.wz-pill input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wz-pill input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
.wz-custom{display:none;margin:0;min-width:7rem}
.wz-pills:has(input[value=custom]:checked) .wz-custom{display:grid}
.wz-toggle-block{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75rem;margin:0 0 1rem}
.wz-switch,.wz-check{display:flex;align-items:center;gap:.75rem;margin:0;font-weight:560;cursor:pointer;min-height:44px}
.wz-switch input,.wz-check input{width:24px;height:24px;min-height:24px;flex:none;padding:0;margin:0}
.wz-check{align-items:flex-start;margin:0 0 1rem;font-weight:500}
.wz-when-on{margin-top:.75rem}
.wz-toggle-block:not(:has(input[role=switch]:checked)) .wz-when-on{display:none}
.wz-money{display:flex;align-items:center;gap:.5rem;max-width:12rem;margin-bottom:.5rem}
.wz-money span{font-weight:700;color:var(--ink-2)}
.wz-explainer{background:var(--sunk);border-radius:var(--radius-sm);padding:.75rem;margin:0 0 1.25rem;color:var(--ink)}
.wz-columns{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;max-width:24rem}
.wz-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}
.wz-back{color:var(--rust);font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.wz-fees{border:0;margin:0 0 1rem;padding:0;display:grid;gap:.75rem;background:none}
.wz-fee-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;gap:.4rem;margin:0;padding:1rem 1rem 1rem 3rem;border:1px solid var(--line-control);border-radius:var(--radius);background:var(--surface);cursor:pointer;font-weight:400}
.wz-fees .wz-fee-card{display:grid;margin:0;padding-block:1rem}
.wz-fee-card>input{position:absolute;left:1rem;top:1.1rem;width:24px;height:24px;min-height:24px;padding:0;margin:0}
.wz-fee-card:has(input:checked){border-color:var(--rust);background:var(--rust-wash)}
.wz-fee-title{font-size:1.0625rem;font-weight:700}
.wz-fee-text{color:var(--ink-2)}
.wz-fee-math{display:grid;gap:.15rem;font-size:.9375rem}
.wz-fee-math small{color:var(--ink-2)}
.wz-badge{justify-self:start;font-size:.8125rem;font-weight:600;padding:.1rem .6rem;border-radius:999px;background:var(--ink);color:var(--paper)}
.wz-badge.is-founding{background:var(--sage-wash);color:var(--sage-ink)}
.wz-phone-wrap{display:grid;justify-items:center;gap:.5rem}
.wz-phone{width:min(300px,100%);border-radius:24px;background:var(--ink);padding:12px}
.wz-phone-screen{border-radius:16px;background:var(--paper);padding:1.25rem 1rem;min-height:340px;display:grid;align-content:start;gap:.5rem}
.wz-phone-name{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:-.02em;overflow-wrap:anywhere}
.wz-phone-place{color:var(--ink-2);font-size:.875rem;margin:0}
.wz-phone-day{font-weight:600;margin-top:.75rem}
.wz-phone-tile{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:.6rem .75rem}
.wz-phone-left{color:var(--sage-ink);font-size:.8125rem}
.wz-phone-option{font-size:.875rem;border:1px solid var(--rust-line);background:var(--rust-wash);color:var(--rust-ink);border-radius:var(--radius-sm);padding:.5rem .65rem;margin:0}
.wz-phone-option[hidden]{display:none}
.wz-phone-note{font-size:.8125rem;color:var(--ink-2)}
/* Step 4: their booking page with a banner above and the save card beside it. */
.wz-banner{background:var(--ink);color:var(--paper)}
.wz-banner-inner{max-width:1120px;margin:0 auto;padding:.75rem 16px}
.wz-banner .wz-progress{margin-bottom:.5rem}
.wz-banner .wz-progress li>span,.wz-banner .wz-progress a{background:transparent;color:var(--paper);border-color:rgb(251 244 234 / .4)}
.wz-banner .wz-progress .is-current>span{background:var(--paper);color:var(--ink)}
.wz-banner .wz-progress a:focus-visible{outline-color:var(--paper)}
.wz-banner strong{color:var(--paper)}
.wz-preview-frame{display:grid;gap:1rem}
.wz-preview-page{position:relative;min-width:0}
.wz-preview .sf-dock{display:none}
.wz-dock{position:sticky;bottom:0;z-index:5;display:flex;justify-content:center;padding:.75rem 16px;background:var(--paper);border-top:1px solid var(--line)}
.wz-dock a{width:100%;max-width:28rem}
.wz-save{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;margin:0 16px 2rem}
.wz-save h2{margin-bottom:.75rem}
.wz-save form>label:not(.wz-check){margin-bottom:.375rem}
.wz-save input:not([type=checkbox]){margin-bottom:1rem}
@media (min-width:900px){
  .wz-grid{grid-template-columns:minmax(0,1fr) 320px}
  .wz-phone-wrap{position:sticky;top:1rem}
  .wz-card{padding:2rem}
  .wz-preview-frame{grid-template-columns:minmax(0,1fr) 360px;align-items:start;max-width:1280px;margin:0 auto}
  .wz-save{position:sticky;top:1rem;margin:1rem 16px 2rem 0}
  .wz-dock{display:none}
}
@media (max-width:899px){
  .wz-phone-screen{min-height:0}
}
/* Chips sit on even rows: the console's stacked-checkbox rule (a negative top margin between sibling labels) must not reach them. */
.wz-pills>.wz-pill{padding:0;min-height:0;align-items:center;margin:0 !important}
.wz-find[hidden]{display:none}
/* The wordmark is a link home: give it a 44px tap height without moving it. */
.wz-top .wordmark{display:inline-flex;align-items:center;min-height:44px}
/* The hidden "How you pay Olladay" legend stays 1px: .checks legend would otherwise stretch it past the screen edge. */
.wz-fees legend.visually-hidden{float:none;width:1px}

.wz-main{padding-top:1.75rem}
.wz-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:2rem;border-bottom:1px solid var(--line)}
.wz-progress li{position:relative;min-width:0}
.wz-progress li>span,.wz-progress a{width:100%;min-height:64px;padding:.75rem .75rem .875rem;border:0;border-bottom:3px solid transparent;border-radius:0;background:none;color:var(--ink-2);gap:.625rem;line-height:1.35}
.wz-step-number{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid var(--line-strong);border-radius:50%;font-size:.8125rem;font-variant-numeric:tabular-nums}
.wz-step-label{font-size:.875rem}
.wz-progress .is-current>span{background:none;border-color:var(--rust);color:var(--ink);font-weight:700}
.wz-progress .is-current .wz-step-number{background:var(--rust);border-color:var(--rust);color:#fff}
.wz-progress .is-done a{background:none;border-color:var(--rust-line);color:var(--rust-ink)}
.wz-progress .is-done .wz-step-number{background:var(--rust-wash);border-color:var(--rust-line)}
.wz-grid{gap:clamp(1.5rem,4vw,3rem)}
.wz-card{padding:clamp(1.25rem,3vw,2.5rem);box-shadow:var(--card-shadow)}
.wz-card h1{font-size:clamp(1.875rem,3vw,2.5rem);line-height:1.15}
.wz-form{margin-top:1.75rem}
.wz-form>input{min-height:52px}
.wz-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.wz-columns input,.wz-money input{min-width:0}
.wz-form>button[type=submit]:not(.secondary),.wz-actions>button{min-height:52px}
.wz-preview-heading{width:100%;display:grid;gap:.375rem}
.wz-preview-heading h2{font-size:1.125rem}
.wz-preview-heading p{font-size:.875rem;color:var(--ink-2)}
.wz-phone-wrap{justify-items:stretch;gap:1rem}
.wz-phone{width:100%;padding:0;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.wz-phone-screen{border-radius:0;padding:1.5rem;min-height:0;background:var(--surface)}
.wz-phone-name{font-size:1.5rem;line-height:1.2}
.wz-phone-day{font-size:.875rem;color:var(--ink-2);padding-top:1rem;border-top:1px solid var(--line)}
.wz-phone-tile{background:var(--sunk);border-color:var(--line)}
.wz-phone-tile strong{font-size:1.25rem;font-variant-numeric:tabular-nums}
.wz-phone-option{background:none;border-color:var(--line);color:var(--ink);padding:.75rem}
.wz-phone-note{font-size:.875rem;line-height:1.5;text-align:center}
.wz-fee-card{padding:1.25rem 1.25rem 1.25rem 3.25rem}
.wz-fees .wz-fee-card{padding-block:1.25rem}
.wz-fee-card>input{top:1.35rem}
.wz-fee-card:has(input:checked){box-shadow:inset 0 0 0 1px var(--rust)}
.wz-fee-math{gap:.375rem;padding-top:.75rem;margin-top:.375rem;border-top:1px solid var(--line)}
.wz-save{padding:1.5rem;box-shadow:var(--card-shadow)}
.wz-save h2{font-size:1.5rem;line-height:1.25}
.wz-save button[type=submit]{width:100%;min-height:52px}
.wz-signin,.wz-back{color:var(--rust-ink)}
.wz-preview-page{container:setup-preview / inline-size}
.wz-banner .wz-progress{border-color:rgb(250 246 240 / .2)}
.wz-banner .wz-progress li>span,.wz-banner .wz-progress a{background:none;border-bottom-color:transparent}
.wz-banner .wz-progress .is-current>span{background:none;color:var(--deep-ink);border-bottom-color:var(--deep-ink)}
.wz-banner .wz-step-number{border-color:rgb(250 246 240 / .4)}
.wz-banner .wz-progress .is-current .wz-step-number{background:var(--deep-ink);color:var(--deep);border-color:var(--deep-ink)}
.wz-banner{background:var(--deep);color:var(--deep-ink)}
.wz-banner strong,.wz-banner .wz-progress a,.wz-banner .wz-progress li>span{color:var(--deep-ink)}
@media(min-width:900px){
  .wz-grid{grid-template-columns:minmax(0,1fr) 320px}
  .wz-phone-wrap{top:2rem;padding-top:1rem}
}
@media(max-width:767px){
  .wz-main{padding-top:.75rem}
  .wz-progress{margin-bottom:1.25rem}
  .wz-progress li>span,.wz-progress a{flex-direction:column;align-items:flex-start;padding:.5rem .35rem .75rem;gap:.5rem;min-height:92px}
  .wz-step-label{font-size:.75rem}
  .wz-step-number{width:24px;height:24px;font-size:.75rem}
  .wz-phone-wrap{max-width:none}
  .wz-preview-heading{padding-inline:.25rem}
  .wz-form>button[type=submit]:not(.secondary),.wz-actions>button{width:100%}
  .wz-save{margin-top:1rem}
}
@container setup-preview (max-width:900px){
  .sf .sf-book,.sf-chapter{grid-template-columns:1fr;gap:1.25rem;padding-top:2.5rem}
  .sf-rail{position:static}
  .sf .sf-book .shop-links{flex-direction:row;flex-wrap:wrap}
  .sf .sf-book .service-filter{flex-direction:row;overflow-x:auto}
  .sf .sf-book .service-filter a{flex:none}
  .sf-story.has-photo .sf-story-body{grid-template-columns:1fr}
  .public-app .sf-cover h1{font-size:clamp(2.25rem,7cqi,3.5rem)}
}