/* Fluid layout shared by phone, tablet, desktop and television viewports. */
:root {
  --poster-min: clamp(120px, 10vw, 360px);
  --channel-min: clamp(155px, 14vw, 440px);
  --content-gap: clamp(12px, 1.2vw, 28px);
}
html, body { min-inline-size: 0; }
main, .page, .homebody, .hero, .herocontent, .live-layout,
.live-viewer, .live-side, .catalog-tools, .filterline, .filterselect,
.sectiontop, .rowheading, .rowheading h2, .details-dialog, .import-dialog,
.player-top > div, .dialoghead > div { min-inline-size: 0; }
img, video { max-inline-size: 100%; }
.pageintro { flex-wrap: wrap; align-items: center; }
.pageintro > div { flex: 1 1 250px; min-inline-size: 0; }
.pageintro > button { flex-shrink: 0; }
.page h1, .hero h1, .detail-info h2, .dialoghead h2,
.player-top h2, .live-now h2 { overflow-wrap: anywhere; }
.rowheading h2 { overflow-wrap: anywhere; }
.rowactions { flex-shrink: 0; }
.catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--poster-min)), 1fr));
  gap: clamp(20px, 2vw, 36px) var(--content-gap);
}
.channel-grid, .radio-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--channel-min)), 1fr));
  gap: var(--content-gap);
}
.scrollrow {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.scrollrow .poster-card {
  width: clamp(120px, calc((100vw - var(--rail) - var(--gutter) * 2 - 96px) / 7), 360px);
  min-width: 0;
}
.scrollrow .live-card {
  width: clamp(168px, calc((100vw - var(--rail) - var(--gutter) * 2 - 80px) / 6), 450px);
  min-width: 0;
}
.filterline > #livecategories { flex: 1 1 320px; min-width: 0; max-width: 100%; }
.filterselect { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.filterselect select { min-width: 0; max-width: 100%; }
.live-now { min-width: 0; flex-wrap: wrap; }
.live-now > div:not(.live-now-actions) { min-width: 0; flex: 1 1 120px; }
.live-now-actions { flex-wrap: wrap; max-width: 100%; }
.live-now-actions select { min-width: 0; }
.live-screen { scroll-margin-bottom: 16px; }
.rail { overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.railnav, .railbottom, .monogram { flex-shrink: 0; }
.details-dialog, .import-dialog {
  max-inline-size: calc(100% - 24px);
  max-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
  overscroll-behavior: contain;
}
.detail-actions > button { max-width: 100%; }
.versionline { min-width: 0; }
.versionline select { min-width: 0; }
.episode > span:not(.episodenumber) { min-width: 0; overflow-wrap: anywhere; }
.player-dialog[open] {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  max-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.player-top, .player-bottom, .player-note { flex: 0 0 auto; }
.player-top { min-width: 0; }
.player-top h2 { max-width: 100%; }
.player-top > .iconbtn, .player-top > .backbtn { flex-shrink: 0; }
.player-video {
  flex: 1 1 0;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.player-video video { min-height: 0; max-height: 100%; object-fit: contain; }
.player-bottom { max-height: 35dvh; overflow: auto; min-width: 0; }
.player-bottom > label { min-width: 0; max-width: 100%; }
.player-bottom select { min-width: 0; max-width: min(240px, 45vw); }
.player-status { max-height: calc(100% - 30px); overflow: auto; }
.radio-visual { min-height: 0; overflow: hidden; }
.radio-visual > img { max-height: 30%; width: auto; }
.radio-visual h2 { max-width: 90%; text-align: center; overflow-wrap: anywhere; }
.footer { min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 1600px) {
  :root {
    --gutter: clamp(60px, 2.5vw, 110px);
    --rail: clamp(90px, 3vw, 140px);
    --top: clamp(100px, 3.4vw, 150px);
  }
  body { font-size: clamp(15px, .8vw, 28px); }
  .topbar { gap: clamp(24px, 2vw, 70px); }
  .brand { font-size: clamp(27px, 1.25vw, 48px); }
  .topnav { gap: clamp(6px, .5vw, 18px); }
  .topnav button { font-size: clamp(14px, .65vw, 25px); padding: .8em 1.1em; }
  .clock { font-size: clamp(13px, .65vw, 24px); }
  .topright { gap: clamp(22px, 1.2vw, 44px); }
  .profile { width: clamp(38px, 1.8vw, 68px); height: clamp(38px, 1.8vw, 68px); font-size: clamp(11px, .5vw, 20px); }
  .railnav button, .railbottom button { width: clamp(44px, 2vw, 76px); height: clamp(44px, 2vw, 76px); }
  .rail .icon { width: clamp(22px, 1vw, 38px); height: clamp(22px, 1vw, 38px); }
  .railnav, .railbottom { gap: clamp(12px, .65vw, 24px); }
  .monogram { width: clamp(44px, 2vw, 76px); height: clamp(44px, 2vw, 76px); margin-bottom: clamp(36px, 2vw, 76px); }
  .monogram svg { width: 75%; }
  .hero { height: clamp(620px, 33vw, 1000px); }
  .herocontent { max-width: clamp(600px, 35vw, 1250px); }
  .hero h1 { font-size: clamp(74px, 4.1vw, 150px); max-width: 100%; }
  .herolabel { font-size: clamp(10px, .48vw, 18px); }
  .herometa, .herocontent > p { font-size: clamp(13px, .68vw, 25px); }
  .herocontent > p { max-width: 28em; }
  .primary, .secondary { font-size: clamp(13px, .65vw, 24px); min-height: clamp(44px, 2.1vw, 80px); padding: .9em 1.4em; }
  .primary .icon, .secondary .icon { width: 1.3em; height: 1.3em; }
  .quicklink { min-height: clamp(100px, 5vw, 190px); padding: clamp(20px, 1.3vw, 48px); gap: clamp(15px, 1vw, 36px); }
  .quicklink strong { font-size: clamp(16px, .85vw, 32px); }
  .quicklink small { font-size: clamp(11px, .55vw, 21px); }
  .quicklink > .icon { width: clamp(26px, 1.5vw, 56px); height: clamp(26px, 1.5vw, 56px); }
  .rowheading h2 { font-size: clamp(22px, 1.15vw, 44px); }
  .poster-button strong, .channeltext strong { font-size: clamp(13px, .7vw, 26px); }
  .poster-button small, .channeltext small { font-size: clamp(11px, .55vw, 21px); }
  .poster-tag, .live-badge { font-size: clamp(8px, .36vw, 14px); }
  .channel-art, .homebody > .contentrow .channel-art { height: clamp(100px, 6vw, 230px); }
  .channel-grid .channel-art { height: clamp(110px, 7vw, 270px); }
  .channel-art img { max-height: 55%; }
  .channeltext { padding: clamp(14px, .8vw, 28px); }
  .savebutton { width: clamp(28px, 1.3vw, 48px); height: clamp(28px, 1.3vw, 48px); }
  .savebutton .icon { width: 55%; height: 55%; }
  .page h1 { font-size: clamp(36px, 1.6vw, 62px); }
  .pageintro p { font-size: clamp(13px, .7vw, 26px); }
  .overline { font-size: clamp(9px, .4vw, 15px); }
  .chips button, .inputsearch input, .filterselect select, .resultbar, .ghost { font-size: clamp(12px, .55vw, 21px); }
  .chips button { padding: .7em 1.1em; }
  .inputsearch { max-width: clamp(330px, 20vw, 750px); padding: .8em; }
  .filterselect select { max-width: clamp(170px, 11vw, 400px); padding: .8em 1.5em .8em .8em; }
  .azbar button { font-size: clamp(12px, .55vw, 21px); min-width: 2em; height: 2em; }
  .live-layout { grid-template-columns: minmax(0, 1fr) clamp(350px, 21vw, 760px); }
  .live-side-head h2, .live-now h2 { font-size: clamp(20px, 1vw, 38px); }
  .channel-item { padding: clamp(12px, .7vw, 26px); gap: clamp(12px, .7vw, 26px); }
  .channel-item strong { font-size: clamp(13px, .7vw, 26px); }
  .channel-item small, .channelnum, .live-now p, .liveselect { font-size: clamp(11px, .55vw, 21px); }
  .channel-list { max-height: clamp(600px, 34vw, 1250px); }
  .channel-item .listlogo { width: clamp(44px, 3vw, 100px); height: clamp(35px, 2vw, 75px); }
  .listlogo img { max-width: 85%; max-height: 85%; }
  .live-help h3 { font-size: clamp(14px, .7vw, 26px); }
  .live-help p { font-size: clamp(12px, .6vw, 22px); }
}

@media (max-width: 960px) {
  .topbar { gap: clamp(10px, 1.5vw, 18px); }
  .topnav { min-width: 0; }
  .topnav button { padding-inline: clamp(6px, .8vw, 10px); }
}

@media (max-width: 720px) {
  :root { --gutter: clamp(12px, 4vw, 24px); --poster-min: 104px; --channel-min: 140px; }
  .topbar { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); padding-top: env(safe-area-inset-top, 0px); height: calc(var(--top) + env(safe-area-inset-top, 0px)); gap: 12px; }
  .page { padding-top: calc(var(--top) + env(safe-area-inset-top, 0px) + 22px); }
  .page, .homebody { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .topright { gap: 12px; flex-shrink: 0; }
  .topbar .brand { font-size: clamp(21px, 6vw, 26px); }
  .hero { height: clamp(470px, 73svh, 600px); padding: calc(var(--top) + 30px) var(--gutter) 75px; }
  .hero h1 { font-size: clamp(31px, 9vw, 52px); letter-spacing: -1.5px; }
  .herocontent { max-width: 100%; }
  .heroactions { flex-wrap: wrap; }
  .heroactions button { flex: 0 1 auto; min-width: 0; }
  .heroindex { bottom: 40px; }
  .quicklinks { gap: 10px; }
  .quicklink { min-width: 0; padding: 13px 11px; gap: 10px; }
  .quicklink > span { min-width: 0; }
  .quicklink strong { font-size: clamp(11px, 2.9vw, 14px); }
  .quicklink small { overflow-wrap: anywhere; }
  .scrollrow .poster-card { width: clamp(108px, 32vw, 190px); }
  .scrollrow .live-card { width: clamp(155px, 43vw, 220px); }
  .rowheading h2 { font-size: clamp(14px, 3.7vw, 18px); }
  .rowactions { gap: 6px; }
  .pageintro { row-gap: 14px; }
  .pageintro > div { flex-basis: 220px; }
  .pageintro h1 { font-size: clamp(25px, 6.7vw, 34px); }
  .filterselect { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .filterselect select { width: 100%; max-width: 100%; }
  .catalog-tools .inputsearch { width: 100%; min-width: 0; max-width: 100%; flex-basis: 100%; }
  .inputsearch input, .globalsearch input, .import-dialog input, .import-dialog select, .filterselect select { font-size: 16px; }
  .filterselect select { min-height: 42px; }
  .chips { padding-block: 7px; margin-block: -7px; }
  .chips button { min-height: 36px; }
  .globalsearch { min-width: 0; }
  .live-now-actions { width: 100%; }
  .live-now-actions .iconbtn { width: 38px; height: 38px; }
  .live-now-actions .liveselect { max-width: 100%; flex: 1 1 120px; min-height: 38px; }
  .live-placeholder { gap: 0; }
  .live-placeholder > .icon { width: 28px; height: 28px; margin-bottom: 9px; }
  .live-placeholder .overline { margin-bottom: 7px; font-size: 7px; }
  .live-placeholder h2 { font-size: clamp(16px, 4vw, 21px); }
  .live-placeholder .primary { margin-top: 12px; min-height: 36px; }
  .mobilebar { padding-inline: max(5px, env(safe-area-inset-left, 0px)) max(5px, env(safe-area-inset-right, 0px)); }
  .mobilebar button { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 1px; }
  .mobilebar small { white-space: nowrap; font-size: clamp(7px, 2vw, 10px); }
  .footer { margin-inline: var(--gutter); }
  .details-dialog, .import-dialog { width: calc(100% - 24px); }
  .detail-actions button { min-width: 0; }
  .player-top { min-height: 64px; padding: 10px 12px; gap: 10px; }
  .player-top > div { flex: 1 1 auto; }
  .player-top > .iconbtn { width: 34px; height: 34px; }
  .player-top h2 { font-size: clamp(11px, 3vw, 16px); }
  .player-bottom { max-height: 36dvh; padding: 10px 12px; }
  .player-bottom select { max-width: min(200px, 44vw); }
  .player-note { padding-bottom: 8px; font-size: 8px; }
  .player-status { inset: auto 10px 45px; font-size: 10px; padding: 10px 12px; }
}

@media (max-width: 480px) {
  .filterselect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filterselect select:first-child { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .topright .clock { display: none; }
  .topright { gap: 10px; }
  .quicklink .quickarrow { display: none; }
  .detail-hero { gap: 14px; padding: 37px 16px 22px; }
  .detail-poster { width: clamp(65px, 23vw, 95px); }
  .detail-info h2 { font-size: clamp(17px, 5vw, 21px); }
  .detail-actions { flex-direction: column; align-items: stretch; }
  .detail-actions > button { width: 100%; white-space: normal; }
  .detail-content { padding: 20px 16px; }
  .dialoghead { align-items: flex-start; }
  .dialoghead > .iconbtn { flex-shrink: 0; }
  .dialoghead h2 { font-size: 20px; }
  .live-help { gap: 10px; }
  .live-placeholder > .icon { display: none; }
  .live-placeholder p { font-size: 9px; }
}

@media (max-width: 340px) {
  .heroactions { gap: 8px; }
  .heroactions button { width: 100%; justify-content: flex-start; }
  .herocontent > p { font-size: 10px; }
  .quicklink { padding: 12px 9px; gap: 7px; }
  .quicklink > .icon { width: 18px; height: 18px; }
  .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formrow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .player-bottom > label { width: 100%; }
  .player-bottom select { flex: 1; max-width: 100%; }
  .live-placeholder .overline { display: none; }
  .live-placeholder h2 { font-size: 15px; margin-bottom: 5px; }
  .live-placeholder .primary { font-size: 9px; margin-top: 9px; }
}

@media (min-width: 721px) and (max-height: 600px) {
  .monogram { width: 36px; height: 36px; margin: 10px 0 12px; }
  .railnav, .railbottom { gap: 3px; }
  .railnav button, .railbottom button { height: 32px; width: 36px; }
  .railbottom { margin-bottom: 8px; }
  .railversion { display: none; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hero { height: max(380px, 100svh); min-height: 0; padding-top: calc(var(--top) + 30px); }
  .hero h1 { font-size: clamp(32px, 4.5vw, 52px); }
  .player-top { min-height: 48px; padding: 7px 12px; }
  .player-top h2 { font-size: 12px; margin-top: 3px; }
  .player-top .backbtn { min-height: 32px; padding-block: 7px; }
  .player-top .iconbtn { height: 32px; width: 32px; }
  .player-bottom { flex-wrap: nowrap; max-height: 62px; overflow-x: auto; padding: 8px 12px; gap: 7px; }
  .player-bottom > * { flex-shrink: 0; }
  .player-bottom > label { width: auto; }
  .player-bottom select { max-width: 160px; }
  .player-bottom .primary { min-height: 34px; }
  .player-note { display: none; }
  .player-status { bottom: 35px; max-width: min(700px, calc(100% - 20px)); }
  .radio-visual { gap: 8px; bottom: 45px; }
  .radio-visual > img { max-height: 60px; }
  .radio-visual h2 { font-size: 16px; }
  .radio-visual .overline { display: none; }
  .audio-bars { height: 18px; }
}

@media (pointer: coarse) {
  .savebutton::after { content: ''; position: absolute; inset: -7px; }
  .iconbtn, .topsearch { min-height: 38px; }
  .poster-button:active .poster-wrap { border-color: var(--lime); }
}

@media (min-width: 1600px) {
  .search-page { max-width: none; }
  .globalsearch input { font-size: clamp(22px, 1.05vw, 40px); }
  .globalsearch button { font-size: clamp(12px, .55vw, 20px); }
  .details-dialog { width: clamp(880px, 55vw, 1720px); }
  .detail-hero { gap: clamp(30px, 2vw, 70px); padding: clamp(35px, 2vw, 76px); }
  .detail-poster { width: clamp(155px, 10vw, 350px); }
  .detail-info h2 { font-size: clamp(30px, 1.6vw, 58px); }
  .detail-info .herometa, .genre-tags span, .detail-content p, .versionline select, .pill { font-size: clamp(13px, .65vw, 24px); }
  .detail-content { padding: clamp(30px, 2vw, 70px); }
  .detail-content h3 { font-size: clamp(20px, 1vw, 36px); }
  .episode { padding: clamp(16px, 1vw, 36px); gap: clamp(16px, 1vw, 36px); }
  .episode strong { font-size: clamp(15px, .8vw, 30px); }
  .episode small { font-size: clamp(12px, .6vw, 22px); }
  .episodenumber { font-size: clamp(22px, 1.2vw, 44px); width: 1.6em; }
  .episodelist { max-height: clamp(300px, 23vh, 620px); }
  .import-dialog { width: clamp(520px, 30vw, 1100px); padding: clamp(30px, 2vw, 70px); }
  .dialoghead h2 { font-size: clamp(24px, 1.3vw, 48px); }
  .import-dialog p, .import-dialog label, .import-dialog input, .import-dialog select { font-size: clamp(13px, .65vw, 24px); }
  .settings-grid { max-width: clamp(1050px, 65vw, 2400px); gap: clamp(20px, 1.2vw, 44px); }
  .settings-card { padding: clamp(26px, 1.5vw, 56px); }
  .settings-card h2 { font-size: clamp(20px, 1.1vw, 40px); }
  .settings-card p, .settings-card label, .settings-card dl { font-size: clamp(13px, .7vw, 26px); max-width: none; }
  .settings-card > .icon { width: clamp(25px, 1.3vw, 48px); height: clamp(25px, 1.3vw, 48px); }
  .event-card h3 { font-size: clamp(22px, 1.2vw, 44px); }
  .event-card p { font-size: clamp(13px, .7vw, 26px); }
  .player-top { min-height: clamp(86px, 4vw, 150px); }
  .player-top h2 { font-size: clamp(20px, 1vw, 36px); }
  .player-top small { font-size: clamp(10px, .5vw, 18px); }
  .player-bottom { padding: clamp(15px, 1vw, 32px); gap: clamp(8px, .6vw, 22px); }
  .player-bottom .secondary, .player-bottom label, .player-bottom select { font-size: clamp(12px, .6vw, 22px); }
  .player-bottom select { max-width: clamp(240px, 15vw, 560px); }
  .player-note { font-size: clamp(11px, .5vw, 18px); }
}

@media (orientation: landscape) and (max-height: 500px) {
  html { scroll-padding-top: 12px; }
  .live-screen { max-height: calc(100svh - 125px); }
  .live-now { padding-block: 12px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 720px) {
  .live-screen { max-height: max(120px, calc(100svh - 190px)); }
}
body.landscape-live-player { overflow: hidden; }
body.landscape-live-player .live-screen {
 position: fixed; inset: 0; z-index: 100;
 width: 100vw; height: 100vh; height: 100dvh;
 max-width: none; max-height: none; max-block-size: none;
 aspect-ratio: auto; border: 0; border-radius: 0; background: #000;
}
body.landscape-live-player .live-screen video { width: 100%; height: 100%; object-fit: contain; }
body.landscape-live-player .mobilebar { visibility: hidden; }
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
 .player-dialog[open] { padding: 0; }
 .player-dialog[open] .player-top,
 .player-dialog[open] .player-bottom,
 .player-dialog[open] .player-note { display: none; }
 .player-dialog[open] .player-video { flex: 1; height: 100%; }
}