/* What the cooking screen (templates/recipe_v2_make.html) keeps from the old cooking mode page (removed 27.10.2026):
   the running timers and the timeline (components/whole_dish.html). Colours, fonts and sizes from tokens.css. */
/* The cook-phase steps carry the class cook (components/step_list.html), so these reach their buttons too */
.cook [hidden] { display: none !important; }
.cook button { font: inherit; color: inherit; cursor: pointer; }
.cook button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* A running timer, red and pulsing when the time is up (static/js/steps.js) */
.tm { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 4px 10px; background: var(--color-cook-soft); color: var(--color-cook-ink); border: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.tm.fin { background: var(--color-danger); color: var(--color-paper); animation: cookpulse 1s infinite; }
@keyframes cookpulse { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .tm.fin { animation: none; } }

/* Timeline (whole.timeline): one row per step; solid is your work, hatched stands on its own, dotted waits to be used */
.tl-row.ph-prep { --ph: var(--color-prep); }
.tl-row.ph-cook { --ph: var(--color-cook); }
.tl-row.ph-serve { --ph: var(--color-serve); }
.tl-scroll { overflow-x: auto; }
.tl { --lw: 150px; position: relative; padding-top: 12px; min-width: 360px; }
.tl-row { display: grid; grid-template-columns: var(--lw) 1fr; align-items: center; min-height: 26px; border-bottom: 1px solid var(--color-soft); }
.tl-row.cur { background: var(--color-soft); box-shadow: inset 3px 0 0 var(--ph); }
.tl-row.cur .tl-l span { font-weight: 700; }
.tl-l { display: grid; font-size: 13px; line-height: 1.25; padding: 0 10px 0 6px; min-width: 0; }
.tl-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-no { font: 500 11px var(--font-mono); color: var(--color-muted); }
.tl-t { position: relative; height: 14px; }
.tb { position: absolute; top: 0; height: 14px; border-radius: 3px; display: block; }
.tb.a { background: var(--ph); }
.tb.p { background: repeating-linear-gradient(135deg, var(--ph) 0 2px, transparent 2px 6px); border: 1px solid var(--ph); }
.tb.h { border: 1.5px dotted var(--ph); border-left: 0; border-radius: 0 3px 3px 0; opacity: .7; }
.tb.h.over { border-color: var(--color-danger); opacity: 1; }
.tl-me { --ph: var(--color-ink); }
.tl-me .tl-l span { font-weight: 700; }
.tb.me { background: var(--color-ink); }
.tb.free { background: var(--color-soft); border: 1px dashed var(--color-line-strong); display: grid; place-items: center; overflow: hidden; }
.tb.free b { font: 500 10px var(--font-mono); color: var(--color-muted); white-space: nowrap; }
.tl-axis { display: grid; grid-template-columns: var(--lw) 1fr; height: 22px; }
.tl-axis div { position: relative; font: 11px var(--font-mono); color: var(--color-muted); }
.tl-axis span { position: absolute; top: 4px; transform: translateX(-50%); }
.nowline { position: absolute; top: 0; bottom: 22px; width: 2px; background: var(--color-danger); left: calc(var(--lw) + (100% - var(--lw)) * var(--x)); pointer-events: none; transition: left .3s; }
.phline { position: absolute; top: 0; bottom: 22px; border-left: 1px dashed var(--color-line-strong); left: calc(var(--lw) + (100% - var(--lw)) * var(--x)); pointer-events: none; }
.phline span { position: absolute; top: 0; left: 4px; font: 500 9.5px var(--font-mono); color: var(--color-muted); text-transform: uppercase; letter-spacing: .08em; background: var(--color-paper); padding: 0 2px; }
.phline.r span { left: auto; right: 4px; }
.tl-status { font-size: 15px; margin: var(--space-3) 0 0; min-height: 3em; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--color-muted); margin: var(--space-2) 0 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 18px; height: 10px; border-radius: 2px; --ph: var(--color-cook); }
.lg.a { background: var(--ph); }
.lg.p { background: repeating-linear-gradient(135deg, var(--ph) 0 2px, transparent 2px 6px); border: 1px solid var(--ph); }
.lg.h { border: 1.5px dotted var(--ph); }
@media (prefers-reduced-motion: reduce) { .nowline { transition: none; } }

/* The parts of the dish, a colour each (the metro map's lines, components/whole_dish.html metro_map) */
.lane-0 { --lane: rgb(var(--serve-600)); } .lane-1 { --lane: rgb(var(--accent-600)); } .lane-2 { --lane: rgb(var(--prep-600)); } .lane-3 { --lane: rgb(var(--warning-600)); }