/* Phone and tablet: the app bar, downloads, the remote control, player gestures and touch sizes. Loaded after player.css. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- install hint ---------- */
.installbar {
  position: fixed; left: max(.6rem, env(safe-area-inset-left)); right: max(.6rem, env(safe-area-inset-right)); bottom: calc(4.6rem + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: var(--radius-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx); border: 1px solid var(--glass-line); color: var(--glass-text); box-shadow: var(--pop-shadow, 0 10px 30px rgba(0, 0, 0, .4));
}
.installbar img { border-radius: 10px; flex: none; }
.installtext { display: grid; gap: .1rem; min-width: 0; flex: 1; font-size: .88rem; }
.installtext span { color: var(--glass-muted); }
.installbar button { min-height: 2.75rem; flex: none; }

/* ---------- download button, quality sheet ---------- */
.dlbtn { display: inline-flex; align-items: center; gap: .3rem; }
.dlbtn.on { border-color: var(--ok); color: var(--ok); }
.dlbtn.compact { width: 2.75rem; height: 2.75rem; padding: 0; justify-content: center; border-radius: 50%; }
.epdl { position: absolute; right: 0; top: .8rem; }
.eprow { position: relative; }
.qualitylist { display: grid; gap: .4rem; }
.qopt { display: flex; align-items: center; gap: .7rem; min-height: 3rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.qopt.on { border-color: var(--accent); background: var(--accent-soft); }
.qopt .qlabel { flex: 1; }
.qopt input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }

/* ---------- Hentet ---------- */
.dlstatus { display: grid; gap: .5rem; margin-bottom: 1rem; }
.dlstatus progress, .dlcard progress { width: 100%; height: .6rem; accent-color: var(--accent); }
.dllist { display: grid; gap: .8rem; }
.dlcard { display: grid; grid-template-columns: 5.5rem 1fr; gap: .9rem; align-items: start; }
.dlposter { width: 5.5rem; aspect-ratio: 2 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface2); display: grid; place-items: center; }
.dlposter img { width: 100%; height: 100%; object-fit: cover; }
.dltext { display: grid; gap: .3rem; min-width: 0; }
.dltext h2 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.dlactions { flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.dlerror { color: var(--danger); margin: 0; }
.dlempty { text-align: center; }
.offlineshell .topbar { gap: .6rem; }
.offline-page .logo { display: block; margin: 0 auto 1rem; height: 2.6rem; }

/* ---------- Fjernbetjening ---------- */
.rcdevices { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.rcdev { min-height: 2.75rem; gap: .4rem; }
.rcdeck { display: grid; gap: 1rem; }
.rcnow { display: grid; gap: .1rem; }
.rcnow b { font-size: 1.15rem; overflow-wrap: anywhere; }
.rcseekrow { display: grid; gap: .3rem; }
.rcseek, .rcvol { width: 100%; height: 2.2rem; accent-color: var(--accent); margin: 0; }
.rctime { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .9rem; }
.rcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.rcbtn { display: grid; justify-items: center; align-content: center; gap: .2rem; min-height: 4.2rem; padding: .5rem .3rem; font-size: .82rem; border-radius: var(--radius-lg); }
.rcbtn .ic { width: 1.5rem; height: 1.5rem; }
.rcbtn.main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rcvolrow { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; gap: .6rem; }
.rcround { width: 3rem; height: 3rem; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.rcchoose { margin-top: 1.4rem; display: grid; gap: .7rem; }
.rcchoose h2 { margin: 0; }
.rclist { display: grid; gap: .4rem; }
.rcrow { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 3.2rem; padding: .5rem .8rem; text-align: left; border-radius: var(--radius); width: 100%; }
.rcrow .rctitle { flex: 1; overflow-wrap: anywhere; }

/* ---------- player gestures ---------- */
.pvideo { touch-action: none; }
.gesturehud {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%); display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border-radius: 99px;
  background: rgba(15, 12, 10, .8); color: #fff; font-size: 1.1rem; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 5;
}
.gesturehud .ic { width: 1.5rem; height: 1.5rem; }
.tapseek { position: absolute; top: 20%; bottom: 20%; width: 34%; display: grid; place-items: center; pointer-events: none; z-index: 4; color: #fff; font-size: 1.2rem; font-weight: 600; }
.tapseek.left { left: 0; border-radius: 0 60% 60% 0; }
.tapseek.right { right: 0; border-radius: 60% 0 0 60%; }
.tapseek span { padding: .5rem 1rem; border-radius: 99px; background: rgba(15, 12, 10, .55); }
.tapseek.go { animation: tapfade .65s ease-out; background: rgba(255, 255, 255, .12); }
@keyframes tapfade { from { opacity: 1; } to { opacity: 0; } }

/* ---------- touch screens ---------- */
@media (pointer: coarse) {
  button, .btn, .chip, select, input[type=text], input[type=search], input[type=password], input[type=number] { min-height: 2.75rem; }
  button.small { min-height: 2.75rem; padding: .3rem .8rem; }
  .pbtn { width: 2.75rem; height: 2.75rem; }
  .usermenu summary { min-height: 2.75rem; }
  .usermenu .pop a, .usermenu .pop button, .moremenu .pop a { min-height: 2.75rem; display: flex; align-items: center; }
  .topnav a, .topnav .navlink { min-height: 2.75rem; }
  .pmenu button { min-height: 2.75rem; }
  .seek { height: 1.8rem; }
  .seek::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7.5px; }
  .seek::-moz-range-thumb { width: 20px; height: 20px; }
  .volume { display: none; } /* the device buttons set the volume on a phone */
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .ptop { padding-bottom: 1rem; }
  .pbottom { padding-top: 1.2rem; }
  .skip-seg, .upnext { bottom: 5rem; }
  .pmenu { bottom: 4rem; max-height: 70vh; }
}
@media (max-width: 760px) {
  .topbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .dlcard { grid-template-columns: 4.2rem 1fr; }
  .dlposter { width: 4.2rem; }
  .rcgrid { gap: .45rem; }
  .epdl { top: .6rem; }
}
@media (display-mode: standalone) {
  .powered { display: none; } /* the footer has no place in an app */
}

/* ---------- touch sizes found by the phone audit ---------- */
@media (pointer: coarse) {
  .topbar .brand { min-height: 2.75rem; min-width: 2.75rem; align-items: center; }
  .topbar .searchlink, .searchlink { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
  .usermenu summary { min-width: 2.75rem; justify-content: center; }
  .arrows { display: none; } /* a row is swiped on a touch screen */
  a.playbtn, .playbtn { min-width: 2.75rem; min-height: 2.75rem; }
  .chheart, .chhide, .chmove { min-width: 2.75rem; min-height: 2.75rem; }
  .powered a, .legallinks a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .4rem; }
  .eptext h3 a, .card .title a, .ctitle a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .fopts label, label.check, .checkrow { min-height: 2.75rem; }
  .fl { min-width: 2.75rem; }
  .volbtn { display: none; }
}
@media (max-width: 640px) {
  .prow { flex-wrap: wrap; row-gap: 0; }
  .prow > .muted { display: none; }
  .prow .time { order: 5; }
  .prow .spacer { flex: 1 1 0; min-width: 0; }
}
@media (pointer: coarse) {
  .card h2 a, .card h3 a, .hero h2 a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
.fletters { flex-wrap: wrap; max-width: 100%; }
.fgroup .fpop { max-width: calc(100vw - 1.2rem); }
.powered { align-items: center; gap: .5rem; flex-wrap: wrap; }
.powered .pill { display: inline-flex; align-items: center; min-height: 2rem; }