/* ==================================================================================================
 * THE FIVE-SCREEN ONBOARDING — the designer's layout, 2026-09-25.
 *
 * ⚠⚠⚠ THIS SHEET EXISTS BECAUSE THE OWNER REVERSED HIS RULING OF 21 SEPTEMBER. Until today the new tour
 * was deliberately a COPY of the old slide, using only the old classes and adding no stylesheet of its
 * own, because the task was "replace the text and the pictures, not the layout". On 25 September he asked
 * for the designer's LAYOUT as drawn. This file is that reversal, and nothing outside the onboarding may
 * use it: every rule is scoped to `.obd`, so no class here can reach the old tour or any other screen.
 *
 * ⚠⚠ THE FONTS ARE SELF-HOSTED. The cabinet once asked Google for Raleway and the site's own policy
 * refused it, leaving the page drawn in a fallback nobody had chosen. Onest is new to the platform and
 * ships with the design; Raleway is already on disk at /fonts/Raleway and is NOT redeclared here.
 *
 * ⚠ EVERY COLOUR AND SIZE BELOW IS THE DESIGNER'S, from teksty-i-cveta.txt. The background #EEF2F7 in his
 * files is explicitly "for viewing only, do not carry into the platform" and is therefore absent.
 * ================================================================================================== */

@font-face { font-family: "Onest"; font-weight: 500; font-display: swap;
             src: url("/fonts/onboarding/Onest-500.woff2") format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 700; font-display: swap;
             src: url("/fonts/onboarding/Onest-700.woff2") format("woff2"); }

.obd {
    --obd-navy: #09152A;      /* the dark scene */
    --obd-ink: #17253F;       /* heading and first paragraph */
    --obd-ink-2: #4A5872;     /* the rest, and the counter on white */
    --obd-blue: #266DF0;
    --obd-blue-hover: #0048CD;
    --obd-blue-pressed: #003AA6;
    --obd-blue-300: #79A5F6;  /* done segments on dark; the keyboard ring */
    --obd-blue-100: #DCE8FD;  /* undone segments on white */
    --obd-slate-300: #C3CCDA; /* counter and skip on dark */
    --obd-slate-400: #7C889C; /* back-button border on white */
    --obd-divider: #EAECEE;
    --obd-head: "Onest", system-ui, sans-serif;
    --obd-body: "Raleway", system-ui, sans-serif;

    display: grid;
    grid-template-columns: 792fr 648fr;
    /* ⚠⚠ THE TOUR IS NOT THE WHOLE WINDOW — the page it lives on draws its own `.welcomeHeader` above the
       swiper, 80px tall, and that header belongs to the welcome and registration screens, not to us.
       Measured 2026-09-25 in a real browser: with a plain `100vh` the slide overflowed by exactly that
       header and the primary button fell below the fold on a 900px screen — the one control the whole
       screen exists to reach. So the slide fits the space it is ACTUALLY GIVEN.
       ⚠ The alternative — hiding that header while the tour is shown — is a change to the REGISTRATION
       page and is the owner's to make, not a detail to settle here. */
    --obd-host-header: 80px;
    /* ⚠⚠⚠ A FIXED HEIGHT, NOT A MINIMUM — and this is the difference between the text scrolling and the
       BUTTON DISAPPEARING. With `min-height` the pane simply grew to fit its longest text: measured in a
       real browser on 2026-09-25, screen 2 came out 949px tall in a 900px window and «Далее» sat 1px below
       the fold. `.obdScroll` can only scroll if something above it is bounded, so the slide is bounded and
       the scroll area takes what is left. ⚠ On the phone this is undone deliberately (see the media query):
       there the page scrolls and the button is fixed over it, which is his instruction. */
    height: calc(100vh - var(--obd-host-header));
    height: calc(100dvh - var(--obd-host-header));
    min-height: 0;
    background: #FFFFFF;
    font-family: var(--obd-body);
    color: var(--obd-ink);
    font-variant-numeric: lining-nums tabular-nums;
}
/* ⚠⚠⚠ THE HEIGHT NEEDS A STRONGER SELECTOR THAN `.obd`, AND THIS IS NOT A PREFERENCE. The page runs the
   swiper in AUTOHEIGHT mode, whose own rule `.swiper-autoheight .swiper-slide { height: auto }` has two
   class names to our one and therefore wins — measured in a real browser, not reasoned about: the slides
   came out 685/869/733/882/629px tall instead of one bounded height, and «Далее» sat below the fold on
   screens 2 and 4. Three class names settle it whatever order the sheets load in.
   ⚠ It is scoped to the desktop only; the phone undoes it in the media query below. */
.swiper .swiper-slide.obd {
    height: calc(100vh - var(--obd-host-header));
    height: calc(100dvh - var(--obd-host-header));
}
.obd * { box-sizing: border-box; }
.obd h1, .obd p { margin: 0; }
/* ⚠ Headings AND every figure are Onest — his rule, and the reason the figures are wrapped in their own
   span rather than left to inherit the body face. */
.obdNum { font-family: var(--obd-head); font-variant-numeric: lining-nums tabular-nums; }

/* ── the dark scene ─────────────────────────────────────────────────────────────────────────────── */
.obdScene {
    position: relative; background: var(--obd-navy);
    display: flex; flex-direction: column; padding: 40px;
}
.obdSceneTop { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
/* ⚠⚠ ON THE DESKTOP THE DARK BAR CARRIES ONLY THE LOGO AND «Пропустить». The back button and the step bar
   are drawn there too — the phone needs them in that bar — and are `display: none` here. That is chosen
   over `visibility` or an offscreen trick on purpose: `display: none` also removes them from the screen
   reader's tree, so the step count is never announced twice. */
.obdSceneTop .obdBack, .obdSceneTop .obdBar { display: none; }
/* ⚠ The real WHITE logo, inline SVG from the old cabinet's dark sidebar. The designer left a 168×44 slot;
   the mark is 158×47, so it is bounded by height and keeps its own ratio. */
.obdLogo { display: block; height: 44px; width: auto; flex-shrink: 0; }
.obdLogo svg { display: block; height: 44px; width: auto; }
.obdArt { flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.obdArt > div { width: 100%; max-width: 712px; }
.obdArt img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; }

.obdSkip {
    flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
    font: 600 16px/20px var(--obd-body); color: var(--obd-slate-300);
    text-decoration: none; white-space: nowrap;
}
.obdSkip:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.obdSkip:focus-visible { outline: 2px solid var(--obd-blue-300); outline-offset: 2px; border-radius: 6px; }

/* ── the white pane ─────────────────────────────────────────────────────────────────────────────── */
.obdPane { display: flex; flex-direction: column; min-height: 0; padding: 48px 72px 0; }
.obdSteps { display: flex; align-items: center; gap: 16px; height: 44px; }
.obdBar { display: flex; align-items: center; gap: 12px; flex-grow: 1; }
.obdBar > div { display: flex; gap: 6px; flex-grow: 1; max-width: 220px; }
.obdBar span.seg { display: block; flex: 1 1 0; height: 4px; border-radius: 2px; background: var(--obd-blue-100); }
.obdBar span.seg.is-done { background: var(--obd-blue); }
.obdCount { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--obd-ink-2); white-space: nowrap; }

/* ⚠⚠ THE TEXT SCROLLS, THE FURNITURE DOES NOT — his instruction, on the phone especially. The scrollbar is
   hidden rather than styled, as in the design. */
.obdScroll { flex-grow: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 32px 0; }
.obdScroll::-webkit-scrollbar { width: 0; }
.obdScrollInner { margin: auto 0; }
.obdTitle { font: 700 40px/48px var(--obd-head); letter-spacing: -0.015em; color: var(--obd-ink); }
.obdBody { margin-top: 24px; max-width: 504px; }
.obdBody p { font: 500 17px/28px var(--obd-body); color: var(--obd-ink-2); margin-top: 14px; }
.obdBody p:first-child { font: 500 19px/29px var(--obd-body); color: var(--obd-ink); margin-top: 0; }
/* The bold paragraph the `[b]` token marks. ⚠ It is a WEIGHT, not a colour: the design leaves it in its
   paragraph's own colour and only makes it heavy. */
.obdBody p.is-bold { font-weight: 700; }

.obdFoot { display: flex; align-items: center; gap: 12px; padding: 20px 0 48px; border-top: 1px solid var(--obd-divider); }
.obdBack {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: #FFFFFF; border: 1.5px solid var(--obd-slate-400); color: var(--obd-ink);
}
.obdNext {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 56px; padding: 0 32px; border: 1.5px solid transparent; border-radius: 14px;
    font: 700 17px/20px var(--obd-body); color: #FFFFFF; background: var(--obd-blue);
    text-decoration: none; white-space: nowrap; cursor: pointer; margin-inline-start: auto;
    box-shadow: 0 1px 2px rgba(9,21,42,0.08), 0 4px 12px rgba(38,109,240,0.16);
    transition: background-color .16s cubic-bezier(.2,0,0,1), box-shadow .16s cubic-bezier(.2,0,0,1), transform .16s cubic-bezier(.2,0,0,1);
}
.obdNext:hover { background: var(--obd-blue-hover); color: #FFFFFF; }
.obdNext:active { background: var(--obd-blue-pressed); box-shadow: none; transform: translateY(1px); }
.obdNext:focus-visible, .obdBack:focus-visible { outline: 2px solid var(--obd-blue-300); outline-offset: 2px; }
.obdBack svg, .obdNext svg { flex-shrink: 0; }

/* ── the phone: the scene on top, a white card riding over it, the button always in view ─────────── */
@media (max-width: 900px) {
    /* ⚠ The phone is the opposite case: the page scrolls, so the slide must be free to be as tall as its
       text, and the button is fixed over it rather than sitting after it. */
    /* ⚠⚠⚠ THE BUTTON IS ABSOLUTE, NOT FIXED, AND THE SLIDE IS STILL BOUNDED.
       `position: fixed` DOES NOT WORK HERE and the browser proved it: the swiper's wrapper carries a
       `transform`, which makes it the containing block for anything fixed inside it, so the button was laid
       out at y=1080 on an 812px screen — off the bottom, on a page that could not scroll either, because
       the swiper clips its overflow. Measured, not reasoned about.
       So the slide keeps a bounded height on the phone too, the PANE is what scrolls, and the footer is
       absolute against the slide — which no ancestor transform can disturb. The text then genuinely passes
       UNDER the button, which is what he asked for, and the designer's gradient still fades it out. */
    /* ⚠⚠ THE HOST HEADER IS NOT THE SAME HEIGHT ON BOTH — measured in a real browser on 2026-09-25:
       80px at 1440 and 83px at 375. With the desktop figure the phone slide ran 3px past the fold. Rounded
       UP to 84 so the error falls on the side of a hairline gap rather than a clipped button.
       ⚠⚠ THIS IS A COUPLING TO A COMPONENT THIS FILE DOES NOT OWN. If `.welcomeHeader` ever changes height
       these two numbers are wrong and nothing will fail — the board cannot see CSS. Named here so the next
       reader knows to re-measure rather than discovering it in a screenshot. */
    .obd { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); position: relative;
           --obd-host-header: 84px; }
    /* ⚠⚠⚠ THE PANE MUST NOT BE THE SCROLLER, AND THIS COST A SCREENSHOT TO SEE.
       `.obdFoot` lives inside `.obdPane`. Making the PANE scroll put the button inside the scrolling box —
       and `position: absolute` does NOT escape a scrolling ancestor, so the button drifted up through the
       text as the reader scrolled and ended up sitting in the middle of a paragraph. The scroller therefore
       goes one level deeper: `.obdScroll` scrolls, `.obdPane` does not, and the footer is absolute against
       the pane, which no longer moves. The text then passes UNDER the button, which is his instruction. */
    .obdPane { position: relative; overflow: visible; display: flex; flex-direction: column; min-height: 0; }
    .obdScene { padding: 0 0 28px; }
    .obdSceneTop { display: flex; align-items: center; gap: 12px; padding: 12px 20px; height: 44px; }
    /* ⚠ On the phone the order is «Назад · шаги · Пропустить» — the back control moves INTO the dark bar,
       so the white pane's own footer holds only the primary button. */
    .obdSceneTop .obdBack, .obdSceneTop .obdBar { display: flex; }
    .obdSceneTop .obdBack { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: #FFFFFF; }
    .obdSceneTop .obdCount { color: var(--obd-slate-300); }
    .obdSceneTop .obdBar span.seg { background: rgba(255,255,255,0.18); }
    .obdSceneTop .obdBar span.seg.is-done { background: var(--obd-blue-300); }
    .obdArt { display: block; margin-top: 4px; }
    .obdArt > div { max-width: none; }
    /* ⚠⚠ NO LOGO IN THE PHONE BAR — his drawing has only «Назад · шаги · Пропустить» there, and keeping the
       mark squeezed the step segments to nothing: the bar grows to fill what is left, and with the logo in
       the row there was nothing left. Caught by looking at the rendered phone beside his own file. */
    .obdLogo { display: none; }

    .obdPane {
        position: relative; margin-top: -28px; background: #FFFFFF;
        border-radius: 28px 28px 0 0; padding: 28px 20px 104px; min-height: 0;
    }
    .obdSteps { display: none; }           /* the steps live in the dark bar on the phone */
    /* ⚠ The bottom padding is what lets the LAST line clear the button instead of dying behind it. */
    .obdScroll { flex-grow: 1; min-height: 0; overflow-y: auto; display: block; padding: 0 0 88px; }
    .obdScrollInner { margin: 0; }
    .obdTitle { font: 700 26px/32px var(--obd-head); letter-spacing: -0.01em; }
    .obdBody { margin-top: 16px; max-width: none; }
    .obdBody p { font: 500 16px/25px var(--obd-body); }
    .obdBody p:first-child { font: 500 17px/26px var(--obd-body); }
    .obdBody p.is-bold { font-weight: 700; }

    /* ⚠⚠⚠ THE BUTTON STAYS IN VIEW WHILE THE TEXT SCROLLS UNDER IT — his instruction, and the reason the
       card carries 104px of bottom padding: the last line must be able to clear the button rather than
       hide behind it. The gradient is the designer's, so the text fades out rather than being cut. */
    .obdFoot {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
        padding: 16px 20px 20px; border-top: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 22%);
    }
    .obdFoot .obdBack { display: none; }   /* it is in the dark bar above */
    .obdNext { width: 100%; height: 52px; font-size: 16px; padding: 0 20px; margin-inline-start: 0; }
}

/* The smallest phone the designer drew, 320: one step smaller and tighter gutters. */
@media (max-width: 360px) {
    .obdPane { padding: 24px 16px 100px; }
    .obdTitle { font: 700 24px/30px var(--obd-head); }
    .obdBody p { font: 500 15px/24px var(--obd-body); }
    .obdBody p:first-child { font: 500 16px/24px var(--obd-body); }
    .obdFoot { padding: 14px 16px 16px; }
}