/* Target old TV engines only. Use literal colors, flex and margins instead of CSS variables, Grid and flex gap. */
.legacy-tv { font-size: 20px; }
.legacy-tv * { box-sizing: border-box; }
.legacy-tv body { margin: 0; background: #f3f0e8; color: #243c48; font-family: Arial, sans-serif; line-height: 1.4; }
.legacy-tv h1, .legacy-tv h2, .legacy-tv h3, .legacy-tv input, .legacy-tv button, .legacy-tv select { font-family: Arial, sans-serif; }
.legacy-tv a { color: #184d7b; }
.legacy-tv a:focus, .legacy-tv button:focus, .legacy-tv input:focus { outline: 4px solid #b66b16; outline-offset: 3px; }
.legacy-tv button, .legacy-tv .btn { display: inline-block; background: #fff; color: #184d7b; border: 2px solid #647d8a; border-radius: .4rem; font-size: 1rem; padding: .6rem 1rem; cursor: pointer; text-decoration: none; }
.legacy-tv button:disabled { opacity: .55; cursor: default; }
.legacy-tv input:not([type=hidden]):not([type=checkbox]) { display: block; width: 100%; min-height: 2.6rem; padding: .5rem; margin: .35rem 0 1rem; border: 2px solid #647d8a; background: #fff; color: #243c48; font-size: 1rem; }
.legacy-tv input[type=checkbox] { width: 1.2rem; height: 1.2rem; }
.legacy-tv .card { margin: 2rem auto; padding: 1.5rem; background: #fff; border: 1px solid #647d8a; border-radius: .5rem; }
.legacy-tv .text-danger, .legacy-tv .validation-message { color: #9b2929; }
.legacy-tv .alert { padding: 1rem; background: #fff3df; color: #654518; border: 2px solid #86602d; }
.legacy-tv .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.legacy-tv .mud-icon-root { width: 1.5rem; height: 1.5rem; fill: currentColor; }
.legacy-tv .tv-header { padding: 1rem 3vw; background: #173a2c; color: #fff; }
.legacy-tv .tv-header a { display: inline-block; color: #fff; margin: .2rem 1.5rem .2rem 0; padding: .5rem 0; }
.legacy-tv .tv-brand { font-size: 1.5rem; font-weight: 700; }
.legacy-tv .tv-header nav { display: inline-block; margin-right: 1rem; }
.legacy-tv .tv-header form { display: inline-block; margin: .3rem .6rem .3rem 0; }
.legacy-tv .tv-header .view-selector { display: inline-block; }
.legacy-tv .tv-header .view-circle { display: inline-block; width: auto; height: auto; padding: .4rem .7rem; border-radius: .4rem; background: #fff; color: #243c48; }
.legacy-tv .tv-header .view-circle.active { border: 3px solid #d7b77a; background: #fff3df; }
.legacy-tv .tv-header .profile-circle-content { display: block; position: static; width: auto; height: auto; }
.legacy-tv .tv-header .profile-circle-name { position: static; display: inline; width: auto; padding: 0; background: none; color: #243c48; font-size: 1rem; }
.legacy-tv .tv-header .profile-circle-fallback, .legacy-tv .tv-header .profile-circle-photo { display: none; }
.legacy-tv .tv-overview { max-width: 1400px; margin: auto; padding: 1.5rem 3vw 3rem; }
.legacy-tv .tv-overview h1 { font-size: 2rem; margin: 0 0 .5rem; }
.legacy-tv .tv-overview h2 { font-size: 1.4rem; margin: 1.5rem 0 .75rem; }
.legacy-tv .tv-choice { display: inline-block; vertical-align: top; width: 46%; margin: 0 2% 1rem 0; padding: 1.2rem; border: 2px solid #647d8a; border-radius: .6rem; background: #fff; color: #243c48; text-decoration: none; word-wrap: break-word; }
.legacy-tv .tv-choice:hover, .legacy-tv .tv-choice:focus { background: #e7f2f6; }
.legacy-tv .tv-choice > strong { display: block; font-size: 1.6rem; margin-bottom: .5rem; }
.legacy-tv .tv-choice > span { display: block; margin-top: .4rem; }
.legacy-tv .tv-choice > span:last-child { color: #184d7b; font-weight: 700; }
.legacy-tv [hidden] { display: none !important; }
.legacy-tv #blazor-error-ui { display: none; }
.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 { display: flex; 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; border-color: #8ea483; }
.legacy-tv .routine-board fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.legacy-tv .free-block > * { margin-bottom: .3rem; }
.legacy-tv .optional-task { display: flex; 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; min-height: 0; padding: 1vh 2vw; }
.legacy-tv .timer-tv .timer-board { position: relative; width: 100%; word-wrap: break-word; }
.legacy-tv .timer-tv .timer-board h2 { font-size: 4vw; line-height: 1.1; margin: 0 0 .4rem; }
.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 { position: absolute; left: 0; top: 25%; width: 18vw; height: 20vh; }
.legacy-tv .timer-tv .timer-clock { width: 36vh; max-width: 26rem; margin: .5rem auto; }
.legacy-tv .timer-tv .timer-deadline { margin: .5rem 0 0; }
.legacy-tv .timer-clock { color: #357d92; }
.legacy-tv .timer-clock svg { height: 14rem; }
.legacy-tv .timer-tv .timer-clock svg { height: 36vh; max-height: 26rem; }
.legacy-tv .timer-clock-face { fill: #fff; stroke: #b7c9cc; }
.legacy-tv .timer-clock-track { fill: none; stroke: #dbe5e2; }
.legacy-tv .timer-clock-dial .timer-clock-track { fill: #e7f2f6; stroke: none; }
.legacy-tv .timer-clock-ring-fill { fill: none; stroke: #357d92; }
.legacy-tv .timer-clock-sector { fill: #a9d3df; }
.legacy-tv .timer-clock-step { stroke: #357d92; }
.legacy-tv .timer-clock-number, .legacy-tv .timer-clock-hub { fill: #243c48; }
.legacy-tv .timer-clock-hand, .legacy-tv .timer-clock-hour-hand { stroke: #243c48; }
.legacy-tv .timer-clock-deadline-marker { fill: #b66316; stroke: #b66316; }
.legacy-tv .timer-clock-times { color: #243c48; }
.legacy-tv .timer-clock-end-label { color: #9c5010; }
.legacy-tv .timer-countdown span, .legacy-tv .timer-deadline { color: #536b76; }
.legacy-tv .timer-message, .legacy-tv .routine-message.success { color: #276443; }
.legacy-tv .routine-message.reminder, .legacy-tv .routine-time .overtime { color: #965014; }
.legacy-tv .back-link { display: inline-block; padding: .6rem 0; }
.legacy-tv .task-timeline { flex-wrap: wrap; }
.legacy-tv .task-timeline .task-block { min-width: 8rem; }
.legacy-tv .timer-tv .timer-board-clock .timer-countdown strong { font-size: 6vw; }
.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 .tv-choice { display: block; width: 100%; margin-right: 0; }
    .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; }
}