/* Hallmark · shape: Route, shared shell of the guest pages (landing, verify, legal, open lesson, job page) · genre: editorial · theme: custom (brand Kalinka, system B «Маршрут» chosen by the owner 07.11.2026, sizes as in design-v2/README.md:32) · vibe: "white paper, navy ink, one red line, timetable calm"
 * paper: #FFFFFF · accent: #9C021E · display: Inter 600 · body: Inter 400 and 500 · nav: logo, course, sign in, start, menu on the phone · footer: navy slab under a canvas band, links, company · signature: the red line and its stations (landing and job page)
 * axes: light/grotesk-sans/cool · posture: restrained · surface: absolute · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: V, the shell is quiet on purpose, the pages carry the brand canvas and the line */
/* Hallmark · waive 7b · --color-paper is #FFFFFF, stamp says surface: absolute · white is one of the six Kalinka brand colours, the paper of the player and of the landing */
/* Hallmark · waive 49b · the footer e-mail renders on one line at 375 (shots r6-f3/375/guest-verify.png) and carries white-space: nowrap · its 44px tap box is taller than one text line and reads as a wrap to the gate */
/* Open Reflex 1 (Inter as the display face) by the owner's decision of 03.11.2026: one family for heads and text */
/* Общая оболочка гостевых страниц (волна Р6, замысел waves/r6-plan.md 4.1, 4.6): токены B, база, кнопки, поля,
 * гостевая шапка .gbar и подвал .foot. Цвета - шесть цветов руководства Kalinka (public/css/brand.css) и смеси синего
 * с белым hex-значениями плеера (player/src/app.css:16-38, контраст там замерен): без color-mix, чтобы сторож мерил
 * контраст по вычисленным rgb. Шрифт Inter из Google Fonts (ссылка в голове страницы), запасной Arial руководства. */

:root {
  --brand-navy: #172e4d;
  --brand-red: #9c021e;
  --brand-apricot: #ffbc6b;
  --brand-black: #000000;
  --brand-white: #ffffff;

  --color-paper: #ffffff;
  --color-paper-2: #f3f5f6; /* синий 5% на белом */
  --color-ink: #172e4d;
  --color-ink-2: #334762; /* синий 88% на белом, 9.47:1 */
  --color-muted: #51627a; /* синий 75% на белом, 6.22:1 */
  --color-rule: #e3e6ea; /* синий 12% на белом */
  --color-rule-strong: #c7cdd4; /* синий 24% на белом */
  --color-accent: #9c021e;
  --color-accent-hover: #7d0218; /* красный 80% с чёрным */
  --color-accent-ink: #ffffff;
  --color-highlight: #ffbc6b;
  --color-highlight-soft: #ffebd3; /* абрикосовый 30% на белом */
  --color-good: #15803d;
  --color-good-soft: #dcfce7;
  --color-on-ink: #ffffff;
  --color-on-ink-2: #e3e6ea;
  --shadow-card: 0 1px 2px rgb(23 46 77 / 0.05), 0 8px 24px -12px rgb(23 46 77 / 0.18);

  --font-body: "Inter", Arial, sans-serif;

  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px; --space-5xl: 208px;

  --text-body: 1.125rem;
  --text-label: 1rem;
  --text-nav: 1.0625rem;
  --text-btn: 1.0625rem;
  --text-h1: clamp(2.25rem, 4vw, 3.5rem);
  --text-h2: clamp(1.75rem, 2.8vw, 2.5rem);
  --text-h3: clamp(1.1875rem, 1.67vw, 1.5rem);

  --radius-control: 14px;
  --radius-card: 14px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-slow: 900ms;
  --btn-h: 52px;

  --cap: 1440px;
  --gutter-l: var(--space-2xl);
  --gutter-r: var(--space-2xl);
  --z-line: 2; --z-stop: 3; --z-bar: 5;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { background: var(--color-paper); color: var(--color-ink); scroll-behavior: smooth; scroll-padding-top: var(--space-xl); scrollbar-color: var(--color-rule-strong) var(--color-paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--color-paper); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; caret-color: var(--color-accent); }
::selection { background: var(--color-highlight-soft); color: var(--color-ink); }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: var(--space-2xs); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
ol, ul { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { text-wrap: pretty; }
b, strong { font-weight: 600; }
[hidden] { display: none !important; }
.vh, .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[lang="en"] .ru-only { display: none; }
html:not([lang="en"]) .en-only { display: none; }
.nb { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums lining-nums; }

.wrap { width: 100%; max-width: var(--cap); margin-inline: auto; padding-inline: var(--gutter-l) var(--gutter-r); }

.skip { position: absolute; inset-inline-start: var(--space-md); inset-block-start: -200px; z-index: 50; display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-on-ink); text-decoration: none; }
.skip:focus-visible { inset-block-start: var(--space-md); }

/* Кнопки: те же, что в плеере (радиус 14, красное действие), высота 52. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); padding-inline: var(--space-lg); border: 1.5px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--color-ink); font-size: var(--text-btn); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); }
.btn--ghost { border-color: var(--color-rule-strong); }
.btn--ghost:hover { border-color: var(--color-muted); }
.btn--quiet { background: var(--color-paper-2); }
.btn--quiet:hover { background: var(--color-rule); }
.btn--full { width: 100%; }

.link { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em; transition: color var(--dur-short) var(--ease-out); }
.link:hover { color: var(--color-accent); }
.link--tap { display: inline-flex; align-items: center; min-height: 44px; }

/* Поля ввода (форма проверки сертификата). */
.field { display: grid; gap: var(--space-xs); }
.field label { font-size: var(--text-label); font-weight: 500; }
.field__hint { font-size: var(--text-label); color: var(--color-muted); }
.input { width: 100%; min-width: 0; height: var(--btn-h); padding-inline: var(--space-md); border: 1.5px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); font-size: var(--text-nav); }
.input::placeholder { color: var(--color-muted); }
.input:focus-visible { outline-offset: 0; }

/* Переключатель языка: кнопки i18n.js (button[data-lang]) или ссылки на свои адреса (вакансия). */
.lang-switcher { display: flex; gap: var(--space-2xs); }
.lang-switcher button, .lang-switcher a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; background: none; font-size: var(--text-nav); font-weight: 500; text-decoration: none; color: var(--color-muted); cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.lang-switcher button:hover, .lang-switcher a:hover, .lang-switcher .active, .lang-switcher [aria-current], .lang-switcher [aria-pressed="true"] { color: var(--color-ink); }

/* Меню телефона на <details>. */
.menu { position: relative; display: none; }
.menu > summary { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); font-size: var(--text-nav); font-weight: 500; list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel { position: absolute; inset-block-start: 100%; inset-inline-end: 0; z-index: var(--z-bar); display: grid; min-width: 15rem; padding: var(--space-xs); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); }
.menu__panel a { display: flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm); font-size: var(--text-nav); text-decoration: none; }
.menu__panel .lang-switcher { padding-inline: var(--space-xs); }

/* ---- гостевая шапка ---- */
.gbar { border-block-end: 1px solid var(--color-rule); background: var(--color-paper); }
.gbar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--space-3xl); }
.gbar__logo { display: block; flex: none; border-radius: var(--space-2xs); }
.gbar__logo img { width: auto; height: 64px; }
.gbar__nav { display: flex; flex: 1; gap: var(--space-lg); margin-inline-start: var(--space-xl); }
.gbar__nav a, .gbar__login { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-nav); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.gbar__nav a:hover, .gbar__login:hover { color: var(--color-accent); }
.gbar__nav a[aria-current] { color: var(--color-accent); }
.gbar__end { display: flex; align-items: center; gap: var(--space-md); }

/* ---- подвал ---- */
.foot { background: var(--color-ink); color: var(--color-on-ink); }
.foot__band { display: block; width: 100%; height: var(--space-5xl); overflow: hidden; }
.foot__band img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 62%; }
.foot__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.foot__logo { display: block; width: auto; height: 96px; }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); }
.foot__links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: var(--text-nav); text-underline-offset: 0.24em; }
a.email-link { white-space: nowrap; }
.foot__line { margin-block-start: var(--space-sm); font-size: var(--text-label); }
.foot__copy span + span, .foot__copy .nb { white-space: nowrap; }
.foot__company, .foot__copy { margin-block-start: var(--space-xs); font-size: var(--text-label); color: var(--color-on-ink-2); }
.foot a:focus-visible { outline-color: var(--color-on-ink); }

@media (max-width: 75rem) {
  :root { --gutter-l: var(--space-xl); --gutter-r: var(--space-xl); }
}
@media (max-width: 48rem) {
  :root { --text-body: 1.0625rem; --gutter-l: var(--space-md); --gutter-r: var(--space-md); }
  .gbar__in { min-height: 72px; gap: var(--space-sm); }
  .gbar__logo img { height: 56px; }
  .gbar__nav, .gbar__login, .gbar__end > .lang-switcher { display: none; }
  .menu { display: block; }
  .foot__band { height: var(--space-3xl); }
  .foot__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .foot__logo { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}