/* g3-app · onboard.css: first-run privacy, location, notifications layer */
.ob {
  position: fixed; top: 0; bottom: 0; left: 50%; z-index: 40;
  width: 100%; max-width: var(--col); transform: translateX(-50%);
  background: var(--white); overflow: hidden;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.ob.is-leaving { opacity: 0; transform: translateX(-50%) translateY(-24px); pointer-events: none; }
.ob.obb.is-leaving { transform: translateX(-50%); } /* B: a plain fade, nothing slides over the home screen */
.ob-step {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  /* the bottom edge must be page white, never the red CTA: iOS Safari tints its toolbar from it */
  padding: var(--safe-top) var(--gutter) calc(var(--safe-bottom) + var(--foot-gap));
  /* in-place step change like flow B: the old step fades where it is (120ms), the new one
     rises out of a soft blur from 100ms (220ms) */
  transition: opacity 220ms var(--ease) 100ms, transform 220ms var(--ease) 100ms, filter 220ms var(--ease) 100ms;
}
.ob-step.is-in-fwd, .ob-step.is-in-back { opacity: 0; transform: translateY(8px); filter: blur(6px); }
.ob-step.is-out-fwd, .ob-step.is-out-back { opacity: 0; pointer-events: none; transition: opacity 120ms ease-out; }

.ob-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--btn); flex-shrink: 0; }
.ob-top > :last-child { justify-self: end; }
.ob-top-gap { width: var(--btn); }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--handle); transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.ob-dots i.is-on { width: 18px; background: var(--ink); }
.ob-langs { display: flex; gap: 2px; }
.ob-lang { height: 30px; padding: 0 9px; border-radius: var(--r-pill); font-size: 13px; line-height: 16px; font-weight: 500; color: var(--muted); }
.ob-lang.is-on { background: var(--beige); color: var(--ink); }

.ob-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 32px 0 20px; display: flex; flex-direction: column; align-items: flex-start; }
.ob-disc { display: grid; place-items: center; width: 80px; height: 80px; border-radius: 999px; background: var(--beige); color: var(--ink); margin-bottom: 24px; flex-shrink: 0; }
.ob-title { font-family: var(--f-stripes); font-weight: 900; text-transform: uppercase; font-size: 36px; line-height: 38px; color: var(--ink); text-wrap: balance; }
.ob-lead { margin-top: 10px; font-size: 15px; line-height: 21px; color: var(--muted); max-width: 34em; }
.ob-note { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--muted); }
.ob-rows { width: 100%; margin-top: 18px; border-top: 1px solid var(--line); }
.ob-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ob-row-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-row-n { font-size: 15px; line-height: 19px; font-weight: 600; color: var(--ink); }
.ob-row-s { font-size: 13px; line-height: 17px; color: var(--muted); }
.mb-switch.is-locked { opacity: 0.4; }
.ob-policy { margin-top: 16px; font-size: 14px; line-height: 18px; color: var(--ink); }

.ob-btns { flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.ob-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-pair .cta, .ob-pair .btn-secondary { padding: 0 12px; font-size: 16px; }
.ob-later { width: 100%; text-align: center; height: 48px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); }
.ob .cta[disabled] { opacity: 0.6; }

/* privacy choices sheet (account) */
.ob-sheet { padding: 0 var(--gutter) calc(var(--safe-bottom) + var(--foot-gap)); }
.ob-sheet .ob-lead { margin-top: 0; }
.ob-sheet .ob-btns { padding-top: 20px; }
.ob-policy-text { padding: 0 var(--gutter) calc(var(--safe-bottom) + 8px); font-size: 14px; line-height: 20px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .ob, .ob-step { transition: opacity var(--dur-fast) linear; }
  .ob.is-leaving, .ob-step.is-in-fwd, .ob-step.is-in-back, .ob-step.is-out-fwd, .ob-step.is-out-back { transform: none; filter: none; }
  .ob.is-leaving { transform: translateX(-50%); }
}

/* country, then language */
.ob-label { width: 100%; margin-top: 22px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--muted); }
.loc-rows { margin-top: 8px; }
.loc-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; }
.loc-code { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; background: var(--beige); font-size: 13px; line-height: 1; font-weight: 600; color: var(--ink); }
.loc-radio { width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; border: 2px solid var(--handle); transition: border-color var(--dur-fast) var(--ease), border-width var(--dur-fast) var(--ease); }
.loc-row.is-on .loc-radio { border: 7px solid var(--ink); }
.loc-langs { display: flex; width: 100%; margin-top: 10px; padding: 4px; gap: 4px; border-radius: var(--r-pill); background: var(--beige); }
.loc-lang { flex: 1 1 0; text-align: center; height: 40px; padding: 0 6px; border-radius: var(--r-pill); font-size: 14px; line-height: 18px; font-weight: 500; color: var(--ink); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.loc-lang.is-on { background: var(--ink); color: var(--white); }
.loc-lang.is-soon { color: var(--muted); opacity: 0.55; }
.ob-sheet .ob-label:first-child { margin-top: 0; }
/* tap feedback (flow A too): scale only, no layout change */
:root {
  /* motion: press in fast, spring back with a small overshoot (checks, knobs, bar, landings) */
  --ob-pop: cubic-bezier(0.34, 1.36, 0.64, 1); --ob-press: 0.97; --ob-press-in: 120ms; --ob-press-out: 220ms;
}
.ob-later, .loc-row, .loc-lang { --ob-pd: var(--ob-press-out); --ob-pe: var(--ob-pop); }
.ob-later, .loc-row { transition: scale var(--ob-pd) var(--ob-pe); }
.loc-lang { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), scale var(--ob-pd) var(--ob-pe); }
.ob-later:active, .loc-row:active, .loc-lang:not(:disabled):active { --ob-pd: var(--ob-press-in); --ob-pe: var(--ease); scale: var(--ob-press); }
@media (prefers-reduced-motion: reduce) { .ob-later:active, .loc-row:active, .loc-lang:active { scale: none; } }

/* short phones (Safari with the full bottom bar): drop the icon disc so the country and
   language pickers both fit above the button */
@media (max-height: 720px) {
  .ob-disc { display: none; }
  .ob-body { padding-top: 20px; }
  .ob-title { font-size: 32px; line-height: 34px; }
}

/* ---------- flow B (Ore style, html.flow-b): Paper "Onboarding B (Ore style)" ----------
   One shell (top bar + bottom buttons stay put), the title sits low at a fixed height,
   content swaps in place. Shared with auth.css (.aub). */
.flow-b .obb, .flow-b .aub {
  /* local sizes from the design (no base token for these) */
  --obb-r-opt: 14px; --obb-title-y: 52.1dvh;
  /* steps with a text field: the title sits this far under the top bar */
  --obb-field-gap: 24px;
  --obb-divider: color-mix(in srgb, var(--handle) 60%, var(--beige));
  display: flex; flex-direction: column;
  /* the bottom edge stays page colour under the button (iOS Safari tints its toolbar from it) */
  padding: var(--safe-top) var(--gutter) calc(var(--safe-bottom) + var(--foot-gap));
}
.flow-b .obb-top { display: flex; align-items: center; gap: 12px; height: var(--btn); flex-shrink: 0; }
.flow-b .obb-back {
  display: flex; align-items: center; width: var(--btn); height: var(--btn); flex-shrink: 0; color: var(--ink);
  transition: opacity var(--dur-fast) var(--ease);
}
.flow-b .obb-back svg { transition: transform var(--dur-fast) var(--ease); }
.flow-b .obb-back:active svg { transform: translateX(-2px); }
.flow-b .obb-back.is-off { opacity: 0; pointer-events: none; }
.flow-b .obb-bar { position: relative; flex: 1 1 auto; height: 3px; border-radius: var(--r-pill); background: var(--line); }
/* fill = scaleX (no layout), clipped by the track; a soft glow pulses at its tip on each step */
.flow-b .obb-bar-t { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.flow-b .obb-bar-t > i {
  position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--red);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-slow) var(--ob-pop);
}
.flow-b .obb-tip-c { position: absolute; left: -8px; right: -8px; top: -8px; bottom: -8px; overflow: hidden; pointer-events: none; } /* keeps the moving tip out of the page's scroll area */
.flow-b .obb-tip-w { position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px; transform: translateX(0); transition: transform var(--dur-slow) var(--ob-pop); }
.flow-b .obb-tip {
  position: absolute; left: -7px; top: -6px; width: 14px; height: 14px; border-radius: 999px; opacity: 0;
  background: radial-gradient(closest-side, var(--red) 0%, var(--red-glow) 55%, transparent 100%);
}
/* Skip keeps its width on every step (hidden when not offered), so the bar never changes length */
.flow-b .obb-skip {
  display: flex; align-items: center; justify-content: flex-end; min-width: var(--btn); height: var(--btn); flex-shrink: 0;
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease);
}
.flow-b .obb-skip.is-off { opacity: 0; pointer-events: none; }

.flow-b .obb-mid { position: relative; flex: 1 1 auto; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.flow-b .obb-step {
  grid-area: 1 / 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
/* the title lands at the same height on every step (y 440 of 844); when the keyboard or tall
   content needs the room the spacer gives way, so the content rides up instead */
.flow-b .obb-step::before { content: ""; flex: 0 1 calc(var(--obb-title-y) - var(--safe-top) - var(--btn)); min-height: 0; }
/* the 24px under the content gives way first (taller steps such as the birthday wheel keep the title in place) */
.flow-b .obb-step::after { content: ""; flex: 0 1000 24px; min-height: 8px; }
/* steps with a text field (sign in: email, code, name): laid out from the top, the button right
   under the field. Nothing reads the keyboard: it opens and closes over a layout that never moves,
   and the button stays clear of it (and of Safari's address pill above it) on every iPhone. */
.flow-b .aub.is-field .obb-mid { flex: 0 0 auto; }
.flow-b .aub.is-field .obb-step::before { flex: 0 0 var(--obb-field-gap); }
.flow-b .aub.is-field .obb-step::after { flex-basis: 16px; }
.flow-b .aub.is-field .obb-foot { margin-bottom: auto; }
.flow-b .obb-step::-webkit-scrollbar { display: none; }
.flow-b .obb-step.is-out { pointer-events: none; }
.flow-b .obb-group { display: flex; flex-direction: column; flex-shrink: 0; }
.flow-b .obb-title {
  display: flex; flex-direction: column; color: var(--ink);
  font-family: var(--f-stripes); font-weight: 900; text-transform: uppercase; font-size: 34px; line-height: 36px; text-wrap: balance;
}
.flow-b .obb-title .is-red { color: var(--red); }
.flow-b .obb-lead { margin-top: 10px; font-size: 15px; line-height: 21px; color: var(--muted); }
.flow-b .obb-note { margin-top: 12px; font-size: 13px; line-height: 18px; color: var(--muted); }

/* single-choice rows */
.flow-b .obb-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.flow-b .obb-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; height: var(--cta-h); padding: 0 16px; flex-shrink: 0;
  border-radius: var(--obb-r-opt); background: var(--beige); box-shadow: inset 0 0 0 2px transparent; text-align: left; color: var(--ink);
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.flow-b .obb-opt.is-on { box-shadow: inset 0 0 0 2px var(--ink); }
.flow-b .obb-opt.is-on:focus-visible { outline: none; }
.flow-b .obb-opt-n { flex: 1 1 0; min-width: 0; font-size: 16px; line-height: 20px; font-weight: 500; }
.flow-b .obb-opt-s { font-size: 15px; line-height: 20px; color: var(--muted); }
.flow-b .obb-opt-ck { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; opacity: 0; transform: scale(0.6); transition: opacity 120ms var(--ease), transform 240ms var(--ob-pop); }
.flow-b .obb-opt.is-on .obb-opt-ck { opacity: 1; transform: none; }

/* switch rows on one beige card (privacy here, offers in auth.css) */
.flow-b .obb-card { margin-top: 24px; padding: 0 16px; border: 0; border-radius: var(--obb-r-opt); background: var(--beige); }
.flow-b .obb-card .ob-row { min-height: 60px; padding: 10px 0; border-bottom: 1px solid var(--obb-divider); }
.flow-b .obb-card .ob-row:last-child { border-bottom: 0; }
.flow-b .obb-policy {
  align-self: flex-start; margin-top: 24px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink);
  text-decoration: underline 1px; text-underline-position: from-font;
}

/* bottom buttons: anchored to the bottom, crossfade in place */
.flow-b .obb-foot { position: relative; display: grid; grid-template: auto / minmax(0, 1fr); align-items: end; flex-shrink: 0; }
.flow-b .obb-acts { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; }
/* outgoing buttons fade where they are, out of the flow, so the content never waits for them to go */
.flow-b .obb-acts.is-out { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.flow-b .obb-acts > .ob-pair { gap: 10px; }
/* two choices side by side stay on one line each (ET, RU at 375) */
.flow-b .ob-pair .obb-soft { font-size: 16px; padding: 0 10px; }
.flow-b .obb-soft {
  display: flex; align-items: center; justify-content: center; height: var(--cta-h); padding: 0 12px; border-radius: var(--r-pill);
  background: var(--beige); color: var(--ink); font-family: var(--f-sans); font-size: 18px; line-height: 22px;
  transition: transform var(--dur-fast) var(--ease);
}
.flow-b .obb-later {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 48px;
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink);
}

/* ---------- tap feedback (every tappable thing in B): scale to 0.97 in 120 ms, spring back in 220 ms.
   Uses the separate `scale` property so it never fights a transform the element already animates. */
.flow-b :is(.obb, .au) :is(.obb-opt, .obb-soft, .cta, .obb-later, .obb-back, .obb-skip, .obb-policy, .au-chip, .aub-resend.is-btn, .au-wel-link, .au-code, .mb-switch:not(.is-locked)) {
  --ob-pd: var(--ob-press-out); --ob-pe: var(--ob-pop);
}
.flow-b :is(.obb, .au) :is(.obb-opt, .obb-soft, .cta, .obb-later, .obb-back, .obb-skip, .obb-policy, .au-chip, .aub-resend.is-btn, .au-wel-link, .au-code, .mb-switch:not(.is-locked)):active {
  --ob-pd: var(--ob-press-in); --ob-pe: var(--ease); scale: var(--ob-press); transform: none;
}
.flow-b :is(.obb, .au) :is(.obb-later, .obb-policy, .aub-resend, .au-wel-link, .au-code, .obb-soft, .au-chip) { transition: scale var(--ob-pd) var(--ob-pe); }
.flow-b .obb-opt { transition: box-shadow var(--dur-fast) var(--ease), scale var(--ob-pd) var(--ob-pe); }
.flow-b :is(.obb, .au) .cta { transition: opacity var(--dur-fast) var(--ease), scale var(--ob-pd) var(--ob-pe); }
.flow-b :is(.obb-back, .obb-skip) { transition: opacity var(--dur-fast) var(--ease), scale var(--ob-pd) var(--ob-pe); }
.flow-b :is(.obb, .au) .mb-switch { transition: background-color var(--dur-fast) var(--ease), scale var(--ob-pd) var(--ob-pe); }
/* switch: the knob travels with a slight overshoot, its colour crossfades, a tiny squeeze while pressed */
.flow-b :is(.obb, .au) .mb-switch i { transition: transform 260ms var(--ob-pop), background-color var(--dur-fast) var(--ease), scale var(--ob-pd) var(--ob-pe); }
.flow-b :is(.obb, .au) .mb-switch:not(.is-locked):active i { scale: 0.88; }

/* ---------- falling chicken (onboard.js B.chick): the real drumstick cut-out, never tappable,
   right side, above the content; ~50px tall at 390px wide, up to 64px ---------- */
.obb-chick {
  --chick-h: clamp(44px, 13vw, 64px);
  position: absolute; top: 0; right: calc(var(--gutter) + 10px); z-index: 2; height: var(--chick-h); width: calc(var(--chick-h) * 0.443);
  pointer-events: none; opacity: 1; transition: opacity 160ms var(--ease); will-change: transform; contain: layout style;
}
.obb-chick:not(.is-set), .obb-chick.is-hid { opacity: 0; }
.obb-chick.is-wel { right: calc(var(--gutter) + 28px); }
.obb-chick-i { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; will-change: transform; }
.obb-chick img { display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(var(--lean, -16deg)); transform-origin: 50% 92%;
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 160ms; -webkit-user-drag: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .obb-chick img { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .flow-b .obb-bar-t > i, .flow-b .obb-tip-w { transition: transform var(--dur-fast) var(--ease); }
  .flow-b .obb-opt-ck { transform: none; transition: opacity 120ms linear; }
  .flow-b :is(.obb, .au) .mb-switch i { transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
  .flow-b :is(.obb, .au) :active { scale: none; }
}

/* ---------- flow B ships black (Paper "B black · 01-10"): only under html.flow-b, flow A stays white ----------
   The palette remaps the base tokens inside the B layer and the sign-in screens (incl. the v2b welcome),
   so every reused component (fields, code boxes, wheel, rows, chips) follows. */
html.flow-b {
  --b-ground: #0B0B0B; --b-raised: #1C1B1A; --b-line: #2A2928; --b-text: #FFFFFF; --b-edge: #55524E; /* active borders: a quiet light edge, not full white */ --b-muted: #A39E97; --b-err: #FF4D6A;
}
.flow-b .obb, .flow-b .au {
  --white: var(--b-ground); --beige: var(--b-raised); --ink: var(--b-text); --muted: var(--b-muted);
  --line: var(--b-line); --red-ink: var(--b-err); --obb-divider: var(--b-line);
  background: var(--b-ground); color: var(--b-text);
}
/* the B sign-in screens are black (Safari's edges sample it: core.js App.edges) */
html.flow-b body[data-screen="login"] #app, html.flow-b body[data-screen="join"] #app,
html.flow-b body[data-screen="login"] .screen, html.flow-b body[data-screen="join"] .screen { background: var(--b-ground); }
.flow-b .obb .cta, .flow-b .au .cta { color: var(--b-text); }
.flow-b .obb .obb-opt.is-on { box-shadow: inset 0 0 0 1.5px var(--b-edge); }
/* switches: off = dark track + white knob, on = white track + black knob */
.flow-b .obb .mb-switch, .flow-b .au .mb-switch { background: var(--track-off); }
.flow-b .obb .mb-switch i, .flow-b .au .mb-switch i { background: var(--b-text); }
.flow-b .obb .mb-switch.is-on, .flow-b .au .mb-switch.is-on { background: var(--b-text); }
.flow-b .obb .mb-switch.is-on i, .flow-b .au .mb-switch.is-on i { background: var(--b-ground); }
.flow-b .obb .mb-switch.is-locked { opacity: 0.35; }

/* product owner switch "1" / "2" (App.flowToggleHTML): tiny, quiet, works on white and on black */
.flow-toggle {
  position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px currentColor; color: inherit; opacity: 0.45;
  font-family: var(--f-ui); font-size: 11px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.flow-toggle::after { content: ""; position: absolute; inset: -6px; } /* 36px hit area */
.flow-toggle:active { transform: scale(0.92); opacity: 0.7; }
@media (hover: hover) { .flow-toggle:hover { opacity: 0.7; } }