/* streams.css — the streaming-service layouts (home-streams.js; Android StreamParts.kt): Netflix (its 2025
 * look), Disney (Disney's 2025 look) and Prime (Prime Video's 2024 look). Each sets its own page and colours over the
 * app's theme, inside the layout only. */

.stream { position: relative; min-height: var(--lh); color: var(--text); }
.stream.nf { --bg: #000; --surface: #232323; --surface-high: #2D2D2D; --text: #fff; --text-2: #B3B3B3; --accent: #E50914; --accent-rgb: 229,9,20; --s-card: #232323; background: #000; }
.stream.dp { --bg: #131419; --surface: #2D2F36; --surface-high: #3A3C45; --text: #F9F9F9; --text-2: #CACACA; --accent: #0063E5; --accent-rgb: 0,99,229; --s-card: #2D2F36; background: linear-gradient(#1A1D29, #131419 70%); }
.stream.pv { --bg: #00050D; --surface: #1B1F26; --surface-high: #33373D; --text: #fff; --text-2: #B3B3B3; --accent: #1A98FF; --accent-rgb: 26,152,255; --s-card: #1B1F26; --mint: #37F1A3; background: #00050D; }
.screen.home:has(> .stream.nf) { background: #000; }
.screen.home:has(> .stream.dp) { background: #131419; }
.screen.home:has(> .stream.pv) { background: #00050D; }

/* ---------------------------------------------------------------- the buttons (StreamButton) */
.sb { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border: 0; color: #fff; font: 700 15px/1 var(--font); background: rgba(255,255,255,0.22); flex: none; }
.sb .mi { font-size: 22px; }
.sb.primary { background: #fff; color: #141414; }
.nf .sb { border-radius: 999px; background: rgba(255,255,255,0.25); }
.nf .sb.primary { background: #fff; }
.dp .sb { border-radius: 4px; background: rgba(45,47,54,0.92); text-transform: uppercase; letter-spacing: 1.6px; font-size: 14px; }
.dp .sb.primary { background: #fff; color: #17171B; }
.pv .sb { border-radius: 8px; background: #33373D; }
.pv .sb.primary { background: #fff; color: #0F171E; }
.pv .sb.outlined { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45); }
.hx-btns { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- heroes (heroView) */
.hx { position: relative; overflow: hidden; }
.hx-art, .hx-slide { position: absolute; inset: 0; }
.hx-slide { transition: opacity 700ms var(--ease); }
.hx-slide.entering { opacity: 0; }
.hx-slide .rimg { position: absolute; inset: 0; background: transparent; }
.hx-plain { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb),0.35), transparent); }
.hx-wait { position: absolute; inset: 0; }
.hx-shade-h, .hx-shade-v { position: absolute; inset: 0; pointer-events: none; }
.hx-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; align-items: center; }
.hx-body { position: absolute; z-index: 2; bottom: 26px; max-width: 420px; }
.hx-dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; pointer-events: none; }
.hx-plot { font: 400 14px/19px var(--font); color: rgba(255,255,255,0.88); text-shadow: 0 1px 6px rgba(0,0,0,0.55); margin-top: 6px; }
.hx-welcome { font: 700 30px/36px var(--font); color: #fff; }
.stream-logo .sl-text { font: 700 30px/36px var(--font); color: #fff; letter-spacing: -0.5px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); margin-bottom: 8px; }
.stream-logo .title-art-img { max-height: 76px; max-width: min(260px, 40vw); margin-bottom: 10px; }

/* ---------------------------------------------------------------- cards and rows */
.sr-rows { gap: 18px; padding-top: 4px; }
.sr-title { font: 700 17px/22px var(--font); color: var(--text); margin-bottom: 2px; }
.sr-cards { gap: 14px; padding-top: 8px; padding-bottom: 8px; }
.sc { position: relative; display: block; flex: none; border: 0; padding: 0; overflow: hidden; border-radius: 8px; background: var(--s-card); color: #fff; text-align: left; }
.sc.sc-wide { width: var(--sc-w, 200px); aspect-ratio: 16 / 9; }
.sc.sc-poster { width: var(--sc-pw, 120px); aspect-ratio: 2 / 3; }
.sc > .rimg, .sc > .chart, .sc > .wa-poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-shade { position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,0.72)); pointer-events: none; }
.sc-cap { position: absolute; left: 9px; right: 9px; bottom: 7px; }
.sc-title { font: 700 14px/17px var(--font); text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.card-logo .title-art-img { max-height: calc(var(--sc-w, 200px) * 0.2); max-width: 60%; margin-bottom: 0; }
.sc-badge { position: absolute; left: 7px; top: 7px; padding: 2px 6px; border-radius: 4px; background: var(--accent); color: #fff; font: 700 10px/14px var(--font); letter-spacing: 0.6px; }
/* A carry-on's episode (Matt): the one under way, or NEXT and the one after the last watched; dark glass on any artwork. */
.sc-badge.ep { background: rgba(0,0,0,0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); letter-spacing: 0.3px; }
.sc-bar { position: absolute; left: 10px; right: 10px; bottom: 9px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.28); overflow: hidden; }
.sc-bar > span { display: block; height: 100%; background: #F9F9F9; }
.pv .sc-bar > span { background: #1A98FF; }
.sc-col { flex: none; width: var(--sc-w, 200px); }
.sc-col .sc { width: 100%; }
.sc-name { margin-top: 7px; font: 600 13px/18px var(--font); color: var(--text); }
.sc-sub { font: 400 12px/16px var(--font); color: var(--text-2); }
.wa-poster .wa-dim { position: absolute; inset: 0; opacity: 0.45; }
.wa-poster .wa-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15)); }
.wa-poster .wa-side { position: absolute; top: 6px; bottom: 6px; right: 6px; aspect-ratio: 2 / 3; border-radius: 4px; }
/* Top 10: the number, large, behind the poster's left (Netflix's black outlined in grey; Prime's pale grey) */
.sc-top { position: relative; flex: none; display: flex; align-items: flex-end; padding-left: calc(var(--sc-pw, 120px) * 0.62); }
.sc-top.wide { padding-left: calc(var(--sc-pw, 120px) * 0.98); }
.sc-num { position: absolute; left: 0; bottom: calc(var(--sc-pw, 120px) * -0.22); font: 900 calc(var(--sc-pw, 120px) * 1.42) / 1 var(--font); letter-spacing: -0.04em; color: var(--bg); -webkit-text-stroke: 3px rgba(255,255,255,0.75); }
.nf .sc-num { color: #000; -webkit-text-stroke-color: #8C8C8C; }
.pv .sc-num { color: #D9D9D9; -webkit-text-stroke-color: #D9D9D9; }
.sc-top .sc, .sc-top .nf-tile { position: relative; margin-left: calc(var(--sc-pw, 120px) * -0.16); }
.nf .sc-top { --sc-pw: var(--nf-w); }
.dp .sc:active, .dp .nf-tile:active { box-shadow: 0 0 0 3px #F9F9F9; }
.pv .sc:active { box-shadow: 0 0 0 3px #00050D, 0 0 0 6px #fff; }
.sr-notice { display: flex; flex-direction: column; gap: 14px; }
.sr-notice.hidden { display: none; }

/* ---------------------------------------------------------------- Netflix */
.nf-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-top) + 8px) calc(var(--pad-h) + var(--safe-right)) 10px calc(var(--pad-h) + var(--safe-left));
  background: linear-gradient(#000 0, #000 84%, rgba(0,0,0,0)); }
.nf-who { flex: none; }
.nf-tabs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; justify-content: safe center; }
.nf-tab { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: rgba(255,255,255,0.82); font: 600 15px/1 var(--font); }
.nf-tab.sel { background: #262626; color: #fff; }
.nf-tab:active { background: #fff; color: #141414; }
.nf-ico { flex: none; width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.nf-ico:active { background: #fff; color: #141414; }
.nf-mark { flex: none; display: inline-flex; }
.nf-hero { position: relative; padding-top: 4px; }
.nf-glow { position: absolute; inset: -40px 0; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--glow, 0,0,0), 0.32), transparent); transition: background 900ms; }
.nf-card { height: min(calc(var(--lh) * 0.7), 440px); border-radius: 16px; background: #232323; }
.nf-card .hx-shade-h { background: linear-gradient(90deg, rgba(0,0,0,0.95) 0, rgba(0,0,0,0.75) 18%, transparent 60%); }
.nf-card .hx-body { left: 22px; right: 22px; bottom: 20px; max-width: 360px; }
.nf-kicker { font: 700 11px/14px var(--font); letter-spacing: 2.4px; color: rgba(255,255,255,0.85); margin-bottom: 8px; }
.nf-meta { font: 600 13px/18px var(--font); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.nf-card .hx-plot { color: #fff; }
.nf-status { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; background: rgba(0,0,0,0.55); color: #fff; font: 600 13px/1 var(--font); }
.nf-status.hidden { display: none; }
.nf-tile { position: relative; flex: none; display: block; width: var(--nf-w, 120px); height: var(--nf-h, 190px); border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: #232323; }
.nf-tile > .rimg, .nf-tile > .chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.nf-tile:active { box-shadow: inset 0 0 0 3px #fff; }
.nf-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.35); }
.nf-bar > span { display: block; height: 100%; background: #E50914; }
.nf-col { flex: none; width: var(--nf-w, 120px); }
.nf-line { margin-top: 7px; font: 600 12px/16px var(--font); color: #fff; }
.nf-left { font: 700 12px/16px var(--font); color: #fff; }
.nf .sr-cards { gap: 8px; }
.nf .sr-title { font-size: 18px; }

/* ---------------------------------------------------------------- the side menu (Disney, Prime) */
.stream.dp, .stream.pv { --rail-w: calc(64px + var(--safe-left)); display: flex; align-items: flex-start; }
.sr-main { display: flex; flex-direction: column; gap: 20px; padding-bottom: 20px; }
/* Beside the menu: the page runs under it (the heroes go edge to edge), its words and rows starting clear of it. */
.stream.dp .sr-main, .stream.pv .sr-main { flex: 1; min-width: 0; margin-left: calc(-1 * var(--rail-w)); }
.stream.dp .sr-main .pad, .stream.pv .sr-main .pad { padding-left: calc(var(--rail-w) + 14px); }
.stream.dp .sr-main .an-strip, .stream.pv .sr-main .an-strip { margin-left: calc(var(--rail-w) + 14px); }
.stream.nf .sr-main { gap: 16px; }
.sr-rail { position: sticky; top: 0; z-index: 30; flex: none; width: var(--rail-w); height: var(--lh); }
.sr-panel { position: absolute; left: 0; top: 0; bottom: 0; width: var(--rail-w); display: flex; flex-direction: column; padding: calc(var(--safe-top) + 10px) 0 calc(var(--safe-bottom) + 10px) var(--safe-left); transition: width 240ms var(--ease); overflow: hidden; }
.sr-scrim { position: absolute; left: 0; top: 0; bottom: 0; width: 100vw; border: 0; padding: 0; opacity: 0; pointer-events: none; transition: opacity 240ms;
  background: linear-gradient(90deg, rgba(0,0,0,0.94) 0, rgba(0,0,0,0.75) 280px, rgba(0,0,0,0) 640px); }
.sr-rail.open .sr-scrim { opacity: 1; pointer-events: auto; }
.sr-rail.open .sr-panel { width: calc(260px + var(--safe-left)); }
/* Who's watching, over the icons: closed, the menu has room for the picture alone (with its arrow too the picture was
   squashed), so the arrow comes with the names. */
.sr-who { padding: 0 0 10px 14px; }
.sr-who .pb-arrow { opacity: 0; transition: opacity 160ms; }
.sr-rail.open .sr-who .pb-arrow { opacity: 0.72; }
.sr-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: none; }
/* Centred while it fits, scrolling from the top when it doesn't (justify-content: center would cut the top off). */
.sr-list > :first-child { margin-top: auto; }
.sr-list > :last-child { margin-bottom: auto; }
.sr-list::-webkit-scrollbar { display: none; }
.sr-item { display: flex; align-items: center; height: 44px; margin: 1px 8px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,0.62); font: 600 16px/1 var(--font); text-align: left; flex: none; }
.sr-item.sel { color: #fff; }
.sr-ico { position: relative; width: 48px; flex: none; display: inline-flex; justify-content: center; }
.sr-dot { position: absolute; top: -2px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sr-label { white-space: nowrap; opacity: 0; transition: opacity 160ms; padding-right: 14px; }
.sr-rail.open .sr-label { opacity: 1; }
.dp .sr-label { text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; }
.pv .sr-item { color: #8B9199; }
.pv .sr-item:active { background: #fff; color: #0F171E; }
.dp .sr-item:active { color: #fff; transform: scale(1.06); }
.sr-corner { display: flex; align-items: center; gap: 10px; flex: none; }
.sr-clock { color: #fff; font: 600 15px/1 var(--font); }

/* ---------------------------------------------------------------- Disney */
.dp-hero { height: calc(var(--lh) * 0.82); }
.dp-hero .hx-shade-h { background: linear-gradient(90deg, rgba(19,20,25,0.95) 0, rgba(19,20,25,0.7) 22%, transparent 60%); }
.dp-hero .hx-shade-v { background: linear-gradient(rgba(19,20,25,0.7) 0, transparent 25%, transparent 62%, #131419 100%); }
.dp-hero .hx-top { padding: calc(var(--safe-top) + 10px) calc(var(--pad-h) + var(--safe-right)) 0 calc(var(--rail-w) + 14px); justify-content: center; }
.dp-hero .hx-top .sr-corner { position: absolute; right: calc(var(--pad-h) + var(--safe-right)); top: calc(var(--safe-top) + 10px); }
.dp-hero .hx-body { left: calc(var(--rail-w) + 20px); bottom: 40px; max-width: 400px; }
.dp-tabs { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(23,23,27,0.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.dp-tab { height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.85); font: 600 14px/1 var(--font); }
.dp-tab.sel { background: rgba(255,255,255,0.18); color: #fff; }
.dp-tab:active { background: #fff; color: #17171B; }
.dp-tag { display: inline-block; padding: 4px 9px; border-radius: 6px; background: #E6E6E8; color: #17171B; font: 700 12px/16px var(--font); margin-bottom: 10px; }
.dp-status { font: 600 15px/20px var(--font); color: #F9F9F9; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.dp-meta { font: 400 13px/18px var(--font); color: #CACACA; margin-top: 2px; }
.dp-dots { display: flex; align-items: center; gap: 8px; }
.dp-dots > span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.45); overflow: hidden; }
.dp-dots > span.on { width: 26px; background: rgba(255,255,255,0.35); }
.dp-dots > span.on > i { display: block; height: 100%; width: 0; background: #fff; animation: dp-fill 9s linear forwards; }
@keyframes dp-fill { to { width: 100%; } }
.dp-brands { display: flex; gap: 14px; }
.dp-brand { position: relative; flex: 1; min-width: 0; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; overflow: hidden; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(#30323E, #1E1F2A); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.1); font: 700 12px/1 var(--font); letter-spacing: 1.4px; }
.dp-brand-glow { position: absolute; inset: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--b) 40%, transparent), transparent); }
.dp-brand > :not(.dp-brand-glow) { position: relative; }
.dp-brand:active { box-shadow: 0 0 0 3px #F9F9F9; transform: scale(1.04); }
.dp .sr-cards { gap: 18px; }

/* ---------------------------------------------------------------- Prime */
.pv-hero { height: calc(var(--lh) * 0.86); }
.pv-hero .hx-shade-h { background: linear-gradient(90deg, rgba(0,5,13,0.95) 0, rgba(0,5,13,0.8) 22%, transparent 58%); }
.pv-hero .hx-shade-v { background: linear-gradient(transparent 50%, #00050D 100%); }
.pv-hero .hx-top { padding: calc(var(--safe-top) + 8px) calc(var(--pad-h) + var(--safe-right)) 0 calc(var(--rail-w) + 6px); gap: 10px; }
.pv-bar { flex: 1; min-width: 0; display: flex; gap: 4px; }
.pv-tab { flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #fff; font: 500 15px/1 var(--font); }
.pv-tab.sel { background: rgba(255,255,255,0.15); }
.pv-tab:active { background: #fff; color: #0F171E; }
.pv-hero .hx-body { left: calc(var(--rail-w) + 14px); bottom: 34px; max-width: 420px; }
.pv-status { font: 700 14px/19px var(--font); color: var(--mint); text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.pv-meta { font: 500 13px/18px var(--font); color: rgba(255,255,255,0.92); margin-top: 2px; }
.pv-hero .hx-plot { color: #E8E8F0; }
.pv-incl { display: flex; align-items: center; gap: 7px; margin-top: 12px; font: 600 13px/18px var(--font); color: #fff; }
.pv-incl .mi { color: #1A98FF; }
.pv-dots { display: flex; align-items: center; gap: 6px; }
.pv-dots > span { width: 6px; height: 6px; border-radius: 3px; background: #5B5E61; }
.pv-dots > span.on { width: 11px; background: #fff; }
.pv .sr-cards { gap: 15px; }