display.css

/*
 * display.css — стили полноэкранного окна.
 *
 * Вынесены из inline-<style> в display.html 11.08.2026 тем же приёмом и по той
 * же причине, что control.css: правило, которое нельзя увидеть, нельзя и
 * проверить. Именно в этом наборе за один проход нашлись четыре мёртвых или
 * отсутствующих правила цветовых полос — их не видел никто, потому что они
 * тонули в 1383 строках посреди разметки.
 *
 * ПОРЯДОК ПОДКЛЮЧЕНИЯ НЕСУЩИЙ, ровно как у панели:
 *     fonts.css -> design-tokens.css -> surface-tones.css -> display.css
 * Этот файл идёт ПОСЛЕДНИМ и обязан выигрывать при равной специфичности.
 * Закреплено тестом.
 */

/* Палитра этого окна живёт в surface-tones.css — одна копия на три окна,
   чей фон принадлежит не теме, а пользователю. Здесь лежали ОБА блока
   (`:root.on-light-bg` и `:root:not(.on-light-bg)`), и они были дословным
   повторением светлой и тёмной тем из design-tokens.css плюс третья копия
   пина из <style> виджета. */


/* ============================================================
   Fullscreen Display — VisionOS glassmorphism v2
   Uses design-tokens.css. Hex only in SVG stops + LED glow.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; height: 100%; overflow: hidden; }
/* Solid dark base layer — guards against the BrowserWindow's default
   white showing through if `body` ever fails to fully cover (e.g.,
   sub-pixel rounding on fractional DPI, brief mid-transition gaps
   when --bg is swapped). Parity with `backgroundColor: '#000000'`
   on the BrowserWindow. Note: the separate Windows-11 DWM hairline
   around the viewport is NOT from here — it's the native
   WS_THICKFRAME border, killed via `thickFrame: false` in main. */
html { background: #000000; }

/* Мера окна принадлежит КОРНЮ, а не контейнеру таймера.
   Первая версия объявила её в `.display-container` — и не сработала совсем:
   подвижные карточки лежат в разметке РЯДОМ с ним, а не внутри, наследование
   до них не доходит, `var(--band-unit)` не разрешался, и браузер выбрасывал
   объявление целиком. Симптом был не «размер другой», а «стиля нет»: кегль
   16px и нулевые поля, то есть вид без CSS вообще. */
:root {
  /* ПОЛОСА СОДЕРЖИМОГО — одна мера на размеры всех подвижных карточек.
     Ровно та же величина, от которой раскладка считает координату X
     (CONTENT_ASPECT в display-layouts.js): на 16:9 и уже это вся ширина
     окна, на сверхшироком — его центральная часть.

     Заведена 28.08.2026 по жалобе «раскладка ведёт себя по-разному на
     разных дисплеях». У дисплея жили ДВЕ системы размеров: место элемента —
     доля окна, а размер — CSS-пиксели с потолком (`clamp(13px, 1.4vmin,
     18px)`). Замер на 3380×1253 против 1366×1024: одна и та же карточка
     занимала 14,1 % полосы на широком экране и 30,4 % на узком. А раз она
     шире — её край упирается в поле у границы, и поджатие толкает карточку
     внутрь: центры разъезжались. Кривые координаты были СЛЕДСТВИЕМ габарита.

     Таймер сюда НЕ переведён намеренно: он квадратный и обязан влезать по
     ВЫСОТЕ, поэтому остаётся на `55vh`. Требовать от него доли полосы
     значило бы на сверхшироком экране просить 98 % высоты окна.

     Пороги ниже — только НИЖНИЕ (`max`), потолка нет: потолок и есть та
     поломка, которую здесь чинят. Порог включается на полосе уже ~1150px,
     то есть в маленьком ОКНЕ, а не на мониторе. */
  --content-band: min(100vw, 177.78vh);
  --band-unit: calc(var(--content-band) / 100);
}

body {
    font-family: var(--tw-font-sans);
    color: var(--tw-fg);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Default background = kit gradient. --bg var is set by applyBackground() for user themes. */
    background: var(--bg, linear-gradient(135deg, #1a1b3a 0%, #0d1117 45%, #000 100%));
    transition: background var(--tw-dur-slow) var(--tw-ease);
    background-size: cover;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* Мягкие радиальные свечения — синее и зелёное, фирменный жест.
   Раньше комментарий тут утверждал, что слой «присутствует только
   когда --bg не переопределён пользователем». Это было неправдой: слой
   рисовался ВСЕГДА и поверх фона, поэтому режим «Заливка» заливки не
   давал — выбранный цвет всегда оставался подкрашен двумя пятнами.
   Теперь applyBackground вешает на body класс custom-bg в режимах
   «Заливка» и «Файл» и снимает его в «Градиенте». */
body::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(10, 132, 255, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(48, 209, 88, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(88, 86, 214, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

body.custom-bg::before { display: none; }

.display-container {
    text-align: center;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    /* Лейбл «ОСТАЛОСЬ» — обычный ребёнок центрируемой колонки, поэтому
       он смещал центр кольца ВНИЗ ровно на половину своей высоты, и
       величина смещения зависела от активного стиля. Замер на 1280×720:
       центр кольца 384px при центре окна 360px.
       Выносить лейбл в position: fixed нельзя — это сломало бы все
       четыре стиля разом. Вместо этого делаем колонку симметричной:
       снизу добавляем ровно ту высоту, которую лейбл занимает сверху. */
    /* Масштаб подписи входит в компенсацию: колонка держит под неё место, и
       увеличенная подпись обязана получить больше места, иначе таймер съедет
       вверх ровно на прирост. Владелец числа один — `--hero-label-scale` на
       <body>, его ставит display-script при масштабировании подписи. */
    --hero-block: calc((clamp(18px, 2.2vmin, 44px) * 1.2 + clamp(16px, 2.5vh, 48px)) * var(--hero-label-scale, 1));
    /* Рама героя — ОДНА на все стили, объявлена здесь, а не у каждого.
       Кольцо жило по ней и раньше (`--ring-size` у .timer-ring), стиль
       «Цифры» берёт её же: раскладка эту высоту заведомо вмещает, и
       второй копии литерала, которой предстояло бы разъехаться с
       первой, не появляется.

       `--timer-shrink` — НЕ вторая настройка размера и не подпорка к долям
       вьюпорта: доли остаются ровно теми, какими подобраны (разбор про 4K
       ниже, у --ring-size). Это уступка, которую герой делает, когда колонка
       не помещается между прижатой к верху карточкой и плашкой состояния —
       единственный случай, когда его нечем подвинуть (см. updateTopBand в
       display-script.js). В обычном окне член равен нулю, и выражение
       вычисляется байт в байт как прежнее.

       `max(...)` — предохранитель: даже при испорченном замере рама не
       схлопывается в точку.

       У аналогового стиля своя доля вьюпорта (--analog-size), и уступку он
       вычитает ТЕМ ЖЕ членом: слагаемое одно на все стили, иначе «уступил»
       означало бы разное в разных стилях. */
    --timer-box: max(120px, min(60vw, 55vh, 1600px) - var(--timer-shrink, 0px));
    padding: var(--tw-s-10);
    padding-bottom: calc(var(--tw-s-10) + var(--hero-block));
    /* Полоса, занятая прижатыми к верху карточками. Ставит её
       updateTopBand() (display-script.js), там же разбор и замеры.
       Колонка центрируется по ОСТАВШЕЙСЯ высоте: карточки стоят `fixed` от
       верхнего края, колонка — по центру окна, и на низком окне эти два
       способа сказать «где элемент» сходились в одной точке. Отступ сверху
       ровно на полосу и означает «центрируйся ниже неё»: колонку центрирует
       флексбокс, поэтому прирост отступа сверху смещает её на половину — то
       есть в середину полосы [--top-band; низ окна]. */
    padding-top: calc(var(--tw-s-10) + var(--top-band, 0px));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   INFO BLOCKS — Alt-draggable, per-block localStorage positions
   ============================================================ */
.info-block {
    /* Умолчание масштаба карточки. Пара к DEFAULT_BLOCK_SCALE в
       display-layouts.js — разъедься они, чистый профиль показывал бы одно, а
       сохранённые проценты означали другое (tests/display-layouts.test.js). */
    --info-scale: 1.5;
    position: fixed;
    text-align: center;
    /* Колонка «подпись → (циферблат) → значение» — ОДНА на все четыре стиля.
       До 19.08.2026 её строил только аналог, а остальные полагались на поток
       блочных детей: у блока без подписи (название мероприятия) значение
       вставало выше значений соседей, и верхний ряд читался вразнобой. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(calc(0.9 * var(--info-scale)));
    transition: opacity var(--tw-dur-slow) var(--tw-ease),
                transform var(--tw-dur-slow) var(--tw-ease);
    z-index: 100;
    padding: max(9px, calc(0.83 * var(--band-unit))) max(14px, calc(1.35 * var(--band-unit)));
    /* Плиты у блока НЕТ НИ В ОДНОМ стиле (просьба 19.08.2026: «заднюю рамку
       убрать у функциональных блоков»). Раньше здесь стояли заливка
       --tw-bg-timer, размытие фона и тень карточки; стили «Круг», «Флип» и
       «Аналог» её гасили каждый у себя, а «Цифры» рисовали поверх неё свою.
       Гасить заливку тремя правилами было мало: `background: none` не снимает
       `backdrop-filter`, и размытый прямоугольник оставался виден — на светлом
       тоне особенно (см. screenshots/display-blocks-light-flip.png до правки).
       Поэтому плита снята ЗДЕСЬ, в одном месте: стиль рисует фигуру на
       ЗНАЧЕНИИ (пластина флипа, циферблат аналога), а блок-обёртка фигурой не
       является.

       Поля НЕ снимаются: ими задан габарит блока, а по габариту считаются
       раскладки, поджатие к краям экрана и полоса сверху (--top-band). */
    background: none;
    border: none;
    box-shadow: none;
    border-radius: var(--tw-r-xl);
    max-width: calc(30.9 * var(--band-unit));
}

/* Блок без подписи (название мероприятия) РЕЗЕРВИРУЕТ её строку: пустой
   `.info-label` подчиняется всем тем же правилам стиля, что и настоящий,
   поэтому значение встаёт ровно на ту же высоту, что у соседей по ряду.
   Нулевой ширины пробел нужен, чтобы у пустого div появился строчный бокс. */
.info-label:empty::before { content: '\200B'; }

.info-block.visible {
    opacity: 1;
    transform: scale(var(--info-scale));
}

/* Раскладка МЕРЯЕТ коробки, поэтому на время расчёта переходы снимаются.
   Не косметика: масштаб элемента живёт в `transform: scale(var(--info-scale))`,
   и на `transform` ниже висит переход. Переменная меняется мгновенно, матрица
   едет 400 мс — а `applyLayout` и `placeElementAt` читают
   `getBoundingClientRect()` СРАЗУ, то есть видят прошлый масштаб.

   Замер на живом окне (18.08.2026, жалоба «при масштабировании пресеты ставят
   элементы неровно»): `--info-scale` уже 0.95, `transform` ещё
   `matrix(4.95, …)`. Поджатие масштаба к свободной полосе считалось от
   впятеро завышенной высоты, и «Сводка» приезжала с карточками 62 % рядом с
   95 % — ряд из четырёх плашек двух разных размеров.

   Класс держится ровно один кадр и снимается в requestAnimationFrame:
   значения к тому моменту уже конечные, анимировать нечего.

   `!important` и потомки — потому что переход объявлен и на самих блоках, и на
   подписи со значением внутри них; правило-исключение обязано перекрыть все. */
body.layout-settling .display-movable,
body.layout-settling .display-movable * {
    transition: none !important;
}

/* Hidden blocks must be taken out of the render tree entirely. Per-style
   overrides (body.style-analog .info-block etc.) have specificity (0,2,1)
   and win over (0,2,0) selectors, so faint rectangles kept bleeding
   through `opacity: 0` at screen corners. `display: none` is the only
   bullet that pierces all cascades. Downside: fade-in animation is lost
   when a block is toggled on — acceptable in a presentation window. */
body .info-block:not(.visible) {
    display: none !important;
}

/* Preset positions — transform-origin anchors corner/edge scaling */
.info-block.top-left    { top: 20px; left: 20px;   transform-origin: top left; }
.info-block.top-center  { top: 20px; left: 50%;    transform-origin: top center;
                           transform: translateX(-50%) scale(calc(0.9 * var(--info-scale))); }
.info-block.top-center.visible { transform: translateX(-50%) scale(var(--info-scale)); }
.info-block.top-right   { top: 20px; right: 20px;  transform-origin: top right; }
.info-block.bottom-left  { bottom: 100px; left: 20px;  transform-origin: bottom left; }
.info-block.bottom-center { bottom: 100px; left: 50%;  transform-origin: bottom center;
                             transform: translateX(-50%) scale(calc(0.9 * var(--info-scale))); }
.info-block.bottom-center.visible { transform: translateX(-50%) scale(var(--info-scale)); }
.info-block.bottom-right { bottom: 100px; right: 20px; transform-origin: bottom right; }

.info-block.top-left-third { top: 20px; left: 20%; transform-origin: top left;
                              transform: translateX(-50%) scale(calc(0.9 * var(--info-scale))); }
.info-block.top-left-third.visible { transform: translateX(-50%) scale(var(--info-scale)); }
.info-block.top-right-third { top: 20px; right: 20%; transform-origin: top right;
                               transform: translateX(50%) scale(calc(0.9 * var(--info-scale))); }
.info-block.top-right-third.visible { transform: translateX(50%) scale(var(--info-scale)); }
.info-block.bottom-left-third { bottom: 100px; left: 20%; transform-origin: bottom left;
                                 transform: translateX(-50%) scale(calc(0.9 * var(--info-scale))); }
.info-block.bottom-left-third.visible { transform: translateX(-50%) scale(var(--info-scale)); }
.info-block.bottom-right-third { bottom: 100px; right: 20%; transform-origin: bottom right;
                                  transform: translateX(50%) scale(calc(0.9 * var(--info-scale))); }
.info-block.bottom-right-third.visible { transform: translateX(50%) scale(var(--info-scale)); }

.info-label {
    font-family: var(--tw-font-sans);
    /* ОДИН кегль на все четыре стиля. Прежде их было три: 12px в базе,
       clamp(13…18) у круга и clamp(10…15) у аналога — три разных ответа на
       вопрос «какого размера подпись блока», и в кадре с блоками разных стилей
       рядом это читалось как случайность. Кегль растёт вместе с экраном: на
       3440×1440 прибитые 12px занимали треть высоты значения.

       С 28.08.2026 кегль ведётся от ПОЛОСЫ СОДЕРЖИМОГО, а не от `vmin`, и без
       верхнего потолка: потолок `18px` останавливал рост подписи там, где
       таймер продолжал расти, и одна раскладка выглядела на двух мониторах
       двумя разными раскладками (разбор — у `--content-band`). */
    font-size: max(11px, calc(0.79 * var(--band-unit)));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* Тон подписи — ОДИН на все четыре стиля, «вторичный текст».
       Прежде их было три: --tw-fg-dim в базе (которого не было ни у одного
       стиля) и --tw-fg-muted у трёх стилей из четырёх. Плиты под подписью
       больше нет, и считать контраст надо к ХОЛСТУ ОКНА: на самом светлом из
       встроенных фонов («Мята», #134e5e) dim давал 3,43:1, muted — 4,27:1,
       то есть оба ниже AA. --tw-fg-secondary даёт 6,32:1 в худшем из десяти
       фонов; считает tests/contrast.test.js. */
    color: var(--info-color-dim, var(--tw-fg-secondary));
    /* Плиты под подписью больше нет ни в одном стиле, а фоном может стоять
       фотография — тень держит читаемость там же, где её держит тень под
       значением (она в базовом правиле .info-value). */
    text-shadow: var(--style-ink-shadow);
    margin-bottom: max(6px, calc(0.52 * var(--band-unit)));
    transition: color var(--tw-dur-base) var(--tw-ease);
}

.info-value {
    /* Тоже доля полосы, тоже без потолка — см. `--content-band`. */
    font-size: max(15px, calc(1.83 * var(--band-unit)));
    font-weight: 500;
    font-family: var(--tw-font-sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    color: var(--info-color, var(--tw-fg));
    text-shadow: var(--style-ink-shadow);
    white-space: nowrap;
    transition: color var(--tw-dur-base) var(--tw-ease),
                text-shadow var(--tw-dur-base) var(--tw-ease);
}

/* Сумма «47-го этажа» растёт на глазах: «0 ₽» → «1 250 000 ₽», вчетверо по
   ширине. Раскладка мерит карточку в момент выбора, то есть на «0 ₽», и
   дальше блок расползался — к таймеру и под него (замер 30.09.2026 на
   1280×720: 146..289 → 137..359, центр уехал на 30px).

   Ширина под семь разрядов резервируется НЕВИДИМОЙ СТРОКОЙ того же вида под
   значением, а не числом в `ch`: пробелы-разделители и знак рубля не
   табличные, а у «Флипа» у значения свои поля — резерв 9ch там не сходился
   (замер: 139 → 151px). Призрак набран тем же шрифтом, с теми же полями и в
   том же стиле, поэтому совпадает в любом из четырёх. Высоты он не занимает.
   Сверх резерва блок переставляется от ЦЕНТРА (display-script:
   updateMoneyBlocks). */
.info-value.money-value {
    text-align: center;
}
.info-value.money-value::after {
    content: '0\00a0 000\00a0 000\00a0₽';
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* ===== Оформление блоков информации по стилям ===== */

/* «Круг» своих правил для блоков БОЛЬШЕ НЕ ИМЕЕТ, и это не пропуск.
   Проба 17.08.2026 сняла у него плиту, 19.08.2026 плита снята у всех четырёх
   стилей в базовом `.info-block`, а кегль и тон подписи сведены к одному
   набору там же. Урок той пробы остался в силе и записан в базе: подпись без
   плиты держится размером и тоном, растёт вместе с экраном и считается по
   контрасту к ХОЛСТУ окна, а не к карточке. */

/* «Цифры». Плиты у блока НЕТ: до 19.08.2026 он носил тёмную карточку
   --tw-bg-led с кромкой и двумя тенями — ту самую «заднюю рамку», из-за
   которой пять блоков читались как пять окон поверх кадра. Стиль остался в
   том, что и должно его нести: подпись цветом табло и значение выбранным
   шрифтом «Цифр». Контраст подписи (теперь ПРЯМО НА ХОЛСТЕ окна, а не на
   карточке) считает tests/contrast.test.js. */
/* Значение блока набирается ТЕМ ЖЕ шрифтом, что и сам таймер: семейство и
   начертание кладёт display-script (applyDigitsFontToBlocks) из реестра
   digits-style.js. Прибить их здесь нельзя — шрифт выбирает пользователь, и
   у окна он свой (displayDigitsFont). До 18.08.2026 блок «Цифр» был набран
   интерфейсным sans: стиль менялся, а блоки рядом оставались прежними. */
body.style-digits .info-value {
    /* Семейство и начертание — ИЗ РЕЕСТРА digits-style.js, а не «жирный sans».
       Начертание берётся оттуда же, а не прибивается 700: у Bebas Neue и
       Orbitron в проекте лежит по одному файлу, и запрос несуществующего веса
       браузер удовлетворяет СИНТЕТИЧЕСКИМ жирным — глиф утолщается алгоритмом
       и расходится с теми же цифрами в таймере над блоком.
       Запасные значения — прежний вид: на них окно живёт до первой посылки
       настроек. */
    font-family: var(--digits-font-family, var(--tw-font-sans));
    font-weight: var(--digits-font-weight, 700);
    /* Цвет — ОБЫЧНЫЙ текст, как у «Флипа» и «Круга».
       До 26.08.2026 здесь стоял `--tw-led-green` — остаток стиля LED, слитого
       с «Цифрами» 13.08.2026. Он противоречил комментарию выше (стиль несёт
       ШРИФТ, а не цвет) и красил блок под табло, которое само уже не зелёное:
       замер на светлом тоне давал rgb(18,101,47) у блока при rgb(29,29,31) у
       цифр таймера. Зелёной осталась ПОДПИСЬ — у неё свой тон-зависимый
       `--style-led-label`, и это решение держит tests/contrast.test.js. */
    color: var(--info-color, var(--tw-fg));
    /* Неон снят редизайном 2026-08-12. */
    text-shadow: var(--style-ink-shadow);
}

/* «Флип». Блок повторяет стиль ШРИФТОМ — и только им.

   Здесь стояла пластина табло: та же `--style-plate`, та же линия сгиба, тот
   же блик. Замысел был «блок повторяет карточку таймера», и на белом холсте он
   работал. Сломался он на ФОНЕ, которого у холста нет: пластина светлого тона
   — это белый прямоугольник, а тон выбирается по ЯРКОСТИ фона, и насыщенный
   цветной градиент (замер: #0a84ff → #30d158, средняя яркость 0.37 при пороге
   0.179) считается светлым по праву — тёмные буквы на нём читаются лучше
   белых. Вместе с буквами белела и пластина: четыре белые карточки на
   сине-зелёном экране, просьба 24.08.2026 «при градиенте у функциональных
   блоков белая подложка».

   Отсюда правило: ПЛИТА ПРИНАДЛЕЖИТ ТАЙМЕРУ. Карточка перекидыша ею и
   является — фигура, которая переворачивается; блок же показывает время
   строкой, и прямоугольник под ней ничего не изображает. Ровно так 19.08.2026
   уже была снята задняя рамка самих блоков; пластина на ЗНАЧЕНИИ тогда
   пережила решение, потому что её считали частью стиля, а не фигурой.

   Держит e2e/display-block-plate.spec.js: он же проверяет, что у САМОЙ
   карточки таймера плита осталась. */
body.style-flip .info-value {
    position: relative;
    display: inline-block;
    padding: 0.16em 0.34em;
    font-family: var(--tw-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--info-color, var(--tw-fg));
    text-shadow: var(--style-ink-shadow);
    z-index: 1;
}
/* Название мероприятия пластины НЕ получает: просьба была про БЛОКИ ВРЕМЕНИ,
   а название — свободный текст, который на табло вокзала не пишут. */
body.style-flip .info-value-title {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    overflow: visible;
}
body.style-flip .info-value-title::before,
body.style-flip .info-value-title::after { content: none; }

/* ===== Аналог: круг принадлежит ЦИФЕРБЛАТУ, а не блоку =====

   Жалоба 18.08.2026: «надписи выезжают из функциональных блоков и название
   мероприятия в круге, зачем?». Причина одна на оба симптома: правило висело на
   `.info-block`, то есть делало кругом ЛЮБОЙ блок — и тот, у которого циферблата
   нет вовсе.

   Замер на живом окне (блок 120×120 при масштабе 1.2):
     — «Текущее время» 115.6px и «До завершения» 117.6px против ХОРДЫ круга на
       высоте подписи ≈96px: подпись вылезала за окружность на ~20px;
     — «Ежегодная конференция» 216.2px в круге 120px — вылезала на 96px.

   Отсюда разделение по признаку, а не по списку id: круглый циферблат получает
   тот блок, у которого циферблат ЕСТЬ (`:has(.mini-clock)`). Строкой идёт
   название мероприятия — оно не показывает времени, и циферблатом ему быть не
   с чего.

   «До завершения» циферблат ПОЛУЧИЛО 19.08.2026 (просьба: «в полноэкранном
   аналоге „до завершения“ без стиля аналога»). Раньше мини-часов там не было
   намеренно — «это длительность, а не момент», — но ровно так же устроен и
   САМ таймер этого стиля: большой циферблат показывает длительность остатка,
   и стрелки его считаются из секунд (updateAnalogDisplay). Блок повторяет
   стиль тем же способом: те же стрелки, та же арифметика — час за 12 часов
   остатка, минута за 60 минут.

   Подпись и значение выведены из круга В ПОТОК, над и под ним. Пока они стояли
   абсолютом внутри окружности, длина подписи была ничем не ограничена, а
   ограничение появлялось только на экране. Теперь блок сам растёт под свою
   подпись, и подгонка раскладок это видит: она меряет offsetWidth/offsetHeight. */

/* Блок-обёртка перестал быть фигурой: у него нет ни фона (это теперь общее
   правило базы), ни размера. */
body.style-analog .info-block {
    border-radius: 0;
    padding: 0;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: calc(33vw - 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Подпись и значение — В ПОТОКЕ. Абсолютное позиционирование внутри круга и
   было тем, что позволяло им вылезать: у абсолютного бокса нет обязательства
   поместиться. */
/* Кегль подписи НЕ переопределяется: он один на все стили (см. `.info-label`).
   Блок здесь `width: auto` и растёт под свою подпись, поэтому больший кегль
   расширяет блок, а не вылезает из него — что и проверяет
   e2e/display-blocks.spec.js замером «шире своего блока на N px». */
body.style-analog .info-label {
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0;
    white-space: nowrap;
}

body.style-analog .info-value {
    font-family: var(--tw-font-mono);
    font-weight: 600;
    color: var(--info-color, var(--tw-fg-secondary));
    /* Потолок 17px, а не 20px, и это НЕ вкусовщина, а ширина ХОРДЫ.
       Значение стоит внутри круга, ниже центра, и помещается не в диаметр, а в
       хорду на своей высоте. Замер 19.08.2026 (жалоба «в аналоге цифры в
       блоках выезжают за часы»): при 20px «17:02:24» занимало 140px против
       хорды 135 — цифры пересекали окружность на 3px с каждой стороны. Часы
       появляются у «Текущего времени» всегда, а у «До завершения» — при
       остатке больше часа, то есть на любом длинном мероприятии.
       При 17px та же строка — 119px: запас 16px, и он не зависит от масштаба
       карточки (циферблат и шрифт растут вместе). */
    font-size: clamp(12px, 1.15vmin, 17px);
}
/* Значение — обратно ВНУТРЬ циферблата, абсолютом по нижней части блока
   (блок теперь ровно «подпись + циферблат», поэтому 12 % от его высоты попадают
   в нижнюю треть круга).

   Почему значению абсолют можно, а подписи нельзя, — это не двойной стандарт, а
   разная ограниченность текста. Значение здесь всегда время: не длиннее
   «00:00:00», моноширинным это 72px против хорды ≈96px на его высоте, и запас
   не зависит от масштаба — блок масштабируется целиком. Подпись же задаёт не
   код, а язык интерфейса, и «До завершения» уже не помещалось.

   Ради чего вернули: в потоке блок вырастал до 184px и сильнее наезжал на
   подпись «Осталось» в позиции по умолчанию. */
body.style-analog .info-block:has(.mini-clock) .info-value {
    position: absolute;
    bottom: 12%;
    left: 0;
    right: 0;
    text-align: center;
}


/* Название мероприятия — строкой, как в остальных стилях: ни круга, ни плашки.
   Оно не показывает время, и циферблатом ему быть не с чего. */
body.style-analog .info-value-title {
    font-family: var(--tw-font-sans);
    /* Кегль НЕ наследует «значение аналога»: тот занижен, потому что стоит
       ВНУТРИ циферблата (100px, хорда ≈96px). У названия циферблата нет, и с
       заниженным кеглем оно выходило мельче подписей соседних блоков — самый
       крупный текст ряда оказывался самым мелким. Здесь работает общая шкала
       значения, чуть тише базовой: название длиннее времени и переносится. */
    font-size: clamp(16px, 1.9vmin, 26px);
}

/* Вот он, круг: 100×100 и в потоке между подписью и значением. Размер
   ФИКСИРОВАННЫЙ и остаётся пиксельным — деления мини-циферблата вращаются
   вокруг `transform-origin: center 46px`, и перевод их в проценты это отдельная
   работа со своим риском. Масштабируется блок целиком, через --info-scale. */
body.style-analog .info-block .mini-clock {
    position: relative;
    width: 100px;
    height: 100px;
    flex: none;
    display: block;
    border-radius: 50%;
    background: var(--style-dial);
    border: 1px solid var(--style-edge);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.35),
        var(--style-drop);
}
body.style-analog .info-block .mini-hand {
    position: absolute;
    bottom: 50%; left: 50%;
    transform-origin: center bottom;
    border-radius: 2px;
}
body.style-analog .info-block .mini-hand-hour {
    width: 3px; height: 18px;
    background: var(--style-hand);
    transform: translateX(-50%) rotate(0deg);
    z-index: 2;
}
body.style-analog .info-block .mini-hand-minute {
    width: 2px; height: 26px;
    background: var(--style-hand);
    transform: translateX(-50%) rotate(0deg);
    z-index: 3;
}
body.style-analog .info-block .mini-center {
    position: absolute;
    width: 6px; height: 6px;
    /* Тот же владелец, что у центра большого циферблата: сначала выбранный
       пользователем цвет таймера, иначе фирменная пара. Прежде здесь стоял
       литерал, и при выбранном цвете мини-часы оставались сине-зелёными
       рядом с перекрашенным циферблатом. */
    background: var(--timer-color, var(--analog-center-bg, linear-gradient(135deg, #0a84ff, #30d158)));
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}
body.style-analog .info-block .mini-tick {
    position: absolute;
    width: 1px; height: 4px;
    background: var(--style-tick);
    left: 50%; top: 4px;
    /* `top` + origin = середина padding-бокса: 100px с рамкой 1px → 98 → 49.
       Было 4 + 46 = 50, ось на 1px ниже центра. */
    transform-origin: center 45px;
}
body.style-analog .info-block .mini-tick.quarter {
    width: 2px; height: 6px;
    background: var(--style-tick-strong);
    top: 3px;
    transform-origin: center 46px;
}
/* Угол мини-деления — тем же приёмом, что у .clock-tick (см. ниже). Сдвиг
   translateX(-50%) — часть того же transform, как и было в разметке. Правило
   вне body.style-analog: так же безусловно стоял и прежний style="…". */
.mini-clock > .mini-tick {
    transform: translateX(-50%) rotate(calc((sibling-index() - 1) * 30deg));
}

/* ============================================================
   CIRCLE TIMER — the hero ring
   ============================================================ */
.timer-ring {
    /* Диаметр был зажат 800px ТРИЖДЫ: третьим аргументом min() и ещё
       двумя дублирующими max-*. На 4K герой занимал ~37% высоты вместо
       55%. Доли вьюпорта НЕ трогаем: на 720p/1080p/1440p вычисленный
       размер остаётся байт в байт прежним — потолок начинает работать
       только выше 2909px, — поэтому эталоны сверки не переписываются. */
    --ring-size: var(--timer-box);
    position: relative;
    width: var(--ring-size);
    height: var(--ring-size);
    margin: 0 auto;
}

.timer-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 10px 40px var(--style-drop-ink));
}

.ring-bg {
    fill: var(--tw-overlay-light);
    stroke: var(--tw-border);
    stroke-width: 2;
}

.ring-track {
    fill: none;
    /* В ОДНОМ файле, на одних ролях, круговой стиль был вдвое бледнее
       аналогового циферблата и не дотягивал до 3:1 для нетекстовой
       графики. Инвариант «кольцо в перерасходе невидимо» не задет: он
       про #progressRing — дугу нулевой длины. Трек это отдельный
       элемент, он и должен быть виден. */
    stroke: var(--style-ring-track);
    stroke-width: 12;
}

.ring-progress {
    fill: none;
    stroke: url(#mainGradient);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--tw-dur-slow) var(--tw-ease-out);
}

.ring-progress.warning {
    stroke: url(#warningGradient);
}

.ring-progress.danger {
    stroke: url(#dangerGradient);
    animation: danger-pulse 1s infinite;
}

/* Стопы обоих градиентов — из полос, а не из презентационных атрибутов в
   разметке. Дуга это ГРАФИКА (порог WCAG 3:1), и на белом фоне литералы её
   почти гасили: красный держался на 3.41:1, а ЖЁЛТЫЙ #ffc107 — на 1.63:1,
   то есть дуга предупреждения на светлом фоне не читалась вовсе.
   Правило CSS перебивает атрибут `stop-color`, поэтому в разметке он снят:
   два владельца одного значения — ровно то, из-за чего разъезжаются копии
   (тем же приёмом уже живёт #widgetGradient в виджете). */
/* Основной градиент кольца — теми же переменными и с теми же значениями по
   умолчанию, что у виджета и часов: одна механика окраски кольца на три окна.
   Правило CSS сильнее презентационного атрибута, поэтому цвет СНИМАЕТСЯ вместе
   с переменной — ради этого правило и заведено (см. applyColors). */
#mainGradient stop:first-child { stop-color: var(--timer-color-stop, #0a84ff); }
#mainGradient stop:last-child  { stop-color: var(--progress-color-stop, #30d158); }
#dangerGradient stop:first-child  { stop-color: var(--tw-band-danger); }
#dangerGradient stop:last-child   { stop-color: var(--tw-band-danger-deep); }
#warningGradient stop:first-child { stop-color: var(--tw-band-warning); }
#warningGradient stop:last-child  { stop-color: var(--tw-band-warning-deep); }

/* ПЕРЕРАСХОД красится правилами .danger — отдельных .overtime здесь нет.
   JS всегда навешивает эти классы ПАРОЙ (`classList.add('danger','overtime')`
   в updateProgress / _enforceOvertimeColors / updateDigitalDisplay / …), а
   палитра статусов у приложения одна на три окна: перерасход — КРАСНЫЙ с
   пульсацией (см. CLAUDE.md). Раньше в дисплее рядом лежал ещё слой
   .overtime от прежнего оранжевого дизайна — пять правил на кольцо, цифры
   круга, LED, флип и аналог. Четыре из них были не видны, потому что JS
   ставит красный ИНЛАЙНОМ, а пятое протекало: у `.time-text.overtime`
   перебивался только color, а `--text-glow` оставался оранжевым — красные
   цифры светились оранжевым. Плюс кольцо в перерасходе вообще не рисуется
   (updateProgress зажимает ratio в 0, дуга нулевой длины), так что
   оранжевый градиент и штриховка были заведомо мертвы.
   Не возвращать: оранжевый разойдётся с виджетом, часами и статус-плашкой. */

@keyframes danger-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Правила `.tick-line` удалены вместе с самими засечками кольца (17.08.2026):
   разметка циферблата на кольце обратного отсчёта ничего не сообщала. Стили
   часов (`.clock-tick`) и мини-часов в блоках (`.mini-tick`) — это другое, они
   на настоящих циферблатах и остаются. */

/* Center numeral */
.center-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.time-text {
    font-size: calc(var(--ring-size, 400px) * 0.22);
    /* Inter 200 — единственный из четырёх стилей окна легче 500.
       Волосяной штрих на проекторе через ряд теряется. 300 уже есть в
       fonts.css и в build.files, новых файлов не нужно.
       Панели и виджета это НЕ касается: там дистанция вытянутой руки. */
    font-weight: 300;
    font-family: var(--tw-font-display);
    /* Цвет темы приходит ПЕРЕМЕННОЙ, а не инлайном: инлайн бьёт правила
       полос (.warning/.danger) и делал их недостижимыми из CSS. */
    color: var(--timer-color, var(--tw-fg));
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    /* Ореол снят; нейтральная тень оставлена — она отделяет цифры от фона,
       который на дисплее задаёт пользователь. */
    text-shadow: var(--style-ink-shadow);
    transition: color var(--tw-dur-base) var(--tw-ease-out),
                text-shadow var(--tw-dur-base) var(--tw-ease-out),
                font-size var(--tw-dur-base) var(--tw-ease-out);
    white-space: nowrap;
    line-height: 1;
}

/* Перерасход уменьшал цифры на 28% (0.22 → 0.16 от диаметра), хотя знак
   минус вынесен из потока и ширины в строке не занимает. Правка идёт по
   CSS, а не по display-script.js:1058 — так не задевается
   e2e/overtime-centering.spec.js. */
.time-text.compact {
    font-size: calc(var(--ring-size, 400px) * 0.19);
    letter-spacing: 0.01em;
}

/* Минус И часы: знак висит слева от ЦЕНТРИРОВАННЫХ цифр (правило «цифры по
   центру кольца»), и на 0.19 диаметра «−1:02:03» доставал знаком до обводки
   (кадр 30.09.2026). Ступень меньше — только на этот случай, поэтому обычный
   перерасход и часы в плюсе не мельчают. */
.time-text.compact.signed-hours {
    font-size: calc(var(--ring-size, 400px) * 0.165);
}

.time-text.warning { color: var(--tw-band-warning); }
.time-text.danger {
    /* Полоса, а не литерал: она ссылка на красный акцент и потому следует тону
       окна (см. design-tokens.css). Переменной `--text-glow` здесь больше нет:
       её не читало ни одно правило — редизайн 12.08.2026 снял внешние
       свечения, а объявление пережило своих читателей. */
    color: var(--tw-band-danger);
    animation: time-pulse 0.5s infinite;
}

/* ЦИФРЫ по центру кольца и циферблата, знак висит слева и ширины не
   занимает.
   История. Сначала минус вытаскивали отрицательным margin-left — цифры
   стояли по центру, но вся надпись съезжала влево на 45px. Тогда знак
   вернули в поток и стали центрировать надпись целиком — и цифры уехали от
   центра кольца на 54px (замерено), что на проекторе видно сразу. Верное
   решение — не выбирать между двумя, а дать геометрическую опору: контейнер
   сжимается по содержимому и центрируется, поэтому его левый край совпадает
   с левым краем цифр, а знак позиционируется от него абсолютно. Минус
   остаётся ВНУТРИ кольца: запас до обводки 49.7px (замерено).
   Держит e2e/overtime-centering.spec.js. */
.time-text,
.analog-digital-time {
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.time-minus,
.analog-time-minus {
position: absolute;
right: 100%;
/* По вертикали — по СЕРЕДИНЕ цифр, а не от верхнего края: при уменьшенном
   кегле знак, привязанный к top: 0, выглядит надстрочным. */
top: 50%;
transform: translateY(-50%);
/* Знак мельче цифр и ближе к ним: полноразмерный минус с зазором 0.2em
   висел отдельным пятном и тянул композицию влево. Уменьшённый читается
   как приставленный к числу знак, и свес втрое меньше. */
font-size: 0.62em;
margin-right: 0.1em;
}

@keyframes time-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

/* ============================================================
   STATUS PILL — 3 semantic tiers, color + glyph
   ============================================================ */
.status-container {
    position: fixed;
    /* Нижняя граница 48px, а не 24px, как считал аудит: плашка теперь
       растёт вместе с экраном, и на 720p при bottom: 36px она наезжала
       на .controls-hint (fixed, bottom: 12px, высота до 30px) — это
       видно на первом же кадре превью, расчёт по старой высоте плашки
       давал другой ответ. При 48px плашка занимает 48…94, подсказка
       12…42, зазор 6px. */
    bottom: clamp(48px, 5.5vh, 100px);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 20;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    /* Позиционированный предок для крестика — постоянно (см. .hero-label). */
    position: relative;
    /* Та же причина, что и у лейбла: плашка была набрана фиксированными
       величинами и не росла с экраном. Отступы и зазор — в em, чтобы
       форма пилюли держалась при любом кегле. */
    gap: 0.55em;
    padding: 0.7em 1.6em;
    border-radius: var(--tw-r-pill);
    background: var(--tw-overlay-medium);
    -webkit-backdrop-filter: var(--tw-blur-xs);
    backdrop-filter: var(--tw-blur-xs);
    border: 1px solid var(--tw-border);
    color: var(--tw-fg-secondary);
    font-family: var(--tw-font-sans);
    /* Свой масштаб — по той же причине, что у подписи: пилюля целиком набрана
       в em от кегля, поэтому кегль её и масштабирует. */
    font-size: calc(clamp(15px, 1.8vmin, 34px) * var(--status-pill-scale, 1));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                border-color var(--tw-dur-base) var(--tw-ease),
                box-shadow var(--tw-dur-base) var(--tw-ease);
}

/* Glyph — pseudo-element carries state glyph (·/▶/‖/⧗/×) per SKILL */
.status-pill .status-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tw-font-sans);
    font-weight: 700;
    font-size: 0;
    min-width: 14px;
    color: currentColor;
}
.status-pill .status-glyph::before {
    content: '·';
    font-size: 1rem;
    line-height: 1;
}
.status-pill.running  .status-glyph::before { content: '▶'; font-size: 0.85rem; }
.status-pill.paused   .status-glyph::before { content: '‖'; font-size: 1rem; }
.status-pill.overtime .status-glyph::before { content: '⧗'; font-size: 1rem; }

.status-pill.finished .status-glyph::before { content: '×'; font-size: 1.1rem; }

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    animation: dot-pulse 2s infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
}

/* Success tier — РАБОТАЕТ */
.status-pill.running {
    background: rgba(48, 209, 88, 0.18);
    color: var(--tw-green);
    border-color: rgba(48, 209, 88, 0.32);
}
/* Единая палитра статусов на все три окна (см. CLAUDE.md):
   активен — зелёный, пауза — оранжевый, завершён — красный без анимации,
   перерасход — красный С пульсацией. Пульсация — единственное, что
   отличает «идёт перерасход» от «уже завершено» при одинаковом цвете. */
.status-pill.overtime {
    background: rgba(255, 69, 58, 0.22);
    color: var(--tw-red);
    border-color: rgba(255, 69, 58, 0.38);
    animation: overtime-pulse 0.8s infinite;
}

@keyframes overtime-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.85; }
}
/* Пауза — оранжевый */
.status-pill.paused {
    background: rgba(255, 159, 10, 0.18);
    color: var(--tw-orange);
    border-color: rgba(255, 159, 10, 0.32);
}
.status-pill.paused .status-dot { animation: none; }
/* Завершено — красный, статично */
.status-pill.finished {
    background: rgba(255, 69, 58, 0.22);
    color: var(--tw-red);
    border-color: rgba(255, 69, 58, 0.38);
}

/* Плашка состояния — тоже из бывшего LED. */
body.style-digits .status-pill {
    background: transparent;
    border: 1px solid var(--tw-border);
    border-radius: var(--tw-r-md);
    /* Покой — цвет покоя, как у остальных стилей. Здесь стоял зелёный, и
       «Готов к запуску» читался так же, как «Таймер активен». */
    color: var(--tw-fg-secondary);
    box-shadow: none;
}
body.style-digits .status-pill.running  { color: var(--tw-led-green); }
body.style-digits .status-pill.paused   { color: var(--tw-led-warn); }
body.style-digits .status-pill.finished { color: var(--tw-led-danger); }
body.style-digits .status-pill.overtime {
    color: var(--tw-led-danger);
    animation: led-overtime-pulse 1s infinite;
}


body.flash-mode { animation: flash-bg 0.3s; }
@keyframes flash-bg {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.5); }
}

@keyframes led-overtime-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.85; }
}

/* Плашка состояния пластины табло НЕ носит — по той же причине, что и блоки
   (см. `body.style-flip .info-value`): на цветном фоне она белела вместе с
   тоном. Форму плашке даёт её собственная плёнка `--tw-overlay-medium`,
   которая тон УЧИТЫВАЕТ: тёмная на светлом, светлая на тёмном. Заливку
   состояния (`.status-pill.running` и соседи) больше ничто не перекрывает —
   цвет состояния виден в этом стиле так же, как в остальных. */

@keyframes led-danger-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}

@keyframes dots-blink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* ============================================================
   FLIP STYLE
   ============================================================ */
.timer-flip {
    /* Пластина табло — ОДНА формула на карточки цифр и карточку минуса.
       Блик — слой ФОНА, под цифрой, как у виджета. Он жил в `::after` поверх
       цифры (z-index 5): в тёмном тоне это незаметно, а в светлом белый блик
       0.65 красил верхнюю половину тёмной цифры в серый. Створки наследуют
       фон по цепочке (flip-card.css), поэтому блик едет и на них. */
    --flip-plate:
        linear-gradient(180deg, var(--style-gloss) 0%, transparent 50%),
        var(--surface-solid, var(--style-plate));
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: var(--tw-s-10);
    /* Высота карточки — ОДНА величина, от неё в долях всё табло: ширина,
       кегль, минус, разделитель, перспектива. Доля рамы героя (--timer-box),
       как у круга и аналога, поэтому уступка верхней полосе действует и тут.
       16vw — прежняя доля ширины: на узком окне шесть карточек с часами
       обязаны влезть по ширине.
       До 03.11.2026 размеры были clamp(…, 16vw, 200px) у каждой детали
       порознь, и потолок 200px держал карточку одной и той же на 720p и
       1080p: 21 % высоты против 51 % у круга. */
    --flip-h: max(80px, min(var(--timer-box) * 0.5, 16vw));
}
.timer-flip.active { display: flex; }

.flip-group { display: flex; gap: 8px; }

/* Разделитель — ДВЕ ТОЧКИ, а не глиф, как в виджете и в часах. Текст ':' в
   разметке остаётся и гасится нулевым шрифтом: он нужен экранному диктору.

   До 14.08.2026 здесь жил живой глиф в `clamp(3rem, 10vw, 8rem)` весом 200 и
   цветом `--tw-fg-muted` — то есть СЕРОЕ двоеточие рядом с белыми цифрами, и
   вдобавок единственное из трёх окон, куда правило «разделитель это точки»
   так и не дошло: тест, который его закреплял, находит окно по
   `#wFlipHoursGroup` и меряет ровно виджет таймера. */
/* Часовая группа флипа скрыта, пока часов нет: состояние — класс has-hours
   на #timerFlip (ставит updateFlipDisplay). Показанная группа получает свой
   обычный display из правил ниже — ровно то, что давало прежнее
   style.display = ''. До 25.09.2026 начальное «скрыто» было атрибутом
   style="display:none", который строгая CSP не применяет. */
.timer-flip:not(.has-hours) > #flipHoursUnit,
.timer-flip:not(.has-hours) > #flipHoursSep {
    display: none;
}

.flip-separator {
    font-size: 0;
    line-height: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--flip-h) * 0.125);
    /* Высота колонки равна высоте карточки. */
    height: var(--flip-h);
    padding: 0 10px;
    /* Приехало из удалённого components.css и это ЕДИНСТВЕННОЕ, что
       оттуда меняло геометрию: без этих полей ряд карточек ужимался
       (замер: #timerFlip 847.38 → 831.38px, группы съезжали на 8px). */
    margin: 0 8px;
}

.flip-separator::before,
.flip-separator::after {
    content: '';
    width: calc(var(--flip-h) * 0.0625);
    height: calc(var(--flip-h) * 0.0625);
    border-radius: 50%;
    /* Тот же цвет, что у цифр, включая значение по умолчанию. */
    background: var(--timer-color, var(--tw-fg));
}

/* Полосы разделителя. Этих правил не было: в полосе разделитель красил
   ТОЛЬКО инлайновый JS, то есть состояние существовало, но в стилях
   выражено не было. Значения перенесены из того кода дословно, но красят
   теперь ФОН точек: `color` до псевдоэлементов не доезжает. */
.flip-separator.warning::before,
.flip-separator.warning::after { background: var(--tw-band-warning); }
.flip-separator.danger::before,
.flip-separator.danger::after  { background: var(--tw-band-danger); }

/* Высота — ВО ВСЮ карточку цифр (.flip-card), начертание — как у цифр
   (.flip-digit). Было 120 при карточках 200: минус висел половинной плашкой
   и читался отдельной деталью (жалоба 30.09.2026). */
.flip-minus {
    position: relative;
    width: calc(var(--flip-h) * 0.375);
    height: var(--flip-h);
    display: none;
    align-items: center;
    justify-content: center;
    /* ТА ЖЕ подложка, что у .flip-card-inner: минус — карточка того же табло.
       Здесь стоял свой двухстоповый градиент, из-за которого карточка минуса
       читалась как деталь от другого стиля. Формула одна — `--flip-plate`. */
    background: var(--flip-plate);
    border-radius: var(--tw-r-md);
    border: 1px solid var(--tw-border);
    box-shadow:
        var(--style-drop),
        inset 0 1px 0 var(--style-edge);
    /* Ряд разносит элементы на 20px (`.timer-flip { gap }`), а карточки внутри
       разряда стоят через 8px (`.flip-group`). Минус — знак числа, а не
       отдельный разряд, поэтому стоит к нему так же близко, как цифры друг к
       другу: 20 − 12 = 8. С `margin-right: 10px` зазор был 30px — втрое шире
       межцифрового, и знак отрывался от числа. */
    margin-right: -12px;
}

.flip-minus-sign {
    font-family: var(--tw-font-display);
    /* 0.8 кегля цифр: глиф минуса шире цифры (≈0.67 кегля), и полный кегль
       упирался бы в края карточки шириной в 0.375 её высоты. */
    font-size: calc(var(--flip-h) * 0.45);
    font-weight: 600;
    line-height: 1;
    /* ТА ЖЕ полоса, что у цифр в перерасходе (.flip-card.danger .flip-digit).
       Здесь стоял `--tw-red` — другой красный, и в светлой палитре дисплея он
       становился тёмным, тогда как полоса состояния от палитры не зависит. */
    color: var(--tw-band-danger);
    text-shadow: var(--style-ink-shadow);
}
.flip-minus.visible { display: flex; }

.flip-card {
    position: relative;
    width: calc(var(--flip-h) * 0.75);
    height: var(--flip-h);
    /* Сам `perspective` стоит на `.fc-flip` (flip-card.css) — прямом родителе
       створок; прежнее `perspective: 1000px` здесь не действовало, створки
       карточке внуки. Значение — те же ≈2.8 высоты карточки. */
    --fc-perspective: calc(var(--flip-h) * 2.8);
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--flip-plate);
    border: 1px solid var(--style-edge);
    border-radius: var(--tw-r-lg);
    box-shadow:
        var(--style-drop),
        inset 0 1px 0 var(--style-edge);
    overflow: hidden;
}

.flip-card-inner::before {
    content: '';
    position: absolute;
    top: 49.5%; left: 0; right: 0;
    height: 2px;
    background: var(--style-hinge);
    z-index: 10;
}
.flip-digit {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--tw-font-display);
    font-size: calc(var(--flip-h) * 0.5625);
    font-weight: 600;
    color: var(--timer-color, var(--tw-fg));
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: var(--style-ink-shadow);
}

.flip-card.warning .flip-digit { color: var(--tw-band-warning); }
.flip-card.danger .flip-digit  { color: var(--tw-band-danger); }
.flip-card.danger {
    animation: flip-danger-pulse 1s infinite;
    box-shadow:
        inset 0 1px 0 rgba(255, 68, 68, 0.15),
        0 4px 20px rgba(255, 68, 68, 0.2);
}
@keyframes flip-danger-pulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255,68,68,0.15), 0 4px 20px rgba(255,68,68,0.2); }
    50%      { box-shadow: inset 0 1px 0 rgba(255,68,68,0.3),  0 4px 30px rgba(255,68,68,0.4); }
}

/* Наклона карточки здесь больше нет: перекидывание рисуют створки из
   flip-card.css — одна копия механики на три окна. */

/* Hide inactive timer styles — all hidden by default */
.timer-ring,
.timer-flip,
.timer-analog { display: none !important; }

.timer-ring.active    { display: block !important; }
.timer-flip.active    { display: flex !important; }
.timer-analog.active  { display: flex !important; }

/* ============================================================
   ANALOG STYLE
   ============================================================ */
.timer-analog {
    /* Своя доля вьюпорта (циферблат чуть меньше кольца) и ОБЩИЙ член уступки —
       см. --timer-box в .display-container. */
    --analog-size: max(120px, min(55vw, 50vh, 1400px) - var(--timer-shrink, 0px));
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--tw-s-10);
}

.analog-clock {
    position: relative;
    width: var(--analog-size);
    height: var(--analog-size);
    border-radius: 50%;
    background: var(--surface-paint, var(--style-dial));
    box-shadow:
        0 0 0 8px rgba(10, 132, 255, 0.25),
        0 0 0 12px rgba(10, 132, 255, 0.08),
        inset 0 0 60px rgba(0, 0, 0, 0.5),
        0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.analog-clock::before {
    content: '';
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 60%);
    pointer-events: none;
}

.clock-face { position: absolute; width: 100%; height: 100%; }

/* Ось вращения — центр циферблата для ЛЮБОГО класса: `top` и вертикаль
   transform-origin считаются из одного отступа --tick-inset (в долях
   --analog-size), их сумма всегда ровно половина. До 03.11.2026 крупные
   деления меняли только `top` при общей origin, и метки 3 и 9 часов висели
   на 15px выше стрелок. margin-left — половина ширины: `left: 50%` ставит
   на ось ЛЕВЫЙ край. Замер — e2e/csp-strict.spec.js (tickAxis). */
.clock-tick {
    --tick-inset: 0.08;
    position: absolute;
    width: 2px; height: 12px;
    background: var(--style-tick);
    left: 50%;
    margin-left: -1px;
    top: calc(var(--analog-size) * var(--tick-inset));
    transform-origin: 50% calc(var(--analog-size) * (0.5 - var(--tick-inset)));
    border-radius: 1px;
}
.clock-tick.major {
    --tick-inset: 0.06;
    width: 3px; height: 20px;
    margin-left: -1.5px;
    background: var(--style-tick-strong);
}
.clock-tick.quarter {
    --tick-inset: 0.04;
    width: 4px; height: 28px;
    margin-left: -2px;
    background: linear-gradient(180deg, #0a84ff 0%, #30d158 100%);
}

/* Угол деления — из его места среди соседей: sibling-index() (1-based).
   До 25.09.2026 угол стоял в разметке, style="transform: rotate(…)" на каждом
   делении, и строгая CSP (`style-src 'self'`) такой атрибут не применяет.
   Условие: деления — ПЕРВЫЕ дети своего контейнера, подряд; элемент, вставленный
   перед ними, сдвинет все углы. Углы меряет e2e/csp-strict.spec.js. */
.clock-face > .clock-tick {
    transform: rotate(calc((sibling-index() - 1) * 6deg));
}

.clock-numbers {
    position: absolute;
    width: 100%; height: 100%;
    display: none;
}
.clock-numbers.visible { display: block; }

.clock-number {
    position: absolute;
    font-family: var(--tw-font-display);
    font-size: calc(var(--analog-size) * 0.08);
    font-weight: 500;
    color: var(--tw-fg-secondary);
    text-shadow: var(--style-ink-shadow);
    transform: translate(-50%, -50%);
}
.clock-number.n12 { top: 12%; left: 50%; }
.clock-number.n1  { top: 17%; left: 74%; }
.clock-number.n2  { top: 30%; left: 87%; }
.clock-number.n3  { top: 50%; left: 92%; }
.clock-number.n4  { top: 70%; left: 87%; }
.clock-number.n5  { top: 83%; left: 74%; }
.clock-number.n6  { top: 88%; left: 50%; }
.clock-number.n7  { top: 83%; left: 26%; }
.clock-number.n8  { top: 70%; left: 13%; }
.clock-number.n9  { top: 50%; left: 8%; }
.clock-number.n10 { top: 30%; left: 13%; }
.clock-number.n11 { top: 17%; left: 26%; }

.clock-hands { position: absolute; width: 100%; height: 100%; }

.clock-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: 50% 100%;
    border-radius: 4px;
}

.hand-hour {
    width: 6px;
    height: calc(var(--analog-size) * 0.22);
    background: var(--style-hand);
    margin-left: -3px;
    z-index: 2;
}
.hand-minute {
    width: 4px;
    height: calc(var(--analog-size) * 0.32);
    background: var(--style-hand);
    margin-left: -2px;
    z-index: 3;
}
.hand-second {
    width: 2px;
    height: calc(var(--analog-size) * 0.38);
    background: linear-gradient(180deg, var(--tw-band-danger) 0%, var(--tw-band-danger-deep) 100%);
    margin-left: -1px;
    z-index: 4;
}
.hand-second::after {
    content: '';
    position: absolute;
    bottom: -20%; left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(var(--analog-size) * 0.08);
    background: var(--tw-band-danger);
    border-radius: 2px;
}

.clock-center {
    position: absolute;
    width: calc(var(--analog-size) * 0.04);
    height: calc(var(--analog-size) * 0.04);
    background: var(--analog-center-bg, linear-gradient(135deg, #0a84ff, #30d158));
    border-radius: 50%;
    z-index: 10;
    /* Синий ореол снят, внутренний блик оставлен — он лепит объём. */
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
.clock-center::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40%; height: 40%;
    background: var(--tw-fg);
    border-radius: 50%;
}

.analog-digital-time {
    position: absolute;
    bottom: 22%;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--tw-font-mono);
    font-size: calc(var(--analog-size) * 0.1);
    font-weight: 500;
    /* Единственный точный отсчёт аналогового стиля был приглушён
       токеном 0.58, тогда как цифры круга и флипа берут полный --tw-fg;
       при выборе темы он приглушался ещё раз, до альфы 0.7. */
    color: var(--analog-digital-color, var(--timer-color, var(--tw-fg-secondary)));
    text-shadow: var(--style-ink-shadow);
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}
.analog-digital-time.warning { color: var(--tw-band-warning); }
.analog-digital-time.danger {
    color: var(--tw-band-danger);
    animation: time-pulse 0.5s infinite;
}

.analog-ring {
    position: absolute;
    inset: 3%;
    border-radius: 50%;
    border: 1px solid rgba(10, 132, 255, 0.22);
    pointer-events: none;
}

.clock-brand {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--tw-font-display);
    font-size: calc(var(--analog-size) * 0.04);
    font-weight: 300;
    font-style: italic;
    color: var(--tw-fg-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Плашка состояния в «Аналоге» держит только кромку. Заливка здесь была
   `--tw-bg-surface`, а на светлом тоне это СПЛОШНОЙ БЕЛЫЙ (замер 24.08.2026:
   rgb(255, 255, 255) на сине-зелёном градиенте) — та же белая подложка, что и
   у флипа, только под словом «ГОТОВ К ЗАПУСКУ». Плёнка базовой плашки тон
   учитывает, поэтому своя заливка тут не нужна вовсе. */
body.style-analog .status-pill {
    border: 1px solid rgba(10, 132, 255, 0.3);
}

/* ============================================================
   СТИЛЬ: ЦИФРЫ
   — только время; ни кольца, ни подложки, ни свечения
   ============================================================ */
.timer-digits {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Высота — ЯВНАЯ рама, и это не косметика. `height: 100%` внутри
       .display-container (высота auto) разрешается в auto, то есть в
       высоту содержимого, то есть в высоту самих цифр — а
       updateDigitsScale() читает getBoundingClientRect() ЭТОГО блока
       как доступное место. Подгонка подавала собственный выход себе на
       вход и множила кегль на 0.744 при каждом пересчёте: 89 → 66 → 49
       → 37 → 27 (замерено). Виджет и часы этим не болели — они берут
       раму из this.container.offsetWidth/offsetHeight, то есть из окна.
       Инвариант держит e2e «пересчёт кегля ИДЕМПОТЕНТЕН». */
    height: var(--timer-box);
}
.timer-digits.active { display: flex !important; }

/* ЦИФРЫ по центру окна: контейнер сжимается по содержимому и
   центрируется, а в минусе получает РАВНЫЕ поля под знак слева и справа
   (правило «в минусе» ниже), так что цифры с оси не сходят. Центрировать
   надпись целиком нельзя: на дисплее это уводило цифры с оси на 54px
   (замерено). */
.digits-time {
    position: relative;
    width: fit-content;
    margin-inline: auto;
    font-size: var(--digits-font-size, 120px);
    /* Рамка вокруг цифр — в долях кегля, чтобы расти вместе с ним. Значения
       совпадают с FRAME_PAD_*_EM в digits-style.js: по ним считается подгонка.
       Фон полноэкранного окна задаётся отдельно (заливка/градиент/файл),
       поэтому здесь он прозрачный и рамка не видна — поля всё равно нужны,
       иначе подгонка кегля разошлась бы между окнами. */
    padding: 0.18em 0.34em;
    border-radius: 0.22em;
    line-height: 1;
    white-space: nowrap;
    color: var(--timer-color, var(--tw-fg));
    font-variant-numeric: tabular-nums;
}

/* Полосы «Цифр». Их не было: цвет полосы писал инлайном ладдер в
   updateDisplay(), правил CSS для этого стиля не существовало —
   состояние жило только в JS и теме не подчинялось. Перенесено
   дословно. */
.digits-time.warning { color: var(--tw-band-warning); }
.digits-time.danger,
.digits-time.overtime { color: var(--tw-band-danger); }

/* Знак МЕНЬШЕ цифр и по вертикали центрирован ОТНОСИТЕЛЬНО ЦИФР.
   Полноразмерный минус — отдельная клякса чернил, тянущая композицию
   влево; знак, привязанный к top: 0, при уменьшенном кегле читается
   как надстрочный индекс. */
/* Знак стоит абсолютом В ЛЕВОМ ПОЛЕ рамки, на её собственном отступе
   FRAME_PAD_X_EM; до 30.09.2026 он висел снаружи рамки от `right: 100%`.
   Деление на 0.8 переводит отступ из кегля ЦИФР в собственный кегль знака.
   Константы — SIGN_GAP_EM / FRAME_PAD_X_EM / SIGN_FONT_RATIO из
   digits-style.js. */
.digits-sign {
    position: absolute;
    /* В ПОЛЕ рамки, а не снаружи: см. правило рамки «в минусе» ниже. */
    left: calc(0.34em / 0.8);
    top: 50%;
    /* Центрируется БОКС, а видно чернила — поправку на шрифт меряет
       `measureSignShift()` (digits-style.js) и отдаёт долей кегля. */
    transform: translateY(calc(-50% + var(--digits-font-size, 120px) * var(--digits-sign-shift, 0)));
    /* 0.8, а не 0.62: при 0.62 штрих знака был заметно тоньше штриха
       цифр, и знак читался чужим (жалоба 30.09.2026 «не гармонично»). */
    font-size: 0.8em;
}

/* В минусе рамка отводит поле ПОД ЗНАК: её собственное поле плюс
   ширина знака с зазором (`--digits-sign-em`, ставит окно по замеру шрифта).
   Раньше знак висел снаружи рамки от `right: 100%` и при выбранном фоне
   торчал за край подложки (жалоба 30.09.2026 «минус вылезает за рамки»).
   Такое же поле — СПРАВА, противовесом: цифры остаются на оси окна
   (правило «цифры по центру», e2e/digits-style.spec.js). Подгонка
   резервирует оба поля, поэтому кегль через ноль не прыгает. */
.digits-time:has(> .digits-sign:not(:empty)) {
    padding-inline: calc(0.34em + var(--digits-sign-em, 0.45) * 1em);
}

.digits-probe {
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
    left: -9999px;
    top: 0;
}

/* ============================================================
   WINDOW CONTROLS (close / minimize / fullscreen)
   ============================================================ */
.window-controls {
    position: fixed;
    top: 20px;
    /* Слева, как в macOS (просьба 19.08.2026) и как в титлбаре панели, где
       такие же кнопки стоят слева с самого начала. */
    left: 20px;
    display: flex;
    gap: 8px;
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--tw-dur-slow) var(--tw-ease);
}
body:hover .window-controls { opacity: 0.45; }
.window-controls:hover { opacity: 1 !important; }

.window-ctrl-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--tw-border);
    border-radius: 50%;
    background: var(--tw-overlay-light);
    -webkit-backdrop-filter: var(--tw-blur-xs);
    backdrop-filter: var(--tw-blur-xs);
    color: var(--tw-fg-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tw-dur-base) var(--tw-ease),
                color var(--tw-dur-base) var(--tw-ease),
                border-color var(--tw-dur-base) var(--tw-ease),
                transform var(--tw-dur-fast) var(--tw-ease);
}
.window-ctrl-btn:hover {
    background: var(--tw-overlay-medium);
    color: var(--tw-fg);
}
.window-ctrl-btn:active { transform: scale(0.96); }
.window-ctrl-btn.fullscreen-btn:hover { background: rgba(48, 209, 88, 0.7); border-color: rgba(48, 209, 88, 0.45); }
.window-ctrl-btn.close-btn:hover      { background: rgba(255, 69, 58, 0.75); border-color: rgba(255, 69, 58, 0.5); }

/* Hand warning/danger cues */
.hand-minute.warning,
.hand-second.warning {
    filter: hue-rotate(-30deg) saturate(1.5);
}
.clock-center.warning {
    background: linear-gradient(135deg, var(--tw-band-warning), var(--tw-band-warning-deep));
}
.hand-second.danger {
    background: linear-gradient(180deg, var(--tw-band-danger) 0%, var(--tw-band-danger-deep) 100%);
}
.hand-minute.danger,
.hand-second.danger {
    animation: hand-pulse 0.5s infinite;
}
.clock-center.danger {
    /* 145deg, а не 135: инлайн из JS всегда бил это правило, и
       РИСОВАЛОСЬ 145deg. Приводим правило к отрисованному — это перенос
       факта, а не смена оформления. */
    background: linear-gradient(145deg, var(--tw-band-danger), var(--tw-band-danger-deep));
    animation: center-pulse 0.5s infinite;
}
@keyframes hand-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}
@keyframes center-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* ============================================================
   ALT DRAG MODE
   ============================================================ */
/* Перетаскиваются СЕМЬ элементов: пять блоков, подпись над таймером и плашка
   состояния (17.08.2026). Правила поэтому висят на общем классе
   `.display-movable`, а не на `.info-block`: подпись и плашка блоками не
   являются, а механика у них одна и та же. */
body.alt-active .display-movable {
    cursor: grab;
    outline: 1px dashed var(--tw-border-strong);
    outline-offset: 4px;
    /* `position` здесь НЕ трогать. Первая версия ставила `relative` — ради
       крестика, которому нужен позиционированный предок, — и этим перебивала
       `position: fixed` у блоков: при нажатии Alt все пять срывались со своих
       мест и сваливались в поток (замер: блок «Окончание» 3269,1241 → 337,571).
       Блокам предок и не нужен, они и так `fixed`; подписи и плашке `relative`
       выдан ПОСТОЯННО, в их собственных правилах, чтобы Alt ничего не менял. */
}
body.alt-active .display-movable:hover {
    outline-color: rgba(10, 132, 255, 0.6);
}
body.alt-active .display-movable.dragging-block {
    cursor: grabbing;
    outline-color: rgba(10, 132, 255, 0.8);
    z-index: 101;
}
/* Скрытый блок не обводится и не тащится: `display: none` у него уже стоит,
   но правило выше выиграло бы по специфичности у прозрачности. */
body .info-block:not(.visible) { outline: none; }

/* Сдвинутые подпись и плашка выходят из своего места в раскладке. Позицию
   задаёт JS (left/top в пикселях), CSS остаётся только вынуть элемент из потока
   и снять центрирование, которое ему больше не нужно. */
.hero-label.custom-position,
.status-pill.custom-position {
    position: fixed;
    margin: 0;
    z-index: 100;
}

/* Сдвинутая колонка героя (просьба 24.08.2026 «много воздуха сверху — сделать,
   чтобы таймер можно было перемещать везде»).

   Пока колонка в потоке, она занимает ВСЮ ширину окна и центрируется по нему;
   свободно стоящая обязана сжаться до своего содержимого, иначе `left`
   означал бы край экрана, а не край таймера.

   Обе компенсации отступов здесь СНЯТЫ, и это не косметика:
     • `--top-band` — полоса, которую колонка уступает прижатым к верху
       карточкам. Уступать её незачем тому, кого пользователь поставил руками;
       ровно поэтому updateTopBand и выходит нулём, увидев сдвинутый таймер.
     • `--hero-block` — место под подпись, которым колонка держит кольцо в
       середине ОКНА. Свободная колонка ничего в середине окна не держит, а
       лишняя высота снизу ушла бы в поджатие к краям при перетаскивании.

   `z-index` не поднимается: карточки (100) остаются НАД таймером, как и в
   потоке — иначе поставленный поверх карточки таймер прятал бы её. */
.display-container.custom-position {
    position: fixed;
    width: auto;
    max-width: none;
    margin: 0;
    padding: var(--tw-s-10);
}
/* Колонка держала под подпись место нижним отступом (см. --hero-block). Ушла из
   потока — отступ обязан уйти вместе с ней, иначе таймер съезжает вверх на
   половину высоты подписи. */
body.hero-label-moved .display-container { padding-bottom: var(--tw-s-10); }

/* Выключенные подпись над таймером и плашка состояния (настройки дисплея).
   Подпись убирается ВМЕСТЕ со своей компенсацией снизу: колонка добавляет
   `--hero-block` к нижнему отступу именно ради неё, и без этой строки таймер
   уехал бы вверх на половину высоты подписи. Ровно поэтому состояние живёт
   классом на <body>, а не правилом на самом элементе. */
body.no-hero-label .hero-label { display: none; }
body.no-hero-label .display-container { padding-bottom: var(--tw-s-10); }
body.no-status-pill .status-container { display: none; }

/* Плашка состояния отчитывается о таймере доклада. Вне режима «Таймер» крупно
   показано другое, и «Таймер активен» рядом с отсчётом до конца мероприятия —
   утверждение о другом объекте. Гасим тем же приёмом, что тумблер: классом на
   <body>, потому что вместе с плашкой обязан уйти и отведённый ей отступ.

   Селектор ПОЛОЖИТЕЛЬНЫЙ, а не отрицание вида «body без класса режима
   таймера»: класс режима ставит updateHeroLabel(), то есть до первой посылки настроек на <body> нет
   ни одного класса режима — и отрицательный селектор погасил бы плашку в
   режиме таймера на чистом профиле. Правило, которое умеет прятать только
   когда режим ЗАДАН, такой дыры не имеет. Цена: пятый режим придётся дописать
   сюда рукой.

   Прячем сам `#statusPill`, а не `.status-container`: контейнер — `position:
   fixed` и в потоке места не занимает, поэтому, в отличие от `no-hero-label`,
   компенсирующего отступа здесь заводить не нужно — его никогда не было. */
body.hero-mode-current #statusPill,
body.hero-mode-to-start #statusPill,
body.hero-mode-to-end #statusPill { display: none; }

/* Плашка «До завершения» и герой в режиме «До конца» — ОДНА И ТА ЖЕ величина,
   и на опоздавшем мероприятии они расходятся: в 18:05 при расписании 10:00–18:00
   герой показывает «−05:00» во весь экран, а плашка — «00:00:00». Обе правы по
   отдельности. Кламп плашки в ноль намеренный и задокументирован там, где живёт
   (`secondsUntilClock` в renderer-shared.js): «до завершения 23:59:00» через
   минуту после конца — не ответ. Трогать его нельзя, он верен для СВОЕГО
   назначения.

   Поэтому убирается не кламп, а вторая надпись: два числа про одну величину на
   одном экране — характерный дефект этой ветки, встреченный за неё трижды.
   Герой уже говорит то же самое и крупнее.

   Гасим ТЕМ ЖЕ приёмом, что плашку состояния выше: положительным селектором по
   классу режима, а не отрицанием `:not(.hero-mode-timer)`. Класс режима ставит
   updateHeroLabel(), то есть до первой посылки настроек на <body> нет ни одного
   класса режима, и отрицательный селектор спрятал бы блок в режиме таймера на
   чистом профиле.

   Тумблер `showTimeLeft` при этом не трогается: пользователь, вернувшийся в
   другой режим, получает свой блок обратно без похода в настройки. */
body.hero-mode-to-end #timeLeftBlock { display: none; }

/* Крестик блока живёт ТОЛЬКО в режиме Alt — там же, где блоки становятся
   перетаскиваемыми и обводятся пунктиром. Показывать его по наведению нельзя:
   курсор, забытый на проекторе, показал бы залу кнопку поверх кадра. По той же
   причине он вне обхода табом (tabindex="-1"): на дисплее клавиатура управляет
   таймером, а не его оформлением. */
.info-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--tw-fg);
    background: var(--tw-bg-timer);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), var(--tw-shadow-inner-top);
    cursor: pointer;
    z-index: 102;
}
body.alt-active .display-movable > .info-close { display: flex; }
/* Под замком крестик не показывается ни при каких условиях: замок отменяет
   жесты, а крестик — жест. Правило-страховка на случай залипшего `alt-active`
   (класс снимается по keyup, а keyup можно и не получить, если окно потеряло
   фокус с зажатым Alt). */
html.ui-locked .info-close { display: none !important; }
.info-close:hover { color: var(--tw-red); }
.info-close:focus-visible { box-shadow: var(--tw-focus-ring); }

/* Название мероприятия — единственный блок без мини-часов и без подписи:
   значение и есть подпись. */
/* Название мероприятия печатается КАК НАБРАНО.
   `text-transform: uppercase` здесь стоял ради «плакатности», но название —
   единственное значение на дисплее, которое пишет пользователь, и оформление
   не вправе переписывать его текст: «Планёрка отдела продаж» превращалось в
   «ПЛАНЁРКА ОТДЕЛА ПРОДАЖ», а имена собственные и аббревиатуры внутри строки
   теряли различие. Хочешь капслок — набери капслоком, это твой выбор, а не
   решение таблицы стилей.
   Разрядка остаётся, но вдвое меньше: 0.12em подбирались под прописные, а на
   строчных такой зазор рассыпает слово. */
.info-value-title {
    letter-spacing: 0.06em;
    /* Название ПЕРЕНОСИТСЯ, а время — нет, и это разные вещи в одном классе.
       `white-space: nowrap` в базовом `.info-value` стоит ради времени: «12:00»
       ломать по двоеточию нельзя. Название же вводит пользователь, длина его
       ничем не ограничена, и с `nowrap` оно вело себя ровно как в жалобе
       18.08.2026 — «вылезает за блок и не продолжается».

       Замер на 3440px, название в 58 знаков: в круге и «Цифрах» строка 1341px
       против клиентских 1043 (обрезана), у флипа 1421px в блоке 1314 — то есть
       вылезала и за блок, и за правый край ОКНА. Перенос лечит все три.

       `overflow-wrap: anywhere` — на случай одного длинного слова без пробелов:
       перенос по словам его не спасёт, а потолок ширины у блока есть
       (`max-width: calc(33vw - 40px)`). */
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Custom-positioned blocks — override preset class positioning */
.info-block.custom-position { transform-origin: center center; }
.info-block.custom-position.visible { transform: scale(var(--info-scale)); }

/* Controls hint — fades out after 4s of mouse inactivity */
.controls-hint {
    position: fixed;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    background: var(--tw-bg-surface);
    -webkit-backdrop-filter: var(--tw-blur-xs);
    backdrop-filter: var(--tw-blur-xs);
    color: var(--tw-fg-muted);
    font-family: var(--tw-font-sans);
    font-size: var(--tw-t-caption);
    padding: 8px 16px;
    border-radius: var(--tw-r-lg);
    border: 1px solid var(--tw-border);
    opacity: 1;
    transition: opacity 400ms var(--tw-ease);
    pointer-events: none;
    white-space: nowrap;
}
.controls-hint.faded { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* Ответ на жест, упёршийся в предел (Ctrl/Shift+колесо).
   Сверху по центру, а не снизу: снизу стоит плашка состояния, и надпись про
   то, что она же и мешает, легла бы прямо на неё. Не липнет: в презентации на
   экране не должно оставаться служебных надписей. */
.scale-note {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    padding: 0.5em 1.1em;
    border-radius: var(--tw-r-pill);
    background: var(--tw-overlay-medium);
    border: 1px solid var(--tw-border);
    color: var(--tw-fg-secondary);
    font-family: var(--tw-font-sans);
    font-size: clamp(13px, 1.3vmin, 18px);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--tw-dur-base) var(--tw-ease);
}
.scale-note.visible { opacity: 1; }

/* Hero label — «Осталось» above the timer */
.hero-label {
    /* Позиционированный предок для крестика — постоянно, а не в режиме Alt:
       переключение позиционирования по нажатию клавиши сдвигает элемент. */
    position: relative;
    /* Кегль, трекинг и отступ были зашиты в пиксели, тогда как цифры
       привязаны к --ring-size: на 4K лейбл оставался одним из самых
       мелких элементов кадра — на окне, которое смотрят из зала.
       Трекинг обязан переехать в em: 4px разрядки на 4K схлопнулись бы
       относительно кегля. */
    /* Свой масштаб. Подпись и плашка набраны от КЕГЛЯ (трекинг в em, отступ —
       та же величина), поэтому у них масштабируется он, а не `transform`, как
       у карточек: трансформация не участвует в раскладке, а подпись в ней
       стоит — увеличенная через `scale` она наехала бы на таймер. */
    font-size: calc(clamp(18px, 2.2vmin, 44px) * var(--hero-label-scale, 1));
    font-weight: 600;
    /* Токен, а не литерал: `rgba(255,255,255,0.6)` был белым в ОБЕИХ палитрах,
       и на светлом холсте подпись «ОСТАЛОСЬ» пропадала целиком — замер на
       кадре light-display.png. Значение токена совпадает по альфе (0.58). */
    color: var(--tw-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: calc(clamp(16px, 2.5vh, 48px) * var(--hero-label-scale, 1));
    text-align: center;
}

/* Chip semantic states (additive on top of existing status-pill tiers) */
/* Классы is-success / is-attention удалены: это была ВТОРАЯ система
   окраски плашки поверх семантической (.running / .paused / .finished /
   .overtime). Объявленные ниже, они выигрывали каскад и перекрашивали
   «ВРЕМЯ ВЫШЛО!» в зелёный поверх красной пульсации .finished. Цвет
   плашки теперь принадлежит только семантическим классам. */

/* Focus ring — mandatory keyboard a11y */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--tw-focus-ring);
}

/* ============================================================================
   РЕДИЗАЙН 2026-08-12 · ПОЛОСА ПРОГРЕССА ДИСПЛЕЯ
   ----------------------------------------------------------------------------
   8 px в полноэкранном, 5 px в оконном — числа из макета. Во всю ширину и без
   радиуса: это шкала, а не элемент управления.
   ========================================================================== */
.display-progress {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--tw-overlay-medium);
    z-index: 5;
    pointer-events: none;
}
body.is-fullscreen .display-progress { height: 8px; }

.display-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--tw-green);
    transition: width var(--tw-dur-base) linear;
}
/* Перерасход: шкала заполнена целиком и красная. Проценты там уже ничего не
   значат — время вышло, вопрос только «насколько». */
body.overtime .display-progress { background: rgba(255, 69, 58, 0.25); }
body.overtime .display-progress-fill { background: var(--tw-red); width: 100% !important; }

/* Полоса берёт цвет полосы срочности. Класс ставит display-script по тому же
   _colorBand(), что красит цифры, — второго решения о цвете здесь нет. */
body.warning .display-progress-fill { background: var(--tw-orange); }
body.danger  .display-progress-fill { background: var(--tw-red); }

/* Заливки нет там, где нет ТОТАЛА. Полоса выражает долю пройденного, а без
   тотала доли не существует: в режимах «Текущее время» и «До начала» (и в «До
   конца» с концом не позже начала) любая её ширина — утверждение о величине,
   которой нет. Класс `no-hero-total` ставит updateProgress() по `_heroTotal()
   <= 0` — по САМОМУ тоталу, а не по имени режима.

   Это же правило снимает конфликт с `width: 100% !important` выше: перебивать
   `!important` вторым `!important` не нужно, если элемента в показе нет.

   Селектор ПОЛОЖИТЕЛЬНЫЙ — как у `.hero-mode-*` выше: отрицание вида «body без
   класса» сработало бы до первой посылки настроек, когда на <body> нет ни
   одного из этих классов.

   Прячется заливка, а не сам жёлоб `.display-progress`: серая шкала во всю
   ширину видна и на дисплее без пресета (режим «таймер», totalSeconds === 0),
   и этот режим обязан выглядеть ровно как до 08.09.2026. */
body.no-hero-total .display-progress-fill { display: none; }