/* Timer buttons. Lives in the SITE's styles, not the engine: the engine
   doesn't know what cooking is, and shouldn't.

   Main decision — size. The timer is used with wet hands, standing over the
   stove, often from a phone: the tap target is made large (44 px — the lower
   bound below which a finger tap becomes a lottery), and the state reads from
   a meter away — counting down: the button is dark and the digits are large,
   finished — green. */
.timer {
    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; /* digits don't "jump" every second */
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.timer::before {
    content: "▶";
    font-size: .8em;
    opacity: .75;
}
.timer:hover { background: #ffe9dc; }
.timer:focus-visible { outline: 3px solid #c9713a; outline-offset: 2px; }

.timer--running {
    background: #8a3d10;
    border-color: #8a3d10;
    color: #fff;
    font-size: 1.15rem;
    letter-spacing: .02em;
}
.timer--running::before { content: "⏸"; }

.timer--done {
    background: #1f7a44;
    border-color: #1f7a44;
    color: #fff;
}
.timer--done::before { content: "✓"; }

/* Inside a table the button must not stretch the column. */
table .timer { min-height: 38px; padding: .3em .7em; font-size: .95rem; }

@media (prefers-reduced-motion: reduce) { .timer { transition: none; } }