/* The whole look: 2005 navy Sky Guide on a 640x480 stage. Every rule is scoped under .sky-app. */
.sky-app {
  --navy: #26205e; --cell: #002db6; --cell-edge: #3c6cfe; --glow: #d2dfff; --yellow: #fcda15; --arrow: #ffe54f; --ink: #0000b3;
  --red: #c20106; --green: #67d66d; --yel: #fecf5b; --blue: #0025c9;
  position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; color: #fff;
  font: bold 15px Arial, Helvetica, sans-serif; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sky-app *, .sky-app *::before, .sky-app *::after { box-sizing: border-box; }
.sky-app [hidden] { display: none !important; }
.sky-app [data-action], .sky-app [data-row] { cursor: pointer; }
.sky-app [data-fit] { display: block; overflow: hidden; white-space: nowrap; min-width: 0; }

/* ---------- stage, CRT, cut ---------- */
.sky-app .sg-stage { position: absolute; transform-origin: 0 0; overflow: hidden; background: #000; }
.sky-app .sg-crt { position: absolute; inset: 0; overflow: hidden; border-radius: 1.5% / 2%; }
.sky-app .sg-screen { position: absolute; inset: 0; overflow: hidden; background: #000; filter: url(#sg-l288) saturate(1.15) contrast(1.05); }
/* scanlines removed (owner, 19 Oct 2026). 288-line softness (svg filter in core.js) and the stronger vignette: owner, Round 4 */
.sky-app .sg-defs { position: absolute; }
.sky-app .sg-crt::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.46) 100%); box-shadow: inset 0 0 60px rgba(0,0,0,0.55); }
.sky-app .sg-cut { position: absolute; inset: 0; background: #000; z-index: 50; }

/* ---------- frame ---------- */
.sky-app .sg-frame, .sky-app .sg-watch { position: absolute; inset: 0; }
.sky-app .sg-frame { background:
  radial-gradient(90% 40% at 15% 75%, rgba(255,255,255,0.32), rgba(255,255,255,0) 70%),
  radial-gradient(60% 35% at 95% 30%, rgba(255,255,255,0.22), rgba(255,255,255,0) 70%),
  linear-gradient(90deg, #a2c0fc, #3951f3); }
.sky-app .sg-top { position: absolute; left: 0; right: 0; top: 0; height: 95px; background: var(--navy); border-bottom: 3px solid var(--glow); }
.sky-app .sg-clock { position: absolute; left: 55px; top: 31px; font-size: 15px; line-height: 18px; white-space: nowrap; }
.sky-app .sg-title { position: absolute; left: 55px; right: 20px; top: 50px; font-size: 22px; line-height: 26px; }
.sky-app .sg-title[data-fit] { display: block; }
.sky-app .sg-mid { position: absolute; left: 0; right: 0; top: 95px; bottom: 62px; }
.sky-app .sg-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; background: var(--navy); font-size: 16px; }
.sky-app .sg-press { position: absolute; left: 55px; top: 3px; line-height: 24px; white-space: nowrap; }
.sky-app .sg-select { background: var(--yellow); color: var(--ink); padding: 1px 4px; }
.sky-app .sg-sound { position: absolute; right: 38px; top: 7px; width: 28px; height: 22px; color: #fff; }
.sky-app .sg-sound svg { width: 100%; height: 100%; display: block; }
.sky-app .sg-sound .cross { display: none; }
.sky-app.sound-off .sg-sound .cross { display: block; }
.sky-app.sound-off .sg-sound .wave { display: none; }

.sky-app .sg-legend { position: absolute; left: 0; right: 0; top: 398px; height: 20px; color: #000010; font-size: 15px; } /* near-black: the gradient is pale blue at the left, strong blue by Home, and dark ink fell to 2.5:1 there */
.sky-app .sg-leg { position: absolute; top: 0; height: 22px; min-width: 62px; display: flex; align-items: center; gap: 5px; }
.sky-app .sg-leg:nth-child(1) { left: 55px; } .sky-app .sg-leg:nth-child(2) { left: 188px; }
.sky-app .sg-leg:nth-child(3) { left: 322px; } .sky-app .sg-leg:nth-child(4) { left: 455px; }
.sky-app .sg-sq { display: inline-block; width: 12px; height: 12px; flex: none; }
.sky-app .sg-sq.red, .sky-app .icon-box.sg-red { background: var(--red); }
.sky-app .sg-sq.green, .sky-app .icon-box.sg-green { background: var(--green); }
.sky-app .sg-sq.yel, .sky-app .icon-box.sg-yel { background: var(--yel); }
.sky-app .sg-sq.blue, .sky-app .icon-box.sg-blue { background: var(--blue); }

/* ---------- lists: menu ---------- */
.sky-app .sg-list { position: absolute; }
.sky-app .sg-menu { left: 103px; top: 35px; width: 434px; }
.sky-app .sg-item { display: flex; align-items: center; height: 24px; margin-bottom: 3px; background: var(--cell); box-shadow: inset 0 0 0 2px var(--cell-edge); font-size: 17px; }
.sky-app .sg-n { width: 44px; align-self: stretch; display: flex; align-items: center; justify-content: center; margin: 2px 0 2px 2px; background: #00137d; color: #758ae5; flex: none; }
.sky-app .sg-t { flex: 1; padding-left: 14px; }
.sky-app .sg-item.is-sel { background: var(--yellow); color: var(--ink); box-shadow: none; }
.sky-app .sg-item.is-sel .sg-n { background: #fec200; color: var(--ink); margin: 0; width: 46px; }

/* ---------- lists: grid ---------- */
.sky-app .sg-ghead { position: absolute; left: 55px; width: 530px; top: 9px; height: 18px; color: var(--ink); }
.sky-app .sg-today { position: absolute; right: 355px; top: 0; line-height: 18px; }
.sky-app .sg-htimes { position: absolute; left: 185px; width: 345px; top: 0; height: 18px; }
.sky-app .sg-ht { position: absolute; top: 0; line-height: 18px; white-space: nowrap; }
.sky-app .sg-grid { left: 55px; width: 530px; top: 30px; height: 270px; overflow: visible; }
.sky-app .sg-grow { position: relative; height: 24px; margin-bottom: 3px; }
.sky-app .sg-chan { position: absolute; left: 0; width: 175px; height: 24px; display: flex; align-items: center; padding-left: 6px; background: var(--cell); box-shadow: inset 0 0 0 2px var(--cell-edge); }
.sky-app .sg-num { flex: none; margin-right: 6px; }
.sky-app .sg-cn { flex: 1; }
.sky-app .sg-progs { position: absolute; left: 185px; width: 345px; top: 0; height: 24px; }
.sky-app .sg-cell { position: absolute; top: 0; height: 24px; margin-left: 1.5px; margin-right: 1.5px; background: var(--cell); box-shadow: inset 0 0 0 2px var(--cell-edge); display: flex; align-items: center; padding-left: 6px; padding-right: 3px; }
.sky-app .sg-ct { flex: 1; line-height: 24px; }
.sky-app .sg-ct.sg-info { flex: none; width: 14px; height: 14px; line-height: 14px; border: 2px solid currentColor; border-radius: 50%; text-align: center; font-size: 12px; font-weight: bold; box-sizing: content-box; }
.sky-app .sg-grow.is-sel .sg-chan, .sky-app .sg-grow.is-sel .sg-cell.is-now { background: var(--yellow); color: var(--ink); box-shadow: none; }
.sky-app .sg-empty { position: absolute; left: 0; width: 530px; height: 24px; line-height: 24px; padding-left: 6px; background: var(--cell); box-shadow: inset 0 0 0 2px var(--cell-edge); }
.sky-app .sg-cell.cut-l::before, .sky-app .sg-cell.cut-r::after { content: ""; position: absolute; top: 6px; width: 0; height: 0; border: 6px solid transparent; }
.sky-app .sg-none { opacity: .45; }
.sky-app .sg-cell.cut-l::before { left: -10px; border-right: 7px solid var(--arrow); border-left: 0; }
.sky-app .sg-cell.cut-r::after { right: -13px; border-left: 8px solid var(--arrow); border-right: 0; }
.sky-app .sg-arrow { position: absolute; width: 0; height: 0; border: 7px solid transparent; }
.sky-app .sg-arrow.d { left: 565px; top: 295px; border-top: 7px solid var(--arrow); border-bottom: 0; }
.sky-app .sg-arrow.u { left: 565px; top: 4px; border-bottom: 7px solid var(--arrow); border-top: 0; }

/* ---------- watching ---------- */
.sky-app .sg-watch { background: #000; }
.sky-app .sg-box { position: absolute; inset: 0; background: #000; overflow: hidden; }
.sky-app .sg-box video, .sky-app .sg-box iframe, .sky-app .sg-box .sg-still { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sky-app .sg-box video { object-fit: fill; background: #000; }
.sky-app .sg-box .sg-still { object-fit: contain; }
.sky-app .sg-banner { position: absolute; left: 10px; bottom: 56px; width: 620px; }
.sky-app .sg-banner .sky-title, .sky-app .sg-banner .sky-channel { text-overflow: clip; }
.sky-app .sg-redprompt { position: absolute; right: 20px; top: 24px; display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #003399; font-size: 14px; }
.sky-app .sg-redprompt i { width: 12px; height: 12px; background: var(--red); display: block; }
/* message box after the Sky+ simulator's ErrorMessage: yellow header strip over a #003399 body */
.sky-app .sg-card { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 80%; padding: 0 18px 16px; background: #003399; text-align: center; font-size: 20px; line-height: 26px; letter-spacing: 0.5px; z-index: 4; }
.sky-app .sg-card::before { content: "For your information"; display: block; margin: 0 -18px 14px; background: var(--yellow); color: var(--ink); text-transform: uppercase; font-size: 17px; line-height: 26px; letter-spacing: 0.4px; }
.sky-app .sg-drift { position: absolute; inset: 40px; }
/* Each axis is a box as long as the card's travel, slid by its own length with transform only (no left/top),
   so the move runs on the compositor in sub-pixel steps instead of re-laying-out and snapping to whole pixels. */
.sky-app .sg-dx { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% - 200px); animation: sg-dx 37s ease-in-out infinite alternate; will-change: transform; }
.sky-app .sg-dy { position: absolute; left: 0; top: 0; width: 200px; height: calc(100% - 200px); animation: sg-dy 23s ease-in-out infinite alternate; will-change: transform; }
.sky-app .sg-dy img { width: 200px; height: 200px; display: block; object-fit: cover; }
@keyframes sg-dx { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes sg-dy { from { transform: translateY(0); } to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sky-app .sg-dx { animation: none; transform: translateX(50%); }
  .sky-app .sg-dy { animation: none; transform: translateY(50%); }
}

/* ---------- red button ---------- */
.sky-app .sg-notes { position: absolute; left: 55px; width: 530px; top: 30px; height: 267px; overflow: hidden; background: #003399; padding: 8px 10px; line-height: 20px; white-space: pre-wrap; }
.sky-app .sg-notes.has-compare { top: 90px; height: 207px; }
.sky-app .sg-cmp { position: absolute; left: 55px; width: 530px; top: 30px; }
.sky-app .sg-cmp .sg-item { padding-left: 14px; }
.sky-app .sg-cmp .sg-item span { flex: 1; }

/* ---------- portrait: the same 4:3 screen, letterboxed, with a quiet rotate icon bottom right underneath ---------- */
.sky-app .sg-turn { display: none; position: absolute; right: 16px; width: 24px; height: 20px; color: #8c8c98; pointer-events: none; }
.sky-app .sg-turn svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.sky-app .sg-turn .arrow { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sky-app.is-portrait .sg-turn { display: block; }

/* ---------- full screen button (phones, where the browser allows it; see Sky.fullscreen in app/core.js) ---------- */
.sky-app .sg-full { display: none; position: absolute; width: 44px; height: 44px; align-items: center; justify-content: center; color: #8c8c98; }
.sky-app .sg-full svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sky-app.can-full .sg-full { display: flex; }
.sky-app.is-portrait .sg-full { left: 5px; }
.sky-app.is-landscape .sg-full { right: 0; top: 0; color: rgba(255, 255, 255, 0.55); } /* in the top band, right of the title */
.sky-app.is-landscape[data-screen=watching] .sg-full { display: none; } /* never over a programme */

/* ---------- light shader switch (off by default; see app/crt.js) ---------- */
.sky-app .sg-light { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.sky-app .sg-crt.light-on .sg-screen { filter: none; }
.sky-app .sg-crt.light-on.light-off .sg-light { display: none; }
.sky-app .sg-crt.light-on:not(.light-off) .sg-watch, .sky-app .sg-crt.light-on:not(.light-off) .sg-box { background: transparent; }
.sky-app .sg-crt.light-on:not(.light-off) .sg-screen { background: #000; }

/* ---------- 2001 colour scheme (?theme=2001, remembered; ?theme=2005 turns it off): lighter blue bands, gold bar ---------- */
.sky-app.theme-2001 { --navy: #3b73e8; --cell: #1a3db3; --cell-edge: #86a6f2; --glow: #e6eeff; --yellow: #fdb913; --arrow: #ffb400; --ink: #14184f; --blue: #1a3db3; }
.sky-app.theme-2001 .sg-frame { background:
  radial-gradient(80% 45% at 12% 80%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%),
  radial-gradient(60% 35% at 90% 25%, rgba(255,255,255,0.45), rgba(255,255,255,0) 70%),
  linear-gradient(90deg, #aebff3, #dbe4fa 55%, #c6d3f6); }
.sky-app.theme-2001 .sg-top { border-bottom-color: #fff; }

/* Banner, after davwheat/sky-plus-web-simulator (SearchAndScan.tsx, MPL-2.0): white box, pale-blue rules above and below the blue
   block, NOW in white, next line faded, footer in the same blue. App only; the generator keeps banner.css as is. */
.sky-app .sg-banner { left: 64px; width: 512px; }
.sky-app .sg-banner .sky-banner { width: 100%; border: 0; background: #fff; }
.sky-app .sg-banner .sky-header { background: #fff; color: #002db6; height: 27px; padding: 0 6px; border-bottom: 3px solid #99aaee; font-size: 17px; }
.sky-app .sg-banner .sky-tick { display: none; }
.sky-app .sg-banner .sky-clock { color: #99aaee; }
.sky-app .sg-banner .sky-now-row { padding-top: 4px; }
.sky-app .sg-banner .sky-next-row { padding-bottom: 4px; }
.sky-app .sg-banner .sky-row { height: auto; min-height: 24px; padding-left: 36px; border-bottom: 0; background: #2144c4; background-image: none; }
.sky-app .sg-banner .sky-badge { width: 92px; height: auto; justify-content: flex-start; background: none; color: #fff; font-size: 17px; }
.sky-app .sg-banner .sky-title { padding: 0; font-size: 17px; }
.sky-app .sg-banner .sky-next-row .sky-badge, .sky-app .sg-banner .sky-next-row .sky-title { color: #99aaee; }
.sky-app .sg-banner .sky-footer { background: #fff; color: #002db6; height: 27px; border-top: 3px solid #99aaee; font-size: 15px; justify-content: space-between; padding: 0 10px; }
/* Down-res look for the banner, to sit with the menu: a touch more softness, colour bleed on the text, and the
   same glass vignette the menu gets (the banner is mid-screen, so the screen-wide vignette barely reaches it). */
.sky-app .sg-banner { filter: url(#sg-l288) saturate(1.1); }
.sky-app .sg-banner .sky-banner { text-shadow: 0.6px 0 0 currentColor, -0.4px 0 0 rgba(0,45,182,0.25); box-shadow: inset 0 0 14px rgba(0,19,125,0.35); }

/* ---------- Round 5: 16:9 on landscape phones (owner, 19 Oct 2026). The stage is 854 wide (core.js adds .is-wide);
   bands and frame run full width, menu, legend, banner and cards keep their 4:3 size centred (+107px), and the grid
   widens to show 2 1/2 hours. 16:9 clips play unsquashed; 4:3 ones get side bars. ---------- */
.sky-app.is-wide .sg-menu { left: 210px; }
.sky-app.is-wide .sg-arrow.d, .sky-app.is-wide .sg-arrow.u { left: 672px; }
.sky-app.is-wide .sg-legend { left: 107px; right: 107px; }
.sky-app.is-wide .sg-banner { left: 171px; }
.sky-app.is-wide .sg-card { width: 512px; }
.sky-app.is-wide .sg-notes, .sky-app.is-wide .sg-cmp { left: 162px; }
.sky-app.is-wide .sg-ghead, .sky-app.is-wide .sg-grid { width: 744px; }
.sky-app.is-wide .sg-htimes, .sky-app.is-wide .sg-progs { width: 559px; }
.sky-app.is-wide .sg-today { right: 569px; }
.sky-app.is-wide .sg-empty { width: 744px; }
.sky-app.is-wide[data-screen=grid] .sg-arrow.d, .sky-app.is-wide[data-screen=grid] .sg-arrow.u { left: 779px; }
.sky-app.is-wide .sg-box video { object-fit: contain; }

/* ---------- Round 5c: accessibility (owner, 20 Oct 2026) ---------- */
/* Screen reader announcements: read out, never seen. */
.sky-app .sg-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Thumb-sized tap areas on landscape phones (stage at ~0.8 scale): invisible, the look is unchanged. Each button's hit
   area grows to at least 54 stage px (44 px on screen) without covering another button or the grid's last row. */
.sky-app.is-wide .sg-legend { z-index: 1; }
.sky-app.is-wide .sg-leg::before { content: ""; position: absolute; left: -8px; right: -8px; top: -9px; bottom: -27px; }
.sky-app.is-wide .sg-select { position: relative; z-index: 2; }
.sky-app.is-wide .sg-select::before { content: ""; position: absolute; left: -6px; right: -6px; top: -4px; bottom: -34px; }
.sky-app.is-wide .sg-sound::before { content: ""; position: absolute; left: -14px; right: -14px; top: -7px; bottom: -25px; }
.sky-app.is-wide .sg-banner .sky-btn { position: relative; }
.sky-app.is-wide .sg-banner .sky-btn::before { content: ""; position: absolute; left: -6px; right: -6px; top: -18px; bottom: -18px; }
.sky-app.is-wide .sg-redprompt::before { content: ""; position: absolute; left: -6px; right: -6px; top: -16px; bottom: -16px; }
/* Clear layer over YouTube clips: every tap is the app's, so the banner (BACK / HOME) always comes back. */
.sky-app .sg-box { isolation: isolate; } /* keeps the layer below the banner, BACK / HOME and the red prompt */
.sky-app .sg-box .sg-tapguard { position: absolute; inset: 0; z-index: 3; }