/* Per-episode scheme panel + the bold per-episode colour tint.
   Each episode carries its collated Linati/Gilbert scheme (src/data/episodes.json)
   and an `--ep-accent` hue set inline on .episode. We derive `--ep-tint` from it,
   lightened on dark backgrounds so it stays legible, and use it for the episode's
   chrome — header rule, kicker, opening versal, and the scheme card. */

.episode { --ep-tint: var(--ep-accent, var(--color-ink-soft)); }
[data-theme="dark"] .episode {
  --ep-tint: color-mix(in srgb, var(--ep-accent, var(--color-ink-soft)) 60%, #efe7d6 40%);
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .episode {
    --ep-tint: color-mix(in srgb, var(--ep-accent, var(--color-ink-soft)) 60%, #efe7d6 40%);
  }
}

/* ---- Tinted episode chrome ---- */
.episode .episode-header {
  border-bottom: 2px solid var(--ep-tint);
  padding-bottom: 1.1rem;
  /* Keep the header (and its Scheme toggle) above the opening versal: the big
     drop-cap's tight line-height makes its glyph paint up into the header, and
     without this it would sit over the toggle and swallow the click. */
  position: relative;
  z-index: 2;
}
.episode .episode-part { color: var(--ep-tint); }
/* The opening versal (S / M / P) takes the episode's hue, and is purely
   decorative — never intercept pointer events meant for text/UI behind it. */
.episode .episode-body .versal {
  color: var(--ep-tint);
  pointer-events: none;
}

/* ---- Scheme card ---- */
.scheme { margin-top: 1rem; font-family: var(--font-ui); }
.scheme > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.3rem 0;
}
.scheme > summary::-webkit-details-marker { display: none; }
.scheme-tag {
  flex: none;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ep-tint);
  border: 1px solid var(--ep-tint);
  border-radius: 1rem;
  padding: 0.12rem 0.6rem;
}
.scheme-teaser {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}
.scheme[open] .scheme-teaser { opacity: 0.7; }

.scheme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1.6rem;
  margin: 0.65rem 0 0;
  padding: 0.95rem 1.2rem;
  border-left: 3px solid var(--ep-tint);
  background: var(--color-shade);
  border-radius: 0 0.35rem 0.35rem 0;
}
.scheme-grid > div { min-width: 0; }
.scheme-grid dt {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 0.12rem;
}
.scheme-grid dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
}
.scheme-wide { grid-column: 1 / -1; }
.scheme-swatch {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--ep-accent);
  border: 1px solid var(--color-rule);
  vertical-align: -1px;
  margin-right: 0.45rem;
}
/* Wandering Rocks — "Rainbow." */
.scheme-swatch--rainbow {
  background: conic-gradient(
    from 90deg,
    #b34a3a, #c47a3a, #b58a34, #5e8a5a, #6a86a0, #6a6a9a, #7d5a93, #b34a3a
  );
}
.scheme-unassigned { color: var(--color-ink-soft); font-style: italic; }
.scheme-attrib {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-ink-soft);
  opacity: 0.8;
}

@media (max-width: 640px) {
  .scheme-grid { grid-template-columns: 1fr; }
}

/* ---- Per-episode Bloomsday clock (in the header kicker) ---- */
.episode-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Per-episode RTÉ audio player ----
   Inline player for the RTÉ Radio Players' 1982 dramatization, tinted to the
   episode accent. Audio streams from RTÉ; credited in the caption. */
.episode-audio {
  margin: 0 0 2.2rem;
  padding: 0.75rem 0.95rem 0.85rem;
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--ep-tint, var(--color-rule));
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--color-shade);
}
.episode-audio-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-ui);
}
.episode-audio-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ep-tint, var(--color-ink));
  font-weight: 600;
}
.episode-audio-credit {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.episode-audio-credit:hover { color: var(--color-ink); text-decoration: underline; }
.episode-audio-player {
  width: 100%;
  height: 2.4rem;
}
@media (max-width: 560px) {
  .episode-audio-head { flex-direction: column; gap: 0.2rem; }
  .episode-audio-credit { white-space: normal; }
}

/* Floating play/pause for the episode audio — stays put while scrolling
   (audio.js shows it once playback starts; tinted to the episode accent). */
.audio-fab {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 46;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: var(--color-ink);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  opacity: 0.95;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.audio-fab[hidden] { display: none; }
.audio-fab:hover { opacity: 1; transform: translateY(-1px); }
.audio-fab svg { display: block; }