/* --- archive/archive.css ---
   Self-contained stylesheet for the archive design preview. Hand-picks the
   same tokens as the main site's style.css (monospace, black/white,
   per-station accent colors) rather than importing the full stylesheet,
   since most of it targets elements (#canvas, #splash-screen, etc.) that
   don't exist on this page. */

:root {
  --bg: #000000;
  --fg: #ffffff;
  --dim: rgba(255, 255, 255, 0.55);
  --faint: rgba(255, 255, 255, 0.15);
  --station-color: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: monospace;
}

a { color: inherit; }

#archive-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 24px;
  border-bottom: 2px double var(--fg);
}

/* Matches the main site's #channel-selector (18px, bold, 1px tracking) so
   the "radio braquage" title reads the same size on both pages. */
#archive-title { font-size: 18px; font-weight: bold; letter-spacing: 1px; }
#archive-subtitle { opacity: 0.5; margin-left: 6px; }

#archive-back {
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.6;
  border: 1px solid var(--faint);
  padding: 4px 10px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
#archive-back:hover { opacity: 1; border-color: var(--fg); }

#archive-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 120px;
}

.view-intro { font-size: 12px; opacity: 0.5; margin: 0 0 20px; }

.archive-view { display: none; }
.archive-view.active { display: block; }

/* --- show grid --- */

#show-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.archive-empty {
  grid-column: 1 / -1;
  padding: 80px 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0.4;
}

.show-card {
  border: 1px solid var(--faint);
  cursor: pointer;
  text-align: left;
  background: transparent;
  color: inherit;
  font-family: inherit;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.show-card:hover { border-color: var(--station-color); transform: translateY(-2px); }

.show-card-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--faint);
}
/* contain, not cover: covers come in mixed ratios (this one's a 4:5
   portrait) and showing the whole image beats cropping it — same call
   the main site already makes for this exact image (.schedule-modal-image
   in style.css). */
.show-card-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.show-card-cover.no-image { font-size: 11px; opacity: 0.35; letter-spacing: 1px; }

.show-card-body { padding: 12px 14px; }

.show-card-title {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
}

.show-card-host { font-size: 11px; opacity: 0.6; margin-top: 4px; }

.show-card-station {
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 1px;
  color: var(--station-color);
  margin-top: 8px;
}

.show-card-count { font-size: 10px; opacity: 0.4; margin-top: 3px; }

.show-card-placeholder-tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffcc00;
  border: 1px solid #ffcc00;
  padding: 1px 5px;
  margin-top: 8px;
}

/* --- bracket buttons (matches [ SCHEDULE ] / [ ABOUT ] style) --- */

.bracket-btn {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}
.bracket-btn:hover { background: var(--fg); color: var(--bg); }

#episodes-back { margin-bottom: 18px; }

/* --- show detail header --- */

#show-detail {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--faint);
}

.show-detail-cover {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--faint);
  overflow: hidden;
}
.show-detail-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }

.show-detail-title { font-size: 18px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.show-detail-meta { font-size: 11px; margin-top: 6px; }
.show-detail-meta .station { color: var(--station-color); text-transform: lowercase; letter-spacing: 1px; }
.show-detail-meta .host { opacity: 0.6; margin-left: 10px; }
.show-detail-schedule { font-size: 11px; opacity: 0.45; margin-top: 4px; }
/* pre-line: keeps authored line breaks (multi-line JS strings) as real
   line breaks, while still collapsing runs of spaces and wrapping
   normally — plain HTML/CSS otherwise flattens newlines to nothing. */
.show-detail-desc { font-size: 12px; opacity: 0.7; margin-top: 10px; line-height: 1.5; max-width: 55ch; white-space: pre-line; }

/* --- episode rows --- */

#episode-list { display: flex; flex-direction: column; }

.episode { border-bottom: 1px solid var(--faint); }

.episode-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  cursor: pointer;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.episode-row:hover { background: rgba(255, 255, 255, 0.04); }
.episode-row.is-current { padding-left: 8px; border-left: 2px solid var(--station-color); background: rgba(255, 255, 255, 0.04); }

.episode-row.is-upcoming { cursor: default; opacity: 0.4; }
.episode-row.is-upcoming:hover { background: none; }

.episode-upcoming-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 1px 5px;
  margin-right: 6px;
  vertical-align: middle;
}

.episode-upcoming-desc {
  font-size: 11px;
  line-height: 1.5;
  max-width: 60ch;
  margin: 6px 0 0;
  white-space: pre-line;
}

.episode-play-icon {
  width: 22px;
  flex-shrink: 0;
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
}

.episode-info-toggle {
  flex-shrink: 0;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--faint);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  padding: 3px 6px;
  transition: all 0.15s ease;
}
.episode-info-toggle:hover { color: var(--fg); border-color: var(--fg); }
/* Filled, not just outlined — a border/text-color-only distinction from
   :hover would be invisible whenever --station-color happens to be white
   (the flagship "radio braquage" station's own accent), so "open" (a
   persistent state) needs a structurally different look, not just a
   different hue, to read as different from ":hover" (a momentary one)
   regardless of station color. */
.episode-info-toggle.is-open {
  background: var(--station-color);
  color: var(--bg);
  border-color: var(--station-color);
}
.episode-info-toggle.is-open:hover { opacity: 0.8; }

.episode-details {
  padding: 2px 4px 16px 36px;
  cursor: default;
}

.episode-desc {
  font-size: 11px;
  opacity: 0.6;
  line-height: 1.5;
  max-width: 60ch;
  margin: 0;
  white-space: pre-line;
}

.episode-info { flex-grow: 1; min-width: 0; }
.episode-title { font-size: 13px; letter-spacing: 0.3px; }
.episode-row.is-current .episode-title { color: var(--station-color); font-weight: bold; }
.episode-date { font-size: 10px; opacity: 0.4; margin-top: 3px; letter-spacing: 0.5px; }

/* --- persistent bottom player --- */

/* [hidden] needs to win over #archive-player's own `display: flex` below —
   an ID selector otherwise beats the attribute selector the browser uses
   for [hidden], so the (empty) bar stayed visible before ever picking an
   episode. That's what made it look like the bar "resized" on first
   play: it was already on-screen, just empty. */
#archive-player[hidden] { display: none; }

/* Show/episode title always on its own line, controls on the line below —
   at every width, not just mobile. */
#archive-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--bg);
  border-top: 2px double var(--fg);
  padding: 10px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.player-meta { min-width: 0; }
.player-show { font-size: 9px; opacity: 0.45; text-transform: lowercase; letter-spacing: 1px; }
.player-title {
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-time { font-size: 11px; opacity: 0.6; width: 38px; flex-shrink: 0; text-align: center; }

/* Sized to its own text content (not flex-grow'd) so the element's
   clickable width always matches its visible width exactly — a stretched
   ascii-bar leaves dead space where clicks would map to a ratio that
   doesn't correspond to anything shown. The seek bar's char count is
   instead computed in JS from its wrap's actual pixel width (see
   recomputeSeekBarLength in archive.js), so it fills the space without
   needing to be stretched. */
.ascii-bar {
  cursor: pointer;
  white-space: pre;
  flex: 0 0 auto;
  letter-spacing: -1px;
  font-size: 15px;
  user-select: none;
}
.ascii-bar span.filled { color: var(--station-color); }
.ascii-bar span.empty { opacity: 0.3; }

#player-seek-wrap { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; overflow: hidden; }

/* Icon glyph ('>' / '||', plain ASCII — see the play/pause listeners in
   archive.js for why), not a "[ PLAY ]" / "[ PAUSE ]" text swap — same
   character count either way, so the button never changes width when
   playback toggles. Width is set wide enough for the wider of the two
   ("[ || ]" measures ~65px with this padding, "[ > ]" ~58px) so neither
   ever overflows its own border. */
.bracket-btn.player-toggle-btn {
  width: 66px;
  flex-shrink: 0;
  text-align: center;
  white-space: nowrap;
}

#player-download { flex-shrink: 0; }

#player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

#player-volume {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
#player-volume .ascii-bar { font-size: 13px; }
#player-volume-text { font-size: 11px; opacity: 0.6; width: 30px; text-align: right; }

@media (max-width: 640px) {
  #archive-header { flex-wrap: wrap; gap: 10px; padding: 16px 18px; }
  #archive-player { padding: 10px 12px; }
  /* The controls row itself never wraps — the seek bar (flex: 1, min-width:
     0) is the only element that can shrink, so play/pause, both
     timestamps and download always stay on one line. */
  #player-controls { flex-wrap: nowrap; gap: 6px; }
  .ascii-bar { font-size: 11px; }
  .player-time { width: 32px; font-size: 10px; }
  #player-volume { display: none; }
  #show-detail { flex-direction: column; }
  .show-detail-cover { width: 100%; height: auto; aspect-ratio: 1/1; }
  /* Bigger tap target than the visual [i] badge implies — comfortable to
     hit on touch without looking oversized next to the play icon. */
  .episode-info-toggle { padding: 8px 12px; margin: -8px -6px -8px 0; }
}