/* TV interface: a traditional cable box.
   Everything is sized in rem; the root size scales with the screen so the
   layout is designed once at 1920x1080 (1rem = 16px) and fits any TV. */

:root {
  /* Defaults; tv.js re-derives these from the carrier's brand color. */
  --navy-deep: #050f27;
  --navy: #071739;
  --navy-2: #0c2557;
  --glass: rgba(7, 23, 57, 0.92);
  --chan: #0e2654;
  --chan-focus: #183673;
  --cell: #13306f;
  --cell-live: #1c4294;
  --panel-hi: #1d4192;
  --band: #2350b8;
  --ice: #e9efff;
  --steel: #93a6d1;
  --accent: #ffb627;
  --accent-ink: #071739;
  --accent-soft: rgba(255, 182, 39, 0.15);
  --accent-glow: rgba(255, 182, 39, 0.7);
  --vfd: #63f5c6;
  --t-fast: 160ms;
  --t-move: 380ms;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font-size: min(0.8334vw, 1.4815vh);
  background: #000;
  color: var(--ice);
  font-family: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  cursor: default;
}
body { margin: 0; height: 100vh; overflow: hidden; user-select: none; }
body.hide-cursor { cursor: none; }

.vfd {
  font-family: "DSEG7", monospace;
  color: var(--vfd);
  text-shadow: 0 0 0.6rem rgba(99, 245, 198, 0.55), 0 0 2rem rgba(99, 245, 198, 0.2);
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------- video */
#stage {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #000;
  z-index: 1;
  overflow: hidden;
  transition: top var(--t-move) ease, left var(--t-move) ease,
              width var(--t-move) ease, height var(--t-move) ease,
              border-radius var(--t-move) ease;
}
#video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

/* Subtitles, drawn by us (not the browser) so size and style are consistent. */
#captions {
  position: absolute; left: 0; right: 0; bottom: 7%;
  display: flex; flex-direction: column; align-items: center; gap: 0.25em;
  pointer-events: none; z-index: 2;
  font-family: "Barlow", sans-serif; font-weight: 500;
  font-size: var(--cc-size, 3.8rem); line-height: 1.28; text-align: center;
  transition: bottom var(--t-fast) ease;
}
#captions .cue {
  max-width: 80%; padding: 0.06em 0.45em; border-radius: 0.15em;
  background: rgba(0, 0, 0, 0.8); color: #fff; white-space: pre-line;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.cc-small { --cc-size: 2.9rem; }
body.cc-large { --cc-size: 5rem; }
body.banner-up #captions { bottom: 18.5rem; }
body.guide-open #captions { display: none; }
body.guide-open #stage {
  z-index: 30;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.14);
}

#slate {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at center, var(--navy-2) 0%, var(--navy-deep) 75%);
  text-align: center;
}
.slate-num { font-size: 6rem; font-weight: 700; color: var(--steel); line-height: 1; }
.slate-title { font-size: 3.4rem; font-weight: 700; }
.slate-text { font-size: 1.8rem; color: var(--steel); }
.slate-support { font-size: 1.6rem; color: var(--steel); opacity: 0.8; margin-top: 1rem; }
.slate-support:empty { display: none; }
body.guide-open .slate-support { display: none; }
body.guide-open .slate-num { font-size: 2.6rem; }
body.guide-open .slate-title { font-size: 1.8rem; }
body.guide-open .slate-text { display: none; }

#loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 0.8rem;
}
#loading i {
  width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--ice); opacity: 0.25;
  animation: pulse 1s infinite ease-in-out;
}
#loading i:nth-child(2) { animation-delay: 0.15s; }
#loading i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pulse { 50% { opacity: 1; transform: scale(1.15); } }

/* --------------------------------------------------------------- banner */
#banner {
  position: fixed;
  left: 4rem; right: 4rem; bottom: 3.5rem;
  z-index: 20;
  display: grid;
  grid-template-columns: 26rem 1fr auto;
  min-height: 12.5rem;
  border-radius: 0.9rem;
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--navy-2) 34%, var(--navy) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.55);
  animation: rise var(--t-fast) ease-out;
}
/* "Changed by Jane" tab, attached to the top edge of the banner. */
.b-by {
  position: absolute; left: 2rem; bottom: 100%;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 1.4rem 0.5rem 1.1rem;
  border-radius: 0.7rem 0.7rem 0 0;
  background: var(--accent); color: var(--accent-ink);
  font-size: 1.75rem; font-weight: 700;
  animation: tab-up 220ms ease-out;
}
.b-by svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 2; }
@keyframes tab-up { from { transform: translateY(0.8rem); opacity: 0; } }
@keyframes rise { from { transform: translateY(1.2rem); opacity: 0; } }

.b-chan {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 1.4rem;
  padding: 1.6rem 2rem;
  background: rgba(0, 0, 0, 0.22);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.9rem 0 0 0.9rem;
}
.b-num { font-size: 5.4rem; font-weight: 700; line-height: 0.9; grid-row: span 2; align-self: center; }
.b-logo { height: 4.4rem; display: flex; align-items: center; }
.b-logo img { max-height: 4.4rem; max-width: 11rem; object-fit: contain; }
.b-chan.no-logo .b-name { grid-row: span 2; align-self: center; font-size: 2.4rem; color: var(--ice); }
.b-name { font-size: 1.9rem; font-weight: 600; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.b-prog { padding: 1.6rem 2.4rem; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; }
.b-title { font-size: 3.1rem; font-weight: 700; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-meta { display: flex; gap: 1.6rem; font-size: 1.8rem; color: var(--steel); }
.b-meta span:empty { display: none; }
.b-ep { color: var(--ice); }
.b-cc {
  align-self: center; font-size: 1.3rem; font-weight: 700; line-height: 1;
  padding: 0.3rem 0.5rem; border: 0.15rem solid var(--steel); border-radius: 0.3rem; color: var(--steel);
}
.b-cc.on { background: var(--ice); border-color: var(--ice); color: var(--navy); }
.b-bar { height: 0.55rem; background: rgba(255, 255, 255, 0.14); border-radius: 1rem; overflow: hidden; margin: 0.3rem 0; max-width: 46rem; }
.b-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.b-next { font-size: 1.7rem; color: var(--steel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-next b { color: var(--ice); font-weight: 600; margin-left: 0.5rem; }

.b-clock {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding: 1.6rem 2.2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.b-brand { height: calc(2.4rem * var(--logo-scale, 1)); margin-bottom: 0.6rem; display: flex; justify-content: flex-end; font-size: calc(2rem * var(--logo-scale, 1)); opacity: 0.92; }
.b-clock-time { font-size: 3.2rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.b-clock-date { font-size: 1.6rem; color: var(--steel); }

/* -------------------------------------------------- number entry, volume */
#numentry {
  position: fixed; top: 3.5rem; right: 4rem; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
  padding: 1.4rem 2rem;
  background: rgba(2, 8, 22, 0.86);
  border-radius: 0.7rem;
  border: 1px solid rgba(99, 245, 198, 0.25);
}
#numentry .vfd { font-size: 4.6rem; }
.numentry-name { font-size: 1.7rem; color: var(--steel); min-height: 1.7rem; }

#volume {
  position: fixed; left: 50%; bottom: 3.5rem; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.1rem 1.8rem;
  border-radius: 0.8rem;
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
body.banner-up #volume { bottom: 20rem; }
.vol-icon { width: 2.8rem; height: 2.8rem; fill: var(--ice); color: var(--ice); }
.vol-icon .vol-x { display: none; }
#volume.muted .vol-icon .vol-waves { display: none; }
#volume.muted .vol-icon .vol-x { display: inline; }
.vol-bar { display: flex; gap: 0.3rem; align-items: flex-end; height: 2.6rem; }
.vol-bar i { width: 0.9rem; background: rgba(255, 255, 255, 0.14); border-radius: 0.15rem; }
.vol-bar i.on { background: var(--accent); }
#volume.muted .vol-bar i.on { background: var(--steel); }
.vol-num { font-size: 2.6rem; font-weight: 700; min-width: 3.4rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- guide */
#guide {
  position: fixed; inset: 0; z-index: 25;
  display: grid;
  grid-template-rows: 22.5rem 1fr auto;
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 40%);
}
.g-top {
  display: grid;
  grid-template-columns: 37rem 1fr 18rem;
  gap: 2.5rem;
  padding: 2.4rem 3rem 1.2rem;
}
.g-pip { width: 34rem; height: 19.125rem; border-radius: 0.5rem; background: #000; }
.g-detail { min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.4rem; }
.g-d-chan { font-size: 1.8rem; color: var(--steel); }
.g-d-title { margin: 0; font-size: 3.4rem; font-weight: 700; line-height: 1.05; }
.g-d-meta { font-size: 1.8rem; color: var(--accent); display: flex; gap: 1.4rem; }
.g-d-meta span:empty { display: none; }
.g-d-desc {
  margin: 0.3rem 0 0; font-family: "Barlow", sans-serif; font-weight: 400;
  font-size: 1.65rem; line-height: 1.4; color: #c8d3ee; max-width: 70ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.g-clock { text-align: right; padding-top: 0.4rem; }
.g-brand { height: calc(3rem * var(--logo-scale, 1)); margin-bottom: 1rem; display: flex; justify-content: flex-end; font-size: calc(2.4rem * var(--logo-scale, 1)); }
.g-clock-time { font-size: 3.4rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-clock-date { font-size: 1.7rem; color: var(--steel); }

.g-grid { position: relative; margin: 0 3rem; min-height: 0; display: flex; flex-direction: column; }
.g-times, .g-row { display: grid; grid-template-columns: 19rem 1fr; gap: 0.3rem; }
.g-times { height: 3.6rem; margin-bottom: 0.3rem; }
.g-times > div {
  background: var(--band);
  display: flex; align-items: center; padding: 0 1.2rem;
  font-size: 1.75rem; font-weight: 600;
}
.g-times > div:first-child { border-top-left-radius: 0.5rem; }
.g-times > .g-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; background: none !important; padding: 0 !important; }
.g-slots > span { background: var(--band); display: flex; align-items: center; padding: 0 1.2rem; }
.g-slots > span:last-child { border-top-right-radius: 0.5rem; }

.g-rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.3rem; overflow: hidden; }
.g-row { height: 4.6rem; flex: none; }
.g-ch {
  display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: 0.6rem;
  padding: 0 1rem;
  background: var(--chan);
  font-size: 1.85rem; font-weight: 600;
  overflow: hidden;
}
.g-ch .num { color: var(--steel); font-variant-numeric: tabular-nums; }
.g-ch .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-row.current .g-ch .num { color: var(--accent); }
.g-row.focus .g-ch { background: var(--chan-focus); }
.g-cells { position: relative; overflow: hidden; }
.g-cell {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0 1.1rem;
  background: var(--cell);
  font-size: 1.85rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-right: 0.3rem solid var(--navy);
}
.g-cell.live { background: var(--cell-live); }
.g-cell.filler { color: var(--steel); }
.g-cell.cut-left::before { content: "◀"; font-size: 1.1rem; color: var(--steel); }
.g-cell.cut-right::after { content: "▶"; font-size: 1.1rem; color: var(--steel); margin-left: auto; }
.g-cell .t { overflow: hidden; text-overflow: ellipsis; }
.g-cell.focus { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.g-cell.focus::before, .g-cell.focus::after { color: var(--accent-ink); }

.g-nowline {
  position: absolute; top: 3.6rem; bottom: 0; width: 0.25rem;
  background: var(--accent); opacity: 0.85; pointer-events: none;
  box-shadow: 0 0 0.6rem var(--accent-glow);
}
.g-help {
  display: flex; gap: 3rem; justify-content: center;
  padding: 1.1rem 0 1.4rem; font-size: 1.6rem; color: var(--steel);
}
kbd {
  font-family: inherit; font-size: 1.3rem; font-weight: 700;
  display: inline-block; min-width: 2.2rem; padding: 0.1rem 0.5rem; margin-right: 0.3rem;
  border-radius: 0.3rem; background: rgba(255, 255, 255, 0.12); color: var(--ice); text-align: center;
}

/* -------------------------------------------------------------- pairing */
#pairing {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, var(--panel-hi) 0%, transparent 70%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy-deep) 100%);
}
.p-brand { position: absolute; top: 5rem; left: 11rem; height: calc(4.4rem * var(--logo-scale, 1)); font-size: calc(3.4rem * var(--logo-scale, 1)); }
.p-wrap { display: grid; grid-template-columns: 1fr 30rem; gap: 7rem; align-items: center; padding: 0 11rem; }
.p-main h1 { margin: 0 0 2.6rem; font-size: 6.4rem; font-weight: 700; line-height: 1; }
.p-steps { margin: 0 0 3.2rem; padding-left: 2.4rem; font-size: 2.6rem; line-height: 1.6; color: #cdd8f3; }
.p-steps li::marker { color: var(--accent); font-weight: 700; }
.p-url { color: var(--ice); font-weight: 700; }
.p-code { display: flex; gap: 1.2rem; }
.p-code span {
  width: 9rem; height: 11rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 7.6rem; font-weight: 700;
  background: var(--ice); color: var(--navy);
  border-radius: 0.8rem;
  box-shadow: inset 0 -0.5rem 0 rgba(7, 23, 57, 0.18);
}
.p-code span:nth-child(3) { margin-right: 1.6rem; }
.p-expiry { margin-top: 2rem; font-size: 2rem; color: var(--steel); font-variant-numeric: tabular-nums; }
.p-qr { text-align: center; font-size: 1.8rem; color: var(--steel); line-height: 1.35; }
.p-qr img { width: 26rem; height: 26rem; display: block; margin: 0 auto 1.4rem; border-radius: 1rem; background: #fff; }
.p-foot {
  position: absolute; left: 11rem; right: 11rem; bottom: 4rem;
  display: flex; justify-content: space-between; gap: 3rem; font-size: 1.6rem; color: var(--steel); opacity: 0.8;
}

/* ---------------------------------------------------------- empty state */
#empty {
  position: fixed; inset: 0; z-index: 15;
  display: flex; flex-direction: column; justify-content: center; padding: 0 14rem;
  background: linear-gradient(160deg, var(--navy-2) 0%, var(--navy-deep) 100%);
}
.e-brand { height: calc(4rem * var(--logo-scale, 1)); font-size: calc(3rem * var(--logo-scale, 1)); margin-bottom: 4rem; }
#empty h1 { font-size: 5rem; margin: 0 0 1.6rem; }
#empty p { font-family: "Barlow", sans-serif; font-weight: 400; font-size: 2.2rem; line-height: 1.5; color: #cdd8f3; max-width: 60ch; margin: 0; }

/* -------------------------------------------------------------- standby */
#standby { position: fixed; inset: 0; z-index: 60; background: #000; overflow: hidden; }

/* Slideshow: two layers crossfade; each has a blurred fill behind the photo
   so portrait or odd-sized pictures still cover the screen. */
.ss-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.ss-layer.show { opacity: 1; }
.ss-bg, .ss-fg { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; }
.ss-bg { background-size: cover; filter: blur(3rem) brightness(0.55); transform: scale(1.15); }
.ss-fg { background-size: contain; }
.ss-fg.cover { background-size: cover; }
.ss-layer.drift .ss-fg { animation: drift var(--ss-dur, 14s) linear forwards; }
@keyframes drift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.09) translate(var(--dx, 0), var(--dy, 0)); }
}
.ss-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 34%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 20%);
}
.ss-brand { position: absolute; top: 4.5rem; left: 5.5rem; height: calc(3.4rem * var(--logo-scale, 1)); font-size: calc(2.8rem * var(--logo-scale, 1)); opacity: 0.9; }
.ss-caption {
  position: absolute; left: 5.5rem; bottom: 5rem; max-width: 70rem;
  font-family: "Barlow", sans-serif; font-weight: 500; font-size: 2.3rem;
  text-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.7);
}
.ss-clock { position: absolute; right: 5.5rem; bottom: 4.2rem; text-align: right; text-shadow: 0 0.2rem 1.6rem rgba(0, 0, 0, 0.6); }
.ss-time { font-size: 9rem; font-weight: 600; line-height: 0.95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-date { font-size: 2.5rem; font-weight: 500; opacity: 0.9; }

#standby:not(.has-slides) .ss-layer,
#standby:not(.has-slides) .ss-scrim,
#standby:not(.has-slides) .ss-brand,
#standby:not(.has-slides) .ss-caption,
#standby:not(.has-slides) .ss-clock { display: none; }
#standby.has-slides .standby-fallback { display: none; }

/* No photos: a front-panel style clock that wanders slowly to avoid burn-in. */
.standby-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6rem;
  transition: transform 2s ease;
}
.standby-clock { position: relative; font-size: 9rem; opacity: 0.6; }
/* Unlit segments, like a real vacuum-fluorescent display. */
.standby-clock::before { content: attr(data-ghost); position: absolute; inset: 0; opacity: 0.09; text-shadow: none; }
.standby-brand { height: calc(2.6rem * var(--logo-scale, 1)); font-size: calc(2.2rem * var(--logo-scale, 1)); opacity: 0.35; }

/* --------------------------------------------------------------- splash */
#splash {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rem;
  background: radial-gradient(ellipse at center, var(--navy-2) 0%, var(--navy-deep) 70%);
}
.splash-brand { height: calc(9rem * var(--logo-scale, 1)); font-size: calc(7rem * var(--logo-scale, 1)); display: flex; align-items: center; }
.splash-dots { display: flex; gap: 1rem; }
.splash-dots i {
  width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ice); opacity: 0.25;
  animation: pulse 1s infinite ease-in-out;
}
.splash-dots i:nth-child(2) { animation-delay: 0.15s; }
.splash-dots i:nth-child(3) { animation-delay: 0.3s; }

/* Brand mark: an uploaded logo, or the carrier name set as a wordmark.
   Containers set the height (logo) and font-size (wordmark). */
.brand-logo { display: block; height: 100%; width: auto; max-width: calc(40rem * var(--logo-scale, 1)); object-fit: contain; }
.brand-word { display: block; font-weight: 700; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }

/* ------------------------------------------------------- small overlays */
#toast {
  position: fixed; top: 3.5rem; left: 4rem; z-index: 70;
  max-width: 50rem;
  padding: 1.2rem 1.8rem;
  border-radius: 0.6rem;
  background: var(--glass);
  border-left: 0.4rem solid var(--accent);
  font-size: 1.9rem; font-weight: 600;
  animation: rise var(--t-fast) ease-out;
}
#soundhint, #offline {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
  padding: 1rem 1.8rem; border-radius: 0.6rem;
  background: var(--glass); font-size: 1.8rem;
}
#soundhint { top: 3.5rem; }
#offline { bottom: 3.5rem; color: var(--accent); z-index: 90; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-move: 0ms; }
  #loading i, .splash-dots i { animation: none; opacity: 0.7; }
  .ss-layer.drift .ss-fg { animation: none; }
  .b-by { animation: none; }
}