/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Fresh blue: white, ink text, one blue accent, Inter throughout (served
   from app/assets/fonts -- SIL Open Font License, Inter-OFL.txt -- rather
   than Google Fonts, so visitors' IPs aren't shared with Google). */
@font-face {
  font-family: "Inter";
  src: url("/assets/inter-latin-wght-normal-1f021a24.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #16181d;
  --muted: #535a66;
  --line: #e4e6eb;
  --surface: #f5f7fb;
  --accent: #1e4fd6;
  --accent-hover: #163ba3;
  --accent-soft: #e8efff;
  --radius: 12px;
  /* The hosts, Edwin, Will and Ben, then anyone else: transcript underlines
     and the stats charts. Distinct from each other, the accent and the
     marker; the first three pass the dataviz palette checks. */
  --speaker-1: #d9480f;
  --speaker-2: #1098ad;
  --speaker-3: #7048e8;
  --speaker-4: #5c940d;
  --speaker-unknown: #c9ced6;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  margin: 0;
  /* The episode page's wide video band runs to the window's edges, and
     100vw counts the scrollbar. */
  overflow-x: clip;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

h1, h2, h3 { letter-spacing: -0.02em; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.muted { color: var(--muted); }

/* Header and footer */

.site-header { border-bottom: 1px solid var(--line); }

.site-header-inner,
.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.site-header-inner {
  min-height: 72px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.site-brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  text-decoration: none;
}

.site-name {
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.site-name-the { font-weight: 500; color: var(--muted); }

.site-nav { display: flex; gap: 4px; }

.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.875rem;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover { background: var(--surface); }
.site-nav a[aria-current] { color: var(--accent); }

.site-footer {
  margin-top: 4.5rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.site-footer section,
.site-footer-notes { flex: 1 1 320px; min-width: 0; }
.site-footer h2 { margin: 0; font-size: 1.375rem; }

.site-footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
}

.site-footer a { text-underline-offset: 3px; }
.site-footer-notes { font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
.site-footer-notes p { margin: 0 0 0.5rem; }

/* Page structure and shared pieces */

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem;
}

.container--home { max-width: 1200px; }

.page-title { margin: 1rem 0 1.5rem; font-size: 2rem; }

.label {
  margin: 0 0 0.625rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.label--muted { color: var(--muted); }

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 1.375rem;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--accent-hover); color: #fff; }

.chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.875rem;
  border-radius: 18px;
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.chip:hover { background: #d6e4ff; color: var(--ink); }

.search-form,
.home-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.search-form { margin-bottom: 1.5rem; }

.search-form input[type="search"],
.home-search input[type="search"] {
  flex: 1 1 260px;
  min-width: 0;
  height: 48px;
  box-sizing: border-box;
  padding: 0 1rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  font: inherit;
  font-size: 1.0625rem;
}

.search-form input[type="submit"],
.home-search input[type="submit"] {
  height: 48px;
  padding: 0 1.5rem;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.search-form input[type="submit"]:hover,
.home-search input[type="submit"]:hover { background: var(--accent-hover); }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}

/* Home */

.home-hero {
  padding: 2.5rem 0 3rem;
  border-bottom: 1px solid var(--line);
}

.home-eyebrow { margin: 0 0 1rem; color: var(--muted); font-size: 0.875rem; font-weight: 600; }

.home-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: 2.625rem;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.home-lede {
  max-width: 620px;
  margin: 1.125rem 0 0;
  color: var(--muted);
  font-size: 1.1875rem;
  line-height: 1.55;
}

.home-search { max-width: 640px; margin-top: 1.75rem; }

.home-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 980px;
  margin-top: 0.875rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.home-stats { margin-left: auto; }

.home-youtube {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

.home-latest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem 2.5rem;
  padding-top: 3.5rem;
}

.home-latest-thumbnail {
  flex: 1 1 480px;
  max-width: 680px;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #0e1014;
}

.home-latest-thumbnail img,
.episode-card-thumbnail img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.home-latest-body { flex: 1 1 360px; min-width: 0; }
.home-latest h2 { margin: 0; font-size: 2rem; line-height: 1.15; }
.home-latest h2 a,
.episode-card-title a { color: var(--ink); text-decoration: none; }
.home-latest h2 a:hover,
.episode-card-title a:hover { text-decoration: underline; }

.home-latest .label--muted { margin-top: 1.5rem; }

.home-chapters {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-chapters a {
  min-height: 44px;
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  box-sizing: border-box;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  text-decoration: none;
}

.home-chapters a:hover { background: #eef1f6; }
.home-chapter-time { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }

.home-latest-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
}

.home-more { padding-top: 4rem; }

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.section-heading h2 { margin: 0; font-size: 1.625rem; }
.section-heading a { font-size: 0.9375rem; font-weight: 600; }

/* Episode listings: home and all episodes */

.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 2rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.episode-card { display: flex; flex-direction: column; gap: 0.75rem; }

.episode-card-thumbnail {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0e1014;
}

.episode-meta {
  margin: 0.625rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.episode-card .episode-meta { margin: 0; }

.episode-card-title { margin: 0; font-size: 1.3125rem; line-height: 1.25; }

.episode-topics {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.45;
}

.episode-topics li { display: flex; align-items: baseline; gap: 10px; }

.episode-topics li::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .home-hero h1 { font-size: 2rem; }
  .home-stats { margin-left: 0; width: 100%; }
}

.container--wide {
  max-width: 1280px;
}

.container--search {
  max-width: 880px;
}

/* Search: matches are marked in blue everywhere -- results, chapter titles
   and the episode transcript -- so they never read as the yellow "playing
   now" highlight. */
.search-mark,
.transcript-word.is-match {
  border-radius: 3px;
  background: #d6e4ff;
  box-shadow: 0 0 0 2px #d6e4ff;
  color: #0f2a7a;
}

.search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin: 1.75rem 0 0.5rem;
}

.search-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.search-suggestion-count {
  margin-left: 0.375rem;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.search-summary h1 { margin: 0; font-size: 1.75rem; line-height: 1.2; }
.search-summary p { margin: 0.375rem 0 0; font-size: 0.9375rem; color: #535a66; }

.search-sort {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #c9cdd5;
  border-radius: 22px;
  background: #f5f6f8;
}

.search-sort-option {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 1rem;
  border-radius: 19px;
  color: #535a66;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.search-sort-option[aria-current] {
  background: #fff;
  color: #16181d;
  box-shadow: 0 1px 3px rgba(14, 16, 20, 0.16);
}

.search-results { list-style: none; margin: 0; padding: 0; }

.search-result {
  padding: 1.75rem 0;
  border-bottom: 1px solid #e4e6eb;
}

.search-result article {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.375rem;
}

.search-result-thumbnail {
  flex: 0 0 200px;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #0e1014;
}

.search-result-thumbnail img {
  display: block;
  width: 200px;
  height: 112px;
  object-fit: cover;
}

.search-result-heading { flex: 1 1 360px; min-width: 0; }
.search-result-heading h2 { margin: 0; font-size: 1.1875rem; line-height: 1.3; }
.search-result-heading h2 a { color: #16181d; text-decoration: none; }
.search-result-heading h2 a:hover { text-decoration: underline; }
.search-result-meta { margin: 0.375rem 0 0; font-size: 0.875rem; color: #535a66; }

.search-moments {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-moment {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  background: #f7f8fa;
  color: #16181d;
  text-decoration: none;
}

.search-moment:hover { background: #eef1f6; }
.search-moment:focus-visible { outline: 2px solid #1e4fd6; outline-offset: 2px; }

.search-moment-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1e4fd6;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.search-moment-excerpt {
  display: block;
  font-family: Charter, "Iowan Old Style", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.search-moment-chapter {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

.search-moment-label {
  margin-right: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #535a66;
}

.search-moment-meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: #535a66;
}

.search-more { width: 100%; }

.search-more summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.375rem;
  color: #1e4fd6;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.search-more summary::-webkit-details-marker { display: none; }
.search-more[open] .search-more-show,
.search-more:not([open]) .search-more-hide { display: none; }

@media (max-width: 600px) {
  .search-result-thumbnail { flex-basis: 100%; }
  .search-result-thumbnail img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .search-moment { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
}

/* Episode page: player, title and chapters on the left; the transcript in
   its own scroll box on the right. Stacks on narrow screens, with the
   chapter list moving below the transcript. */
.episode-page {
  --accent: #1e4fd6;
  --muted: #535a66;
  --hairline: #e4e6eb;
  --marker: #ffe38a;

  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  grid-template-areas:
    "player transcript"
    "heading transcript"
    "chapters transcript";
  grid-template-rows: auto auto 1fr;
  gap: 1.25rem 2rem;
  align-items: start;
}

.episode-player { grid-area: player; display: flex; flex-direction: column; gap: 0.75rem; }
.episode-heading { grid-area: heading; }
.chapter-list { grid-area: chapters; }
.transcript-panel { grid-area: transcript; min-width: 0; }

@media (max-width: 900px) {
  .episode-page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "player" "heading" "transcript" "chapters";
    grid-template-rows: none;
  }
}

/* Wide view, like YouTube's theatre mode: the video in a dark band across
   the whole window, the transcript below it on the left and the episode
   details on the right. Only offered on screens wide enough for the two
   columns; narrower ones stack anyway. */
@media (min-width: 901px) {
  .episode-page.is-wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas:
      "player player"
      "transcript heading"
      "transcript chapters";
    grid-template-rows: auto auto 1fr;
  }

  .episode-page.is-wide .player-stage {
    margin: -1.5rem calc(50% - 50vw) 0;
    background: #0e1014;
  }

  .search-back + .episode-page.is-wide .player-stage { margin-top: 0; }

  .episode-page.is-wide .youtube-embed {
    width: min(100%, 1280px, calc((100vh - 220px) * 16 / 9));
    margin: 0 auto;
    border-radius: 0;
  }

  .episode-page.is-wide .transcript { height: min(640px, 70vh); }
}

.youtube-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: #0e1014;
}

.youtube-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.search-back { margin: -0.75rem 0 0.75rem; }

.search-back a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

/* A tick above the chapter bar for each mention of the search, so clusters
   show at a glance; the find bar's current one is darker. */
.mention-ticks {
  position: relative;
  height: 8px;
  margin-bottom: 2px;
}

.mention-tick {
  position: absolute;
  top: 0;
  width: 3px;
  height: 8px;
  margin-left: -1px;
  border-radius: 1px;
  background: #5b86f0;
}

.mention-tick.is-current { background: #0f2a7a; }

.chapter-bar {
  display: flex;
  gap: 3px;
}

.chapter-bar-segment {
  flex-basis: 0;
  flex-shrink: 1;
  min-width: 6px;
  height: 24px;
  padding: 9px 0;
  border: none;
  background: none;
  cursor: pointer;
}

.chapter-bar-track {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #d9dde4;
  overflow: hidden;
}

.chapter-bar-segment:hover .chapter-bar-track { background: #c3c9d3; }

.chapter-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

.player-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.chapter-progress-clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chapter-progress-title { flex: 1 1 10rem; min-width: 0; font-weight: 600; color: #1a1a1a; }

.wide-toggle {
  height: 44px;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem 0 0.75rem;
  border: 1px solid #c9cdd5;
  border-radius: 22px;
  background: #fff;
  color: #1a1a1a;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.wide-toggle:hover { background: #f0f2f6; }
.wide-toggle[hidden] { display: none; }

@media (max-width: 900px) {
  .wide-toggle { display: none; }
}

.episode-heading h1 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
}

.episode-description {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.episode-description summary {
  cursor: pointer;
  font-weight: 600;
}

.episode-description p { overflow-wrap: anywhere; }

.chapter-list {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.5rem;
}

.chapter-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.5rem 0.75rem 0.375rem;
}

.chapter-list-header h2 { margin: 0; font-size: 1rem; }
.chapter-list-note { font-size: 0.8125rem; color: var(--muted); }

.chapter-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chapter-list-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}

.chapter-list-item:hover { background: #f0f2f6; }

.chapter-list-item[aria-current="true"] {
  background: #eef2fd;
  color: var(--accent);
  font-weight: 600;
}

.chapter-mentions {
  flex: 0 0 auto;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  padding: 0 6px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: #d6e4ff;
  color: #0f2a7a;
  font-size: 0.75rem;
  font-weight: 700;
}

.is-search-cleared .mention-ticks,
.is-search-cleared .chapter-mentions { display: none; }

.is-search-cleared .search-mark { background: none; box-shadow: none; color: inherit; }

.find-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  padding: 6px 6px 6px 14px;
  border: 1px solid #c4d6ff;
  border-radius: 12px;
  background: #eef3ff;
  color: #0f2a7a;
  font-size: 0.9375rem;
}

.find-bar[hidden] { display: none; }
.find-bar-query { font-weight: 700; }
.find-bar-position { flex: 1 1 auto; font-variant-numeric: tabular-nums; }

.find-bar-button,
.find-bar-clear {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  color: inherit;
}

.find-bar-button {
  border: 1px solid #c4d6ff;
  background: #fff;
  cursor: pointer;
}

.find-bar-button[hidden] { display: none; }
.find-bar-button:hover { background: #f5f8ff; }

.chapter-list-time {
  flex: 0 0 4rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.transcript-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.transcript-panel-header h2 { margin: 0; font-size: 1.25rem; }

.follow-toggle {
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.875rem 0 0.625rem;
  border: 1px solid #c9cdd5;
  border-radius: 22px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.follow-toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #b5bbc6;
  transition: background-color 0.2s;
}

.follow-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.follow-toggle[aria-pressed="true"] .follow-toggle-switch { background: var(--accent); }
.follow-toggle[aria-pressed="true"] .follow-toggle-switch::after { transform: translateX(16px); }

.transcript-frame { position: relative; }

/* position: relative makes this the offsetParent the auto-scroll measures
   lines against. */
.transcript {
  position: relative;
  height: min(820px, 78vh);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0 1.75rem 22rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-family: Charter, "Iowan Old Style", Georgia, serif;
  font-size: 1.1875rem;
  line-height: 1.5;
}

.transcript:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The current chapter's heading stays at the top of the transcript while
   its lines scroll under it -- the only timestamp in the transcript. */
.transcript-chapter {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 -1.75rem 0.5rem;
  padding: 0.875rem 1.75rem 0.75rem;
  border-bottom: 1px solid #eceef2;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9375rem;
}

.transcript-section + .transcript-section { margin-top: 1.5rem; }
.transcript-section:first-child > .transcript-cue:first-child { margin-top: 0.75rem; }

.transcript-chapter-time {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-decoration: none;
}

.transcript-chapter-time:hover { text-decoration: underline; }

/* One short line per phrase, like subtitles; a new speaker's turn starts a
   little apart from the last. */
.transcript-cue {
  max-width: 34em;
  margin: 0;
  padding: 0.0625rem 0;
  cursor: pointer;
}

.transcript-cue.is-turn-start { margin-top: 1rem; }

/* Lines already spoken fade back, so the current one stands out. */
.transcript-cue.is-spoken { color: #6b7280; }

.transcript-cue-text {
  border-radius: 3px;
  transition: background-color 0.25s, box-shadow 0.25s;
}

/* A tint, not an underline: underlines show who's speaking. */
.transcript-cue:hover .transcript-cue-text { background: #eef0f3; box-shadow: 0 0 0 3px #eef0f3; }

.transcript-cue.is-active .transcript-cue-text {
  background: var(--marker);
  box-shadow: 0 0 0 4px var(--marker);
}

/* Who's speaking: a coloured underline per identified speaker; text the
   pipeline couldn't attribute stays plain. */
.transcript-run[class*="speaker-"] {
  text-decoration: underline 2px var(--speaker);
  text-underline-offset: 5px;
}

.speaker-1 { --speaker: var(--speaker-1); }
.speaker-2 { --speaker: var(--speaker-2); }
.speaker-3 { --speaker: var(--speaker-3); }
.speaker-4 { --speaker: var(--speaker-4); }

.speaker-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--muted);
}

.speaker-key li {
  text-decoration: underline 2px var(--speaker);
  text-underline-offset: 4px;
}

/* The mention the find bar is on. */
.transcript-word.is-current-match {
  box-shadow: 0 0 0 2px #d6e4ff, 0 0 0 4px var(--accent);
}

/* The word being spoken, within the highlighted line. */
.transcript-word.is-current {
  border-radius: 2px;
  background: #fcc419;
  box-shadow: 0 0 0 2px #fcc419;
}

.transcript-jump {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  height: 44px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.125rem 0 0.875rem;
  border: none;
  border-radius: 22px;
  background: #16181d;
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(14, 16, 20, 0.18);
}

.transcript-jump[hidden] { display: none; }

@media (max-width: 600px) {
  .transcript { padding: 0 1rem 16rem; font-size: 1.0625rem; }
  .transcript-chapter { margin-inline: -1rem; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .transcript-cue-text,
  .follow-toggle-switch,
  .follow-toggle-switch::after { transition: none; }
}

/* Stats: figures, then charts. Marks carry the speaker colours; every
   label, value and legend stays in the text colours. */
.speaker-unknown { --speaker: var(--speaker-unknown); }

.container--stats { max-width: 1000px; }
.stats-header .page-title { margin-bottom: 0.5rem; }
.stats-lede { margin: 0 0 2rem; max-width: 60ch; color: var(--muted); line-height: 1.5; }
.stats-updated { white-space: nowrap; }

.stats-figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.stats-hero { display: flex; flex-direction: column; margin: 0; }
.stats-hero-value { font-size: 4rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.stats-hero-label { margin-top: 0.5rem; color: var(--muted); }

.stats-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}

.stat-tile {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: 1rem;
  border-radius: 10px;
  background: var(--surface);
}

.stat-tile dt { margin-top: 0.375rem; font-size: 0.875rem; color: var(--muted); line-height: 1.35; }
.stat-tile dd { margin: 0; font-size: 1.625rem; font-weight: 650; letter-spacing: -0.02em; }

.stats-section { margin-top: 3rem; }
.stats-section h2 { margin: 0; font-size: 1.5rem; }
.stats-note { margin: 0.375rem 0 1.25rem; color: var(--muted); font-size: 0.9375rem; }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--muted);
}

.chart-legend li { display: inline-flex; align-items: center; gap: 0.5rem; }

.chart-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--speaker);
}

/* A whole split into parts: each its own block, its share printed on it. */
.segmented-bar { display: flex; gap: 2px; height: 28px; }

.segmented-bar-part {
  display: flex;
  align-items: center;
  padding-left: 0.625rem;
  border-radius: 4px;
  background: var(--speaker);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
}

.host-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.host-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); }
.host-card h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.25rem; }

.host-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.625rem 0 0; }

.host-badge {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.75rem;
  font-weight: 600;
}

.host-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  margin: 1rem 0 0;
}

.host-figures dt { font-size: 0.8125rem; color: var(--muted); }
.host-figures dd { margin: 0.125rem 0 0; font-size: 1.0625rem; font-weight: 600; }


/* Ranked bars, each split by speaker: a 2px surface gap between parts, a
   4px rounded end, square at the baseline, the total at the tip. */
.term-chart { margin: 1.25rem 0 0; padding: 0; list-style: none; }

.term-row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: 36px;
  padding: 0 0.5rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}

.term-row:hover { background: var(--surface); }
.term-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.term-name { font-size: 0.9375rem; font-weight: 600; text-align: right; }

.term-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-left: 1px solid var(--line);
  min-height: 36px;
}

.term-bar { display: flex; gap: 2px; height: 20px; min-width: 4px; }

.term-bar-part { min-width: 2px; background: var(--speaker); }
.term-bar-part:last-child { border-radius: 0 4px 4px 0; }

.term-total { font-size: 0.875rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.term-rate { font-weight: 400; }

.term-row--static:hover { background: none; }

.stats-subheading { margin: 1.75rem 0 0; font-size: 1.0625rem; }

.stats-tiles--jar { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0.5rem; }
.stats-tiles--jar dt a { color: var(--ink); font-weight: 600; }

.chart-tooltip {
  position: absolute;
  z-index: 2;
  bottom: calc(100% - 4px);
  left: 0;
  display: none;
  min-width: 9rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 20px rgb(22 24 29 / 0.12);
  font-size: 0.8125rem;
  color: var(--muted);
}

.term-row:hover .chart-tooltip,
.term-row:focus-visible .chart-tooltip { display: block; }

.chart-tooltip-row { display: flex; align-items: center; gap: 0.375rem; line-height: 1.6; }
.chart-tooltip-row strong { min-width: 2.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-tooltip-key { width: 12px; height: 2px; border-radius: 1px; background: var(--speaker); }
.chart-tooltip-foot { display: block; margin-top: 0.25rem; padding-top: 0.25rem; border-top: 1px solid var(--line); }

.stats-table { margin-top: 1rem; }
.stats-table summary { min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); font-weight: 600; cursor: pointer; }
.stats-table table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.stats-table th, .stats-table td { padding: 0.5rem; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.stats-table th:first-child, .stats-table .stats-table-text { text-align: left; }
.stats-table thead th { color: var(--muted); font-weight: 600; }

@media (max-width: 720px) {
  .stats-figures { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .stats-tiles, .stats-tiles--jar { grid-template-columns: minmax(0, 1fr); }
  .term-row { grid-template-columns: 6rem minmax(0, 1fr); padding: 0; }
  .term-name { font-size: 0.875rem; }
  .stats-table { overflow-x: auto; }
}