/* ── Витрина записи на встречу · дизайн сайта alexduchenchuk.com (V2) ─────────
   Человек приходит со страницы сайта /meet и не должен заметить, что попал на
   другой сервер. Поэтому здесь не «похожие» цвета, а токены дизайн-системы V2
   дословно: Personal Brand/05_website/v2-handoff/_ds_v2/…/tokens/*.css и их
   рабочая копия на сайте (brand-os apps/web/app/site/_v2/v2.css, _d/d.css).
   Классы компонентов (кнопка, поле, ячейка, тег слота) перенесены оттуда же,
   а разметка страницы повторяет /meet: вступление слева, панель записи справа.

   Медь (--accent) — только действие и точный акцент: главная кнопка, стрелка,
   линия наведения, точка у вступления. Текст на меди тёмный (--text-on-accent,
   #140B03 на #CD7722 ≈ 6,9:1).

   Шрифты — СВОИ файлы (fonts/), не Google Fonts: внешний шрифт — запрос к
   чужому серверу на пути отрисовки и IP посетителя у третьей стороны. Файлы
   взяты из npm @fontsource-variable/inter@5.3.0 и @fontsource-variable/geist@5.3.0
   (лицензия SIL OFL 1.1, тексты рядом: fonts/*-OFL.txt), подмножества
   латиница, латиница-расширенная и кириллица; Inter — с осью opsz (14–32), как
   на сайте: без неё крупный Inter набирается шире макета.

   CSP витрины: style-src 'self' — стили только этим файлом, ни одного
   атрибута style в разметке. Иконки внутри CSS — data:-SVG (img-src data:).

   Ширины: основа — телефон (390), 640 — сетка 4→8 колонок и два вида встречи
   в ряд, 1024 — вступление и панель в две колонки, 1440 — предел рамки. ── */

/* ── Шрифты ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/geist-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-cyrillic-opsz-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-opsz-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Токены V2 (tokens/colors.css, typography.css, spacing.css) ───────────── */
:root {
  color-scheme: dark;

  /* Цвет: шкалы */
  --teal-700: #1E607A; --teal-500: #3E97B7; --teal-300: #9CCCDD;
  --copper-700: #A75F1A; --copper-600: #CD7722; --copper-500: #DD8D3E; --copper-400: #E8A96A;
  --ink-950: #040C10; --ink-900: #0A1216; --ink-800: #0F191E; --ink-700: #16222A;
  --petroleum-950: #081A21; --petroleum-900: #0B2630;
  --fg-1: #F2EEE8; --fg-2: #C9C6C0; --fg-3: #9A9EA1; --fg-4: #6B7378;
  --red-500: #C85A4A; --red-300: #E39A8E;
  --line-1: rgba(242, 238, 232, .08); --line-2: rgba(242, 238, 232, .14); --line-3: rgba(242, 238, 232, .24);

  /* Цвет: смысловые имена */
  --surface-page: var(--ink-950);
  --surface-1: var(--ink-900);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-700);
  --surface-section: var(--petroleum-950);
  --surface-structure: var(--petroleum-900);
  --surface-structure-3: var(--teal-700);
  --text-1: var(--fg-1);
  --text-2: var(--fg-2);
  --text-3: var(--fg-3);
  --text-4: var(--fg-4);
  --text-on-accent: #140B03;
  --accent: var(--copper-600);
  --accent-hover: var(--copper-500);
  --accent-active: var(--copper-700);
  --accent-soft: rgba(205, 119, 34, .14);
  --accent-line: var(--copper-600);
  --border-1: var(--line-1);
  --border-2: var(--line-2);
  --border-3: var(--line-3);
  --hover-wash: rgba(30, 96, 122, .14);
  --selected-line: var(--accent);
  --link: var(--copper-500);
  --link-hover: var(--copper-400);
  --danger: var(--red-500);
  --selection-bg: rgba(205, 119, 34, .35);
  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--copper-500);

  /* Шрифт */
  --font-display: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-feature-sans: 'kern', 'liga', 'ss01', 'cv11';
  /* У каждого шрифтового токена своя пара --track-*: сокращение font не
     задаёт межбуквенный интервал, и без пары заголовок разъедется. */
  --text-display-md: 300 clamp(40px, 4.8vw, 76px)/0.98 var(--font-display); --track-display-md: -0.05em;
  --text-h3: 400 clamp(24px, 2.2vw, 32px)/1.1 var(--font-display); --track-h3: -0.032em;
  --text-h4: 400 clamp(20px, 1.8vw, 27px)/1.16 var(--font-display); --track-h4: -0.028em;
  --text-h5: 500 clamp(16px, 1.3vw, 19px)/1.2 var(--font-display); --track-h5: -0.015em;
  --text-lead-sm: 400 clamp(18px, 1.4vw, 21px)/1.45 var(--font-sans); --track-lead-sm: -0.01em;
  --text-body: 400 16px/1.6 var(--font-sans);
  --text-body-sm: 400 15px/1.55 var(--font-sans);
  --text-caption: 400 12px/1.45 var(--font-sans);
  --text-button: 500 14px/1.2 var(--font-sans);
  --text-label: 500 14px/1.2 var(--font-sans);
  --text-label-sm: 500 13px/1.2 var(--font-sans);
  --text-kicker: 500 11px/1.3 var(--font-sans); --track-kicker: 0.14em;
  --text-detail: 400 13px/1.3 var(--font-sans);
  --text-wordmark: 500 13px/1 var(--font-sans); --track-wordmark: 0.3em;

  /* Рамка, сетка, отступы */
  --page-max: 1440px;
  --page-gutter: clamp(20px, 3.4vw, 48px);
  --grid-gutter: 24px;
  --section-space: clamp(80px, 9vw, 128px);
  --nav-height: 72px;
  --nav-height-sm: 60px;
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-pill: 999px;
  --rule-width: 32px;
  --hit-min: 44px;
  --control-sm: 36px;
  --control-md: 44px;

  /* Движение: спокойное, без отскока */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --opacity-disabled: .4;
  --opacity-muted: .64;

  /* Иконки контуром 1,5 px (набор Lucide, тот же, что у сайта). Цвет зашит в
     SVG: data:-картинка не наследует currentColor. */
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EEE8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CD7722' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9EA1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140B03' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

/* Кириллица: слова длиннее, счётчики шире — самый плотный интервал крупного
   заголовка отпускается, как на сайте (tokens/typography.css, [data-lang=ru]).
   Украинский — тот же набор знаков, правило то же. */
:root:lang(ru), :root:lang(uk) { --track-display-md: -0.04em; }
:lang(ru), :lang(uk) { font-synthesis: none; }
:lang(de) { hyphens: auto; -webkit-hyphens: auto; }

/* ── Основа (tokens/base.css) ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--surface-page);
  /* Горизонтальной прокрутки нет ни на одной ширине: длинная ссылка отмены и
     длинное имя переносятся, а не распирают страницу. */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  color: var(--text-1);
  font: var(--text-body);
  font-feature-settings: var(--font-feature-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
::selection { background: var(--selection-bg); color: var(--text-1); }

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration: underline; text-decoration-thickness: 1px; }

/* Одно кольцо фокуса на всё, общим селектором: элемент, не попавший в список
   поимённо, остался бы с системным кольцом. Поля показывают фокус своей
   рамкой (ниже) и второго кольца не получают. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-1); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Рамка и сетка (tokens/grid.css) ─────────────────────────────────────── */
.frame {
  width: 100%;
  max-width: var(--page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
}
/* 4 колонки на телефоне, 8 с 640, 12 с 1024. Дети сетки обязаны уметь
   сжиматься (min-width: 0), иначе длинное слово распирает колонку. */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
.grid > * { grid-column: 1 / -1; min-width: 0; }

/* ── Шапка: словесный знак и язык ────────────────────────────────────────── */
.site-header {
  flex: none;
  border-bottom: 1px solid var(--border-1);
  background: var(--surface-page);
  padding-top: env(safe-area-inset-top);
}
.site-header__bar {
  height: var(--nav-height-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  font: var(--text-wordmark);
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  color: var(--text-1);
  white-space: nowrap;
  border-radius: var(--radius-1);
  transition: color 200ms var(--ease-out);
}
.wordmark:hover { color: var(--accent-hover); text-decoration: none; }
.wordmark:active { color: var(--accent); }

.langbar { display: flex; align-items: center; min-width: 0; }

/* Выбор языка — пилюля, как переключатель языка в шапке сайта. Настоящий
   select: клавиатура, скринридер и системный список на телефоне — даром. */
.select {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--text-1);
}
.select select {
  appearance: none;
  -webkit-appearance: none;
  height: var(--hit-min);
  max-width: 100%;
  padding: 0 34px 0 14px;
  border: 1px solid var(--border-3);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-1);
  font: var(--text-label);
  letter-spacing: .02em;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.select select:hover { border-color: var(--text-3); }
.select select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); border-radius: var(--radius-pill); }
/* Системный список на Windows рисуется по цвету option, а не страницы. */
.select option { background: var(--ink-800); color: var(--fg-1); }
.select__chev {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Страница: вступление слева, панель записи справа ────────────────────── */
main.meet {
  flex: 1 0 auto;
  padding-top: clamp(40px, 6vw, 96px);
  padding-bottom: var(--section-space);
  row-gap: 40px;
  align-items: start;
}
.meet__intro { display: flex; flex-direction: column; gap: 24px; }
.meet__aside { display: flex; flex-direction: column; gap: 20px; }

/* Медная волосяная линия над заголовком — мотив сайта (у него с подписью-
   рубрикой; здесь без неё: новой надписи витрина не заводит). */
.rule { display: block; width: var(--rule-width); height: 1px; background: var(--accent-line); }

h1 {
  margin: 0;
  max-width: 11ch;
  font: var(--text-display-md);
  letter-spacing: var(--track-display-md);
  color: var(--text-1);
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Вступление с медной точкой на вертикальной линии — как d-lead сайта. */
.lead {
  position: relative;
  padding: 2px 0 4px 24px;
  border-left: 1px solid var(--border-3);
  max-width: 34rem;
}
.lead::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.lead p {
  margin: 0;
  font: var(--text-lead-sm);
  letter-spacing: var(--track-lead-sm);
  color: var(--text-1);
  text-wrap: pretty;
}
.lead p:empty { display: none; }
.lead:has(p:empty) { display: none; }

/* Мелкий текст под панелью: для чего нужны данные. */
.foot {
  margin: 0;
  max-width: 46ch;
  font: var(--text-caption);
  color: var(--text-3);
  text-wrap: pretty;
}
.foot:empty { display: none; }

/* ── Панель записи (meet-panel сайта) ────────────────────────────────────── */
.panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-top-color: var(--border-3);
  border-radius: var(--radius-1);
  min-width: 0;
}
/* Готово: верхняя линия становится медной — итог отмечен, как на сайте. */
.panel:has(> #stepDone:not([hidden])) { border-top-color: var(--accent); }

.step { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.form { display: flex; flex-direction: column; gap: 20px; margin: 0; min-width: 0; }

.step__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.step__title {
  margin: 0;
  min-width: 0;
  font: var(--text-h5);
  letter-spacing: var(--track-h5);
  color: var(--text-1);
  text-wrap: balance;
}

/* «Назад» — круглая кнопка со стрелкой (IconButton outline sm). Подпись,
   которую ставит скрипт, остаётся доступным именем кнопки, а глазам
   показывается стрелка. */
.back {
  position: relative;
  flex: none;
  width: var(--control-sm);
  height: var(--control-sm);
  padding: 0;
  border: 1px solid var(--border-3);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.back::before {
  /* Зона нажатия 44 px при видимых 36. */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hit-min);
  height: var(--hit-min);
  transform: translate(-50%, -50%);
}
.back::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: var(--icon-arrow-left) center / 16px 16px no-repeat;
}
.back:hover { border-color: var(--accent); background: var(--accent-soft); }
.back:active { background: transparent; }
.back:focus-visible { border-radius: 50%; }

/* Часовой пояс — строка с часами, как meet-tz. */
.tz {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: var(--text-detail);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.tz::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--icon-clock) center / 16px 16px no-repeat;
}
.tz:empty { display: none; }

/* ── Шаг 1: виды встречи — ячейки-кнопки (Card cell + медная линия) ──────── */
.types {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--border-2);
}
.type {
  position: relative;
  display: flex;
  /* На телефоне — строка: название слева, стрелка справа. С 640, когда
     ячейки встают в ряд, — столбец, как у ячеек сайта. */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 76px;
  padding: 20px 16px;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  border-radius: 0;
  background: transparent;
  color: var(--text-1);
  text-align: left;
  font: var(--text-h4);
  letter-spacing: var(--track-h4);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) var(--ease-out);
}
/* Медная линия сверху выезжает слева при наведении и фокусе. */
.type::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--selected-line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out);
  pointer-events: none;
}
/* Стрелка действия — медь, справа (на широком — в правом нижнем углу). */
.type::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--icon-arrow-right) center / 16px 16px no-repeat;
  transition: transform var(--dur-base) var(--ease-out);
}
.type:hover { background: var(--hover-wash); }
.type:hover::before, .type:focus-visible::before { transform: none; }
.type:hover::after, .type:focus-visible::after { transform: translateX(4px); }
.type:active { background: transparent; }
.type:focus-visible { box-shadow: inset 0 0 0 2px var(--copper-500); border-radius: 0; }

/* ── Шаг 2: дни и слоты ──────────────────────────────────────────────────── */
.days { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.day { min-width: 0; }
.day h3 {
  margin: 0 0 12px;
  font: var(--text-kicker);
  letter-spacing: var(--track-kicker);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* Только первая буква: «Понедельник, 19 октября», а не «19 Октября». */
.day h3::first-letter { text-transform: uppercase; }
.slots { display: flex; flex-wrap: wrap; gap: 10px; }
/* Слот — тег-пилюля сайта (ad-tag--click): видимые 36 px, нажимаемые 44. */
.slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-sm);
  /* Четыре слота в ряд на телефоне 390: 4 × 64 + 3 × 10 входит в панель. */
  min-width: 64px;
  padding: 0 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font: var(--text-label-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.slot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, var(--hit-min));
  height: var(--hit-min);
  transform: translate(-50%, -50%);
}
.slot:hover { border-color: var(--border-3); color: var(--text-1); }
.slot:active { background: var(--accent-soft); }
/* Выбранное — не только цветом: рамка, текст И заливка. */
.slot[aria-pressed='true'], .slot[aria-pressed='true']:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.slot:focus-visible { border-radius: var(--radius-pill); }

/* Пока слоты грузятся: строка с вращающимся кольцом (meet-status сайта).
   Это единственный абзац внутри списка дней — его ставит скрипт на время
   запроса. */
.days > .note { display: flex; align-items: center; gap: 10px; }
.days > .note::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Шаг 3: форма ────────────────────────────────────────────────────────── */
.chosen {
  margin: -8px 0 0;
  font: var(--text-detail);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.chosen:empty { display: none; }
.chosen::first-letter { text-transform: uppercase; }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
label { font: var(--text-label-sm); color: var(--text-2); }
/* Обязательное поле — медная звёздочка, как у формы сайта. Для скринридера
   обязательность уже сказана атрибутом required, звёздочка ему не читается. */
label.required::after { content: " *"; content: " *" / ""; color: var(--accent); }

/* Поле — пилюля сайта (ad-input): прозрачное, рамка 24 % белого, фокус —
   медная рамка и мягкое медное кольцо. */
input[type='text'], input[type='email'] {
  display: block;
  width: 100%;
  height: var(--control-md);
  padding: 0 18px;
  border: 1px solid var(--border-3);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-1);
  /* 16 px, а не 15: меньше — и Safari на айфоне увеличивает страницу при
     фокусе, и форма уезжает из-под пальца. */
  font: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 14px 18px;
  border: 1px solid var(--border-3);
  border-radius: var(--radius-2);
  background: transparent;
  color: var(--text-1);
  font: var(--text-body);
  resize: vertical;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
input[type='text']:hover, input[type='email']:hover, textarea:hover { border-color: var(--text-3); }
input[type='text']:focus, input[type='email']:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type='text']:focus-visible, input[type='email']:focus-visible {
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea:focus-visible { border-radius: var(--radius-2); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
/* Автозаполнение не имеет права перекрасить поле в светлое на тёмной странице. */
input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-1);
  box-shadow: 0 0 0 1000px var(--surface-2) inset;
  caret-color: var(--text-1);
}

.hint { margin: 0; font: var(--text-caption); color: var(--text-3); max-width: 52ch; }
.hint:empty { display: none; }

/* Согласие: вся строка кликабельна, флажок медный (meet-consent). */
.consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font: var(--text-body-sm);
  color: var(--text-2);
  cursor: pointer;
  text-wrap: pretty;
}
.consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent input:focus-visible { box-shadow: none; outline: 2px solid var(--copper-500); outline-offset: 2px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Главная кнопка — медная пилюля сайта (ad-btn--primary). */
.primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--control-md);
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-on-accent);
  font: var(--text-button);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.primary:hover { background: color-mix(in oklab, var(--copper-600) 62%, var(--copper-500)); }
.primary:active { background: var(--accent-active); }
.primary:focus-visible { border-radius: var(--radius-pill); }
/* Кнопка записи — с календарём в начале, как «Подтвердить запись» на сайте. */
.primary--book::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--icon-calendar) center / 16px 16px no-repeat;
}
/* Заблокирована на время запроса: подпись меняется скриптом («Записываю…»),
   и кнопка обязана оставаться читаемой, а не гаснуть до тени. */
.primary[disabled] { opacity: var(--opacity-muted); cursor: default; pointer-events: none; }

/* Отказ словами — рамкой и цветом (d-alert сайта). */
.error {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-1);
  font: var(--text-body-sm);
  color: var(--red-300);
  overflow-wrap: anywhere;
}
.note {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--text-3);
  max-width: 52ch;
  text-wrap: pretty;
}
.note:empty { display: none; }

/* ── Шаг 4: готово ───────────────────────────────────────────────────────── */
.done { gap: 16px; align-items: flex-start; }
.done__title {
  margin: 0;
  font: var(--text-h3);
  letter-spacing: var(--track-h3);
  color: var(--text-1);
}
.done__text { margin: 0; font: var(--text-body-sm); color: var(--text-2); max-width: 52ch; text-wrap: pretty; }
.done__text:empty { display: none; }

/* Пары «что — значение» строками с волосяными линиями (legal-kv сайта). */
.details {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--border-1);
}
.details dt { padding: 12px 0 0; font: var(--text-detail); color: var(--text-3); }
.details dd {
  margin: 0;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border-1);
  font: var(--text-body);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.details:empty { display: none; }
/* Первым в панели список не рисует свою верхнюю линию: у панели она уже есть,
   и две линии подряд читаются как пустая строка таблицы. */
.panel > .details:first-child { border-top: 0; }
.panel > .details:first-child > dt:first-of-type,
.panel > .details:first-child > dd:first-of-type { padding-top: 0; }

/* Ссылка отмены — длинная, переносится где угодно, но не распирает экран. */
.cancel-line { overflow-wrap: anywhere; max-width: none; }

/* ── Подвал: правовые ссылки сайта ───────────────────────────────────────── */
.site-footer {
  flex: none;
  border-top: 1px solid var(--border-1);
  padding-bottom: env(safe-area-inset-bottom);
  /* Петролевый отлив к низу — тот же, что у подвала сайта, только короче. */
  background: linear-gradient(180deg,
    var(--surface-page) 0%,
    color-mix(in oklab, var(--surface-structure-3) 6%, var(--surface-page)) 55%,
    color-mix(in oklab, var(--surface-structure-3) 16%, var(--surface-page)) 100%);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 32px;
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(16px, 2.4vw, 28px);
}
.site-footer__copy { font: var(--text-caption); color: var(--text-3); font-variant-numeric: tabular-nums; }
.site-footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  font: var(--text-caption);
  color: var(--text-3);
  transition: color 180ms var(--ease-out);
}
.site-footer__link:hover { color: var(--text-1); text-decoration: none; }
.site-footer__link:active { color: var(--text-2); }

/* ── Ширины ──────────────────────────────────────────────────────────────── */

/* Узкий телефон (до 390): чуть плотнее панель и слоты; знак и выбор языка
   ужимаются, чтобы «Українська» помещалась рядом со знаком на 320. */
@media (max-width: 389.98px) {
  .wordmark { font-size: 12px; letter-spacing: .2em; }
  .select select { padding: 0 28px 0 12px; font-size: 13px; }
  .select__chev { right: 10px; }
  .panel { padding: 18px 16px; }
  .slot { min-width: 58px; padding: 0 11px; }
  .site-footer__nav { gap: 0 16px; }
}

/* 640: сетка 8 колонок, виды встречи в ряд, шапка полной высоты. */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
  .site-header__bar { height: var(--nav-height); }
  .select select { height: var(--control-sm); }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type { flex-direction: column; align-items: stretch; gap: 20px; min-height: 112px; padding: 24px 20px 20px; }
  .type::after { align-self: flex-end; }
  .types > .type:nth-child(2n) { border-left: 1px solid var(--border-1); }
  .details { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .details dt { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border-1); }
  .details dd { padding: 12px 0; }
}

/* 768: планшет — вступление и панель ещё друг под другом, но панель не
   растягивается на всю ширину: строки слотов длиннее семи-восьми штук
   читаются хуже. */
@media (min-width: 768px) {
  .meet__intro { grid-column: 1 / span 7; }
  .meet__aside { grid-column: 1 / span 8; max-width: 720px; }
}

/* 1024: две колонки, как /meet сайта — вступление 5 из 12, панель 6 из 12. */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  main.meet { row-gap: 48px; }
  .meet__intro { grid-column: 1 / span 5; }
  .meet__aside { grid-column: 7 / span 6; max-width: none; }
}

/* 1440: рамка дошла до предела, поля по бокам растут сами; вступлению —
   немного больше воздуха сверху, как у широкой страницы сайта. */
@media (min-width: 1440px) {
  main.meet { padding-top: 112px; }
}

/* Высокий контраст Windows: картинки-иконки там не рисуются — «Назад»
   показывает свою подпись словами. */
@media (forced-colors: active) {
  .back { width: auto; padding: 0 14px; border-radius: var(--radius-pill); font: var(--text-label-sm); color: ButtonText; }
  .back::after { display: none; }
}

/* Меньше движения: декоративное выключено, кольцо ожидания — носитель
   состояния — остаётся, но замедлено. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .type:hover::after, .type:focus-visible::after { transform: none; }
  .days > .note::before { animation-duration: 2.4s; }
}