clock-widget.css

/*
 * clock-widget.css — стили окна часов (electron-clock-widget.html).
 *
 * До 25.09.2026 — inline-<style> окна; вынесен без правок ради CSP
 * `style-src 'self'`. Подключается ПОСЛЕДНИМ из таблиц окна, на месте
 * прежнего <style>: порядок каскада тот же (закреплён тестом).
 *
 * Отступ в 8 пробелов — от HTML, и оставлен намеренно: source-level тесты
 * режут код по отступу (`\n {16}\};`), и сдвиг отступа молча сдвинул бы их
 * срезы. Тесты читают окно через tests/helpers/window-source.js.
 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            font-family: var(--tw-font-sans);
            /* Подложки НЕТ — по тем же причинам, что и в electron-widget.html:
               это она была «еле заметным прямоугольником» вокруг круга и
               «Цифр». Цена на Windows (клик проваливается сквозь полностью
               прозрачные пиксели, тащить окно можно только за сами часы)
               принята сознательно. Свой фон окна задаётся --surface-paint. */
            background: transparent;
            overflow: hidden;
            color: var(--tw-fg);
            -webkit-font-smoothing: antialiased;
        }

        /* Рамка окна - скрыта по умолчанию, видна при наведении */
        /* Border and resize handles removed — scaling via scale bar slider */

        .widget-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* drag handled via JS */
            container-type: size;
            container-name: widget;
        }

        /* ============================================
           СТИЛЬ: КРУГОВОЙ (Circle)
           ============================================ */
        .circular-widget {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 5%;
            box-sizing: border-box;
        }

        .widget-svg {
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
        }

        /* Градиент секундного кольца: дефолт здесь, пользовательский цвет —
           переменной с documentElement, сброс — её удалением. */
        #clockGradient stop:first-child { stop-color: var(--timer-color-stop, #0a84ff); }
        #clockGradient stop:last-child { stop-color: var(--progress-color-stop, #30d158); }

        /* Фоновый круг с градиентом */
        .bg-circle {
            /* Пользовательский фон приходит переменной, дефолт остаётся здесь:
               сброс фона в панели удаляет переменную, а не пишет токен обратно. */
            fill: var(--surface-paint, color-mix(in srgb, var(--tw-bg-timer) calc(var(--surface-alpha, 1) * 100%), transparent));
            stroke: var(--tw-border-strong);
            stroke-width: 1.5;
        }

        /* Декоративный внутренний круг */
        .inner-glow {
            fill: none;
            stroke: var(--tw-divider);
            stroke-width: 1;
        }

        /* Трек секундной стрелки (фон) */
        .seconds-track {
            fill: none;
            /* Брался из --tw-border, то есть из токена для РАМОК: 1.23:1 на
               тёмном и 1.52:1 на белом. Шкала, которую не видно, шкалой не
               является. Замер --tw-track: 3.22:1 на тёмном, 3.02:1 на белом. */
            stroke: var(--tw-track);
            stroke-width: 6;
        }

        /* Прогресс секунд */
        .seconds-bar {
            fill: none;
            stroke: url(#clockGradient);
            stroke-width: 6;
            stroke-linecap: round;
            transition: stroke-dashoffset var(--tw-dur-base) linear;
        }

        /* Шкала с делениями */
        .tick-marks {
            display: none;
            stroke: var(--tw-border-strong);
            stroke-width: 1;
        }

        .ticks-on .tick-marks { display: inline; }

        .tick-marks-major {
            stroke: var(--tw-fg-dim);
            stroke-width: 2;
        }

        /* Центральный контент */
        .center-content {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 72%;
            height: 72%;
            transform: translate(-50%, -50%);
            text-align: center;
            pointer-events: none;
        }

        .time-display {
            /* HH:MM плюс надстрочные SS — обрезали clamp под реальную ширину ring
               (5% padding + 2 * stroke). 16rem/15vw совпадает с electron-widget. */
            font-size: clamp(1rem, min(15vw, 15vh), 16rem);
            font-weight: 200;
            color: var(--tw-fg);
            font-family: var(--tw-font-display);
            letter-spacing: 0.02em;
            font-variant-numeric: tabular-nums;
            /* Ореол снят редизайном 2026-08-12; мягкая тень осталась — она
               отделяет цифры от произвольного фона, а не красит их. */
            text-shadow: var(--style-ink-shadow);
            transition: color var(--tw-dur-base) var(--tw-ease),
                        text-shadow var(--tw-dur-base) var(--tw-ease);
            white-space: nowrap;
            line-height: 1;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        /* Superscript seconds — kit recipe for circle style.
           Sized relative to parent so it harmonises with the responsive
           clamp() on .time-display. ~0.33em = 18px at 56px base. */
        .time-display .clock-seconds {
            display: inline-block;
            /* Нулевая ширина: секунды — вторичная информация и не должны двигать
               главное время. Раньше они занимали ширину, поэтому «21:06» стояло
               на ~9.5px левее центра кольца, а переключение секунд в настройках
               дёргало время туда-сюда. Теперь HH:MM всегда ровно по центру, а
               секунды свисают вправо.
               Зазор и подъём даём transform-ом, а не margin-ом: transform не
               участвует в раскладке. */
            width: 0;
            overflow: visible;
            white-space: nowrap;
            font-size: 0.33em;
            font-weight: 300;
            transform: translate(0.12em, -0.3em);
            letter-spacing: 0.02em;
            /* Inherit user-selected timer color; opacity keeps the seconds
               visually secondary without hardcoding a different hue. */
            color: inherit;
            /* Было 0.55 → 3.6:1 в светлой теме при кегле ~11px. При 0.62:
               светлая 4.74:1, тёмная ≈7.5:1 против 17.9:1 у самих цифр —
               вторичность сохраняется, читаемость появляется.
               Раскладку это не трогает: у элемента width: 0; overflow: visible. */
            opacity: 0.62;
            text-shadow: none;
        }

        /* ============================================
           Шильдики даты и часового пояса (базовые)
           ============================================ */
        .date-badge {
            margin-top: clamp(4px, 2vh, 16px);
            padding: clamp(4px, 1.5vh, 10px) clamp(10px, 4vw, 24px);
            border-radius: var(--tw-r-pill);
            font-size: clamp(0.5rem, min(4.5vw, 4.5vh), 5rem);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            background: var(--tw-overlay-medium);
            color: var(--tw-fg-secondary);
            -webkit-backdrop-filter: var(--tw-blur-xs);
            backdrop-filter: var(--tw-blur-xs);
            border: 1px solid var(--tw-border);
            transition: background var(--tw-dur-slow) var(--tw-ease),
                        color var(--tw-dur-slow) var(--tw-ease);
            white-space: nowrap;
        }

        /* Круговой стиль: дата и часовой пояс — ОДНА колонка, а не два
           независимых абсолютных смещения от центра. Раньше дата стояла на
           `calc(50% + clamp(22px, 10vh, 90px))`, пояс на `calc(50% + clamp(44px,
           15vh, 150px))`, то есть расстояние между ними росло как 5vh, а высота
           даты — как ~8.4vh (font-size 4.5vh × line-height, плюс padding 1.5vh
           сверху и снизу, плюс рамка). Высота обгоняла зазор, и дата наезжала на
           пояс: впритык уже на дефолтных 220px и −15px на 400px (замерено).
           В потоке такое невозможно by construction — расстояние задаёт gap.
           Снимками это не ловилось: `clock-*` исключены из визуальной сверки как
           зависящие от живого времени. */
        .center-badges {
            position: absolute;
            left: 50%;
            top: calc(50% + clamp(22px, 10vh, 90px));
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: clamp(2px, 1vh, 8px);
        }

        .center-badges > .date-badge,
        .center-badges > .timezone-badge {
            margin-top: 0;
        }

        /* «Цифры»: табличка даты в тон цифрам (пришла из стиля LED вместе с
           самим стилем). */
        body.style-digits .date-badge {
            background: var(--tw-bg-led);
            border: 1px solid var(--tw-border);
            border-radius: var(--tw-r-sm);
            color: var(--tw-led-green);
            box-shadow: inset 0 0 15px var(--style-hinge);
            font-family: var(--tw-font-mono);
        }

        /* Flip: split-flap style date card */
        body.style-flip .date-badge {
            background: var(--style-plate);
            border: 1px solid var(--style-edge);
            border-radius: var(--tw-r-xs);
            color: var(--tw-fg-secondary);
            font-family: var(--tw-font-sans);
            font-weight: 700;
            letter-spacing: 1px;
            text-shadow: var(--style-ink-shadow);
            box-shadow: inset 0 2px 8px var(--style-hinge);
        }

        /* Часовой пояс */
        .timezone-badge {
            margin-top: clamp(2px, 1vh, 8px);
            padding: clamp(2px, 0.8vh, 6px) clamp(6px, 2vw, 14px);
            border-radius: var(--tw-r-md);
            font-size: clamp(0.4rem, min(3.5vw, 3.5vh), 4rem);
            font-weight: 500;
            letter-spacing: 0.05em;
            background: var(--tw-overlay-light);
            color: var(--tw-fg-muted);
            font-family: var(--tw-font-mono);
            -webkit-backdrop-filter: var(--tw-blur-xs);
            backdrop-filter: var(--tw-blur-xs);
            border: 1px solid var(--tw-border);
            transition: background var(--tw-dur-slow) var(--tw-ease),
                        color var(--tw-dur-slow) var(--tw-ease);
            display: none;
            white-space: nowrap;
        }

        .timezone-badge.visible {
            display: inline-block;
        }

        body.style-digits .timezone-badge {
            background: var(--tw-bg-led);
            border: 1px solid var(--tw-border);
            border-radius: var(--tw-r-xs);
            color: var(--tw-led-green);
            box-shadow: inset 0 0 10px var(--style-hinge);
            font-family: var(--tw-font-mono);
        }

        body.style-flip .timezone-badge {
            background: var(--style-plate);
            border: 1px solid var(--style-edge);
            border-radius: var(--tw-r-xs);
            color: var(--tw-fg-muted);
            font-family: var(--tw-font-mono);
            font-weight: 500;
            box-shadow: inset 0 1px 4px var(--style-hinge);
        }

        /* Стиля LED больше нет: он был теми же цифрами в коробке, а после того,
           как фон окна стал настройкой, отличался от «Цифр» только рамкой и
           отсутствием выбора шрифта. Оба свойства теперь у «Цифр»
           (.clock-digits-time), дата и пояс переехали туда же. Старое значение
           в профиле переводит RendererShared.migrateTimerStyle. */

        /* ============================================
           СТИЛЬ: ПЕРЕКИДНЫЕ ЧАСЫ (Flip)
           ============================================ */
        .widget-flip {
            display: none;
            width: 100%;
            height: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 5%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .widget-flip.active {
            display: flex;
        }

        .widget-flip-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transform-origin: center;
            transform: scale(var(--flip-scale, 1));
        }

        .widget-flip-cards {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .widget-flip-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            margin-top: 6px;
        }

        /* Уменьшенные стили для даты и timezone в flip */
        .widget-flip-info .date-badge {
            margin-top: 0;
            padding: 3px 10px;
            font-size: 10px;
            border-radius: var(--tw-r-xs);
        }

        .widget-flip-info .timezone-badge {
            margin-top: 0;
            padding: 2px 8px;
            font-size: 8px;
            border-radius: var(--tw-r-xs);
        }

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

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

           До 14.08.2026 здесь стоял живой глиф в 48px цветом --tw-fg-muted.
           Виджет таймера перевели на точки ещё в июле, а часы забыли, и два
           окна одного стиля рисовали разделитель по-разному: у часов он был
           мелкий, серый, не связанный с высотой карточки и — единственная
           часть флипа — не принимал выбранный пользователем цвет. */
        .widget-flip-separator {
            font-size: 0;
            line-height: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 0 1px;
            height: 70px;
            /* Подложка тона: на светлом тоне тёмные точки стоят прямо на обоях и
               на тёмных пропадали. Шире точек её делают боковые поля, отнятые
               у `margin` (было на 3px больше): ширина ряда та же в обоих тонах,
               а на тёмном подложки нет вовсе. */
            background: var(--style-sep-plate);
            padding-inline: 3px;
            border-radius: 3px;
        }

        .widget-flip-separator::before,
        .widget-flip-separator::after {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            /* Цвет ТОТ ЖЕ, что у цифр рядом, включая значение по умолчанию:
               цветное двоеточие возле белых цифр и было «странным». Инлайновый
               `color` сюда не дошёл бы вовсе — точки рисуют псевдоэлементы. */
            background: var(--timer-color, var(--tw-fg));
        }

        .widget-flip-card {
            position: relative;
            width: 50px;
            height: 70px;
            /* Без перспективы rotateX не виден вовсе — разбор в flip-card.css.
               Это ПЕРЕМЕННАЯ: сам `perspective` стоит на `.fc-flip`, прямом
               родителе створок. Прежнее `perspective: 200px` здесь не
               действовало — створки этой карточке внуки.
               Значение ≈2.8 высоты карточки. */
            --fc-perspective: 195px;
        }

        .widget-flip-inner {
            position: relative;
            width: 100%;
            height: 100%;
            /* НЕПРОЗРАЧНАЯ по построению — разбор в electron-widget.html и в
               flip-card.css: створки берут фон с этой пластины, и сквозь
               полупрозрачную было бы видно цифру под падающей створкой. */
            background: var(--surface-solid, var(--style-plate));
            border-radius: var(--tw-r-xs);
            border: 1px solid var(--tw-border);
            overflow: hidden;
            box-shadow: inset 0 1px 0 var(--style-edge);
        }

        .widget-flip-inner::before {
            content: '';
            position: absolute;
            top: 49.5%;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--style-hinge);
            z-index: 10;
        }

        /* Наклона карточки здесь БОЛЬШЕ НЕТ: перекидывание рисуют створки из
           flip-card.css (одна копия на три окна), а этот блок был имитацией —
           поворот всей карточки на 12° без перспективы давал 0.79 пикселя
           движения, то есть не давал ничего. */
        @media (prefers-reduced-motion: reduce) {
            .widget-flip-card.flipping .widget-flip-inner { animation: none; }
        }

        .widget-flip-digit {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--tw-font-display);
            font-size: 42px;
            font-weight: 600;
            color: var(--tw-fg);
            line-height: 1;
            font-variant-numeric: tabular-nums;
            text-shadow: var(--style-ink-shadow);
        }

        /* Адаптивные размеры для 6 цифр (ЧЧ:ММ:СС) */
        .widget-flip.has-seconds .widget-flip-card {
            width: 40px;
            height: 56px;
            /* Карточка ниже — перспектива вместе с ней. */
            --fc-perspective: 155px;
        }

        /* Шесть цифр — карточка ниже, значит и колонка точек ниже, и сами
           точки мельче. Шрифт обязан остаться нулевым: ровно на этом месте у
           виджета таймера адаптив когда-то вернул `font-size: 36px`, и глиф
           нарисовался ПОВЕРХ точек (см. e2e/flip-hours-layout.spec.js). */
        .widget-flip.has-seconds .widget-flip-separator {
            height: 56px;
            gap: 8px;
            margin: 0;
        }

        .widget-flip.has-seconds .widget-flip-separator::before,
        .widget-flip.has-seconds .widget-flip-separator::after {
            width: 4px;
            height: 4px;
        }

        .widget-flip.has-seconds .widget-flip-digit {
            font-size: 32px;
        }

        /* Скрытие неактивных стилей - все скрыты по умолчанию */
        .circular-widget,
        .widget-flip,
        .widget-analog,
        .clock-digits {
            display: none !important;
        }

        /* Показываем только активный */
        .circular-widget.active { display: flex !important; }
        .widget-flip.active { display: flex !important; }
        .widget-analog.active { display: flex !important; }
        .clock-digits.active { display: flex !important; }

        /* ============================================
           СТИЛЬ: АНАЛОГОВЫЕ ЧАСЫ (Analog)
           ============================================ */
        .widget-analog {
            display: none;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: 5%;
            box-sizing: border-box;
            overflow: visible;
        }

        .widget-analog-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transform-origin: center;
            transform: scale(var(--analog-scale, 1));
        }

        .widget-analog-clock {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: var(--surface-paint, color-mix(in srgb, var(--tw-bg-timer) calc(var(--surface-alpha, 1) * 100%), transparent));
            -webkit-backdrop-filter: var(--tw-blur-sm);
            backdrop-filter: var(--tw-blur-sm);
            border: 1px solid var(--tw-border-strong);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: inset 0 1px 0 var(--style-edge);
        }

        /* Блик — на весь циферблат и кончается на ОБОДЕ, где у циферблата и так
           кромка. С отступом 5% его круг обрезал градиент, не успевший
           погаснуть (вверху слева ещё ~2/3 силы): на большом окне и в светлом
           тоне (блик 0.65) внутри циферблата был виден уступ. */
        .widget-analog-clock::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, var(--style-gloss), transparent 60%);
            pointer-events: none;
        }

        /* Деления на циферблате */
        .widget-analog-tick {
            position: absolute;
            width: 2px;
            height: 10px;
            background: var(--tw-fg-dim);
            left: 50%;
            top: 12px;
            /* 87, а не 88. То же правило, что у виджета: `top` + вертикаль
               origin = середина padding-бокса. Циферблат 200px с рамкой 1px →
               padding-бокс 198 → середина 99, а 12 + 88 давало 100. Правится
               ось, а не `top`: положение самого деления на ободе — вопрос вида,
               а центр вращения — вопрос правильности. */
            transform-origin: 50% 87px;
            border-radius: 1px;
            margin-left: -1px;
        }

        /* Вариант .major удалён: на циферблате часов используются только
           .quarter (12/3/6/9) и обычные деления — элемента с классом major
           в разметке нет. В виджете таймера свой .widget-clock-tick.major жив. */
        .widget-analog-tick.quarter {
            width: 4px;
            height: 20px;
            background: var(--tw-ring);
            top: 6px;
            /* Своя ось при своём `top`: 6 + 93 = 99. С общей 87 крупные деления
               вращались вокруг точки на 6px выше центра (замер 03.11.2026). */
            transform-origin: 50% 93px;
            margin-left: -2px;
        }

        /* Скрываем деления когда цифры включены */
        .widget-analog-clock:has(.widget-analog-numbers.visible) .widget-analog-tick {
            display: none;
        }

        /* Цифры на циферблате */
        .widget-analog-numbers {
            position: absolute;
            width: 100%;
            height: 100%;
            display: none;
        }

        .widget-analog-numbers.visible {
            display: block;
        }

        .widget-analog-number {
            position: absolute;
            font-family: var(--tw-font-display);
            font-size: 18px;
            font-weight: 500;
            color: var(--tw-fg-secondary);
            text-shadow: var(--style-ink-shadow);
            transform: translate(-50%, -50%);
            font-variant-numeric: tabular-nums;
        }

        .widget-analog-number.n12 { top: 12%; left: 50%; }
        .widget-analog-number.n1 { top: 17%; left: 73%; }
        .widget-analog-number.n2 { top: 30%; left: 86%; }
        .widget-analog-number.n3 { top: 50%; left: 90%; }
        .widget-analog-number.n4 { top: 70%; left: 86%; }
        .widget-analog-number.n5 { top: 83%; left: 73%; }
        .widget-analog-number.n6 { top: 88%; left: 50%; }
        .widget-analog-number.n7 { top: 83%; left: 27%; }
        .widget-analog-number.n8 { top: 70%; left: 14%; }
        .widget-analog-number.n9 { top: 50%; left: 10%; }
        .widget-analog-number.n10 { top: 30%; left: 14%; }
        .widget-analog-number.n11 { top: 17%; left: 27%; }

        /* Стрелки */
        .widget-analog-hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: 50% 100%;
            border-radius: 3px;
        }

        /* Часовая стрелка */
        .widget-analog-hour {
            width: 5px;
            height: 44px;
            background: var(--style-hand);
            margin-left: -2.5px;
            z-index: 2;
        }

        /* Минутная стрелка */
        .widget-analog-minute {
            width: 3px;
            height: 64px;
            background: var(--style-hand);
            margin-left: -1.5px;
            z-index: 3;
        }

        /* ───────────────────────────────────────────────────────────────
           СВЕТЛОГО ТОНА здесь больше нет отдельным списком.

           Тут стояли шесть правил под `[data-theme="light"]`: белые стрелки на
           белом циферблате, чёрная тень под чёрным текстом, светлые цифры,
           закреплённые на карточке флипа, и два цвета подписей. Все шесть
           существовали по одной причине: подложка была задана ТЁМНЫМ ЛИТЕРАЛОМ,
           а текст рядом брался из токена, который тема переворачивала. Литерал
           стал токеном (`--style-plate`, `--style-hand`, `--style-ink-shadow`),
           и переворачиваются они теперь ВМЕСТЕ — исправлять после этого нечего.

           Одно решение при этом отменено сознательно. Правило про карточку
           говорило: «карточку флипа НЕ перекрашиваем в белую — механический вид
           и есть смысл стиля, у настоящих перекидных часов табло тёмное».
           18.08.2026 пользователь попросил обратного и прямо: «чтобы все стили
           по умолчанию в светлой теме были светлыми, а в тёмной тёмными
           везде». Табло светлеет вместе с окном.
           ─────────────────────────────────────────────────────────────── */

        /* Секундная стрелка */
        .widget-analog-second {
            width: 2px;
            height: 76px;
            background: var(--tw-ring);
            margin-left: -1px;
            z-index: 4;
            transition: transform 0.1s cubic-bezier(0.4, 2.3, 0.3, 1);
        }

        .widget-analog-second::after {
            content: '';
            position: absolute;
            bottom: -15%;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 12px;
            background: linear-gradient(180deg, var(--tw-green), var(--tw-blue));
            border-radius: 1px;
        }

        /* Центральная точка */
        .widget-analog-center {
            position: absolute;
            width: 12px;
            height: 12px;
            background: var(--tw-ring);
            border-radius: 50%;
            z-index: 5;
        }

        .widget-analog-center::after {
            content: '';
            position: absolute;
            top: 20%;
            left: 20%;
            width: 30%;
            height: 30%;
            background: var(--tw-fg-secondary);
            border-radius: 50%;
        }

        /* Дата и зона под циферблатом */
        /* Без значков блок не занимает места: см. updateDateTimezoneVisibility. */
        body.no-clock-badges .widget-analog-info,
        body.no-clock-badges .widget-flip-info { display: none; }

        .widget-analog-info {
            margin-top: 10px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .widget-analog-info .date-badge {
            display: none;
            padding: 4px 10px;
            border-radius: var(--tw-r-lg);
            font-size: 12px;
            background: rgba(10, 132, 255, 0.10);
            border: 1px solid rgba(10, 132, 255, 0.30);
            color: var(--tw-fg-secondary);
        }

        .widget-analog-info .timezone-badge {
            display: none;
            padding: 3px 8px;
            border-radius: var(--tw-r-md);
            font-size: 10px;
            background: rgba(10, 132, 255, 0.08);
            border: 1px solid rgba(10, 132, 255, 0.20);
            color: var(--tw-fg-muted);
            font-family: var(--tw-font-mono);
        }

        /* ============================================
           СТИЛЬ: ЦИФРЫ — только время, окно прозрачное.
           Часы, в отличие от таймера, не бывают отрицательными — знака
           минуса и .clock-digits-sign здесь нет вообще (см. brief Task 6).
           ============================================ */
        .clock-digits {
            display: none;
            /* КОЛОНКОЙ, а не строкой. Дата и пояс лежат тут прямыми детьми, и
               без этой строки они вставали в один ряд со временем: замер на
               окне 220×220 давал время `left: -84` (за левым краем), дату
               122..220 и пояс 220..304 — целиком за окном. Пользователь описал
               это как «неправильно позиционируются и всё смешивается».

               У трёх остальных стилей часов у шильдиков своя колонка
               (`.center-badges`, `.widget-flip-info`, `.widget-analog-info`);
               у «Цифр» обёртки нет, и её роль играет сам контейнер стиля. */
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(2px, 1vh, 8px);
            width: 100%;
            height: 100%;
            /* Фон живёт на самих цифрах (.clock-digits-time): он обнимает
               время, а не заливает окно. */
        }
        .clock-digits.active { display: flex !important; }

        .clock-digits-time {
            position: relative;
            width: fit-content;
            margin-inline: auto;
            font-size: var(--digits-font-size, 40px);
            /* Рамка вокруг цифр: поля и скругление в долях КЕГЛЯ, чтобы расти
               вместе с ним. Фон по умолчанию прозрачный — рамка появляется
               ровно тогда, когда пользователь задал цвет. Это и есть бывший
               стиль LED: те же цифры в тёмной коробке, только коробка теперь
               настраивается, а шрифт выбирается.
               Значения совпадают с FRAME_PAD_*_EM в digits-style.js — по ним
               считается подгонка кегля (проверяется тестом). */
            /* Подложка по умолчанию — токен тона, как у «Цифр» виджета: на
               светлом тоне тёмное время без неё не читалось на тёмных обоях
               (кадр 03.11.2026), на тёмном токен — `none`. */
            background: var(--surface-paint, var(--style-face));
            padding: 0.18em 0.34em;
            border-radius: 0.22em;
            line-height: 1;
            white-space: nowrap;
            color: var(--tw-fg);
            font-variant-numeric: tabular-nums;
        }

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

        /* ============================================
           Hint toast — first-run hint
           ============================================ */
        .widget-hint {
            position: fixed;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            background: var(--style-hint-plate);
            color: var(--tw-fg-secondary);
            font-size: 10px;
            font-family: var(--tw-font-sans);
            padding: 4px 10px;
            border-radius: var(--tw-r-sm);
            opacity: 0;
            animation: hintFade 4s var(--tw-ease) forwards;
            pointer-events: none;
            white-space: nowrap;
            border: 1px solid var(--tw-border);
        }
        @keyframes hintFade {
            0% { opacity: 0; }
            15% { opacity: 1; }
            75% { opacity: 1; }
            100% { opacity: 0; display: none; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 1ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 1ms !important;
                scroll-behavior: auto !important;
            }
            /* Сплошное animation-duration: 1ms убивает не движение, а
               ИНФОРМАЦИЮ: hintFade идёт с forwards, поэтому подсказка
               мгновенно доезжает до последнего кадра (opacity 0 + display none)
               и не появляется вовсе. Движения в ней и нет — анимируется только
               opacity, а «reduce» требует убрать движение, не кросс-фейд.
               Селектор класса (0,1,0) выигрывает у `*` (0,0,0) при равном
               !important, порядок внутри @media значения не имеет. */
            .widget-hint { animation-duration: 4s !important; }
        }

        /* Focus-visible fallback — tokens-driven ring */
        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);
        }

        /* ---- Бывшие style="…" разметки (CSP `style-src 'self'`, 25.09.2026) ---- */

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

        /* Начальное «скрыто» шильдиков даты. Показывает и прячет их
           updateDateTimezoneVisibility() инлайном через CSSOM ('block'/'none'),
           который выигрывает у этого правила. У #analogDateBadge начального
           «скрыто» не было и нет. */
        #dateBadge,
        #flipDateBadge,
        #digitsDateBadge {
            display: none;
        }