/* ──────────────────────────────────────────────────────────────────────────
 *  tv-pair.css: Tunegether on your TV, and the phone that drives it.
 *
 *  Dark surfaces throughout, and every heading and body colour is set
 *  explicitly on the element that shows it: the site stylesheet forces
 *  headings to the foreground colour globally, which on a dark section is
 *  dark on dark. Nothing here inherits a text colour and hopes.
 *
 *  Layouts in this file:
 *    .tvp-tv     the 10-foot page at /tv (huge type, D-pad targets,
 *                a now-playing surface, featured rails from the catalog)
 *    .tvp-phone  the remote at /pair (one column, thumb-sized controls,
 *                the full catalog behind tabs, never wider than the phone)
 *    .tg-tv-home the homepage section that points at /tv
 * ────────────────────────────────────────────────────────────────────────── */

.tvp {
  --tvp-bg: #08080F;
  --tvp-panel: #12121F;
  --tvp-panel-2: #1A1A2C;
  --tvp-line: #2A2A44;
  --tvp-ink: #F4F2FF;
  --tvp-dim: #B9B4D6;
  --tvp-accent: #9D7BFF;
  --tvp-accent-2: #FF5C8A;
  --tvp-good: #3DDC84;
  /* The glass, the same values as the shared player's dark pane: a
     translucent fill over a blur, an inset highlight along the top edge
     where light would catch it, and a deep soft shadow under it. There is
     deliberately no drawn border on a glass surface: the edge is the
     highlight and the shadow. Repeated tiles (picks, rows, chips) take the
     tinted fill without their own blur, the same call the guide grid made:
     a screen this full blurs its hero surfaces, not every tile in it. */
  --tvp-glass-bg: rgba(16, 16, 28, .62);
  --tvp-glass-tile: rgba(26, 26, 44, .72);
  --tvp-glass-filter: blur(20px) saturate(160%);
  --tvp-glass-hi: inset 0 1px 0 rgba(255, 255, 255, .14);
  --tvp-glass-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 2px 10px rgba(0, 0, 0, .4);
  background: var(--tvp-bg);
  color: var(--tvp-ink);
  min-height: 100vh;
  box-sizing: border-box;
}
.tvp *, .tvp *::before, .tvp *::after { box-sizing: border-box; }
.tvp h1, .tvp h2, .tvp h3 { color: var(--tvp-ink); }
.tvp p, .tvp li, .tvp span, .tvp label { color: var(--tvp-ink); }
.tvp img { max-width: 100%; }

.tvp-btn {
  appearance: none; border: 2px solid var(--tvp-accent); border-radius: 16px;
  background: var(--tvp-glass-tile); color: var(--tvp-ink);
  font-weight: 700; cursor: pointer;
  box-shadow: var(--tvp-glass-hi), 0 8px 22px rgba(0, 0, 0, .3);
}
.tvp-btn:focus-visible { outline: 4px solid var(--tvp-accent-2); outline-offset: 3px; }
.tvp-btn[disabled] { opacity: 0.65; cursor: default; }
.tvp-btn-primary { background: var(--tvp-accent); color: #12121F; border-color: var(--tvp-accent); }
.tvp-btn-ghost { border-color: var(--tvp-line); background: transparent; }

.tvp-live {
  display: inline-block; background: var(--tvp-accent-2); color: #FFFFFF;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 999px; padding: 0.18em 0.7em; line-height: 1.5;
}
.tvp-live[hidden] { display: none; }
.tvp-dot {
  display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%;
  background: var(--tvp-accent-2); margin-right: 0.45em; vertical-align: baseline;
  flex: 0 0 auto;
}
[data-state="paired"] .tvp-dot { background: var(--tvp-good); }

/* ── the TV page ─────────────────────────────────────────────────────── */

.tvp-tv { padding: 3.5vh 4vw 5vh; }
.tvp-tv main { display: block; }

.tvp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.tvp-tv .tvp-brand { display: flex; align-items: center; gap: 18px; }
/* This rule owns the monogram only. The gradient wordmark file beside
   it belongs to tv-hub.css, which keeps it hidden outside the hub
   view; a blanket brand img rule here outranked that hide, rendered
   the wordmark beside the monogram in the pair and now views, and
   pushed the top bar past phone widths. */
.tvp-tv .tvp-brand-mono { display: block; }
.tvp-wordmark {
  font-size: clamp(26px, 3vw, 44px); font-weight: 800; margin: 0;
  color: var(--tvp-ink); letter-spacing: 0.01em; line-height: 1.1;
}
.tvp-brand-sub {
  font-size: clamp(14px, 1.4vw, 20px); color: var(--tvp-dim); margin: 2px 0 0;
}
.tvp-conn {
  display: flex; align-items: center; margin: 0;
  font-size: clamp(16px, 1.7vw, 24px); font-weight: 700; color: var(--tvp-ink);
  background: var(--tvp-glass-bg);
  -webkit-backdrop-filter: var(--tvp-glass-filter);
  backdrop-filter: var(--tvp-glass-filter);
  border: 0; border-radius: 999px; padding: 10px 22px;
  box-shadow: var(--tvp-glass-hi), var(--tvp-glass-shadow);
}
.tvp-conn .tvp-dot { width: 0.55em; height: 0.55em; }

/* now playing */
.tvp-nowplay { margin-top: 3vh; }
.tvp-nowplay[hidden] { display: none; }
.tvp-video-wrap {
  position: relative; width: min(1180px, 100%); aspect-ratio: 16 / 9;
  max-height: 60vh; background: #000000; border-radius: 24px; overflow: hidden;
  margin-bottom: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .4);
}
.tvp-video-wrap[hidden] { display: none; }
.tvp-video-wrap video { width: 100%; height: 100%; display: block; background: #000000; }
.tvp-live-corner { position: absolute; top: 16px; left: 16px; font-size: 18px; }
.tvp-video-say {
  position: absolute; left: 16px; bottom: 14px; margin: 0;
  color: var(--tvp-ink); font-size: clamp(15px, 1.5vw, 21px); font-weight: 600;
  background: rgba(8, 8, 15, 0.72); border-radius: 10px; padding: 6px 12px;
}
.tvp-video-say:empty { display: none; }
.tvp-frame-wrap {
  width: min(1180px, 100%); aspect-ratio: 16 / 9; max-height: 60vh;
  background: #000000; border-radius: 24px; overflow: hidden; margin-bottom: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 4px 16px rgba(0, 0, 0, .4);
}
.tvp-frame-wrap[hidden] { display: none; }
.tvp-frame-wrap > * { width: 100%; height: 100%; }
.tvp-np-card { display: flex; gap: clamp(18px, 2.6vw, 40px); align-items: center; }
.tvp-np-artwrap {
  flex: 0 0 auto; width: clamp(170px, 20vw, 300px); height: clamp(170px, 20vw, 300px);
  border-radius: 24px; overflow: hidden; background: var(--tvp-panel-2);
  position: relative;
  box-shadow: var(--tvp-glass-shadow);
}
.tvp-np-art { width: 100%; height: 100%; object-fit: cover; display: block; }
.tvp-np-art[hidden] { display: none; }
.tvp-np-letter {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(72px, 9vw, 140px); font-weight: 800; color: var(--tvp-accent);
  background: linear-gradient(135deg, #1A1A2C, #12121F);
}
.tvp-np-letter[hidden] { display: none; }
.tvp-np-text { min-width: 0; flex: 1 1 auto; }
.tvp-np-kicker {
  margin: 0; font-size: clamp(15px, 1.6vw, 22px); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--tvp-dim);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.tvp-np-kicker .tvp-live { font-size: 0.72em; }
.tvp-np-title {
  margin: 8px 0 0; color: var(--tvp-ink); line-height: 1.12;
  font-size: clamp(34px, 4.6vw, 72px); font-weight: 800;
  overflow-wrap: anywhere;
}
.tvp-np-artist {
  margin: 8px 0 0; color: var(--tvp-dim);
  font-size: clamp(20px, 2.6vw, 38px); overflow-wrap: anywhere;
}
.tvp-np-status { margin: 10px 0 0; color: var(--tvp-ink); font-size: clamp(16px, 1.7vw, 24px); font-weight: 600; }
/* The one choice left on a channel whose picture this device cannot
   decode: hear it. A filled accent pill in the now-playing text column,
   the primary action of the unsupported state, painted by tv.js only
   while that state is on screen and the viewer has not taken it. Focus
   is the hub's filled lift, a deeper shadow and a small scale, never a
   ring drawn around it. */
.tvp-listen {
  appearance: none; border: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center;
  margin-top: 18px; padding: 14px 28px; min-height: 56px;
  background: var(--tvp-accent); color: #12121F;
  font: inherit; font-size: clamp(16px, 1.7vw, 24px); font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: var(--tvp-glass-hi), 0 10px 26px rgba(157, 123, 255, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tvp-listen[hidden] { display: none; }
.tvp-listen:focus-visible {
  outline: none;
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--tvp-glass-hi), 0 16px 38px rgba(157, 123, 255, .55);
}
.tvp-np-progress {
  margin-top: 16px; height: 10px; border-radius: 999px; background: var(--tvp-panel-2);
  overflow: hidden; max-width: 640px;
}
.tvp-np-progress[hidden] { display: none; }
.tvp-np-bar { height: 100%; width: 0; background: var(--tvp-accent); border-radius: 999px; }
.tvp-np-hint { margin: 14px 0 0; color: var(--tvp-dim); font-size: clamp(15px, 1.5vw, 21px); }

/* pairing hero */
.tvp-hero {
  display: flex; flex-wrap: wrap; gap: 3.5vw; align-items: flex-start;
  margin-top: 3.5vh;
}
.tvp-hero-copy { flex: 1 1 480px; min-width: 0; }
.tvp-hero-title {
  font-size: clamp(34px, 4.4vw, 68px); margin: 0; line-height: 1.08;
  color: var(--tvp-ink);
}
.tvp-tv .tvp-lede {
  font-size: clamp(18px, 2.1vw, 30px); line-height: 1.4;
  color: var(--tvp-dim); max-width: 30em; margin: 1.6vh 0 0;
}
.tvp-tv .tvp-qr-card {
  background: #FFFFFF; border-radius: 24px; padding: 28px;
  width: min(400px, 80vw); flex: 0 0 auto;
}
.tvp-tv .tvp-qr { width: 100%; aspect-ratio: 1 / 1; }
.tvp-tv .tvp-qr svg { display: block; width: 100%; height: 100%; }
.tvp-tv .tvp-qr-url {
  color: #12121F; text-align: center; font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px); margin: 14px 0 0; word-break: break-all;
}
.tvp-tv .tvp-code-label { color: var(--tvp-dim); font-size: clamp(16px, 1.7vw, 24px); margin: 2.6vh 0 0; }
.tvp-tv .tvp-code {
  color: var(--tvp-ink);
  font-size: clamp(58px, 7.6vw, 118px); font-weight: 800; line-height: 1.05;
  letter-spacing: 0.12em; margin: 0.6vh 0 1.6vh; font-variant-numeric: tabular-nums;
}
.tvp-tv .tvp-steps { color: var(--tvp-dim); font-size: clamp(16px, 1.7vw, 24px); line-height: 1.5; margin: 0; padding-left: 1.2em; }
.tvp-tv .tvp-steps li { color: var(--tvp-dim); margin: 0.35em 0; }
.tvp-tv .tvp-steps strong { color: var(--tvp-ink); }
.tvp-tv .tvp-status {
  margin: 2.6vh 0 0; font-size: clamp(18px, 1.9vw, 27px); font-weight: 600;
  color: var(--tvp-ink); display: flex; align-items: center;
}
.tvp-peer { margin: 10px 0 0; color: var(--tvp-good); font-size: clamp(16px, 1.7vw, 24px); font-weight: 700; }
.tvp-peer[hidden] { display: none; }
.tvp-tv .tvp-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2.6vh; }
.tvp-tv .tvp-btn {
  font-size: clamp(17px, 1.7vw, 25px); padding: 16px 26px; min-height: 62px;
}

/* spotlight */
.tvp-spot { margin-top: 3.4vh; }
.tvp-spot[hidden] { display: none; }
.tvp-spot-k {
  margin: 0 0 10px; color: var(--tvp-dim); font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
}
.tvp-spot-card {
  display: flex; align-items: center; gap: 18px; text-align: left;
  appearance: none; cursor: pointer; max-width: 620px; width: 100%;
  background: var(--tvp-glass-bg);
  -webkit-backdrop-filter: var(--tvp-glass-filter);
  backdrop-filter: var(--tvp-glass-filter);
  border: 0; border-radius: 24px; padding: 14px 18px;
  box-shadow: var(--tvp-glass-hi), var(--tvp-glass-shadow);
}
/* Focus is a filled highlight, never an outline: the accent washes the
   glass and an inset ring of shadow firms the edge, readable across a
   room. The same pattern serves every glass card and tile on this page. */
.tvp-spot-card:focus-visible {
  outline: none;
  background: rgba(157, 123, 255, .22);
  box-shadow: inset 0 0 0 3px rgba(157, 123, 255, .7), var(--tvp-glass-hi), var(--tvp-glass-shadow);
}
.tvp-spot-art { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; }
.tvp-spot-art[hidden] { display: none; }
.tvp-spot-letter {
  width: 92px; height: 92px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 800; color: var(--tvp-accent); background: var(--tvp-panel-2);
}
.tvp-spot-letter[hidden] { display: none; }
.tvp-spot-text { min-width: 0; display: block; }
.tvp-spot-name {
  display: block; color: var(--tvp-ink); font-weight: 800;
  font-size: clamp(20px, 2.2vw, 32px); overflow-wrap: anywhere;
}
.tvp-spot-sub { display: block; color: var(--tvp-dim); font-size: clamp(15px, 1.6vw, 22px); margin-top: 4px; }

/* rails on the TV */
.tvp-tv .tvp-picks { margin-top: 4vh; }
.tvp-tv .tvp-picks h2, .tvp-tv .tvp-featured h2 {
  color: var(--tvp-ink); font-size: clamp(20px, 2.2vw, 32px); margin: 0 0 14px;
}
.tvp-pick-row { display: flex; flex-wrap: wrap; gap: 14px; }
.tvp-pick {
  display: flex; align-items: center; gap: 12px; text-align: left;
  appearance: none; cursor: pointer;
  background: var(--tvp-glass-tile); border: 0; border-radius: 20px;
  padding: 16px 20px; min-height: 68px; color: var(--tvp-ink);
  box-shadow: var(--tvp-glass-hi), 0 10px 28px rgba(0, 0, 0, .35);
}
.tvp-pick:focus-visible {
  outline: none;
  background: rgba(157, 123, 255, .22);
  box-shadow: inset 0 0 0 3px rgba(157, 123, 255, .7), var(--tvp-glass-hi), 0 10px 28px rgba(0, 0, 0, .35);
}
.tvp-pick-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--tvp-accent); flex: 0 0 auto; }
.tvp-pick-name { color: var(--tvp-ink); font-size: clamp(17px, 1.8vw, 25px); font-weight: 700; display: block; }
.tvp-pick-sub { color: var(--tvp-dim); font-size: clamp(13px, 1.3vw, 18px); display: block; }
.tvp-tv .tvp-featured { margin-top: 4vh; }
.tvp-featured[hidden] { display: none; }
.tvp-feat-row {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 14px;
  scrollbar-width: thin;
}
.tvp-feat {
  flex: 0 0 auto; width: clamp(190px, 17vw, 264px); text-align: left;
  appearance: none; cursor: pointer; padding: 12px;
  background: var(--tvp-glass-tile); border: 0; border-radius: 24px;
  color: var(--tvp-ink);
  box-shadow: var(--tvp-glass-hi), 0 10px 28px rgba(0, 0, 0, .35);
}
.tvp-feat:focus-visible {
  outline: none;
  background: rgba(157, 123, 255, .22);
  box-shadow: inset 0 0 0 3px rgba(157, 123, 255, .7), var(--tvp-glass-hi), 0 10px 28px rgba(0, 0, 0, .35);
}
.tvp-feat-art {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px;
  display: block; background: var(--tvp-panel-2);
}
.tvp-feat-name {
  display: block; color: var(--tvp-ink); font-weight: 700; margin-top: 10px;
  font-size: clamp(16px, 1.6vw, 22px); overflow-wrap: anywhere;
}
.tvp-feat-sub { display: block; color: var(--tvp-dim); font-size: clamp(13px, 1.3vw, 17px); margin-top: 3px; }

/* ── the phone remote ────────────────────────────────────────────────── */

.tvp-phone { padding: 18px 14px 44px; max-width: 560px; margin: 0 auto; width: 100%; }
.tvp-p-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tvp-p-head img { display: block; flex: 0 0 auto; }
.tvp-phone h1, .tvp-p-title {
  color: var(--tvp-ink); font-size: 27px; margin: 0; line-height: 1.15;
}
.tvp-phone .tvp-lede { color: var(--tvp-dim); font-size: 16px; line-height: 1.4; margin: 3px 0 0; }
.tvp-card {
  background: var(--tvp-glass-bg);
  -webkit-backdrop-filter: var(--tvp-glass-filter);
  backdrop-filter: var(--tvp-glass-filter);
  border: 0; border-radius: 24px; padding: 16px; margin: 0 0 16px;
  box-shadow: var(--tvp-glass-hi), var(--tvp-glass-shadow);
}
.tvp-p-status { font-size: 16px; font-weight: 600; color: var(--tvp-ink); }
.tvp-h2 { color: var(--tvp-ink); font-size: 19px; margin: 0 0 12px; }
.tvp-field-label { color: var(--tvp-dim); font-size: 14px; font-weight: 600; display: block; margin-bottom: 8px; }

.tvp-codeform-row { display: grid; gap: 12px; }
.tvp-codeinput {
  width: 100%; min-width: 0; background: var(--tvp-bg); color: var(--tvp-ink);
  border: 2px solid var(--tvp-line); border-radius: 14px;
  font-size: 30px; font-weight: 800; letter-spacing: 0.28em; text-align: center;
  padding: 12px 6px; text-transform: uppercase;
}
.tvp-codeinput:focus-visible { outline: 3px solid var(--tvp-accent); outline-offset: 2px; }
.tvp-codeform .tvp-btn { font-size: 18px; padding: 14px 18px; min-height: 58px; }
.tvp .tvp-error { color: #FF9DB4; font-size: 15px; margin: 10px 0 0; }
.tvp-error:empty { display: none; }

/* now-on-TV mirror card: the hero of the remote, so it takes the fullest
   radius in the glass range. */
.tvp-now { padding-bottom: 14px; border-radius: 28px; }
.tvp-now-top { display: flex; gap: 14px; align-items: center; }
.tvp-now-art {
  width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 auto;
  background: var(--tvp-panel-2);
}
.tvp-now-art[hidden] { display: none; }
.tvp-now-letter {
  width: 64px; height: 64px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: var(--tvp-accent); background: var(--tvp-panel-2);
}
.tvp-now-letter[hidden] { display: none; }
.tvp-now-text { min-width: 0; flex: 1 1 auto; }
.tvp-now-k {
  color: var(--tvp-dim); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.tvp-now-k .tvp-live { font-size: 11px; }
.tvp-now-title {
  color: var(--tvp-ink); font-size: 20px; font-weight: 700; margin: 4px 0 0;
  overflow-wrap: anywhere; line-height: 1.25;
}
.tvp-now-sub { color: var(--tvp-dim); font-size: 14px; margin: 3px 0 0; overflow-wrap: anywhere; }

.tvp-transport { display: flex; gap: 10px; margin-top: 16px; }
.tvp-tbtn {
  flex: 1 1 0; min-height: 64px; appearance: none; cursor: pointer;
  background: var(--tvp-glass-tile); color: var(--tvp-ink);
  border: 0; border-radius: 18px;
  font-size: 24px; line-height: 1;
  box-shadow: var(--tvp-glass-hi), 0 8px 22px rgba(0, 0, 0, .3);
}
/* A transport key is a small control, so its focus is the full fill: the
   accent floods the key and the glyph turns dark, the same call the TV
   player's own controls make. */
.tvp-tbtn:focus-visible {
  outline: none;
  background: var(--tvp-accent); color: #12121F;
  box-shadow: 0 6px 20px rgba(157, 123, 255, .35);
}
.tvp-tbtn-main { flex: 1.3 1 0; background: var(--tvp-accent); color: #12121F; }
.tvp-tbtn-main:focus-visible { background: var(--tvp-accent-2); color: #FFFFFF; }

.tvp-volrow { margin-top: 16px; }
.tvp-volrow[hidden] { display: none; }
.tvp-vol { width: 100%; height: 44px; accent-color: var(--tvp-accent); display: block; }
.tvp-volnote { color: var(--tvp-dim); font-size: 14px; margin: 12px 0 0; }
.tvp-volnote[hidden] { display: none; }
.tvp-remote-actions { display: flex; gap: 10px; margin-top: 14px; }
.tvp-remote-actions .tvp-btn { flex: 1 1 0; font-size: 16px; padding: 12px 10px; min-height: 52px; }

/* quick start + result rows: one row shape everywhere */
.tvp-picklist, .tvp-results { display: grid; gap: 10px; }
.tvp-row {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px;
  text-align: left; appearance: none; cursor: pointer;
  background: var(--tvp-glass-tile); border: 0; border-radius: 16px;
  padding: 10px 12px; min-height: 66px; color: var(--tvp-ink);
  box-shadow: var(--tvp-glass-hi), 0 8px 22px rgba(0, 0, 0, .3);
}
.tvp-row:focus-visible {
  outline: none;
  background: rgba(157, 123, 255, .22);
  box-shadow: inset 0 0 0 3px rgba(157, 123, 255, .7), var(--tvp-glass-hi), 0 8px 22px rgba(0, 0, 0, .3);
}
.tvp-row-art {
  width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 auto;
  background: var(--tvp-panel);
}
.tvp-row-text { min-width: 0; flex: 1 1 auto; display: block; }
.tvp-row-name {
  display: block; color: var(--tvp-ink); font-size: 17px; font-weight: 700;
  overflow-wrap: anywhere; line-height: 1.3;
}
.tvp-row-sub { display: block; color: var(--tvp-dim); font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }
.tvp-picklist .tvp-row { background: var(--tvp-glass-tile); }
.tvp-empty { color: var(--tvp-dim); font-size: 15px; margin: 6px 0; }
.tvp-hintline { color: var(--tvp-dim); font-size: 14px; margin: 0 0 12px; line-height: 1.45; }
.tvp-hintline:empty { display: none; }

/* tabs + panels */
.tvp-tabs { display: flex; gap: 8px; margin: 4px 0 14px; }
.tvp-tab {
  flex: 1 1 0; min-height: 52px; appearance: none; cursor: pointer;
  background: var(--tvp-glass-tile); color: var(--tvp-dim);
  border: 0; border-radius: 16px;
  font-size: 16px; font-weight: 700; padding: 10px 4px;
  box-shadow: var(--tvp-glass-hi), 0 8px 22px rgba(0, 0, 0, .3);
}
.tvp-tab[aria-selected="true"] { background: var(--tvp-accent); color: #12121F; }
.tvp-tab:focus-visible {
  outline: none;
  background: rgba(157, 123, 255, .22); color: var(--tvp-ink);
  box-shadow: inset 0 0 0 3px rgba(157, 123, 255, .7), var(--tvp-glass-hi), 0 8px 22px rgba(0, 0, 0, .3);
}
/* On the chosen tab the fill is already the accent, so the ring turns
   dark to stay visible against it. */
.tvp-tab[aria-selected="true"]:focus-visible {
  background: var(--tvp-accent); color: #12121F;
  box-shadow: inset 0 0 0 3px rgba(18, 18, 31, .55), 0 8px 22px rgba(0, 0, 0, .3);
}
.tvp-panel[hidden] { display: none; }
.tvp-search-row { display: flex; gap: 10px; }
.tvp-searchinput {
  flex: 1 1 auto; min-width: 0; background: var(--tvp-bg); color: var(--tvp-ink);
  border: 2px solid var(--tvp-line); border-radius: 14px;
  font-size: 17px; padding: 12px 14px;
}
.tvp-searchinput:focus-visible { outline: 3px solid var(--tvp-accent); outline-offset: 2px; }
.tvp-search .tvp-btn { flex: 0 0 auto; font-size: 16px; padding: 12px 16px; min-height: 52px; }
.tvp-search { margin-bottom: 12px; }
.tvp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tvp-chips[hidden] { display: none; }
.tvp-chip {
  appearance: none; cursor: pointer; border-radius: 999px; padding: 9px 14px;
  background: var(--tvp-glass-tile); color: var(--tvp-dim);
  border: 0; font-size: 14px; font-weight: 600; min-height: 42px;
  box-shadow: var(--tvp-glass-hi), 0 6px 16px rgba(0, 0, 0, .28);
}
.tvp-chip.is-on { background: var(--tvp-accent); color: #12121F; }
.tvp-chip:focus-visible {
  outline: none;
  background: rgba(157, 123, 255, .22); color: var(--tvp-ink);
  box-shadow: inset 0 0 0 3px rgba(157, 123, 255, .7), var(--tvp-glass-hi), 0 6px 16px rgba(0, 0, 0, .28);
}
.tvp-chip.is-on:focus-visible {
  background: var(--tvp-accent); color: #12121F;
  box-shadow: inset 0 0 0 3px rgba(18, 18, 31, .55), 0 6px 16px rgba(0, 0, 0, .28);
}
.tvp-more { width: 100%; font-size: 16px; padding: 13px; min-height: 52px; margin-top: 12px; }
.tvp-more[hidden] { display: none; }

/* No blur, no glass: the blurred surfaces fall back to the solid panel
   they were before, at the same shapes. The radius and the shadows are
   layout and depth, the translucency is the finish. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tvp-conn, .tvp-spot-card, .tvp-card { background: var(--tvp-panel); }
}

/* ── the homepage TV section ─────────────────────────────────────────── */

.tg-tv-home {
  background: #08080F; color: #F4F2FF; padding: 56px 0;
}
.tg-tv-home h2 { color: #F4F2FF; }
.tg-tv-home p { color: #B9B4D6; }
.tg-tv-home .tg-tv-home-inner {
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
}
.tg-tv-home .tg-tv-home-copy { flex: 1 1 280px; min-width: 0; }
.tg-tv-home .tg-tv-home-copy p { color: #B9B4D6; line-height: 1.55; }
.tg-tv-home .tg-tv-home-copy strong { color: #F4F2FF; }
.tg-tv-home .tg-tv-home-url { color: #F4F2FF; font-weight: 700; }
.tg-tv-home .tg-tv-home-qr-card {
  background: #FFFFFF; border-radius: 18px; padding: 16px;
  width: 196px; max-width: 60vw; flex: 0 0 auto;
}
.tg-tv-home .tg-tv-home-qr { width: 100%; aspect-ratio: 1 / 1; }
.tg-tv-home .tg-tv-home-qr svg { display: block; width: 100%; height: 100%; }
.tg-tv-home .tg-tv-home-cap {
  color: #12121F; text-align: center; font-weight: 700; font-size: 14px; margin: 10px 0 0;
}