/* Target old TV engines only. Use literal colors, flex and margins instead of CSS variables, Grid and flex gap. */
.legacy-tv body { background: #f3f0e8; color: #243c48; }
.legacy-tv .routine-fullscreen { background: #f3f0e8; }
.legacy-tv .child-routine { background: #fff; border-color: #dbe5e2; }
.legacy-tv .elapsed-track { background: #e9efec; }
.legacy-tv .free-block { background: #f3f8ed; color: #43662f; }
.legacy-tv .routine-time span, .legacy-tv .task-block > span:last-child { color: #536b76; }
.legacy-tv .routine-fullscreen { color: #243c48; padding: 1.25rem 3vw 2rem; }
.legacy-tv .routine-fullscreen h1, .legacy-tv .routine-fullscreen h2, .legacy-tv .routine-fullscreen strong { font-weight: 700; }
.legacy-tv .routine-fullscreen .display-title { font-size: 3vw; }
.legacy-tv .routine-board { display: block; }
.legacy-tv .child-routine { padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 5px 18px rgba(34, 72, 61, .03); }
.legacy-tv .child-heading h2 { font-size: 2.3vw; }
.legacy-tv .child-avatar { display: inline-flex; align-items: center; justify-content: center; margin-right: .65rem; color: #357d92; background: #e7f2f6; }
.legacy-tv .child-routine:nth-child(even) .child-avatar { color: #7e668b; background: #f0eaf5; }
.legacy-tv .routine-time { justify-content: flex-end; }
.legacy-tv .routine-time strong { font-size: 2.5vw; margin-right: .6rem; }
.legacy-tv .elapsed-track > div { background: #357d92; }
.legacy-tv .child-routine:nth-child(even) .elapsed-track > div { background: #7e668b; }
.legacy-tv .task-block { color: #243c48; background: #e7f2f6; margin: 0 .65rem .65rem 0; }
.legacy-tv .child-routine:nth-child(even) .task-block { background: #f0eaf5; }
.legacy-tv .task-block.completed { background: #edf5ee; color: #52735e; }
.legacy-tv .task-icon { width: 3.6rem; height: 3.6rem; color: #357d92; margin-bottom: .35rem; }
.legacy-tv .child-routine:nth-child(even) .task-icon { color: #7e668b; }
.legacy-tv .task-block.completed .task-icon { color: #4a8d5f; }
.legacy-tv .task-check { color: #357d92; }
.legacy-tv .task-block strong { font-size: 1.2rem; word-wrap: break-word; margin-bottom: .35rem; }
.legacy-tv .free-block { margin-bottom: .65rem; }
.legacy-tv .free-block > * { margin-bottom: .3rem; }
.legacy-tv .optional-task { background: rgba(255, 255, 255, .8); margin: 0 .4rem .4rem 0; }
.legacy-tv .optional-task.completed { background: #e4efdc; }
.legacy-tv .optional-task svg, .legacy-tv .free-heading svg { margin-right: .35rem; }
.legacy-tv .confetti { display: none; }
.legacy-tv .timer-tv { display: flex; flex-direction: column; justify-content: center; padding: 3vw; }
.legacy-tv .timer-tv .timer-board { width: 100%; word-wrap: break-word; }
.legacy-tv .timer-tv .timer-board h2 { font-size: 5vw; }
.legacy-tv .timer-tv .timer-countdown strong { font-size: 12vw; }
.legacy-tv .timer-tv .timer-countdown span, .legacy-tv .timer-tv .timer-deadline { font-size: 2vw; }
.legacy-tv .timer-tv .timer-message { font-size: 4vw; }
.legacy-tv .timer-tv .elapsed-track { height: 5vw; }
.legacy-tv .timer-tv .timer-image { width: 20rem; max-width: 40vw; height: 16rem; max-height: 25vh; }
.legacy-tv .timer-tv .timer-clock { width: 32vh; max-width: 26rem; }
.legacy-tv .timer-tv .timer-board-clock .timer-countdown strong { font-size: 7vw; }
.legacy-tv .timer-due .elapsed-track > div { background: #39826a; }
.legacy-tv .routine-fullscreen button:focus, .legacy-tv .routine-fullscreen a:focus { outline: 3px solid #184d7b; outline-offset: 3px; }
.tv-connection-message { background: #fff3df; color: #86602d; padding: 1rem; border: 2px solid #86602d; }
.tv-browser-info dd { word-wrap: break-word; margin: .5rem 0 1.5rem; }
.tv-browser-info dt { font-weight: 700; }
.tv-wake-video { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; object-fit: fill; z-index: 0; pointer-events: none; }
.tv-video-awake .routine-fullscreen { position: relative; z-index: 1; }
.tv-wake-message { position: fixed; bottom: 1rem; left: 3vw; right: 3vw; z-index: 10; background: #fff3df; color: #654518; border: 1px solid #86602d; border-radius: .5rem; padding: .75rem 1rem; }
.tv-wake-video[hidden], .tv-wake-message[hidden] { display: none !important; }
.routine-fullscreen [hidden], .timer-board [hidden] { display: none !important; }
@media (max-width: 640px) {
    .legacy-tv .routine-fullscreen .display-title { font-size: 1.8rem; }
    .legacy-tv .child-heading h2 { font-size: 1.35rem; }
    .legacy-tv .routine-time strong { font-size: 1.5rem; }
    .legacy-tv .timer-tv .timer-board h2 { font-size: 2rem; }
    .legacy-tv .timer-tv .timer-countdown strong { font-size: 4rem; }
    .legacy-tv .timer-tv .timer-countdown span, .legacy-tv .timer-tv .timer-deadline { font-size: 1.1rem; }
}