.interval-tv-readout{position:fixed;right:5vw;bottom:26px;z-index:9;width:min(28vw,410px);color:#fff;background:#141011;border:1px solid #ff5038;padding:13px 16px;font-family:ui-monospace,monospace;letter-spacing:.65px}.interval-tv-readout[hidden]{display:none}.interval-tv-label{display:block;color:#ff5038;font:900 10px ui-monospace,monospace;letter-spacing:.8px}.interval-tv-main{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:9px}.interval-tv-main b{display:block;color:#ff5038;font:900 11px ui-monospace,monospace}.interval-tv-main small{display:block;color:#fff;font:900 10px/1.25 ui-monospace,monospace;margin-top:6px}.interval-tv-main strong{color:#fff;font:900 clamp(30px,3.2vw,56px)/.8 ui-monospace,monospace;letter-spacing:-.08em}.interval-tv-readout footer{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #ff503844;margin-top:11px;padding-top:9px;color:#ff5038;font:900 9px ui-monospace,monospace}body.tv.timer-tv-screen-flash::after{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;background:rgba(255,80,56,.62);animation:crossgym-tv-flash .42s ease-out forwards}@keyframes crossgym-tv-flash{from{opacity:1}to{opacity:0}}@media(max-width:850px){.interval-tv-readout{width:min(90vw,410px);right:5vw;bottom:14px}}

/* Header timer (Claude copy, 2026-10-14): replaces the floating box. Header keeps one height whether or not the timer shows. */
body.tv header{display:flex;align-items:center;min-height:clamp(84px,10vh,110px);padding-block:clamp(8px,1.2vh,14px);box-sizing:border-box}
.tv-ht{margin:0 auto;display:grid;grid-template-columns:minmax(0,clamp(150px,15vw,290px)) auto minmax(0,clamp(150px,15vw,290px));align-items:center;column-gap:clamp(18px,2vw,40px)}
.tv-ht[hidden]{display:none}
.tv-ht-l{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;min-width:0}
.tv-ht-r{display:flex;flex-direction:column;gap:4px;min-width:0}
.tv-ht-r[hidden]{display:none}
.tv-ht{--ht-text:#fff;--ht-accent:#ff5038}
.tv-ht-k{color:var(--ht-accent);font:900 clamp(9px,.75vw,13px)/1 ui-monospace,monospace;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tv-ht-r .tv-ht-k{margin-right:10px;vertical-align:middle}
.tv-ht-phase{color:var(--ht-accent);font:900 clamp(22px,2.4vw,44px)/.9 system-ui;letter-spacing:-.04em}
.tv-ht[data-phase="REST"] .tv-ht-phase{color:var(--ht-text)}
.tv-ht[data-phase="PREPARE"] .tv-ht-phase{color:var(--ht-accent);opacity:.7}
.tv-ht[data-phase="DONE"] .tv-ht-phase,.tv-ht.is-paused .tv-ht-phase{color:var(--ht-text);opacity:.5}
.tv-ht-r b{color:var(--ht-text);font:900 clamp(22px,2.4vw,44px)/.9 system-ui;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tv-ht-r small{color:var(--ht-text);font:900 clamp(9px,.72vw,12px)/1.3 ui-monospace,monospace;letter-spacing:.6px;white-space:nowrap}
.tv-ht-t{color:var(--ht-text);font:900 clamp(54px,5vw,92px)/.82 system-ui;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.tv-ht.is-paused .tv-ht-t{opacity:.55}
/* Training Log: the class clock was dark on the dark header (invisible) — pre-existing, fixed here. */
.theme-training-log header #tv-clock{color:#f7f5ef}
/* Review 14/10: more air between "3 / 8" and the lines under it. */
.tv-ht-r{gap:6px}
.tv-ht-r b{margin-bottom:4px}
