/* ============================================================
   SCHULCAST · mixtape.css  (v2 — TikTok/Instagram-grade redesign)
   ============================================================
   Design philosophy
   -----------------
   The atomic unit is the CHAPTER, not the episode.
   The page reads as a magazine:
     1. Tight editorial intro
     2. Three "Starter Mixes" — pre-curated tapes you can grab
     3. Filter pills + chapter card grid
   The user's mixtape lives in a FLOATING DOCK at the bottom that
   expands into a full-bleed sheet. No more sidebars, no more
   accordions. Every interaction is one tap.

   Brand: this surface is bistre-accented (Spiele family).
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   Page-header — compact, dramatic intro
   ─────────────────────────────────────────────────────────── */
.mt-hero {
  padding: calc(var(--header-height) + 2.5rem) 0 2rem;
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}
.mt-hero h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin: 0.5rem 0;
  text-wrap: balance;
}
.mt-hero h1 em {
  color: var(--fynbos-pomegranate);
  font-style: italic;
}
.mt-hero p {
  max-width: 50ch;
  margin: 0 auto;
  color: var(--color-text-secondary);
  font-size: 1.0625rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ───────────────────────────────────────────────────────────
   Starter Mixes — three big cards in a horizontal scroller
   ─────────────────────────────────────────────────────────── */
.mt-starters {
  padding: 2.5rem 0 1rem;
}
.mt-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.5rem;
}
.mt-section__head h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: 0;
  line-height: 1.1;
}
.mt-section__head .mt-section__hint {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  font-style: normal;
  margin: 0;
  max-width: 40ch;
}

.mt-starters__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.mt-starters__row--editor {
  /* Four editor picks — auto-fit so the row reads as a magazine
     spread on wide screens (4-up) and a compact stack on tablet
     (2-up), then single column on mobile. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mt-starters--editor {
  padding-top: 1rem;
}
.mt-starters--editor .mt-section__head .label {
  display: block;
  margin-bottom: 4px;
}
@media (max-width: 880px) {
  .mt-starters__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.mt-starter {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 18px;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: none;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 200ms, box-shadow 200ms;
  overflow: hidden;
}
.mt-starter:hover,
.mt-starter:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-text-secondary);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  outline: none;
}
.mt-starter::before {
  /* Wedge stripe in the top-right corner — accent per starter. */
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 0.18;
  background: var(--mt-accent, var(--fynbos-pomegranate));
}
.mt-starter[data-accent="pomegranate"] { --mt-accent: var(--fynbos-pomegranate); }
.mt-starter[data-accent="apricot"]     { --mt-accent: var(--fynbos-apricot); }
.mt-starter[data-accent="bistre"]      { --mt-accent: var(--fynbos-bistre); }

.mt-starter__eyebrow {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mt-accent);
}
.mt-starter__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 4px 0 6px;
  text-wrap: balance;
}
.mt-starter__tagline {
  color: var(--color-text-secondary);
  font-size: 0.93rem;
  line-height: 1.45;
  margin: 0 0 12px;
}
.mt-starter__meta {
  display: flex;
  gap: 14px;
  margin-top: auto;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.mt-starter__meta strong {
  color: var(--mt-accent);
  font-weight: 800;
}
.mt-starter__cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  border-bottom: 1.5px solid var(--mt-accent);
  align-self: flex-start;
  padding-bottom: 2px;
  transition: border-color 200ms, color 200ms;
}
.mt-starter:hover .mt-starter__cta {
  color: var(--mt-accent);
}

/* ───────────────────────────────────────────────────────────
   Filter bar — search + pills above the card grid
   ─────────────────────────────────────────────────────────── */
.mt-browse {
  padding: 2.5rem 0 8rem; /* extra bottom padding so dock never overlaps last cards */
}
.mt-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
}
.mt-search {
  position: relative;
  flex: 1 1 280px;
  min-width: 220px;
}
.mt-search input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  -webkit-appearance: none;
  appearance: none;
}
.mt-search input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(118, 123, 57, 0.18);
}
.mt-search::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat center / contain;
  pointer-events: none;
}

.mt-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 560px) {
  /* Below ~560px the 8 pills wrap to 4–5 rows and push the card
     grid 200px down. Switch to a horizontal-scroll strip with
     scroll-snap so the user swipes through filters in one row. */
  .mt-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Bleed past the container edge so the user sees more pills
       are scrollable. */
    margin: 0 calc(-1 * var(--space-md, 1rem));
    padding: 0 var(--space-md, 1rem) 4px;
    scrollbar-width: none;
  }
  .mt-pills::-webkit-scrollbar { display: none; }
  .mt-pill { scroll-snap-align: start; flex-shrink: 0; }
}
.mt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, color 160ms, transform 200ms;
  white-space: nowrap;
  /* WCAG 2.5.5 touch target: ≥44×44 — padding lifts us above. */
  min-height: 44px;
}
.mt-pill:hover { border-color: var(--color-accent); }
.mt-pill[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg, #1B1D14);
}
.mt-pill__count {
  font-size: 0.7rem;
  opacity: 0.7;
  font-feature-settings: "tnum";
}

/* ───────────────────────────────────────────────────────────
   The chapter card grid — the heart of the experience
   ─────────────────────────────────────────────────────────── */
.mt-grid {
  display: grid;
  /* Kevin Powell's "min() in minmax" trick — caps the grid track
     minimum at 100% of the container width, so a single card can
     never demand a track wider than the container. With plain
     minmax(260px, 1fr), an item with intrinsic min-content > 260px
     can still bust out on Webkit. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 18px;
  /* Defensive: clip anything that escapes a card. Last line of
     defense if min-width:0 + overflow chain has a hole. */
  overflow: hidden;
}
.mt-grid > * {
  /* Belt to the suspenders of min-width:0 on each card — caps every
     direct child at the column-track width, period. */
  max-width: 100%;
  min-width: 0;
}
@media (min-width: 1200px) {
  .mt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mt-grid { grid-template-columns: 1fr; gap: 14px; }
}

.mt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 200ms, box-shadow 200ms;
  /* Allow the grid item to shrink below its intrinsic content
     width — without this, long German chapter titles push the
     card wider than its grid track and the H3 spills out both
     sides. */
  min-width: 0;
}
.mt-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-text-secondary);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}
.mt-card.is-added {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-bg-card));
}
.mt-card.is-bumped {
  animation: mt-bump 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mt-bump {
  0%   { transform: translateY(-2px) scale(1); }
  40%  { transform: translateY(-6px) scale(1.025); }
  100% { transform: translateY(-2px) scale(1); }
}

.mt-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--color-bg);
  overflow: hidden;
  /* Defensive minimum so the box always exists, even if a parent
     somehow swallows the aspect-ratio computed height. */
  min-height: 80px;
}
.mt-card__cover img {
  /* Absolute-position the image so its INTRINSIC width/height
     attributes (600×375 from the build script) can never push the
     image out of the cover box. !important fights against the
     global `img { max-width: 100%; height: auto; }` reset in
     style.css line 161 — that reset's `height: auto` was
     winning on some Chromium builds despite specificity, leaving
     the image at 600px wide and overflowing the cover. */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 600ms ease;
}
.mt-card:hover .mt-card__cover img {
  transform: scale(1.04);
}

/* Typographic placeholder cover — used on every chapter card.
   Large italic episode number on a Fynbos tint, with subtle
   gradient depth. The og:image route was retired (Den's
   "episode-titles overflow" bug) — the card body already shows
   the title in text, the cover doesn't need to repeat it. */
.mt-card__cover--placeholder {
  background: linear-gradient(135deg, var(--mt-tint, var(--fynbos-pomegranate)) 0%, color-mix(in srgb, var(--mt-tint, var(--fynbos-pomegranate)) 70%, #000) 100%);
  /* Background fallback for browsers without color-mix. */
  background-color: var(--mt-tint, var(--fynbos-pomegranate));
}
.mt-card__cover-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(244,239,226,0.92);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Time badge in cover top-left */
.mt-card__time {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: rgba(0,0,0,0.72);
  color: #F4EFE2;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  border-radius: 999px;
  font-feature-settings: "tnum";
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Preview button — bottom-left of cover, plays 5s */
.mt-card__preview {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 10px 12px;
  background: rgba(0,0,0,0.72);
  color: #F4EFE2;
  border: none;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 160ms, transform 160ms;
  min-height: 36px;
}
.mt-card__preview:hover { background: rgba(0,0,0,0.92); transform: scale(1.05); }
.mt-card__preview svg { display: block; }
.mt-card__preview.is-playing {
  background: var(--fynbos-pomegranate);
}
.mt-card__preview.is-playing svg { animation: mt-pulse 0.9s ease-in-out infinite; }
@keyframes mt-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Body — text content under the cover */
.mt-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 14px;
  flex: 1;
  /* Critical: lets text children shrink below their intrinsic
     width and forces overflow handling to kick in. Without it
     long compound nouns ("Selbstgesteuertes Lernen") leak out
     of the card on both sides. */
  min-width: 0;
}
.mt-card__ep {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.mt-card__ep-dur {
  color: var(--color-text-muted);
  font-weight: 700;
  font-feature-settings: "tnum";
}
.mt-card__label {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;          /* lowered from 1.15 so longer titles fit cleanly */
  line-height: 1.25;
  color: var(--color-text-primary);
  margin: 4px 0;
  /* German compound nouns ("Selbstgesteuertes", "Veröffentlichung")
     can be wider than narrow card columns. Soft-hyphenate where
     possible, break-word as the last resort, so the H3 never
     spills past the card edge. text-wrap: balance was prone to
     leaving long single words unbroken — removed. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Constrain the box explicitly. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Clamp to two lines so cards stay aligned. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mt-card__src {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  /* Clamp to one line. The "min-width:0 + max-width:100% +
     display:block + width:100%" set is what actually makes
     ellipsis bite inside a flex column on a grid item — without
     all four, long episode titles overflow the card edge on Webkit. */
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* Add button — bottom of card, big tap target */
.mt-card__add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  border-top: 1.5px solid var(--color-border);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 160ms, color 160ms;
  width: 100%;
  text-align: left;
}
.mt-card__add:hover {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-accent);
}
.mt-card__add-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg, #1B1D14);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 200ms;
}
.mt-card.is-added .mt-card__add-plus {
  background: var(--color-text-primary);
  color: var(--color-accent);
}
.mt-card.is-added .mt-card__add {
  color: var(--color-accent);
}
.mt-card__add:hover .mt-card__add-plus {
  transform: scale(1.08);
}
.mt-card.is-added .mt-card__add:hover .mt-card__add-plus {
  transform: scale(1.08);
}

/* ───────────────────────────────────────────────────────────
   Floating dock — always visible when the mixtape has items
   ─────────────────────────────────────────────────────────── */
/* The dock is now a transparent full-viewport overlay (pointer-
   events: none) that contains both the centered pill and the
   right-side sheet. CRITICAL: do NOT put `transform` on this
   element — `transform` makes it the containing block for any
   fixed-positioned descendant, which causes the sheet (with its
   own position:fixed) to size against the dock instead of the
   viewport. That's the "sheet appears centered overlapping the
   pill" bug Den hit. The pill carries its own transform; the
   sheet positions itself absolutely against this wrapper. */
.mt-dock {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
}
.mt-dock[hidden] { display: none; }
.mt-dock[hidden] { display: none; }

/* Collapsed pill — wrapper holds two distinct buttons:
   the toggle (opens the sheet) on the left, and the Play
   pill (starts playback) on the right. Each is hit-testable
   independently so the user can play without opening the sheet.

   Positioned absolutely inside the .mt-dock viewport-overlay so
   it can be horizontally centered with transform without making
   the dock a containing block for the fixed-positioned sheet. */
.mt-dock__pill {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
  transform: translateX(-50%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 6px;
  background: #1B1D14;
  color: #F4EFE2;
  border: 1.5px solid rgba(244,239,226,0.18);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  box-shadow: 0 12px 32px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.16);
  transition: bottom 260ms cubic-bezier(.2, .7, .3, 1), transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms;
  animation: mt-dock-in 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
body.has-persistent-player .mt-dock__pill {
  /* Persistent player is ~80–100px tall; clear it. */
  bottom: calc(env(safe-area-inset-bottom, 0) + 100px);
}
@keyframes mt-dock-in {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.mt-dock__pill:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.2);
}

/* Toggle = the left part — info + open the sheet on click. */
.mt-dock__pill-toggle {
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  transition: background 160ms;
}
.mt-dock__pill-toggle:hover {
  background: rgba(244,239,226,0.06);
}
.mt-dock__pill-toggle:focus-visible {
  outline: 2px solid var(--fynbos-apricot);
  outline-offset: 2px;
}

.mt-dock__bars {
  display: inline-flex;
  align-items: end;
  gap: 2px;
  height: 16px;
}
.mt-dock__bars i {
  display: inline-block;
  width: 3px;
  background: var(--fynbos-apricot);
  border-radius: 1px;
  height: 30%;
}
.mt-dock__bars i:nth-child(1) { height: 60%; }
.mt-dock__bars i:nth-child(2) { height: 100%; }
.mt-dock__bars i:nth-child(3) { height: 40%; }
.mt-dock__bars i:nth-child(4) { height: 80%; }
body.is-playing .mt-dock__bars i {
  animation: mt-bars 0.9s ease-in-out infinite;
}
body.is-playing .mt-dock__bars i:nth-child(2) { animation-delay: 0.15s; }
body.is-playing .mt-dock__bars i:nth-child(3) { animation-delay: 0.30s; }
body.is-playing .mt-dock__bars i:nth-child(4) { animation-delay: 0.45s; }
@keyframes mt-bars {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

.mt-dock__count {
  font-feature-settings: "tnum";
}
.mt-dock__count strong {
  color: var(--fynbos-apricot);
  font-weight: 800;
  margin-right: 4px;
}
.mt-dock__sep { opacity: 0.4; }
.mt-dock__time {
  color: rgba(244,239,226,0.7);
  font-feature-settings: "tnum";
}
.mt-dock__play-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 8px 14px;
  background: var(--fynbos-apricot);
  color: #1B1D14;
  border: none;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms, transform 160ms;
}
.mt-dock__play-pill:hover {
  background: #f0b13a;
  transform: scale(1.04);
}
.mt-dock__play-pill:focus-visible {
  outline: 2px solid #1B1D14;
  outline-offset: 1px;
}
.mt-dock__play-pill svg { display: block; }
/* Two-icon swap (play / pause) — driven entirely by CSS, no
   innerHTML manipulation. Some Chromium builds drop the SVG
   layout when innerHTML is rewritten on a fixed-positioned
   ancestor, which is exactly what we did before — and that's
   the "play button disappears" bug Den reported. */
.mt-dock__play-pill .mt-icon-pause { display: none; }
.mt-dock__play-pill.is-playing .mt-icon-play  { display: none; }
.mt-dock__play-pill.is-playing .mt-icon-pause { display: block; }
.mt-dock__play-pill.is-playing { background: var(--fynbos-pomegranate); color: #F4EFE2; }

/* Expanded sheet — slides in from the right on desktop, up from
   the bottom on mobile. On desktop the sheet ALWAYS leaves a
   96px gutter at the bottom (whether or not the persistent player
   is currently mounted) so the player's transport controls are
   never blocked, and there's no visual collision when the player
   slides up while the sheet is mid-transition. */
.mt-dock__sheet {
  /* Absolute inside the .mt-dock viewport-wrapper. The wrapper has
     no transform, so absolute here resolves to viewport coordinates
     correctly. Top sits below the bento masthead (168px nav +
     status-bar) plus a small editorial gutter, so the sheet's
     header doesn't disappear behind the fixed header. */
  position: absolute;
  top: calc(var(--header-height, 168px) + 16px);
  right: 0;
  bottom: 96px;
  width: min(440px, 100vw);
  background: #1B1D14;
  color: #F4EFE2;
  border: 1.5px solid rgba(244,239,226,0.12);
  border-radius: 14px 0 0 14px;
  box-shadow: -24px 0 60px rgba(0,0,0,0.4);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.4, 0.0, 0.2, 1);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}
.mt-dock.is-open .mt-dock__sheet {
  transform: translateX(0);
}
@media (max-width: 760px) {
  .mt-dock__sheet {
    /* Mobile: sheet takes the bottom band. The persistent player
       coexists via the dock-pill's bottom offset, not via the
       sheet's bottom gutter. */
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 86vh;
    border: none;
    border-top: 1.5px solid rgba(244,239,226,0.12);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .mt-dock.is-open .mt-dock__sheet {
    transform: translateY(0);
  }
}

/* Backdrop overlay when sheet is open. Absolute inside the
   .mt-dock viewport-wrapper. */
.mt-dock__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.mt-dock.is-open .mt-dock__backdrop {
  opacity: 1;
  pointer-events: auto;
}

.mt-dock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 22px 16px;
  border-bottom: 1.5px solid rgba(244,239,226,0.10);
  flex-shrink: 0;
}
.mt-dock__head-info span {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fynbos-apricot);
}
.mt-dock__head-info h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 4px 0 6px;
  color: #F4EFE2;
}
.mt-dock__head-info p {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,239,226,0.65);
  margin: 0;
}
.mt-dock__head-info p strong {
  color: var(--fynbos-apricot);
  font-weight: 800;
}
.mt-dock__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(244,239,226,0.20);
  color: #F4EFE2;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  line-height: 1;
}
.mt-dock__close:hover {
  background: rgba(244,239,226,0.10);
}

/* Sheet items list */
.mt-dock__list {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(244,239,226,0.18) transparent;
}
.mt-dock__list::-webkit-scrollbar { width: 6px; }
.mt-dock__list::-webkit-scrollbar-thumb { background: rgba(244,239,226,0.18); border-radius: 3px; }

.mt-dock__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(244,239,226,0.04);
  border: 1px solid transparent;
  margin-bottom: 8px;
  cursor: grab;
  transition: background 160ms, border-color 160ms, transform 200ms;
}
.mt-dock__item:hover {
  background: rgba(244,239,226,0.08);
}
.mt-dock__item.is-dragging { opacity: 0.4; cursor: grabbing; }
.mt-dock__item.is-drag-over {
  border-color: var(--fynbos-apricot);
  background: rgba(234,166,36,0.10);
}
.mt-dock__item.is-playing {
  border-color: var(--fynbos-apricot);
  background: rgba(234,166,36,0.14);
  box-shadow: inset 3px 0 0 var(--fynbos-apricot);
}
.mt-dock__item-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(244,239,226,0.5);
  font-feature-settings: "tnum";
  width: 22px;
  text-align: right;
}
.mt-dock__item.is-playing .mt-dock__item-num {
  color: var(--fynbos-apricot);
}
.mt-dock__item-body { min-width: 0; }
.mt-dock__item-label {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  color: #F4EFE2;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-dock__item-meta {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,239,226,0.5);
  display: flex;
  gap: 8px;
}
.mt-dock__item-actions {
  display: flex;
  gap: 4px;
}
.mt-dock__item-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(244,239,226,0.18);
  color: rgba(244,239,226,0.7);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mt-dock__item-btn:hover:not([disabled]) {
  border-color: var(--fynbos-apricot);
  color: var(--fynbos-apricot);
}
.mt-dock__item-btn[disabled] { opacity: 0.3; cursor: not-allowed; }
.mt-dock__item-btn--del:hover {
  border-color: var(--fynbos-pomegranate);
  color: var(--fynbos-pomegranate);
}

.mt-dock__empty {
  text-align: center;
  padding: 40px 24px;
  color: rgba(244,239,226,0.55);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Sheet actions row at the bottom */
.mt-dock__actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 22px calc(env(safe-area-inset-bottom, 0) + 22px);
  border-top: 1.5px solid rgba(244,239,226,0.10);
  background: rgba(0,0,0,0.3);
}
.mt-dock__actions button {
  flex: 1;
  min-width: 120px;
}
.mt-dock__play-btn {
  background: var(--fynbos-apricot) !important;
  color: #1B1D14 !important;
  border-color: var(--fynbos-apricot) !important;
}
.mt-dock__play-btn:hover {
  background: color-mix(in srgb, var(--fynbos-apricot) 80%, white) !important;
}

/* Toast (share copied, etc.) */
.mt-toast {
  position: fixed;
  left: 50%;
  /* 90px above bottom on phones, capped at 50% of viewport so it
     doesn't fall off-screen on iPhone landscape (320×320). */
  bottom: max(calc(env(safe-area-inset-bottom, 0) + 90px), 50vh - 28px);
  bottom: calc(env(safe-area-inset-bottom, 0) + 90px); /* fallback */
  transform: translateX(-50%) translateY(20px);
  background: #1B1D14;
  color: var(--fynbos-apricot);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  z-index: 1010;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}
@media (max-height: 480px) {
  /* Landscape phones: keep toast safely above the dock. */
  .mt-toast {
    bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
  }
}
.mt-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Empty grid state */
.mt-grid__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 24px;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1rem;
}
.mt-grid__empty strong {
  display: block;
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 6px;
  color: var(--color-text-primary);
}

/* A11y */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ───────────────────────────────────────────────────────────
   Focus rings — every interactive element gets a visible
   keyboard focus state. Audited per WCAG 2.4.7.
   ─────────────────────────────────────────────────────────── */
.mt-card:focus-within {
  border-color: var(--color-accent);
}
.mt-card__add:focus-visible,
.mt-card__preview:focus-visible,
.mt-pill:focus-visible,
.mt-dock__item-btn:focus-visible,
.mt-dock__close:focus-visible,
.mt-starter:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.mt-dock__close:focus-visible,
.mt-dock__item-btn:focus-visible {
  outline-color: var(--fynbos-apricot);
}

/* Defensive image fallback — when an episode has no cover
   (cover field null in chapters.json), the JS uses a typographic
   placeholder, but if any path slips through with an empty
   src we'd see the browser's broken-image glyph. Hide it. */
.mt-card__cover img:not([src]),
.mt-card__cover img[src=""] { display: none; }

/* ───────────────────────────────────────────────────────────
   Reduced motion — kill the bounces and pulses
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mt-card,
  .mt-card__cover img,
  .mt-card__add-plus,
  .mt-starter,
  .mt-dock__pill,
  .mt-dock__sheet,
  .mt-dock__backdrop,
  .mt-dock__item,
  .mt-card.is-bumped,
  .mt-card__preview.is-playing,
  .mt-toast {
    transition: none !important;
    animation: none !important;
  }
  body.is-playing .mt-dock__bars i { animation: none !important; }
  .mt-card__preview.is-playing svg { animation: none !important; }
}