/* Downloads (js/downloads.js): one list of what's on this device and what's on its way, the
   screen the app opens to with no server, and the browser's player for a download kept here. */

.downloads { max-width: 60rem; }
.dl-head { align-items: baseline; }
.dl-head h1 { margin: 0 0 1.25rem; }
.dl-room { margin: 0 0 1.25rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.dl-in-settings { display: flex; }
.dl-in-settings .dl-room { margin: -0.75rem 0 1.25rem; }
.dl-room:empty { display: none; }
.dl-where { margin: -0.5rem 0 1.25rem; color: var(--mist); }

/* Offline: said once, plainly, above what's here. */
.dl-offline { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; }
.dl-offline > svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--lamp); }
.dl-offline > div { flex: 1 1 14rem; min-width: 0; }
.dl-offline strong { color: var(--paper); }

/* The list: a film is a row with its poster; a show is a head with its poster, and its episodes
   under it. */
.dl-list { display: grid; gap: 0.75rem; }
.dl-row, .dl-show { border-radius: var(--radius); background: color-mix(in srgb, var(--text) 4%, transparent); }
.dl-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem 0.6rem 0.6rem; min-width: 0; }
.dl-main { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.dl-main { cursor: pointer; border-radius: calc(var(--radius) - 4px); }
button.dl-main:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.dl-row.playable:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.dl-art { position: relative; flex: none; width: 4.25rem; aspect-ratio: 2 / 3; border-radius: calc(var(--radius) - 4px); overflow: hidden; background: var(--booth); }
.dl-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dl-art .placeholder { display: grid; place-items: center; height: 100%; padding: 0.3rem; color: var(--mist); font-size: 0.65rem; line-height: 1.2; text-align: center; overflow: hidden; }
.dl-text { display: grid; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.dl-text > strong { color: var(--paper); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.dl-status { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.dl-status > svg { flex: none; width: 1rem; height: 1rem; }
.dl-status.done > svg { color: var(--lamp); }
.dl-status.failed { color: var(--danger); }
.dl-text > .dl-error { color: var(--mist); white-space: normal; font-size: 0.8rem; }
.dl-bar { max-width: 20rem; border-radius: 2px; overflow: hidden; }
.dl-bar span { transition: width 0.4s ease; }
.dl-actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.dl-actions .more-menu { left: auto; right: 0; min-width: 10rem; }

.dl-show { padding: 0.6rem 0.75rem 0.35rem 0.6rem; }
.dl-show-head { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; }
.dl-show-link { display: flex; align-items: center; gap: 1rem; flex: 1 1 14rem; min-width: 0; text-decoration: none; color: inherit; }
.dl-show-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.dl-show-head > .ghost { margin-left: auto; }
.dl-episodes { display: grid; margin: 0.4rem 0 0 5.25rem; }
.dl-episodes .dl-row { background: none; padding: 0.55rem 0 0.55rem 0; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 0; }
.dl-episodes .dl-row.playable:hover { background: none; }
.dl-episodes .dl-row.playable:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.dl-empty .actions { margin-top: 0.9rem; }

@media (max-width: 599px) {
  .dl-row { gap: 0.5rem; padding: 0.5rem; }
  .dl-main { gap: 0.8rem; }
  .dl-art { width: 3.25rem; }
  .dl-episodes { margin-left: 0; }
  .dl-show-head > .ghost { margin-left: 4.1rem; }
  .dl-head h1 { margin-bottom: 0.4rem; }
  .dl-head { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* The screen with no server: the server's name, then the list. */
.dl-offline-top { padding: 1.25rem var(--gutter) 0.25rem; }
.dl-offline-top .wordmark { font-size: 1.6rem; }
.dl-offline-page { padding: 0.75rem var(--gutter) 2rem; max-width: 60rem; }
.dl-offline-page .dl-in-settings { justify-content: space-between; flex-wrap: wrap; gap: 0 1rem; }
.dl-offline-page .dl-in-settings::before { content: "Downloads"; color: var(--paper); font: var(--title-weight) 1.9rem/1.2 var(--font-display); letter-spacing: var(--title-tracking); }
.dl-offline-page .dl-in-settings .dl-room { margin: 0 0 1.25rem; align-self: flex-end; }

/* The Android app's own screen with no server (android/ui/connect.js) draws these too. */
.dl-offline-alt { display: flex; justify-content: center; margin: 1.5rem 0 0; }
.dl-show-head > .dl-show-link:only-child { flex-basis: 100%; }

/* The browser's player for a download kept here: the whole screen, its own controls, and a bar
   with Back and the title that fades while it plays, as the player's does. */
html.dl-playing, html.dl-playing body { overflow: hidden; }
.dl-player { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; }
.dl-video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.dl-player-bar { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 0.75rem;
  padding: max(0.75rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 2.5rem max(1rem, env(safe-area-inset-left));
  background: linear-gradient(rgba(0, 0, 0, 0.7), transparent); transition: opacity 0.3s ease; pointer-events: none; }
.dl-player-bar > * { pointer-events: auto; }
.dl-player.idle .dl-player-bar { opacity: 0; }
.dl-player.idle { cursor: none; }
.dl-back { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2.75rem; padding: 0 0.9rem 0 0.5rem; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); color: #fff; font: 600 0.95rem/1 var(--font-body); cursor: pointer; }
.dl-back:hover { background: rgba(255, 255, 255, 0.2); }
.dl-back svg { width: 1.3rem; height: 1.3rem; }
.dl-player-title { display: grid; min-width: 0; }
.dl-player-title strong { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-player-title span { color: rgba(255, 255, 255, 0.75); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }