/*
 * Шрифты — самохост, .woff2 под контент-хешированной раздачей.
 *
 * Те же четыре лица, что у прототипа (design/prototype/fonts.css, сгенерирован
 * design/tools/buildfonts.py): семейство, ось веса, unicode-range совпадают —
 * TestVendoredFontFacesMatchThePrototypeDescriptors сверяет. Различие одно и вынужденное:
 * у прототипа src — data-URI, а CSP продукта держит font-src 'self', который data: НЕ
 * пускает, поэтому здесь ссылки на файлы. Ссылки — ЛОГИЧЕСКИЕ имена ("/app/static/<файл>");
 * assets.go переписывает их на хешированный URL до того, как хеширует бандл — см.
 * rewriteAssetURLs. Провенанс и лицензия (SIL OFL) — FONTS.md.
 */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/app/static/unbounded-cyrillic.c3880f0c.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/app/static/unbounded-latin.d7f07f8a.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: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/app/static/onest-cyrillic.c3f42230.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/app/static/onest-latin.cc61cbd6.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;
}

/*
 * proto.css — визуальная система прототипа Mini App.
 *
 * Мир: «Ночь + Лёд» — тёмный графит с синевой, раскалённый красный и лестница
 * нейтралей. Выбран владельцем 2026-09-13 из трёх грунтов и четырёх температур;
 * отвергнутые варианты записаны в DESIGN.md как решение, а не оставлены кодом.
 *
 * Три диагноза владельца, которые сформировали этот файл:
 *   1. «Похоже на сайт РЖД» — шрифт транспортной навигации, единственный
 *      насыщенный тон, нулевая глубина, таблично-бланковая структура. Сняты все
 *      четыре: Unbounded + Onest, пять ролей, живой свет и зерно, карточки-приборы.
 *   2. «Яркие и ядовитые» — четыре насыщенные палитры по всему экрану. Разбор
 *      референса по пикселям показал, что дело в ПЛОЩАДИ и ЧИСЛЕ МЕСТ, а не в
 *      тоне: в референсе акцент раскалённый, но занимает 0.22% кадра.
 *   3. «Расширим палитру» — но каждая роль обязана иметь повод, иначе цвет
 *      снова станет декором. Ролей ровно пять, шестой тон палитра не держит.
 *
 * Движение: авторская кульминация одна — ФИКСАЦИЯ (драфт замерзает и прогноз
 * становится заявкой). Всё остальное — поддержка: живая среда, прорисовка
 * данных, непрерывность переходов, микро-отклик.
 *
 * Контракт направления: .impeccable/surfaces/design-prototype-index-html.md
 */

/* ================================== МИР · «НОЧЬ + ЛЁД» · ВЫБОР ВЛАДЕЛЬЦА */
/*
 * Выбрано владельцем 2026-09-13 из трёх грунтов и четырёх температур. Здесь
 * остался только выбранный мир: отвергнутые варианты — решение, а не код, и
 * живут в DESIGN.md как история, а не мёртвыми ветками в CSS.
 *
 * Правило мира — ПЛОЩАДЬ, А НЕ НАСЫЩЕННОСТЬ. Референс `references/_ (14).jpeg`
 * разобран по пикселям: акцент там раскалённый (#f63606) и занимает 0.22%
 * кадра; грунт — графит со световым скатом; плитки ТЕМНЕЕ грунта; весь
 * диапазон несёт лестница нейтралей. Здесь цвета ≈0.4% — пять ролей, у каждой
 * повод. Крупные числа, заголовки разделов и хром намеренно нейтральны: именно
 * там в прошлой итерации начиналась ядовитость.
 *
 * Роли и только они:
 *   красный  #f63606 — модель и «в эфире»   (текст берёт --accent-ink: 4.37 против 5.79)
 *   лёд      #3fb6c4 — книга, линия
 *   латунь   #d79a3c — деньги, кэфы
 *   мята     #62cf7d — «зашло»              ⎫ различаются И тоном, И формой:
 *   роза     #e2657a — «мимо»               ⎭ сплошная рамка против пунктирной
 *   камень   #a3958c — другая сторона        (наша берёт красный модели)
 * Шестого насыщенного тона нет и не должно быть: маленькая тёмная палитра его
 * не держит — проверено, стороны на производном от книги тоне сливались с ней.
 */

:root {
  color-scheme: dark;

  /* Грунт «Ночь»: графит с синевой; панель ТЕМНЕЕ грунта — отношение из референса. */
  --bg: #15171a;
  --bg-2: #1a1d21;
  --panel: #0e1012;
  --panel-2: #141719;
  --line: rgba(226, 238, 255, .085);
  --line-soft: rgba(226, 238, 255, .045);

  /* Лестница нейтралей — она несёт весь диапазон вместо цвета. */
  --ink: #eef1f4;     /* 15.8:1 */
  --ink-2: #aab2ba;   /*  8.4:1 */
  --ink-3: #838b93;   /*  5.2:1 — самая тусклая читаемая ступень */

  --accent: #f63606;      /* замерено в референсе; только заливки, метки, обводки */
  --accent-ink: #ff5a35;  /* 5.8:1 — везде, где акцент несёт текст */

  --c-line-c: #3fb6c4;
  --c-line-ink: #3fb6c4;
  --c-money: #d79a3c;
  --c-ok: #62cf7d;
  --c-bad: #e2657a;
  --c-live: var(--accent);
  --c-a: var(--accent);
  --c-b: #a3958c;     /* тёплый камень против холодной книги — иначе роли сливаются */
  --c-self: var(--accent);
  --c-none: #8b8f96;

  /* Свет, а не цветные пятна: источник «немонотонности» без единого лишнего тона. */
  --atmo-1: rgba(160, 196, 238, .13);
  --atmo-2: rgba(226, 238, 255, .07);
  --atmo-3: rgba(120, 150, 190, .10);
  --atmo-op: 1;
  --grain-op: .045;

  --font-display: "Unbounded", "Trebuchet MS", sans-serif;
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-micro: 10.5px; --t-cap: 11.5px; --t-sm: 12.5px; --t-body: 14px;
  --t-md: 16px; --t-lg: 20px; --t-xl: 26px; --t-2xl: 34px; --t-3xl: 46px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 22px; --s6: 30px; --s7: 44px;

  --gutter: 16px;
  --measure: 660px;
  --tap: 44px;

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  /* Зерно: монохромный фрактальный шум, тайл 160px. Снимает «плоскую заливку»
     с тёмного фона — главную примету бланка. */
  --grain-src: 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)'/%3E%3C/svg%3E");

  /* Тени со смещением и мягким размытием — не «нулевой цветной ореол». */
  --sh-1: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.34);
  --sh-2: 0 2px 6px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.5);
  --sh-3: 0 -4px 18px rgba(0,0,0,.4), 0 -22px 70px rgba(0,0,0,.6);

  /* Кривые. Экспоненциальный выкат — «уверенное прибытие». */
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
  --d-fast: 130ms; --d-base: 240ms; --d-slow: 420ms;
}

/* Наша сторона против другой — в разборе и на осях драфта. Больше нигде
   [data-side] цвет не меняет. */
[data-side="a"] { --c-self: var(--c-a); }
[data-side="b"] { --c-self: var(--c-b); }

/* ==================================================== СБРОС И ПОВЕРХНОСТИ */

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-body)/1.55 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Браузерные поверхности тоже принадлежат системе. */
::selection { background: color-mix(in srgb, var(--c-self) 38%, transparent); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--panel-2); border-radius: var(--r-pill);
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--line); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--c-self);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

a { color: inherit; }

/* ============================================================== АТМОСФЕРА */
/* Три пятна света, медленно дрейфующие, плюс зерно поверх. Слой фиксирован,
   не участвует в потоке и не перехватывает события. Останавливается, когда
   вкладка скрыта или включён reduced motion. */

.atmo {
  position: fixed; inset: -25%;
  z-index: 0; pointer-events: none;
  opacity: var(--atmo-op);
  filter: blur(46px) saturate(125%);
  contain: layout paint style;
}
.atmo i {
  position: absolute; display: block;
  border-radius: 50%;
  will-change: transform;
}
.atmo i:nth-child(1) {
  width: 62%; height: 46%; left: -8%; top: 2%;
  background: radial-gradient(circle at 50% 50%, var(--atmo-1), transparent 68%);
  animation: drift-a 34s var(--ease-io) infinite alternate;
}
.atmo i:nth-child(2) {
  width: 70%; height: 52%; right: -14%; top: 22%;
  background: radial-gradient(circle at 50% 50%, var(--atmo-2), transparent 68%);
  animation: drift-b 46s var(--ease-io) infinite alternate;
}
.atmo i:nth-child(3) {
  width: 58%; height: 44%; left: 10%; bottom: -6%;
  background: radial-gradient(circle at 50% 50%, var(--atmo-3), transparent 70%);
  animation: drift-c 58s var(--ease-io) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(24%, 16%, 0) scale(1.22); } }
@keyframes drift-b { to { transform: translate3d(-20%, 22%, 0) scale(1.15); } }
@keyframes drift-c { to { transform: translate3d(18%, -20%, 0) scale(1.3); } }

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--grain-op);
  mix-blend-mode: overlay;
  background-image: var(--grain-src);
  background-size: 160px 160px;
}

/* Всё содержимое — над атмосферой. Демо-панель (#demo) стилизована в demo.css, линкуемом
   после этого файла — она не часть перенесённой дизайн-системы. */
.app-frame { position: relative; z-index: 3; }

/* ============================================================ ТИПОГРАФИКА */

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
}
.lbl {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }

/* ============================================================== ОБОЛОЧКА */

.app-frame {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--s6) + env(safe-area-inset-bottom));
}
.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

/* .hd-group pins the title AND the tab strip as ONE sticky unit. Each used to stick
   independently — .hd at top:0, .nav at a hand-tuned top:58px guessed at .hd's height — and
   the guess drifted from .hd's ACTUAL rendered height (measured 51px, not 58px) the moment
   real content replaced the design-time fixture, sticking .nav 7px into whatever the screen's
   own content drew next (panel.html.tmpl's .seg, measured overlapping it by that same 7px).
   One sticky ancestor with two static children can't drift: neither child guesses the other's
   height, so there is no number here to go stale.

   The fade+blur live HERE too, as ONE gradient over the whole group, not one on .hd AND
   another on .nav — two adjacent gradients each restart at their own top (.hd fades OUT to
   transparent by its own bottom, .nav immediately fades back IN to solid at ITS top), and
   that restart is a real, visible seam: opacity drops to 0 then jumps back to 1 within a
   couple of pixels at the .hd/.nav boundary — reported live as the tab row looking like it
   sits in its own bordered strip, because .nav's re-solid top makes it read as a separate
   opaque box under the softer .hd above it. One continuous gradient has nowhere to restart. */
.hd-group {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(to bottom, var(--bg) 67%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hd {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4) var(--gutter) var(--s3);
}
.hd h1 {
  font-family: var(--font-display);
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15;
  min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hd-count {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-cap); color: var(--ink-3);
  letter-spacing: .04em;
}
.hd-count b { color: var(--ink); font-weight: 600; }
.hd-count[hidden] { display: none; }
.hd-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: -8px;
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.hd-back:active { transform: scale(.9); }
.hd-back .ic { width: 17px; height: 17px; }
.hd-back[hidden], .nav[hidden] { display: none; }

.nav {
  display: flex; gap: var(--s1);
  padding: 0 var(--gutter) var(--s3);
}
.tab {
  appearance: none; border: 0; cursor: pointer;
  font: 600 var(--t-sm)/1 var(--font);
  letter-spacing: .02em;
  color: var(--ink-3);
  background: transparent;
  min-height: 40px; padding: 11px 16px;
  border-radius: var(--r-pill);
  transition: color var(--d-fast) var(--ease), background var(--d-base) var(--ease);
}
.tab:hover { color: var(--ink-2); }
.tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 700;
}

main { flex: 1; }

.ft {
  margin-top: var(--s6);
  padding: var(--s4) var(--gutter) 0;
  color: var(--ink-3);
  font-size: var(--t-cap);
  line-height: 1.6;
  border-top: 1px solid var(--line-soft);
}

/* ================================================================= ИКОНКИ */
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; flex: none; }

/* ==================================================== ПАНЕЛЬ — БАЗОВЫЙ МАТЕРИАЛ */
/* Полупрозрачная поверхность поверх живого фона: пятна света просвечивают, и
   поэтому панель не выглядит бланком. Светлая волосяная линия сверху — блик. */

.pan {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.pan::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 42%, transparent) 34%, transparent 74%);
  pointer-events: none;
}

/* ======================================================== ЛЕНТА · ЗАГОЛОВОК */

.sec { margin-top: var(--s5); }
.sec-h {
  display: flex; align-items: center; gap: var(--s2);
  padding: 0 var(--gutter) var(--s3);
}
.sec-h h2 {
  font-family: var(--font-display);
  font-size: var(--t-cap);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sec-h .rule { flex: 1; height: 1px; background: var(--line-soft); }
.sec-h .cnt { font-size: var(--t-cap); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Which clock the section's times are on («по МСК», «по UTC+4») — the viewer's own, named once
   per list instead of on every row. Same quiet voice as the count beside it. */
.sec-h .sec-tz {
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.sec-h.is-live h2 { color: var(--ink-2); }

.cards { display: flex; flex-direction: column; gap: var(--s3); padding: 0 var(--gutter); }

/* =========================================================== КАРТОЧКА МАТЧА */
/* Четыре структурно РАЗНЫЕ карточки, а не одна с разным текстом: живая с
   заявкой, живая без заявки, потерянное наблюдение, предстоящая. Ритм ленты
   держится на этой разнице. */

.mc {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  position: relative;
  overflow: hidden;
  transition: transform var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease);
}
.mc:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: var(--sh-2); }
.mc:active { transform: translateY(0) scale(.992); transition-duration: var(--d-fast); }
.mc::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 40%, transparent) 30%, transparent 72%);
}

/* Живая карточка ПОДСВЕЧЕНА, а не покрашена. Прежние 20% акцента в радиальной
   заливке тонировали всю плитку в бурый — грунт переставал быть графитом.
   Состояние несёт тег со словом; поверхность лишь чуть приподнята светом. */
.mc.is-live::after {
  content: ""; position: absolute; inset: -40% -30% auto -30%; height: 130%;
  background: radial-gradient(ellipse at 28% 0%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 60%);
  pointer-events: none;
  opacity: 0;
  animation: glow-in var(--d-slow) var(--ease) forwards;
}
@keyframes glow-in { to { opacity: 1; } }

.mc-top {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3);
  position: relative;
}
.mc-league {
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.35;
  /* В две колонки на десктопе карточка ~310px, и одна строка имя турнира не
     держит: пять из шести обрезались. Вертикальное место рядом свободно —
     переносим на вторую строку вместо усечения. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-top .tag { margin-left: auto; flex: none; }

/* Пара команд: герб · имя · процент. Процент есть не всегда — и это видно. */
.mc-teams { display: flex; flex-direction: column; gap: var(--s2); position: relative; }
.mc-team {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: var(--s3);
  min-height: 28px;
}
.crest {
  width: 26px; height: 26px;
  object-fit: contain;
  border-radius: var(--r-xs);
}
.crest-mono {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  font: 600 9px/1 var(--font-display);
  letter-spacing: .04em;
  color: var(--ink-3);
}
.mc-name {
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: -.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mc-team.is-lead .mc-name { color: var(--ink); font-weight: 600; }
.mc-team:not(.is-lead) .mc-name { color: var(--ink-2); }
.mc-pct {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}
.mc-team:not(.is-lead) .mc-pct { color: var(--ink-3); font-weight: 500; font-size: var(--t-md); }
.mc-score {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mc-score small {
  font-family: var(--font);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.mc-team + .mc-team .mc-score small { visibility: hidden; }

/* Нижняя полоса живых показаний. */
.mc-live {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.mc-fig { display: inline-flex; align-items: baseline; gap: 5px; }
.mc-fig .v { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.mc-fig .k { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mc-price {
  margin-left: auto;
  font-size: var(--t-sm);
  color: var(--c-money);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mc-price .bk { color: var(--ink-3); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; margin-right: 5px; }
.mc-note { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; position: relative; }

/* Предстоящая — сознательно суше: ни бара, ни живых показаний. */
.mc.is-soon { padding: var(--s3) var(--s4); }
.mc.is-soon .mc-teams { gap: 5px; }
.mc.is-soon .mc-name { font-size: var(--t-body); }
.mc.is-soon .crest, .mc.is-soon .crest-mono { width: 22px; height: 22px; }
.mc.is-soon .mc-team { grid-template-columns: 22px 1fr auto; min-height: 24px; }
.mc-when {
  font-family: var(--font-display);
  font-size: var(--t-lg); font-weight: 600; color: var(--ink);
  line-height: 1; letter-spacing: -.02em;
}

/* Потерянное наблюдение — приглушена целиком, свечения нет. */
.mc.is-lapsed { background: transparent; border-style: dashed; border-color: var(--line-soft); box-shadow: none; }
.mc.is-lapsed .mc-name { color: var(--ink-3); }

/* ============================================================ ТЕГ СТАТУСА */
/* Слово несёт статус всегда; цвет — только добавка. */

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px 4px 8px;
  border-radius: var(--r-pill);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line);
  color: var(--ink-3);
  background: var(--panel);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.tag.is-live {
  color: var(--accent-ink);   /* 5.4:1 — сам --accent даёт 4.37 и для текста не годится */
  border-color: color-mix(in srgb, var(--c-live) 55%, transparent);
  background: color-mix(in srgb, var(--c-live) 13%, transparent);
}
.tag.is-live .dot { background: var(--c-live); }
.tag.is-live .dot { animation: pulse 2s var(--ease-io) infinite; }
.tag.is-hit  { color: var(--c-ok); background: color-mix(in srgb, var(--c-ok) 16%, transparent);
               border-color: var(--c-ok); border-style: solid; font-weight: 700; word-spacing: .16em; }
.tag.is-miss { color: var(--c-bad); background: color-mix(in srgb, var(--c-bad) 15%, transparent);
               border-color: var(--c-bad); border-style: dashed; font-weight: 700; }
.tag.is-soon { color: var(--ink-3); }
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  55%      { opacity: .45; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent); }
}

/* ==================================== ПАРНЫЙ КАНАЛ — СИГНАТУРНЫЙ ПРИБОР */
/* Модель и линия на ОДНОЙ оси 0–100. Модель — заливка со светящейся головкой,
   линия — рейка с засечками и маркером. Настоящая история продукта в том, что
   эти два числа почти совпадают, поэтому дельта показана отдельно и крупно:
   прибор обязан делать читаемым именно маленькое расхождение. */

.chan { margin-top: var(--s4); position: relative; }
.chan-row {
  display: grid;
  grid-template-columns: 78px 1fr 46px;
  align-items: center;
  gap: var(--s3);
  min-height: 22px;
}
.chan-row + .chan-row { margin-top: 7px; }
.chan-k {
  font-size: var(--t-micro);
  font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3);
  min-width: 0;
}
.chan-k b {
  display: -webkit-box; margin-top: 2px;
  font-size: 10px; font-weight: 600; letter-spacing: .01em; text-transform: none;
  overflow: hidden; overflow-wrap: anywhere; line-height: 1.25;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.chan-row.is-model .chan-k b { color: var(--ink-2); }
.chan-row.is-line .chan-k b { color: var(--c-line-ink); }
.chan-v {
  font-family: var(--font-display);
  font-size: var(--t-sm); font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.chan-track { position: relative; height: 10px; }

/* Канал модели — СЕГМЕНТИРОВАННЫЙ. Штрих одной ширины (5px через 2px) —
   единица измерения всей системы: тот же штрих несут бары на «Точности».
   Поэтому прибор и графики говорят на одном языке, а площадь акцента остаётся
   вдвое меньше, чем у сплошной заливки. */
.chan-fill {
  position: absolute; inset: 1px auto 1px 0;
  width: var(--pct, 0%);
  background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 7px);
  transition: width 620ms var(--ease);
}
.chan-bed {
  position: absolute; inset: 1px 0;
  background: repeating-linear-gradient(90deg, var(--line-soft) 0 5px, transparent 5px 7px);
}
.chan-head {
  position: absolute; top: -1px; bottom: -1px;
  left: var(--pct, 0%);
  width: 2px; margin-left: -1px;
  border-radius: 2px;
  background: var(--ink);
  transition: left 620ms var(--ease);
}
.chan-row.is-model .chan-v { color: var(--ink); }

/* Канал линии — рейка, не заливка: книга это опора, а не наш показатель. */
.chan-rail {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; margin-top: -.5px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--c-line-c) 45%, transparent) 0 1px, transparent 1px 5px);
}
.chan-mark {
  position: absolute; top: 0; bottom: 0;
  left: var(--pct, 0%);
  width: 8px; margin-left: -4px;
  transition: left 620ms var(--ease) 90ms;
}
.chan-mark::before {
  content: ""; position: absolute; left: 3px; top: 0; bottom: 0;
  width: 2px; border-radius: 2px;
  background: var(--c-line-c);

}
.chan-row.is-line .chan-v { color: var(--c-line-ink); }

/* Дельта — то, ради чего прибор существует. */
.chan-delta {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
}
.chan-delta .d-v {
  font-family: var(--font-display);
  font-size: var(--t-md); font-weight: 600;
  letter-spacing: -.02em;
}
.chan-delta.is-over  .d-v { color: var(--ink); }
.chan-delta.is-under .d-v { color: var(--ink-2); }
.chan-delta .d-k { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.4; }

/* Ступенчатая шкала под каналами — читается как измерительный прибор. */
.chan-scale {
  display: flex; justify-content: space-between;
  margin-top: 6px; padding: 0 0 0 90px;
  font-size: 9.5px; letter-spacing: .08em; color: var(--ink-3);
}

/* ================================================== ЭКРАН СОБЫТИЯ · ШАПКА */

.scr { padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--s3); }

.ev { padding: var(--s4); }
.ev-meta {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
  position: relative;
}
.ev-meta .tag { margin-left: auto; }

.ev-face {
  display: grid;
  /* ⚠️ minmax(0, 1fr), NOT a bare 1fr. A bare 1fr is minmax(auto, 1fr) — its floor is its own
     content's max-content, so the auto column (the figure) still gets first claim on any width
     the names column's content would otherwise need. Measured: the caption under the big %
     (.ev-pct-k) grew this auto track to its own unwrapped max-content BEFORE the names got a
     chance at the remaining space, truncating real team names to "Tea…"/"Co…". A 0 floor plus
     .ev-fig's own max-width below are the two halves of the fix — either alone still starves
     the names whenever the OTHER side of the grid is the one that grows. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  position: relative;
}
.ev-sides { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.ev-side { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: var(--s3); min-width: 0; }
.ev-side .crest, .ev-side .crest-mono { width: 30px; height: 30px; }
.ev-team {
  font-family: var(--font-display);
  font-size: var(--t-md); font-weight: 500; letter-spacing: -.03em; line-height: 1.2;
  overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ev-side.is-lead .ev-team { color: var(--ink); font-weight: 600; }
.ev-side:not(.is-lead) .ev-team { color: var(--ink-3); }

/* max-width caps what the grid's auto column may claim — see .ev-face's own comment above.
   112px fits the widest realistic caption ("модель · без драфта") at --t-micro without ever
   growing past the 46px figure's own natural width by more than this. */
.ev-fig { text-align: right; line-height: 1; max-width: 112px; }
.ev-pct {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -.045em;
  color: var(--ink);
  display: block;
}
.ev-pct small { font-size: .44em; font-weight: 500; margin-left: 1px; letter-spacing: 0; }
.ev-pct-k {
  display: block;
  margin-top: 7px;
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
  overflow-wrap: anywhere; line-height: 1.3;
}
/* Full width, below .ev-face — NOT inside its grid. .ev-face is a two-column grid sized for a
   short figure (a percentage); .ev-nocall's own sentence is far wider, and left inside that
   grid it grew the auto column at the team-name column's expense (measured: real team names
   truncating to "Zero Ten…"/"Team Ly…" that the prototype's own short fixture names never
   revealed). Same slot .ev-delta already uses below the face — margin-top: var(--s4), full
   width, nothing to squeeze. */
.ev-nocall {
  font-size: var(--t-body); color: var(--ink-3); font-style: italic; line-height: 1.5;
  margin-top: var(--s4);
}

/* Дельта драфта — «55% → 61%» — отдельная строка: это событие, а не показатель. */
.ev-delta {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4);
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--ink-2);
  position: relative;
}
.ev-delta .num { color: var(--ink); font-weight: 600; }
.ev-delta .ic { color: var(--ink-3); }

/* ======================================================= ЖИВЫЕ ПОКАЗАНИЯ */

.lv { padding: var(--s4); }
.lv-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); position: relative; }
.lv-figs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  position: relative;
}
.lv-fig { min-width: 0; }
.lv-fig .v {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl); font-weight: 600; letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.lv-fig.is-hot .v { color: var(--ink); }
.lv-fig .k {
  display: block; margin-top: 7px;
  font-size: var(--t-micro); letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3);
}
.lv-seen {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--ink-3);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  position: relative;
}
.lv-wait {
  font-size: var(--t-body); color: var(--ink-3); font-style: italic; line-height: 1.55;
  position: relative;
}
.lv-net { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-2); position: relative; }

/* Изменившееся значение получает след — подчёркивание под текстом, не поверх. */
.trail { position: relative; }
.trail.is-changed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  border-radius: 2px;
  background: var(--c-live);
  transform-origin: left;
  animation: trail 900ms var(--ease) forwards;
}
@keyframes trail {
  0%   { transform: scaleX(0); opacity: 1; }
  38%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ============================================================ ИНФО-БЛОКИ */

.blk { padding: var(--s4); }
.blk-h {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s3);
  position: relative;
}
.blk-h .ic { width: 13px; height: 13px; color: var(--ink-3); }
.blk p { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); position: relative; }
.blk p + p { margin-top: var(--s3); }
.blk .foot { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55; }

/* ============================================================ СПИСОК КАРТ */

.maps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.map {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: var(--s3);
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
a.map:hover { background: var(--panel-2); }
a.map:active { transform: scale(.99); }
.map.is-pending { background: transparent; border-style: dashed; }
.map-no {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font: 600 var(--t-cap)/1 var(--font-display);
  color: var(--ink-3);
}
.map.is-live .map-no { border-color: color-mix(in srgb, var(--c-live) 55%, transparent); color: var(--c-live); }
.map-body { min-width: 0; }
.map-t { display: block; font-size: var(--t-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-s { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: 1px; }
.map.is-pending .map-t { color: var(--ink-3); font-style: italic; }
.map-model { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--r-pill);
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--ink-3); white-space: nowrap;
}
.pill.is-hit  { color: var(--c-ok); background: color-mix(in srgb, var(--c-ok) 16%, transparent);
                border-color: var(--c-ok); border-style: solid; font-weight: 700; word-spacing: .16em; }
.pill.is-miss { color: var(--c-bad); background: color-mix(in srgb, var(--c-bad) 15%, transparent);
                border-color: var(--c-bad); border-style: dashed; font-weight: 700; }

/* ================================================================ РЫНОК */

.mk { list-style: none; margin: 0; padding: 0; }
.mk-row {
  /* A BLOCK PER BOOK (the book line, then .mk-sides below it) — one column, not the old
     "book | A | B" three-column table. Still display:grid: app.css's is-open rule reveals the
     overflow tail by setting display:grid, so the head and the tail must share this value. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.mk-row:first-child { border-top: 0; }
.mk-book { font-size: var(--t-body); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-row.is-sharp .mk-book { color: var(--ink); font-weight: 600; }
.mk-badge {
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  padding: 2px 6px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink-3);
}
/* Each side's three facts — name, price, шанс — in DOM order A then B (correct reading order
   for a screen reader), laid out as two columns over three shared row tracks so every book's
   prices line up. minmax(0, 1fr): a long team name wraps inside its own column instead of
   widening it and pushing the other side's price off the block. */
.mk-sides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: var(--s4);
  row-gap: 2px;
}
.mk-live .mk-sides { grid-template-rows: repeat(2, auto); } /* no шанс row on the in-play price */
.mk-team { font-size: var(--t-sm); color: var(--ink-3); line-height: 1.3; overflow-wrap: anywhere; align-self: end; }
.mk-price { font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; color: var(--c-money); line-height: 1.2; }
.mk-pct { font-size: var(--t-micro); color: var(--ink-3); letter-spacing: .04em; }
.mk-more {
  appearance: none; border: 1px solid var(--line-soft); background: var(--panel);
  color: var(--ink-2); font: 500 var(--t-sm)/1 var(--font);
  min-height: var(--tap); padding: 10px var(--s3); border-radius: var(--r-sm); cursor: pointer; width: 100%;
  margin-top: var(--s3);
  transition: background var(--d-fast) var(--ease);
}
.mk-more:hover { background: var(--panel-2); }
.mk-live {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px dashed var(--line);
}

/* ============================================== ЯЩИК РАЗБОРА · ОБОЛОЧКА */

.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer[hidden] { display: none; }
.drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  animation: fade-in var(--d-base) var(--ease) forwards;
}
@keyframes fade-in { to { opacity: 1; } }
.drawer-body {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; max-width: 430px;
  max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: 1px solid var(--line);
  box-shadow: var(--sh-3);
  animation: sheet-up 380ms var(--ease) forwards;
}
@keyframes sheet-up { from { transform: translateX(-50%) translateY(14%); } }
.drawer.is-closing .drawer-body { animation: sheet-down 220ms var(--ease-io) forwards; }
.drawer.is-closing .drawer-scrim { animation: fade-out 220ms var(--ease-io) forwards; }
@keyframes sheet-down { to { transform: translateX(-50%) translateY(100%); } }
@keyframes fade-out { to { opacity: 0; } }
.drawer-grip {
  width: 36px; height: 4px; border-radius: var(--r-pill);
  background: var(--line);
  margin: 10px auto 0; flex: none;
}
.drawer-close {
  /* ⚠️ Z-INDEX НЕСУЩИЙ, НЕ КОСМетика. 30 из 32px этой кнопки лежат поверх .drawer-inner,
     а у того стоит -webkit-overflow-scrolling: touch. На iOS это поднимает скроллер в
     СОБСТВЕННЫЙ контекст наложения и композитный слой; позиционированный сосед с
     z-index:auto оказывается ПОД ним, и скроллер съедает тап — крестик мёртвый в Telegram
     iOS и живой во всех браузерах, где это свойство игнорируется (замерено 2026-09-14:
     elementFromPoint в центре кнопки возвращает скроллер, а не кнопку, как только у
     .drawer-inner появляется контекст наложения). Снимешь — кнопка снова умрёт только на iOS. */
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 0; background: var(--panel-2); color: var(--ink-2);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.drawer-close:hover { background: var(--line); }
.drawer-close:active { transform: scale(.9); }
.drawer-inner { overflow-y: auto; padding: var(--s4) var(--gutter) var(--s6); -webkit-overflow-scrolling: touch; }

/* ============================================= ЯЩИК РАЗБОРА · СОДЕРЖИМОЕ */

.dr-head { margin-bottom: var(--s4); }
.dr-title {
  font-family: var(--font-display);
  font-size: var(--t-lg); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.2;
}
.dr-sub { margin-top: 6px; font-size: var(--t-sm); color: var(--ink-3); }

/* Вердикт — крупная плашка, а не строка таблицы. */
.dr-verdict {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--line-soft);
  margin-bottom: var(--s3);
  position: relative;
  overflow: hidden;
}
/* ПРАВИЛО: ВЕРДИКТ ЗАЯВЛЯЕТСЯ РОВНО ОДИН РАЗ — формой панели (сплошная рамка
   против пунктирной) плюс собственной строкой продукта («✓ ЗАШЛО»), в которой
   глиф уже есть. Ни кольца, ни отдельной галочки, ни третьего повторения.
   Это правило записано потому, что однажды уже сломалось: кольцо убрали из
   стилей, а глиф остался в разметке и вернулся голой галочкой. */
.dr-verdict.is-hit  { background: color-mix(in srgb, var(--c-ok) 13%, transparent); border-color: var(--c-ok); }
.dr-verdict.is-hit .vt { color: var(--c-ok); }
.dr-verdict.is-miss { background: color-mix(in srgb, var(--c-bad) 13%, transparent);
                      border-color: var(--c-bad); border-style: dashed; }
.dr-verdict.is-miss .vt { color: var(--c-bad); }
.dr-verdict > span:last-child { min-width: 0; }
.dr-verdict .vt { display: block; font-family: var(--font-display); font-size: var(--t-lg);
  font-weight: 700; letter-spacing: .01em; word-spacing: .22em; }
.dr-verdict .vs { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: 3px; line-height: 1.45; }
/* Штамп снят: он был самым театральным жестом приложения и срабатывал на
   НАВИГАЦИИ, конкурируя с единственной авторской кульминацией. */
@keyframes stamp {
  0%   { transform: scale(1.5) rotate(-9deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Факты матча — сетка, а не kv-таблица. */
.dr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft);
            border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--s3); }
.dr-fact { background: var(--bg-2); padding: var(--s3); min-width: 0; }
.dr-fact:first-child { grid-column: 1 / -1; }
.dr-fact .k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: block; }
.dr-fact .v { display: block; margin-top: 5px; font-family: var(--font-display); font-size: var(--t-body);
              font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Драфт: портреты героев в полную силу. Самый богатый ассет продукта, и
        в прошлой сборке он почти не показывался. ---- */
.dr-draft { display: flex; flex-direction: column; gap: var(--s3); }
.dr-team { padding: var(--s3); border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line-soft); }
.dr-team-h { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s3); }
.dr-team-n { font-family: var(--font-display); font-size: var(--t-body); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.dr-team-f { font-size: var(--t-sm); color: var(--ink-3); margin-left: auto; }
.picks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pick { min-width: 0; display: flex; flex-direction: column; }
.pick-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--r-xs);
  display: block;
  border: 1px solid var(--line-soft);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-self) 0%, transparent);
  transition: box-shadow var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.pick:hover .pick-img { transform: translateY(-2px); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-self) 70%, transparent); }
.pick-hero { display: block; margin-top: 5px; min-height: 2.4em; font-size: 10px; color: var(--ink-2);
             line-height: 1.2; overflow-wrap: anywhere; }
.pick-player { display: block; font-size: 9.5px; color: var(--ink-3); line-height: 1.25;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-meta { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 10px; font-weight: 600; color: var(--ink-3); }
.pick-bar { display: block; height: 3px; margin-top: 3px; border-radius: 2px; background: var(--panel-2); overflow: hidden; }
.pick-bar i { display: block; height: 100%; width: var(--pct, 0%); background: var(--c-self); border-radius: 2px;
              transition: width 520ms var(--ease); }
.dr-notes { margin-top: var(--s4); display: flex; flex-direction: column; gap: 7px; }
.dr-note { margin: 0; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45; }
.dr-note b { color: var(--ink-2); font-weight: 600; }
/* Пара «сильнее / слабее» — тот же словарь, что у вердикта: раньше одна
   половина была окрашена, другая нет, и пара переставала быть парой. */
.dr-note .up { color: var(--c-ok); }
.dr-note .dn { color: var(--c-bad); }

/* ---- Оси драфта: расходящиеся бары от центра ---- */
.ax { display: flex; flex-direction: column; gap: var(--s2); }
.ax-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--s3); margin-bottom: var(--s2); }
.ax-res { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.04em;
  line-height: 1; color: var(--ink); }
.ax-res.b { text-align: right; }
.ax-res-k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.ax-row { display: grid; grid-template-columns: 26px 1fr auto 1fr 26px; align-items: center; gap: 7px; }
.ax-v { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); }
.ax-v.b { text-align: right; }
.ax-v.is-hi { color: var(--ink); }
.ax-k { font-size: var(--t-micro); letter-spacing: .05em; color: var(--ink-3); text-align: center; white-space: nowrap; }
.ax-bar { height: 6px; border-radius: 3px; background: var(--panel-2); position: relative; overflow: hidden; }
.ax-bar i { position: absolute; top: 0; bottom: 0; width: var(--pct, 0%); border-radius: 3px;
            transition: width 560ms var(--ease); }
.ax-bar.a i { right: 0; background: linear-gradient(270deg, var(--c-self), color-mix(in srgb, var(--c-self) 30%, transparent)); }
.ax-bar.b i { left: 0;  background: linear-gradient(90deg,  var(--c-self), color-mix(in srgb, var(--c-self) 30%, transparent)); }
.ax-bar.is-dim i { opacity: .4; }
.ax-bar.n i { left: 0; background: linear-gradient(90deg, var(--ink-2), color-mix(in srgb, var(--ink-2) 35%, transparent)); }

/* ================================================================ ТОЧНОСТЬ */

.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 var(--gutter) var(--s3); }
.chip {
  appearance: none; cursor: pointer;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  color: var(--ink-2);
  font: 500 var(--t-sm)/1 var(--font);
  min-height: 40px; padding: 10px 14px; border-radius: var(--r-pill);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.chip:hover { background: var(--panel-2); }
.chip:active { transform: scale(.96); }
.chip.is-on {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--ink);
}
select.chip { padding-right: 28px; }

/* Заголовочное измерение: одно, крупно, с собственным баром. Не пять
   одинаковых плиток — иначе это снова таблица. */
.au-hero { padding: var(--s5) var(--s4); }
.au-hero .v {
  font-family: var(--font-display);
  font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.045em; line-height: 1;
  color: var(--ink);
  display: block;
}
.au-hero .k { display: block; margin-top: var(--s3); font-size: var(--t-body); color: var(--ink-2); }
.au-hero .s { display: block; margin-top: 5px; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.au-hero .meter { margin-top: var(--s4); height: 8px; border-radius: var(--r-pill); background: var(--panel-2); position: relative; overflow: hidden; }
.au-hero .meter i { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); border-radius: var(--r-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-self) 30%, transparent), var(--c-self));
  transition: width 680ms var(--ease); }
.au-hero .meter u { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--ink-3); }
.au-hero .meter-k { margin-top: 7px; display: flex; justify-content: space-between; font-size: 9.5px;
                    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.au-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
            background: var(--line-soft); border: 1px solid var(--line-soft);
            border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.au-stat { background: var(--panel); backdrop-filter: blur(2px); padding: var(--s3) var(--s4); }
.au-stat .v { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; letter-spacing: -.03em; color: var(--ink); display: block; }
.au-stat .k { margin-top: 4px; font-size: var(--t-sm); color: var(--ink-2); display: block; }
.au-stat .s { margin-top: 2px; font-size: var(--t-micro); color: var(--ink-3); display: block; }

.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tbl th, .tbl td { padding: 9px var(--s2); text-align: right; }
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl th { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600;
          border-bottom: 1px solid var(--line-soft); }
.tbl td { border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { color: var(--ink); font-weight: 600; }
.tbl td:first-child { width: 46%; line-height: 1.35; }
.tbl td:nth-child(2), .tbl th:nth-child(2) { width: 30%; text-align: left; font-family: var(--font);
  font-weight: 600; color: var(--ink); line-height: 1.35; }
.tbl td:last-child { width: 24%; }
.tbl .meta { color: var(--ink-3); font-weight: 400; font-size: var(--t-micro); white-space: nowrap; }

.sub-h {
  display: block;
  margin: var(--s5) 0 var(--s2);
  font-family: var(--font);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink-2);
}
/* Плитки, стоящие ВНУТРИ панели, не должны быть второй карточкой: вложенная
   карточка — всегда ошибка. Внутри панели это просто строка с волосяными
   разделителями, без собственной рамки и тени. */
.au-stats.is-inline { border: 0; border-radius: 0; box-shadow: none; background: transparent; gap: 0; margin-top: var(--s4); }
.au-stats.is-inline .au-stat { background: transparent; backdrop-filter: none;
  border-top: 1px solid var(--line-soft); padding: var(--s3) var(--s3) var(--s3) 0; }
.au-stats.is-inline .au-stat:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.au-stats.is-inline .au-stat:nth-child(even) { padding-left: var(--s3); }

/* Период — не тот же контрол, что вкладка экрана: у них совпадало слово
   «Сегодня», форма и размер, а различала их только заливка. Разводим формой. */
.seg { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--gutter) var(--s3); flex-wrap: wrap; }
.seg-k { font-size: var(--t-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.seg-grp { display: inline-flex; border: 1px solid var(--line-soft); border-radius: var(--r-sm); overflow: hidden; background: var(--panel); }
.seg-grp .chip { border: 0; border-radius: 0; background: transparent; min-height: 38px; padding: 9px 12px; font-size: var(--t-sm); }
.seg-grp .chip + .chip { border-left: 1px solid var(--line-soft); }
.seg-grp .chip.is-on { background: var(--panel-2); color: var(--ink); font-weight: 700; }

.ch { margin-top: var(--s3); }
.ch svg { display: block; width: 100%; height: auto; overflow: visible; color: var(--accent); }
.c-axis { stroke: var(--line-soft); stroke-width: 1; }
.c-tick { fill: var(--ink-3); font: 9.5px var(--font); letter-spacing: .04em; }
.c-lbl  { fill: var(--ink-2); font: 10.5px var(--font); }
.c-seg-on  { fill: var(--accent); }
.c-seg-off { fill: var(--line-soft); }
.c-seg-line { fill: var(--c-line-c); }
.c-line { fill: none; stroke: var(--c-self); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-line-2 { fill: none; stroke: var(--c-line-c); stroke-width: 2; stroke-dasharray: 4 4; }
.c-area { fill: url(#plFade); }
.c-band { fill: var(--ink-3); opacity: .1; }
.c-dot  { fill: var(--accent); }
.c-ref  { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
/* Нейтральный тон намеренно: направление промаха уже несёт положение точки
   относительно диагонали, а занимать под него пятую роль — значит одалживать
   её у «эфира». Отрезок сообщает ВЕЛИЧИНУ, и величине цвет не нужен. */
.c-dev { stroke: var(--ink-3); stroke-width: 2.5; stroke-linecap: round; }
.c-hit  { fill: var(--c-ok); }
.c-miss { fill: var(--c-bad); }

/* Прорисовка графика при появлении. */
.ch .draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.ch.is-seen .draw { animation: draw 900ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.ch .grow { transform: scaleY(0); transform-origin: bottom; }
.ch.is-seen .grow { animation: grow 620ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes grow { to { transform: scaleY(1); } }
.ch .fade { opacity: 0; }
.ch.is-seen .fade { animation: fade-in 420ms var(--ease) forwards; animation-delay: calc(260ms + var(--i, 0) * 45ms); }

/* ============================================================ СОСТОЯНИЯ */

.empty { padding: var(--s6) var(--s4); text-align: center; color: var(--ink-3); font-size: var(--t-body); line-height: 1.6; }
.empty .ic { width: 26px; height: 26px; color: var(--line); display: block; margin: 0 auto var(--s3); }

/* ================================================ ФИКСАЦИЯ — КУЛЬМИНАЦИЯ */
/* Единственный авторский момент системы: драфт замерзает и прогноз становится
   заявкой. Пять тактов за 900 мс, и запускается он ТОЛЬКО по настоящему
   событию — никогда при открытии экрана, где заявка уже стоит. */

.lock-fx { position: relative; overflow: hidden; }
.lock-fx::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent,
    color-mix(in srgb, var(--c-self) 26%, transparent) 45%,
    color-mix(in srgb, #fff 20%, transparent) 55%, transparent);
  transform: translateX(-140%) skewX(-16deg);
  opacity: 0;
}
.lock-fx.is-locking::after { animation: sweep 760ms var(--ease) 120ms; }
@keyframes sweep {
  0%   { transform: translateX(-140%) skewX(-16deg); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateX(320%) skewX(-16deg); opacity: 0; }
}

/* Розжиг свечения панели. */
.is-locking .chan-fill { animation: ignite 900ms var(--ease); }
@keyframes ignite {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-self) 0%, transparent); }
  40%  { box-shadow: 0 0 26px 3px color-mix(in srgb, var(--c-self) 85%, transparent); }
  100% { box-shadow: 0 0 14px -2px color-mix(in srgb, var(--c-self) 60%, transparent); }
}

/* Число в момент фиксации считает — владелец снял запрет 2026-09-13. */
.ev-pct.is-counting { will-change: contents; }

/* ============================================== НЕПРЕРЫВНОСТЬ ПЕРЕХОДОВ */

::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.16,1,.3,1); }
::view-transition-old(root) { animation: vt-out 170ms var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in 280ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Запасной путь, если View Transitions недоступны. */
.is-entering { animation: vt-in 260ms var(--ease) both; }

/* Появление карточек ленты — список приходит списком, задержка ограничена. */
.stagger > * { animation: rise 440ms var(--ease) both; animation-delay: calc(var(--i, 0) * 52ms); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ======================================================== REDUCED MOTION */
/* Не «выключить всё», а убрать перемещение, сохранив смысл: цвет, состояние
   и обратная связь остаются читаемыми. */

@media (prefers-reduced-motion: reduce) {
  .atmo i { animation: none; }
  .atmo { opacity: calc(var(--atmo-op) * .8); }
  .stagger > * { animation: none; }
  .ch.is-seen .draw, .ch.is-seen .grow { animation: none; }
  .ch .draw { stroke-dashoffset: 0; }
  .ch .grow { transform: none; }
  .ch .fade { opacity: 1; }
  .lock-fx.is-locking::after { animation: none; }
  .tag.is-live .dot { animation: none; }
  .mc:hover { transform: none; }
  .drawer-body { animation: fade-in 180ms var(--ease) forwards; }
  .trail.is-changed::after { animation: hold 1100ms linear forwards; transform: scaleX(1); }
  @keyframes hold { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
  /* Переход экрана остаётся, но без пространственного сдвига: смысл
     («экран сменился») несёт проявление, а не движение. */
  .is-entering { animation: fade-in 160ms var(--ease) both; }
  ::view-transition-group(*) { animation-duration: 1ms; }
  * { scroll-behavior: auto !important; }
}
/* Тот же путь по ручному тумблеру: chrome-devtools не умеет эмулировать
   prefers-reduced-motion, а проверять этот режим надо на скриншотах. */
[data-rm="reduce"] .atmo i,
[data-rm="reduce"] .stagger > *,
[data-rm="reduce"] .tag.is-live .dot,
[data-rm="reduce"] .lock-fx.is-locking::after { animation: none; }
[data-rm="reduce"] .ch .draw { stroke-dashoffset: 0; animation: none; }
[data-rm="reduce"] .ch .grow { transform: none; animation: none; }
[data-rm="reduce"] .ch .fade { opacity: 1; animation: none; }
[data-rm="reduce"] .mc:hover { transform: none; }
[data-rm="reduce"] .is-entering { animation: fade-in 160ms var(--ease) both; }

/* ============================================================= АДАПТИВ */

@media (min-width: 560px) {
  .dr-draft { flex-direction: row; }
  .dr-team { flex: 1; min-width: 0; }
}
@media (min-width: 740px) {
  :root { --gutter: 24px; }
  .app-frame { max-width: var(--measure); }
  .drawer-body { max-width: var(--measure); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .cards { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; }
  .mc.is-live:first-child { grid-column: 1 / -1; }
  .pals { grid-template-columns: repeat(4, 1fr); }
  .au-stats { grid-template-columns: repeat(4, 1fr); }
  .lv-figs { grid-template-columns: repeat(4, 1fr); }
}

/*
 * Точность — Telegram Mini App. АДДЕНДУМ к дословному proto.css.
 *
 * ⚠️ ЭТОТ ФАЙЛ — НЕ ДИЗАЙН-СИСТЕМА. Система целиком лежит в assets/proto.css, который
 * `make vendor-proto-css` копирует БАЙТ-В-БАЙТ из design/prototype/proto.css
 * (TestVendoredProtoCSSIsByteIdenticalToTheDesignPrototype ловит дрейф). Сервится ОДИН бандл
 * fonts.css + proto.css + app.css, в этом порядке (assets.go, cssBundle); этот файл идёт
 * ПОСЛЕДНИМ, чтобы при равной специфичности его правила побеждали правила прототипа — так,
 * как побеждал бы инлайновый стиль.
 *
 * Здесь живёт ровно три вещи, и каждое правило говорит, откуда оно:
 *   1. хост спрайта иконок — у прототипа он несёт инлайновый style (icons.js:16);
 *   2. то, что прототип делает инлайновым style= (proto.js:NNN) — под style-src 'self'
 *      атрибут в разметке запрещён, поэтому тот же стиль выражен классом;
 *   3. состояния, которых у синхронного прототипа нет: скелет загрузки, ошибка фрагмента,
 *      тихий 30-секундный полл, «Показать ещё», страница без JS.
 * Изменение ВИДА — это правка прототипа, затем `make vendor-proto-css`. Не здесь.
 * TestServedStylesheetIsTheBundleInOrder держит этот файл в 200 строк.
 */

/* === 1. Хост спрайта (icons.js:16) ========================================== */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* === 2. Инлайновые стили proto.js, выраженные классами ======================
   Селекторы составные (.foot.mt-10, а не .mt-10) намеренно: инлайновый стиль бьёт любое
   правило таблицы, а утилита из одного класса проиграла бы `.blk .foot` того же файла.
   Двух классов хватает — аддендум идёт последним и при равной специфичности побеждает. */
.sub-h.mt-0 { margin-top: 0; }                                     /* proto.js:480 */
.foot.mt-10 { margin-top: 10px; }                                  /* proto.js:352, :486 */
.foot.mt-12 { margin-top: 12px; }                                  /* proto.js:266, :499, :510 */
.blk-h.mt-22 { margin-top: 22px; }                                 /* proto.js:414, :431, :434, :441 */
.foot.is-meta { padding: 0 4px; }                                  /* proto.js:528 */
.pills-row { margin: 0 0 22px; display: flex; gap: 6px; flex-wrap: wrap; }   /* proto.js:375 */
.p-an { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }  /* proto.js:436 */
.p-an b { color: var(--ink); }                                     /* proto.js:437 */
.p-pm { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }  /* proto.js:443 */
.ax-row.is-tally { grid-template-columns: 1fr 2fr auto; margin-bottom: 6px; }         /* proto.js:518 */
.ax-k.is-left { text-align: left; }                                /* proto.js:519 */
.tbl .sub { color: var(--ink-3); }                                 /* proto.js:506 */
.tbl .num .sub { font-weight: 400; }                               /* proto.js:508 */
.mc-price.is-none { color: var(--ink-3); }                         /* proto.js:191 */
.lv-net.is-dim { color: var(--ink-3); font-size: var(--t-sm); }    /* proto.js:321 */

/* === 3. Состояния, которых у прототипа нет ================================== */

/* «Показать ещё N»: у прототипа кнопка ре-рендерит экран с флагом moreOpen (proto.js:722).
   Здесь хвост книг лежит в ТОМ ЖЕ ul.mk и прячется классом; кнопка переключает .is-open и
   меняет свой текст на data-alt (app.js). Обе строки приходят из Go. */
.mk-row.is-more { display: none; }
.mk.is-open .mk-row.is-more { display: grid; }

/* Тихий 30-секундный полл подменяет всю панель. Без этого каждые 30 с заново играли бы
   появление списка и свечение живой карточки — движение без события, которого читатель не
   просил (правило DESIGN.md). app.js ставит класс на панель только на тихом свопе и снимает
   на любой навигации; своп «Фиксации» его не получает и играет целиком. */
.is-quiet .stagger > * { animation: none; }
.is-quiet .mc.is-live::after { opacity: 1; animation: none; }

/* Без JS графики оставались бы невидимыми: proto.css прячет .fade/.grow/.draw безусловно, а
   показывает только по .is-seen, который ставит наблюдатель в app.js. С живым JS html.js
   стоит до первого запроса и эти правила не срабатывают — ноль визуальных изменений. */
html:not(.js) .ch .fade { opacity: 1; }
html:not(.js) .ch .grow { transform: none; }
html:not(.js) .ch .draw { stroke-dashoffset: 0; }

/* Строка «последних прогнозов» открывает ящик (tr[data-match]); у прототипа строка не
   кликабельна, поэтому курсор объявляет это здесь. */
.tbl tbody tr[data-match] { cursor: pointer; }

/* .dr-notes несёт портрет героя вместо имени, когда он резолвлен (owner's ask — «не хочется
   читать»; имя остаётся текстовым фолбэком). У прототипа .dr-note — чистый текст, но тот же
   ход уже сделан для этой же строки контрпика в internal/render (auditreplay.go, .cnt-ico) —
   16px/3px, тот же приём, не новое изобретение. */
.dr-note-ico { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; vertical-align: -3px; display: inline-block; }

/* Скелет загрузки и ошибка фрагмента — у синхронного прототипа их нет. Материал тот же, что
   у .pan: ошибка — панель, не тревога (DESIGN.md не даёт статусу красной поверхности).
   Имя sk-pulse: @keyframes pulse занят у прототипа точкой живого тега. */
.skeleton { padding: var(--s3) var(--gutter); }
.sk { border-radius: var(--r-sm); background: var(--line-soft); animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-tiles { height: 116px; }
.sk-line { height: 14px; margin: var(--s3) 0; width: 65%; }
.sk-block { height: 200px; }
@keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.err {
  margin: var(--s3) var(--gutter) 0; padding: var(--s4); background: var(--panel);
  border: 1px solid var(--line-soft); border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.err h2 { margin: 0 0 var(--s1); font-family: var(--font-display); font-size: var(--t-md); font-weight: 600; }
.err .sub { margin: 0; color: var(--ink-2); }
.err button {
  min-height: var(--tap); padding: 0 16px; margin-top: 8px; font: inherit; font-weight: 600;
  color: var(--bg); background: var(--ink); border: 0; border-radius: var(--r-sm); cursor: pointer;
}
/* Сворачивающийся блок — у синхронного прототипа этого состояния нет.
   Ни одного нового токена и ни одного своего цвета: шапка — тот же .blk-h, что у остальных
   секций, а слово справа — чисто визуальное (aria-hidden): состояние <details> скринридер
   объявляет сам, и вторая его копия была бы шумом.
   ⚠️ min-height — именно --tap (44px), а не токен отступа: строка из --t-micro дала бы цель
   высотой ~16px — это ровно та ошибка, на которой уже обжигались. */
.fold > summary {
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--tap); cursor: pointer; list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .blk-h { margin-bottom: 0; flex: 1; }
.fold-more { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; }
.fold-more::after { content: "развернуть"; }
.fold[open] > summary .blk-h { margin-bottom: 0; }
.fold[open] .fold-more::after { content: "свернуть"; }

/* Столбец «кто точнее». Зелёным помечено только то, где МОДЕЛЬ добавляет; проигранная
   строка НЕ красная — инкумбент, оказавшийся точнее, это факт, а не тревога, а половина
   таблицы в --c-bad читалась бы аварией. Цвет всегда ДОБАВКА к слову («модель»/«наив»
   печатаются в ячейке), никогда замена — правило палитры про дейтеранопию. */
.tbl-int .e-hit { color: var(--c-ok); font-weight: 600; }
.tbl-int .e-miss, .tbl-int .e-even { color: var(--ink-3); }

/* Колонки перебалансированы от 46/30/24 у .tbl: там третья колонка — короткая плашка
   («✓ ЗАШЛО»), а здесь — два слова с числом («модель 1.53»), и на 24% они ломались на две
   строки — замерено на 393px. nowrap на обеих числовых колонках: перенос внутри
   «6.11 → 5.73» рвёт стрелку от чисел, ради которых она там стоит. Переносится только
   первая колонка — там живут имена вроде «kills: pace+shape+draft+players+mastery». */
.tbl-int td:first-child, .tbl-int th:first-child { width: 40%; }
.tbl-int td:nth-child(2), .tbl-int th:nth-child(2) { width: 30%; white-space: nowrap; }
.tbl-int td:last-child, .tbl-int th:last-child { width: 30%; white-space: nowrap; }

/* Вердикт карты без итога — у прототипа фикстура сыграна всегда. Состояние уходит в его же
   .tag (живой — .tag.is-live с пульсом), строку .vt занимает фаворит модели, а процент несёт
   цвет модели: --accent-ink, «красный — модель» (proto.css:39). Ни одного нового токена. */
.dr-verdict .tag { margin-bottom: var(--s2); }
.dr-verdict .vt .vp { color: var(--accent-ink); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
[data-rm="reduce"] .sk { animation: none; }