/* ==========================================================================
   GLOW · onboarding «Знакомство» — the cover of issue № 00 + three questions.
   Owner: "onboarding". Root: .scr-onboarding (js/screens/onboarding.js).
   Look: Atelier frame 1 (cover, step 01) and S8 (steps 02–03) + design/DESIGN.md amendments.
   Shared parts — kicker, label, btn, chips/chip, fld, radio — come from components.css;
   this file lays them out and draws the cover. Tokens only, no colour literals.
   ========================================================================== */

.scr-onboarding {
  container-type: inline-size;      /* cqw = the column, also on desktop Telegram */
  position: relative;
  /* Steps slide sideways: never let that widen the page (a mobile WebView would zoom out). */
  overflow-x: hidden;
  overflow-x: clip;
}

/* One column that fills the space between the header and the tab bar (minus the
   tab bar's dissolve, which #view keeps clear): the question block sits low,
   the cover takes what is left. */
.scr-onboarding .ob-form {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--view-min-h, calc(100vh - 116px)) - var(--fade-h, 36px) - var(--sp-3, 12px));
}

/* ---------- 1. The cover (step 01) --------------------------------------- */

.scr-onboarding .ob-cover {
  position: relative;
  padding: 0 var(--gutter);
  overflow: hidden;                 /* the sketch is cropped by the screen edge, never scrolled */
}

.scr-onboarding .ob-masthead {
  padding-top: var(--sp-2);
  font-family: var(--serif);
  font-weight: var(--fw-serif-display);
  font-size: var(--fs-masthead);
  font-size: clamp(72px, 25cqw, 112px);
  line-height: .8;
  letter-spacing: var(--tr-masthead);
  margin-right: calc(-1 * var(--tr-masthead));   /* re-centre the trailing tracking */
  text-align: center;
  font-variant-numeric: normal;
}

/* «ВЫПУСК № 00 · ВНЕШНОСТЬ НА ДОКАЗАТЕЛЬСТВАХ» between a double and a single rule. */
.scr-onboarding .ob-issue {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-3);
  padding: 9px 0 8px;
  border-top: 3px double var(--rule);
  border-bottom: var(--hair) solid var(--rule);
  font-family: var(--sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-micro);
  line-height: var(--lh-caps);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--ink);
}
.scr-onboarding .ob-issue span { white-space: nowrap; }

/* As tall as the sketch (viewBox 1043 × 1100, set 8 px down): its dissolve ends inside the
   cover — the cover's overflow never cuts the chin off with a straight line. */
.scr-onboarding .ob-cover__body {
  position: relative;
  min-height: calc(58cqw * 1100 / 1043 + 8px);
  padding-top: 22px;
}

.scr-onboarding .ob-cover__lines {
  position: relative;
  z-index: 1;
  width: 58%;
}
.scr-onboarding .ob-cover__title {
  margin-top: var(--sp-4);
  font-family: var(--serif);
  font-weight: var(--fw-serif-title);
  font-size: var(--fs-title-m);
  font-size: clamp(28px, 8.2cqw, 36px);
  line-height: 1.02;
  letter-spacing: -.025em;
  overflow-wrap: normal;            /* «познакомимся» may reach over the sketch, never break */
}
.scr-onboarding .ob-cover__title em { font-weight: var(--fw-serif-title); letter-spacing: -.02em; }
.scr-onboarding .ob-cover__lead {
  margin-top: var(--sp-4);
  max-width: 15.5em;
  font: var(--fw-regular) var(--fs-body-s)/var(--lh-body-s) var(--sans);
  color: var(--ink-2);
}

/* The sketch: the canonical mesh, cut by the right edge, dissolving downwards. */
.scr-onboarding .ob-sketch-wrap {
  position: absolute;
  z-index: 0;
  top: 8px;
  right: calc(-1 * var(--gutter) - 18cqw);
  width: 58cqw;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0 62%, transparent 93%);
          mask-image: linear-gradient(to bottom, black 0 62%, transparent 93%);
}
.scr-onboarding .ob-sketch { display: block; width: 100%; height: auto; overflow: visible; }
.scr-onboarding .ob-sketch path,
.scr-onboarding .ob-sketch circle { fill: none; vector-effect: non-scaling-stroke; }
.scr-onboarding .ob-sk-tess { stroke: var(--ink); stroke-opacity: .15; stroke-width: .5px; }
.scr-onboarding .ob-sk-feat,
.scr-onboarding .ob-sk-iris circle { stroke: var(--ink); stroke-opacity: .66; stroke-width: .8px; stroke-linejoin: round; }
.scr-onboarding .ob-sk-guide { stroke: var(--ink); stroke-opacity: .55; stroke-width: .6px; stroke-dasharray: 2 3; }
.scr-onboarding .ob-sk-pt { stroke: var(--ink); stroke-width: 1px; transform-box: fill-box; transform-origin: center; }
.scr-onboarding .ob-scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
}

/* ---------- 2. The question block (step 01, under the cover) ------------- */

.scr-onboarding .ob-quiz {
  margin-top: auto;
  padding: var(--sp-2) var(--gutter) 0;
}
.scr-onboarding .ob-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--hair) solid var(--rule);
}

/* Progress: 26 × 2 steps; the current one fills left → right when it is reached. */
.scr-onboarding .ob-bars { display: flex; gap: var(--sp-1); flex: none; }
.scr-onboarding .ob-bars i {
  position: relative;
  display: block;
  width: 26px;
  height: var(--bar);
  background: var(--rule-2);
  overflow: hidden;
}
.scr-onboarding .ob-bars b {
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}
.scr-onboarding .ob-bars .is-on b { transform: none; }
.scr-onboarding .ob-bars--wide { margin-top: var(--sp-4); gap: 6px; }
.scr-onboarding .ob-bars--wide i { flex: 1 1 0; width: auto; }

.scr-onboarding .ob-q__title {
  margin-top: var(--sp-4);
  font-family: var(--serif);
  font-weight: var(--fw-serif-title);
  font-size: var(--fs-title-m);
  font-size: clamp(28px, 8.2cqw, 36px);
  line-height: 1;
  letter-spacing: var(--tr-title);
}

/* Options I / II — the shared .option row (numeral · serif answer · radio), set bigger here:
   the chosen answer turns ink and italic (components.css), the radio fills (components.css). */
.scr-onboarding .ob-opts { margin-top: var(--sp-3); }
.scr-onboarding .ob-opt { min-height: 58px; }
.scr-onboarding .ob-opt .option__no { width: 34px; }
.scr-onboarding .ob-opt .option__text {
  font-weight: var(--fw-serif-title);
  font-size: clamp(26px, 7.4cqw, 30px);
  letter-spacing: -.01em;
}
.scr-onboarding .ob-opt:active .radio { border-color: var(--ink); }

/* Field messages (validation): the shared .fld__msg look, placed under the block. */
.scr-onboarding .ob-msg { margin-top: var(--sp-3); }
/* Step 01: the message drops into the gap above «Далее» — the options never shift under the finger. */
.scr-onboarding .ob-sex { position: relative; }
.scr-onboarding .ob-sex .ob-msg { position: absolute; left: 0; right: 0; top: 100%; margin-top: 5px; }
.scr-onboarding .ob-quiz .ob-actions { margin-top: 28px; }

/* ---------- 3. Steps 02–03: the cover folds into a running head ---------- */

.scr-onboarding .ob-form[data-step="2"],
.scr-onboarding .ob-form[data-step="3"] { padding: 0 var(--gutter); }

.scr-onboarding .ob-head { padding-top: 18px; }
.scr-onboarding .ob-head .kicker { flex-wrap: nowrap; }
.scr-onboarding .ob-head .kicker .end { margin-left: auto; }

.scr-onboarding .ob-title {
  margin-top: 20px;
  font-family: var(--serif);
  font-weight: var(--fw-serif-display);
  font-size: var(--fs-title-xl);
  font-size: clamp(40px, 12.5cqw, 54px);
  line-height: .98;
  letter-spacing: var(--tr-display);
}
.scr-onboarding .ob-title em { font-weight: var(--fw-serif-display); letter-spacing: -.02em; }

.scr-onboarding .ob-lead,
.scr-onboarding .ob-hint {
  max-width: 30em;
  font: var(--fw-regular) var(--fs-body-s)/var(--lh-body-s) var(--sans);
  color: var(--ink-2);
}
.scr-onboarding .ob-lead { margin-top: var(--sp-4); font-size: var(--fs-body); line-height: 1.5; }

/* Step 02 — one big number in the serif, the unit follows it («22 года»). */
.scr-onboarding .ob-agebox { margin-top: var(--sp-6); }
.scr-onboarding .ob-age .fld__box { align-items: baseline; }
/* An input ignores line-height for its own height: set the box explicitly to the figures
   (1.04 em keeps the digits whole), so there is no empty band above / below the number. */
.scr-onboarding .ob-age input {
  height: 1.04em;
  padding: 0;
  font-family: var(--serif);
  font-weight: var(--fw-serif-display);
  font-size: clamp(80px, 25cqw, 108px);
  line-height: 1.04em;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums proportional-nums;
  /* focus / typing keeps the number above the pinned «Назад / Далее» (html scroll-padding adds the tab bar) */
  scroll-margin-bottom: calc(var(--btn-h) + var(--sp-7) + var(--sp-6));
}
/* The underline is the field's focus mark (1 → 2 px ink); no ring box around a 100 px numeral. */
.scr-onboarding .ob-age input:focus,
.scr-onboarding .ob-age input:focus-visible { outline: none; }
/* Empty: a ghost numeral in the figures' own size («25 лет»), italic and muted. */
.scr-onboarding .ob-age input::placeholder {
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-serif-display);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: -.04em;
  color: var(--ink-3);
  opacity: 1;
}
.scr-onboarding .ob-age .fld__unit { flex: none; }
.scr-onboarding .ob-hint { margin-top: var(--sp-5); }

/* The tape: hairline axis (decor), ticks every 2 years, 18 marked, a caret on the value. */
.scr-onboarding .ob-ruler {
  position: relative;
  height: 40px;
  margin-top: 22px;
}
.scr-onboarding .ob-ruler__ticks {
  position: absolute; left: 0; top: 10px;
  width: 100%; height: 9px;
  overflow: visible;
}
.scr-onboarding .ob-ruler__ticks path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1px; }
.scr-onboarding .ob-ruler__axis,
.scr-onboarding .ob-ruler__minor { stroke: var(--ink-4); }
.scr-onboarding .ob-ruler__major { stroke: var(--ink-3); }
.scr-onboarding .ob-ruler__adult { stroke: var(--ink); }
.scr-onboarding .ob-ruler__lab {
  position: absolute; top: 25px;
  transform: translateX(-50%);
  font: var(--fw-regular) var(--fs-micro)/1 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-3);
}
.scr-onboarding .ob-ruler__lab--min { transform: none; }
.scr-onboarding .ob-ruler__lab--max { transform: translateX(-100%); }   /* «100» ends with the axis */
.scr-onboarding .ob-ruler__lab--adult { color: var(--ink); }
/* The caret rides a full-width track, so it moves by transform only. */
.scr-onboarding .ob-ruler__track {
  position: absolute; left: 0; right: 0; top: 0; height: 20px;
  transform: translateX(calc(var(--p, 0) * 1%));
  transition: transform var(--d-radio, 240ms) var(--e-out);
  pointer-events: none;
}
.scr-onboarding .ob-ruler__mark {
  position: absolute; left: -5px; top: 0;
  width: 10px; height: 8px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: opacity var(--d-state, 180ms) var(--e-std);
}
.scr-onboarding .ob-ruler__mark::after {          /* the needle through the axis */
  content: "";
  position: absolute; left: 4.5px; top: 8px;
  width: 1px; height: 11px;
  background: var(--ink);
}
.scr-onboarding .ob-ruler[data-state="empty"] .ob-ruler__mark { opacity: 0; }
/* Outside 10–100 the caret turns hollow (an outline, like «вне ориентира» on the metrics). */
.scr-onboarding .ob-ruler[data-state="out"] .ob-ruler__mark {
  background: transparent;
  background-image: linear-gradient(var(--ink), var(--ink));
  clip-path: polygon(evenodd, 0 0, 100% 0, 50% 100%, 0 0, 1.6px 1px, 50% 6.2px, 8.4px 1px, 1.6px 1px);
}

/* Step 03 — fourteen concerns, multi-select, wrapping. */
.scr-onboarding .ob-concerns { margin-top: var(--sp-4); }
/* the count lives on the action («Готово · выбрано 4»); [data-count] stays as a quiet live region */
.scr-onboarding .ob-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); overflow: visible; padding: 0; }
/* The tick takes the room of the side padding (12 px tick − 2 px + 8 px gap = 18 px), so a chosen
   chip keeps its width and a tap never re-flows the rows under the finger. */
.scr-onboarding .ob-chips .chip { padding: 0 23px; }
.scr-onboarding .ob-chips .chip[aria-pressed="true"] { padding: 0 14px; }

/* ---------- 4. Actions ---------------------------------------------------- */

.scr-onboarding .ob-actions { margin-top: var(--sp-5); }
/* Steps 02–03: the pair is pinned above the tab bar (like a sheet footer) — on a short phone the
   chips scroll under it and dissolve; when everything fits it simply sits at the bottom. The box
   reaches over #view's bottom air, so the buttons stay where they would rest anyway. */
.scr-onboarding .ob-form[data-step="2"] .ob-actions,
.scr-onboarding .ob-form[data-step="3"] .ob-actions {
  position: sticky;
  z-index: 2;
  bottom: var(--view-bottom, 60px);
  margin: auto calc(-1 * var(--gutter)) calc(-1 * (var(--fade-h, 36px) + var(--sp-3, 12px)));
  padding: var(--sp-7) var(--gutter) calc(var(--fade-h, 36px) + var(--sp-3, 12px));
  background: linear-gradient(to bottom, transparent, var(--bg) var(--sp-6));
  pointer-events: none;
}
.scr-onboarding .ob-form[data-step="2"] .ob-actions > *,
.scr-onboarding .ob-form[data-step="3"] .ob-actions > * { pointer-events: auto; }
.scr-onboarding .ob-form:is(.is-busy, .is-moving) .ob-actions > * { pointer-events: none; }
.scr-onboarding .ob-actions--pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 10px;
}
.scr-onboarding .ob-actions .btn { width: 100%; min-width: 0; }
.scr-onboarding .ob-back { padding: 0 14px; gap: 10px; white-space: nowrap; }
.scr-onboarding .ob-next { white-space: nowrap; }
.scr-onboarding .ob-next { position: relative; overflow: hidden; }
.scr-onboarding .ob-next__ico--done { display: none; }
.scr-onboarding .ob-next[data-done="1"] .ob-next__ico--go { display: none; }
.scr-onboarding .ob-next[data-done="1"] .ob-next__ico--done { display: inline-block; margin-left: 4px; }
.scr-onboarding .ob-next[aria-busy="true"] .ob-next__ico { display: none; }   /* «Сохраняю» — no ✓ yet */
/* A failed save is said on the action itself, above the pair (pinned with it). */
.scr-onboarding .ob-msg--save { grid-column: 1 / -1; margin: 0 0 var(--sp-3); }

.scr-onboarding .ob-form.is-busy .chip,
.scr-onboarding .ob-form.is-busy .ob-back,
.scr-onboarding .ob-form.is-moving { pointer-events: none; }

/* ---------- 5. Short screens, narrow phones (360) and roomy columns ------ */

/* Real Telegram heights (≈ 600–760 px between the bars): a tighter cover, so step 01 needs
   little or no scroll (the choice itself also scrolls «Далее» into view, see onboarding.js). */
@media (max-height: 760px) {
  .scr-onboarding .ob-masthead { font-size: clamp(60px, 19cqw, 84px); }
  .scr-onboarding .ob-issue { margin-top: var(--sp-2); }
  .scr-onboarding .ob-sketch-wrap { width: 46cqw; right: calc(-1 * var(--gutter) - 12cqw); }
  .scr-onboarding .ob-cover__body { min-height: calc(46cqw * 1100 / 1043 + 8px); padding-top: 14px; }
  .scr-onboarding .ob-cover__title,
  .scr-onboarding .ob-cover__lead { margin-top: var(--sp-3); }
  .scr-onboarding .ob-progress { padding-top: var(--sp-3); }
  .scr-onboarding .ob-q__title { margin-top: 10px; }
  .scr-onboarding .ob-opts { margin-top: 6px; }
  .scr-onboarding .ob-opt { min-height: 52px; }
}
/* An open Android keyboard (the WebView shrinks): the pair becomes a plain block after the
   content, so it never sits on top of the number being typed (Enter = «Далее» anyway). */
@media (max-height: 560px) {
  .scr-onboarding .ob-form[data-step="2"] .ob-actions,
  .scr-onboarding .ob-form[data-step="3"] .ob-actions {
    position: static;
    margin: var(--sp-6) 0 0;
    padding: 0;
    background: none;
  }
  .scr-onboarding .ob-age input { scroll-margin-bottom: 0; }
}

/* Amendment A3: under 384 px the 12.5cqw title is < 48 px → the 24–47 px weight. */
@container (max-width: 383.98px) {
  .scr-onboarding .ob-title,
  .scr-onboarding .ob-title em { font-weight: var(--fw-serif-title); }
}
@container (max-width: 379px) {
  .scr-onboarding .ob-issue { letter-spacing: .05em; }
  .scr-onboarding .ob-cover__lines { width: 63%; }   /* the lead keeps 4 lines («методы, без «bone smashing».») */
  .scr-onboarding .ob-actions--pair { grid-template-columns: 76px minmax(0, 1fr); }
  .scr-onboarding .ob-back__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* same 18 px difference between the two states, so rows still never re-flow on a tap */
  .scr-onboarding .ob-chips .chip { padding: 0 19px; }
  .scr-onboarding .ob-chips .chip[aria-pressed="true"] { padding: 0 10px; }
}
@container (min-width: 520px) {
  .scr-onboarding .ob-cover__lines { width: 50%; }
  .scr-onboarding .ob-sketch-wrap { width: 48cqw; right: calc(-1 * var(--gutter) - 6cqw); }
  .scr-onboarding .ob-cover__body { min-height: calc(48cqw * 1100 / 1043 + 8px); }
}