/* ═══════════════════════════════════════════════════════════
   РЕФАГРО Mini App
   Фирменные цвета: #245A7E и белый
   Сетка отступов 4/8, типографика по модульной шкале
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─ Бренд ─ */
  --brand:        #245A7E;
  --brand-700:    #1B4661;
  --brand-800:    #143549;
  --brand-500:    #3A7CA5;
  --brand-300:    #8DB4CD;
  --brand-100:    #DCE8F0;
  --brand-50:     #EEF4F8;

  /* ─ Семантика ─ */
  --surface:      #FFFFFF;
  --surface-sunk: #F7FAFC;
  --canvas:       #F2F7FA;
  --border:       #DAE5ED;
  --border-strong:#C2D5E2;

  --text:         #12212C;   /* 16.4:1 на белом */
  --text-muted:   #566A7A;   /*  5.6:1 на белом */
  --text-faint:   #647688;   /*  4.7:1 — минимум AA для мелкого текста */
  /* Текст без карточки под ним: фон глубокий, поэтому тон темнее.
     5.5:1 на самом плотном участке фона, 9.1:1 на белом. */
  --on-canvas:    #354B5C;
  --on-brand:     #FFFFFF;

  --ok:           #1B6B50;
  --ok-bg:        #E6F3ED;
  --danger:       #B3261E;
  --danger-bg:    #FCEEEC;

  /* ─ Шкала отступов (4 / 8) ─ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* ─ Радиусы ─ */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-full: 999px;

  /* ─ Тени (одна шкала на всё приложение) ─ */
  --e1: 0 1px 2px rgba(18, 52, 74, .06);
  --e2: 0 1px 2px rgba(18, 52, 74, .06), 0 6px 16px rgba(18, 52, 74, .07);
  --e3: 0 2px 6px rgba(18, 52, 74, .08), 0 18px 44px rgba(18, 52, 74, .16);

  /* ─ Движение: единый ритм ─ */
  --fast:  140ms;
  --base:  220ms;
  --slow:  300ms;
  --ease:  cubic-bezier(.32, .72, 0, 1);

  /* ─ Размеры ─ */
  --tabbar-h: 60px;
  --gutter:   16px;

  /* ─ Слои ─ */
  --z-tabbar: 40;
  --z-sheet:  60;
  --z-boot:   80;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* display в классе перебивает браузерное [hidden] { display: none }.
   Без этой строки окно пояснения и вкладка админа показывались бы всегда. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px;          /* базовый кегль: меньше 16 на мобильном вызывает автозум iOS */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3, .num { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ═══════════ Живой фон ═══════════
   Четыре слоя, и ни один не спорит с контентом:
   1. базовый градиент полотна,
   2. цветные пятна — очень медленный дрейф,
   3. топографические линии одним слоем,
   4. зерно — снимает бандинг на градиентах и добавляет фактуру.
   Плотность подобрана так, что цвет читается, но перепад тона
   внутри экрана остаётся мягким — фон не спорит с карточками. */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(112% 68% at 82% 0%,  #BFD8E9 0%, rgba(191, 216, 233, 0) 62%),
    radial-gradient(104% 60% at 2% 100%, #B3CDE1 0%, rgba(179, 205, 225, 0) 64%),
    linear-gradient(180deg, #EAF3F9 0%, #D7E7F1 44%, #C4DAE8 100%);
}

.bg__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(56px);
  will-change: transform;
}

.bg__blob--1 {
  top: -20%; left: -25%;
  width: 82vw; height: 82vw;
  background: radial-gradient(circle, rgba(36, 90, 126, .30) 0%, rgba(36, 90, 126, 0) 70%);
  animation: drift1 68s ease-in-out infinite;
}

.bg__blob--2 {
  top: 26%; right: -32%;
  width: 88vw; height: 88vw;
  background: radial-gradient(circle, rgba(58, 124, 165, .26) 0%, rgba(58, 124, 165, 0) 70%);
  animation: drift2 86s ease-in-out infinite;
}

.bg__blob--3 {
  bottom: -28%; left: 4%;
  width: 74vw; height: 74vw;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 72%);
  animation: drift3 76s ease-in-out infinite;
}

/* Холодный бирюзовый — единственный оттенок вне основной пары.
   Он ломает монохром и читается как «холодная цепь», но берётся
   такой малой плотностью, что воспринимается светом, а не цветом. */
.bg__blob--4 {
  top: 8%; left: 30%;
  width: 62vw; height: 62vw;
  background: radial-gradient(circle, rgba(46, 150, 158, .24) 0%, rgba(46, 150, 158, 0) 68%);
  animation: drift4 94s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(4vw, 3vh, 0) scale(1.06); }
  66%      { transform: translate3d(1vw, 6vh, 0) scale(.97); }
}

@keyframes drift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  40%      { transform: translate3d(-5vw, 4vh, 0) scale(1.04); }
  70%      { transform: translate3d(-2vw, -3vh, 0) scale(.98); }
}

@keyframes drift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(4vw, -5vh, 0) scale(1.05); }
}

@keyframes drift4 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35%      { transform: translate3d(-6vw, 5vh, 0) scale(1.08); }
  70%      { transform: translate3d(3vw, 8vh, 0) scale(.95); }
}

/* ─ Топографические линии ─
   Плитка 600×1200 стыкуется по обеим осям, слой шире экрана ровно на её
   ширину и сдвигается на неё же — петля бесшовная. Движение медленное и
   в одну сторону: контуры должны течь, а не мерцать. */

.lines {
  position: absolute;
  top: -8%;
  left: 0;
  display: block;
  width: calc(100% + 600px);
  height: 116%;
  background-image: url("/static/pattern-lines.svg");
  background-repeat: repeat;
  background-size: 600px 1200px;
  opacity: .13;
  will-change: transform;
  animation: flow 165s linear infinite;
}

@keyframes flow { to { transform: translate3d(-600px, 0, 0); } }

/* ─ Зерно ─
   Статичная текстура: убирает полосы на растяжках градиента
   и даёт поверхности «бумажность». Не анимируется — это дорого. */

.bg__grain {
  position: absolute;
  inset: 0;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ═══════════ Шапка ═══════════ */

.topbar {
  padding: calc(env(safe-area-inset-top) + var(--s5)) var(--gutter) var(--s4);
  background: linear-gradient(165deg, var(--brand) 0%, var(--brand-700) 62%, var(--brand-800) 100%);
  color: var(--on-brand);
}

.topbar__logo {
  display: block;
  height: 24px;
  width: auto;
  max-width: 72%;
}

.topbar__sub {
  margin: var(--s3) 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);   /* 5.9:1 на #1B4661 */
  /* Иначе на 375px «грузов» остаётся одно на второй строке.
     Там, где свойство не поддержано, перенос просто останется обычным. */
  text-wrap: balance;
}

/* ═══════════ Экраны ═══════════ */

.screens {
  padding: var(--s5) var(--gutter)
           calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s8));
}

.screen { display: none; }

.screen.is-active {
  display: block;
  animation: enter var(--base) var(--ease) both;
}

@keyframes enter {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ═══ Шапка экрана ═══
   Текст на фоне с паттерном всегда проигрывает линиям, каким бы цветом
   его ни красить. Поэтому заголовки лежат в фирменном блоке: он держит
   контраст, продолжает язык верхней панели и отделяет экран от ленты. */

.pagehead {
  margin-bottom: var(--s4);
  padding: var(--s4) var(--s5);
  color: var(--on-brand);
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-700) 70%, var(--brand-800) 100%);
  border-radius: var(--r-md);
  box-shadow: 0 4px 16px rgba(20, 53, 73, .18);
}

.pagehead--gap { margin-top: var(--s8); }

.pagehead__t {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
}

.pagehead__s {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 46ch;
  color: rgba(255, 255, 255, .84);
}

/* Подпись секции — не голый текст, а плашка на светлой подложке */
.section-label {
  display: inline-block;
  margin: var(--s8) 0 var(--s3);
  padding: 5px var(--s3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
}

/* ═══════════ Поиск и фильтры ═══════════ */

.toolbar { margin-bottom: var(--s4); }

.search { position: relative; }

.search__icon {
  position: absolute;
  left: 14px; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--text-faint);
  stroke-width: 1.75;
  stroke-linecap: round;
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 46px;
  padding: 0 var(--s4) 0 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
  outline: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.search input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(36, 90, 126, .14);
}

.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.chips {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
  padding-bottom: var(--s1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 var(--s3);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-700);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.chip[aria-pressed="true"] {
  color: var(--on-brand);
  background: var(--brand);
  border-color: var(--brand);
}

.legend__count {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
}

.legend__count:empty { display: none; }

/* ═══════════ Карточки маршрутов ═══════════ */

.cards { display: flex; flex-direction: column; gap: var(--s3); }
.cards--tight { gap: var(--s2); }

.card {
  width: 100%;
  padding: var(--s4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
  cursor: pointer;
  transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.card:active {
  box-shadow: var(--e2);
  border-color: var(--border-strong);
}

.card__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.badge {
  padding: 3px var(--s2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--r-full);
}

.card__type {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.path { display: flex; align-items: center; gap: var(--s3); }

.path__end { flex: 1; min-width: 0; }
.path__end--to { text-align: right; }

.path__city {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.path__country {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.path__link {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--brand-300);
}
.path__link i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.path__link b {
  width: 24px; height: 1.5px;
  background: repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px 6px);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

.fact {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px var(--s2);
  font-size: 12px;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
}

.fact__k { color: var(--text-faint); }
.fact__v { font-weight: 600; color: var(--brand-700); font-variant-numeric: tabular-nums; }

.fact--dates { background: var(--ok-bg); }
.fact--dates .fact__v { color: var(--ok); }

/* ═══════════ Таблица ═══════════ */

.table-head { margin-bottom: var(--s4); }

.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  white-space: nowrap;
}

.table th,
.table td {
  padding: var(--s3) var(--s3);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0;
  background: var(--brand-50);
  border-bottom: 1px solid var(--border-strong);
}

.table thead th button {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 44px;              /* тач-цель по нормативу */
  padding: 0 var(--s3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

/* Маркер сортировки — не только цвет, но и символ */
.th__mark { font-size: 10px; color: var(--brand-500); }
[aria-sort="ascending"]  .th__mark::after { content: "▲"; }
[aria-sort="descending"] .th__mark::after { content: "▼"; }
[aria-sort="none"]       .th__mark::after { content: "↕"; opacity: .35; }

/* Первый столбец закреплён — иначе при прокрутке вбок теряется, о чём строка */
.th--pin, .td--pin {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}

.table thead .th--pin { z-index: 3; background: var(--brand-50); }

.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }

.table tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) .td--pin { background: var(--surface-sunk); }

.table tbody tr { cursor: pointer; }
.table tbody tr:active td,
.table tbody tr:active .td--pin { background: var(--brand-50); }

.td--pin { font-weight: 600; max-width: 168px; overflow: hidden; text-overflow: ellipsis; }
.td--num { font-variant-numeric: tabular-nums; }
.td--muted { color: var(--text-muted); }

/* ═══════════ Формы ═══════════ */

.form { display: flex; flex-direction: column; gap: var(--s5); }

.group {
  margin: 0;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
  overflow: hidden;      /* замыкает float у legend */
}

/* float + width делает legend обычным блоком внутри рамки:
   без этого он «протыкает» верхнюю границу fieldset */
.group__title {
  float: left;
  width: 100%;
  padding: 0 0 var(--s3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Только прямые потомки: иначе отступ протекает внутрь .grid-2
   и второе поле пары съезжает вниз относительно первого */
.group > .field + .field,
.group > .field + .grid-2,
.group > .grid-2 + .field { margin-top: var(--s3); }

.field { display: block; }

.field__label {
  display: block;
  margin-bottom: var(--s1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.field__label em { color: var(--danger); font-style: normal; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;            /* >= 44pt */
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  appearance: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.field textarea { min-height: 76px; resize: vertical; line-height: 1.5; }

.field select {
  padding-right: var(--s8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23566A7A' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s3) center;
  background-size: 11px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(36, 90, 126, .14);
}

.field input[aria-invalid="true"] { border-color: var(--danger); }

.field__hint {
  display: block;
  margin-top: var(--s1);
  font-size: 12px;
  color: var(--text-faint);
}

/* Ошибка стоит под своим полем, а не общим списком наверху */
.field__error {
  display: block;
  margin-top: var(--s1);
  font-size: 12px;
  font-weight: 500;
  color: var(--danger);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; }

.alert {
  margin: 0;
  padding: var(--s3) var(--s4);
  font-size: 13px;
  border-radius: var(--r-sm);
}

.alert--error { color: var(--danger); background: var(--danger-bg); }
.alert--ok    { color: var(--ok);     background: var(--ok-bg); text-align: center; font-weight: 600; }

.fineprint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: var(--text-faint);
}

.btn {
  width: 100%;
  min-height: 50px;
  padding: var(--s3) var(--s5);
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: opacity var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.btn--primary {
  color: var(--on-brand);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
  box-shadow: 0 4px 14px rgba(36, 90, 126, .26);
}

.btn--primary:active { box-shadow: 0 2px 6px rgba(36, 90, 126, .22); }

.btn--ghost {
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--brand-300);
}

.btn[disabled] { opacity: .5; cursor: default; box-shadow: none; }

/* ═══════════ Успех ═══════════ */

.done { padding: var(--s10) var(--s5); text-align: center; }

.done__mark {
  width: 60px; height: 60px;
  margin-bottom: var(--s4);
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.done h2 { margin: 0 0 var(--s2); font-size: 20px; font-weight: 600; }
.done p  { margin: 0 0 var(--s6); font-size: 15px; color: var(--text-muted); }

/* ═══════════ Кабинет ═══════════ */

.profile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
}

.profile__avatar {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--on-brand);
  background: linear-gradient(145deg, var(--brand-500), var(--brand-700));
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.profile__meta { min-width: 0; }
.profile__meta strong { display: block; font-size: 16px; font-weight: 600; }
.profile__meta span   { display: block; font-size: 13px; color: var(--text-faint); }

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-top: var(--s3);
}

.metric {
  padding: var(--s3) var(--s2);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.metric__value {
  display: block;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
}

.metric__label {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-faint);
}

/* Ритм секций: метрики отделяются от формы тем же шагом, что и прочие блоки */
.metrics + .form { margin-top: var(--s5); }

.hist {
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.hist__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
}

.hist__route { font-size: 14px; font-weight: 600; }
.hist__date  { font-size: 12px; color: var(--text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist__meta  { margin-top: 2px; font-size: 13px; color: var(--text-muted); }

/* ═══════════ Пустые состояния и скелетоны ═══════════ */

.empty {
  margin: 0;
  padding: var(--s10) var(--s5);
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-canvas);
}

.skeleton {
  height: 132px;
  border-radius: var(--r-md);
  background: linear-gradient(100deg, #E9EFF4 30%, #F6F9FB 50%, #E9EFF4 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}

@keyframes shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -40% 0; }
}

/* ═══════════ Нижний бар ═══════════ */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-tabbar);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--border);
}

.tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--tabbar-h);
  padding: var(--s2) var(--s1);
  background: none;
  border: 0;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}

.tabbar__item svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabbar__item span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .005em;
}

.tabbar__item.is-active { color: var(--brand); }
.tabbar__item.is-active span { font-weight: 600; }
.tabbar__item.is-active svg { stroke-width: 2; }

/* ═══════════ Карточка маршрута в отдельном окне ═══════════ */

.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); }

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 44, .48);   /* достаточно плотный, чтобы отделить слой */
  animation: fade var(--base) var(--ease) both;
}

.sheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--e3);
  animation: rise var(--slow) var(--ease) both;
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }

.sheet.is-closing .sheet__scrim { animation: fade var(--fast) var(--ease) reverse both; }
.sheet.is-closing .sheet__panel { animation: rise var(--fast) var(--ease) reverse both; }

.sheet__grip {
  width: 38px; height: 4px;
  margin: var(--s2) auto var(--s1);
  background: var(--border-strong);
  border-radius: var(--r-full);
}

.sheet__close {
  position: absolute;
  top: var(--s3); right: var(--s3);
  width: 44px; height: 44px;    /* тач-цель, хотя иконка меньше */
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--text-faint);
  cursor: pointer;
}

.sheet__close svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s3) var(--s5) var(--s5);
  -webkit-overflow-scrolling: touch;
}

.sheet__foot {
  padding: var(--s3) var(--s5) var(--s5);
  border-top: 1px solid var(--border);
}

.sheet__title {
  margin: 0 var(--s8) var(--s1) 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.sheet__sub { margin: 0 0 var(--s5); font-size: 14px; color: var(--text-muted); }

.spec { display: flex; flex-direction: column; gap: 0; }

.spec__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
}

.spec__row:last-child { border-bottom: 0; }
.spec__k { font-size: 13px; color: var(--text-muted); flex: 0 0 auto; }
.spec__v { font-size: 14px; font-weight: 600; text-align: right; }

/* ═══════════ Загрузочный экран ═══════════ */

.boot {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s6);
  padding: var(--s6);
  background: linear-gradient(165deg, var(--brand) 0%, var(--brand-700) 60%, var(--brand-800) 100%);
  transition: opacity var(--slow) var(--ease), visibility var(--slow) var(--ease);
}

.boot.is-gone { opacity: 0; visibility: hidden; }

.boot__logo { width: min(68vw, 280px); }

.boot__bar {
  width: 132px; height: 3px;
  background: rgba(255, 255, 255, .25);
  border-radius: var(--r-full);
  overflow: hidden;
}

.boot__bar i {
  display: block;
  width: 40%; height: 100%;
  background: #FFF;
  border-radius: var(--r-full);
  animation: sweep 1.15s ease-in-out infinite;
}

@keyframes sweep {
  from { transform: translate3d(-110%, 0, 0); }
  to   { transform: translate3d(360%, 0, 0); }
}

.boot__error {
  max-width: 34ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, .94);
}

/* ═══════════ Крупные экраны ═══════════ */

@media (min-width: 600px) {
  :root { --gutter: 24px; }
  .screens { max-width: 680px; margin: 0 auto; }
  .tabbar__item span { font-size: 12px; }
}

/* ═══════════ Уважение к настройкам движения ═══════════ */

@media (prefers-reduced-motion: reduce) {
  .bg__blob { animation: none; }
  .lines { animation: none; }
  .skeleton { animation: none; }
  .boot__bar i { animation: none; width: 100%; }
  .screen.is-active,
  .sheet__scrim,
  .sheet__panel { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ═══════════ Лента плашек с новостями канала ═══════════ */

.reel { margin: 0 0 var(--s5); }

/* Лента выходит в поля экрана, чтобы плашки «уезжали» за край,
   а не обрывались по контейнеру — так понятнее, что её можно листать */
.reel__track {
  display: flex;
  gap: var(--s3);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.reel__track::-webkit-scrollbar { display: none; }

.tile {
  position: relative;
  flex: 0 0 86%;
  scroll-snap-align: center;
  aspect-ratio: 16 / 9;
  display: block;
  padding: 0;
  text-align: left;
  overflow: hidden;
  background: linear-gradient(145deg, var(--brand-500), var(--brand-800));
  border: 0;
  border-radius: var(--r-md);
  box-shadow: var(--e2);
  cursor: pointer;
}

.tile__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Лёгкое приглушение самой картинки: поверх ещё ложится градиент,
     вместе они дают контраст текста выше 4.5:1 на любом снимке */
  filter: brightness(.70) saturate(.95);
}

.tile__veil {
  position: absolute;
  inset: 0;
  /* Верх плашки остаётся светлым, а к зоне текста вуаль набирает плотность:
     на полностью белом снимке белый текст всё равно даёт больше 4.5:1 */
  background: linear-gradient(
    180deg,
    rgba(15, 37, 52, .12) 0%,
    rgba(15, 37, 52, .38) 35%,
    rgba(15, 37, 52, .66) 50%,
    rgba(15, 37, 52, .90) 100%
  );
}

.tile__text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s4);
  color: #FFF;
}

.tile__title {
  margin: 0;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.005em;
  text-shadow: 0 1px 3px rgba(8, 22, 32, .5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile__excerpt {
  margin: var(--s1) 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 3px rgba(8, 22, 32, .5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile__tag {
  position: absolute;
  top: var(--s3); left: var(--s3);
  padding: 3px var(--s2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #FFF;
  background: rgba(10, 28, 40, .55);
  backdrop-filter: blur(6px);
  border-radius: var(--r-full);
}

.reel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s3);
}

.reel__dot {
  width: 6px; height: 6px;
  padding: 0;
  background: var(--border-strong);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: width var(--base) var(--ease), background var(--base) var(--ease);
}

.reel__dot[aria-selected="true"] {
  width: 18px;
  background: var(--brand);
  border-radius: var(--r-full);
}

/* Точки мелкие: расширяем зону нажатия до норматива 44px,
   не меняя их вид — псевдоэлемент растягивается за пределы точки */
.reel__dots { position: relative; padding: 19px 0; margin-top: 0; }
.reel__dot { position: relative; }
.reel__dot::before {
  content: "";
  position: absolute;
  top: -19px; bottom: -19px;
  left: 50%;
  width: 30px;
  transform: translateX(-50%);
}

/* ═══════════ Админ-панель плашек ═══════════ */

.btn-row { display: flex; gap: var(--s3); }

.field input[type="file"] {
  padding: 7px var(--s2);
  line-height: 30px;
}

.field input[type="file"]::file-selector-button {
  margin-right: var(--s3);
  padding: 8px var(--s3);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-50);
  border: 1px solid var(--brand-300);
  border-radius: 8px;
  cursor: pointer;
}

.thumb {
  margin-top: var(--s3);
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.admin-list { display: flex; flex-direction: column; gap: var(--s2); }

/* Две строки: иначе четыре тач-цели по 44px не оставляют места
   заголовку, и он обрезается до трёх букв на экране 375px */
.arow {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "thumb meta"
    "acts  acts";
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.arow__thumb { grid-area: thumb; }
.arow__meta  { grid-area: meta; }

.arow.is-hidden { opacity: .55; }

.arow__thumb {
  flex: 0 0 auto;
  width: 56px; height: 40px;
  background: linear-gradient(145deg, var(--brand-500), var(--brand-800));
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}

.arow__meta { min-width: 0; }

.arow__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arow__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arow__acts {
  grid-area: acts;
  display: flex;
  justify-content: flex-end;
  gap: var(--s1);
  padding-top: var(--s2);
  border-top: 1px solid var(--border);
}

.iconbtn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.iconbtn svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.iconbtn:active { background: var(--brand-50); }
.iconbtn[aria-pressed="true"] { color: var(--brand); background: var(--brand-50); }
.iconbtn--danger { color: var(--danger); }


@media (prefers-reduced-motion: reduce) {
  .reel__track { scroll-behavior: auto; }
}

/* ═══════════ Статусы маршрутов ═══════════ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0;
  background: none;
  border: 0;
}

.dot i {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* Активный: пульсирующее кольцо — «маршрут живой» */
.dot--live i { background: var(--ok); }

.dot--live i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ok);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0%   { transform: scale(.55); opacity: .85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.dot--off i { background: var(--danger); }

/* Недоступный не пульсирует: движение привлекает внимание,
   а привлекать его к тому, чего нет, незачем */
.dot--off i::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--danger);
  opacity: .35;
}

.dot--ask {
  min-width: 26px; min-height: 26px;
  justify-content: center;
  color: var(--brand);
  cursor: pointer;
  border-radius: var(--r-full);
  transition: background var(--fast) var(--ease);
}

/* Вопрос — залитый фирменный кружок с белым знаком: так он читается
   как ровня зелёной и красной точкам, а не как отдельный элемент */
.dot--ask svg { width: 18px; height: 18px; }

.dot--ask .ask-bg  { fill: var(--brand); stroke: none; }
.dot--ask .ask-dot { fill: #FFF; stroke: none; }

.dot--ask .ask-fg {
  fill: none;
  stroke: #FFF;              /* 7.4:1 на фирменном синем */
  stroke-width: 2.2;
  stroke-linecap: round;
}

.dot--ask:active { background: var(--brand-50); }

.dot__label { font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1; }
.dot--live .dot__label { color: var(--ok); }
.dot--off  .dot__label { color: var(--danger); }
.dot--ask  .dot__label { color: var(--brand); }

/* Легенда со счётчиками по статусам */
.legend {
  display: flex;
  flex-wrap: wrap;
  /* align-items по умолчанию растягивает элементы по высоте строки,
     и текст в пилюле прилипал к верху вместо центра */
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.legend:empty { display: none; }

/* Одна геометрия на все пилюли строки, иначе они разной высоты */
.legend__item,
.legend__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--s3);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  line-height: 1;
}

.legend__item { gap: 6px; }

.legend__item b {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Недоступный маршрут в списке приглушён, но остаётся читаемым */
.card--off { background: rgba(255, 255, 255, .8); }

.card--empty { cursor: default; padding: 0; }
.card--empty:active { box-shadow: var(--e1); border-color: var(--border); }
.card--off .path__city { color: var(--text-muted); }

/* ═══════════ Переключатель группировки ═══════════ */

.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  margin-bottom: var(--s4);
  padding: 3px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.seg {
  min-height: 38px;
  padding: 0 var(--s2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.seg.is-on {
  color: var(--on-brand);
  background: var(--brand);
  font-weight: 600;
}

/* ═══════════ Группы строк в таблице ═══════════ */

.grouprow th {
  position: sticky;
  left: 0;
  padding: var(--s2) var(--s3);
  background: var(--brand-50);
  border-bottom: 1px solid var(--border-strong);
  text-align: left;
}

.grouprow span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-700);
}

.grouprow b {
  margin-left: var(--s2);
  padding: 1px 7px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  background: var(--surface);
  border-radius: var(--r-full);
}

.td--status { text-align: center; }
.table tbody tr.is-off .td--pin { color: var(--text-muted); }

/* ═══════════ Окно «по запросу» ═══════════ */

.note {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: var(--s5);
}

.note__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 30, 44, .52);
  animation: fade var(--base) var(--ease) both;
}

.note__box {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: var(--s6) var(--s5) var(--s5);
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--e3);
  animation: pop var(--slow) var(--ease) both;
}

@keyframes pop {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}

.note.is-closing .note__scrim { animation: fade var(--fast) var(--ease) reverse both; }
.note.is-closing .note__box   { animation: pop var(--fast) var(--ease) reverse both; }

.note__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto var(--s4);
  color: var(--brand);
  background: var(--brand-50);
  border-radius: 50%;
}

.note__icon svg {
  width: 30px; height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.note__icon .note__dot { fill: currentColor; stroke: none; }

.note__title {
  margin: 0 0 var(--s2);
  font-size: 18px;
  font-weight: 600;
}

.note__text {
  margin: 0 0 var(--s5);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Пояснение прямо в карточке маршрута */
.sheet__status { margin: 0 0 var(--s3); }

.sheet__note {
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--brand-300);
}

@media (prefers-reduced-motion: reduce) {
  .dot--live i::after { animation: none; opacity: .3; transform: scale(1); }
  .note__scrim, .note__box { animation: none; }
}

/* ═══════════ Вход в админ-панель из кабинета ═══════════ */

.adminlink {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  margin-top: var(--s8);
  padding: var(--s4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.adminlink:active { border-color: var(--brand-300); box-shadow: var(--e2); }

.adminlink__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  color: var(--brand);
  background: var(--brand-50);
  border-radius: var(--r-sm);
}

.adminlink__icon svg,
.adminlink__chev svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

.adminlink__text { flex: 1; font-size: 15px; font-weight: 600; }
.adminlink__chev { flex: 0 0 auto; color: var(--text-faint); display: grid; place-items: center; }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: var(--s2);
  padding: 0 var(--s2) 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-700);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 0 var(--s3) 0 var(--s2);
  cursor: pointer;
}

.backlink svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ═══════════ Статистика ═══════════ */

.stats { display: flex; flex-direction: column; gap: var(--s3); }

.statblock {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
}

.statblock__h {
  margin: 0 0 var(--s3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.statblock__sub {
  margin: var(--s5) 0 var(--s3);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* ─ Крупные числа: итоги читаются числом, а не графиком ─ */

.tile-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
}

.tile-row + .tile-row { margin-top: var(--s2); }
.tile-row--2 { grid-template-columns: repeat(2, 1fr); }
.tile-row--4 { grid-template-columns: repeat(2, 1fr); }

.tile-stat {
  padding: var(--s3) var(--s2);
  text-align: center;
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
}

.tile-stat__v {
  display: block;
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
}

.tile-stat__l {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
  /* Плитка стоит на притенённом фоне, поэтому тон на ступень темнее:
     на --text-faint контраст падал до 4.46 при норме 4.5 */
  color: var(--text-muted);
}

/* ─ Столбики за неделю ─ */

.wchart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s1);
  height: 118px;
  margin-top: var(--s4);
  padding-top: var(--s2);
}

.wbar {
  display: grid;
  grid-template-rows: 16px 1fr 16px;
  align-items: end;
  justify-items: center;
  height: 100%;
}

.wbar__val {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
}

/* Подписан только пик: число над каждым столбиком превращает график в таблицу */
.wbar__val.is-mute { color: transparent; }

.wbar__col {
  width: 72%;
  max-width: 26px;
  /* Скруглён только верх — низ остаётся приклеенным к базовой линии */
  border-radius: 4px 4px 0 0;
  background: var(--brand);
  align-self: end;
}

.wbar__col.is-zero { background: var(--border-strong); border-radius: 2px; }

.wbar__day {
  align-self: end;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

/* ─ Горизонтальные полосы распределений ─ */

.brow {
  display: grid;
  grid-template-columns: 82px 1fr 34px;
  align-items: center;
  gap: var(--s2);
  padding: 5px 0;
}

.brow__l {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brow__track {
  height: 8px;
  background: var(--surface-sunk);
  border-radius: var(--r-full);
  overflow: hidden;
}

.brow__fill {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: var(--r-full);
  transition: width var(--slow) var(--ease);
}

/* Статусные цвета зарезервированы и всегда идут с подписью слева */
.fill--active      { background: var(--ok); }
.fill--on_request  { background: var(--brand-500); }
.fill--unavailable { background: var(--danger); }

.brow__v {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .brow__fill { transition: none; }
}

/* ═══════════ Фильтр по статусу ═══════════ */

.legend__item {
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}

/* Выбранный фильтр держится цветом своего статуса, а не общим синим:
   так видно не только что фильтр включён, но и какой именно */
.legend__item[aria-pressed="true"] {
  background: var(--surface);
  border-color: var(--brand-300);
  box-shadow: 0 0 0 2px rgba(36, 90, 126, .16);
}

.legend__item[aria-pressed="true"] b { color: var(--brand-700); }

/* Невыбранные приглушаются, пока фильтр активен */
.legend:has([aria-pressed="true"]) .legend__item[aria-pressed="false"] { opacity: .55; }

.legend__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 var(--s3);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  background: rgba(255, 255, 255, .86);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  animation: chip-in var(--base) var(--ease) both;
}

.legend__clear svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round;
}

@keyframes chip-in {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none; }
}

/* Маркер внутри пилюли-фильтра некликабелен: нажатие обрабатывает пилюля */
.dot--static { pointer-events: none; }
.dot--static .dot__ask { width: 18px; height: 18px; }

/* Появление карточек после смены фильтра: лесенкой, но коротко */
.cards--enter .card {
  animation: card-in 280ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 38ms);
}

@keyframes card-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cards--enter .card,
  .legend__clear { animation: none; }
}

/* Маркер без подписи получает одинаковый бокс у всех трёх статусов.
   Иначе точка 9px и знак вопроса 18px садятся на разную линию, и в
   столбце «Статус» вопрос заметно уезжает относительно точек. */
.dot--icon {
  width: 24px;
  height: 24px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  justify-content: center;
  vertical-align: middle;
}

.td--status .dot--icon,
.card__head .dot--icon { display: inline-flex; }

/* Чипы фильтра — кнопки, а не подписи, поэтому зона нажатия дотягивается
   до 44px по вертикали. Сама пилюля остаётся 38px, чтобы строка фильтра
   не разрасталась на три ряда. */
.legend__item,
.legend__clear { position: relative; }

.legend__item::before,
.legend__clear::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -3px; bottom: -3px;
}