/* TMP Transcript Archive — 2012 fan-wiki energy, modern craft underneath.
   Cornflower chrome (a nod to the old Libsyn page), VHS masthead, Verdana body.
   OKLCH colors; AA contrast throughout. */

:root {
  /* chrome blues — hue 258 (true cornflower, not periwinkle) */
  --blue:      oklch(0.56 0.13 258);      /* chrome fill — white text is AA on this */
  --blue-hi:   oklch(0.60 0.13 258);      /* bevel gradient, top */
  --blue-lo:   oklch(0.50 0.14 258);      /* bevel gradient, bottom */
  --blue-deep: oklch(0.47 0.16 258);      /* links / primary buttons, AA on white */
  --blue-edge: oklch(0.40 0.15 258);      /* borders on blue chrome */
  --blue-ink:  oklch(0.28 0.08 258);      /* dark navy text */
  --bg:        oklch(1 0 0);
  --surface:   oklch(0.965 0.004 258);
  --surface-2: oklch(0.935 0.006 258);
  --line:      oklch(0.86 0.008 258);
  --ink:       oklch(0.28 0.005 258);
  --ink-mute:  oklch(0.46 0.01 258);
  --visited:   oklch(0.45 0.14 305);      /* era-authentic visited purple */
  /* masthead */
  --mast-bg:   oklch(0.16 0.015 275);
  --mast-red:  oklch(0.55 0.21 25);
  --mast-cyan: oklch(0.78 0.11 210);
  /* speaker colors (AA on white) */
  --spk-will:  oklch(0.48 0.14 140);
  --spk-chris: oklch(0.48 0.13 250);
  --spk-bryan: oklch(0.48 0.12 55);
  --spk-guest: oklch(0.48 0.16 340);
  --spk-anon:  oklch(0.45 0.005 270);
  --mark:      oklch(0.91 0.16 100);      /* highlighter yellow */
  --focus:     oklch(0.47 0.16 258);
  --radius: 3px;
  --z-sticky: 10;
  /* type — one scale, five stops */
  --fs-xs:   0.69rem;
  --fs-s:    0.78rem;
  --fs-base: 0.85rem;
  --fs-l:    1rem;
  --fs-xl:   1.45rem;
  --font-ui: Verdana, Tahoma, "DejaVu Sans", Geneva, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Medium", sans-serif;
  --font-mono: "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.55;
}
::selection { background: var(--blue); color: white; }

a { color: var(--blue-deep); }
a:visited { color: var(--visited); }
a:hover { color: var(--blue-ink); }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* inline SVG icons */
.icon {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
  vertical-align: -0.1em;
}

/* ============ blue top bar ============ */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(var(--blue-hi), var(--blue-lo));
  border-bottom: 1px solid var(--blue-edge);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 1px 4px oklch(0 0 0 / 0.2);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  text-decoration: none;
  line-height: 1.1;
}
.brand:visited { color: inherit; }
.brand-tmp {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: white;
  text-shadow: 1px 1px 0 var(--blue-edge);
}
.brand-rest {
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.92);
}
.tabs { display: flex; gap: 0.15rem; }
.tabs a {
  padding: 0.35rem 0.8rem;
  font-weight: 700;
  font-size: var(--fs-s);
  text-decoration: none;
  color: white;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.2);
}
.tabs a:visited { color: white; }
.tabs a:hover {
  background: oklch(0 0 0 / 0.12);
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.2);
}
.tabs a[aria-current="page"] {
  color: var(--blue-ink);
  background: linear-gradient(oklch(1 0 0), oklch(0.94 0.005 258));
  border-color: var(--blue-edge);
  box-shadow: inset 0 1px 0 white, 0 1px 1px oklch(0 0 0 / 0.15);
  text-shadow: none;
}

/* ============ VHS masthead ============ */
.banner {
  position: relative;
  padding: 1.9rem 1rem 1.6rem;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 150% at 50% -20%, oklch(0.26 0.05 280 / 0.85), transparent 65%),
    var(--mast-bg);
  border-bottom: 3px double var(--blue-edge);
  overflow: hidden;
}
/* scanlines + tape grain */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      transparent 0 2px, oklch(1 0 0 / 0.035) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}
.banner-title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 7.5vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transform: skewX(-4deg);
  color: oklch(0.97 0.01 90);
  /* hard offset drops — tape misregistration, not neon */
  text-shadow:
    0.045em 0.045em 0 var(--mast-red),
    0.09em 0.09em 0 oklch(0.30 0.10 258),
    -0.02em -0.02em 0 var(--mast-cyan);
}
.banner .tagline {
  position: relative;
  margin: 0.7rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-l);
  color: oklch(0.87 0.02 275);
}
.tagline em { font-weight: 700; font-style: italic; }
.tagline a { color: oklch(0.92 0.06 90); }
.tagline a:visited { color: oklch(0.92 0.06 90); }
.tagline a:hover { color: white; }

/* ============ blue strip (counter) ============ */
.bluebar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  background: linear-gradient(var(--blue-hi), var(--blue-lo));
  border-bottom: 1px solid var(--blue-edge);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18);
}
.counter {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-s);
  font-weight: 700;
  color: white;
  background: oklch(0.44 0.14 258);
  border: 1px solid var(--blue-edge);
  border-radius: 999px;
  padding: 0.1rem 0.75rem;
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.25);
}

main {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.1rem 1rem 2.5rem;
}

/* ============ search ============ */
.search-row { display: flex; gap: 0.5rem; }
#q {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-l);
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-top-color: oklch(0.78 0.01 258);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.08);
}
#q::placeholder { color: var(--ink-mute); opacity: 1; }
#q:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.08), 0 0 0 3px oklch(0.56 0.13 258 / 0.25);
}

.btn-primary {
  font: inherit;
  font-weight: 700;
  font-size: var(--fs-base);
  color: white;
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
  background: linear-gradient(oklch(0.55 0.15 258), var(--blue-deep));
  border: 1px solid var(--blue-edge);
  border-radius: var(--radius);
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.28), 0 1px 1px oklch(0 0 0 / 0.15);
  transition: background 120ms ease-out, box-shadow 120ms ease-out;
}
.btn-primary:hover { background: linear-gradient(oklch(0.58 0.15 258), oklch(0.49 0.16 258)); }
.btn-primary:active {
  background: var(--blue-deep);
  box-shadow: inset 0 2px 3px oklch(0 0 0 / 0.3);
  transform: translateY(1px);
}
.btn-primary:disabled { opacity: 0.55; cursor: default; }

.btn-plain {
  font: inherit;
  font-size: var(--fs-s);
  font-weight: 700;
  color: var(--blue-deep);
  background: linear-gradient(white, var(--surface-2));
  border: 1px solid var(--line);
  border-bottom-color: oklch(0.78 0.01 258);
  border-radius: var(--radius);
  padding: 0.45rem 1rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 white, 0 1px 1px oklch(0 0 0 / 0.08);
  transition: background 120ms ease-out, box-shadow 120ms ease-out;
}
.btn-plain:hover { background: linear-gradient(var(--surface), var(--surface-2)); }
.btn-plain:active {
  background: var(--surface-2);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.15);
  transform: translateY(1px);
}

.search-opts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  font-size: var(--fs-s);
  color: var(--ink-mute);
}
#spk {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--fs-s);
  color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23555f77'/%3E%3C/svg%3E")
    no-repeat right 0.5rem center,
    linear-gradient(white, var(--surface));
  border: 1px solid var(--line);
  border-bottom-color: oklch(0.78 0.01 258);
  border-radius: var(--radius);
  padding: 0.25rem 1.5rem 0.25rem 0.5rem;
  box-shadow: inset 0 1px 0 white;
  cursor: pointer;
}

.status {
  margin: 0.9rem 0 0.5rem;
  font-size: var(--fs-s);
  color: var(--ink-mute);
}
.status strong { color: var(--ink); }

/* chip boxes: recently searched + try-one-of-these */
.chip-box {
  margin: 1rem 0;
  padding: 0.65rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 white;
}
.chip-box-title {
  margin: 0 0 0.45rem;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  font-weight: 700;
}
.chip-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip-box li { margin: 0; }
.chip-box a {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  background: linear-gradient(white, var(--surface));
  border: 1px solid var(--line);
  border-bottom-color: oklch(0.8 0.01 258);
  border-radius: 999px;
  font-size: var(--fs-s);
  color: var(--blue-deep);
  text-decoration: none;
  box-shadow: 0 1px 1px oklch(0 0 0 / 0.06);
}
.chip-box a:visited { color: var(--blue-deep); }
.chip-box a:hover { border-color: var(--blue-deep); color: var(--blue-ink); }

/* results */
.results { list-style: none; margin: 0; padding: 0; }
.result {
  border: 1px solid var(--line);
  border-bottom-color: oklch(0.8 0.01 258);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.06);
  margin-bottom: 0.6rem;
}
.result-quote {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  line-height: 1.5;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0.6rem 0.8rem 0.3rem;
  cursor: pointer;
}
.result-quote:hover .quote-text { color: var(--blue-deep); }
.result mark {
  background: var(--mark);
  color: var(--ink);
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}
.quote-speaker { font-weight: 700; }
.result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  padding: 0 0.8rem 0.55rem;
  font-size: var(--fs-s);
  color: var(--ink-mute);
}
.result-meta .ep-link { font-weight: 700; text-decoration: none; }
.result-meta .ep-link:hover { text-decoration: underline; }
.timestamp { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.play-link { font-weight: 700; white-space: nowrap; }
.moment-link { white-space: nowrap; }

/* expanded context inside a result */
.result-context {
  border-top: 1px solid var(--line);
  background: var(--surface);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.55rem 0.8rem;
  font-size: var(--fs-s);
}
.result-context .ctx-line { margin: 0.18rem 0; color: var(--ink-mute); display: flex; align-items: baseline; gap: 0.3rem; }
.result-context .ctx-line.hit { color: var(--ink); }
.result-context .ctx-line .quote-speaker { margin-right: 0.35rem; }
.result-context .ctx-line.now-playing { background: oklch(0.94 0.06 100); border-radius: 2px; }
.ctx-play {
  border: 0; background: none; color: var(--blue-deep); cursor: pointer;
  padding: 0; flex: none; opacity: 0.55; line-height: 1;
}
.ctx-play:hover { opacity: 1; }
.spans-note { color: var(--ink-mute); font-size: var(--fs-xs); font-weight: 400; }

.copy-quote-btn, .quote-img-btn { font-size: var(--fs-xs); }
.copy-quote-btn.copied, .quote-img-btn.copied { color: var(--blue-deep); font-weight: 700; }

.did-you-mean { margin: 0.6rem 0 1rem; }
.did-you-mean-label { font-size: var(--fs-s); color: var(--ink-mute); font-weight: 700; margin: 0 0 0.4rem; }

.loading-more { font-weight: 400; color: var(--ink-mute); }

.counter-link { color: inherit; text-decoration: underline; text-decoration-style: dotted; }
.counter-link:hover { color: inherit; opacity: 0.85; }

.ep-pending-banner {
  font-size: var(--fs-s); color: var(--ink-mute); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; margin: 0 0 0.75rem;
}
.ep-pending-banner a { font-weight: 700; }

.resume-btn { display: inline-block; margin: 0 0 0.85rem; }

/* speaker colors */
.spk-will  { color: var(--spk-will); }
.spk-chris { color: var(--spk-chris); }
.spk-bryan { color: var(--spk-bryan); }
.spk-guest { color: var(--spk-guest); }
.spk-anon  { color: var(--spk-anon); }

/* empty / teaching states */
.empty {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 white;
  padding: 1.3rem 1rem;
  text-align: center;
  color: var(--ink-mute);
}
.empty .big {
  display: block;
  font-weight: 700;
  font-size: var(--fs-l);
  color: var(--ink);
  margin-bottom: 0.35rem;
  text-wrap: balance;
}

/* ============ episodes list ============ */
.ep-filter-row { margin-bottom: 0.9rem; }
#ep-filter {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-top-color: oklch(0.78 0.01 258);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.08);
}
#ep-filter:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.08), 0 0 0 3px oklch(0.56 0.13 258 / 0.25);
}

.ep-list { list-style: none; margin: 0; padding: 0; }
.ep-row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.38rem 0.5rem;
  border-bottom: 1px solid var(--surface-2);
}
.ep-row:nth-child(even) { background: oklch(0.985 0.002 258); }
.ep-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-s);
  color: var(--ink-mute);
  min-width: 2.6rem;
  text-align: right;
}
.ep-row .t { flex: 1; min-width: 8rem; }
.ep-row .t a { text-decoration: none; font-weight: 700; }
.ep-row .t a:hover { text-decoration: underline; }
.ep-row .when {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.ep-row .pending {
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}
.ep-row.is-pending .t { color: var(--ink-mute); font-weight: 400; }

/* ============ episode page ============ */
.view-title, .ep-head h1, .ep-head h2 {
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.2;
  margin: 0 0 0.3rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ep-head .ep-sub {
  font-size: var(--fs-s);
  color: var(--ink-mute);
  margin: 0 0 0.8rem;
}
.listen-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 white;
  padding: 0.55rem 0.9rem;
  margin-bottom: 1rem;
  font-size: var(--fs-s);
}
.listen-box .btn-primary { text-decoration: none; display: inline-block; color: white; }
.speaker-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: var(--fs-s);
  margin-bottom: 0.9rem;
}
.transcript { border-top: 2px solid var(--blue); padding-top: 0.7rem; }
.line { display: flex; gap: 0.7rem; padding: 0.16rem 0; }
.line .ts {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  text-decoration: none;
  min-width: 3.2rem;
  text-align: right;
  padding-top: 0.2rem;
}
.line .ts:visited { color: var(--ink-mute); }
.line .ts:hover { color: var(--blue-deep); text-decoration: underline; }
.line p { margin: 0; flex: 1; }
.line .quote-speaker { margin-right: 0.4rem; }
.back-link { display: inline-block; margin-bottom: 0.9rem; font-size: var(--fs-s); }

/* ============ cast & stats ============ */
.cast-list { list-style: none; margin: 0.7rem 0; padding: 0; }
.cast-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--surface-2);
}
.cast-name {
  flex: 0 0 10rem;
  min-width: 0;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cast-name:hover { text-decoration: underline; }
.cast-bar {
  flex: 1;
  height: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.08);
}
.cast-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(var(--blue-hi), var(--blue-lo));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3);
}
.cast-meta {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
}
.cast-co { font-size: var(--fs-base); }
.stats-h { font-size: var(--fs-l); margin: 1.5rem 0 0.4rem; }
.stats-h:first-child { margin-top: 0; }
#phrase-btn small { font-weight: 400; color: var(--ink-mute); }
.btn-random { font-weight: 400; margin-left: auto; }

/* episode description + shared-moment highlight + karaoke */
.ep-desc {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: var(--ink-mute);
  max-width: 65ch;
  margin: 0.5rem 0 0.9rem;
}
.line.line-target { background: oklch(0.91 0.16 100 / 0.5); border-radius: var(--radius); }
.line.now { background: oklch(0.56 0.13 258 / 0.12); border-radius: var(--radius); }
.line.now .quote-speaker { text-decoration: underline; }
.moment-link { text-decoration: none; }
.moment-link:hover { text-decoration: underline; }
.speaker-legend a { text-decoration: none; font-weight: 700; }
.speaker-legend a:hover { text-decoration: underline; }
.follow-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  white-space: nowrap;
  flex: none;
}

/* ============ this day ============ */
#day-body .ep-list { margin-top: 0.5rem; }

/* ============ footer ============ */
.footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: inset 0 1px 0 white;
  margin-top: 1.8rem;
  padding: 1.1rem 1rem 1.8rem;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.footer p { max-width: 46rem; margin-inline: auto; }
.footer .takedown { white-space: nowrap; }

/* ============ mini player ============ */
.player[hidden] { display: none; }
.player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: calc(var(--z-sticky) + 1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  background: white;
  border-top: 3px solid var(--blue);
  box-shadow: 0 -2px 12px oklch(0 0 0 / 0.15);
}
.player-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 0 1 14rem;
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.player-info a {
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-info a:hover { text-decoration: underline; }
.player-info .timestamp { color: var(--ink-mute); }
.player-controls { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; }
#player-audio { flex: 1; min-width: 0; height: 2.2rem; }
.player-skip {
  font-family: var(--font-mono); font-size: var(--fs-xs); padding: 0.3rem 0.4rem; flex: none;
}
.player-speed {
  font-size: var(--fs-xs); border: 1px solid var(--line); border-radius: var(--radius);
  background: white; color: var(--ink); padding: 0.25rem; flex: none;
}
#player-clip-btn { font-size: var(--fs-xs); flex: none; white-space: nowrap; }
#player-clip-btn.copied { color: var(--blue-deep); font-weight: 700; }
#player-close { padding: 0.35rem 0.6rem; flex: none; }
body.has-player main { padding-bottom: 5.5rem; }
body.has-player .footer { padding-bottom: 5rem; }
@media (max-width: 560px) {
  .player { flex-wrap: wrap; gap: 0.4rem 0.75rem; }
  .player-info { flex: 1 1 auto; order: 1; }
  .follow-toggle { order: 2; }
  #player-close { order: 3; }
  .player-controls { order: 4; flex: 1 1 100%; flex-wrap: wrap; }
  #player-audio { flex: 1 1 100%; }
  body.has-player main { padding-bottom: 9rem; }
}

/* skeletons */
.skeleton {
  height: 3.4rem;
  border: 1px solid var(--surface-2);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--surface-2); }
  .btn-primary, .btn-plain { transition: none; }
}

@media (max-width: 560px) {
  .topbar { justify-content: center; }
  .tabs a { padding: 0.35rem 0.55rem; }
  .banner { padding: 1.3rem 0.75rem 1.1rem; }
  .banner .tagline { font-size: var(--fs-base); }
  .search-row { flex-wrap: wrap; }
  #q { flex-basis: 100%; }
  .btn-primary { flex: 1; }
  .ep-row .when { display: none; }
  .ep-row { flex-wrap: wrap; }
  .ep-row .pending { margin-left: auto; }
  .line { gap: 0.5rem; }
  .cast-name { flex-basis: 7.5rem; font-size: var(--fs-s); }
  .search-opts { flex-wrap: wrap; }
  .btn-random { margin-left: 0; flex: 1 1 100%; }
}