/* The onboarding paths and the Finish setting up card (design round, design/DIRECTION.md; UX_ONBOARDING.md part 2
   "Onboarding screens"). The page matches the order flow: a top row with Back and Skip for now, a segmented progress
   bar with its words, the step heading in Avenir Next Demi 24/30, fields at 48 px, one sticky orange Continue above the
   home indicator on a phone and at the foot of a 560 px white card from 768. The page is white at every width. The shared
   pieces (picks, choice lists, fields, who chips, section heads, the sheet grabber) are in design.css. */

.ob { position: fixed; inset: 0; z-index: 35; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--white); }
.ob-card { display: flex; flex-direction: column; min-height: 100%; max-width: 560px; margin: 0 auto; }

/* ------------------------------------------------------------------ the head: Back, Skip for now, the bar */
.ob-head { position: sticky; top: 0; z-index: 2; background: var(--white); padding-top: env(safe-area-inset-top); }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 4px var(--pad); }
.ob-back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; margin-left: -8px; padding: 0 8px 0 4px;
  border: 0; border-radius: var(--r-ctl); background: none; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 500; cursor: pointer;
  transition: background var(--t-fast) var(--ease); }
.ob-back:hover { background: var(--mist); }
.ob-logo { height: 24px; width: auto; }
.ob-top-r { margin-right: -8px; }
.ob-skip-slot { display: inline-flex; }
.ob-skip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 16px; line-height: 22px; }
.ob-skip[disabled] { opacity: .5; }
.ob-prog { padding: 4px var(--pad) 12px; }
.ob-prog .phases { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.ob-prog .phase.now i::after { transition: none; }
.ob-prog-t { margin: 8px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--steel); }

/* ------------------------------------------------------------------ the step */
.ob-body { flex: 1; display: flex; flex-direction: column; padding: 8px var(--pad) 0; animation: ds-rise var(--t-med) var(--ease); }
.ob-body h1 { margin: 8px 0 20px; font: 600 24px/30px var(--font); letter-spacing: -.005em; outline: none; text-wrap: balance; }
.ob-change { margin: -8px 0 12px; font-size: 14px; line-height: 20px; }
.ob-change a { display: inline-flex; align-items: center; min-height: 44px; }
.ob-form { flex: 1; display: flex; flex-direction: column; margin: 0; }
.ob-note { margin: 0 0 16px; }

/* Continue: one orange button, pinned above the home indicator on a phone, the foot of the card from 768. */
.ob-foot { position: sticky; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  margin: auto calc(-1 * var(--pad)) 0; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--concrete); }
.ob-foot .btn { min-height: 52px; border-radius: var(--r-ctl); font-size: 16px; }
.ob-secondary { align-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 16px; }
.ob-call { display: flex; flex-direction: column; align-items: center; }
.ob-called { margin: 0; padding: 10px 0; text-align: center; color: var(--steel); }
.ob-lines { padding-bottom: 12px; }
.ob-lines p { max-width: 480px; margin: 0 0 12px; font-size: 16px; line-height: 24px; }

/* The first question's big rows */
.ob-pick .choice { min-height: 64px; font-size: 17px; line-height: 22px; }

/* Two short fields side by side, even on the phone (names, a city and its postal code, a name and its number) */
:is(.ob, .ob-sheet) .row-fields { grid-template-columns: 1fr 1fr; align-items: end; gap: 16px; margin-bottom: 16px; }
:is(.ob, .ob-sheet) .row-fields > .field { margin-bottom: 0; min-width: 0; }
:is(.ob, .ob-sheet) .field { margin-bottom: 20px; }
:is(.ob, .ob-sheet) .field > label, :is(.ob, .ob-sheet) .label { font-size: 15px; line-height: 20px; font-weight: 600; }
.ob-addr .row-fields { margin-bottom: 12px; }

/* Blocks inside a step */
.ob-fields { min-height: 40px; padding-bottom: 24px; }
.ob-block { margin: 0 0 16px; }
.ob-item { margin: 0 0 16px; }
.ob-item-boxed, .ob-per .ob-item { padding: 16px 16px 0; border: 1px solid var(--concrete); border-radius: var(--r-card); }
.ob-item-h { margin: 0 0 12px; font: 600 17px/22px var(--font); }
.ob-item-h.between { min-height: 44px; margin-top: -8px; }
.ob-add { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; }
.ob-added { margin-bottom: 16px; }
.ob-added .label { display: block; margin-bottom: 8px; }
.ob-added .rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--concrete); border-radius: var(--r-card); overflow: hidden; }
.ob-added .row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-top: 1px solid var(--concrete); }
.ob-added .row:first-child { border-top: 0; }
.ob-added .row-main { flex: 1; min-width: 0; }
.ob-added .row-1 { font-size: 16px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-added .row-2 { font-size: 14px; line-height: 20px; color: var(--steel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-addr { margin-bottom: 8px; }
.ob-addr-h { display: block; margin-bottom: 2px; }
.ob-addr > .help { margin-bottom: 8px; font-size: 14px; line-height: 20px; color: var(--steel); }
.ob-addr .field { margin-bottom: 12px; }

/* Choices and picks inside the flow: long words wrap instead of running off a 320 px screen */
:is(.ob, .ob-sheet) .pick { white-space: normal; text-align: left; min-height: 44px; }
:is(.ob, .ob-sheet) .field > .chips, :is(.ob, .ob-sheet) .field > .choices { margin-top: 2px; }
:is(.ob, .ob-sheet) .check { min-height: 44px; align-items: center; }
:is(.ob, .ob-sheet) .check span { font-size: 16px; line-height: 22px; font-weight: 500; }
:is(.ob, .ob-sheet) .choice .dot { border-color: var(--field); }
:is(.ob, .ob-sheet) .choice[aria-checked="true"] .dot { border-color: var(--ink); }
:is(.ob, .ob-sheet) .link { display: inline-flex; align-items: center; min-height: 44px; }

/* Team rows: email and role on a line, a remove link when there is more than one */
.ob-rows { margin-bottom: 16px; }
.ob-teamrow { margin-bottom: 12px; }
.ob-teamrow-in { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: end; }
.ob-teamrow label:not(.sr) { display: block; margin-bottom: 6px; font-size: 15px; line-height: 20px; font-weight: 600; }
.ob-x { justify-self: start; }
@media (min-width: 520px) { .ob-teamrow-in { grid-template-columns: 1fr 140px auto; } }

/* Loading holds the height of what comes; a step that cannot load is one heading, one line and one button. */
.ob-sk-h { height: 28px; width: 72%; margin: 8px 0 24px; border-radius: 8px; }
.ob-sk-f { height: 74px; margin: 0 0 16px; border-radius: var(--r-ctl); background: var(--mist); }
.ob-empty { padding: 24px 0; }
.ob-empty h1, .ob-empty h2 { margin: 0 0 8px; font: 600 24px/30px var(--font); }
.ob-empty p { margin: 0 0 16px; color: var(--steel); }

/* ------------------------------------------------------------------ from 768: one white 560 px card, Continue at its foot */
@media (min-width: 768px) {
  .ob-card { display: block; min-height: 0; margin: 48px auto 64px; background: var(--white); border: 1px solid var(--concrete); border-radius: var(--r-card); }
  .ob-head { position: static; padding-top: 0; background: none; }  /* a white box would square off the card's top corners */
  .ob-top { padding: 12px 32px 0; }
  .ob-prog { padding: 8px 32px 4px; }
  .ob-body { display: block; padding: 8px 32px 32px; }
  .ob-card .ob-form { display: block; }
  .ob-foot { position: static; margin: 8px -32px -32px; padding: 20px 32px 32px; background: none; border-top: 1px solid var(--concrete); }
  .ob-foot-done { margin-top: 16px; padding-top: 0; border-top: 0; }
}

/* ------------------------------------------------------------------ the Finish setting up card on Home */
.ob-fin.ds-sec { margin: 0; }
.ob-fin-rows { margin: 0; padding: 0; list-style: none; }
.ob-fin-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-top: 1px solid var(--concrete); }
.ob-fin-row:first-child { border-top: 0; }
.ob-fin-main { flex: 1; min-width: 0; }
.ob-fin-1 { font: 600 17px/22px var(--font); }
.ob-fin-2 { font-size: 14px; line-height: 20px; color: var(--steel); }
.ob-fin-row .btn { flex: none; min-width: 72px; }
.ob-fin-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; padding: 0 16px; border-top: 1px solid var(--concrete); }
.ob-fin-link { display: inline-flex; align-items: center; min-height: 48px; font-size: 15px; }
.ob-fin-say { padding: 16px; }
.ob-fin-say p { margin: 0 0 12px; font-size: 15px; line-height: 22px; }
.ob-fin-say .ob-fin-foot { padding: 0; border-top: 0; gap: 8px 24px; }

/* The sheet that opens one step (ui.sheet, .v2.v-ob.v-obsheet): Save is its one primary button, pinned at the foot. */
.ob-sheet .ob-fields { min-height: 0; }
.v2.v-obsheet .ob-foot { margin-top: 16px; }

/* On a brand new account the card follows the cover card, 16 px under Home's own gap. */
.home-new .ob-fin.ds-sec { margin-top: 16px; }
@media (min-width: 1024px) {
  .ob-sheet { display: flex; flex-direction: column; }
  .ob-sheet-b { flex: 1; display: flex; flex-direction: column; }
}

/* ================================================================ look v2 (SPEC 4, 7.5, 7.6): set up, the pay step's
   frame, Finish setting up. The root is .v2.v-ob: the street photo fills the left half from 1024, the step sits in the
   right half with no card around it (rule 1); under 1024 the step alone. The old classes take the v2 look here. */
.v2.v-ob { background: var(--v-white); }
.v2.v-ob > .v-frp { display: none; }
@media (min-width: 1024px) {
  .v2.v-ob.ob-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .v2.v-ob > .v-frp { display: block; position: sticky; top: 0; height: 100vh; height: 100dvh; }
  .v2.v-ob.ob-split .ob-card { align-self: start; width: min(500px, 100% - 2 * var(--v-gut)); margin: 0 auto; padding: 48px 0 80px; }
}
.v2.v-ob .ob-card { border: 0; border-radius: 0; box-shadow: none; background: none; }
.v2.v-ob .ob-head { background: var(--v-white); }
.v2.v-ob .ob-top, .v2.v-ob .ob-prog, .v2.v-ob .ob-body { padding-left: var(--v-gut); padding-right: var(--v-gut); }
@media (min-width: 1024px) { .v2.v-ob .ob-top, .v2.v-ob .ob-prog, .v2.v-ob .ob-body { padding-left: 0; padding-right: 0; } }
.v2.v-ob .ob-back { font-size: 16px; font-weight: 500; color: var(--v-mute); }
.v2.v-ob .ob-back:hover { background: none; color: var(--v-ink); }
.v2.v-ob .ob-prog-t { font-size: 14px; color: var(--v-mute); }
.v2.v-ob .ob-prog .phase i { background: var(--v-hair); border-radius: 2px; }
.v2.v-ob .ob-prog .phase.done i, .v2.v-ob .ob-prog .phase.now i { background: var(--v-ink); }
.v2.v-ob .ob-body h1 { margin: 8px 0 8px; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.3px; }
.v2.v-ob .ob-body h1 + p, .v2.v-ob .sub, .v2.v-ob .muted, .v2.v-ob .ob-note { font-size: 15px; line-height: 22px; color: var(--v-mute); }

/* fields, choices, buttons and links */
.v2.v-ob .field { margin-top: 18px; }
.v2.v-ob .field > label:not(.check), .v2.v-ob .label { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.v2.v-ob .field > .check { display: flex; gap: 12px; align-items: center; min-height: 44px; color: var(--v-ink); }
.v2.v-ob .field > .check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--v-ink); }
.v2.v-ob .input, .v2.v-ob .select, .v2.v-ob .textarea { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--v-r-ctl);
  background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-field); font-size: 16px; line-height: 22px; color: var(--v-ink); }
.v2.v-ob .textarea { padding: 12px 14px; }
.v2.v-ob .input:focus, .v2.v-ob .select:focus, .v2.v-ob .textarea:focus { box-shadow: inset 0 0 0 2px var(--v-ink); }
.v2.v-ob .error { margin: 6px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-red); }
.v2.v-ob .help { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2.v-ob .choices { border: 0; border-top: 1px solid var(--v-hair); border-radius: 0; box-shadow: none; background: none; overflow: visible; gap: 0; }
.v2.v-ob .choice { min-height: 56px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--v-hair); border-radius: 0; background: none;
  box-shadow: none; font-size: 16px; font-weight: 600; color: var(--v-ink); }
.v2.v-ob .choice:hover { background: none; }
.v2.v-ob .choice .dot { width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--v-field); }
.v2.v-ob .choice[aria-checked="true"] { background: none; box-shadow: none; }
.v2.v-ob .choice[aria-checked="true"] .dot { background: none; box-shadow: inset 0 0 0 6px var(--v-ink); }
.v2.v-ob .btn { min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--v-r-ctl); background: var(--v-white); color: var(--v-ink);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); font-size: 16px; line-height: 22px; font-weight: 600; }
.v2.v-ob .btn:hover { background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-field); }
.v2.v-ob .btn-primary { background: var(--v-orange); color: var(--v-on-orange); box-shadow: none; }
.v2.v-ob .btn-primary:hover { background: #DE4F17; box-shadow: none; }
.v2.v-ob .btn-ink { background: var(--v-ink); color: var(--v-white); box-shadow: none; }
html.kbd .v2.v-ob .btn-primary:focus-visible { box-shadow: inset 0 0 0 2px var(--v-white); }
/* The done screen's Order, under Go to Home: an outline in Order's orange with ink words (rule 3's mark, AA text). */
.v2.v-ob .btn.ob-order, .v2.v-ob .btn.ob-order:hover { box-shadow: inset 0 0 0 2px var(--v-orange); }
.v2.v-ob .link { color: var(--v-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--v-soft); text-underline-offset: 3px; }
.v2.v-ob .ob-foot { border-top: 1px solid var(--v-hair); background: var(--v-white); }
.v2.v-ob .ob-foot { margin-left: calc(-1 * var(--v-gut)); margin-right: calc(-1 * var(--v-gut)); padding-left: var(--v-gut); padding-right: var(--v-gut); }
@media (min-width: 1024px) { .v2.v-ob .ob-foot { margin: 24px 0 0; padding: 20px 0 0; border-top: 0; } }
.v2.v-ob .ob-prog .phase.now i::after { display: none; }      /* no orange in the progress (rule 3) */
html.kbd .v2 .ob-body h1[tabindex="-1"]:focus-visible { outline: none; }
/* S1b (SPEC 7.5, 7.6): the one screen set up, You are on hairlines with the rest opening in place, the provider beside
   Your name; the pay step's Invoices line */
.v2.v-ob .su-more { margin-left: 32px; }
.v2.v-ob .su-more .v-choices { border-top: 0; }
.v2.v-ob .field > .su-you-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.v2.v-ob .su-you-l > label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.v2.v-ob .su-from { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.v2.v-ob .ob-pay-to { margin-top: 16px; color: var(--v-ink-2); }
/* The tips box on set up's account screen (Nov 3: a new person agrees once, there), after the fields in the scroll */
.v2.v-ob .fr-tips { margin: 24px 0 0; font-size: 15px; line-height: 21px; }
.v2.v-ob .fr-tips .help { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--v-mute); }
/* who sends the tips, under the tick's words (CASL s.4); the signed in line on the first question, for a wrong sign in */
.v2.v-ob .fr-sender { margin: 4px 0 0 32px; font-size: 12px; line-height: 17px; color: var(--v-mute); }
.v2.v-ob .ob-signed { margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2.v-ob .ob-signed .link { min-height: 44px; font-size: 14px; }