/* Media -- the desktop app on load: an app's seasons as TV channels.

   The look is the "Fiabaen Media TV" design (.design/fiabaen-media/
   Fiabaen-Media-TV.html): a white bar, then a dark room holding the set -- a
   bezelled 16:9 screen with a lower third, a remote beside it -- and a cable
   box guide under the set. All seasons swaps the room for a white list.

   Self-contained, like /community and /market: no phone stylesheet under it,
   no !important. Buttons and highlights are the owner's own colours, set by
   app-colors.js; where the design used its teal, this uses --hl.

   Faces: Archivo stretched for anything shouted, JetBrains Mono for the
   read-off-a-panel labels, as the design sets them. */

:root, .tab-tv {
  --paper: #ffffff;
  --paper-2: #f2f2f2;
  --ink: #0e0e0e;
  --ink-2: #1a1a1a;
  /* Buttons and highlights are the app's own colours (app-colors.js sets
     them from the owner's Colors setting). Unset, they are black on white;
     on the dark room an unset highlight would vanish, so the room reads its
     own --room-hl below. */
  --btn: #000000;
  --on-btn: #ffffff;
  --hl: #000000;
  --on-hl: #ffffff;
  --hl-soft: rgba(0, 0, 0, 0.08);
  --line: #0e0e0e;
  --dim: #8a8a90;
  --white: #ffffff;

  --room: #0b0b0c;
  --set: #18181b;
  --set-edge: #26262a;
  --cell: #0e0e10;
  --cell-line: #1f1f22;

  /* The room's own palette, dark by default; the light theme below redefines
     the same names. The picture itself stays black in both. */
  --on-room: #ffffff;
  --room-dim: rgba(255, 255, 255, 0.55);
  --room-text-2: rgba(255, 255, 255, 0.86);
  --scan: rgba(255, 255, 255, 0.025);
  --track: rgba(255, 255, 255, 0.12);
  --faint: rgba(255, 255, 255, 0.07);
  --set-shadow: rgba(0, 0, 0, 0.5);
  --key-bg: #161618;
  --key-edge: #2a2a2e;
  --drop-edge: #3a3a3e;
  --gch-bg: #111113;
  --gch-on-bg: #ffffff;
  --gch-on-fg: #0e0e0e;
  --show-bg: #141416;
  --show-on: #1c1c1f;
  --show-time: #b5b5ba;
  --show-hover: rgba(255, 255, 255, 0.4);
  --keys-text: #6b6b70;
  --next-text: #555555;
  --input-bg: #0b0b0c;
  --play-bg: #ffffff;
  --play-fg: #0e0e0e;
  --info-box: #ffffff;

  --pad: 20px;
  /* Everything on the first screen that is not the picture: the bar (its real
     height, kept current by tv.js as --tv-bar-h) and the strip under the
     picture (8 + 3 + 8 + the 60px info bar + 10). */
  --tv-bar-h: 68px;
  --tv-under-h: 89px;
  --tv-remote-w: 64px;

  --wide: "Archivo", "Arial Black", sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
}
.tab-tv { --btn: inherit; --on-btn: inherit; --hl: inherit; --on-hl: inherit; --hl-soft: inherit; --tv-bar-h: inherit; }

:root[data-theme="light"], :root[data-theme="light"] .tab-tv {
  /* White, not grey: the room, the set, the remote and the panels are all
     white, told apart by thin light edges; #f5f5f5 only where one layer must
     sit on another (the guide's shows on its grid). */
  --room: #ffffff;
  --set: #ffffff;
  --set-edge: #e6e6e6;
  --cell: #ffffff;
  --cell-line: #e6e6e6;
  --dim: #6b6b72;
  --on-room: #0e0e0e;
  --room-dim: rgba(14, 14, 14, 0.58);
  --room-text-2: rgba(14, 14, 14, 0.82);
  --scan: rgba(255, 255, 255, 0.025);
  --track: rgba(14, 14, 14, 0.1);
  --faint: rgba(14, 14, 14, 0.05);
  --set-shadow: rgba(0, 0, 0, 0.05);
  --key-bg: #ffffff;
  --key-edge: #e6e6e6;
  --drop-edge: #c8c8cc;
  --gch-bg: #ffffff;
  --gch-on-bg: #0e0e0e;
  --gch-on-fg: #ffffff;
  --show-bg: #f5f5f5;
  --show-on: #efefef;
  --show-time: #6b6b72;
  --show-hover: rgba(14, 14, 14, 0.3);
  --keys-text: #6b6b72;
  --next-text: #555555;
  --input-bg: #ffffff;
  --play-bg: #0e0e0e;
  --play-fg: #ffffff;
}
/* A thin edge where a white box sits on white. */
:root[data-theme="light"] .tv-info__main { box-shadow: inset 0 0 0 1.5px var(--set-edge); }

* { box-sizing: border-box; }

html:where(:not(.ws-on)), .ws-body.tab-tv, body:where(html:not(.ws-on) *) {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--wide);
  -webkit-font-smoothing: antialiased;
}

body:where(html:not(.ws-on) *), .ws-body.tab-tv {
  display: flex;
  flex-direction: column;
  min-height: var(--pane-h, 100vh);
  overflow-x: hidden;
}

:where(html:not(.ws-on), .tab-tv) button, :where(html:not(.ws-on), .tab-tv) input { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- header */

.tv-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--pad);
  background: var(--paper);
  position: relative;
  z-index: 20;
}
/* Dark mode: the top bar joins the room instead of staying a white strip.
   The pills and the name read off --ink/--line/--white, so flipping those
   here inverts them (MENU becomes a white pill); the menu card itself keeps
   the page palette. */
:root:not([data-theme="light"]) .tv-bar {
  --paper: var(--room);
  --ink: #f4f4f5;
  --line: #f4f4f5;
  --white: #0b0b0c;
  background: var(--room);
  border-bottom: 1.5px solid var(--cell-line);
  color: #f4f4f5;
}
:root:not([data-theme="light"]) .tv-bar .tv-menu {
  --paper: #ffffff;
  --ink: #0e0e0e;
  --line: #0e0e0e;
  --white: #ffffff;
  color: #0e0e0e;
}

.tv-id {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 30px;
  background: var(--white);
  border: 2px solid var(--ink);
  cursor: pointer;
  user-select: none;
  min-width: 0;
}
.tv-id__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--paper-2);
}
.tv-id__name { font-size: 15px; font-weight: 800; font-stretch: 112%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-id__word { font-size: 15px; font-weight: 500; white-space: nowrap; }
.tv-id__check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.tv-bar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tv-bar .tv-id { flex: 0 0 auto; }
/* In the header the identity pill matches the chips and buttons beside it:
   40px tall, a 28px avatar inside, the same name size. */
.tv-bar .tv-id { box-sizing: border-box; height: 40px; padding: 0 16px 0 4px; gap: 8px; }
.tv-bar .tv-id__avatar { width: 28px; height: 28px; }
.tv-bar .tv-id__name,
.tv-bar .tv-id__word { font-size: 15px; }

.tv-pill {
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--wide);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.tv-pill { transition: opacity 0.12s ease, transform 0.12s ease; }
.tv-pill:not(:disabled):hover { opacity: 0.86; }
.tv-pill:not(:disabled):active { transform: scale(0.97); }
.tv-pill:disabled { opacity: 0.5; cursor: default; }
.tv-pill--ink { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tv-pill--hot { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.tv-pill--line { background: transparent; }
.tv-pill--line[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.tv-pill--sm { height: 36px; padding: 0 16px; font-size: 12px; }

/* MENU: the design's dropdown card -- who this is, sign in, the numbered
   spaces, and the viewer at the foot. */
.tv-menu-wrap { position: relative; }
.tv-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 70;
  width: 300px;
  padding: 8px;
  border-radius: 22px;
  border: 2px solid var(--ink);
  background: var(--white);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tv-menu__app { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid #ececec; margin-bottom: 8px; }
.tv-menu__app img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
.tv-menu__app b { display: block; font-size: 15px; font-weight: 800; }
.tv-menu__app small { display: block; font-family: var(--mono); font-size: 11px; color: #777; }
.tv-menu__sign {
  height: 46px;
  margin-bottom: 8px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.tv-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 800;
}
.tv-menu a small { font-family: var(--mono); font-size: 11px; font-weight: 400; color: #8a8a8a; width: 18px; }
.tv-menu a:hover { background: var(--paper-2); }
.tv-menu a[aria-current="page"] { background: var(--ink); color: var(--white); }
.tv-menu a[aria-current="page"] small { color: #9a9a9a; }
.tv-menu a[aria-current="page"]::after { content: "\25CF"; margin-left: auto; font-size: 8px; color: #8a8a8a; }
.tv-menu__who {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin-top: 6px;
  padding: 10px 10px 0;
  border-top: 1px solid #ececec;
  font-size: 15px;
  font-weight: 800;
}
.tv-menu__theme {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  margin-top: 6px;
  padding: 0 14px;
  border: 0;
  border-top: 1px solid #ececec;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.tv-menu__theme span { width: 18px; font-size: 15px; }
.tv-menu__theme:hover { background: var(--paper-2); }
.tv-menu__who img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
.tv-menu__who.is-link { color: var(--ink); text-decoration: none; cursor: pointer; border-radius: 12px; padding-bottom: 10px; height: 54px; }
.tv-menu__who.is-link:hover { background: var(--paper-2); }
.tv-menu__who.is-link[aria-current="page"] { background: var(--ink); color: var(--white); }

/* ------------------------------------------------------------------ room */

.tv-room {
  flex: 1 0 auto;
  background: var(--room);
  color: var(--on-room);
  padding: 0 var(--pad) 34px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  /* The owner's highlight, unless it is plain black -- that would disappear
     against the room. app-colors.js leaves --hl at #000000 when unset. */
  --room-hl: var(--hl);
  --room-on-hl: var(--on-hl);
}
.tv-room.is-seasons { background: var(--room); color: var(--on-room); padding-top: 12px; }
.tv-room.is-seasons .tv-row,
.tv-room.is-seasons .tv-guide,
.tv-room.is-seasons .tv-about { display: none; }

/* Channel chips across the top of the room: white with a thin edge in the
   light theme, dark in the dark one, and the channel on air inverted. */
.tv-chips {
  /* In the top bar, between the name and the buttons: the flexible middle,
     one line, sideways scroll, fading at the edges when it overflows. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.tv-chips::-webkit-scrollbar { display: none; }
/* Hidden on the channel wall, but it keeps its row height so the bar's pills
   don't hop 2px when the view flips. */
.tv-chips[hidden] { display: flex; visibility: hidden; }
.tv-chips > :first-child { margin-left: 10px; }
.tv-chips > :last-child { margin-right: 10px; }
.tv-chip {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 21px;
  border: 1.5px solid var(--key-edge);
  background: var(--key-bg);
  color: var(--on-room);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.tv-chip:hover { border-color: var(--on-room); }
.tv-chip[aria-current="true"] { background: var(--on-room); border-color: var(--on-room); color: var(--room); }
.tv-chip__name { font-size: 15px; font-weight: 900; white-space: nowrap; }
.tv-chip__bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.tv-chip__bars span { width: 3px; border-radius: 1px; background: currentColor; }
.tv-chip__n { font-family: var(--mono); font-size: 11px; opacity: 0.7; white-space: nowrap; }

.tv-row {
  /* The picture box runs gutter to gutter -- the bar's own side padding, so
     the pill, the picture and the LIVE badge share one left line and MENU,
     the remote and the clock one right line. */
  display: block;
  position: relative;  /* the comments panel and the remote dock to this row */
  container-type: inline-size;
  /* 16:9 of that width, unless the window is too short for it with the info
     strip -- then the box keeps its width and the picture is letterboxed
     inside it on the room's colour. */
  --pic-h: min(calc(100cqw * 9 / 16), calc(var(--pane-h, 100vh) - var(--tv-bar-h) - var(--tv-under-h)));
}

/* ------------------------------------------------------------------- set */

.tv-set {
  position: relative;
  isolation: isolate;
  min-width: 0;
  /* No frame: the picture sits straight on the room. */
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.tv-screen-wrap {
  position: relative;
  width: 100%;
  height: var(--pic-h);
  border-radius: 0;
  overflow: hidden;
  background: var(--room);
}
.tv-screen-wrap.is-drop { box-shadow: inset 0 0 0 4px var(--room-hl); }

.tv-screen { position: absolute; inset: 0; z-index: 0; }
.tv-screen > video,
.tv-screen > iframe,
.tv-screen > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #000;
}
/* The letterbox is the screen's own black -- no blurred fill behind a clip. */
.tv-screen iframe { pointer-events: auto; }
.tv-screen .is-fit { right: auto; bottom: auto; }

/* Photos: sized to their own shape, with a slow Ken Burns push over the slot.
   --kb-delay starts the push where the channel is when tuned in live. */
.tv-slide { position: absolute; inset: 0; overflow: hidden; background: #000; }
.tv-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  animation: tv-kenburns 8s linear both;
  animation-delay: var(--kb-delay, 0s);
  transform-origin: 60% 40%;
}
.tv-slide.is-paused img { animation-play-state: paused; }
.tv-slide.is-broken { background: #111; }
@keyframes tv-kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }

/* Links take the whole screen: a live frame (the site, or its own embed page),
   or a full-screen title card -- the page's picture filling the screen under a
   soft gradient, or its icon blown up into a blurred colour field. */
.tv-link { position: absolute; inset: 0; overflow: hidden; background: #0b0b0c; color: #ffffff; }
.tv-link__bg { position: absolute; inset: 0; }
.tv-link__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-link__field { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: cover; filter: blur(60px) saturate(1.6) brightness(0.7); }
.tv-link__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.15) 100%);
}
.tv-link.is-field .tv-link__shade { background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 100%); }
.tv-link__body {
  position: absolute;
  left: 6%;
  right: max(6%, calc(var(--tv-remote-w) + 24px));
  bottom: 8%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 1000px;
}
.tv-link__site { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.tv-link__site img { width: 24px; height: 24px; border-radius: 6px; background: #fff; }
.tv-link__title {
  font-size: clamp(34px, calc(5 * var(--pane-w, 100vw) / 100), 72px);
  font-weight: 900;
  font-stretch: 118%;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.tv-link__desc { max-width: 760px; font-family: Inter, system-ui, sans-serif; font-size: clamp(15px, calc(1.3 * var(--pane-w, 100vw) / 100), 19px); line-height: 1.45; color: rgba(255, 255, 255, 0.86); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tv-link__desc:empty { display: none; }
.tv-link__open {
  align-self: flex-start;
  height: 46px;
  padding: 0 22px;
  border-radius: 23px;
  background: var(--btn);
  color: var(--on-btn);
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
}
/* The live frame covers the title card completely once it is up. */
.tv-link__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #ffffff; z-index: 2; }
/* Platform embeds sit in a centered column over their blurred picture. */
.tv-link__frame.is-embed { left: 50%; right: auto; transform: translateX(-50%); background: transparent; }
.tv-link.has-embed .tv-link__img { filter: blur(40px) brightness(0.55); transform: scale(1.15); }
.tv-link.has-embed .tv-link__body { display: none; }
.tv-openchip {
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--btn);
  color: var(--on-btn);
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
}
.tv-openchip[hidden] { display: none; }
:root[data-theme="light"] .tv-link { border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16); }

/* Audio: the cover art, breathing while it plays. */
.tv-audio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tv-audio__cover {
  height: 64%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.25);
  animation: tv-audio-pulse 2.4s ease-in-out infinite;
}
.tv-audio.is-paused .tv-audio__cover { animation-play-state: paused; }
@keyframes tv-audio-pulse { 50% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.06); transform: scale(1.015); } }
.tv-audio audio { display: none; }
:root[data-theme="light"] .tv-slide { background: transparent; border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16); }
:root[data-theme="light"] .tv-audio__cover { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); }


/* Light theme: no black box. The picture sits on white at its own shape --
   a file as a rounded card sized by fitMedia(), YouTube (which draws its own
   bars inside the frame) held to 16:9 and centred, SoundCloud filling the
   area. The static and the empty state still draw over it. */
:root[data-theme="light"] .tv-screen-wrap { background: transparent; overflow: visible; }
:root[data-theme="light"] .tv-scan { display: none; }
:root[data-theme="light"] .tv-screen > video,
:root[data-theme="light"] .tv-screen > img { border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16); }
:root[data-theme="light"] .tv-screen iframe { border-radius: 18px; }
:root[data-theme="light"] .tv-screen > video:not(.is-fit) { background: transparent; box-shadow: none; }
:root[data-theme="light"] .tv-flip { border-radius: 18px; }
:root[data-theme="light"] .tv-screen iframe[src*="youtube"] {
  left: 50%;
  right: auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16);
}
:root[data-theme="light"] .tv-empty { color: var(--room-dim); background: var(--show-bg); border-radius: 18px; }
/* Full screen is the dark room in both themes. */
:root[data-theme="light"] .tv-set:fullscreen .tv-screen-wrap { background: #000; }
:root[data-theme="light"] .tv-set:fullscreen .tv-screen video,
:root[data-theme="light"] .tv-set:fullscreen .tv-screen img,
:root[data-theme="light"] .tv-set:fullscreen .tv-screen iframe { border-radius: 0; box-shadow: none; }

/* CRT lines and a vignette over the picture, as the design draws them. */
.tv-scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.55);
}
.tv-screen-wrap.is-embed .tv-scan { display: none; }

/* Changing channel: a burst of static and the channel number, big. */
.tv-flip {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-color: #777;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, #000 1px 2px, #9a9a9a 2px 3px),
    repeating-linear-gradient(0deg, var(--set-shadow) 0 2px, rgba(255, 255, 255, 0.15) 2px 4px);
  background-size: 7px 5px, 100% 4px;
  animation: tv-static 0.55s steps(6) forwards;
}
@keyframes tv-static { 0% { opacity: 1; background-position: 0 0, 0 0; } 100% { opacity: 0; background-position: 40px 60px, 0 12px; } }
.tv-osd {
  /* Top-left, as a set shows it -- the remote owns the right edge -- and
     sized to the picture, not the window, so it never clips. */
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 6;
  pointer-events: none;
  font-family: var(--mono);
  font-size: clamp(36px, 6cqw, 84px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--room-hl);
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(0, 0, 0, 0.6);
  animation: tv-osd 2.2s forwards;
}
@keyframes tv-osd { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

.tv-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--room-dim);
  text-align: center;
  padding: 24px;
}
.tv-empty__line { margin: 0; font-family: Inter, system-ui, sans-serif; font-size: 14px; }
.tv-empty__browse { cursor: pointer; font-size: 13px; }
.tv-empty__link { color: var(--room-dim); font-size: 13px; }

/* The info bar, on the set's frame under the picture: a TV keeps its info on
   the frame, and an embedded player keeps its own controls on the picture.
   The progress line runs along the bar's top edge. */
.tv-bezel { padding: 8px 0 10px; }
.tv-progress {
  position: relative;
  height: 3px;
  margin: 0 4px 8px;
  border-radius: 2px;
  background: var(--track);
  cursor: pointer;
}
.tv-progress::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.tv-progress__bar { height: 100%; width: 0; border-radius: 2px; background: var(--room-hl); }

/* One row: the title card takes the room, channel and clock sit flush right. */
.tv-info { display: flex; align-items: stretch; gap: 12px; min-width: 0; height: 60px; }
.tv-info__cap { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; }
.tv-info__now {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: var(--room-hl);
  color: var(--room-on-hl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-family: var(--mono);
  font-weight: 700;
  border-radius: 10px 0 0 10px;
}
.tv-info__now span:first-child { font-size: 10px; letter-spacing: 0.16em; white-space: nowrap; }
.tv-info__now span:last-child { font-size: 13px; white-space: nowrap; }
.tv-info__main { flex: 1; min-width: 0; padding: 8px 16px; display: flex; flex-direction: column; justify-content: center; background: var(--white); color: var(--ink); border-radius: 0 10px 10px 0; }
.tv-info__title {
  font-size: clamp(18px, calc(2 * var(--pane-w, 100vw) / 100), 26px);
  font-weight: 900;
  font-stretch: 115%;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-info__next {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--next-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.tv-info__chan { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; max-width: 220px; min-width: 0; }
.tv-info__num { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.tv-info__words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tv-info__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--dim); }
.tv-info__name {
  font-size: 14px;
  font-weight: 900;
  font-stretch: 115%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-info__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; }
.tv-clock { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.tv-backlive {
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  border: 0;
  background: var(--room-hl);
  color: var(--room-on-hl);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  cursor: pointer;
}
.tv-bezel__power { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--room-dim); }
.tv-led { width: 6px; height: 6px; border-radius: 50%; background: #f5c46b; }
.tv-led.is-on { background: var(--room-hl); box-shadow: 0 0 8px var(--room-hl); }

/* Full-screen furniture, hidden until the set goes full screen. */
.tv-info__fs,
.tv-fschips,
.tv-fskeys { display: none; }

/* ---------------------------------------------------------------- remote */

.tv-remote {
  /* A slim glass column over the picture's right edge, as tall as the
     picture. The room's key colours are swapped for white-on-glass here,
     whichever theme the page is in. */
  position: absolute;
  top: 0;
  right: 0;
  height: var(--pic-h);
  width: var(--tv-remote-w);
  z-index: 5;
  padding: 10px 7px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, calc(1.2 * var(--pane-h, 100vh) / 100), 12px);
  /* Centred when it fits; when the picture is shorter than the keys (a
     split pane), it scrolls instead of cutting keys off at both ends. */
  justify-content: safe center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  --on-room: #ffffff;
  --key-bg: transparent;
  --key-edge: rgba(255, 255, 255, 0.18);
  --dim: rgba(255, 255, 255, 0.6);
  --room: rgba(255, 255, 255, 0.08);
  --play-bg: #ffffff;
  --play-fg: #0b0b0c;
  --faint: rgba(255, 255, 255, 0.12);
  color: #fff;
  /* Fades like full-screen chrome: all there on a move or a hover, down to
     a hint after 3 s of rest, never gone. */
  transition: opacity 0.35s ease;
}
.tv-row.is-rest .tv-remote:not(:hover):not(:focus-within) { opacity: 0.35; }
.tv-remote::-webkit-scrollbar { display: none; }
/* Light: a clean white column with a hairline edge and dark keys, always
   fully legible -- no glass, no fade. */
:root[data-theme="light"] .tv-remote {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: inset 1px 0 0 #e6e6e6;
  color: #0e0e0e;
  --on-room: #0e0e0e;
  --key-bg: #ffffff;
  --key-edge: #e6e6e6;
  --dim: #6b6b6b;
  --room: #f4f4f4;
  --play-bg: #0e0e0e;
  --play-fg: #ffffff;
  --faint: rgba(0, 0, 0, 0.06);
}
:root[data-theme="light"] .tv-row.is-rest .tv-remote { opacity: 1; }
/* An embed's own controls are never under the remote: a player drawn by
   YouTube, SoundCloud or a site steps in from the right by the remote's
   width, and the remote sits on black beside it. */
.tv-screen-wrap:has(.tv-screen iframe) .tv-screen { right: var(--tv-remote-w); }
.tv-remote__play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--play-bg);
  color: var(--play-fg);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.tv-rocker {
  width: 100%;
  border-radius: 18px;
  background: var(--room);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
}
.tv-rocker button { width: 100%; height: 30px; border: 0; background: transparent; color: var(--on-room); font-size: 14px; cursor: pointer; }
.tv-rocker__label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--dim); }
.tv-rocker__num { font-family: var(--mono); font-size: 20px; font-weight: 700; }

/* Views: a readout on the remote, not a button. */
.tv-key--views { cursor: default; }
.tv-key--views .tv-key__big { display: block; font-size: 17px; font-weight: 800; line-height: 1; }
.tv-key {
  width: 100%;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1.5px solid var(--key-edge);
  background: var(--key-bg);
  color: var(--on-room);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-family: var(--wide);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.tv-key:hover { border-color: var(--on-room); }
/* +1 and comments: a solid mark with its +N badge on the shoulder, as the
   phone's Community draws them. No badge at zero. */
.tv-key--tap { height: 52px; }
.tv-tap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; border-radius: 20px; transition: background 0.16s ease; }
.tv-tap__icon { font-size: 22px; color: var(--on-room); opacity: 1; transition: color 0.16s ease, opacity 0.16s ease; }
.tv-tap__n {
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: 4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  /* Explicit colours: the dark remote's keys are transparent, so borrowing
     --key-bg left the number see-through and grey. */
  border: 2px solid #0b0b0c;
  background: #ffffff;
  color: #0b0b0c;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tv-tap__n[hidden] { display: none; }
/* Light: the badge flips to black with a white rim, as on the phone. */
:root[data-theme="light"] .tv-tap__n { border-color: #ffffff; background: #0b0b0c; color: #ffffff; }
.tv-key.tv-key--tap.is-on { background: var(--key-bg); border-color: var(--key-edge); color: var(--on-room); }
.tv-key--tap.is-on .tv-tap { background: var(--hl-soft); }
.tv-key--tap.is-on .tv-tap__icon { color: var(--hl); opacity: 1; }
.tv-key:disabled { opacity: 0.4; cursor: default; }
.tv-key:disabled:hover { border-color: var(--key-edge); }
.tv-key__big { font-size: 18px; font-weight: 900; font-stretch: 125%; line-height: 1; }
.tv-key__n { font-family: var(--mono); font-size: 10px; letter-spacing: 0; font-weight: 400; }
.tv-key.is-on { background: var(--room-hl); border-color: var(--room-hl); color: var(--room-on-hl); }
/* Sound: the speaker, struck through while muted -- and breathing gently then,
   which is the set's "tap for sound". */
.tv-key--sound { height: 44px; }
.tv-key--sound.is-muted,
#tv-fs-sound.is-muted { animation: tv-breathe 2.2s ease-in-out infinite; }
#tv-fs-sound[hidden] { display: none; }
@keyframes tv-breathe { 0%, 100% { border-color: var(--key-edge); box-shadow: none; } 50% { border-color: var(--on-room); box-shadow: 0 0 0 4px var(--faint); } }
.tv-key.is-pop { animation: tv-pop 0.32s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes tv-pop { 40% { transform: scale(1.08) rotate(-3deg); } }

/* ----------------------------------------------------------------- guide */

/* The caption in full, between the set and the guide. */
.tv-about { max-width: 1360px; width: 100%; margin: 26px auto 34px; color: var(--on-room); }
.tv-about[hidden] { display: none; }
.tv-about__meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--room-dim); }
.tv-about__title {
  margin: 8px 0 0;
  font-family: var(--wide);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(26px, calc(3 * var(--pane-w, 100vw) / 100), 42px);
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.tv-about__text {
  margin: 12px 0 0;
  max-width: 900px;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--room-text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tv-about__text[hidden] { display: none; }
.tv-about__text.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tv-about__more {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--room-dim);
  cursor: pointer;
}
.tv-about__more:hover { color: var(--on-room); }
.tv-about__more[hidden] { display: none; }
.tv-guide { max-width: 1360px; width: 100%; margin: 0 auto; }
.tv-guide__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tv-guide__title { display: flex; align-items: baseline; gap: 14px; }
.tv-guide__title > span:first-child { font-size: 30px; font-weight: 900; font-stretch: 125%; letter-spacing: -0.04em; }
.tv-guide__sub { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--dim); }
.tv-guide__drop {
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1.5px dashed var(--drop-edge);
  background: transparent;
  color: var(--on-room);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.tv-guide__drop:hover { border-color: var(--on-room); }

.tv-grid {
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--cell-line);
  background: var(--cell);
}
.tv-grid__names { flex: 0 0 250px; width: 250px; border-right: 1.5px solid var(--cell-line); }
.tv-grid__day {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1.5px solid var(--cell-line);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--dim);
}
.tv-gch {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1.5px solid var(--cell-line);
  background: var(--gch-bg);
  color: var(--on-room);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
}
.tv-gch.is-on { background: var(--gch-on-bg); color: var(--gch-on-fg); }
.tv-gch--live { background: #dc2626; color: var(--on-room); }
.tv-gch__num { font-family: var(--mono); font-size: 18px; font-weight: 700; flex: 0 0 auto; }
.tv-gch__thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--faint);
}
.tv-gch__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-gch__words { min-width: 0; }
.tv-gch__name { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-gch__sub { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; opacity: 0.8; }

.tv-grid__scroll { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--key-edge) transparent; }
.tv-grid__track { position: relative; }
.tv-grid__ticks { position: relative; height: 34px; border-bottom: 1.5px solid var(--cell-line); }
.tv-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding-left: 8px;
  border-left: 1px solid var(--set-edge);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
}
.tv-grow { position: relative; height: 100px; border-bottom: 1.5px solid var(--cell-line); }
.tv-show {
  position: absolute;
  z-index: 1;
  top: 3px;
  bottom: 3px;
  overflow: hidden;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 0;
  background: var(--show-bg);
  color: var(--on-room);
  cursor: pointer;
}
.tv-grow.is-on .tv-show { background: var(--show-on); }
.tv-show:hover { box-shadow: inset 0 0 0 1.5px var(--show-hover); }
.tv-grow .tv-show.is-now { background: var(--room-hl); color: var(--room-on-hl); }
.tv-show--live { background: linear-gradient(90deg, #dc2626 0%, #7f1d1d 100%); }
.tv-show__time { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--show-time); white-space: nowrap; }
.tv-show.is-now .tv-show__time,
.tv-show--live .tv-show__time { color: inherit; }
.tv-show__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 5px; font-size: 15px; font-weight: 700; line-height: 1.25; overflow: hidden; overflow-wrap: anywhere; }
/* A block with a still: the picture on the left, time and title beside it. */
.tv-show.has-thumb { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; }
.tv-show__thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--faint);
}
.tv-show__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-show__words { display: block; min-width: 0; flex: 1 1 auto; }
.tv-nowline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 0;
  pointer-events: none;
  background: var(--room-hl);
  box-shadow: 0 0 12px var(--room-hl);
}
.tv-nowline span {
  position: absolute;
  top: 8px;
  left: -18px;
  z-index: 4;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--room-hl);
  color: var(--room-on-hl);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.tv-show__from { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--show-time); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-show.is-now .tv-show__from { color: inherit; opacity: 0.8; }
.tv-wall__drop {
  align-self: flex-start;
  margin-top: 8px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 17px;
  background: var(--btn);
  color: var(--on-btn);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.tv-guide__close {
  height: 38px;
  padding: 0 16px;
  border-radius: 19px;
  border: 1.5px solid var(--drop-edge);
  background: transparent;
  color: var(--on-room);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.tv-guide__close:hover { border-color: var(--on-room); }
.tv-guide { animation: tv-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes tv-rise { from { opacity: 0; transform: translateY(10px); } }

/* v3: the channel's bytes as a searchable grid under the set. */
.tv-bytes { max-width: 1360px; width: 100%; margin: 12px auto 0; display: flex; flex-direction: column; gap: 16px; }
.tv-room.is-seasons .tv-bytes { display: none; }
.tv-bytes__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-bytes__title { font-size: 28px; font-weight: 900; font-stretch: 125%; letter-spacing: -0.03em; margin-right: 6px; text-transform: uppercase; }
.tv-bytes__q {
  flex: 1 1 220px;
  max-width: 360px;
  min-width: 0;
  height: 44px;
  border-radius: 22px;
  border: 1.5px solid var(--key-edge);
  background: var(--input-bg);
  color: var(--on-room);
  padding: 0 18px;
  font-size: 15px;
  outline: none;
}
.tv-bytes__q:focus { border-color: var(--on-room); }
.tv-bytes__count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--dim); }
/* Four big landscape tiles a row (three at 1280, two narrow), so each byte
   reads at a glance. */
.tv-bytes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.tv-bytes__empty { margin: 0; padding: 40px 0; text-align: center; color: var(--dim); font-size: 16px; }
.tv-bytes__empty[hidden] { display: none; }
.tv-bytes__kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.tv-bytes__kind {
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1.5px solid var(--key-edge);
  background: var(--key-bg);
  color: var(--on-room);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.tv-bytes__kn { font-family: var(--mono); font-size: 11px; font-weight: 500; opacity: 0.6; }
.tv-bytes__kind[aria-pressed="true"] { background: var(--on-room); color: var(--room); border-color: var(--on-room); }
.tv-bytes__more {
  align-self: center;
  height: 44px;
  padding: 0 26px;
  border-radius: 22px;
  border: 1.5px solid var(--key-edge);
  background: var(--key-bg);
  color: var(--on-room);
  font-family: var(--wide);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tv-bytes__more[hidden] { display: none; }
.tv-bcard { display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; background: transparent; color: var(--on-room); text-align: left; cursor: pointer; min-width: 0; font-family: inherit; }
.tv-bcard:hover .tv-bcard__tile img { transform: scale(1.04); }
.tv-bcard:hover .tv-bcard__tile img.is-yt43 { transform: scale(1.38); }
.tv-bcard__tile { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--show-bg); box-shadow: inset 0 0 0 1px var(--cell-line); }
.tv-bcard__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.3s ease; }
/* A portrait poster keeps faces: crop around the upper third. */
.tv-bcard__tile img.is-tall { object-position: center 33%; }
.tv-bcard__tile img.is-yt43 { transform: scale(1.34); }
.tv-bcard.is-now .tv-bcard__tile { box-shadow: 0 0 0 3px var(--room-hl); }
/* No picture at all: the kind's icon and name on a soft panel. */
.tv-bcard__kindtile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--key-bg); color: var(--on-room); font-size: 15px; font-weight: 800; }
.tv-bcard__kindtile svg { width: 40px; height: 40px; opacity: 0.8; }
.tv-bcard__badge,
.tv-bcard__dur { position: absolute; z-index: 1; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.72); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }
.tv-bcard__badge { top: 10px; left: 10px; }
.tv-bcard__badge.is-now { background: var(--room-hl); color: var(--room-on-hl); }
.tv-bcard__dur { bottom: 10px; right: 10px; letter-spacing: 0.02em; }
.tv-bcard__words { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tv-bcard__title { font-size: 16px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tv-bcard__meta { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v3: up next, in the corner for a file's last five seconds. */
.tv-upcard {
  position: absolute;
  /* Clear of the remote over the picture's right edge. */
  right: calc(var(--tv-remote-w) + 16px);
  bottom: 20px;
  z-index: 4;
  width: min(300px, 50%);
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(11, 11, 12, 0.92);
  color: #ffffff;
  box-shadow: inset 0 0 0 1.5px #2a2a2e;
  animation: tv-rise 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tv-upcard[hidden] { display: none; }
.tv-upcard__thumb { width: 54px; height: 68px; border-radius: 8px; overflow: hidden; background: #1a1a1a; flex-shrink: 0; }
.tv-upcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-upcard__words { flex: 1; min-width: 0; }
.tv-upcard__label { display: block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.7); }
.tv-upcard__title { display: block; margin-top: 3px; font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-upcard__track { display: block; margin-top: 6px; height: 3px; border-radius: 2px; background: #2a2a2e; overflow: hidden; }
.tv-upcard__bar { display: block; height: 100%; width: 0; background: #ffffff; transition: width 1s linear; }
.tv-upcard__play { height: 34px; padding: 0 10px; border-radius: 8px; border: 0; background: #ffffff; color: #0e0e0e; font-family: var(--mono); font-size: 11px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.tv-key.is-on { background: var(--room-hl); border-color: var(--room-hl); color: var(--room-on-hl); }

.tv-keys { margin: 12px 0 0; font-family: var(--mono); font-size: 11px; color: var(--keys-text); }

/* ---------------------------------------------------- all channels (room) */

.tv-seasons { max-width: 1224px; width: 100%; margin: 0 auto; }
.tv-sea {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 4px;
  border: 0;
  border-top: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tv-sea:hover .tv-sea__name { opacity: 0.8; }
.tv-sea.is-on .tv-sea__num { background: var(--ink); color: var(--on-room); }
.tv-sea__num { flex: 0 0 64px; font-family: var(--mono); font-size: 13px; font-weight: 700; padding: 4px 6px; border-radius: 6px; text-align: center; }
.tv-sea__name {
  flex: 1;
  min-width: 0;
  font-size: clamp(40px, calc(5.2 * var(--pane-w, 100vw) / 100), 72px);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.tv-sea__thumbs { display: flex; gap: 6px; flex: 0 0 auto; }
.tv-sea__thumbs span { width: 48px; height: 60px; border-radius: 10px; overflow: hidden; background: var(--key-bg); }
.tv-sea__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-sea__meta { flex: 0 0 150px; font-family: var(--mono); font-size: 12px; color: var(--dim); text-align: right; line-height: 1.5; }

/* ------------------------------------------------------------ full screen */

/* The set itself goes full screen: the picture takes the screen above, the
   info bar sits under it -- never on the picture -- and fades away while the
   mouse rests, leaving just the byte. */
.tv-set:fullscreen {
  padding: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
/* Full screen is always the dark room, whichever theme the page is in. */
.tv-set:fullscreen {
  --on-room: #ffffff;
  --room-dim: rgba(255, 255, 255, 0.55);
  --track: rgba(255, 255, 255, 0.12);
  --dim: #8a8a90;
  color: #ffffff;
}
.tv-set:fullscreen .tv-screen-wrap { flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: auto; border-radius: 0; background: #000; }
.tv-set:fullscreen .tv-bezel { flex: 0 0 auto; padding: 12px 32px 14px; background: #000; transition: opacity 0.35s ease; }
.tv-set:fullscreen .tv-info__fs { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tv-set:fullscreen .tv-fskeys { display: block; margin: 10px 0 0; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.tv-set:fullscreen .tv-fschips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; }
.tv-set:fullscreen .tv-fschips[hidden] { display: none; }
.tv-set.is-idle:fullscreen { cursor: none; }
.tv-set.is-idle:fullscreen .tv-bezel { opacity: 0; pointer-events: none; }

.tv-fsbtn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-size: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tv-fsbtn--play { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--white); color: var(--ink); }
.tv-fsbtn--guide { width: auto; padding: 0 18px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; }
.tv-fsbtn--guide[aria-pressed="true"] { background: var(--room-hl); border-color: var(--room-hl); color: var(--room-on-hl); }
.tv-fschip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-size: 12px;
  font-weight: 900;
  font-stretch: 115%;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.tv-fschip small { font-family: var(--mono); font-size: 11px; font-weight: 700; opacity: 0.7; }
.tv-fschip.is-on { border-color: var(--white); background: var(--white); color: var(--ink); }

/* ------------------------------------------------------------------ chat */

/* Comments slide in from the right, docked to the set: the same top, bottom
   and rounding as the TV frame, covering the remote side while open. The
   panel floats in the row instead of taking a column in it, so the set never
   resizes and the page never widens. */
.tv-chat {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(390px, 100%);
  z-index: 30;
  min-width: 0;
  border-radius: 30px;
  overflow: hidden;
  background: var(--set);
  box-shadow: inset 0 0 0 1.5px var(--set-edge), -24px 0 60px var(--set-shadow);
  color: var(--on-room);
  display: flex;
  flex-direction: column;
  animation: tv-slide 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes tv-slide { from { transform: translateX(40px); opacity: 0; } }
.tv-chat__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1.5px solid var(--cell-line);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tv-chat__x { border: 0; background: none; color: var(--on-room); font-size: 24px; line-height: 1; cursor: pointer; }
.tv-chat__list { flex: 1 1 auto; overflow-y: auto; padding: 8px 18px; }
.tv-chat__none { margin: 18px 0; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.tv-msg { display: flex; gap: 10px; padding: 10px 0; }
.tv-msg img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--key-edge); flex: 0 0 auto; }
.tv-msg__who { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.tv-msg__who b { color: var(--on-room); font-weight: 700; margin-right: 6px; }
.tv-msg__text { margin: 3px 0 0; font-family: Inter, system-ui, sans-serif; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.tv-chat__form { flex: 0 0 auto; display: flex; gap: 8px; padding: 12px 14px; border-top: 1.5px solid var(--cell-line); }
.tv-chat__form input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1.5px solid var(--key-edge);
  background: var(--input-bg);
  color: var(--on-room);
  outline: none;
}
.tv-chat__closed { flex: 0 0 auto; margin: 0; padding: 14px 18px; border-top: 1.5px solid var(--cell-line); font-size: 13px; color: var(--dim); }
.tv-chat__closed button { margin-left: 8px; }

/* -------------------------------------------------------------- overlays */

.tv-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.97);
  overflow-y: auto;
  animation: tv-fade 0.14s ease;
}
@keyframes tv-fade { from { opacity: 0; } }
.tv-overlay--center { display: flex; align-items: center; justify-content: center; padding: 24px; }
/* The members gate leaves the top bar usable (MENU, the bell, the name card),
   as the other pages' gates do. */
.tv-room:has(#tv-gate:not([hidden])) .tv-bar,
body:has(#tv-gate:not([hidden])) .tv-bar { z-index: 61; }
.tv-overlay__title {
  margin: 0;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 44px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.tv-gate,
.tv-login {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: stretch;
}
.tv-gate__line { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; line-height: 1.6; color: #55524c; }
.tv-gate__row { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.tv-login input {
  height: 56px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2.5px solid var(--line);
  background: var(--white);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  outline: none;
}
.tv-login__err { margin: 0; min-height: 18px; font-family: var(--mono); font-size: 12px; color: #d11; }

/* ------------------------------------------------------------------ hint */

.tv-hint {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 90;
  transform: translate(-50%, 6px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
.tv-hint.is-up { opacity: 1; transform: translate(-50%, 0); }


/* A class that sets display outranks the hidden attribute's UA display:none,
   so every element here that toggles with [hidden] is listed. */
.tv-pill[hidden],
.tv-id__check[hidden],
.tv-menu[hidden],
.tv-sound[hidden],
.tv-empty[hidden],
.tv-empty__browse[hidden],
.tv-chat[hidden],
.tv-chat__form[hidden],
.tv-chat__closed[hidden],
.tv-overlay[hidden],
.tv-flip[hidden],
.tv-osd[hidden],
.tv-info__cap[hidden],
.tv-key[hidden],
.tv-progress[hidden],
.tv-seasons[hidden],
.tv-guide__drop[hidden],
.tv-menu__sign[hidden],
.tv-backlive[hidden] { display: none; }

/* ------------------------------------------------------------- narrower */

/* 1280 and narrower: the bar stays one line, the buttons go to icons. */
@media (max-width: 1280px) {
  .tv-bytes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-bar { gap: 12px; }
  .tv-bar__actions .tv-pill { font-size: 0; padding: 0; width: 40px; letter-spacing: 0; gap: 0; justify-content: center; }
  .tv-bar__actions .tv-pill > * { display: none; }
  .tv-bar__actions .tv-pill::before { content: attr(data-short); font-size: 16px; line-height: 1; }
}
/* Split View: the same, for a narrow pane. */
@container pane (max-width: 1280px) {
  .tv-bytes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tv-bar { gap: 12px; }
  .tv-bar__actions .tv-pill { font-size: 0; padding: 0; width: 40px; letter-spacing: 0; gap: 0; justify-content: center; }
  .tv-bar__actions .tv-pill > * { display: none; }
  .tv-bar__actions .tv-pill::before { content: attr(data-short); font-size: 16px; line-height: 1; }
}

@media (max-width: 1100px) {
  :root, .tab-tv { --pad: 20px; }
  .tv-grid__names { flex-basis: 200px; width: 200px; }
  .tv-sea__meta { display: none; }
}
/* Split View: the same, for a narrow pane. */
@container pane (max-width: 1100px) {
  .tab-tv { --pad: 20px; }
  .tv-grid__names { flex-basis: 200px; width: 200px; }
  .tv-sea__meta { display: none; }
}

@media (max-width: 760px) {
  .tv-bar { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
  /* Actions stay top right beside the name; the channel chips take the
     next line full width (they were dropping under, on the left). */
  .tv-id { order: 1; }
  .tv-bar__actions { order: 2; margin-left: auto; }
  .tv-chips { order: 3; flex: 1 1 100%; min-width: 0; }
  .tv-row { flex-direction: column; max-width: 100%; }
  .tv-remote { position: static; width: auto; height: auto; flex-direction: row; overflow-x: auto; }
  .tv-remote > * { flex: 0 0 auto; width: auto; min-width: 64px; }
  .tv-key--full { margin-top: 0; }
  .tv-info { flex-wrap: wrap; height: auto; row-gap: 10px; }
  .tv-row { flex-wrap: wrap; }
  .tv-sea__thumbs { display: none; }
}
/* Split View: the same, for a narrow pane. */
@container pane (max-width: 760px) {
  .tv-bar { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
  /* Actions stay top right beside the name; the channel chips take the
     next line full width (they were dropping under, on the left). */
  .tv-id { order: 1; }
  .tv-bar__actions { order: 2; margin-left: auto; }
  .tv-chips { order: 3; flex: 1 1 100%; min-width: 0; }
  .tv-row { flex-direction: column; max-width: 100%; }
  .tv-remote { position: static; width: auto; height: auto; flex-direction: row; overflow-x: auto; }
  .tv-remote > * { flex: 0 0 auto; width: auto; min-width: 64px; }
  .tv-key--full { margin-top: 0; }
  .tv-info { flex-wrap: wrap; height: auto; row-gap: 10px; }
  .tv-row { flex-wrap: wrap; }
  .tv-sea__thumbs { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------- app card */

/* The pill opens the app card, so it reads as something to press. */
.tv-id { cursor: pointer; transition: box-shadow 0.15s ease; }
.tv-id:hover,
.tv-id[aria-expanded="true"] { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08); }
.tv-id:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The phone's identity hero, dropped under the pill: the photo, then the name,
   the role, the school and place, and the row of accounts and links. Dark,
   with white type, the way the hero sits over its photograph on the phone. */
.tv-hero {
  position: absolute;
  z-index: 60;
  width: 500px;
  max-width: calc(var(--pane-w, 100vw) - 24px);
  border-radius: 26px;
  overflow: hidden;
  background: #0b0b0f;
  color: var(--white);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  animation: tv-hero-in 0.16s ease;
}
@keyframes tv-hero-in { from { opacity: 0; transform: translateY(-6px); } }
.tv-hero[hidden] { display: none; }

.tv-hero__photo {
  position: relative;
  height: 300px;
  background: #16161c;
}
.tv-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The photograph fades into the card so the name can start on it. */
.tv-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 11, 15, 0) 45%, rgba(11, 11, 15, 0.85) 85%, #0b0b0f 100%);
}

.tv-hero__x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--white);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.tv-hero__x:hover { transform: scale(1.06); }

.tv-hero__caption {
  position: relative;
  z-index: 1;
  margin-top: -64px;
  padding: 0 28px 28px;
}
.tv-hero__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wide);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 42px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 0;
}
/* The phone's verified green. */
.tv-hero__verified { color: #24c26a; font-size: 0.6em; flex: 0 0 auto; }
.tv-hero__role {
  margin-top: 12px;
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
}
.tv-hero__org {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.86);
}
.tv-hero__place { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.7); }
.tv-hero__place i { font-size: 13px; }

/* The link row: the phone's white tiles, its brand marks in their own colours,
   and the sites' favicons a size up, as the phone draws them. */
.tv-hero__links {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.tv-hero__social,
.tv-hero__site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  color: #16161c;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.tv-hero__social:hover,
.tv-hero__site:hover { transform: translateY(-2px); }
/* One size for every tile in the row, social or site. */
.tv-hero__social,
.tv-hero__site { width: 50px; height: 50px; border-radius: 15px; }
.tv-hero__mark { display: flex; }
.tv-hero__mark svg { width: 27px; height: 27px; display: block; }
.tv-hero__mark[data-platform="instagram"] { color: #d62976; }
.tv-hero__mark[data-platform="facebook"] { color: #2f6bff; }
.tv-hero__mark[data-platform="youtube"] { color: #ff3428; --platform-badge-bg: #16161c; }
.tv-hero__mark[data-platform="x"],
.tv-hero__mark[data-platform="tiktok"] { color: #0b0b0f; }

/* A letter until the site's own icon loads over it. */
.tv-hero__fav {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
}
.tv-hero__fav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tv-hero__fav.has-icon { color: transparent; }

/* Narrow: two tiles a row. */
@media (max-width: 760px) {
  .tv-bytes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}
/* Split View: the same, for a narrow pane. */
@container pane (max-width: 760px) {
  .tv-bytes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}

/* A byte whose media is gone: said plainly on a quiet screen, never the
   provider's own error page. */
.tv-gone { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #0b0b0c; color: #fff; text-align: center; border-radius: inherit; }
.tv-gone__title { font-size: clamp(20px, calc(2.2 * var(--pane-w, 100vw) / 100), 30px); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; }
.tv-gone__sub { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* The notice centres on the part of the picture the remote leaves clear. */
.tv-gone { padding-right: var(--tv-remote-w); }
/* Full screen has no remote over the picture, so nothing steps aside there. */
.tv-set:fullscreen .tv-upcard { right: 20px; }
.tv-set:fullscreen .tv-link__body { right: 6%; }
.tv-set:fullscreen .tv-gone { padding-right: 0; }

.tv-seasons__made { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--key-edge); font-size: 15px; font-weight: 600; }
.tv-seasons__made .tv-wall__drop { margin-top: 0; }
.tv-seasons__dismiss { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 16px; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
/* ---------------------------------------------------------- control room */

/* All channels: every channel as a monitor on the room. The tiles are the
   set's own surface (--set on --room, a --set-edge rim), so the light, dark
   and page-colour palettes all carry through; the screens are pictures and
   stay black. Where the design used its teal, this uses the room's
   highlight and the app's button colour. */
.tv-cr { max-width: 1360px; }
.tv-cr__head {
  /* One line: what is on air on the left, what a tap does on the right;
     it wraps only when the pane is too narrow for both. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 18px 0 22px;
}
.tv-cr__kicker { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--room-dim); }
.tv-cr__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--room-hl); box-shadow: 0 0 8px var(--room-hl); animation: tv-cr-pulse 2s ease-in-out infinite; }
@keyframes tv-cr-pulse { 50% { opacity: 0.35; } }
.tv-cr__titlerow { display: flex; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-top: 6px; }
.tv-cr__title {
  margin: 0;
  font-family: var(--wide);
  font-size: clamp(44px, 7.2cqi, 104px);
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--on-room);
}
.tv-cr__tap { margin-left: auto; font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--room-dim); }

.tv-cr__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 6px 0 60px;
  align-items: stretch;
}
/* Every monitor in a row lines up: the screen, the progress track and the
   footer sit on the same lines whatever each shows (a still or not, a bar
   or not); the footer takes up what is left. */
.tv-cr__tile {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  min-width: 0;
  padding: 10px;
  border: 0;
  border-radius: 22px;
  background: var(--set);
  box-shadow: inset 0 0 0 1.5px var(--set-edge);
  color: var(--on-room);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.tv-cr__tile:hover { box-shadow: inset 0 0 0 1.5px var(--set-edge), 0 16px 36px var(--set-shadow); }
.tv-cr__tile:focus-visible { outline: 3px solid var(--room-hl); outline-offset: 3px; }
.tv-cr__tile.is-on { box-shadow: inset 0 0 0 3px var(--room-hl); }

.tv-cr__screen {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0b0c;
  color: #ffffff;
}
/* A monitor's scanlines over the still. */
.tv-cr__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
              linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 26%, transparent 62%, rgba(0, 0, 0, 0.5) 100%);
}
.tv-cr__pic { position: absolute; inset: 0; display: grid; place-items: center; }
.tv-cr__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-cr__pic img.is-yt43 { transform: scale(1.34); }
.tv-cr__pic.is-kind svg { width: 22%; height: auto; margin-bottom: 12%; opacity: 0.55; }
.tv-cr__num {
  position: absolute;
  top: 10px;
  left: 14px;
  z-index: 1;
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.tv-cr__watch {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--on-btn);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tv-cr__watch[hidden], .tv-cr__now[hidden] { display: none; }
.tv-cr__now {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 10px 7px 7px;
  border-radius: 10px;
  background: var(--info-box);
  color: var(--ink);
}
.tv-cr__chip {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--btn);
  color: var(--on-btn);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.tv-cr__nowtitle {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.tv-cr__prog { height: 3px; margin: 8px 4px 0; border-radius: 2px; background: color-mix(in srgb, var(--on-room) 16%, transparent); overflow: hidden; }
.tv-cr__prog > span { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--room-hl); transition: width 1s linear; }
.tv-cr__foot { display: flex; flex-direction: column; gap: 6px; padding: 12px 6px 6px; min-width: 0; }
.tv-cr__line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tv-cr__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--wide);
  font-size: 20px;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: uppercase;
}
.tv-cr__count { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--room-dim); }
.tv-cr__next {
  min-height: 1.4em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--room-dim);
}
.tv-cr__tile .tv-dots { position: static; flex: 0 0 auto; width: 30px; height: 30px; margin: -4px -4px -4px 0; background: transparent; color: inherit; }
.tv-cr__tile .tv-dots:hover { background: var(--faint); }
.tv-cr__drop {
  align-self: flex-start;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 15px;
  background: var(--btn);
  color: var(--on-btn);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

/* NO SIGNAL: a screen of static and scanlines, for a channel still filling
   up and for + NEW CHANNEL. */
.tv-cr__screen.is-static {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background-color: #0b0b0c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: tv-cr-static 0.5s steps(4) infinite;
}
@keyframes tv-cr-static {
  0% { background-position: 0 0; }
  25% { background-position: -40px 30px; }
  50% { background-position: 30px -50px; }
  75% { background-position: -60px -20px; }
}
.tv-cr__nosig { position: relative; z-index: 1; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.82); }
.tv-cr__need { position: relative; z-index: 1; font-family: var(--mono); font-size: 12px; color: rgba(255, 255, 255, 0.62); }
.tv-cr__plus { position: relative; z-index: 1; font-family: var(--wide); font-size: 22px; font-weight: 900; font-stretch: 125%; letter-spacing: 0.02em; color: #ffffff; }
/* A channel filling up keeps its (empty) track, so its footer lines up. */
.tv-cr__tile.is-thin .tv-cr__prog > span { display: none; }
.tv-cr__new { grid-template-rows: auto 1fr; }
.tv-cr__new .tv-cr__foot { padding-top: 23px; }
.tv-cr__new:hover .tv-cr__plus { text-decoration: underline; text-underline-offset: 5px; }

/* Narrower: two monitors a row, then one. */
@media (max-width: 1100px) {
  .tv-cr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@container pane (max-width: 1100px) {
  .tv-cr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 640px) {
  .tv-cr__grid { grid-template-columns: minmax(0, 1fr); }
  .tv-cr__tap { margin-left: 0; }
}
@container pane (max-width: 640px) {
  .tv-cr__grid { grid-template-columns: minmax(0, 1fr); }
  .tv-cr__tap { margin-left: 0; }
}

/* The owner's ⋯: on a grid tile and a guide block it shows on hover; on the
   info bar and a season card it is always there. */
.tv-dots {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.tv-dots[hidden] { display: none; }
.tv-bcard .tv-dots,
.tv-show .tv-dots { opacity: 0; transition: opacity 0.15s ease; }
.tv-bcard:hover .tv-dots,
.tv-show:hover .tv-dots,
.tv-dots:focus-visible { opacity: 1; }
.tv-bcard__badge.is-now ~ .tv-dots { top: 8px; }
.tv-info__main { position: relative; }
.tv-dots--info { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: transparent; color: var(--ink); font-size: 22px; }
.tv-info__main:has(.tv-dots--info:not([hidden])) { padding-right: 48px; }
.tv-dotmenu {
  position: absolute;
  z-index: 200;
  min-width: 200px;
  max-width: 260px;
  padding: 6px;
  border-radius: 14px;
  background: #16161a;
  color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
}
:root[data-theme="light"] .tv-dotmenu { background: #ffffff; color: #0e0e0e; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16), inset 0 0 0 1px #e6e6e6; }
.tv-dotmenu__item { height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.tv-dotmenu__item:hover { background: rgba(127, 127, 127, 0.14); }
.tv-dotmenu__item.is-danger { color: #e5484d; }
.tv-dotmenu__note { margin: 6px 12px 8px; font-size: 13px; line-height: 1.4; opacity: 0.8; }

/* ?debug=1 */
.tv-debug { position: fixed; left: 12px; bottom: 12px; z-index: 500; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.82); color: #7CFC9A; font: 12px/1.45 ui-monospace, Menlo, monospace; pointer-events: none; }

/* ------------------------------------------------------------ split view */

/* Media in a narrow Split View pane (workspace.js). Only a pane is a
   container named "pane", so none of this reaches the page on its own. */
@container pane (max-width: 760px) {
  .tv-info { height: auto; flex-wrap: wrap; row-gap: 10px; }
  .tv-info__cap { flex: 1 1 100%; min-height: 56px; }
  .tv-info__chan { max-width: none; flex: 1 1 auto; }
  .tv-info__side { flex-direction: row; align-items: center; gap: 12px; }
  .tv-remote { margin-top: 12px; padding: 8px; gap: 8px; justify-content: flex-start; border-radius: 16px; }
  .tv-chat { top: auto; left: 0; width: 100%; height: min(70%, 520px); border-radius: 22px 22px 0 0; }
}
@container pane (max-width: 560px) {
  .tv-bar__actions { gap: 8px; }
  .tv-info__label { display: none; }
  .tv-info__num { font-size: 24px; }
  .tv-remote .tv-key--views { display: none; }
  .tv-grid__names { flex-basis: 150px; width: 150px; }
}

/* Owner-only note under the Control Room: channels still filling up. */
.tv-cr__waiting { margin: 14px 2px 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--dim); }
.tv-cr__filling { margin-top: 36px; }
.tv-cr__subhead { margin: 0 2px 4px; font-size: 20px; font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase; }
.tv-cr__filling .tv-cr__waiting { margin: 0 2px 14px; }

/* Delete on your own comment in the TV chat. */
.tv-msg { position: relative; }
.tv-msg__del { margin-left: auto; align-self: flex-start; height: 26px; padding: 0 10px; border: 0; border-radius: 13px; background: transparent; color: var(--dim); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity .15s; }
.tv-msg:hover .tv-msg__del, .tv-msg__del:focus-visible, .tv-msg__del.is-armed { opacity: 1; }
.tv-msg__del.is-armed { background: #e11d48; color: #fff; }
@media (hover: none) { .tv-msg__del { opacity: .7; } }

/* The MENU card: always a white card with dark text, whatever the page or
   pane theme, and kept inside its pane (it opened past a Split View pane's
   left edge and inherited the pane's light text). */
.tv-menu { --paper: #ffffff; --paper-2: #f2f2f2; --ink: #0e0e0e; --white: #ffffff; color: #0e0e0e; max-width: calc(100vw - 24px); }
.tv-menu.is-left { right: auto; left: 0; }

/* The sound key never leaves the remote; on silent bytes it rests dimmed. */
.tv-key--sound:disabled { opacity: 0.35; cursor: default; animation: none; }

/* Narrow (phone-width window or a Split View pane): the remote is a row, so
   the channel rocker lies down too — CH number, then ▲ ▼ side by side —
   and the keys wrap onto a second line instead of running off the edge. */
@media (max-width: 760px) {
  .tv-remote { flex-wrap: wrap; overflow-x: visible; row-gap: 10px; }
  .tv-rocker { flex-direction: row; width: auto; height: 64px; padding: 0 6px 0 14px; gap: 6px; }
  .tv-rocker__label { order: 0; }
  .tv-rocker__num { order: 1; margin-right: 6px; }
  .tv-rocker #tv-chup { order: 2; }
  .tv-rocker #tv-chdown { order: 3; }
  .tv-rocker button { width: 40px; height: 40px; border-radius: 50%; }
}
@container pane (max-width: 760px) {
  .tv-remote { flex-wrap: wrap; overflow-x: visible; row-gap: 10px; }
  .tv-rocker { flex-direction: row; width: auto; height: 64px; padding: 0 6px 0 14px; gap: 6px; }
  .tv-rocker__label { order: 0; }
  .tv-rocker__num { order: 1; margin-right: 6px; }
  .tv-rocker #tv-chup { order: 2; }
  .tv-rocker #tv-chdown { order: 3; }
  .tv-rocker button { width: 40px; height: 40px; border-radius: 50%; }
}

/* The remote column's outer corners round off like the picture's left
   corners, so the screen + remote read as one rounded set. Only while the
   remote sits over the picture (wide layout, not full screen). */
@media (min-width: 761px) {
  html body .tv-set:not(:fullscreen) .tv-screen-wrap { border-radius: 18px; overflow: hidden; }
  html body .tv-row .tv-remote { border-radius: 0 18px 18px 0; }
  /* Light and page colour: the remote is frosted glass over the picture's
     edge (as it is in dark), not a solid column beside it, so screen and
     remote read as one piece. */
  :root[data-theme="light"] body .tv-row .tv-remote {
    background: rgba(255, 255, 255, 0.58);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: none;
    --key-bg: rgba(255, 255, 255, 0.55);
    --key-edge: rgba(0, 0, 0, 0.10);
    --room: rgba(255, 255, 255, 0.5);
  }
  :root[data-page-color]:not(#pc) body .tv-row .tv-remote {
    background: color-mix(in srgb, var(--pc-card) 58%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: none;
    --key-bg: color-mix(in srgb, var(--pc-card) 55%, transparent);
    --room: color-mix(in srgb, var(--pc-card) 50%, transparent);
  }
  :root[data-theme="light"] body .tv-set:not(:fullscreen) .tv-screen > img { border-radius: 0; box-shadow: none; }
  :root[data-theme="light"] body .tv-set:not(:fullscreen) .tv-screen-wrap { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.16); }
}
/* One set: an embed keeps square inner corners and runs right up to the
   remote (the wrap's rounding does the outside), with the remote's glass
   behind the embed's side instead of a gap. */
@media (min-width: 761px) {
  html body .tv-set:not(:fullscreen) .tv-screen iframe { border-radius: 0 !important; }
  html body .tv-set:not(:fullscreen) .tv-screen-wrap:has(.tv-screen iframe) { background: #000; }
}

/* The caption drawer: opened from More on the info bar, it hangs off the
   bar as part of the set -- same rounded card, full caption, no clamp. */
.tv-info__main { position: relative; }
.tv-info__more {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.tv-info__more[hidden] { display: none; }
.tv-bezel .tv-about {
  max-width: none;
  margin: 8px 0 0;
  padding: 18px 22px 20px;
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--set-edge, transparent);
}
.tv-bezel .tv-about__meta { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.tv-bezel .tv-about__title { font-size: clamp(20px, calc(2 * var(--pane-w, 100vw) / 100), 30px); }
.tv-bezel .tv-about__text { color: var(--ink); font-size: 17px; }
.tv-bezel .tv-about__more { display: none; }
.tv-set:fullscreen .tv-about { display: none; }
/* More sits at the bar's right edge (left of the owner's ⋯), so the
   headline keeps its full line. */
.tv-info__main .tv-info__more {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); margin: 0; z-index: 2;
  background: var(--white);
}
.tv-info__main:has(.tv-info__more:not([hidden])) .tv-info__title,
.tv-info__main:has(.tv-info__more:not([hidden])) .tv-info__next { padding-right: 84px; }
.tv-info__main:has(.tv-dots--info:not([hidden])) .tv-info__more { right: 52px; }
.tv-info__main:has(.tv-dots--info:not([hidden])):has(.tv-info__more:not([hidden])) .tv-info__title,
.tv-info__main:has(.tv-dots--info:not([hidden])):has(.tv-info__more:not([hidden])) .tv-info__next { padding-right: 122px; }
/* The bar already carries the headline; the drawer shows only what's new:
   who/when and the whole caption. */
.tv-bezel .tv-about__title { display: none; }
.tv-bezel .tv-about__text { margin-top: 8px; }

/* Byte cards: who posted it, face and name, before the channel and date. */
.tv-bcard__meta { display: flex; align-items: center; gap: 6px; }
.tv-bcard__face { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.tv-bcard__by { font-weight: 700; color: var(--on-room); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tv-bcard__meta > span { overflow: hidden; text-overflow: ellipsis; }
/* The views number fits inside its key at any size (10.2K, 9896). */
.tv-key--views { overflow: hidden; }
.tv-key--views .tv-key__big { font-size: 13px !important; letter-spacing: -0.03em; line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.tv-key--views #tv-views-label { font-size: 8px !important; letter-spacing: 0.06em; }
.tv-key--views { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Engagement counts off in Settings: no views. The +1 and its bubble always
   stay (the owner's call, 2026-09-28; see keep-plus-ones). */
html.tv-no-stats .tv-key--views { display: none !important; }

/* A reel or photo that doesn't fill the set sits on black, edge to edge,
   like a TV -- in every theme (the light theme used to show the page). */
html body .tv-set:not(:fullscreen) .tv-screen-wrap:has(.tv-screen .is-fit),
html body .tv-set:not(:fullscreen) .tv-screen:has(.is-fit) { background: #000 !important; }
html body .tv-set:not(:fullscreen) .tv-screen .is-fit,
html body .tv-set:not(:fullscreen) .tv-screen .is-fit img { border-radius: 0 !important; box-shadow: none !important; }

/* The poster's face before "BY <name>" on the info bar. */
.tv-info__next { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tv-info__next > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-info__face { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }

/* A video that has not started yet stays dark, never a white hole (tv.js playVideo). */
.tv-screen > video.is-waiting, :root[data-theme="light"] .tv-screen > video.is-waiting { background: #000 !important; }
/* The clip the browser would not start: one big play mark over its still. */
html body .tv-screen > .tv-tapplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 88px; height: 88px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-size: 30px;
}
html body .tv-screen > .tv-tapplay, html body .tv-screen > .tv-tapplay * {
  color: #0b0b0c !important; -webkit-text-fill-color: #0b0b0c !important;
}
html body .tv-screen > .tv-tapplay svg { width: 34px; height: 34px; margin-left: 4px; }

/* Posts from X, Instagram, TikTok and Facebook play in their own players,
   which draw a fixed-width card: centred on the set, as tall as it is. */
html body .tv-screen > iframe[src*="platform.twitter.com"],
html body .tv-screen > iframe[src*="instagram.com/"],
html body .tv-screen > iframe[src*="tiktok.com/embed"],
html body .tv-screen > iframe[src*="facebook.com/plugins"] {
  left: 50% !important; right: auto !important;
  width: min(560px, 100%) !important;
  transform: translateX(-50%);
  background: transparent !important;
}

/* Full screen is the picture, edge to edge. The info bar (title, time,
   channel chips, keys) lies over the bottom of the picture on a shade instead
   of taking its own strip under it, and fades while the mouse rests; nothing
   is kept back on the right for the remote, which is not in full screen. */
html body .tv-set:fullscreen { display: block !important; position: relative; overflow: hidden; }
html body .tv-set:fullscreen .tv-screen-wrap {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; margin: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
html body .tv-set:fullscreen .tv-screen,
html body .tv-set:fullscreen .tv-screen-wrap:has(.tv-screen iframe) .tv-screen { right: 0 !important; }
html body .tv-set:fullscreen .tv-bezel {
  position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 8;
  padding: 72px 36px 20px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.85) 100%) !important;
}
html body .tv-set:fullscreen .tv-bezel .tv-info,
html body .tv-set:fullscreen .tv-bezel .tv-info > * { background: transparent !important; box-shadow: none !important; border-color: rgba(255, 255, 255, 0.18) !important; }
html body .tv-set:fullscreen .tv-link__body { right: 6% !important; }

/* A social post drawn by its own site inside a library tile: a still
   preview, the tile takes the tap. */
.tv-bcard__tile.is-social { background: #fff; overflow: hidden; }
.tv-bcard__tile.is-social .tv-bcard__embed {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  pointer-events: none; background: #fff;
}
.tv-bcard__tile.is-rendered-preview .tv-bcard__embed {
  width: 300%; height: 300%; max-width: none;
  transform: scale(0.333333); transform-origin: top left;
}

/* A web link with no picture: the site's own mark and name on a bold field
   in the app's colour, and the first line of the caption. */
.tv-bcard__tile.is-linktile { background: linear-gradient(135deg, hsl(var(--link-hue, 340) 78% 52%), hsl(calc(var(--link-hue, 340) + 40) 70% 22%)) !important; }
.tv-bcard__linktile {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 16px 18px; color: #fff; text-align: left;
}
.tv-bcard__linktile b { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-bcard__linktile span { font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, 0.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-bcard__tile .tv-bcard__linkfav { position: absolute; inset: auto; top: 16px; right: 16px; left: auto; bottom: auto; width: 40px !important; height: 40px !important; border-radius: 10px; background: #fff; padding: 4px; object-fit: contain; transform: none !important; }

/* Engagement off hides the +1 key too (tv.js sets tv-no-stats). */
html.tv-no-stats #tv-like { display: none !important; }

/* The empty set's guide (empty-state.js) replaces the one-line prompt. */
.tv-empty.has-guide > svg,
.tv-empty.has-guide > .tv-empty__line,
.tv-empty.has-guide > .tv-empty__browse { display: none !important; }
.tv-empty__guide { width: 100%; }
.tv-empty__guide .nst-es.nst-es { padding: 12px 20px !important; }

/* The muted speaker's slash cuts through on a dark key; on the light theme
   the cut is drawn in the key's own light fill, not a dark bar. */
:root[data-theme="light"] #tv-sound svg path:nth-of-type(3),
:root[data-theme="light"] #tv-fs-sound svg path:nth-of-type(3) { stroke: #f7f7f7 !important; }

/* The empty set with the app's photo behind it, darkened like the Stream
   stage, so the guide reads white on the picture. */
.tv-empty.has-photo { overflow: hidden; border-radius: inherit; background: #0b0b0c; }
:root[data-theme="light"] .tv-empty.has-photo { background: #0b0b0c; }
.tv-empty__photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tv-empty__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.tv-empty__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.78) 100%);
}
.tv-empty.has-photo > :not(.tv-empty__photo) { position: relative; z-index: 1; }
html body .tv-empty.has-photo .nst-es.nst-es {
  --es-ink: #ffffff; --es-dim: rgba(255,255,255,.78); --es-soft: rgba(255,255,255,.14);
  --es-line: rgba(255,255,255,.28); --es-btn: #ffffff; --es-on-btn: #111114; --es-glow: rgba(0,0,0,.25);
}
html body .tv-empty.has-photo .nst-es.nst-es .nst-es__icon { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html body .tv-empty.has-photo .nst-es.nst-es .nst-es__title { text-shadow: 0 2px 18px rgba(0,0,0,.45); }

/* Channel screens render the current embedded post without stealing clicks. */
.tv-cr__pic.is-social { overflow: hidden; background: #fff; }
.tv-cr__pic .tv-bcard__embed {
  position: absolute; top: 0; left: 0; width: 200%; height: 200%;
  border: 0; transform: scale(.5); transform-origin: top left; pointer-events: none;
}

.tv-cr__pic video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}