/* 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; }