/* screens/onboarding.css — onboarding wizard (#/welcome). Owner: "onboarding".
   ALL classes prefixed .ob- (collision law). One aurora element per screen:
   the progress-rail fill. Green = live/success only.
   Validation styling, the chevron on .field selects and the fine-print line all
   come from the shared layer now (.field__err / .field select / .hint). */

.ob{width:min(100%,600px);margin-inline:auto;padding-top:clamp(6px,4.5vh,46px)}

/* step counter + progress rail (THE single aurora element) */
.ob__top{display:flex;align-items:baseline;justify-content:space-between;padding:0 var(--sp-2);margin-bottom:var(--sp-10)}
.ob__kicker{font-size:var(--fs-micro);font-weight:700;color:var(--muted-2)}
.ob__count{font-size:var(--fs-fine);font-weight:700;color:var(--muted)}
.ob__rail{height:3px;border-radius:var(--r-full);background:var(--tint-3);overflow:hidden;margin-bottom:clamp(18px,2.6vw,26px)}
.ob__rail i{display:block;height:100%;border-radius:var(--r-full);background:var(--grad);transition:width .4s cubic-bezier(.2,0,0,1)}

/* card */
.ob__card{padding:clamp(22px,4.5vw,34px)}
.ob__title{font-size:clamp(1.3rem,2.2vw,1.55rem)}
.ob__sub{color:var(--muted);font-weight:500;font-size:var(--fs-md);margin-top:var(--sp-8);max-width:46ch;line-height:var(--lh-body)}
.ob__body{margin-top:clamp(18px,3vw,26px)}
.ob__body.is-in{animation:ob-in .32s cubic-bezier(.2,0,0,1)}
@keyframes ob-in{from{opacity:0;transform:translateY(8px)}}
.ob__nav{display:flex;align-items:center;gap:var(--sp-10);margin-top:clamp(22px,3.4vw,30px)}
.ob__nav .ob__next{margin-left:auto;min-width:132px}

/* ── step 1 · company ── */
.ob-s1{display:grid;gap:var(--sp-grid)}
.ob-s1__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-14)}

/* ── step 2 · channels ── */
.ob-ch{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10)}
.ob-ch__it{display:flex;align-items:center;gap:var(--sp-12);min-height:64px;padding:var(--sp-12) var(--sp-14);
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-xl);text-align:left;
  transition:border-color var(--t),box-shadow var(--t),background var(--t)}
button.ob-ch__it:hover{border-color:var(--ink)}
.ob-ch__it.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* a selected tile must never swallow the keyboard ring */
.ob-ch__it:focus-visible{box-shadow:var(--focus)}
.ob-ch__it.is-on:focus-visible{box-shadow:inset 0 0 0 1px var(--ink),var(--focus)}
.ob-ch__it--live{background:var(--card-2);cursor:default}
.ob-ch__mk{width:21px;height:21px;flex:none;color:var(--ink)}
.ob-ch__mk svg{width:100%;height:100%}
.ob-ch__tx{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.ob-ch__tx b{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em}
.ob-ch__tx small{font-size:var(--fs-micro);font-weight:500;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-ch__chk{margin-left:auto;width:22px;height:22px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-circle);border:1px solid var(--line-2);color:transparent;
  transition:background var(--t),border-color var(--t),color var(--t)}
.ob-ch__chk .sh-ic,.ob-ch__chk svg{width:13px;height:13px}
.ob-ch__chk .sh-ic{display:grid;place-items:center}
.ob-ch__it.is-on .ob-ch__chk{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.ob-ch__it .pill{margin-left:auto;flex:none}

/* ── step 3 · hours ── */
.ob-hrs__quick{display:flex;justify-content:flex-end;margin-bottom:var(--sp-10)}
.ob-hr{display:flex;align-items:center;gap:var(--sp-10);min-height:52px;border-bottom:1px solid var(--line)}
.ob-hr:last-child{border-bottom:0}
.ob-hr__day{width:104px;flex:none;font-size:var(--fs-sm);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-hr.is-off .ob-hr__day{color:var(--muted-2)}
.ob-hr__times{display:flex;align-items:center;gap:var(--sp-8);min-width:0}
/* bare selects: give them an explicit width (a naked select is 100% wide) and
   the same quiet chevron .field select gets from the shared layer */
.ob-hr__times select{height:var(--ctl-h-sm);width:86px;min-width:0;padding:0 24px 0 var(--sp-10);
  font-size:var(--fs-btn);font-weight:600;border-radius:var(--r-md);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B5B63' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.ob-hr__dash{color:var(--muted-2);font-size:var(--fs-micro);flex:none}
.ob-hr__closedtx{font-size:var(--fs-btn);font-weight:600;color:var(--muted-2)}
.ob-hr .toggle{margin-left:auto}

/* ── step 4 · services ── */
.ob-sv__quick{margin-bottom:var(--sp-20)}
.ob-sv__quick small{display:block;font-size:var(--fs-micro);font-weight:700;color:var(--muted-2);letter-spacing:.02em;margin-bottom:var(--sp-8)}
.ob-sv__chips{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.ob-sv__row{display:flex;align-items:center;gap:var(--sp-12);min-height:48px;border-bottom:1px solid var(--line)}
.ob-sv__row b{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-sv__meta{margin-left:auto;flex:none;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.ob-sv__rm{width:30px;height:30px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--muted-2);transition:background var(--t),color var(--t)}
.ob-sv__rm:hover{background:var(--tint-2);color:var(--ink)}
.ob-sv__rm .sh-ic{width:14px;height:14px;display:grid;place-items:center}
.ob-sv__list:not(:empty){margin-bottom:var(--sp-6)}
.ob-sv__form{display:grid;grid-template-columns:1fr 92px 122px 44px;gap:var(--sp-10);align-items:start;margin-top:var(--sp-14)}
/* the + button sits on the control line, not on the label line */
.ob-sv__add{height:var(--ctl-h);width:var(--ctl-h);padding:0;border-radius:var(--r-btn);margin-top:27px}
/* the price column is narrow: let its message run under the duration field
   instead of stacking into two cramped lines */
.ob-sv__form .field__err{white-space:nowrap}
.ob-sv__add .sh-ic{width:16px;height:16px;display:grid;place-items:center}
.ob-sv__add svg{width:100%;height:100%}

/* ── step 5 · done ── */
.ob-done{display:grid;gap:var(--sp-12)}
.ob-done__box{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--sp-16) var(--sp-20) var(--sp-20)}
.ob-done__label{display:block;font-size:var(--fs-micro);font-weight:700;color:var(--muted-2);letter-spacing:.02em;margin-bottom:var(--sp-10)}
.ob-done__row{display:flex;align-items:center;gap:var(--sp-12)}
.ob-done__row b{font-size:clamp(20px,3vw,25px);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.ob-done__mk{width:19px;height:19px;flex:none;color:var(--ink)}
.ob-done__mk svg{width:100%;height:100%}
.ob-done__copy{width:34px;height:34px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;color:var(--muted-2);transition:background var(--t),color var(--t)}
.ob-done__copy:hover{background:var(--tint-2);color:var(--ink)}
.ob-done__copy .sh-ic{width:15px;height:15px;display:grid;place-items:center}
.ob-done__copy svg{width:100%;height:100%}
.ob-done__row .pill{margin-left:auto;flex:none}
.ob-done__greetTx{font-size:var(--fs-base);font-weight:600;line-height:1.6}
.ob-done__cta{height:50px;font-size:var(--fs-base);margin-top:var(--sp-8)}

/* the call-forwarding instruction — the one action that makes the line work */
.ob-fw{background:var(--card);border-color:var(--line-2);padding:var(--sp-20)}
.ob-fw__title{display:block;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em;line-height:var(--lh-tight)}
.ob-fw__sub{margin-top:var(--sp-6);font-size:var(--fs-sm);font-weight:500;color:var(--muted);line-height:var(--lh-body);max-width:52ch}
.ob-fw__code{display:flex;align-items:center;gap:var(--sp-10);margin-top:var(--sp-14);
  padding:var(--sp-10) var(--sp-10) var(--sp-10) var(--sp-14);
  background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-md)}
.ob-fw__code code{font-family:inherit;font-size:clamp(17px,2.6vw,20px);font-weight:800;letter-spacing:.02em;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-fw__copy{margin-left:auto;width:34px;height:34px;flex:none;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--muted-2);transition:background var(--t),color var(--t)}
.ob-fw__copy:hover{background:var(--tint-2);color:var(--ink)}
.ob-fw__copy .sh-ic{width:15px;height:15px;display:grid;place-items:center}
.ob-fw__copy svg{width:100%;height:100%}
.ob-fw__more{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-20);margin-top:var(--sp-12)}
.ob-fw__pair{display:inline-flex;align-items:baseline;gap:var(--sp-8);min-width:0}
.ob-fw__k{font-size:var(--fs-fine);font-weight:500;color:var(--muted-2)}
.ob-fw__more code{font-family:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.ob-fw__help{margin-top:var(--sp-10);max-width:52ch}

/* ── mobile ── */
@media (max-width:560px){
  .ob{padding-top:var(--sp-2)}
  .ob-s1__row{grid-template-columns:1fr}
  .ob-ch{grid-template-columns:1fr}
  .ob-ch__it{min-height:58px}
  .ob-sv__form{grid-template-columns:1fr 1fr 44px}
  .ob-sv__form .ob-fld--name{grid-column:1/-1}
  /* the row must stay inside the card: the day column and the two time selects
     all give way before the toggle does */
  .ob-hr{gap:var(--sp-8)}
  .ob-hr__day{width:auto;flex:1 1 66px;font-size:var(--fs-fine)}
  .ob-hr__times{flex:0 1 auto;gap:var(--sp-6)}
  .ob-hr__times select{width:100%;max-width:84px;padding:0 22px 0 var(--sp-8);background-position:right 7px center}
  .ob-done__box{padding:var(--sp-14) var(--sp-16) var(--sp-16)}
  .ob-fw{padding:var(--sp-16)}
  .ob-done__row{flex-wrap:wrap;row-gap:var(--sp-8)}
}
@media (prefers-reduced-motion:reduce){
  .ob__body.is-in{animation:none}
  .ob__rail i{transition:none}
}