/* TV Screens – the slide look, shared by the TV player (tv.html) and the editor preview (TV Screens page).
   Sizes use cqh (a % of the screen's height) so a slide looks the same on a 55" TV and in the small editor preview.
   vh comes first as a fallback for older TV browsers (on the TV the stage is the whole screen, so vh = cqh). */
.tv-stage { position: relative; overflow: hidden; container-type: size; background: #0f1218; color: #f5f2ec; font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --accent: #c8a46b; }
.tv-stage * { box-sizing: border-box; }
.tv-slide { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .8s ease; background: radial-gradient(120% 120% at 0% 0%, #1d2430 0%, #0f1218 60%); }
.tv-slide.on { opacity: 1; }
.tv-stage.no-anim .tv-slide { transition: none; }
.tv-body { flex: 1; display: flex; min-height: 0; padding: 7vh 7vh; padding: 7cqh 7cqh; }
.tv-stage.with-header .tv-body { padding-top: 15vh; padding-top: 15cqh; }

/* header: logo · place · clock */
.tv-header { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 11vh; height: 11cqh; display: flex; align-items: center; gap: 2.4vh; gap: 2.4cqh; padding: 0 5vh; padding: 0 5cqh; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.tv-logo { height: 6.5vh; height: 6.5cqh; max-width: 34vh; max-width: 34cqh; object-fit: contain; }
.tv-place { font-size: 3.1vh; font-size: 3.1cqh; font-weight: 600; letter-spacing: .02em; opacity: .92; }
.tv-mark { width: 1.1vh; width: 1.1cqh; height: 6vh; height: 6cqh; border-radius: 1vh; background: var(--accent); }
.tv-clock { margin-left: auto; text-align: right; line-height: 1.1; }
.tv-clock b { display: block; font-size: 4.2vh; font-size: 4.2cqh; font-weight: 600; font-variant-numeric: tabular-nums; }
.tv-clock span { font-size: 2.1vh; font-size: 2.1cqh; opacity: .75; }
.tv-progress { position: absolute; z-index: 6; left: 0; bottom: 0; height: .6vh; height: .6cqh; width: 0; background: var(--accent); opacity: .85; }
.tv-progress.run { animation-name: tvbar; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes tvbar { from { width: 0; } to { width: 100%; } }

/* text */
.tv-title { margin: 0 0 3vh; margin: 0 0 3cqh; font-weight: 700; line-height: 1.08; letter-spacing: -.01em; font-size: 8.5vh; font-size: 8.5cqh; text-wrap: balance; }
.tv-text { margin: 0; font-size: 4.2vh; font-size: 4.2cqh; line-height: 1.38; white-space: pre-line; opacity: .9; text-wrap: pretty; }
.tv-slide[data-size="s"] .tv-title { font-size: 6.5vh; font-size: 6.5cqh; }
.tv-slide[data-size="s"] .tv-text { font-size: 3.2vh; font-size: 3.2cqh; }
.tv-slide[data-size="l"] .tv-title { font-size: 11.5vh; font-size: 11.5cqh; }
.tv-slide[data-size="l"] .tv-text { font-size: 5.4vh; font-size: 5.4cqh; }
.tv-kicker { display: inline-block; margin-bottom: 2.4vh; margin-bottom: 2.4cqh; padding: .7vh 1.8vh; padding: .7cqh 1.8cqh; border-radius: 99vh; font-size: 2.3vh; font-size: 2.3cqh; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--accent); color: #111; }
.tv-accentbar { width: 12vh; width: 12cqh; height: .9vh; height: .9cqh; border-radius: 1vh; background: var(--accent); margin-bottom: 3.5vh; margin-bottom: 3.5cqh; }

/* announcement layouts */
.tv-announcement .tv-body { align-items: center; }
.tv-announcement .tv-copy { max-width: 100%; }
.tv-announcement[data-layout="center"] .tv-body { justify-content: center; text-align: center; }
.tv-announcement[data-layout="center"] .tv-copy { max-width: 82%; }
.tv-announcement[data-layout="center"] .tv-accentbar { margin-left: auto; margin-right: auto; }
.tv-announcement[data-layout="left"] .tv-copy { max-width: 78%; }
.tv-announcement[data-layout="image-right"] .tv-body { gap: 6vh; gap: 6cqh; }
.tv-announcement[data-layout="image-right"] .tv-copy { flex: 1 1 52%; }
.tv-side { flex: 1 1 48%; align-self: stretch; border-radius: 2.4vh; border-radius: 2.4cqh; overflow: hidden; box-shadow: 0 2vh 6vh rgba(0, 0, 0, .45); }
.tv-side img, .tv-side video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-bgmedia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, .15) 100%); }
.tv-announcement[data-layout="image-bg"] .tv-body { position: relative; z-index: 1; }
.tv-announcement[data-layout="image-bg"] .tv-copy { max-width: 70%; text-shadow: 0 .3vh 1.5vh rgba(0, 0, 0, .5); }

/* picture / video slides */
.tv-media { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.tv-media.fit-cover { object-fit: cover; }
.tv-media.fit-contain { object-fit: contain; }
.tv-caption { position: absolute; z-index: 2; left: 5vh; left: 5cqh; bottom: 5vh; bottom: 5cqh; max-width: 70%; padding: 2vh 3vh; padding: 2cqh 3cqh; border-radius: 1.6vh; border-radius: 1.6cqh; background: rgba(0, 0, 0, .62); font-size: 3.6vh; font-size: 3.6cqh; font-weight: 600; }

/* birthdays */
.tv-birthdays .tv-body { flex-direction: column; justify-content: center; }
.tv-bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(36vh, 1fr)); grid-template-columns: repeat(auto-fill, minmax(36cqh, 1fr)); gap: 2.4vh; gap: 2.4cqh; margin-top: 3vh; margin-top: 3cqh; }
.tv-bd { display: flex; align-items: center; gap: 2vh; gap: 2cqh; padding: 2.4vh 2.8vh; padding: 2.4cqh 2.8cqh; border-radius: 2vh; border-radius: 2cqh; background: rgba(255, 255, 255, .07); border: .2vh solid rgba(255, 255, 255, .08); }
.tv-bd-date { flex: none; width: 10vh; width: 10cqh; text-align: center; line-height: 1; border-radius: 1.4vh; border-radius: 1.4cqh; padding: 1.2vh 0; padding: 1.2cqh 0; background: rgba(255, 255, 255, .1); }
.tv-bd-date b { display: block; font-size: 4.4vh; font-size: 4.4cqh; }
.tv-bd-date span { font-size: 1.9vh; font-size: 1.9cqh; text-transform: uppercase; letter-spacing: .1em; opacity: .8; }
.tv-bd-name { font-size: 3.6vh; font-size: 3.6cqh; font-weight: 600; line-height: 1.15; }
.tv-bd-note { font-size: 2.2vh; font-size: 2.2cqh; opacity: .7; }
.tv-bd.today { background: var(--accent); color: #141414; border-color: transparent; }
.tv-bd.today .tv-bd-date { background: rgba(0, 0, 0, .14); }
.tv-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tv-confetti i { position: absolute; top: -4vh; top: -4cqh; width: 1.2vh; width: 1.2cqh; height: 2vh; height: 2cqh; border-radius: .3vh; opacity: .9; animation: tvfall linear infinite; }
@keyframes tvfall { to { transform: translateY(115vh) rotate(540deg); } }

/* health */
.tv-health .tv-body { flex-direction: column; }
.tv-hl-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(44vh, 1fr)); grid-template-columns: repeat(auto-fit, minmax(44cqh, 1fr)); gap: 2.6vh; gap: 2.6cqh; align-content: center; }
.tv-hl { padding: 3vh; padding: 3cqh; border-radius: 2.2vh; border-radius: 2.2cqh; background: rgba(255, 255, 255, .06); border-left: 1.2vh solid #30a46c; border-left: 1.2cqh solid #30a46c; }
.tv-hl.warn { border-left-color: #f5a524; }
.tv-hl.down { border-left-color: #e5484d; background: rgba(229, 72, 77, .18); }
.tv-hl-name { font-size: 4vh; font-size: 4cqh; font-weight: 700; }
.tv-hl-state { font-size: 2.8vh; font-size: 2.8cqh; margin-top: .8vh; margin-top: .8cqh; opacity: .9; }
.tv-hl-chips { display: flex; flex-wrap: wrap; gap: 1vh; gap: 1cqh; margin-top: 1.6vh; margin-top: 1.6cqh; }
.tv-hl-chips span { font-size: 2vh; font-size: 2cqh; padding: .5vh 1.3vh; padding: .5cqh 1.3cqh; border-radius: 99vh; background: rgba(255, 255, 255, .1); }
.tv-hl-chips span.bad { background: #e5484d; }

/* clock / welcome */
.tv-clockslide .tv-body { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tv-bigtime { font-size: 26vh; font-size: 26cqh; font-weight: 300; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tv-bigdate { font-size: 5vh; font-size: 5cqh; opacity: .85; margin-top: 2vh; margin-top: 2cqh; text-transform: capitalize; }
.tv-clockslide .tv-title { margin-top: 5vh; margin-top: 5cqh; font-size: 6vh; font-size: 6cqh; color: var(--accent); }

/* empty / message */
.tv-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2vh; padding: 10vh; font-size: 4vh; opacity: .85; }
.tv-message small { font-size: 2.4vh; opacity: .7; }
.tv-offline { position: absolute; z-index: 7; right: 2vh; bottom: 2vh; width: 1.6vh; height: 1.6vh; border-radius: 50%; background: #e5484d; display: none; }
.tv-offline.on { display: block; }