/* Кнопки таймера. Стиль живёт в статике САЙТА, а не движка: движок не знает,
   что такое варка, и знать не должен.

   Главное решение — размер. Таймером пользуются мокрыми руками, стоя над
   плитой, часто с телефона: цель нажатия сделана крупной (44 px — нижняя
   граница, ниже которой попадание пальцем становится лотереей), а состояние
   читается с метра: идёт отсчёт — кнопка тёмная и цифры крупные, кончилось —
   зелёная. */
.таймер {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    min-height: 44px;
    padding: .45em .95em;
    border: 1px solid #c9713a;
    border-radius: 999px;
    background: #fff6f0;
    color: #8a3d10;
    font: 600 1rem/1.1 inherit;
    font-variant-numeric: tabular-nums; /* цифры не «прыгают» на каждой секунде */
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.таймер::before {
    content: "▶";
    font-size: .8em;
    opacity: .75;
}
.таймер:hover { background: #ffe9dc; }
.таймер:focus-visible { outline: 3px solid #c9713a; outline-offset: 2px; }

.таймер--идёт {
    background: #8a3d10;
    border-color: #8a3d10;
    color: #fff;
    font-size: 1.15rem;
    letter-spacing: .02em;
}
.таймер--идёт::before { content: "⏸"; }

.таймер--готово {
    background: #1f7a44;
    border-color: #1f7a44;
    color: #fff;
}
.таймер--готово::before { content: "✓"; }

/* В таблице кнопка не должна растягивать колонку. */
table .таймер { min-height: 38px; padding: .3em .7em; font-size: .95rem; }

@media (prefers-reduced-motion: reduce) { .таймер { transition: none; } }