/* =============================================================
   CABOO · SIGN-UP — wizard.css
   Stepped setup. The stepper is the only persistent chrome; each
   step is an isolated module. Step 1 (Practice): fill -> dual
   lookup -> confirm. Bookings are auto-confirm by design, so
   safety lives in setup, not in a per-booking gate.
   ============================================================= */

.wiz { position: relative; }

/* shared */
.wiz-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.06; letter-spacing: -.02em; color: var(--head-mute); margin: 0; text-wrap: balance; text-shadow: 0 1px 0 rgba(255,255,255,.92), 0 -1px 2px rgba(26,22,19,.08); }
.wiz-title em { font-style: normal; color: var(--espresso); }
.wiz-title--sm { font-size: clamp(1.5rem, 3vw, 2rem); }
.wiz-sub { margin: 14px auto 0; max-width: 470px; font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--ink-2); text-wrap: pretty; }
.cta svg { width: 1.05em; height: 1.05em; margin-left: .5em; }
.step-head { text-align: center; max-width: 600px; margin: 0 auto clamp(24px, 3.6vh, 38px); }
.step-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: clamp(24px, 3.6vh, 38px) auto 0; }
.wiz-restart { appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer; color: var(--ink-3); font-family: var(--font-body); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; }
.wiz-restart:hover { color: var(--ink-2); }

/* ---- HEAD: back control + stepper ---- */
.wiz-head { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 20px); max-width: 620px; margin: clamp(10px, 2vh, 24px) auto clamp(34px, 5.5vh, 60px); }
.wiz-back { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; appearance: none; -webkit-appearance: none; cursor: pointer; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease); }
.wiz-back svg { width: 19px; height: 19px; }
.wiz-back:hover { border-color: rgba(26, 22, 19, .24); color: var(--ink); background: var(--canvas); }
.wiz-back:focus-visible { outline: 0; border-color: var(--coral-2); box-shadow: 0 0 0 3px rgba(242, 94, 64, .18); }
.wiz-back.is-off { visibility: hidden; }

/* ---- STEPPER (segmented progress rail) ---- */
.stepper { flex: 1; min-width: 0; }
.stepper ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.stepper__item { flex: 1; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.stepper__bar { height: 6px; border-radius: 999px; background: var(--rule); transition: background .35s var(--ease); }
.stepper__label { display: flex; align-items: baseline; gap: 7px; font-size: .82rem; font-weight: 500; color: var(--ink-3); transition: color .25s var(--ease); }
.stepper__num { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-3); transition: color .25s var(--ease); }
.stepper__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepper__item.is-done .stepper__bar,
.stepper__item.is-current .stepper__bar { background: var(--coral-2); }
.stepper__item.is-current .stepper__label { color: var(--ink); }
.stepper__item.is-current .stepper__num { color: var(--coral-ink); }
.stepper__item.is-done .stepper__label { color: var(--ink-2); }
.stepper__item.is-done .stepper__num { color: var(--coral-ink); }
/* completed/current steps are clickable to jump back */
.stepper__item.is-done, .stepper__item.is-current { cursor: pointer; }
.stepper__item.is-done:hover .stepper__bar { background: var(--coral-1); }
.stepper__item.is-done:hover .stepper__label { color: var(--ink); }
.stepper__item.is-upcoming { cursor: default; }

/* ---- STEPS / PHASES ---- */
.screen { display: none; }
.screen.is-active { display: block; animation: stepIn .42s var(--ease); }
.phase { display: none; }
.wiz[data-phase="fill"] .phase--fill,
.wiz[data-phase="looking"] .phase--looking,
.wiz[data-phase="confirm"] .phase--confirm { display: block; animation: stepIn .42s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- FIELDS (shared) ---- */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field--wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.field > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.field > span em.found { color: var(--coral-ink); }
.field input { width: 100%; appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink); background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.field input::placeholder { color: var(--ink-3); }
.field input:focus { outline: 0; border-color: var(--coral-2); box-shadow: 0 0 0 3px rgba(242,94,64,.15); }

/* custom dropdown (service type, location) */
.dropdown { position: relative; }
.dropdown__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; appearance: none; -webkit-appearance: none; cursor: pointer; font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink); background: var(--canvas); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; text-align: left; transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.dropdown__trigger:hover { border-color: rgba(26,22,19,.22); }
.dropdown.is-open .dropdown__trigger,
.dropdown__trigger:focus-visible { outline: 0; border-color: var(--coral-2); box-shadow: 0 0 0 3px rgba(242,94,64,.15); }
.dropdown__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__value.is-placeholder { color: var(--ink-3); }
.dropdown__chev { width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 auto; transition: transform .2s var(--ease); }
.dropdown.is-open .dropdown__chev { transform: rotate(180deg); }
.dropdown__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; max-height: 282px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 2px 6px rgba(26,22,19,.06), 0 24px 50px -22px rgba(26,22,19,.4); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s; }
.dropdown.is-open .dropdown__panel { opacity: 1; visibility: visible; transform: none; }
.dropdown__search { margin: 2px 2px 6px; appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: .92rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--rule); border-radius: 8px; padding: 9px 12px; }
.dropdown__search:focus { outline: 0; border-color: var(--coral-2); box-shadow: 0 0 0 3px rgba(242,94,64,.15); }
.dropdown__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.dropdown__opt { cursor: pointer; padding: 10px 12px; border-radius: 8px; font-size: .95rem; color: var(--ink); }
.dropdown__opt:hover { background: var(--canvas); }
.dropdown__opt.is-selected { color: var(--coral-ink); font-weight: 500; }
.dropdown__opt[hidden] { display: none; }

/* phase: fill */
.practice-form { max-width: 600px; margin: 0 auto; display: grid; gap: 20px; }
.practice-form .cta { justify-self: center; }

/* simplified sign-up — auth screen + 3-anchor basics */
.authbox { max-width: 380px; margin: 0; display: grid; gap: 14px; }
.authbtn { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; padding: 13px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface, #fff); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease); }
.authbtn:hover { border-color: var(--ink-3); box-shadow: var(--dash-shadow-sm); transform: translateY(-1px); }
.authbtn__ic { display: inline-flex; width: 19px; height: 19px; }
.authbtn__ic svg { width: 19px; height: 19px; display: block; }
.or-div { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: var(--ink-3); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; }
.or-div::before, .or-div::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.authform { display: grid; gap: 14px; width: 100%; }
.authform .cta { width: 100%; justify-self: stretch; }
.authbox__note { text-align: left; margin-top: 2px; }
.practice-form--basics { max-width: 460px; margin: 0; }
.field-grid--stack { grid-template-columns: 1fr; }
.field .field-err { font-family: var(--font-body); font-size: .76rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--coral-ink); margin-top: 2px; display: none; }
.field.is-invalid .field-err { display: block; }
.field.is-invalid input { border-color: var(--coral-ink); box-shadow: 0 0 0 3px rgba(216, 73, 44, .12); }

/* phase: looking */
.lookup { max-width: 440px; margin: clamp(36px, 8vh, 96px) auto 0; display: grid; gap: 14px; }
.lookup__row { display: flex; align-items: center; gap: 15px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; opacity: .45; transition: opacity .3s var(--ease); }
.lookup__row[data-state="run"], .lookup__row[data-state="done"] { opacity: 1; }
.lookup__icon { position: relative; flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; }
.lk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }
.lk-spin { display: none; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--rule); border-top-color: var(--coral-2); animation: spin .8s linear infinite; }
.lk-check { display: none; width: 23px; height: 23px; color: var(--coral-ink); }
.lookup__row[data-state="run"] .lk-dot { display: none; }
.lookup__row[data-state="run"] .lk-spin { display: block; }
.lookup__row[data-state="done"] .lk-dot, .lookup__row[data-state="done"] .lk-spin { display: none; }
.lookup__row[data-state="done"] .lk-check { display: block; }
.lookup__row strong { display: block; font-weight: 600; color: var(--ink); font-size: .98rem; }
.lookup__row .lk-sub { font-size: .85rem; color: var(--ink-3); }
@keyframes spin { to { transform: rotate(360deg); } }

/* phase: confirm — the fetch report (show what AI fetched, don't narrate it) */
.fetch-cover { max-width: 680px; margin: 0 auto 18px; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.fetch-cover__stat { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .03em; color: var(--ink-3); }
.fetch-cover__stat b { color: var(--ink); font-weight: 600; }
.fetch-cover__stat--warn b { color: #a07414; }
.fetch-cover__stat--gap b { color: var(--coral-ink); }

.fetch-ai { max-width: 680px; margin: 0 auto 18px; }
.fetch-ai__label,
.fetch-profile__label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.fetch-profile__label span { opacity: .7; text-transform: none; letter-spacing: 0; }
.fetch-ai__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ai-card { background: var(--canvas); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; }
.ai-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-weight: 500; font-size: .9rem; color: var(--ink); }
.ai-card__head img { width: 18px; height: 18px; }
.ai-card__answer { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); font-style: italic; }

.fetch-profile { max-width: 680px; margin: 0 auto; }
.fetch-rows { display: grid; gap: 8px; }
.fetch-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px; }
.fetch-row__k { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fetch-row__v input { width: 100%; appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink); background: transparent; border: 0; padding: 2px 0; }
.fetch-row__v input:focus { outline: 0; }
.src { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.src--you { color: var(--ink-2); background: var(--canvas); border: 1px solid var(--rule-soft); }
.src--google { color: var(--coral-ink); background: rgba(242,94,64,.08); }
.src--web { color: #5d7544; background: rgba(93,117,68,.1); }

.fetch-row--conflict { grid-template-columns: 110px 1fr; align-items: start; }
.fetch-row__warn { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: #a07414; margin-bottom: 8px; }
.conflict-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.conflict-opt { appearance: none; -webkit-appearance: none; cursor: pointer; text-align: left; background: var(--canvas); border: 1px solid var(--rule); border-radius: 9px; padding: 9px 12px; font-family: var(--font-body); font-size: .9rem; color: var(--ink); transition: border-color .15s var(--ease), background .15s var(--ease); }
.conflict-opt em { display: block; font-family: var(--font-mono); font-style: normal; font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.conflict-opt.is-on { border-color: var(--coral-2); background: rgba(242,94,64,.06); }
.conflict-opt.is-on em { color: var(--coral-ink); }

.fetch-row--gap { grid-template-columns: 110px 1fr; border-style: dashed; background: var(--canvas); }
.fetch-row__gap { font-size: .92rem; color: var(--ink-2); }
.fetch-row__gap strong { color: var(--espresso); }

@media (max-width: 620px) {
  .fetch-ai__cards { grid-template-columns: 1fr; }
  .fetch-row, .fetch-row--conflict, .fetch-row--gap { grid-template-columns: 1fr; gap: 8px; }
  .fetch-row__src { justify-self: start; }
}

/* step 2 stub */
.stub { max-width: 600px; margin: 0 auto; padding: 44px 30px; text-align: center; border: 1px dashed var(--rule); border-radius: 16px; color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: .04em; }

/* ---- STEP 2 · capability cards (single-select router) ---- */
.caps { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 500px; margin: 0 auto; }
.cap-card { position: relative; text-align: left; appearance: none; -webkit-appearance: none; cursor: pointer; display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid transparent; border-radius: 12px; padding: 16px 20px 16px 23px; transition: border-color .16s var(--ease), box-shadow .2s var(--ease); }
.cap-card:hover { box-shadow: 0 8px 22px -18px rgba(26, 22, 19, .4); }
.cap-card:focus-visible { outline: 0; border-color: #f6765c; box-shadow: 0 0 0 3px rgba(242, 94, 64, .18); }
/* selected: a single 1px coral edge — white fill, no tint, no glow */
.cap-card.is-selected { border-color: #f6765c; }
/* radio indicator (single-select) */
.cap-card__radio { position: relative; flex: 0 0 auto; align-self: flex-start; margin-top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #e4e3e3; transition: border-color .15s var(--ease); }
.cap-card__radio::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; background: #f3674b; transform: scale(0); transition: transform .2s var(--ease); }
.cap-card:hover .cap-card__radio { border-color: rgba(26, 22, 19, .26); }
.cap-card.is-selected .cap-card__radio { border-color: transparent; }
.cap-card.is-selected .cap-card__radio::after { transform: scale(1); }
.cap-card__icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: var(--canvas); display: grid; place-items: center; color: var(--ink); transition: background .15s var(--ease), color .15s var(--ease); }
.cap-card__icon svg { width: 23px; height: 23px; }
.cap-card.is-selected .cap-card__icon { background: #f6785f; color: #fff; }
.cap-card__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cap-card__name { font-family: var(--font-body); font-weight: 700; font-size: 1.2rem; letter-spacing: -.005em; color: var(--ink); line-height: 1.1; }
.cap-card__desc { font-size: .9rem; color: var(--ink-2); line-height: 1.4; }
.cap-card__hint { display: none; }
.cap-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 13px; border-top: 1px solid var(--rule-soft); }
.cap-card__needs { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .02em; color: var(--ink-3); }
.cap-card__plan { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.cap-card__plan--paid { color: var(--coral-ink); background: rgba(242, 94, 64, .09); }
.cap-card__plan--free { color: var(--ink-2); background: var(--canvas); border: 1px solid var(--rule-soft); }
.cap-card.is-locked { cursor: default; }
.caps-note { max-width: 700px; margin: 18px auto 0; text-align: center; font-size: var(--fs-small); color: var(--ink-3); }
.cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
@media (max-width: 560px) { .caps { grid-template-columns: 1fr; } }

/* ---- STEP 3 · SETUP — two screens (availability, intake) under one node ---- */
.setup-screen { display: none; }
.wiz[data-setup="avail"] .setup--avail,
.wiz[data-setup="intake"] .setup--intake { display: block; animation: stepIn .42s var(--ease); }

/* paintable week scheduler — the auto-confirm control surface */
.sched { max-width: 760px; margin: 0 auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: clamp(16px, 2vw, 22px); }
.sched__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.sched__service { font-weight: 600; color: var(--ink); font-size: .96rem; }
.sched__presets { display: flex; gap: 6px; flex-wrap: wrap; }
.sched__preset { appearance: none; -webkit-appearance: none; cursor: pointer; border: 1px solid var(--rule); background: var(--canvas); color: var(--ink-2); font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; transition: border-color .15s var(--ease), color .15s var(--ease); }
.sched__preset:hover { border-color: var(--coral-2); color: var(--coral-ink); }
.sched__wrap { max-height: 348px; overflow-y: auto; border: 1px solid var(--rule-soft); border-radius: 12px; padding: 8px; }
.sched__grid { display: grid; grid-template-columns: 50px repeat(7, 1fr); gap: 4px; user-select: none; touch-action: none; }
.sched__dayhead { appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: var(--canvas); border-radius: 7px; padding: 7px 0; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); position: sticky; top: 0; z-index: 1; transition: background .15s var(--ease), color .15s var(--ease); }
.sched__dayhead.has-open { background: rgba(242, 94, 64, .12); color: var(--coral-ink); }
.sched__timehead { appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: transparent; font-family: var(--font-mono); font-size: .6rem; color: var(--ink-3); display: flex; align-items: center; justify-content: flex-end; padding-right: 7px; }
.sched__cell { appearance: none; -webkit-appearance: none; cursor: pointer; border: 1px solid var(--rule-soft); background: var(--canvas); border-radius: 6px; height: 22px; transition: background .08s var(--ease), border-color .08s var(--ease); }
.sched__cell:hover { border-color: var(--coral-2); }
.sched__cell.is-open { background: var(--coral-2); border-color: var(--coral-2); }
.sched__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.sched__limits { display: flex; gap: 18px; flex-wrap: wrap; }
.sched__limit { display: flex; flex-direction: column; gap: 5px; }
.sched__limit > span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.sched__limit input { width: 92px; appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: .9rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 11px; }
.sched__limit input:focus { outline: 0; border-color: var(--coral-2); box-shadow: 0 0 0 3px rgba(242, 94, 64, .15); }
.sched__count { font-family: var(--font-mono); font-size: .9rem; color: var(--ink-2); }
.sched__count b { color: var(--coral-ink); font-weight: 600; }
.sched__hint { width: 100%; margin: 12px 0 0; font-size: var(--fs-small); color: var(--ink-3); }

/* intake fields */
.intake { max-width: 680px; margin: 0 auto; display: grid; gap: 10px; }
.intake__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 15px 18px; }
.intake__info { min-width: 0; }
.intake__info strong { display: block; font-weight: 600; color: var(--ink); font-size: .98rem; }
.intake__info span { font-size: .84rem; color: var(--ink-3); }
.intake__info input { font-family: var(--font-body); font-weight: 600; font-size: .98rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 2px 0; width: 100%; }
.intake__info input:focus { outline: 0; border-color: var(--coral-2); }
.intake__seg { display: inline-flex; flex: 0 0 auto; background: var(--canvas); border: 1px solid var(--rule); border-radius: 999px; padding: 3px; gap: 2px; }
.intake__seg button { appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: transparent; font-family: var(--font-body); font-size: .76rem; font-weight: 500; color: var(--ink-3); padding: 6px 13px; border-radius: 999px; transition: background .15s var(--ease), color .15s var(--ease); }
.intake__seg button.is-on { background: var(--coral-2); color: #fff; }
.intake__seg.is-locked button:not(.is-on) { display: none; }
.intake__add { display: block; margin: 16px auto 0; appearance: none; -webkit-appearance: none; cursor: pointer; background: none; border: 1px dashed var(--rule); color: var(--ink-2); font-family: var(--font-body); font-size: .9rem; padding: 11px 22px; border-radius: 12px; transition: border-color .15s var(--ease), color .15s var(--ease); }
.intake__add:hover { border-color: var(--coral-2); color: var(--coral-ink); }

@media (max-width: 620px) {
  .sched__wrap { overflow-x: auto; }
  .sched__grid { min-width: 520px; }
}
@media (max-width: 560px) {
  .intake__row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- STEP 4 · GO LIVE (review -> done) ---- */
.live-screen { display: none; }
.wiz[data-live="review"] .live--review,
.wiz[data-live="sent"] .live--sent,
.wiz[data-live="done"] .live--done { display: block; animation: stepIn .42s var(--ease); }

.summary { max-width: 600px; margin: 0 auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 4px clamp(18px, 2.4vw, 24px); }
.summary__row { display: flex; align-items: flex-start; gap: 16px; padding: 15px 0; border-top: 1px solid var(--rule-soft); }
.summary__row:first-child { border-top: 0; }
.summary__k { flex: 0 0 124px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.summary__v { color: var(--ink); font-size: .98rem; line-height: 1.45; }
.summary__v .opt { color: var(--ink-3); }

.golive-plan { max-width: 600px; margin: 16px auto 0; display: flex; align-items: center; gap: 18px; background: rgba(242, 94, 64, .05); border: 1px solid rgba(242, 94, 64, .28); border-radius: 16px; padding: 18px 22px; }
.golive-plan__price { flex: 0 0 auto; font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--ink); line-height: 1; }
.golive-plan__price span { font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--ink-3); }
.golive-plan__desc { font-size: .92rem; color: var(--ink-2); line-height: 1.45; }
.golive-note { font-size: var(--fs-small); color: var(--ink-3); }
.golive-email { max-width: 600px; margin: 16px auto 0; }
.golive-email .auth-label { display: block; margin-bottom: 8px; }

.live--done, .live--sent { text-align: center; max-width: 580px; margin: 0 auto; }
.live--sent .done__badge { background: rgba(242, 94, 64, .1); color: var(--coral-2); }
.live--sent .auth-sub { max-width: 460px; margin: 14px auto 0; }
.live--sent .cta { margin: clamp(26px, 4vh, 38px) auto 0; }
.done__badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(93, 117, 68, .12); color: #5d7544; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; margin-bottom: 20px; }
.done__badge svg { width: 16px; height: 16px; }
.done__link { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin: clamp(20px, 3vh, 30px) auto 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 12px 12px 18px; }
.done__link code { font-family: var(--font-mono); font-size: .92rem; color: var(--espresso); }
.done__copy { appearance: none; -webkit-appearance: none; cursor: pointer; border: 1px solid var(--rule); background: var(--canvas); color: var(--ink-2); font-family: var(--font-body); font-size: .8rem; padding: 7px 14px; border-radius: 999px; transition: color .15s var(--ease); }
.done__copy:hover { color: var(--ink); }
.done__next { list-style: none; margin: clamp(22px, 3vh, 32px) auto 0; padding: 0; max-width: 460px; text-align: left; display: grid; gap: 11px; }
.done__next li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--ink-2); line-height: 1.45; }
.done__next li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral-2); }
.live--done .cta { margin: clamp(26px, 4vh, 38px) auto 0; }

@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
  /* mobile: the four bars carry progress; the heading names the step */
  .stepper ol { gap: 8px; }
  .stepper__label { display: none; }
  .wiz-head { margin-bottom: clamp(28px, 4vh, 36px); }
}
@media (prefers-reduced-motion: reduce) {
  .wiz[data-step] .step, .wiz[data-phase] .phase { animation: none; }
  .lk-spin { animation: none; }
}

/* ---- capability module screens (Discovery, Listing, Recommend) ---- */
.mod { max-width: 640px; margin: 0 auto; display: grid; gap: 12px; }
.mod-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; }
.mod-row__info strong { display: block; font-weight: 600; color: var(--ink); font-size: .98rem; }
.mod-row__info span { font-size: .85rem; color: var(--ink-3); line-height: 1.4; }
.mod-row--action { border-color: rgba(242,94,64,.28); background: rgba(242,94,64,.04); }
.mod-connect { display: inline-flex; align-items: center; gap: 9px; appearance: none; -webkit-appearance: none; cursor: pointer; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: .92rem; padding: 10px 18px; border-radius: 10px; transition: border-color .15s var(--ease), color .15s var(--ease); }
.mod-connect svg { width: 18px; height: 18px; }
.mod-connect:hover { border-color: rgba(26,22,19,.22); }
.mod-connect.is-connected { border-color: #5d7544; color: #5d7544; background: rgba(93,117,68,.08); cursor: default; }
.mod-tag { flex: 0 0 auto; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; color: var(--ink-3); background: var(--canvas); border: 1px solid var(--rule-soft); }
.mod-tag--auto { color: var(--coral-ink); background: rgba(242,94,64,.08); border-color: transparent; }
.mod-file { max-width: 640px; margin: 14px auto 0; background: var(--ink); border-radius: 14px; overflow: hidden; }
.mod-file__head { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: rgba(244,236,224,.66); border-bottom: 1px solid rgba(244,236,224,.1); }
.mod-file__tag { color: var(--coral-1); text-transform: uppercase; }
.mod-file__body { margin: 0; padding: 16px; font-family: var(--font-mono); font-size: .78rem; line-height: 1.65; color: #f4ece0; white-space: pre-wrap; overflow-x: auto; }

.catalog { max-width: 640px; margin: 0 auto; display: grid; gap: 12px; }
.svc-card { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; display: grid; gap: 9px; }
.svc-card__del { position: absolute; top: 11px; right: 14px; appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: none; color: var(--ink-3); font-size: 1.3rem; line-height: 1; }
.svc-card__del:hover { color: #9a3520; }
.svc-card__name { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 2px 24px 5px 0; }
.svc-card__desc { font-family: var(--font-body); font-size: .92rem; color: var(--ink-2); background: transparent; border: 0; padding: 0; }
.svc-card__name:focus, .svc-card__desc:focus { outline: 0; }
.svc-card__name:focus { border-color: var(--coral-2); }
.svc-card__meta { display: flex; gap: 10px; flex-wrap: wrap; }
.svc-card__meta input { font-family: var(--font-mono); font-size: .82rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 11px; width: 130px; }
.svc-card__meta input:focus { outline: 0; border-color: var(--coral-2); }
.catalog__add { display: block; margin: 4px auto 0; appearance: none; -webkit-appearance: none; cursor: pointer; background: none; border: 1px dashed var(--rule); color: var(--ink-2); font-family: var(--font-body); font-size: .9rem; padding: 11px 22px; border-radius: 12px; transition: border-color .15s var(--ease), color .15s var(--ease); }
.catalog__add:hover { border-color: var(--coral-2); color: var(--coral-ink); }

.rec { max-width: 640px; margin: 0 auto; display: grid; gap: 12px; }
.rec-row { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 16px 18px; }
.rec-row__svc { font-weight: 600; color: var(--ink); font-size: .98rem; margin-bottom: 9px; }
.rec-row__for { width: 100%; font-family: var(--font-body); font-size: .92rem; color: var(--ink); background: var(--canvas); border: 1px solid var(--rule); border-radius: 9px; padding: 10px 13px; }
.rec-row__for:focus { outline: 0; border-color: var(--coral-2); box-shadow: 0 0 0 3px rgba(242,94,64,.15); }
.rec-toggle { display: flex; align-items: center; gap: 11px; max-width: 640px; margin: 14px auto 0; padding: 14px 18px; background: var(--canvas); border: 1px solid var(--rule); border-radius: 12px; font-size: .94rem; color: var(--ink-2); cursor: pointer; }
.rec-toggle input { accent-color: var(--coral-2); width: 18px; height: 18px; flex: 0 0 auto; }

/* ---- diagnostic verdict (shared: Discovery audit, Listing scan) ---- */
.audit, .scan { max-width: 600px; margin: 0 auto; }
.audit__verdict, .scan__verdict { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 20px 22px; background: rgba(154,53,32,.05); border: 1px solid rgba(154,53,32,.16); border-radius: 16px; }
.audit__score, .scan__score { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; color: #9a3520; }
.audit__score::before, .scan__score::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9a3520; box-shadow: 0 0 0 4px rgba(154,53,32,.14); }
.audit__verdict p, .scan__verdict p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--ink-2); max-width: 40ch; }
.audit__surfaces { display: grid; gap: 9px; margin-top: 12px; }
.surface { display: flex; align-items: center; gap: 13px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 13px 16px; }
.surface img, .surface svg { width: 22px; height: 22px; flex: 0 0 auto; }
.surface__name { flex: 1; font-weight: 600; font-size: .96rem; color: var(--ink); }
.surface__status { flex: 0 0 auto; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.surface[data-state="bad"] .surface__status { color: #9a3520; background: rgba(154,53,32,.08); }
.surface[data-state="warn"] .surface__status { color: #a07414; background: rgba(160,116,20,.1); }
.surface[data-state="good"] .surface__status { color: #5d7544; background: rgba(93,117,68,.1); }
.surface[data-state="bad"] { border-color: rgba(154,53,32,.2); }

/* Listing route: what AI reads today (scan fragments) */
.scan__rows { display: grid; gap: 9px; margin-top: 12px; }
.scan__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 13px 16px; }
.scan__row[data-state="bad"] { border-color: rgba(154,53,32,.2); }
.scan__frag { font-family: var(--font-mono); font-size: .8rem; line-height: 1.4; color: var(--ink-2); }
.scan__meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.scan__src { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.scan__gap { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.scan__row[data-state="bad"] .scan__gap { color: #9a3520; background: rgba(154,53,32,.08); }
.scan__row[data-state="warn"] .scan__gap { color: #a07414; background: rgba(160,116,20,.1); }

/* Recommend route: agent simulation of a mis-recommendation */
.sim { max-width: 600px; margin: 12px auto 0; display: grid; gap: 9px; }
.sim__turn { border: 1px solid var(--rule); border-radius: 12px; padding: 13px 16px; }
.sim__turn--user { background: var(--canvas); }
.sim__turn--ai { background: var(--surface); }
.sim__turn--ai[data-state="bad"] { border-color: rgba(154,53,32,.22); }
.sim__role { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.sim__role img { width: 14px; height: 14px; }
.sim__turn p { margin: 0; font-size: .96rem; line-height: 1.45; color: var(--ink); }
.sim__turn--ai p strong { color: var(--coral-ink); font-weight: 600; }
.sim__flag { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(154,53,32,.14); font-size: .8rem; color: #9a3520; }

/* ---- diagnostic split: the "today" glass panel beside the fix (refined) ---- */
.diag { display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: clamp(18px, 2.6vw, 32px); align-items: start; max-width: 940px; margin: 0 auto; }
.diag__col { position: relative; display: grid; gap: 13px; min-width: 0; align-content: start; }
@media (max-width: 760px) { .diag { grid-template-columns: 1fr; } }
/* warm glow so the frosted panel reads as glass on the flat canvas */
.diag__col:first-child::before { content: ""; position: absolute; inset: -14% -8% 36% -8%; background: radial-gradient(58% 58% at 32% 24%, rgba(242,94,64,.16), transparent 72%); filter: blur(22px); z-index: 0; pointer-events: none; }

/* glass chat panel — borrowed from the home hero, showing the AI failing today */
.glass-chat { position: relative; z-index: 1; background: linear-gradient(180deg, rgba(40,31,25,.9), rgba(26,22,19,.93)); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; overflow: hidden; color: #f4ece0; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 54px -32px rgba(26,22,19,.6); }
.glass-chat__head { display: flex; align-items: center; gap: 9px; padding: 15px 18px 13px; font-weight: 500; font-size: .92rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.glass-chat__head img { width: 20px; height: 20px; border-radius: 5px; background: #fff; padding: 2px; }
.glass-chat__tag { margin-left: auto; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(244,236,224,.5); }
.glass-chat__body { padding: 16px 16px 10px; }
.glass-chat__user { margin: 0 0 14px auto; max-width: 86%; width: fit-content; background: rgba(255,255,255,.14); border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-size: .92rem; line-height: 1.42; color: #f5efe4; }
.glass-chat__reply p { margin: 0; max-width: 90%; background: rgba(255,255,255,.06); border-radius: 14px 14px 14px 4px; padding: 10px 13px; font-size: .92rem; line-height: 1.46; color: #f4ece0; }
.glass-chat__reply strong { color: var(--coral-1); font-weight: 600; }
.glass-chat__flag { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 16px 15px; font-size: .8rem; line-height: 1.4; color: #f1a991; border-top: 1px solid rgba(255,255,255,.08); }
.glass-chat__flag svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }

.diag__verdict { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; padding-left: 2px; font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; letter-spacing: -.01em; color: #9a3520; }
.diag__verdict::before { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: #9a3520; box-shadow: 0 0 0 4px rgba(154,53,32,.14); }
.diag__verdict span { font-family: var(--font-body); font-weight: 400; font-size: .85rem; color: var(--ink-2); letter-spacing: 0; }
.diag__label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.diag .rec, .diag .rec-toggle { max-width: none; margin-left: 0; margin-right: 0; }
.diag .rec-toggle { margin-top: 2px; }

.fixes { margin-top: clamp(22px, 3vh, 32px); }
.fixes__label { max-width: 640px; margin: 0 auto 12px; display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.fixes__label::before, .fixes__label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* staggered diagnostic reveal (shared) */
.screen.is-active .surface,
.screen.is-active .scan__row { opacity: 0; animation: factIn .5s var(--ease) forwards; }
.screen.is-active .surface:nth-child(1), .screen.is-active .scan__row:nth-child(1) { animation-delay: .06s; }
.screen.is-active .surface:nth-child(2), .screen.is-active .scan__row:nth-child(2) { animation-delay: .14s; }
.screen.is-active .surface:nth-child(3), .screen.is-active .scan__row:nth-child(3) { animation-delay: .22s; }
.screen.is-active .surface:nth-child(4), .screen.is-active .scan__row:nth-child(4) { animation-delay: .30s; }
.screen.is-active .surface:nth-child(5), .screen.is-active .scan__row:nth-child(5) { animation-delay: .38s; }
@keyframes factIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .screen.is-active .surface,
  .screen.is-active .scan__row { animation: none; opacity: 1; }
}

/* =============================================================
   60 / 40 SETUP LAYOUT — contained, compact setup card on the left;
   spa-image panel on the right with dynamic glass "drawer" samples
   (with the home notch) that change per step.
   ============================================================= */
.page--setup { padding: 0; background: #fafaf9; }
.wiz-layout { display: grid; grid-template-columns: 70fr 30fr; height: calc(100vh - 32px); }

/* LEFT — content sits directly on the page (no card), generous left inset to x≈131 */
.wiz-main { min-width: 0; display: flex; flex-direction: column; padding: clamp(28px, 4vh, 41px) clamp(24px, 3vw, 44px) 48px clamp(28px, 8vw, 115px); height: 100%; overflow-y: auto; scrollbar-width: none; }
.wiz-main::-webkit-scrollbar { width: 0; height: 0; }
.page--setup .topbar { flex: 0 0 auto; margin: 0 0 clamp(44px, 6vh, 70px); }
.page--setup .wiz { flex: 1 0 auto; display: flex; flex-direction: column; background: none; border: 0; box-shadow: none; padding: 0; }

/* de-center + size the content directly on the page */
/* the back control hangs into the left inset so the stepper lines up with the content */
.wiz-head { max-width: 615px; gap: 16px; margin: 0 0 clamp(36px, 5vh, 50px) -54px; }
.page--setup .wiz-back { position: relative; }
.step-head { text-align: left; max-width: 540px; margin: 0 0 clamp(28px, 3.6vh, 38px); }
.page--setup .wiz-title { color: var(--espresso); font-size: clamp(2.25rem, 3.4vw, 3.125rem); text-shadow: none; }
.page--setup .wiz-title em { color: var(--coral-ink); }
.wiz-title--sm { font-size: clamp(2rem, 3.2vw, 3rem); }
.page--setup .wiz-sub { margin: 14px 0 0; max-width: 500px; font-size: 1rem; color: var(--ink-2); }
.page--setup .field > span { color: var(--ink-2); }
.page--setup .field input,
.page--setup .dropdown__trigger {
  background: var(--surface);
  border-color: rgba(26, 22, 19, .14);
}
.page--setup .field input::placeholder,
.page--setup .dropdown__value.is-placeholder {
  color: var(--ink-3);
}
.practice-form, .rec, .catalog, .mod, .intake, .summary, .sched, .caps, .caps-note,
.fetch-cover, .fetch-profile, .golive-plan, .golive-email, .rec-toggle, .live--done, .live--sent,
.lookup, .mod-file, .intake__add, .catalog__add {
  margin-left: 0; margin-right: auto;
}
.practice-form { max-width: 504px; }
.fetch-profile, .fetch-cover { max-width: 584px; }
.lookup { margin-top: clamp(24px, 4vh, 40px); }
.fetch-cover { justify-content: flex-start; }
.live--done, .live--sent { text-align: left; }
.practice-form .cta { justify-self: start; }

/* continue = left-aligned below the content, no card chrome */
.step-actions { position: static; flex-direction: column; align-items: flex-start; gap: 12px; margin: clamp(18px, 2.2vh, 26px) 0 0; padding: 0; background: none; }

/* ---- RIGHT — spa photo + dynamic glass drawer samples ---- */
.wiz-aside { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 2.4vw, 38px); background: #2a2018 center / cover no-repeat; background-image: url("../img/hero-storefront-960.jpg"); background-image: image-set(url("../img/hero-storefront-1672.avif") type("image/avif"), url("../img/hero-storefront-960.jpg") type("image/jpeg")); }
.wiz-aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(26,22,19,.08) 0%, rgba(26,22,19,.5) 82%); pointer-events: none; }
.wiz-aside__stage { position: relative; z-index: 1; }

/* a sample = a frosted drawer with the home notch */
.sample { display: none; max-width: 400px; color: #f4ece0; background: rgba(26,20,15,.42); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid rgba(255,255,255,.18); border-radius: 24px; overflow: hidden; box-shadow: 0 34px 70px -30px rgba(0,0,0,.66); }
.sample.is-active { display: block; animation: sampleUp .55s var(--ease) backwards; }
@keyframes sampleUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.sample__grip { display: block; width: 42px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.42); margin: 12px auto 2px; }
.sample__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px 13px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,236,224,.6); border-bottom: 1px solid rgba(255,255,255,.1); }
.sample__tag { color: var(--coral-1); }
.sample__head { display: flex; align-items: center; gap: 9px; padding: 6px 18px 13px; font-weight: 500; font-size: .9rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); }
.sample__head img, .sample__ai-head img { width: 19px; height: 19px; border-radius: 5px; background: #fff; padding: 2px; flex: 0 0 auto; }
.sample__body { padding: 15px 16px 17px; }
.sample__user { margin: 0 0 12px auto; max-width: 86%; width: fit-content; background: rgba(255,255,255,.15); border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-size: .88rem; line-height: 1.42; }
.sample__reply { margin: 0; max-width: 92%; background: rgba(255,255,255,.07); border-radius: 14px 14px 14px 4px; padding: 10px 13px; font-size: .88rem; line-height: 1.46; }
.sample__reply strong { color: var(--coral-1); font-weight: 600; }
.sample__confirm { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.16); }
.sample__confirm-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #f8b89f; }
.sample__confirm-biz { margin: 9px 0 10px; font-family: var(--font-mono); font-size: .82rem; }
.sample__confirm-time { display: inline-block; background: #fff; color: #1a1613; font-family: var(--font-mono); font-size: .82rem; font-weight: 500; padding: 8px 13px; border-radius: 9px; }
.sample__ais { display: grid; gap: 10px; }
.sample__ai { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 12px 14px; }
.sample__ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-weight: 500; font-size: .85rem; color: #fff; }
.ai-says { margin: 0; font-size: .85rem; line-height: 1.45; font-style: italic; color: rgba(244,236,224,.86); }
.sample__code { margin: 0; padding: 14px 18px 18px; font-family: var(--font-mono); font-size: .74rem; line-height: 1.62; color: #f4ece0; white-space: pre-wrap; }
.sample__svc { display: grid; gap: 8px; }
.sample__svc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; font-size: .86rem; }
.sample__svc-meta { font-family: var(--font-mono); font-size: .73rem; color: rgba(244,236,224,.7); flex: 0 0 auto; }

/* stack on smaller screens — drop the image, single column */
@media (max-width: 900px) {
  .page--setup { padding: clamp(18px, 3.2vw, 34px) clamp(14px, 3vw, 28px); }
  .wiz-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .wiz-main { height: auto; overflow: visible; padding: 0; }
  .page--setup .wiz { flex: 0 1 auto; }
  .wiz-aside { display: none; }
  .step-actions { position: static; background: none; margin-left: 0; margin-right: 0; }
  .wiz-head { margin-left: 0; max-width: none; }
}

.catalog__empty { padding: 22px 18px; border: 1px dashed var(--rule); border-radius: 14px; background: var(--canvas); text-align: center; }
.catalog__empty-msg { font-family: var(--font-body); font-size: .92rem; line-height: 1.5; color: var(--ink-2); margin: 0; }

/* ---- confirm: empty-state source chip + honest status note ---- */
.src--gap { color: var(--ink-3); background: transparent; border: 1px dashed var(--rule); }
.fetch-row__v input::placeholder { color: var(--ink-3); }
.fetch-note { display: flex; align-items: center; gap: 12px; max-width: 584px; margin: 0 auto 16px; padding: 13px 16px; background: var(--canvas); border: 1px solid var(--rule-soft); border-radius: 14px; }
.fetch-note__mark { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: 0 0 auto; }
.fetch-note[data-tone="gap"] { background: rgba(242, 94, 64, .05); border-color: rgba(242, 94, 64, .16); }
.fetch-note[data-tone="gap"] .fetch-note__mark { background: var(--coral-2); }
.fetch-note[data-tone="error"] { background: rgba(200, 148, 26, .08); border-color: rgba(200, 148, 26, .22); }
.fetch-note[data-tone="error"] .fetch-note__mark { background: #c8941a; }
.fetch-note__msg { flex: 1; min-width: 0; font-family: var(--font-body); font-size: .9rem; line-height: 1.5; color: var(--ink-2); margin: 0; }
.fetch-note__retry { flex: 0 0 auto; appearance: none; -webkit-appearance: none; cursor: pointer; border: 0; background: var(--coral-2); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: .82rem; padding: 8px 15px; border-radius: 10px; transition: filter .15s var(--ease); }
.fetch-note__retry:hover { filter: brightness(1.05); }