/* Дашборд Tabibot: телефон первым (390 px), одна колонка до 720 px по центру.
   От 900 px — та же разметка в контейнере 1040 px: шапка одной строкой,
   карточки в два столбца, ленты обычными таблицами (см. конец файла).
   Цели касания — 44 px, контраст приглушённого текста не ниже 4.5:1, контуры
   кнопок и полей — не ниже 3:1 (WCAG 1.4.11), фокус видим. Тёмная тема — те же
   токены, другие значения.

   Часть цветов макета пришлось затемнить: белым по ним читать нельзя.
   Измерено (белый текст 13 px, порог AA 4.5:1): ступени календаря макета
   #3F8F4A / #B0861F / #BD5E2A давали 4.01 / 3.35 / 4.38 — стоят затемнённые в
   тот же тон (5.2–5.3); приглушённый #7A7772 давал 4.46 на карточке и 4.02 на
   фоне — стоит #6E6B66 (5.31 / 4.78); контур кнопок #DCD9D2 давал 1.41 — стоит
   #8E8A82 (3.44 / 3.10). Заливка акцентом в тёмной теме белый текст не держит
   (#FF6B5C — 2.80), поэтому чернила на акценте — свой токен --accent-ink. */

:root {
  --bg: #F4F3EF;
  --card: #FFFFFF;
  --line: #E6E3DC;
  --line-soft: #EFEDE8;
  --btn-line: #8E8A82;
  --fg: #17181A;
  --muted: #5C5A55;
  --muted-2: #6E6B66;
  --accent: #A8281B;
  --accent-hover: #7E1E14;
  --accent-ink: #FFFFFF;
  --on-bg: #DDF3E5;
  --on-fg: #14603A;
  --off-bg: #ECEAE4;
  --off-fg: #5C5A55;
  --wait-bg: #FBEFD4;
  --wait-fg: #7A4E00;
  --route-bg: #E7ECFA;
  --route-fg: #2B3F8A;
  --tabs-bg: #E6E3DC;
  --tab-on: #FFFFFF;
  --live: #1B8A4C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .08);
  --sheet-shadow: 0 8px 28px rgba(0, 0, 0, .14);
  --q1: #1E6E45;
  --q2: #367A3F;
  --q3: #886718;
  --q4: #AA5526;
  --q5: #8B2020;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141517;
    --card: #1D1F23;
    --line: #2C2F35;
    --line-soft: #26282D;
    --btn-line: #6B7280;
    --fg: #ECEAE4;
    --muted: #A7A49D;
    --muted-2: #8E8B85;
    --accent: #FF6B5C;
    --accent-hover: #FF9186;
    --accent-ink: #141517;
    --on-bg: #173A28;
    --on-fg: #8FE3B0;
    --off-bg: #2A2D33;
    --off-fg: #A7A49D;
    --wait-bg: #3A2E12;
    --wait-fg: #F0C978;
    --route-bg: #1E2540;
    --route-fg: #AFC0F7;
    --tabs-bg: #24272C;
    --tab-on: #34383F;
    --live: #4CC98A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --sheet-shadow: 0 8px 28px rgba(0, 0, 0, .55);
    --q1: #1E6E45;
    --q2: #387A42;
    --q3: #89661C;
    --q4: #A8532A;
    --q5: #7E2222;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Golos Text', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

svg.sprite { display: none; }

/* Текст только для скринридера: иконка без подписи молчит. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ico, .ico-lg, .ico-sm {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ico { width: 18px; height: 18px; }
.ico-lg { width: 20px; height: 20px; }
.ico-sm { width: 14px; height: 14px; }
.ico-star { width: 12px; height: 12px; fill: currentColor; stroke: none; flex: none; }

/* --- шапка: липкий сегментированный переключатель разделов --- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.top-in {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.top-in.row {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
}
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand-name { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.brand-sub { font-size: 13px; color: var(--muted); }
.state { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); display: inline-block; flex: none; }
.dot.idle { background: var(--muted-2); }

/* Четыре раздела в одном переключателе — две пары «охота / посмотреть». На
   телефоне подпись стоит под иконкой (13 px, min-height 48 px) и переносится
   по словам. Расчёт на 360 px: шапка 360 − 2×16 = 328, минус 2×4 паддинга
   переключателя и 3×4 зазора = 308, на сегмент 77, под текст 77 − 2×2 = 73 px.
   Самое длинное слово — «билетами», ≈ 8 × 7,3 ≈ 58 px при 13 px/600, строка
   «Охота за» ≈ 57 px: «Охота за / отелями» и «Охота за / билетами» встают в две
   строки без обрезки. min-width: 0 — чтобы подпись не распирала сегмент и
   четыре колонки оставались равными; overflow-wrap не задан, и слова
   переносятся только по пробелам, не посередине. На ноутбуке
   подпись возвращается в строку — там для неё есть ширина. */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--tabs-bg);
  border-radius: 14px;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 4px 2px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--muted);
}
.tab:hover { color: var(--fg); }
.tab[aria-current="page"] {
  background: var(--tab-on);
  color: var(--fg);
  box-shadow: var(--shadow);
}

.page-title { margin: 0; font-size: 17px; font-weight: 700; }
.page-titles { display: flex; flex-direction: column; min-width: 0; }
.page-titles .page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- колонка страницы --- */

main.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sec { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.sec h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Секция целиком: заголовок, кнопка «+ Новая …» и содержимое. На телефоне это
   обычная колонка в том же порядке, что и раньше; на широком экране .block
   становится сеткой и та же кнопка встаёт справа от заголовка (см. D6). */
.block { display: flex; flex-direction: column; gap: 12px; }
.block > .btn { align-self: start; }
.cards { display: flex; flex-direction: column; gap: 12px; }

.meta { font-size: 13px; color: var(--muted); line-height: 1.45; }
.meta.dim { color: var(--muted-2); }
.meta.mid { text-align: center; padding: 8px 0 4px; }
.price { font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }

/* --- кнопки --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--btn-line);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.btn:hover { color: var(--fg); border-color: var(--muted-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn.wide { width: 100%; }
.btn.danger { color: var(--accent); }
.btn.danger:hover { color: var(--accent-hover); }
.ib {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--btn-line);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  flex: none;
}
.ib.ghost { border: 0; background: transparent; }
/* .tiny — две кнопки внутри строки плеча маршрута («изменить» и пауза в
   карточке маршрута на /flights), четыре строки подряд. Рисуются они 32 px:
   44 px растянули бы карточку на пол-экрана. Но пальцу 32 px мало — по нему
   промахивались, — поэтому на сенсорном экране область касания доведена до
   44 px невидимой рамкой (::after по 6 px сверху и снизу) и min-width: вёрстка
   не меняется, а цель касания — по мобильным нормам (Apple HIG, WCAG 2.5.5).
   Вбок рамка не выходит: между кнопками 6 px, и соседние цели наложились бы. */
.tiny {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--btn-line);
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.tiny:hover { color: var(--fg); }
@media (pointer: coarse) {
  .tiny { min-width: 44px; justify-content: center; }
  .tiny::after { content: ""; position: absolute; inset: -6px 0; }
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  flex: none;
}
.chip.on { background: var(--on-bg); color: var(--on-fg); }
.chip.off { background: var(--off-bg); color: var(--off-fg); }
.chip.wait { background: var(--wait-bg); color: var(--wait-fg); }
.chip.route { background: var(--route-bg); color: var(--route-fg); }

/* --- карточки --- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-title { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--fg); }
a.card-title:hover { color: var(--accent); }
.num { display: flex; flex-direction: column; gap: 2px; }
.plate {
  font-size: 14px;
  color: var(--wait-fg);
  background: var(--wait-bg);
  padding: 8px 10px;
  border-radius: 10px;
}
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: relative; }
.actions form { margin: 0; }
.actions form button { margin: 0; }

/* «ещё»: деструктивное действие спрятано и требует подтверждения. Лист
   привязан к ряду действий (.actions position: relative), а не к самой кнопке:
   на 390 px ряд действий переносится, и привязанный к кнопке лист уезжал бы за
   левый край окна вместе с «Удалить», а влево страница не прокручивается. */
details.more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--btn-line);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::marker { content: ""; }
details.more .sheet {
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 6px);
  z-index: 10;
  min-width: 190px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sheet-shadow);
}
details.more .sheet form { margin: 0; }
details.more .sheet .btn { width: 100%; }

/* --- строки лент и плеч маршрута --- */

.rows {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 16px;
  display: flex;
  flex-direction: column;
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.rows > .row:first-child { border-top: 0; }
.row .t, .feed td.t { font-size: 15px; font-weight: 500; }
.row .v, .feed td.v { font-size: 15px; font-weight: 600; text-align: right; white-space: nowrap; }
.row .r, .feed td.r { text-align: right; }
/* Чип «снова в продаже» на телефоне — своей строкой над состоянием: в одну
   строку с ним правая колонка грида растёт до суммы обоих и сжимает название
   отеля почти до нуля. Так ширина колонки — большее из двух, а не сумма. */
.feed td.r .chip { display: flex; width: max-content; margin: 0 0 2px auto; }
.legs { display: flex; flex-direction: column; }
.legs .row { gap: 4px 12px; }
.leg-tools { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.leg-tools form { display: inline; margin: 0; }
.ext { display: inline-flex; align-items: center; gap: 4px; }

/* --- лента таблицей: одна разметка на все ширины ---

   Данные лежат в <table> с <th scope="col">, а на узком экране CSS разбирает
   таблицу на те же строки в две колонки, что и раньше. Роли выставлены в
   разметке руками: браузер теряет семантику таблицы, как только у tr и td
   меняется display, — с ролями скринридер продолжает читать и строки, и
   заголовки колонок. Поэтому же заголовок не спрятан display: none, а убран
   с глаз так же, как .vh: в дереве доступности он остаётся. */

.feed { width: 100%; border-collapse: collapse; }
.feed, .feed tbody, .feed td { display: block; }
.feed thead {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.feed tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.feed tbody tr:first-child { border-top: 0; }

/* --- календарь цен: пять ступеней квантиля, рамка — окно охоты --- */

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .wd { text-align: center; font-size: 11px; color: var(--muted); padding: 2px 0; }
.cal .day {
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
/* .75 из макета давало 2.6–3.2:1 — номер дня не читался ни на одной ступени */
.cal .day .n { font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, .92); }
.cal .none { background: var(--off-bg); color: var(--muted); }
.cal .none .n { color: var(--muted); }
.cal .q1 { background: var(--q1); }
.cal .q2 { background: var(--q2); }
.cal .q3 { background: var(--q3); }
.cal .q4 { background: var(--q4); }
.cal .q5 { background: var(--q5); }
.cal .win { box-shadow: 0 0 0 2px var(--accent) inset; }

.legend { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; gap: 3px; }
.legend i { width: 18px; height: 12px; border-radius: 3px; display: inline-block; }

.bar { display: inline-block; height: 8px; border-radius: 3px; background: var(--accent); vertical-align: middle; }

/* --- экран «Билеты»: цены без охоты ---

   Телефонная колонка: форма, сводка, календарь, подробности дня, дешёвые даты,
   год вперёд. На ноутбуке (D6, конец файла) форма и сводка остаются во всю
   ширину, а ниже расходятся две колонки — разметка та же. */

.tk { display: flex; flex-direction: column; gap: 12px; }
.tkf { display: flex; flex-direction: column; gap: 12px; }
.tk-cols, .tk-col { display: flex; flex-direction: column; gap: 12px; }
/* Месяцы на телефоне стоят один под другим: в 175 px родное поле месяца
   («Декабрь 2026» плюс своя кнопка календаря) рядом со двумя стрелками не
   помещается и обрезается. Рядом они встают с 560 px. */
.tk-months { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* Поле месяца: значение слева, стрелки справа — это ссылки на соседний месяц,
   так месяцы листаются без JS. Поле высотой 48 px, стрелка 36 px внутри него:
   цель касания по высоте остаётся полем, WCAG 2.5.8 выдержан с запасом. */
.field.mth { padding: 0 4px 0 12px; gap: 2px; }
.field.mth input { font-size: 15px; }
.ib.flat { width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted); }
.ib.flat:hover { color: var(--fg); }
/* Погашенная стрелка: «назад» с текущего месяца и возврат раньше вылета вести
   некуда. Ссылка остаётся ссылкой на тот же экран — тап ничего не портит, но и
   обещать ему нечего. */
.ib.flat.off { color: var(--muted-2); opacity: .5; }
.ib.flat.off:hover { color: var(--muted-2); }

/* Лента месяцев: прокручивается она, а не страница. */
.year {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.ycell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  min-width: 84px;
  min-height: 48px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--fg);
}
.ycell .ym { font-size: 12px; color: var(--muted); }
.ycell .yv { font-size: 14px; font-weight: 600; }
.ycell:hover { color: var(--fg); border-color: var(--muted-2); }
.ycell.on, .ycell.on:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.ycell.on .ym { color: var(--bg); }

/* Страница охоты и формы: обёртки колонок на узком экране растворяются, и
   блоки снова становятся одной колонкой страницы — в том же порядке, что на
   телефоне (order ниже), без второй разметки. */
.two, .col, .onecol { display: contents; }
.b-summary { order: 1; }
.b-combos { order: 2; }
.b-cal { order: 3; }
.b-year { order: 4; }
.b-hist { order: 5; }
.b-note { order: 6; }
.combos-in { display: flex; flex-direction: column; gap: 12px; }

/* --- формы: те же поля, что и раньше, только обёртка и размеры --- */

form.hunt { display: flex; flex-direction: column; }
form.hunt label { margin: .6rem 0 .15rem; font-size: 13px; color: var(--muted); }
form.hunt > label:first-child { margin-top: 0; }
form.hunt input, form.hunt select {
  width: 100%;
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--btn-line);
  border-radius: 12px;
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
}
/* Галочки и радио — не поля ввода: без исключения они растягиваются на 100 %
   ширины и 44 px высоты, и вместо кружка рисуется прямоугольник во всю ячейку */
form.hunt input[type="checkbox"], form.hunt input[type="radio"] { width: auto; min-height: 0; }
/* «город» и «код IATA» идут подряд: без отступа это читается как одно поле */
form.hunt input + input, form.hunt .meta + input { margin-top: .4rem; }
form.hunt button, .card > form button[type="submit"], form.hunt > button {
  margin-top: 1rem;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
form.hunt button.small, button.small {
  margin: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--btn-line);
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
/* Набор чекбоксов — группа полей: подпись над ним относится ко всем сразу. */
form.hunt fieldset.group { margin: .6rem 0 0; padding: 0; border: 0; min-width: 0; }
form.hunt fieldset.group > legend { padding: 0 0 .15rem; font-size: 13px; color: var(--muted); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; font-size: 14px; }
.checks label { display: flex; align-items: center; gap: 6px; margin: 0; min-height: 44px; color: var(--fg); }
.problem {
  font-size: 14px;
  color: var(--wait-fg);
  background: var(--wait-bg);
  padding: 10px 12px;
  border-radius: 12px;
}
.note { font-size: 13px; color: var(--muted); margin: 0; }

@media (min-width: 560px) {
  .checks { grid-template-columns: 1fr 1fr 1fr; }
  .tk-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 390 px: ряд действий карточки должен уместиться в одну строку */
@media (max-width: 420px) {
  .btn { padding: 0 12px; font-size: 14px; gap: 6px; }
  .actions { gap: 6px; }
}

/* ==========================================================================
   D6. Ноутбук и компьютер: та же разметка, другая сетка.

   Контейнер 1040 px с отступами 32, шапка одной строкой, карточки в два
   столбца одной высоты, ленты — обычные таблицы, страница охоты в две колонки
   1fr / 360 px. Ширины 600–900 px остаются телефонной колонкой: два столбца
   карточек там уже не читаются, а ленты в таблицу не влезают.
   ========================================================================== */

@media (min-width: 900px) {
  /* шапка: название слева, переключатель фиксированных 560 px рядом, строка
     состояния справа. Разметка та же — обёртка .brand-row растворяется, и её
     дети становятся ячейками одной строки. */
  .top-in {
    max-width: 1040px;
    padding: 14px 32px;
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
  .brand-row { display: contents; }
  .brand { order: 1; min-width: 200px; }
  /* 640 px и колонки по содержимому: подписи в строку при 14 px/600 просят
     примерно «Охота за билетами» 18 + 8 + 136 + 16 ≈ 178, «Охота за отелями»
     ≈ 170, «Билеты» ≈ 95, «Отели» ≈ 88 — вместе ≈ 530 при 620 внутри
     переключателя, остаток делится поровну. Равные доли (1fr) дали бы по 155 и
     порвали бы обе «Охоты» на две строки. Ужаться есть куда: на полном
     контейнере 1040 рядом 200 px названия и строка состояния, и если места не
     хватит (900–1040 px), подпись перенесётся по словам — две строки по 14 ×
     1,15 ≈ 32 px помещаются в высоту сегмента 40. */
  .tabs { order: 2; width: 640px; grid-template-columns: repeat(4, auto); }
  .state { order: 3; margin-left: auto; }
  /* мышь вместо пальца: 40 px как в макете, WCAG 2.5.8 (24 px) с запасом.
     Подпись возвращается в строку рядом с иконкой — ширины хватает. */
  .tab {
    flex-direction: row;
    gap: 8px;
    min-height: 40px;
    height: 40px;
    padding: 0 8px;
    font-size: 14px;
  }
  .top-in.row { max-width: 1040px; padding: 14px 32px; gap: 12px; }
  .top-in.row .page-title { font-size: 20px; }

  main.wrap { max-width: 1040px; padding: 12px 32px 32px; gap: 16px; }

  /* заголовок секции и кнопка — одна строка, кнопка по нижнему краю */
  .block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
  }
  .block > .sec { grid-column: 1; grid-row: 1; }
  .block > .btn {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    justify-self: end;
    align-self: end;
  }
  .block > *:not(.sec):not(.btn) { grid-column: 1 / -1; }
  /* секция без кнопки второй колонки не заводит: пустая колейка съедала бы
     16 px у подписи (заметно в правой колонке страницы охоты) */
  .block:not(:has(> .btn)) { grid-template-columns: minmax(0, 1fr); }
  .sec { margin-top: 12px; }

  /* карточки в два столбца и одной высоты в ряду: статус тянется, ряд
     действий прижат вниз — иначе кнопки соседних карточек стоят вразнобой */
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .card { padding: 20px; }
  .cards .card > .meta.dim { flex-grow: 1; }
  .cards .card > .actions { margin-top: auto; }

  /* лента становится таблицей: заголовки uppercase 12 px, числа справа,
     карточка-обёртка обрезает углы строк */
  .feed-wrap { padding: 0; overflow: hidden; }
  .feed { display: table; font-size: 14px; }
  .feed thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }
  .feed tbody { display: table-row-group; }
  .feed tr { display: table-row; padding: 0; border-top: 0; }
  .feed th, .feed td {
    display: table-cell;
    padding: 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--line-soft);
  }
  .feed th {
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
  }
  .feed th.v { text-align: right; }
  .feed tbody tr:last-child td { border-bottom: 0; }
  /* «справа» в таблице — только у чисел: остальные колонки идут от левого края */
  .feed td.r { text-align: left; }
  .feed td.r .chip { display: inline-flex; margin: 0; }

  /* страница охоты: слева сводка, календарь и история, справа год и маршруты */
  .two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
  }
  .col { display: flex; flex-direction: column; gap: 16px; }
  /* порядок телефонной колонки внутри столбцов не нужен: он тут свой */
  .col > * { order: 0; }
  .cal { gap: 6px; }
  .cal .day { height: 56px; font-size: 14px; }
  .cal .day .n { font-size: 11px; }
  /* 360 px на четыре колонки: месяц, минимум, даты и пересадки помещаются
     только с узкими отступами ячеек, и «на N чел.» должно уезжать на вторую
     строку — иначе таблица шире колонки, и её обрежет overflow обёртки.
     Сами разряды числа склеены неразрывными пробелами и не рвутся. */
  .col-side .feed th, .col-side .feed td { padding-left: 8px; padding-right: 8px; }
  .col-side .feed td.v { white-space: normal; }
  .combos-in {
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
  }

  /* формы: одна колонка по центру — поля шириной в экран никто не читает */
  .onecol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }

  /* «Билеты»: форма и сводка во всю ширину контейнера, ниже две колонки —
     календарь с дешёвыми датами слева, год вперёд справа. */
  .tk { gap: 16px; }
  .tk-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
  }
  .tk-col { gap: 16px; }
  .tk-form, .tk-sum { padding: 20px; }
  /* В колонке 360 px прокручивать ленту мышью неудобно — те же ячейки сеткой */
  .year { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .ycell { min-width: 0; }
}

/* Leaflet рисует свои элементы сам — ему нужен только светлый фон плиток */
.leaflet-container { border-radius: 12px; }