/* Full-screen TV. Colours and fonts: ui.css. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--text);
  overflow: hidden;
}

#screen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }

video {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  object-fit: contain;
}

[hidden] { display: none !important; }

/* Android's small window: the picture alone. */
.pip > :not(#screen), .pip #screen > :not(video) { display: none !important; }

.hint { color: var(--soft); font-size: var(--t-s); }

.panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 34rem);
}

/* Banner: the set-top box info bar, dark glass over the picture at the
   bottom left: number, logo tile, what is on, how far it is, what follows. */
.banner {
  position: absolute;
  left: var(--safe);
  bottom: 5vh;
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: 60vw;
  max-width: calc(100vw - 2 * var(--safe));
  padding: var(--s5) var(--s6) var(--s5) var(--s5);
}
/* Browsing other channels (not tuned yet): the accent says "not this one". */
.banner.browsing { border-color: var(--accent); }
.banner .number { flex: none; min-width: 2ch; font-size: var(--t-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-align: center; }
.banner .logo {
  flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 4rem; height: 4rem;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-line); border-radius: var(--r-s);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-s);
}
.banner .logo .ch-art { width: 100%; height: 100%; }
.banner .logo img.ch-art { padding: var(--s2); }
.banner .logo .ch-art.mono { font-size: var(--t-l); border-radius: 0; }
.banner .info { flex: 1 1 auto; min-width: 0; }
.banner .head { display: flex; align-items: center; gap: var(--s2); color: var(--soft); font-weight: 600; }
.banner .head .name, .banner .title, .banner .next { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.banner .badge { position: static; }
.banner .title { margin-top: 0.1em; font-size: var(--t-xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.banner .time { margin-top: var(--s1); color: var(--soft); }
.banner .progress-row { display: flex; align-items: center; gap: var(--s3); margin: var(--s2) 0 var(--s1); color: var(--soft); font-size: var(--t-s); }
.banner .progress { flex: 1 1 auto; height: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.18); border-radius: var(--r-pill); }
.banner .progress div { height: 100%; width: 0; background: var(--accent-grad); border-radius: inherit; }
.banner .next { color: var(--soft); }
.banner .next b { color: var(--text); font-weight: 600; }
.banner .hint { margin-top: var(--s2); }
.banner .side, .banner .badges { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.banner .side { flex: none; align-self: center; }
.banner .side .badge { padding: 0.3em 0.65em; font-size: var(--t-s); }
.banner .side .badge.fav { color: var(--fav); border-color: rgba(242, 200, 121, 0.45); }
.banner .side .badge.fav .icon { fill: currentColor; }

/* Channel list: a dark glass panel on the right, the picture still in
   view. Search on top, the lists as a segmented control, then the rows:
   the channel on screen tinted with the accent, the selected one white. */
.list {
  position: absolute;
  top: var(--s5);
  bottom: var(--s5);
  right: calc(var(--safe) / 2);
  width: min(32rem, calc(100vw - 2 * var(--s4)));
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5) var(--s4) var(--s4);
}
.list-title { margin: 0 var(--s2); font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.list-find { position: relative; display: block; flex: none; }
.list-find .icon { position: absolute; top: 50%; left: 0.9em; margin-top: -0.575em; color: var(--soft); pointer-events: none; }
.list-find input { width: 100%; padding-left: 2.6em; border-radius: var(--r-pill); }
.list-find input::placeholder { color: var(--soft); }
.list-find input:focus { background: rgba(255, 255, 255, 0.14); border-color: var(--focus); box-shadow: var(--glow); }
.list-find input::-webkit-search-cancel-button { display: none; }

.list .tabs { flex: none; display: flex; gap: var(--s1); padding: var(--s1); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-line); border-radius: var(--r-pill); }
.list .tabs span { flex: 1 1 0; padding: 0.4em 0.9em; color: var(--soft); font-weight: 600; text-align: center; white-space: nowrap; border-radius: var(--r-pill); }
.list .tabs span.active { color: var(--text); background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 var(--glass-hi); }

/* Room around the rows for the focus ring of the selected one. */
.list ol { flex: 1 1 auto; min-height: 0; margin: 0 calc(-1 * var(--s2)); padding: var(--s2); overflow: hidden; list-style: none; }
.list li {
  display: grid;
  grid-template-columns: 2.4em 2.6em minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-s);
}
.list li .n { grid-row: span 2; color: var(--soft); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.list li .l { grid-row: span 2; width: 2.6em; height: 2.6em; border-radius: var(--r-xs); }
.list li img.l { padding: 0.25em; background: rgba(255, 255, 255, 0.08); }
.list li .c, .list li .p { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.list li .c { font-weight: 600; }
.list li .p { color: var(--soft); font-size: var(--t-s); }
.list li .star { margin-left: 0.4em; color: var(--fav); }
.list li.current { background: var(--accent-soft); }
.list li.current .n { color: var(--text); }
.list li.selected { color: var(--ink); background: var(--focus); box-shadow: var(--glow); }
.list li.selected .n, .list li.selected .p, .list li.selected .star { color: var(--ink); }
.list li.selected .p { opacity: 0.72; }
/* One line: a second would take a row of channels. */
.list .hint { flex: none; margin: 0 var(--s2); overflow: hidden; font-size: var(--t-xs); text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.list li.none { display: block; padding: var(--s3); color: var(--soft); }

/* The channel number being typed, top centre; under the controls bar
   when that is on screen. */
.digits {
  position: absolute;
  top: var(--s6);
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 4ch;
  padding: var(--s3) var(--s6);
  font-size: var(--t-3xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-align: center;
}
.digits::after { content: "_"; color: var(--faint); }
body.controls-on .digits { top: 6.5rem; }

#dialog-text { margin: 0 0 var(--s2); font-size: var(--t-l); font-weight: 600; white-space: pre-line; }
.dialog .hint { margin: 0; }
#dialog { z-index: 8; } /* over its .scrim */

@media (prefers-reduced-motion: no-preference) {
  .banner, .list { transition: opacity 0.15s ease; }
}

/* On-screen controls (mouse, touch and remote): one dark glass bar at the
   top, labelled pills in three groups (where to go · playback · this
   channel). Pills are the menu tabs of ui.css: clear, white when focused. */
.controls {
  position: absolute;
  top: var(--s5);
  left: calc(var(--safe) / 2);
  right: calc(var(--safe) / 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Always one row: tv.js drops labels (.tight and on) until it fits. */
  flex-wrap: nowrap;
  gap: var(--s3);
  /* Room at the ends for the focused pill's glow. */
  padding: var(--s2) var(--s3);
  font-size: var(--t-s);
}
.ctl-group { display: flex; align-items: center; gap: var(--s1); }
.controls button { padding: 0.6em 0.85em; color: var(--text); font-weight: 600; white-space: nowrap; }
.controls button .icon { width: 1.35em; height: 1.35em; }
/* Pause in the middle stands out a little, like the play key of a remote. */
.controls #ctl-toggle { background: rgba(255, 255, 255, 0.12); }
.controls #ctl-toggle:focus { background: var(--focus); }
.controls #ctl-live.behind { color: var(--accent-ink); background: var(--accent); }
.controls #ctl-live.behind:focus { color: var(--ink); background: var(--focus); }
.controls #ctl-fav.on { color: var(--fav); }
.controls #ctl-fav.on .icon { fill: currentColor; }
.controls #ctl-fav.on:focus { color: var(--ink); }
/* When the bar would not fit on one row (narrow window, "Grande" text,
   "Torna in diretta (−5:00)"), the rarer actions keep only their icon: the
   name stays their tooltip and accessible name. */
.controls.tight [data-action="fullscreen"] .txt, .controls.tighter [data-action="multiview"] .txt,
.controls.tightest [data-action="startOver"] .txt, .controls.tightest [data-action="rec"] .txt { display: none; }

body.controls-on .banner { display: none; }

/* The programme on air under the controls: what has aired, what can be
   rewound, where the picture is. A pill track in layers: aired (faint),
   in the buffer (lighter), watched up to here (accent), the white knob. */
.timeline {
  position: absolute; left: calc(var(--safe) / 2); right: calc(var(--safe) / 2); bottom: 5vh;
  padding: var(--s4) var(--s5) var(--s3);
}
.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); }
.tl-title { min-width: 0; overflow: hidden; font-size: var(--t-l); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; }
.tl-state { flex: none; display: inline-flex; align-items: center; gap: 0.45em; color: var(--soft); font-weight: 600; }
/* Live: a red dot, as on the remote's record key. */
.tl-state:not(.behind)::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 3px rgba(255, 77, 79, 0.25); }
.tl-state.behind { color: var(--accent); }
.tl-bar { position: relative; padding: var(--s3) 0; cursor: pointer; touch-action: none; }
.tl-track { position: relative; height: 0.35rem; background: rgba(255, 255, 255, 0.12); border-radius: var(--r-pill); }
.tl-bar:hover .tl-track { height: 0.55rem; margin-top: -0.1rem; }
.tl-track > div { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-pill); }
#tl-aired { background: rgba(255, 255, 255, 0.2); }
#tl-buffer { background: rgba(255, 255, 255, 0.36); }
#tl-fill { background: var(--accent-grad); }
#tl-pos { top: 50%; bottom: auto; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; background: #fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22), 0 2px 8px rgba(0, 0, 0, 0.5); }
.tl-hover {
  position: absolute; bottom: 2rem; transform: translateX(-50%); padding: 0.2em 0.7em;
  font-size: var(--t-s); font-weight: 600; color: var(--ink); background: var(--focus);
  border-radius: var(--r-pill); box-shadow: var(--shadow-s); pointer-events: none; white-space: nowrap;
}
.tl-times { display: flex; justify-content: space-between; color: var(--soft); font-size: var(--t-s); }

/* Touch screens: controls over the whole picture, like the streaming
   apps: Menu, Guide and Channels at the top, rewind / pause / forward large
   in the middle, the other actions along the bottom. The bar is a shade
   over the picture here, not glass: nothing to blur across the screen. */
@media (pointer: coarse), (max-width: 800px) {
  .controls:not([hidden]) {
    top: 0; right: 0; bottom: 0; left: 0; transform: none; width: auto; max-width: none;
    display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr auto; align-items: center;
    gap: 0; padding: calc(var(--s3) + env(safe-area-inset-top)) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom));
    font-size: var(--t-s);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.82) 100%);
    border: 0; border-radius: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .ctl-group { display: contents; }
  .controls [data-action] .txt { display: inline; }
  .controls [data-action="multiview"] .txt, .controls [data-action="fullscreen"] .txt { display: none; }
  .controls [data-action="multiview"], .controls [data-action="fullscreen"] { min-width: 44px; }
  .controls button {
    display: flex; flex-direction: column; align-items: center; gap: var(--s1);
    padding: var(--s2) var(--s1); color: #fff; font-weight: 600; background: none; border: 0; border-radius: var(--r-s);
    text-shadow: var(--text-shadow);
  }
  .controls button .icon { width: 1.6rem; height: 1.6rem; }
  .controls button:focus, .controls button:hover { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: transparent; box-shadow: none; }
  /* The top row: three small glass pills (no blur). */
  .controls [data-action="menu"], .controls [data-action="guide"], .controls [data-action="list"] {
    flex-direction: row; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-pill);
    background-color: rgba(255, 255, 255, 0.1); background-image: var(--glass-sheen), var(--control-base);
    border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi); text-shadow: none;
  }
  .controls [data-action="menu"] .icon, .controls [data-action="guide"] .icon, .controls [data-action="list"] .icon { width: 1.25rem; height: 1.25rem; }
  .controls [data-action="menu"] { grid-area: 1 / 1 / 2 / 5; justify-self: start; }
  .controls [data-action="guide"] { grid-area: 1 / 5 / 2 / 9; justify-self: center; }
  .controls [data-action="list"] { grid-area: 1 / 9 / 2 / 13; justify-self: end; }
  .controls [data-action="back10"] { grid-area: 2 / 2 / 3 / 5; justify-self: center; }
  .controls [data-action="toggle"] { grid-area: 2 / 5 / 3 / 9; justify-self: center; }
  .controls [data-action="fwd30"] { grid-area: 2 / 9 / 3 / 12; justify-self: center; }
  .controls [data-action="back10"] .icon, .controls [data-action="fwd30"] .icon { width: 2.4rem; height: 2.4rem; }
  /* The big pause: a lit glass disc. */
  .controls #ctl-toggle {
    width: 4.8rem; height: 4.8rem; justify-content: center; padding: 0; border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.16); background-image: var(--glass-sheen), var(--control-base);
    border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-s);
  }
  .controls #ctl-toggle:focus, .controls #ctl-toggle:hover { background-color: rgba(255, 255, 255, 0.24); }
  .controls #ctl-toggle .icon { width: 2.2rem; height: 2.2rem; }
  .controls #ctl-toggle .lbl { display: none; }
  .controls [data-action="startOver"] { grid-area: 3 / 1 / 4 / 4; }
  .controls [data-action="live"] { grid-area: 3 / 4 / 4 / 7; }
  .controls [data-action="fav"] { grid-area: 3 / 7 / 4 / 10; }
  .controls [data-action="rec"] { grid-area: 3 / 10 / 4 / 13; }
  .controls #ctl-live.behind { color: var(--accent-ink); background: var(--accent); text-shadow: none; }
  .controls #ctl-live .lbl { max-width: 100%; white-space: normal; text-align: center; }
  /* The channel banner would sit under the bottom row. */
  body.controls-on .banner { display: none; }
  .timeline:not([hidden]) {
    left: var(--s4); right: var(--s4); bottom: calc(6rem + env(safe-area-inset-bottom)); padding: var(--s2) 0;
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: var(--text-shadow);
  }
}

/* Channel list on touch screens: the whole screen, scrolls, tap to watch;
   no row is "selected" there, the one on screen stays tinted. */
.list li, .tabs span { cursor: pointer; }
@media (pointer: coarse), (max-width: 800px) {
  .list { top: 0; bottom: 0; left: 0; right: 0; width: auto; padding: calc(var(--s3) + env(safe-area-inset-top)) var(--s4) env(safe-area-inset-bottom); border-width: 0; border-radius: 0; }
  .list .tabs { overflow-x: auto; scrollbar-width: none; }
  .list .tabs span { flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 1em; }
  #list-search { min-height: 44px; }
  .list .tabs .close { justify-content: center; min-width: 44px; margin-left: auto; font-size: var(--t-l); line-height: 1; padding: 0 0.6em; color: var(--text); background: rgba(255, 255, 255, 0.12); }
  .list ol { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .list li { grid-template-columns: 2.2em 2.6em minmax(0, 1fr); column-gap: var(--s3); padding: var(--s3) var(--s2); }
  .list li.selected { color: inherit; background: none; box-shadow: none; }
  .list li.selected .n, .list li.selected .p { color: var(--soft); opacity: 1; }
  .list li.selected .star { color: var(--fav); }
  .list li.current, .list li.current.selected { background: var(--accent-soft); }
  .list li.current.selected .n { color: var(--text); }
  .list .hint { display: none; }
}

/* Watching: the server's warnings wait for the menu. */
#server-problems { display: none; }

/* Phone: the info bar across the width, smaller number and tile, the
   badges in a row under the text. */
@media (max-width: 700px) {
  .banner { left: var(--s4); right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); flex-wrap: wrap; align-items: flex-start; gap: var(--s2) var(--s3); width: auto; max-width: none; padding: var(--s4); }
  .banner .info { flex-basis: 0; } /* beside the number and the tile, not under them */
  .banner .number { font-size: var(--t-xl); min-width: 0; }
  .banner .logo { width: 3rem; height: 3rem; }
  .banner .logo .ch-art.mono { font-size: var(--t-s); }
  .banner .title { font-size: var(--t-l); }
  .banner .side, .banner .badges { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .banner .side { flex-basis: 100%; }
}

/* The guide over the video (decision 0053): a dark glass toolbar across
   the top; below it the programme panel on the left and the picture, still
   playing, in a window on the right; the grid scrolls underneath. The
   panel and the grid are guide.css's; this is only the frame. --gbar is
   the toolbar's height, which the video window sits under. */
body.guide-on { --gbar: 2.75rem; }
.guide-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; display: flex; flex-direction: column; background: var(--bg); }
.guide-top {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 28vw; grid-template-rows: auto minmax(15.75vw, auto);
  gap: var(--s4) var(--s5);
  padding: var(--s4) var(--safe) var(--s3);
}
.guide-top > * { grid-column: 1; }
.guide-bar {
  grid-column: 1 / -1; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s1);
  min-width: 0; height: var(--gbar); padding: 0 var(--s1); overflow-x: auto; scrollbar-width: none;
  font-size: var(--t-s); border-radius: var(--r-pill);
}
.guide-bar::-webkit-scrollbar { display: none; }
.guide-bar .tab { color: var(--text); font-weight: 600; white-space: nowrap; }
.guide-bar .tab:focus { color: var(--ink); } /* ui.css's focus colour, lost to the rule above */
.guide-bar .guide-nav { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: var(--s1); }
.guide-bar .guide-when { flex: 1 1 auto; min-width: 0; padding: 0 var(--s3); color: var(--soft); font-weight: 600; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.guide-bar .guide-close { margin-left: var(--s2); }
.guide-overlay .programme-panel { align-self: stretch; }
.guide-overlay .guide { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--safe) 1rem; }
body.guide-on #video {
  top: calc(var(--s4) + var(--gbar) + var(--s4)); right: var(--safe); bottom: auto; left: auto; width: 28vw; height: 15.75vw; z-index: 6;
  border: 1px solid var(--glass-line); border-radius: var(--r-s); box-shadow: var(--shadow);
}
/* "● 12 · Cinema Club" on the window's bottom left, like the mockup's live tag. */
.guide-video-label { display: none; }
body.guide-on .guide-video-label {
  position: absolute; z-index: 7; display: block;
  left: calc(100% - var(--safe) - 28vw + var(--s3));
  bottom: calc(100% - var(--s4) - var(--gbar) - var(--s4) - 15.75vw + var(--s3));
  max-width: calc(28vw - 2 * var(--s3)); padding: 0.25em 0.75em;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(8, 9, 12, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-xs);
  pointer-events: none;
}
body.guide-on .guide-video-label::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.5em; border-radius: 50%; background: var(--rec); vertical-align: 0.05em; }
body.guide-on .guide-video-label:empty { display: none; }
body.guide-on .banner, body.guide-on .controls, body.guide-on .timeline, body.guide-on .list { display: none !important; }
body.guide-on .digits { z-index: 7; }
@media (prefers-reduced-motion: no-preference) {
  #video { transition: top 0.25s var(--ease), right 0.25s var(--ease), width 0.25s var(--ease), height 0.25s var(--ease); }
}
/* Phones: the toolbar one row that scrolls sideways, the panel (two lines)
   beside a smaller window. */
@media (max-width: 600px) {
  body.guide-on { --gbar: calc(44px + 2 * var(--s1)); }
  .guide-top { grid-template-columns: minmax(0, 1fr) 40vw; grid-template-rows: auto minmax(22.5vw, auto); gap: var(--s3); padding: var(--s3) var(--s4) var(--s2); }
  .guide-bar { padding: 0 var(--s1); }
  .guide-bar .tab { padding-left: 0.85em; padding-right: 0.85em; }
  .guide-bar .guide-nav { flex: none; }
  .guide-bar .guide-when { flex: none; padding: 0 var(--s2); }
  .guide-overlay .guide { padding: 0 var(--s4) 1rem; }
  body.guide-on #video { top: calc(var(--s3) + var(--gbar) + var(--s3)); right: var(--s4); width: 40vw; height: 22.5vw; }
  body.guide-on .guide-video-label {
    left: calc(100% - var(--s4) - 40vw + var(--s2));
    bottom: calc(100% - var(--s3) - var(--gbar) - var(--s3) - 22.5vw + var(--s2));
    max-width: calc(40vw - 2 * var(--s2));
  }
  .guide-video-label .name { display: none; } /* the number is enough on a window this small */
}