/* guide.css — the TV Guide, Catch Up and the programme reminders' sheet and card
 * (screens/guide/GuideScreen.kt, CatchUpScreen.kt, ui/RemindersSheet.kt, ui/ReminderOverlay.kt).
 * Sizes are the Android app's dp values in CSS pixels; the grid's own sizes come from guide.js
 * (guideDims) as CSS variables. */

/* A copy of the app's background (theme.css #app) lined up with the real one by --bd-* (guide/util.js
 * matchBackdrop), for the parts things scroll under: they look clipped rather than covered. */
.bd-match { background-color: var(--bg); }
:root[data-background="gradient"] .bd-match {
  background-image:
    radial-gradient(ellipse 70% 55% at 12% 0%, rgba(var(--accent-rgb), var(--wash-a)), transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(var(--accent-rgb), var(--wash-b)), transparent 70%),
    linear-gradient(180deg, var(--bg-top), var(--bg));
  background-size: var(--bd-w, 100%) var(--bd-h, 100%);
  background-position: calc(0px - var(--bd-x, 0px) - var(--bd-dx, 0px)) calc(0px - var(--bd-y, 0px) - var(--bd-dy, 0px));
  background-repeat: no-repeat;
}

/* ======================= TV Guide ======================= */
.guide .gd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-top: var(--gd-space, 8px); padding-bottom: calc(var(--safe-bottom) + 14px); }
.gd-bar { flex: none; }
.gd-bar .topbar-actions .chip { max-width: 240px; }
.gd-bar .topbar-actions .chip span { overflow: hidden; text-overflow: ellipsis; }
.gd-main { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.gd-main > .state { flex: 1; }

/* the detail strip (DetailStrip): 94 tall (82 compact, 54 on short screens) */
.gd-detail { height: var(--gd-detail, 94px); flex: none; display: flex; flex-direction: column; justify-content: center; margin-bottom: var(--gd-space, 8px); min-width: 0; }
.gd-d-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gd-d-title { flex: 0 1 auto; min-width: 0; }
.gd-d-top .badge { flex: none; }
.badge.gd-muted { background: var(--surface-high); color: var(--text-2); }
.gd-d-meta { display: flex; align-items: center; margin-top: 3px; min-width: 0; }
.gd-d-meta > .t-subhead { flex: 0 1 auto; min-width: 0; }
.gd-d-prog { width: 120px; flex: none; margin-left: 12px; }
.guide.gd-compact .gd-d-prog { width: 64px; }
.gd-d-left { margin-left: 8px; flex: none; white-space: nowrap; }
.gd-d-desc { margin-top: 5px; max-width: 760px; }
.gd-d-off { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gd-d-ico { display: inline-flex; flex: none; }

/* the grid: one scroller; the canvas holds every layer in one grid cell, each sized by the script */
.gd-grid { position: relative; flex: 1; min-height: 0; }
.gd-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: none; overflow-anchor: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gd-scroll::-webkit-scrollbar { display: none; }
.gd-canvas { position: relative; isolation: isolate; display: grid; width: var(--gd-w, 100%); height: var(--gd-h, 100%); grid-template-columns: var(--gd-w, 100%); grid-template-rows: var(--gd-h, 100%); }
.gd-canvas > * { grid-area: 1 / 1; align-self: start; justify-self: start; }

/* the programmes: rows placed by the script, cells by time (radius 10, 4 apart) */
.gd-cells { position: relative; width: var(--gd-w); height: var(--gd-h); z-index: 1; }
.gr { position: absolute; left: var(--gd-strip); top: 0; width: var(--gd-sw); height: var(--gd-cell); }
.gc { position: absolute; left: 0; top: 0; height: 100%; border-radius: 10px; overflow: hidden; contain: strict; background: var(--surface); color: var(--text); transition: background-color 120ms; }
.gc.past { background: color-mix(in srgb, var(--surface) 50%, transparent); }
.gc.onair { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
.gc.note { background: color-mix(in srgb, var(--surface) 32%, transparent); }
:root[data-theme="light"] .gc.past { background: color-mix(in srgb, var(--surface) 62%, transparent); }
:root[data-theme="light"] .gc.onair { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
:root[data-theme="light"] .gc.note { background: color-mix(in srgb, var(--surface) 45%, transparent); }
.gc-in { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 0 10px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.gc-in.tight { padding: 0 6px; }
.gc-in.glide { transition: left 200ms var(--ease); }
.gc-t { display: flex; align-items: center; gap: 5px; min-width: 0; font: 600 14px/19px var(--font); white-space: nowrap; }
.gc-t > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gc-t .mi { font-size: 13px; }
.gc-bell { color: var(--accent); }
.gc-time { font: 400 12px/16px var(--font); color: var(--text-2); white-space: nowrap; overflow: hidden; }
.gc.note .gc-t { font: 400 13px/18px var(--font); color: var(--text-3); }
.gc.past .gc-t { color: var(--text-2); }
.gc.past .gc-time { color: var(--text-3); }
.gc-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(var(--accent-rgb), 0.9); }
.gc.hot { background: var(--accent); }
.gc.hot .gc-t, .gc.hot .gc-bell { color: var(--on-accent); }
.gc.hot .gc-time { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }
.gc.hot .gc-bar { background: color-mix(in srgb, var(--on-accent) 55%, transparent); }
/* the line at the time now, over the programmes (its dot is in the header) */
.gd-now { position: absolute; left: 0; top: var(--gd-top); width: 2px; height: calc(max(var(--gd-h), var(--gd-vh, 0px)) - var(--gd-top)); background: var(--accent); z-index: 2; pointer-events: none; }

/* the channel column: sticky to the left over a copy of the background (the gap included) */
.gd-colmask { position: sticky; left: 0; top: var(--gd-top); margin-top: var(--gd-top); width: var(--gd-strip); height: calc(min(var(--gd-vh, 100%), var(--gd-h)) - var(--gd-top)); z-index: 3; --bd-dy: var(--gd-top); }
.gd-col { position: sticky; left: 0; width: var(--gd-colw); height: var(--gd-h); z-index: 4; pointer-events: none; }
.gch { position: absolute; left: 0; top: 0; width: var(--gd-colw); height: var(--gd-cell); display: flex; align-items: center; padding: 0 8px; border-radius: 10px; color: var(--text); pointer-events: auto; transition: background-color 120ms; }
.gch.hot { background: var(--surface-high); }
.gch-num { min-width: 26px; margin-right: 6px; font: 600 12px/16px var(--font); color: var(--text-3); flex: none; white-space: nowrap; }
.gch .chlogo { margin-right: 10px; }
.gd-grid.gd-small .gch .chlogo { margin-right: 6px; }
.gch-text { flex: 1; min-width: 0; }
.gch-name { font: 600 13px/18px var(--font); }
.gch-meta { display: flex; align-items: center; gap: 4px; font: 400 11px/14px var(--font); color: var(--text-3); white-space: nowrap; }
.gch-meta .mi { font-size: 11px; }

/* the time header: sticky to the top over a copy of the background, a hairline under it */
.gd-headmask { position: sticky; left: 0; top: 0; width: var(--gd-vw, 100%); height: var(--gd-top); z-index: 5; }
.gd-headmask::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--separator); }
.gd-ticks { position: sticky; top: 0; width: var(--gd-w); height: 30px; z-index: 6; pointer-events: none; }
.gt { position: absolute; left: 0; top: 0; height: 30px; display: flex; align-items: center; }
.gt::before { content: ''; position: absolute; left: 0; bottom: 0; width: 1px; height: 5px; background: var(--separator); }
.gt.hour::before { height: 9px; }
.gt span { padding-left: 6px; font: 400 12px/16px var(--font); color: var(--text-3); white-space: nowrap; }
.gt.hour span { font-weight: 600; color: var(--text-2); }
.gd-nowdot { position: absolute; left: 0; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.gd-nowdot::after { content: ''; position: absolute; left: 3px; top: 4px; width: 2px; height: 5px; background: var(--accent); }
/* the corner: the day at the left edge (tap: go to another day) */
.gd-corner { position: sticky; left: 0; top: 0; width: var(--gd-strip); height: 30px; z-index: 7; display: flex; align-items: center; }
.gd-day { display: inline-flex; align-items: center; gap: 2px; height: 28px; max-width: var(--gd-colw); padding: 0 6px 0 8px; border-radius: 8px; font: 600 12px/16px var(--font); color: var(--text-2); }
.gd-day .mi { font-size: 16px; color: var(--text-3); }
.gd-day.hot { background: var(--surface-high); color: var(--text); }
/* "Showing the first 500 of …" under the rows */
.gd-more { position: sticky; left: 0; align-self: end !important; width: var(--gd-vw, 100%); padding: 0 0 18px 6px; z-index: 4; }

/* the programme's details (ProgrammeSheet) */
.sheet-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gd-sheet { padding-bottom: 4px; }
.gd-sheet-status { margin-top: 4px; font: 600 12px/16px var(--font); color: var(--accent); }
.gd-sheet-desc { margin-top: 12px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.gd-sheet-col { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.gd-sheet-col .btn { width: 100%; }
.gd-sheet-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }

/* ======================= Reminders (RemindersSheet, ReminderOverlay) ======================= */
.rem-list { display: flex; flex-direction: column; gap: 8px; }
.rem-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); min-width: 0; }
.rem-row .btn { flex: none; }
.sheet-foot { display: flex; justify-content: flex-end; margin-top: 16px; padding-bottom: 4px; }
.rem-wrap { z-index: 75; }
.dialog.rem-card { max-width: 500px; width: 92%; padding: 22px; }
.rem-top { display: flex; align-items: center; gap: 6px; }
.rem-top > .ca { display: inline-flex; }
.rem-label { margin-right: 6px; font: 600 11px/14px var(--font); letter-spacing: 0.56px; color: var(--accent); }
.rem-main { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.rem-main .t-title2 + .t-subhead { margin-top: 4px; }
.rem-card .d-btns { margin-top: 22px; }

/* ======================= Catch Up ======================= */
.catchup.std { display: flex; flex-direction: column; }
.cu-probe { position: absolute; left: 0; right: 0; top: 0; height: 0; visibility: hidden; pointer-events: none; }
.cu-bar { flex: none; }
.cu-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: calc(var(--safe-bottom) + 14px); }
.cu-body > .state { flex: 1; }
.cu-chips { display: flex; gap: 8px; padding: 4px 0 2px; flex: none; min-width: 0; }
.cu-chips .chip { min-width: 0; }
.cu-chips .chip span { overflow: hidden; text-overflow: ellipsis; }

/* wide: categories (210) · channels (44%) · programmes (56%), 18 apart, as Live TV */
.cu-wide { position: absolute; inset: 0; display: flex; gap: 18px; padding: calc(var(--safe-top) + 14px) calc(var(--pad-h) + var(--safe-right)) calc(var(--safe-bottom) + 14px) calc(var(--pad-h) + var(--safe-left)); }
.cu-cats { width: 210px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.cu-cathead { display: flex; align-items: center; gap: 10px; padding: 0 0 6px 4px; flex: none; min-width: 0; }
.cu-side { position: relative; flex: 1; min-height: 0; padding: 6px 0 12px; display: flex; flex-direction: column; gap: 2px; }
.cu-cat { gap: 6px; }
.cu-count { font: 400 12px/16px var(--font); color: var(--text-3); flex: none; }
.side-row.hot .cu-count { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.cu-chans { flex: 0.44 1 0; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.cu-colhead { height: 48px; flex: none; display: flex; flex-direction: column; justify-content: center; margin-bottom: 6px; min-width: 0; }
.cu-chlist { flex: 1; min-height: 0; }
/* a channel (CatchUpChannelRow): 58 tall, radius 12; the one shown tinted */
.cu-ch { display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 12px; color: var(--text); transition: background-color 120ms; }
.cu-ch.sel { background: var(--accent-soft); }
.cu-ch-name { font: 600 15px/20px var(--font); letter-spacing: -0.1px; }
.cu-ch.sel .cu-ch-name { color: var(--accent); font-weight: 700; }
.cu-ch-sub { display: flex; align-items: center; gap: 5px; font: 400 12px/16px var(--font); color: var(--text-2); min-width: 0; }
.cu-ch-sub .mi { font-size: 13px; }
.cu-ch.hot { background: var(--accent); }
.cu-ch.hot .cu-ch-name { color: var(--on-accent); }
.cu-ch.hot .cu-ch-sub { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.cu-right { flex: 0.56 1 0; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.cu-chhead { height: 48px; flex: none; display: flex; align-items: center; gap: 12px; margin-bottom: 4px; min-width: 0; }

/* the programmes: day chips, the day's header and the list */
.cu-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.cu-pane > .state { flex: 1; }
.cu-days { position: relative; display: flex; gap: 8px; padding: 8px 4px; flex: none; }
.cu-dayhead { padding-top: 4px; flex: none; }
.cu-progs { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 20px; }
/* a programme (CatchUpProgrammeRow): at least 72 tall (64 narrow), radius 12; the one on now tinted */
.cu-prog { display: flex; align-items: center; min-height: 72px; padding: 12px 16px; border-radius: 12px; background: var(--surface); color: var(--text); flex: none; transition: background-color 120ms; }
.cu-prog.narrow { min-height: 64px; }
.cu-prog.onair { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); }
.cu-when { width: 132px; flex: none; margin-right: 14px; }
.cu-range { font: 600 13px/18px var(--font); white-space: nowrap; }
.cu-dur { margin-top: 2px; color: var(--text-3); }
.cu-range-line { font: 600 12px/16px var(--font); color: var(--text-2); }
.cu-title { display: flex; align-items: center; gap: 8px; font: 600 15px/20px var(--font); letter-spacing: -0.1px; min-width: 0; }
.cu-title .ellipsis { min-width: 0; }
.cu-title .badge { flex: none; }
.cu-onnow { color: var(--accent); }
.cu-desc { margin-top: 3px; color: var(--text-2); }
.cu-go { margin-left: 12px; color: var(--text-3); display: inline-flex; flex: none; }
.cu-prog.hot { background: var(--accent); color: var(--on-accent); }
.cu-prog.hot .cu-range-line, .cu-prog.hot .cu-desc, .cu-prog.hot .cu-onnow { color: color-mix(in srgb, var(--on-accent) 82%, transparent); }
.cu-prog.hot .cu-dur, .cu-prog.hot .cu-go { color: color-mix(in srgb, var(--on-accent) 70%, transparent); }