/*
 * Минаков Мишин — раздел «Замеры»: материал «Замер», «Весовые категории», бейджи.
 * Контракт — DESIGN.md, раздел «Замеры» (решения автора — ADR 0007, Update 2026-11-09).
 * Подключается после static/css/site.css, только на страницах раздела
 * ({% block extra_head %}); шрифт и базовые токены — оттуда. Токены раздела —
 * в :root ниже, каждый записан в DESIGN.md. Имена классов — контракт с шаблонами
 * templates/bench/ и templates/notes/: не переименовывать.
 *
 * Высоты рисунков и толщины линий — параметры рисунка, как в «Фирменных мотивах»
 * DESIGN.md, а не шкала раскладки.
 */

:root {
  /* цвет — DESIGN.md, colors, «Цвета форматов весов» (палитра расширена решением автора,
     ADR 0007). Цвет = формат весов; BF16 — чернила: navy на светлом, white на navy. */
  --fmt-fp8: #109483;
  --fmt-int8: #981E87;
  --fmt-int4: #3362E1;
  --fmt-fp8-on-navy: #6AE2D4;
  --fmt-int8-on-navy: #D66AC1;
  --fmt-int4-on-navy: #6793FA;
  /* сетка обзорных таблиц: между rule и slate — rule на white (1,4 : 1) теряется, эта 2,2 : 1 */
  --table-line: #A3B0BF;
  /* победитель в строке таблиц и в «Весовых категориях» — mist: navy 12,1 : 1, slate 5,43 : 1 */
  --win: var(--mist);
  /* только цифра первого места на пьедестале: 3,13 : 1 на mist (крупный текст, AA), 3,78 : 1
     на white. Оттенок 40°, отдельно от накала (28–31°) */
  --gold: #AC7A15;
  --gold-glow: #FBF5E4;  /* заливка столбца первого места в обзорных таблицах */
  --gold-win: #F3E6BF;   /* лучшее в строке внутри этого столбца */
  --gold-ink: #7A5F00;   /* метка «1 место» над шапкой: 5,9:1 на gold-glow */
  --gold-frame: #B8912A; /* рамка этого столбца — светлее цифры пьедестала, как в прототипе */

  /* шрифт — DESIGN.md, typography: категория «40 ГБ» на плакате «Карта вечера» */
  --fs-poster: clamp(80px, 7vw + 40px, 144px);

  /* размеры — DESIGN.md, sizes */
  /* подпись строки рисунка: колонка бейджа модели S, за ней бейдж квантования S */
  --fig-model: 10.75rem;
  --fig-label: calc(var(--fig-model) + 9.5rem);
  /* судейские записки: столбец квантования и столбец исхода */
  --fig-j: 9.5rem;
  --fig-out: 13em;
  /* рамка бейджа модели и бейджа квантования */
  --badge-line: 1.5px;
  /* ступени пьедестала — только намёк: высота полосы haze у 1, 2, 3 места */
  --pod-1: 24px;
  --pod-2: 16px;
  --pod-3: 10px;
}

/* формат → цвет: --c на светлом, --c-dk на navy */
.f-bf16 { --c: var(--navy); --c-dk: var(--white); }
.f-fp8 { --c: var(--fmt-fp8); --c-dk: var(--fmt-fp8-on-navy); }
.f-int8 { --c: var(--fmt-int8); --c-dk: var(--fmt-int8-on-navy); }
.f-int4 { --c: var(--fmt-int4); --c-dk: var(--fmt-int4-on-navy); }

/* ------------------------------------------------------------------ ключ варианта */

/* маркер цвета формата: круг — плотная модель, ромб — MoE; в легендах рисунков — с отрезком линии */
.key {
  flex: none;
  display: inline-block;
  width: 10px;
  height: 10px;
  overflow: visible;
}

.key--line {
  width: 24px;
}

.key__mk {
  fill: var(--c);
}

.key__ln {
  stroke: var(--c);
  stroke-width: 2;
}

.is-dash {
  stroke-dasharray: 5 3;
}

.is-dot {
  stroke-dasharray: 1.5 3;
  stroke-linecap: round;
}

.dark .key__mk { fill: var(--c-dk); }

/* ------------------------------------------------------------------ бейджи: три уровня */

/* Запись паспорта, а не наклейка: текст как есть, без иконок и капсул, скругление sm,
   как у кнопок. Сила уровня — заливкой, начертанием и кеглем, а не цветом фона.

   1. Модель (.mb) — залита: navy на светлом, white на navy. Полужирная, крупнее остальных.
      Тип модели — вторая часть того же бейджа, в рамке того же цвета: рядом
      или ярлычком снизу (.mb--stack), как подпись под табличкой с именем.
   2. Квантование (.qb) — рамка и маркер цветом формата, формат полужирным,
      метод и группа — обычным. Текст на светлом — чернилами (бирюза FP8 для текста
      светла), на navy — светлой ступенью цвета формата (>= 4,66:1).
   3. Подробности (.xb) — мелкие, нейтральные: рамка rule, текст slate.
      Состояние — рамка navy, полужирный; «черновик» — пунктиром. */

.mb,
.qb {
  vertical-align: middle;
  white-space: nowrap;
}

/* position: relative — скрытая запятая (.vh) между частями держится внутри бейджа
   и не растягивает страницу из прокручиваемой таблицы */
.mb {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  font-weight: 700;
  line-height: 1.15;
  color: var(--navy);
  text-decoration: none;
}

.mb__name,
.mb__arch {
  display: inline-flex;
  align-items: center;
  padding: .2em .5em;
  border: var(--badge-line) solid var(--navy);
}

.mb__name {
  color: var(--white);
  background: var(--navy);
  border-radius: var(--r) 0 0 var(--r);
}

.mb__name:only-child {
  border-radius: var(--r);
}

.mb__arch {
  border-left: 0;
  border-radius: 0 var(--r) var(--r) 0;
  font-size: .78em;
  font-weight: 600;
}

/* тип модели ярлычком снизу: узкая колонка (плакат, шапка столбца, «До боя») */
.mb--stack {
  flex-direction: column;
  align-items: flex-start;
}

.mb--stack .mb__name {
  border-radius: var(--r) var(--r) var(--r) 0;
}

.mb--stack .mb__arch {
  border-left: var(--badge-line) solid;
  border-top: 0;
  border-radius: 0 0 var(--r) var(--r);
  padding-block: .1em .2em;
}

.mb--xl { font-size: var(--fs-h2); }
.mb--l { font-size: var(--fs-h3); }
.mb--m { font-size: var(--fs-body); }
.mb--s { font-size: var(--fs-small); }

.mb--xl .mb__name { padding: .12em .4em; }
.mb--xl.mb--stack .mb__arch { font-size: var(--fs-small); }

/* бейдж модели — ссылка на замер («Весовые категории») */
a.mb .mb__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a.mb:hover .mb__name {
  text-decoration-thickness: 2px;
}

/* бейдж — ссылка на термин словаря, когда словарь опубликован (apps/bench/present/badges.py):
   квантование целиком (a.qb), тип модели (a.mb__arch), подробность (.xb > a). Язык ссылки
   в тексте: подчёркнут текст 1 px с отступом, при наведении 2 px; рамка, цвет и маркер —
   как у бейджа без ссылки */
a.qb {
  text-decoration: none;
}

a.qb .qb__t,
a.mb__arch,
.xb > a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a.qb:hover .qb__t,
a.mb__arch:hover,
.xb > a:hover {
  text-decoration-thickness: 2px;
}

.dark .mb { color: var(--white); }
.dark .mb__name { color: var(--navy); background: var(--white); }
.dark .mb__name,
.dark .mb__arch { border-color: var(--white); }

.qb {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .16em .55em .16em .5em;
  border: var(--badge-line) solid var(--c);
  border-radius: var(--r);
  font-weight: 500;
  line-height: 1.15;
  color: var(--navy);
}

.qb b {
  font-weight: 700;
}

.qb--xl { font-size: var(--fs-h3); }
.qb--l { font-size: var(--fs-body); }
.qb--m { font-size: var(--fs-small); }
.qb--s { font-size: var(--fs-fine); }

.qb--xl .key,
.qb--l .key { width: 11px; height: 11px; }

.dark .qb {
  border-color: var(--c-dk);
  color: var(--c-dk);
}

.xbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-fine);
  font-weight: 500;
  line-height: 1.2;
}

.xb {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--slate);
  white-space: nowrap;
}

.xb--state {
  font-weight: 650;
  color: var(--navy);
  border-color: var(--navy);
  /* «На странице есть черновики — их видно только вам» длиннее строки на 320 px */
  white-space: normal;
}

.xb--draft {
  border-style: dashed;
}

.dark .xb {
  color: var(--haze);
  border-color: var(--line-on-navy);
}

.dark .xb--state {
  color: var(--white);
  border-color: var(--line-on-navy-strong);
}

/* подпись строки рисунка и таблицы: модель S в своей колонке (не уже fig-model), квантование S —
   ровно под другими; не помещается в строку (узкий экран) — квантование уходит под модель */
.vlab {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: var(--fs-small);
  line-height: 1;
}

.vlab > .mb {
  min-width: var(--fig-model);
}

.vlab--stack {
  flex-direction: column;
  align-items: flex-start;
}

.vlab--stack > .mb {
  min-width: 0;
}

/* в таблице подпись строки не переносится: таблица прокручивается в своём блоке */
.bp-table .vlab {
  flex-wrap: nowrap;
}

/* легенда форматов: один раз на странице */
.fmt-legend {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s6);
  row-gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--slate);
}

.fmt-legend li {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.fmt-legend b {
  font-weight: 650;
  color: var(--navy);
}

.fmt-legend__shape .key__mk {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.25;
}

/* после четырёх форматов — отступ перед формами маркера */
.fmt-legend li:nth-child(5) {
  margin-left: var(--s5);
}

/* ------------------------------------------------------------------ заглушка и шапка */

/* .bp-ph — заглушка на месте блока, данные которого ещё не опубликованы
   (apps/bench/present/render.py, «unavailable»): ширина measure, приглушённым цветом */
.bp-ph {
  max-width: var(--measure);
  margin-block: var(--s5);
  color: var(--slate);
}

.dark .bp-ph {
  color: var(--haze);
}

.bp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s5);
  row-gap: var(--s2);
  margin-bottom: var(--s5);
  font-size: var(--fs-small);
  color: var(--haze);
}

.bp-meta a {
  color: var(--white);
}

/* «Вечер»: имена разделов — кегль H1 */
.bp-h {
  margin-bottom: var(--s5);
  font-size: var(--fs-h1);
  font-weight: 300;
}

.bp-sec--tail {
  padding-top: 0;
}

.bp-sec--tail > .wrap > .bp-cap:first-child {
  margin-top: var(--s7);
}

.bp-sec--legend {
  padding-bottom: var(--s7);
}

.bp .section.bp-sec--legend + .section.bp-sec {
  padding-top: 0;
}

/* ------------------------------------------------------------------ рисунки: общее */

.bp-fig {
  margin-top: var(--s6);
}

/* Подпись под рисунком и обзорной таблицей (.bp-cap — одна на все): сначала «по-простому»
   (16 px, чернилами; на navy — белым), под ней строгая подпись целиком (14 px, slate; на navy — haze). */
.bp-cap {
  max-width: var(--measure);
  margin-top: var(--s5);
  font-size: var(--fs-small);
  color: var(--slate);
}

.bp-cap > p + p {
  margin-top: var(--s3);
}

.bp-cap .bp-plain {
  color: var(--navy);
}

.bp-cap .bp-strict {
  font-size: var(--fs-fine);
}

.dark .bp-cap {
  color: var(--haze);
}

.dark .bp-cap .bp-plain {
  color: var(--white);
}

.bp-j__ref strong {
  color: var(--navy);
}

.bp-twin {
  margin-top: var(--s4);
  font-size: var(--fs-small);
}

/* раскрытие данных: «Таблица к рисунку», на странице замера — «Не квантованы», «Результаты
   по заданиям» и т. п. Подпись — как ссылка: подчёркнута, при наведении толще */
.bp-twin summary,
.prose-wide summary {
  display: inline-block;
  min-height: var(--target);
  padding-block: var(--s3);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.bp-twin summary:hover,
.prose-wide summary:hover {
  text-decoration-thickness: 2px;
}

/* текучий SVG: геометрия во внутреннем viewBox, подписи — в процентах внешнего */
.bp-pl {
  display: block;
  width: 100%;
  max-width: none;
  overflow: visible;
}

.bp-in {
  overflow: visible;
}

.bp-in * {
  vector-effect: non-scaling-stroke;
}

.bp-t {
  font-size: var(--fs-fine);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  fill: var(--slate);
}

.bp-axis,
.bp-tick {
  stroke: var(--rule);
  stroke-width: 1;
}

.bp-grid {
  stroke: var(--mist);
  stroke-width: 1;
}

/* точка — путь нулевой длины с круглым концом: круглая при любом растяжении рисунка */
.bp-dot {
  fill: none;
  stroke-linecap: round;
}

.bp-pl--xaxis {
  height: 26px;
}

/* легенда кодировки рисунка: образец метки и имя, текст — цветом текста */
.bp-legend,
.bp-keys {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s5);
  row-gap: var(--s2);
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--slate);
}

.bp-legend li,
.bp-keys li {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.bp-keys {
  margin: var(--s3) 0 0;
  column-gap: var(--s4);
  row-gap: var(--s1);
  font-size: var(--fs-fine);
}

.bp-sw {
  flex: none;
  display: inline-block;
  width: var(--s4);
  height: 10px;
}

/* «веса, цвет — формат»: образец из четырёх отрезков — по цвету на формат */
.bp-sw--w {
  display: inline-flex;
  width: 32px;
}

.bp-sw--w i {
  flex: 1;
  background: var(--c);
}

.bp-sw--kv { background: var(--slate); }
.bp-sw--o { background: var(--haze); }
.bp-sw--free { box-shadow: inset 0 0 0 1px var(--rule); }

.bp-sw--cold {
  width: 2px;
  height: 16px;
  background: var(--navy);
}

.bp-sw--dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--slate);
}

/* край распределения ожидания — накал: только графика, подпись рядом цветом текста */
.bp-sw--p95 {
  width: 24px;
  height: 2px;
  background: var(--glow-ink);
}

/* ------------------------------------------------------------------ взвешивание */

.bp-wi__row {
  display: grid;
  grid-template-columns: var(--fig-label) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: center;
}

.bp-wi__label {
  font-size: var(--fs-small);
}

.bp-wi__group {
  margin-top: var(--s5);
  padding-bottom: var(--s2);
  font-size: var(--fs-small);
  font-weight: 600;
}

.bp-wi__row--top + .bp-wi__group {
  margin-top: 0;
}

.bp-pl--wi { height: 64px; }
.bp-pl--wi-top { height: 26px; }

.bp-wi-track {
  fill: var(--white);
  stroke: var(--rule);
  stroke-width: 1;
}

/* белая обводка 2 px — зазор между частями полосы, а не рамка */
.bp-wi-w,
.bp-wi-kv,
.bp-wi-o {
  stroke: var(--white);
  stroke-width: 2;
}

.bp-wi-w { fill: var(--c); }
.bp-wi-kv { fill: var(--slate); }
.bp-wi-o { fill: var(--haze); }

.bp-wi-w.is-old { fill: var(--haze); }
.bp-wi-kv.is-old { fill: var(--mist); }
.bp-wi-o.is-old { fill: var(--mist); }

/* первый старт: черта поперёк полосы — белая по KV, выше и ниже полосы — navy */
.bp-wi-cold {
  stroke: var(--navy);
  stroke-width: 2;
}

.bp-wi-cold.is-old {
  stroke: var(--slate);
}

.bp-wi-cold-in {
  stroke: var(--white);
  stroke-width: 2;
}

.bp-wi-ghost {
  fill: none;
  stroke: var(--slate);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.bp-limit {
  stroke: var(--navy);
  stroke-width: 1.5;
}

/* число внутри части полосы: 21 px полужирный — крупный текст WCAG, белый на цвете формата >= 3:1 */
.bp-t--in {
  font-size: var(--fs-h3);
  font-weight: 650;
  fill: var(--white);
}

.bp-t--limit {
  font-weight: 650;
  fill: var(--navy);
}

.bp-t--ghost {
  fill: var(--slate);
}

/* ------------------------------------------------------------------ раунды */

.bp-rounds__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s7);
  row-gap: var(--s7);
}

.bp-rounds__ylab {
  margin: var(--s4) 0 var(--s2);
  font-size: var(--fs-small);
  color: var(--slate);
}

.bp-rounds__xlab {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  color: var(--slate);
  text-align: right;
}

.bp-rounds__grid {
  display: grid;
  grid-template-columns: var(--s7) minmax(0, 1fr);
}

.bp-pl--rounds,
.bp-pl--yaxis {
  height: 360px;
}

.bp-line {
  fill: none;
  stroke: var(--c);
  stroke-linejoin: round;
}

.bp-s--hi { stroke-width: 2.25; }
.bp-s--mute { stroke-width: 1.25; }

.bp-dot--ring {
  stroke: var(--white);
  stroke-width: 11px;
}

.bp-dot--hi {
  stroke: var(--c);
  stroke-width: 7px;
}

.bp-dot--mute {
  stroke: var(--c);
  stroke-width: 4.5px;
  stroke-opacity: .5;
}

.bp-mk--fill { fill: var(--c); }
.bp-mk--fill.is-mute { fill-opacity: .5; }
.bp-mk--ring { fill: var(--white); }

.bp-p95 {
  stroke: var(--glow-ink);
  stroke-width: 1.25;
}

.bp-dot--p95 {
  stroke: var(--glow-ink);
  stroke-width: 5px;
}

.bp-t--end {
  font-size: var(--fs-small);
  font-weight: 600;
}

.bp-t--end-hi {
  font-weight: 700;
  fill: var(--navy);
}

.bp-t--end-sub {
  font-weight: 500;
}

/* «, 2 карты» у конца линии — обычным начертанием */
.bp-t--x {
  font-weight: 450;
}

.bp-rounds__title {
  display: flex;
}

.bp-keys__x {
  font-size: var(--fs-fine);
  color: var(--slate);
}

.bp-keys li.is-hi .qb {
  border-width: 2.5px;
}

/* ------------------------------------------------------------------ судейские записки */

.bp-j__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s7);
  row-gap: var(--s8);
}

.bp-j__name {
  font-size: var(--fs-h3);
}

.bp-j__what {
  margin-top: var(--s1);
  font-size: var(--fs-small);
  color: var(--slate);
}

.bp-j__rows {
  margin-top: var(--s4);
  padding: 0;
  list-style: none;
}

.bp-j__row,
.bp-j__axis {
  display: grid;
  grid-template-columns: var(--fig-j) minmax(0, 1fr) var(--fig-out);
  column-gap: var(--s3);
  align-items: center;
}

.bp-j__unit {
  align-self: start;
  padding-top: 6px;
  font-size: var(--fs-fine);
  color: var(--slate);
  text-align: right;
}

.bp-j__l {
  display: flex;
  align-items: center;
}

/* заголовок группы строк: модель бейджем, рядом — эталон текстом */
.bp-j__grp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s3);
  row-gap: var(--s1);
  padding: var(--s4) 0 var(--s2);
}

.bp-j__grp:first-child {
  padding-top: 0;
}

.bp-j__ref {
  font-size: var(--fs-fine);
  color: var(--slate);
}

.bp-j__out {
  font-size: var(--fs-small);
  line-height: 1.3;
}

.bp-pl--bell { height: 40px; }

.bp-bell {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.75;
  stroke-linejoin: round;
}

/* интервал под колоколом — тот же оттенок, размыв ~14 % */
.bp-bell-body {
  fill: var(--c);
  fill-opacity: .14;
}

.bp-bell-base {
  stroke: var(--rule);
  stroke-width: 1;
}

.bp-zero {
  stroke: var(--navy);
  stroke-width: 1;
}

/* пометки исхода — набраны текстом, не наклейки */
.bp-out--noise {
  color: var(--slate);
}

.bp-out--sig {
  font-weight: 650;
}

.bp-out__ci {
  font-size: var(--fs-fine);
  color: var(--slate);
}

.dark .bp-out--noise,
.dark .bp-out__ci {
  color: var(--haze);
}

.bp-minus {
  display: block;
  font-size: var(--fs-fine);
  font-weight: 400;
  color: var(--slate);
}

/* ------------------------------------------------------------------ до боя */

/* Зеркало: ось посередине, левая сторона выровнена к оси, правая — от неё.
   Отступление от «всё по левому краю» (DESIGN.md, Layout), как у подписей делений. */
.bp-m__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5px minmax(0, 1fr);
  column-gap: var(--s5);
}

.bp-m__vs {
  background: var(--navy);
}

.dark .bp-m__vs {
  background: var(--white);
}

.bp-m__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
}

.bp-m__side--l {
  align-items: flex-end;
  text-align: right;
}

/* левая сторона — зеркало: ярлычок типа модели под правым краем таблички */
.bp-m__side--l .mb--stack {
  align-items: flex-end;
}

.bp-m__side--l .mb--stack .mb__name {
  border-radius: var(--r) var(--r) 0 var(--r);
}

.bp-m__side--l .xbs {
  justify-content: flex-end;
}

.bp-m__side .mb {
  margin-bottom: var(--s1);
}

/* одна модель на обе стороны — над осью */
.bp-m__shared {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s5);
}

.bp-m__cond {
  font-size: var(--fs-fine);
  color: var(--slate);
  overflow-wrap: anywhere;
}

.dark .bp-m__cond {
  color: var(--haze);
}

.bp-m__rows {
  margin: 0;
  padding: var(--s5) 0 0;
  list-style: none;
}

.bp-m__row {
  padding-top: var(--s3);
}

.bp-m__label,
.bp-m__note {
  max-width: 32em;
  margin-inline: auto;
  font-size: var(--fs-small);
  text-align: center;
}

.bp-m__label {
  font-weight: 600;
}

.bp-m__lower {
  font-weight: 400;
  color: var(--slate);
  white-space: nowrap;
}

.dark .bp-m__lower {
  color: var(--haze);
}

.bp-m__note {
  line-height: 1.35;
}

.bp-pl--m { height: 40px; }

.bp-m-bar {
  fill: var(--c);
}

/* где меньше — лучше: контурная полоса, длина не читается как победа */
.bp-m-bar.is-lower {
  fill: var(--white);
  stroke: var(--c);
  stroke-width: 1.5;
}

.dark .bp-m-bar {
  fill: var(--c-dk);
}

.dark .bp-m-bar.is-lower {
  fill: var(--navy);
  stroke: var(--c-dk);
}

.bp-m-spine {
  stroke: var(--navy);
  stroke-width: 1.5;
}

.dark .bp-m-spine {
  stroke: var(--white);
}

.bp-t--mv {
  font-size: var(--fs-body);
  font-weight: 650;
  fill: var(--navy);
}

.dark .bp-t--mv {
  fill: var(--white);
}

.bp-bout {
  margin-top: var(--s8);
  font-size: var(--fs-h3);
}

.bp-bout + .bp-fig {
  margin-top: var(--s5);
}

/* ------------------------------------------------------------------ таблицы */

/* широкая таблица прокручивается в своём блоке, страница вбок не едет */
.bp-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
}

.bp-table {
  border-collapse: collapse;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.bp-tcap {
  max-width: var(--measure);
  margin-top: var(--s4);
  font-size: var(--fs-small);
  color: var(--slate);
}

.bp-table th,
.bp-table td {
  padding: var(--s2) var(--s3);
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}

.bp-table th[scope="row"],
.bp-table th[scope="rowgroup"] {
  text-align: left;
  font-weight: 600;
}

.bp-table thead th {
  vertical-align: bottom;
  font-weight: 600;
}

.bp-table--twin {
  margin-top: var(--s3);
}

.bp-table--twin thead th {
  text-align: right;
}

.bp-table--twin th[scope="row"] {
  vertical-align: middle;
}

.bp-table--twin thead .vlab--stack {
  align-items: flex-end;
}

/* ------------------------------------------------------------------ обзорные таблицы: сетка

   Язык таблиц — по образцу автора (таблица результатов из релиза модели, 2026-11-09),
   в нашей палитре и шрифте:
   - сетка: каждая ячейка в линии 1 px --table-line — структура читается сразу;
   - победитель — мягкая заливка всей ячейки (--win) и полужирное число (.bp-win); без рамок
     у ячейки, плашек и подчёркиваний. Главных столбцов нет: вердикт — пьедестал, таблицы — данные;
   - эталон — первым столбцом, отделён двойной navy-линией, метка «Эталон» над шапкой;
   - шапка — бейджи и одна серая строка; пояснение к числу (± sd, первый старт) — мелкой
     серой строкой под числом;
   - числа крупно, по левому верхнему краю; высокие строки, щедрые поля; пропуск — «—».
   Границы — separate с нулевым зазором: у каждой ячейки свои правая и нижняя линии
   (у первого столбца — и левая, у шапки — верхняя). Так линии закреплённого столбца
   едут вместе с ним при прокрутке вбок (в collapse они остаются на месте). */

.bp-table--grid {
  border-collapse: separate;
  border-spacing: 0;
}

.bp-table--grid th,
.bp-table--grid td {
  padding: var(--s4) var(--s3) var(--s5);
  text-align: left;
  vertical-align: top;
  border: 0;
  border-right: 1px solid var(--table-line);
  border-bottom: 1px solid var(--table-line);
}

.bp-table--grid tr > :first-child {
  border-left: 1px solid var(--table-line);
}

.bp-table--grid thead > tr > * {
  border-top: 1px solid var(--table-line);
}

.bp-table--grid thead th {
  vertical-align: top;
}

/* в строке подпись и числа стоят на общей базовой линии первой строки, как в образце */
.bp-table--grid tbody th,
.bp-table--grid tbody td {
  vertical-align: baseline;
}

/* эталон — точка отсчёта: числа в полную силу, от квантов его отделяет широкая двойная линия
   и метка над шапкой */
.bp-table--grid .is-ref {
  border-right: 6px double var(--navy);
}

/* первое место пьедестала — столбец в тёплой заливке и рамке золота (ADR 0007; одобрено автором
   в прототипе). Рамка — тенью внутри ячеек: не спорит с сеткой и встаёт внутри двойной линии
   эталона, если первым стал он */
.bp-table--grid .is-gold {
  background: var(--gold-glow);
  box-shadow: inset 2px 0 0 var(--gold-frame), inset -2px 0 0 var(--gold-frame);
}

.bp-table--grid td.is-best.is-gold {
  background: var(--gold-win);
}

.bp-table--grid .is-gold .bp-th__tag {
  color: var(--gold-ink);
}

.bp-table--grid thead .is-gold {
  box-shadow: inset 2px 0 0 var(--gold-frame), inset -2px 0 0 var(--gold-frame), inset 0 2px 0 var(--gold-frame);
}

.bp-table--grid tbody:last-child > tr:last-child > .is-gold {
  box-shadow: inset 2px 0 0 var(--gold-frame), inset -2px 0 0 var(--gold-frame), inset 0 -2px 0 var(--gold-frame);
}

/* метка над шапкой столбца: «Эталон», «1 место»; у остальных — пустая строка той же высоты */
.bp-th__tag {
  display: block;
  margin-bottom: var(--s2);
  white-space: nowrap;
  font-size: var(--fs-fine);
  font-weight: 700;
  color: var(--navy);
}

/* число крупно; пояснение — мелкой серой строкой под ним */
.bp-n {
  display: block;
  font-size: var(--fs-lead);
  line-height: 1.2;
}

.bp-sub {
  display: block;
  margin-top: var(--s1);
  font-size: var(--fs-fine);
  font-weight: 400;
  line-height: 1.3;
  color: var(--slate);
}

/* победитель: заливка всей ячейки, число полужирное; для чтения с экрана — пометка словами (.vh) */
.bp-table--grid td.is-best {
  background: var(--win);
}

.bp-win {
  font-weight: 700;
}

/* группа строк — жирной строкой на всю ширину, без заливки. Подпись — в первом столбце,
   текст идёт поверх пустых ячеек строки (между ними линий нет); у эталона — своя пустая
   ячейка, двойная линия через строку группы не рвётся */
.bp-table--grid .bp-tr--grp > * {
  padding-block: var(--s5) var(--s3);
  border-right-color: transparent;
}

.bp-table--grid .bp-tr--grp > :last-child {
  border-right-color: var(--table-line);
}

/* эталон — отдельный блок: двойная линия и слева (правая граница столбца подписей) */
.bp-table--ref tr > :first-child,
.bp-table--ref .bp-tr--grp > :first-child {
  border-right: 6px double var(--navy);
}

/* подписи групп короткие и помещаются в свой столбец — линия эталона их не перечёркивает */
.bp-table--ref .bp-tr--grp th > span {
  width: auto;
  margin-right: 0;
}

.bp-table--grid .bp-tr--grp > .is-ref {
  border-right-color: var(--navy);
}

.bp-table--grid .bp-tr--grp th {
  font-size: var(--fs-small);
  font-weight: 700;
}

/* подпись группы шире своей ячейки: идёт вправо, но не шире окна — на узком экране
   переносится. Отрицательное поле справа — подпись не раздвигает первый столбец.
   Белый фон — линии столбцов не перечёркивают текст при прокрутке */
.bp-table--grid .bp-tr--grp th > span {
  display: inline-block;
  width: max-content;
  max-width: calc(100vw - 2 * var(--pad) - var(--s5));
  margin-right: -100vw;
  white-space: normal;
  background: var(--white);
}

/* ------------------------------------------------------------------ Таблицы 1–2: столбец — вариант

   По таблице на модель. Самая широкая таблица (.bp-table--fill, шесть вариантов) занимает
   ширину блока, у остальных столбцы той же ширины --t-col, пока бейджи помещаются (у MoE имя
   длиннее — столбец шире). Ширины — пожелания: столбец не уже своих бейджей; когда они
   не помещаются, таблица прокручивается в своём блоке, первый столбец закреплён. */

.bp-tblock + .bp-tblock {
  margin-top: var(--s7);
}

.bp-tt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s4);
  font-size: var(--fs-body);
  font-weight: 650;
  font-stretch: 100%;
}

.bp-tables .bp-scroll {
  container-type: inline-size;
}

.bp-table--big {
  --t-label: 12rem;
  --t-col: max(11rem, (100cqw - var(--t-label)) / 6);
}

.bp-table--fill {
  width: 100%;
}

.bp-table--big th[scope="row"],
.bp-table--big th[scope="rowgroup"],
.bp-table--big .bp-th--corner {
  position: sticky;
  left: 0;
  z-index: 1;
  width: var(--t-label);
  white-space: normal;
  background: var(--white);
}

.bp-table--big th[scope="row"] {
  font-size: var(--fs-small);
  font-weight: 650;
}

.bp-table--big th[scope="row"] span {
  display: block;
  margin-top: var(--s1);
  font-size: var(--fs-fine);
  font-weight: 400;
  color: var(--slate);
}

.bp-table--big thead th {
  width: var(--t-col);
  min-width: 11rem;
  white-space: normal;
}

.bp-th__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}

.bp-th__pp {
  display: block;
  margin-top: var(--s3);
  font-size: var(--fs-fine);
  font-weight: 400;
  color: var(--slate);
}

.bp-tnote {
  margin-top: var(--s3);
  font-size: var(--fs-fine);
  color: var(--slate);
}

/* «Весовые категории»: та же сетка; вес — крупно цветом формата, полужирный у победителя */
.is-best .bp-st__wnum {
  font-weight: 600;
}

/* ------------------------------------------------------------------ конец материала */

.bp-tail {
  margin-top: var(--s7);
}

.bp-tail__h {
  font-size: var(--fs-h3);
  font-weight: 650;
  font-stretch: 100%;
}

.bp-data {
  max-width: 62em;
  margin-top: var(--s3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}

.bp-data li {
  display: grid;
  grid-template-columns: var(--fig-label) minmax(0, 1fr);
  column-gap: var(--s4);
  align-items: center;
  padding: var(--s2) 0;
  border-top: 1px solid var(--rule);
}

.bp-fix {
  margin-top: var(--s3);
  font-size: var(--fs-small);
}

.bp-fix time {
  font-weight: 600;
}

/* подпись: знак и дата, как под письмом */
.bp-sign {
  display: flex;
  align-items: flex-end;
  gap: var(--s4);
  margin-top: var(--s8);
  font-size: var(--fs-small);
  color: var(--slate);
}

.bp-sign img {
  width: auto;
  height: var(--logo-h);
}

/* ------------------------------------------------------------------ вердикт: пьедестал */

/* Итог вечера на полосе mist (одна на странице): по пьедесталу на весовую категорию, категории
   одна под другой. У категории три колонки-места и общие ряды: цифра места, модель, квантование,
   фраза, ступень. Места — subgrid, поэтому одинаковые элементы соседних мест стоят на одной линии
   при любой длине текста. Главное — имя модели: бейдж XL; цифра — крупно над ним, у первого
   места тёплым золотом. Ступень — только намёк: тонкая полоса haze внизу колонки, 24 / 16 / 10 px,
   на полу. Без navy-блоков, рамок, теней, градиентов и наклеек.
   Порядок колонок — 1–2–3 слева направо (.bp-pods--b, выбор автора 2026-11-10): места идут
   по порядку разметки, свободная колонка — справа. У модификатора своих правил нет. */
.bp-pods {
  display: grid;
  row-gap: var(--s7);
  margin-top: var(--s6);
}

.bp-pod {
  padding-top: var(--s4);
  border-top: 1px solid var(--navy);
}

.bp-pod__h {
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.3;
}

.bp-pod__places {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: 2px;
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}

/* место — пять ячеек в общих рядах */
.bp-pod__p {
  display: grid;
  grid-row: 1 / span 5;
  grid-template-rows: subgrid;
  min-width: 0;
}

/* текст колонки: слева — по краю ступени, справа — поле s6, фразы соседних мест не слипаются */
.bp-pod__no,
.bp-pod__m,
.bp-pod__q,
.bp-pod__say {
  padding-right: var(--s6);
}

/* цифра места — крупно над моделью; рядом мелко «делят двое» */
.bp-pod__no {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s3);
}

.bp-pod__n {
  font-size: var(--fs-display);
  font-weight: 500;
  font-stretch: 112%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.bp-pod__p--1 .bp-pod__n {
  color: var(--gold);
}

.bp-pod__tie {
  font-size: var(--fs-small);
  color: var(--slate);
}

.bp-pod__m {
  margin-top: var(--s4);
}

.bp-pod__q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s3);
}

/* квантование и происхождение держатся вместе; «и» — в начале второго из делящих место,
   так строка переносится между квантованиями, а не после «и» */
.bp-pod__qi {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
}

.bp-pod__note,
.bp-pod__and {
  font-size: var(--fs-small);
  color: var(--slate);
}

.bp-pod__say {
  max-width: var(--measure);
  margin-top: var(--s4);
}

/* ступень — полоса на полу: ряд высотой с самую высокую, полосы прижаты к низу */
.bp-pod__bar {
  display: block;
  align-self: end;
  height: var(--pod-3);
  margin-top: var(--s5);
  background: var(--haze);
  transform-origin: bottom;
}

.bp-pod__p--1 .bp-pod__bar { height: var(--pod-1); }
.bp-pod__p--2 .bp-pod__bar { height: var(--pod-2); }

.bp-pod__more {
  max-width: var(--measure);
  margin-top: var(--s3);
  font-size: var(--fs-fine);
  color: var(--slate);
}

.bp-vd__foot {
  max-width: var(--measure);
  margin-top: var(--s7);
}

.bp-vd__rule {
  font-size: var(--fs-small);
}

.bp-vd__terms {
  margin-top: var(--s2);
  font-size: var(--fs-fine);
  color: var(--slate);
}

/* Анимация — исключение из Motion по решению автора 2026-11-10 (DESIGN.md, Motion), одна на
   странице и спокойная: блок в окне (static/js/podium.js ставит .is-pending, затем .is-run) —
   полосы ступеней вырастают из пола (3, 2, 1, шаг 0,1 с), затем по рядам проявляются цифры,
   имена, квантования, фразы; весь пьедестал — 1,15 с. Кривая полос — как у эксперимента на
   главной (site.css), без перелёта; проявление — только прозрачность и сдвиг на s1.
   Без JS .is-pending не ставится; под reduce и в печати правил нет — конечное состояние
   (непрокрученный до вердикта лист не печатается пустым). */
@media screen and (prefers-reduced-motion: no-preference) {
  .bp-pod.is-pending .bp-pod__bar {
    transform: scaleY(0);
  }

  .bp-pod.is-pending :is(.bp-pod__no, .bp-pod__m, .bp-pod__q, .bp-pod__say) {
    opacity: 0;
  }

  .bp-pod.is-run .bp-pod__bar {
    animation: pod-rise .5s cubic-bezier(.3, .6, .4, 1) both;
  }

  .bp-pod.is-run :is(.bp-pod__no, .bp-pod__m, .bp-pod__q, .bp-pod__say) {
    animation: pod-show .35s ease-out both;
  }

  .bp-pod.is-run .bp-pod__p--2 .bp-pod__bar { animation-delay: .1s; }
  .bp-pod.is-run .bp-pod__p--1 .bp-pod__bar { animation-delay: .2s; }
  .bp-pod.is-run .bp-pod__no { animation-delay: .5s; }
  .bp-pod.is-run .bp-pod__m { animation-delay: .6s; }
  .bp-pod.is-run .bp-pod__q { animation-delay: .7s; }
  .bp-pod.is-run .bp-pod__say { animation-delay: .8s; }

  @keyframes pod-rise {
    from { transform: scaleY(0); }
    to { transform: none; }
  }

  @keyframes pod-show {
    from { transform: translateY(var(--s1)); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}

/* ------------------------------------------------------------------ плакат в шапке */

.bp-head {
  padding-bottom: var(--s9);
}

.bp-poster__title {
  margin-top: var(--s8);
}

.bp-poster__sub {
  max-width: var(--measure);
  margin-top: var(--s2);
  font-size: var(--fs-small);
  color: var(--haze);
}

.bp-poster__div {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s6);
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line-on-navy);
}

.bp-poster__head {
  grid-column: 1 / span 4;
  font-weight: 300;
}

.bp-poster__num,
.bp-poster__mult {
  display: block;
  font-size: var(--fs-poster);
  font-weight: 300;
  font-stretch: 112%;
  line-height: .9;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.bp-poster__mult {
  font-size: var(--fs-h1);
  line-height: 1;
}

.bp-poster__name {
  display: block;
  max-width: 18em;
  margin-top: var(--s4);
  font-size: var(--fs-small);
  font-weight: 450;
  font-stretch: 100%;
  letter-spacing: 0;
  line-height: 1.45;
  color: var(--haze);
}

.bp-poster__list {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s7);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-poster__f {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  font-size: var(--fs-small);
  line-height: 1.4;
}

.bp-poster__w,
.bp-poster__x2 {
  font-size: var(--fs-fine);
  color: var(--haze);
}

.bp-pl--pw {
  height: 14px;
  margin-top: var(--s2);
}

.bp-pw-track {
  fill: none;
  stroke: var(--line-on-navy);
  stroke-width: 1;
}

.bp-pw-w {
  fill: var(--c-dk);
}

.bp-pw-ghost {
  fill: none;
  stroke: var(--line-on-navy-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.bp-pw-limit {
  stroke: var(--white);
  stroke-width: 1.5;
}

/* ------------------------------------------------------------------ весовые категории */

.bp-legend--stand {
  margin: var(--s4) 0 0;
}

.bp-st__lim {
  max-width: var(--measure);
  margin-top: var(--s2);
  font-size: var(--fs-small);
  color: var(--slate);
}

.bp-st__table {
  width: 100%;
}

/* сетка, заливка победителя, числа по левому верхнему краю — общие правила .bp-table--grid */
.bp-st__table thead th {
  font-size: var(--fs-fine);
  font-weight: 650;
  white-space: normal;
}

.bp-st__table thead th:first-child,
.bp-st__table .bp-st__w {
  width: 7em;
}

.bp-st__table thead th:nth-child(n+4) {
  width: 8.5em;
}

.bp-st__table .bp-st__name {
  white-space: normal;
}

/* строка «Весовых категорий»: модель и состояние — первая строка; квантование и подробности — вторая */
.bp-st__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--s3);
}

.bp-st__q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--s2);
  font-weight: 500;
}

.bp-st__q > .xbs {
  flex: 1 1 12em;
}

.bp-st__cond {
  display: block;
  margin-top: var(--s2);
  font-size: var(--fs-fine);
  font-weight: 400;
  color: var(--slate);
  overflow-wrap: anywhere;
}

.bp-st__mark {
  margin-top: var(--s1);
  font-size: var(--fs-fine);
  font-weight: 400;
}

.bp-st__bar {
  width: 24%;
}

/* вес строки — крупно цветом формата (крупный текст, >= 3:1 на white) */
.bp-st__wnum {
  display: block;
  font-size: var(--fs-h1);
  font-weight: 300;
  font-stretch: 112%;
  line-height: 1;
  color: var(--c);
}

.is-old .bp-st__wnum {
  color: var(--slate);
}

.bp-pl--mini { height: 22px; }

/* устаревшая строка: приглушена, но видна целиком */
.bp-st__table tr.is-old {
  color: var(--slate);
}

/* устаревший замер: бейджи приглушены — модель залита slate, квантование в рамке rule */
.is-old .mb__name,
.is-old .mb__arch {
  border-color: var(--slate);
}

.is-old .mb__name {
  background: var(--slate);
}

.is-old .mb {
  color: var(--slate);
}

.is-old .qb {
  --c: var(--slate);
  border-color: var(--rule);
  color: var(--slate);
}

/* шапка дивизиона: категория плакатом */
.bp-div-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--navy);
}

.bp-div-head {
  grid-column: 1 / span 6;
  font-weight: 300;
}

.bp-div-top__txt {
  grid-column: 7 / -1;
}

.bp-div-head__name {
  font-size: var(--fs-h2);
  font-weight: 400;
  font-stretch: 112%;
  line-height: 1.2;
}

/* шапка дивизиона — navy-полоса во всю ширину, в ней состав: модель, под ней её квантования */
.bp-div-band {
  padding-block: var(--s7);
}

.bp-div-band .bp-div-top {
  border-bottom: 0;
  padding-bottom: 0;
}

.bp-div-band .bp-st__lim {
  color: var(--haze);
}

.bp-roster {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s6);
  row-gap: var(--s4);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}

.bp-roster__m {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
}

.bp-roster__q {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-roster__q li.is-old .qb {
  --c-dk: var(--haze);
  border-color: var(--line-on-navy);
  color: var(--haze);
}

.bp-roster__q li.is-old .qb__t {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.bp-st-body {
  padding-top: var(--s5);
}

.bp-st-body + .bp-div-band {
  margin-top: var(--s8);
}

/* ------------------------------------------------------------------ текст материала между блоками */

/* Материал с серией режется на разделы по ## (apps/bench/marks.py, Section): в разделе — H2,
   текст (.prose) и блоки в порядке автора. Текст после блока отходит на s7, как текст перед
   рисунком; блок после текста держит свой отступ (.bp-fig — s6). Ширина текста — measure. */
.bp-sec > .wrap > :not(.prose, .bp-h) + .prose {
  margin-top: var(--s7);
}

/* текст на navy-полосе («До боя»): цвет текста белый наследуется; линии и код — светлыми */
.dark .prose blockquote {
  border-left-color: var(--white);
}

.dark .prose code,
.dark .prose pre {
  color: var(--navy);
}

.dark .prose th {
  border-bottom-color: var(--white);
}

.dark .prose td {
  border-bottom-color: var(--line-on-navy);
}

.dark .prose hr,
.dark .prose .footnote {
  border-top-color: var(--line-on-navy);
}

/* таблица в тексте не раздвигает страницу на узком экране: сайт оборачивает таблицы Markdown
   в .table-scroll (role="region"), прокручивается обёртка, а не страница */

/* ------------------------------------------------------------------ список материалов */

/* строка рубрик — как меню шапки, но на светлом: без подчёркивания, текущая — линия 2 px */
.rubric-nav {
  margin-bottom: var(--s6);
}

.rubric-nav ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rubric-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: var(--s2);
}

.rubric-nav a:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

.rubric-nav a[aria-current] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
}

/* строка над заголовком: рубрика, дата или «черновик» — воздухом, без «·» */
.note-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s4);
  row-gap: var(--s1);
  font-size: var(--fs-small);
  color: var(--slate);
}

.note-entry__meta .note-entry__date {
  display: inline;
}

.note-entry__meta .xb {
  font-size: var(--fs-fine);
}

/* ------------------------------------------------------------------ страница замера */

/* шапка: под H1 — модель M и квантование M в строку, ниже подробности; состояние замера
   («Заменён …», «Снят …») — строкой под редакцией */
.bench-measurement .bp-head h1 + p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin-top: var(--s5);
}

.bench-measurement .bp-head h1 + p + .xbs {
  margin-top: var(--s3);
}

.bench-measurement .bp-head .page-head__meta + p {
  max-width: var(--measure);
  margin-top: var(--s4);
}

/* Тело (.prose-wide): полная запись замера. Текст не шире measure, таблицы — во всю колонку
   и прокручиваются в своём блоке. Разделы — H2 через s8, точки нагрузки — H3 через s7. */
.prose-wide > section + section {
  margin-top: var(--s8);
}

.prose-wide section > * + *,
.prose-wide details > * + * {
  margin-top: var(--s4);
}

.prose-wide section > * + h3 {
  margin-top: var(--s6);
}

.prose-wide .bench-point + .bench-point {
  margin-top: var(--s7);
}

.prose-wide :is(p, ul) {
  max-width: var(--measure);
}

/* код — как в тексте заметок: команда запуска, хэши, id точек */
.prose-wide code {
  padding: .1em .3em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--mist);
  border-radius: var(--r);
}

.prose-wide pre {
  width: max-content;
  min-width: 100%;
  padding: var(--s4);
  font-size: var(--fs-small);
  background: var(--mist);
  border-radius: var(--r);
}

.prose-wide pre code {
  padding: 0;
  background: none;
}

/* бейджи варианта в заголовке и строке текста — в строку, без колонки рисунка; не помещаются —
   квантование переносится под модель */
.prose-wide :is(h3, p) .vlab > .mb {
  min-width: 0;
}

/* паспорт замера: ярлык слева, как строки-определения у «Что делаем»; строки — линейкой rule */
.bench-facts {
  display: grid;
  grid-template-columns: 14em minmax(0, 1fr);
  column-gap: var(--gap);
  max-width: 62em;
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--rule);
}

.bench-facts dt,
.bench-facts dd {
  padding-block: var(--s2);
  border-top: 1px solid var(--rule);
}

.bench-facts dt {
  font-weight: 600;
  color: var(--slate);
}

.bench-facts dd {
  overflow-wrap: anywhere;
}

.bench-facts dd > ul {
  margin: 0;
  padding-left: 1.1em;
}

/* таблицы полной записи: та же сетка, что в обзорных, но плотнее — строк много */
.prose-wide .bp-table--grid :is(th, td) {
  padding: var(--s2) var(--s3);
}

.prose-wide .bp-table caption,
.bench-block caption {
  padding-bottom: var(--s2);
  font-size: var(--fs-small);
  text-align: left;
  color: var(--slate);
}

/* блоки стенда в тексте: [[таблица]], [[график]], [[замер]] (apps/bench/blocks.py) */
.bench-block {
  margin-block: var(--s6);
}

.bench-block figcaption,
.bench-note,
.bench-source,
.bench-start,
.bench-outcome {
  font-size: var(--fs-small);
  color: var(--slate);
}

.table-scroll {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
}

.bench-block--measurement {
  max-width: var(--measure);
  padding-block: var(--s4);
  border-block: 1px solid var(--rule);
}

@media (max-width: 760px) {
  .bench-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .bench-facts dd {
    padding-top: 0;
    border-top: 0;
  }
}

/* ------------------------------------------------------------------ узкие экраны */

@media (max-width: 1080px) {
  .bp-poster__head,
  .bp-poster__list {
    grid-column: 1 / -1;
  }

  .bp-rounds__panels,
  .bp-j__panels {
    grid-template-columns: minmax(0, 1fr);
  }

  /* пьедестал: колонка — треть 1080 px и уже; модель — кеглем h3, чтобы самое длинное имя модели
     помещалась в колонку одной строкой; поле справа — s4 */
  .bp-pod .mb--xl { font-size: var(--fs-h3); }
  .bp-pod .qb--l { font-size: var(--fs-small); }

  /* «INT4 AWQ g32 готовый» — одной строкой в трети 768 px */
  .bp-pod__note,
  .bp-pod__and {
    font-size: var(--fs-fine);
  }

  .bp-pod__no,
  .bp-pod__m,
  .bp-pod__q,
  .bp-pod__say {
    padding-right: var(--s4);
  }

  .bp-pod__n {
    font-size: var(--fs-h1);
  }

  /* весовые категории: строка таблицы — блок в той же сетке (уже 1080 px пять столбцов не
     помещаются: имя модели с типом и полоса взвешивания). Сверху — модель на всю ширину,
     под ней вес рядом со своей полосой, ниже три числа; линии сетки — зазор 1 px на цвете
     линии, ячейки белые, победитель залит целиком. */
  .bp-st__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .bp-st__table,
  .bp-st__table tbody {
    display: block;
    width: 100%;
  }

  .bp-st__table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    width: 100%;
    background: var(--table-line);
    border: 1px solid var(--table-line);
  }

  /* вариант — отдельный блок: три ряда ячеек одной строкой не спутать с соседом */
  .bp-st__table tr + tr {
    margin-top: var(--s4);
  }

  .bp-st__table.bp-table--grid :is(th, td) {
    display: block;
    width: auto;
    padding: var(--s3) var(--s3) var(--s4);
    background: var(--white);
    border: 0;
  }

  .bp-st__table.bp-table--grid td.is-best {
    background: var(--win);
  }

  .bp-st__name {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .bp-st__w {
    grid-column: 1;
    grid-row: 2;
  }

  .bp-st__table.bp-table--grid .bp-st__bar {
    display: grid;
    grid-column: 2 / -1;
    grid-row: 2;
    align-content: center;
  }

  .bp-st__n::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--s1);
    font-size: var(--fs-fine);
    font-weight: 400;
    color: var(--slate);
    white-space: normal;
  }

  .bp-st__table td.bp-st__n {
    white-space: normal;
  }
}

@media (max-width: 760px) {
  :root {
    --fig-label: 100%;
    --fig-out: 8.5em;
  }

  /* бейджи на узком экране — на ступень мельче; имя модели может перенестись после дефиса */
  .mb--xl { font-size: var(--fs-small); }
  .mb--l,
  .mb--m { font-size: var(--fs-small); }
  .qb--xl,
  .qb--l,
  .qb--m { font-size: var(--fs-fine); }

  .mb--xl .mb__name,
  .mb--l .mb__name {
    padding: .2em .45em;
  }

  .mb--stack .mb__name {
    white-space: normal;
  }

  .bp-poster__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--s6);
  }

  /* взвешивание: подпись строки над полосой */
  .bp-wi__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s1);
  }

  .bp-wi__row--top > span:first-child,
  .bp-wi__row--axis > span:first-child {
    display: none;
  }

  .bp-pl--rounds,
  .bp-pl--yaxis {
    height: 320px;
  }

  /* исход — под колоколом: колоколу нужна вся ширина */
  .bp-j__row,
  .bp-j__axis {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s1);
  }

  .bp-j__unit {
    text-align: left;
  }

  .bp-j__out {
    padding-bottom: var(--s3);
    font-size: var(--fs-fine);
  }

  .bp-table--big {
    --t-label: 8.5rem;
  }

  .bp-table--big th[scope="row"] {
    font-size: var(--fs-fine);
  }

  /* пьедестал столбиком 1, 2, 3: три колонки в 375 px не помещаются (фраза в трети ширины —
     по слову в строке). Ряды — внутри места; полоса ступени — под своим местом, на всю ширину.
     Бейджи — на ступень крупнее общих правил узкого экрана: имя модели главное.
     Анимация — сверху вниз: полоса, цифра, имя, квантование, фраза; следующее место — через 0,28 с
     (.is-m0…2 — порядковый номер места в категории) */
  .bp-pod__places {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--s6);
  }

  .bp-pod__p {
    grid-column: 1;
    grid-row: auto;
    grid-template-rows: none;
  }

  .bp-pod__no,
  .bp-pod__m,
  .bp-pod__q,
  .bp-pod__say {
    padding-right: 0;
  }

  .bp-pod .mb--xl { font-size: var(--fs-h3); }
  .bp-pod .qb--l { font-size: var(--fs-small); }

  .bp-pod__bar {
    margin-top: var(--s4);
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .bp-pod.is-run .is-m0 .bp-pod__bar { animation-delay: 0s; }
    .bp-pod.is-run .is-m1 .bp-pod__bar { animation-delay: .28s; }
    .bp-pod.is-run .is-m2 .bp-pod__bar { animation-delay: .56s; }
    .bp-pod.is-run .is-m0 .bp-pod__no { animation-delay: .1s; }
    .bp-pod.is-run .is-m0 .bp-pod__m { animation-delay: .16s; }
    .bp-pod.is-run .is-m0 .bp-pod__q { animation-delay: .22s; }
    .bp-pod.is-run .is-m0 .bp-pod__say { animation-delay: .28s; }
    .bp-pod.is-run .is-m1 .bp-pod__no { animation-delay: .38s; }
    .bp-pod.is-run .is-m1 .bp-pod__m { animation-delay: .44s; }
    .bp-pod.is-run .is-m1 .bp-pod__q { animation-delay: .5s; }
    .bp-pod.is-run .is-m1 .bp-pod__say { animation-delay: .56s; }
    .bp-pod.is-run .is-m2 .bp-pod__no { animation-delay: .66s; }
    .bp-pod.is-run .is-m2 .bp-pod__m { animation-delay: .72s; }
    .bp-pod.is-run .is-m2 .bp-pod__q { animation-delay: .78s; }
    .bp-pod.is-run .is-m2 .bp-pod__say { animation-delay: .84s; }
  }

  .bp-div-head,
  .bp-div-top__txt {
    grid-column: 1 / -1;
  }

  .bp-div-top__txt {
    margin-top: var(--s4);
  }

  .bp-m__head {
    column-gap: var(--s3);
  }

  .bp-m__side .xbs {
    font-size: var(--fs-fine);
  }

  .bp-t--mv {
    font-size: var(--fs-fine);
  }

  .bp-data li {
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-roster {
    column-gap: var(--s5);
  }

  .bp-st__q > .xbs {
    flex-basis: 100%;
  }
}

@media (max-width: 480px) {
  /* три числа в ряд на 375 px: поля ячеек уже, длинное слово подписи переносится по слогам (­) */
  .bp-st__table.bp-table--grid td.bp-st__n {
    padding-inline: var(--s2);
  }

  .bp-t--minor,
  .bp-t--wide {
    display: none;
  }

  .bp-poster__list {
    column-gap: var(--s4);
  }
}

@media (max-width: 359px) {
  /* самые узкие телефоны: подписи у концов линий «Раундов» — 14 px, как остальные подписи рисунков,
     иначе выделенная («INT4 AWQ g128») выходит за край окна */
  .bp-t--end {
    font-size: var(--fs-fine);
  }
}