/* Podcasts in the browser (static/js/podcasts-web.js): the app's podcast page
   — its styles are podcast-ui.css, copied from diora-android's native.css by
   tools/sync_podcast_ui.py — set into the web layout. The app's look stays
   (black, monospace, red accent); on wide screens the podcast page, its mini
   player and its sheets keep to one centred column. Only loaded in browsers;
   everything is scoped to html.dpw. */

html.dpw {
  --nui-tap: 44px;
  --nui-muted: var(--muted, #9a9a9a);
  --nui-panel: var(--panel, #111);
  --dpw-surface: var(--card, #0b0b0b);
  --dpw-hover: var(--hover, #111);
  --dpw-col: 760px;
}

/* The placeholder shown until the page is there. */
html.nui-podcasts #tab-podcasts > :not(#nui-pod) { display: none !important; }
.dpw-loading { padding: 2rem 0; text-align: center; }

html.dpw #nui-pod {
  max-width: var(--dpw-col);
  margin: 0 auto;
}

/* ---- what the app has in its other native styles ---------------------------------- */

html.dpw .nui-icon {
  min-width: var(--nui-tap);
  min-height: var(--nui-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  padding: 0;
}
html.dpw .nui-icon:hover { color: var(--fg); }

html.dpw .nui-bar-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---- the dock: mini player right above the radio bar ----------------------------- */

html.dpw #nui-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dpw-bar-h, 72px);
  z-index: 190; /* under the reader (200), the sidebar and the sheets */
  max-width: var(--dpw-col);
  margin: 0 auto;
}
html.dpw body.dnd-mode #nui-dock { display: none; }

/* One bar for both: the player (podcast or station, with play / stop / save)
   sits in the radio bar in place of its "now playing"; volume, votes, focus
   mode and the timer stay on the right. Focus mode shows the station big as
   before. */
html.dpw.nui-one-player body:not(.dnd-mode) #now-playing-bar .now-playing-info,
html.dpw.nui-one-player body:not(.dnd-mode) #play-stop-btn,
html.dpw.nui-one-player body:not(.dnd-mode) #save-station-btn { display: none !important; }
html.dpw.dpw-in-bar #now-playing-bar > #nui-dock {
  position: static;
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0 0 0 -1.5rem;   /* the cover starts at the edge, like the bar's line */
  align-self: stretch;
  z-index: auto;
}
html.dpw.dpw-in-bar #now-playing-bar #nui-pod-mini {
  height: 100%;
  min-height: 56px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* The progress (or live) line runs along the whole bar's top edge. */
html.dpw.dpw-in-bar #now-playing-bar #nui-pod-mini { position: static; }
html.dpw.dpw-in-bar #now-playing-bar .nui-pod-mini-bar { top: -1px; }
html.dpw.dpw-in-bar #now-playing-bar .nui-pod-art-mini { width: 40px; height: 40px; margin-left: 1.5rem; }
/* The page keeps clear of the bar by its real height (two rows on phones,
   the player in it or not). */
html.dpw.dpw-in-bar .main-content,
html.dpw.dpw-in-bar.nui-pod-mini-open .main-content {
  padding-bottom: calc(var(--dpw-bar-h, 72px) + 2rem);
}
@media (max-width: 600px) {
  /* The bar is two rows on phones: the player, then the radio's tools. */
  html.dpw.dpw-in-bar #now-playing-bar > #nui-dock { width: 100%; margin: -0.5rem 0 0; flex: none; }
  html.dpw.dpw-in-bar #now-playing-bar .nui-pod-art-mini { margin-left: 0; }
  html.dpw.dpw-in-bar #now-playing-bar #nui-pod-mini { min-height: 52px; }
  /* Below the player one row: focus mode and stations left, the timer right. */
  html.dpw.dpw-in-bar body:not(.dnd-mode) #now-playing-bar { flex-direction: row; flex-wrap: wrap; row-gap: 0.25rem; }
  html.dpw.dpw-in-bar body:not(.dnd-mode) #now-playing-bar .now-playing-controls { width: auto; flex: none; gap: 0.5rem; }
  html.dpw.dpw-in-bar body:not(.dnd-mode) #now-playing-bar .timer-widget { margin-left: auto; }
}
html.dpw #nui-pod-mini {
  background: var(--dpw-surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5);
}
html.dpw .nui-pod-mini-bar { top: 0; }
html.dpw.nui-pod-mini-open .main-content {
  padding-bottom: calc(var(--dpw-bar-h, 72px) + 64px + 2rem);
}

html.dpw .nui-mini-text {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding: 0 14px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
html.dpw .nui-mini-station,
html.dpw .nui-mini-track {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.dpw .nui-mini-station { font-size: 15px; font-weight: 700; }
html.dpw .nui-mini-track { font-size: 12px; font-weight: 400; color: var(--nui-muted); }
html.dpw .nui-mini-track:empty { display: none; }
html.dpw .nui-mini-toggle { font-size: 22px; color: var(--accent); }

#nui-radio-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dpw-bar-h, 72px) + 80px);
  transform: translateX(-50%);
  z-index: 950;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 14px;
  text-shadow: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
#nui-radio-toast.nui-show { opacity: 1; }
/* The swipe's „Rückgängig“ bar: above the radio bar, like the toast. */
html.dpw #nui-pod-undo { bottom: calc(var(--dpw-bar-h, 72px) + 80px); }
html.dpw.nui-pod-mini-open:not(.dpw-in-bar) #nui-pod-undo { bottom: calc(var(--dpw-bar-h, 72px) + 64px + 16px); }

/* ---- a mouse: hover states the phone doesn't need --------------------------------- */

@media (hover: hover) {
  html.dpw #nui-pod .nui-pod-row { cursor: pointer; }
  html.dpw #nui-pod .nui-pod-row:hover { background: var(--dpw-hover); }
  html.dpw .nui-row:hover { background: var(--hover, #1a1a1a); }
  html.dpw .nui-pod-chip:hover,
  html.dpw .nui-pod-tab:hover,
  html.dpw .nui-pod-subtab:hover { color: var(--fg); }
  html.dpw .nui-pod-chapter:hover,
  html.dpw .nui-pod-seg:hover { background: var(--hover, #141414); }
}
html.dpw .nui-row,
html.dpw .nui-pod-tab,
html.dpw .nui-pod-chip,
html.dpw .nui-pod-subtab { cursor: pointer; }

/* ---- wide screens: sheets and the player in the column ------------------------------ */

@media (min-width: 761px) {
  html.dpw .nui-panel {
    margin: 0 auto;
    max-width: 560px;
    border: 1px solid var(--border);
    border-bottom: none;
  }
  html.dpw #nui-pod-player { justify-content: center; }
  html.dpw .nui-pod-player-panel {
    max-width: var(--dpw-col);
    max-height: 92vh;
    border: 1px solid var(--border);
    border-bottom: none;
  }
  html.dpw .nui-pod-art-player { width: 240px; height: 240px; }
  html.dpw .nui-pod-selbar { margin: 0 0 4px; padding: 6px 0 8px; }
}

/* Phones: the dock spans the screen like in the app. */
@media (max-width: 760px) {
  html.dpw #nui-pod-mini { border-left: none; border-right: none; border-radius: 0; box-shadow: none; }
  html.dpw .nui-pod-selbar { margin: 0 -0.75rem 4px; padding: 6px 0.75rem 8px; }
}

/* ---- the web's light scheme (◑, body.bright-bg) ------------------------------------- */

html.dpw body.bright-bg {
  --nui-muted: #555;
  --nui-panel: #f4f4f4;
  --dpw-surface: #f7f7f7;
  --dpw-hover: #f0f0f0;
}
/* app.css resolves --text-muted (the colour of .btn-icon) on :root, so it stays
   white under body.bright-bg; inside the podcast parts it follows --fg. */
html.dpw body.bright-bg #nui-pod,
html.dpw body.bright-bg #nui-dock,
html.dpw body.bright-bg #nui-sheet,
html.dpw body.bright-bg #nui-pod-player { --text-muted: var(--fg); --text: var(--fg); }
html.dpw body.bright-bg .nui-pod-player-panel { background: var(--dpw-surface); }
html.dpw body.bright-bg .nui-pod-row:active,
html.dpw body.bright-bg .nui-row:active,
html.dpw body.bright-bg .nui-row:hover,
html.dpw body.bright-bg .nui-pod-chapter:hover,
html.dpw body.bright-bg .nui-pod-seg:hover,
html.dpw body.bright-bg .nui-pod-seg.current,
html.dpw body.bright-bg .nui-pod-queue .nui-pod-row.nui-pod-dragging { background: #e8e8e8; }
html.dpw body.bright-bg .nui-pod-art { background: #e4e4e4; }
html.dpw body.bright-bg .nui-pod-count,
html.dpw body.bright-bg .nui-pod-progress,
html.dpw body.bright-bg .nui-pod-mini-bar { background: #d4d4d4; }
html.dpw body.bright-bg .nui-pod-count { color: var(--fg); }
html.dpw body.bright-bg .nui-pod-count-queue { background: var(--accent); color: #fff; }
html.dpw body.bright-bg .nui-pod-swipebg { background: #ececec; }
html.dpw body.bright-bg .nui-pod-swipebg.armed { background: #d6d6d6; }
html.dpw body.bright-bg .nui-pod-dlmark-done { background: #d4d4d4; border-color: #d4d4d4; color: #000; }
html.dpw body.bright-bg .nui-pod-initial { color: #888; }
html.dpw body.bright-bg .nui-pod-chip.on { border-color: #555; }
html.dpw body.bright-bg #nui-pod-mini { box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.12); }