/*
 * Galerié Morph — клиентские страницы (главная, анкета, поиск по треку, служебные экраны).
 * Токены и компоненты из дизайн-системы https://claude.ai/artifact/WgZPxg6MXdba7JcHZ6FNXk:
 * «Монохром» (акцент = чёрный/белый, без лайма админки), мягкие компоненты, метка внутри поля.
 * Тема — по настройке устройства клиента. Размеры: телефон 375 и компьютер 1440.
 */

/* ---------- токены ---------- */
:root {
  color-scheme: light dark;
  --bg: #f4f4f2; --surface: #ffffff; --surface-2: #ebebe8; --line: #dcdcd8; --line-strong: #84847f;
  --ink: #0b0b0b; --ink-muted: #5c5c58; --ink-faint: #8a8a86;
  --accent: #0b0b0b; --on-accent: #ffffff; --accent-ink: #0b0b0b; --accent-soft: #e6e6e2; --focus: #0b0b0b;
  --st-neutral-bg: #e8e8e4; --st-neutral-ink: #474743;
  --st-wait-bg: #fdefc4; --st-wait-ink: #6e4a00;
  --st-transit-bg: #dce8ff; --st-transit-ink: #1c4db3;
  --st-done-bg: #d6f0df; --st-done-ink: #17663a;
  --st-problem-bg: #ffe0db; --st-problem-ink: #b0241b;
  /* тень всплывающих — из нескольких мягких слоёв с волосяной каймой, а не одно размытое пятно */
  --shadow-pop: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 2px rgba(0,0,0,0.04), 0 8px 16px -4px rgba(0,0,0,0.10), 0 24px 32px -8px rgba(0,0,0,0.08);
  /* кривые движения — одни на весь сайт: появление и отклик / перемещение по экрану */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  --control-h: 48px; --control-h-sm: 40px;
  --font-display: "Fira Sans Extra Condensed", "Arial Narrow", sans-serif;
  --font-text: "Golos Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a; --surface: #141414; --surface-2: #1f1f1f; --line: #2a2a2a; --line-strong: #727270;
    --ink: #f2f2ef; --ink-muted: #a6a6a1; --ink-faint: #6e6e6a;
    --accent: #f2f2ef; --on-accent: #0a0a0a; --accent-ink: #f2f2ef; --accent-soft: #262626; --focus: #f2f2ef;
    --st-neutral-bg: #262626; --st-neutral-ink: #c7c7c2;
    --st-wait-bg: #382c0b; --st-wait-ink: #f2c14e;
    --st-transit-bg: #132543; --st-transit-ink: #8fb5ff;
    --st-done-bg: #0f2e1d; --st-done-ink: #6fd39a;
    --st-problem-bg: #3d1411; --st-problem-ink: #ff8d80;
    --shadow-pop: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 16px -4px rgba(0,0,0,0.5), 0 24px 32px -8px rgba(0,0,0,0.5);
  }
}

/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.gm-i { flex: none; display: block; }
.gm-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gm-muted { color: var(--ink-muted); }
.gm-display { font-family: var(--font-display); font-weight: 700; letter-spacing: .005em; }
.gm-h2 { font-size: 18px; line-height: 24px; font-weight: 600; }
.gm-kicker { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }

/* ---------- шапка ---------- */
.gm-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 16px; }
.gm-top .logo { height: 18px; width: auto; }
.gm-top-logo { display: block; }
/* для тех, кто ходит по странице клавиатурой: первая остановка Tab — сразу к содержимому */
.gm-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600; text-decoration: none; }
.gm-skip:focus { top: 8px; }
.gm-main:focus { outline: none; }

/* ---------- подвал ---------- */
.gm-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 8px 16px 24px; font-size: 13px; line-height: 18px; }
.gm-foot a { color: var(--ink-muted); text-decoration: none; }
.gm-foot a:focus-visible { color: var(--ink); text-decoration: underline; }
.logo--dark { display: none; }
@media (prefers-color-scheme: dark) { .logo--light { display: none; } .logo--dark { display: block; } }
.gm-nav { display: none; gap: 28px; font-size: 15px; line-height: 20px; font-weight: 500; }
.gm-nav a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.gm-nav a.on { text-decoration: underline; }

/* ---------- каркас страниц ---------- */
.gm-main { flex: 1; }
.gm-wrap { display: grid; gap: 12px; padding: 8px 12px 24px; align-content: start; }
.gm-wrap--track { gap: 20px; padding-top: 12px; }
.gm-head { display: grid; gap: 6px; padding: 4px 4px 0; }
.gm-head h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: .005em; font-size: 24px; line-height: 30px; }
.gm-head p { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.gm-aside { display: none; }
.gm-form-card { display: grid; gap: 24px; padding: 20px; }
.gm-submit { display: grid; gap: 14px; }
.gm-search { display: grid; gap: 10px; }

/* ---------- кнопка ---------- */
.gm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-h); padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-text); font-size: 15px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none; background: none; color: var(--ink);
}
.gm-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gm-btn--primary { background: var(--accent); color: var(--on-accent); }
.gm-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.gm-btn--sm { height: var(--control-h-sm); padding: 0 14px; font-size: 13px; }
.gm-btn--block { display: flex; width: 100%; }
/* недоступная кнопка серая; aria-disabled оставляет её в обходе клавишей Tab */
.gm-btn[disabled], .gm-btn[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }
.gm-btn.is-loading { opacity: 1; cursor: progress; }
.gm-btn.is-loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gm-spin .7s linear infinite; }
@keyframes gm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gm-btn.is-loading::before { animation-duration: 2s; } }

/* ---------- бейдж статуса ---------- */
.gm-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 9px;
  border-radius: var(--radius-pill); background: var(--st-neutral-bg); color: var(--st-neutral-ink);
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.gm-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.gm-badge--wait { background: var(--st-wait-bg); color: var(--st-wait-ink); }
.gm-badge--transit { background: var(--st-transit-bg); color: var(--st-transit-ink); }
.gm-badge--done { background: var(--st-done-bg); color: var(--st-done-ink); }
.gm-badge--problem { background: var(--st-problem-bg); color: var(--st-problem-ink); }

/* ---------- прогресс: мягкий штрихкод ---------- */
.gm-seg { display: flex; gap: 4px; height: 8px; }
.gm-seg span { flex: 1; border-radius: 4px; background: var(--surface-2); }
.gm-seg span.on { background: var(--ink); }
.gm-seg span.now { background: repeating-linear-gradient(90deg, var(--accent) 0 4px, var(--surface-2) 4px 7px); box-shadow: inset 0 0 0 1px var(--ink); }
.gm-seg span.bad { background: var(--st-problem-ink); }
.gm-seg span.w1 { flex: .45; } .gm-seg span.w2 { flex: .75; } .gm-seg span.w3 { flex: 1.5; }
.gm-seg span.opt { flex: .45; background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.gm-seg span.opt.on { background: var(--ink); box-shadow: none; }

/* ---------- история: линия ---------- */
.gm-rail { list-style: none; margin: 0; padding: 0; }
.gm-rail li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding-bottom: 18px; }
.gm-rail li:last-child { padding-bottom: 0; }
.gm-rail li::before { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.gm-rail li:last-child::before { display: none; }
.gm-rail li.done::before { background: var(--ink); }
.gm-rail .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--ink); }
.gm-rail li.done .dot { background: var(--ink); color: var(--bg); box-shadow: none; }
.gm-rail li.now .dot { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.gm-rail .t { font-size: 15px; line-height: 22px; font-weight: 500; }
.gm-rail li.todo .t { color: var(--ink-muted); font-weight: 400; }
.gm-rail li.now .t { font-weight: 600; }
.gm-rail .s { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* ---------- поле: метка внутри ---------- */
.gm-field { display: grid; gap: 6px; min-width: 0; align-content: start; position: relative; }
.gm-input {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  height: 58px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font-size: 16px; color: var(--ink); min-width: 0; cursor: text;
}
.gm-input--icon { padding-right: 44px; }
.gm-input .in-label { font-size: 12px; line-height: 14px; color: var(--ink-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.gm-input input { all: unset; display: block; width: 100%; min-width: 0; box-sizing: border-box; font: inherit; line-height: 20px; color: var(--ink); text-overflow: ellipsis; }
.gm-input input.gm-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gm-input input::placeholder { color: var(--ink-faint); opacity: 1; }
.gm-input > .gm-i { position: absolute; right: 16px; top: 50%; margin-top: -9px; color: var(--ink-muted); pointer-events: none; }
/* пустое поле без фокуса: метка крупная, само поле растянуто под неё и невидимо */
.gm-input:has(input:placeholder-shown:not(:focus)) .in-label { font-size: 16px; line-height: 20px; font-weight: 400; }
.gm-input:has(input:placeholder-shown:not(:focus)) input { position: absolute; inset: 0; height: 100%; opacity: 0; }
.gm-input:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.gm-field.is-error .gm-input { border-color: var(--st-problem-ink); box-shadow: inset 0 0 0 1px var(--st-problem-ink); }
.gm-field.is-disabled .gm-input, .is-sending .gm-input { background: var(--surface-2); border-color: var(--line); color: var(--ink-muted); }
.is-sending .gm-input input { color: var(--ink-muted); }
.gm-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); display: flex; gap: 6px; align-items: flex-start; }
.gm-hint[hidden] { display: none; }
.gm-hint--text { display: block; margin: 0; }
.gm-hint .gm-i { margin-top: 1px; }
.gm-hint a { color: inherit; }
.gm-field.is-error .gm-hint, .gm-check.is-error + .gm-hint { color: var(--st-problem-ink); }
/* предупреждение «возможно, опечатка»: отправке не мешает */
.gm-field.is-warn .gm-input { border-color: var(--st-wait-ink); box-shadow: inset 0 0 0 1px var(--st-wait-ink); }
.gm-field.is-warn .gm-hint { color: var(--st-wait-ink); }

/* подсказки адреса */
.gm-suggest {
  position: absolute; left: 0; right: 0; top: 62px; z-index: 20; max-height: 300px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop);
  padding: 4px 0; margin: 0; list-style: none;
}
.gm-suggest[hidden] { display: none; }
.gm-suggest li { padding: 10px 14px; font-size: 15px; line-height: 20px; cursor: pointer; }
.gm-suggest li small { display: block; color: var(--ink-muted); font-size: 13px; line-height: 18px; }
.gm-suggest li.on { background: var(--surface-2); }

/* чекбокс */
.gm-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--ink); cursor: pointer; }
.gm-check input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.gm-check .box { width: 20px; height: 20px; flex: none; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface); color: transparent; }
.gm-check input:checked + .box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.gm-check input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 2px; }
.gm-check.is-error .box { border-color: var(--st-problem-ink); }

/* ---------- карточки и блоки ---------- */
.gm-card { background: var(--surface); border-radius: var(--radius-lg); padding: 20px; }
.gm-card--soft { background: var(--accent-soft); }
.gm-kv { display: grid; gap: 0; margin: 0; }
.gm-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 15px; line-height: 20px; }
.gm-kv dt { color: var(--ink-muted); }
.gm-kv dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
.gm-kv dd.txt { font-family: var(--font-text); font-size: 15px; font-weight: 500; }

.gm-note { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--st-neutral-bg); color: var(--st-neutral-ink); }
.gm-note .t { font-weight: 600; color: var(--ink); font-size: 15px; line-height: 20px; }
.gm-note .s { font-size: 14px; line-height: 20px; color: var(--ink); }
.gm-note--problem { background: var(--st-problem-bg); color: var(--st-problem-ink); }

/* текстовые страницы: политика, условия */
.gm-prose { display: grid; gap: 24px; padding: 20px; }
.gm-prose section { display: grid; gap: 8px; }
.gm-prose p, .gm-prose li { font-size: 15px; line-height: 22px; }
.gm-prose ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.gm-prose .gm-muted { font-size: 13px; line-height: 18px; }

/* итоговое состояние: спасибо / ссылка истекла / не нашли / 404 */
.gm-state { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 24px; }
.gm-state .mk { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.gm-state .mk.problem { background: var(--st-problem-bg); color: var(--st-problem-ink); }
.gm-state .mk.wait { background: var(--st-wait-bg); color: var(--st-wait-ink); }
.gm-state .mk.plain { background: var(--surface-2); color: var(--ink); }
.gm-state h1, .gm-state h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: .005em; font-size: 30px; line-height: 34px; }
.gm-state h1.big { font-size: 44px; line-height: 48px; }
.gm-state p { color: var(--ink-muted); font-size: 15px; line-height: 22px; max-width: 320px; }
.gm-state p.sm { font-size: 13px; line-height: 18px; }

.gm-fset { display: grid; gap: 14px; }
.gm-row2, .gm-row3 { display: grid; gap: 14px; }
.gm-row-pass { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.gm-row-pass > :last-child { grid-column: 1 / -1; }

/* ---------- главная ---------- */
.gm-hero { display: grid; gap: 16px; padding: 20px 4px 8px; }
.gm-hero h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: .005em; font-size: 34px; line-height: 38px; }
.gm-hero p { font-size: 16px; line-height: 24px; color: var(--ink-muted); max-width: 560px; }
.gm-hero-btns { display: grid; gap: 8px; }

/* ---------- компьютер ---------- */
@media (min-width: 900px) {
  .gm-top { height: 72px; padding: 0 80px; max-width: 1440px; width: 100%; margin: 0 auto; }
  .gm-top .logo { height: 24px; }
  .gm-nav { display: flex; }
  .gm-foot { padding: 0 80px 32px; max-width: 1440px; width: 100%; margin: 0 auto; }
  .gm-prose { padding: 32px; }

  .gm-wrap { width: min(840px, 100% - 160px); margin: 0 auto; padding: 48px 0 80px; gap: 16px; }
  .gm-wrap--track { padding: 64px 0 96px; gap: 28px; }
  .gm-wrap--track .gm-head h1 { font-size: 40px; line-height: 48px; }
  .gm-wrap--track .gm-head { gap: 16px; padding: 0; }
  .gm-wrap--track .gm-head p { font-size: 16px; line-height: 24px; }
  .gm-search { grid-template-columns: 1fr 200px; gap: 12px; align-items: start; }
  .gm-search .gm-btn { height: 58px; }
  .gm-wrap--state { width: min(480px, 100% - 160px); padding-top: 96px; }
  .gm-state { padding: 32px; }

  .gm-form-card { gap: 28px; padding: 32px; }
  .gm-row2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gm-row3 { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .gm-row-pass { grid-template-columns: 1fr 1.4fr 1.4fr; }
  .gm-row-pass > :last-child { grid-column: auto; }
  .gm-submit .gm-btn { justify-self: start; width: auto; min-width: 200px; }

  .gm-wrap--home { width: min(1280px, 100% - 160px); padding: 64px 0 96px; gap: 0; }
  .gm-hero { gap: 20px; padding: 0 0 16px; }
  .gm-hero h1 { font-size: 52px; line-height: 54px; }
  .gm-hero-btns { display: flex; gap: 12px; }
}
/* анкета: форма и справа «Зачем эти данные» */
@media (min-width: 1100px) {
  .gm-wrap--form { width: min(1280px, 100% - 160px); grid-template-columns: minmax(0, 840fr) minmax(300px, 392fr); gap: 48px; align-items: start; }
  .gm-form-col { display: grid; gap: 16px; min-width: 0; }
  .gm-aside { display: grid; gap: 14px; align-content: start; padding: 24px; position: sticky; top: 24px; }
  .gm-aside p { font-size: 15px; line-height: 22px; }
  .gm-purpose { display: none; }
}
@media (max-width: 1099.98px) { .gm-form-col { display: grid; gap: 12px; min-width: 0; } }
@media (min-width: 900px) and (max-width: 1099.98px) { .gm-form-col { gap: 16px; } }

/* ---------- отклик и доступность (проверка по скиллу apple-design, 01.10) ---------- */
/* Отклик — на само нажатие, а не на отпускание: кнопка чуть сжимается сразу */
.gm-btn { transition: transform .12s var(--ease-out), background-color .15s ease, opacity .15s ease; }
.gm-btn:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(.97); }
.gm-check .box { transition: background-color .1s ease-out, border-color .1s ease-out; }
.gm-check:active .box { transform: scale(.92); }
.gm-suggest li:active { background: var(--line); }
/* наведение — только там, где есть мышь: на телефоне оно «залипает» после касания */
@media (hover: hover) and (pointer: fine) {
  .gm-foot a:hover { color: var(--ink); text-decoration: underline; }
  .gm-nav a:hover { text-decoration: underline; }
  .gm-suggest li:hover { background: var(--surface-2); }
  .gm-btn--primary:hover:not([disabled]):not([aria-disabled="true"]) { opacity: .86; }
  .gm-btn--secondary:hover { background: var(--surface-2); }
}
/* мелкие ссылки подвала — с полем для пальца */
.gm-foot a { padding: 12px 0; margin: -12px 0; }
/* «уменьшить движение»: без сжатий и плавных переходов; вращение индикатора отправки остаётся — это статус */
@media (prefers-reduced-motion: reduce) {
  .gm-btn, .gm-check .box { transition: none; }
  .gm-btn:active, .gm-check:active .box { transform: none !important; }
}
/* «повысить контраст»: карточки и плашки без рамок получают рамку */
@media (prefers-contrast: more) {
  .gm-card, .gm-note, .gm-suggest { outline: 1px solid var(--line-strong); }
  .gm-muted, .gm-head p, .gm-hint, .gm-foot a { color: var(--ink); }
}

/* ---------- доводка по скиллам emil-design-eng, mobile-native, impeccable и образцам Vercel / Uber / Nike (01.10) ---------- */

/* то, что рисует браузер, тоже в палитре: выделение, курсор ввода, полосы прокрутки */
html { -webkit-tap-highlight-color: transparent; scrollbar-color: var(--line-strong) transparent; accent-color: var(--ink); caret-color: var(--ink); }
::selection { background: var(--ink); color: var(--bg); }
/* вырез экрана и «чёлка»: содержимое не уезжает под них (нужен viewport-fit=cover в шаблоне) */
body { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
/* элементы управления: без задержки касания и без выделения подписи при долгом нажатии; обычный текст выделяется как раньше */
.gm-btn, .gm-check, .gm-suggest li, .gm-nav a, .gm-foot a, .gm-top-logo { touch-action: manipulation; }
.gm-btn, .gm-suggest li, .gm-top-logo { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* заголовки не оставляют одно слово на строке, абзацы — без «висячих» хвостов; длинный текст — не шире 68 знаков */
h1, h2, h3, .gm-display { text-wrap: balance; }
p, li { text-wrap: pretty; }
.gm-prose section { max-width: 68ch; }

/* поле в фокусе: чёткая рамка и мягкий ореол вокруг (как у текущего шага в ленте статусов) */
.gm-input { transition: border-color .12s ease, box-shadow .12s ease; }
.gm-input:focus-within { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 4px var(--accent-soft); }
.gm-field.is-error .gm-input:focus-within { box-shadow: inset 0 0 0 1px var(--st-problem-ink), 0 0 0 4px var(--st-problem-bg); }
.gm-field.is-warn .gm-input:focus-within { box-shadow: inset 0 0 0 1px var(--st-wait-ink), 0 0 0 4px var(--st-wait-bg); }

/* подсказки появляются из-под поля; при наборе текста список уже открыт и не дёргается */
.gm-suggest { transform-origin: top center; overscroll-behavior: contain; transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); }
@starting-style { .gm-suggest { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* единственное «поставленное» движение: штрихкод статуса заполняется слева направо, когда нашли посылку */
@keyframes gm-seg-in { from { opacity: 0; transform: scaleX(.2); } }
.gm-seg--play span.on, .gm-seg--play span.now, .gm-seg--play span.bad {
  transform-origin: left center; animation: gm-seg-in .32s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms);
}
/* анкета отправлена — галочка «рисуется»: редкий момент, здесь можно */
@keyframes gm-mark-in { from { opacity: 0; transform: scale(.9); } }
@keyframes gm-draw { to { stroke-dashoffset: 0; } }
.gm-state .mk--draw { animation: gm-mark-in .3s var(--ease-out) both; }
.gm-state .mk--draw path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: gm-draw .45s var(--ease-out) .18s forwards; }

/* ---------- главная: слева слова и кнопки, справа — порядок работы лентой шагов; ниже чёрная полоса с поиском ---------- */
.gm-home-top { display: grid; gap: 20px; }
.gm-how { display: grid; gap: 16px; }
.gm-rail--steps li::before { background: var(--line); }
.gm-rail--steps .dot { font: 500 12px/1 var(--font-mono); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.gm-rail--steps .t { font-weight: 600; }
.gm-rail--steps .s { font-size: 14px; line-height: 20px; margin-top: 2px; }
/* «перевёрнутая» полоса: чёрная в светлой теме и светлая в тёмной — глубина без теней и новых цветов */
.gm-band { display: grid; gap: 14px; margin-top: 20px; padding: 20px; border-radius: var(--radius-lg); background: var(--ink); color: var(--bg);
  --focus: var(--bg); --accent-soft: color-mix(in srgb, var(--bg) 28%, transparent); }
.gm-band h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: .005em; font-size: 24px; line-height: 30px; }
.gm-band p { font-size: 15px; line-height: 22px; opacity: .72; max-width: 52ch; }
.gm-band .gm-input { border-color: transparent; }
.gm-band .gm-btn--secondary { border-color: transparent; }
.gm-band ::selection { background: var(--bg); color: var(--ink); }

@media (min-width: 900px) {
  .gm-home-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; }
  .gm-how { padding: 28px; }
  .gm-band { margin-top: 48px; padding: 32px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center; }
  .gm-band h2 { font-size: 34px; line-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-input, .gm-suggest { transition: none; }
  .gm-seg--play span, .gm-state .mk--draw { animation: none !important; }
  .gm-state .mk--draw path { animation: none !important; stroke-dashoffset: 0; }
}