/* The palette below is the whole theme: yellow paper by default, and the
   mode toggle swaps to the red/yellow inverse. Neither reads the system
   setting. "only light" tells Chromium browsers (Chrome/Edge Auto Dark Mode)
   not to algorithmically re-darken the page on top of that — without it they
   repaint the paper background muddy olive. It cannot override a per-site
   dark mode the user turned on by hand (Comet's Alt+N / moon icon); that is a
   browser-side switch and has to be turned off there. */
:root {
  color-scheme: only light;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --paper: rgb(255, 223, 142);
  --red: #d2300c;
  --red-dim: #d2300c99;
  --red-faint: #d2300c22;
  --red-light: #d2300c15;
  --text: #d2300c;
  --text-dim: #d2300caa;
  --text-faint: #d2300c66;
  --border: #d2300c33;
  --border-strong: #d2300c55;
  --highlight: #d2300c1a;
  --radius: 0px;
}

body.dark {
  --paper: #d2300c;
  --red: rgb(255, 223, 142);
  --red-dim: rgb(255, 223, 142, 0.6);
  --red-faint: rgb(255, 223, 142, 0.13);
  --red-light: rgb(255, 223, 142, 0.08);
  --text: rgb(255, 223, 142);
  --text-dim: rgb(255, 223, 142, 0.7);
  --text-faint: rgb(255, 223, 142, 0.4);
  --border: rgb(255, 223, 142, 0.2);
  --border-strong: rgb(255, 223, 142, 0.35);
  --highlight: rgb(255, 223, 142, 0.1);
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  transition: background-color 0.5s ease, color 0.5s ease;
}

a { color: var(--text); transition: color 0.5s ease; }
b, strong { color: var(--text); transition: color 0.5s ease; }

#app {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

/* ─── Mode Toggle ───────────────────────────── */

#mode-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
  z-index: 100;
  background: var(--text);
  color: var(--paper);
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* ─── Header ────────────────────────────────── */

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

header h1 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.header-links {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}

.header-links a {
  text-decoration: none;
  opacity: 0.6;
}

.header-links a:hover { opacity: 1; }

#stats {
  color: var(--text-dim);
  font-size: 12px;
}

/* ─── Search ────────────────────────────────── */

#search-container {
  position: relative;
  margin-bottom: 28px;
}

#search-input {
  width: 100%;
  padding: 12px 12px 12px 34px;
  background: var(--red-light);
  border: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  caret-color: var(--text);
}

#search-input:focus {
  border-color: var(--text);
  background: var(--highlight);
}

/* magnifier, drawn in CSS so there's no icon font to load */
#search-container::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 17px;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--text-faint);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
#search-container::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 26px;
  width: 5px;
  height: 1.5px;
  background: var(--text-faint);
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
  z-index: 1;
}

#search-input::placeholder {
  color: var(--text-faint);
}

#search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  margin-top: 2px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

#search-results.active {
  display: block;
}

.search-result {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--highlight); }

.search-result .sr-episode {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-result .sr-time {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 8px;
}

.search-result .sr-text {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 13px;
}

.search-result .sr-text mark {
  background: var(--red-faint);
  color: var(--text);
  border-radius: 0;
  padding: 0 2px;
}

/* ─── Timeline (paper feel) ─────────────────── */

#timeline-container {
  margin-bottom: 28px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

#timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#timeline-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--text-dim);
}

#timeline-time {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#timeline-track {
  position: relative;
  height: 36px;
  margin-bottom: 6px;
}

#timeline-episodes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  display: flex;
  gap: 1px;
  overflow: hidden;
}

.timeline-ep {
  height: 100%;
  min-width: 2px;
  background: var(--red-faint);
  transition: background 0.15s;
  cursor: pointer;
  position: relative;
  border-left: 1px solid var(--paper);
}

.timeline-ep:hover {
  background: var(--red-dim);
}

.timeline-ep.active {
  background: var(--text);
}

.timeline-ep-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 3px 8px;
  font-size: 11px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  margin-bottom: 4px;
}

.timeline-ep:hover .timeline-ep-tooltip {
  display: block;
}

#timeline-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
  -webkit-appearance: none;
  appearance: none;
}

#timeline-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 28px;
  background: var(--text);
  pointer-events: none;
  z-index: 4;
  transition: left 0.05s;
}

#timeline-endpoints {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* ─── Audio Player ──────────────────────────── */

#player-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

#player-bar.hidden { display: none; }

#play-btn {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text);
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

#play-btn:hover { background: var(--highlight); }

#player-time, #player-duration {
  color: var(--text-faint);
  min-width: 40px;
  flex-shrink: 0;
}

#player-duration { text-align: right; }

#player-progress-wrap {
  flex: 1;
  height: 4px;
  background: var(--red-faint);
  cursor: pointer;
  position: relative;
}

#player-progress {
  height: 100%;
  background: var(--text);
  width: 0%;
  transition: width 0.1s linear;
}

#player-episode {
  font-size: 11px;
  color: var(--text-dim);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* Playing segment indicator */
.segment.playing .segment-time {
  color: var(--text);
  font-weight: 700;
}

.segment.playing .segment-text {
  color: var(--text);
}

.segment.playing::before {
  content: '▸';
  position: absolute;
  left: 2px;
  color: var(--text);
  font-size: 10px;
}

.segment {
  position: relative;
}

/* ─── Content Area ──────────────────────────── */

#content-area {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px;
}

/* ─── Episode Panel ─────────────────────────── */

#episode-panel {
  border: 1px solid var(--border);
  overflow: hidden;
}

#episode-info {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

#episode-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

#episode-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-dim);
}

#transcript-view {
  max-height: 68vh;
  overflow-y: auto;
  overscroll-behavior: contain;   /* don't hand scroll off to the page */
}

#transcript-content {
  padding: 10px 16px;
}

.segment {
  display: flex;
  gap: 10px;
  padding: 1px 0;
  cursor: pointer;
  transition: background 0.1s;
}

.segment:hover {
  background: var(--highlight);
}

.segment.active {
  background: var(--red-faint);
}

.segment-time {
  flex-shrink: 0;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
  min-width: 48px;
  text-align: right;
  color: var(--text-faint);
  font-weight: 500;
}

.segment-text {
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.45;
}

.segment.active .segment-text {
  color: var(--text);
}

/* ─── Episodes List ─────────────────────────── */

#episodes-list {
  border: 1px solid var(--border);
  padding: 14px;
  max-height: 78vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#episodes-list h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  color: var(--text-dim);
}

#episode-count {
  color: var(--text-faint);
  font-weight: 400;
}

#episodes-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.episode-card {
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}

.episode-card:last-child { border-bottom: none; }
.episode-card:hover { background: var(--highlight); }

.episode-card.active {
  background: var(--red-faint);
}

.episode-card .ec-number {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.episode-card .ec-title {
  font-size: 13px;
  font-weight: 500;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.episode-card .ec-duration {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
}

.episode-card .ec-summary {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 3px;
  line-height: 1.4;
  display: none;
}

.episode-card.active .ec-summary {
  display: block;
}

.episode-card .ec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.episode-card .ec-tag {
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  color: var(--text-faint);
  text-transform: lowercase;
  letter-spacing: 0.3px;
}

/* ─── Episode Summary in Panel ─────────────── */

#episode-summary {
  padding: 0 16px 10px;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

#episode-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
}

.ep-tag {
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  text-transform: lowercase;
  letter-spacing: 0.3px;
}

/* ─── Scrollbar ─────────────────────────────── */

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ─── Loading / Empty ───────────────────────── */

.loading {
  text-align: center;
  padding: 40px;
  color: var(--text-dim);
}

.loading::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--border);
  border-top-color: var(--text);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-faint);
}

.empty-state h3 {
  font-size: 14px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 13px;
  max-width: 360px;
  margin: 0 auto;
}

/* ─── Responsive ────────────────────────────── */

@media (max-width: 768px) {
  #content-area {
    grid-template-columns: 1fr;
  }
  #app {
    padding: 12px 14px 40px;
  }

  /* Header stacks so the episode count isn't crushed against the title */
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 20px;
  }
  header h1 { font-size: 18px; }
  #mode-toggle { top: 8px; right: 8px; }

  /* The toggle sits top-right; keep the title clear of it */
  header h1, .header-links { padding-right: 36px; }

  /* 188 episode blocks are far too small to hit with a thumb, so give the
     track real height and let the slider be the primary control. */
  #timeline-track { height: 52px; }
  #timeline-slider { height: 52px; }
  .timeline-ep-tooltip { display: none; }   /* no hover on touch */

  /* 188 blocks at 2px + a 1px border + a 1px gap need ~750px of track. On a
     phone flex can't shrink past those minimums, so the last third of the
     podcast used to spill off the right edge and get clipped. Drop the
     separators and the floor to 1px: 188px fits any phone. */
  #timeline-episodes { gap: 0; }
  .timeline-ep { min-width: 1px; border-left: 0; }

  /* The now-playing title is far too long to sit beside the label at this
     width; stack it under "TIMELINE" instead of crowding into it. */
  #timeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 8px;
  }
  #timeline-time { font-size: 12px; line-height: 1.35; }

  /* Reclaim horizontal space in the transcript */
  .segment { gap: 8px; }
  .segment-time { min-width: 38px; font-size: 10px; }
  .segment-text { font-size: 14px; line-height: 1.5; }
  #transcript-content { padding: 10px 12px; }
  #transcript-view { max-height: 58vh; }

  /* Episode list goes above the transcript on a phone: it's how you navigate */
  #content-area { display: flex; flex-direction: column; }
  #episodes-list { order: -1; max-height: 42vh; }

  #player-bar { flex-wrap: wrap; gap: 8px; row-gap: 4px; }
  #player-episode {
    flex-basis: 100%;
    order: 3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #player-progress-wrap { min-width: 80px; }

  #search-input { font-size: 16px; }   /* 16px stops iOS zooming on focus */
}

@media (max-width: 420px) {
  #app { padding: 10px 10px 32px; }
  .segment-time { min-width: 34px; }
  #episode-title { font-size: 15px; }
  #timeline-endpoints { font-size: 10px; }
}