:root {
  color-scheme: dark;
  --bg: #0b0b0d;
  --fg: #f5f5f7;
  --dim: #8a8a90;
  --accent: #3ea6ff;
  --accent-contrast: #06121c; /* text drawn on top of an --accent-filled button */
  --surface: #1c1c1f;         /* card/row fill (podcast art fallback, form inputs, list rows) */
  --surface-2: #0f0f12;       /* deeper panel fill (menu panel, info overlay, episode-card gradient) */
  --border-soft: rgba(245, 245, 247, 0.28); /* feint border on photos/cards */
  --hairline: rgba(255, 255, 255, 0.08);    /* faint dividers/input borders */
  --shadow-1: rgba(0, 0, 0, 0.5);           /* drop shadow under photos/cards */
  --chip-fill: rgba(255, 255, 255, 0.08);   /* small round icon buttons (menu/back/remove) */
  --control-fill: rgba(245, 245, 247, 0.06);  /* dial-center/dial-back resting fill */
  --control-pressed: rgba(138, 138, 144, 0.2); /* dial-ring/dial-back pressed fill */
  --track-fill: #2a2a2e; /* progress bar track */
  --overlay-chip-fill: rgba(28, 28, 31, 0.85); /* near-opaque floating button over photos/varied backgrounds (e.g. the header's burger button) */
}

/* Toggled by applyTheme() in scripts/data.js (persisted as carpod:theme) — the stamped
   [data-theme] attribute always wins over the OS-level prefers-color-scheme guess. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f6;
  --fg: #14141a;
  --dim: #6b6b74;
  --surface: #e7e7ea;
  --surface-2: #ffffff;
  --border-soft: rgba(20, 20, 26, 0.14);
  --hairline: rgba(20, 20, 26, 0.1);
  --shadow-1: rgba(20, 20, 26, 0.16);
  --chip-fill: rgba(20, 20, 26, 0.06);
  --control-fill: rgba(20, 20, 26, 0.05);
  --control-pressed: rgba(20, 20, 26, 0.12);
  --track-fill: #d8d8dc;
  --overlay-chip-fill: rgba(244, 244, 246, 0.85);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

#app {
  position: fixed;
  inset: 0;
  height: 100dvh;
  width: 100vw;
  touch-action: none;
  display: flex;
  flex-direction: column;
}

.header {
  position: relative;
  z-index: 35; /* stays above .menu-overlay (z-index 30) so the burger button remains tappable-to-close while the menu is open */
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(env(safe-area-inset-top, 14px), 14px) 16px 14px;
}

.header-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 25px;
  font-weight: 600;
}

.header-title-text {
  display: inline-block;
  white-space: nowrap;
}

/* only applied by JS (updateHeaderTitle) when the text actually overflows —
   classic single-element CSS marquee: start fully off-screen right via
   padding-left:100%, animate to translateX(-100%) (now off-screen left), loop */
.header-title.scrolling .header-title-text {
  padding-left: 100%;
  animation: header-marquee 9s linear infinite;
}
@keyframes header-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}