/* Media player (audio + video) — per book. Scoped with an `mp-` prefix so it
 * never collides with Bootstrap or main.css. Colours reuse the site tokens
 * (--brand navy, --surface, --line, --ink, --muted) with safe fallbacks. */
.media-player{
  --mp-accent: var(--brand, #2a3e77);
  --mp-accent-ink: #fff;
  --mp-soft: var(--brand-tint, #eef1f8);
  --mp-surface: var(--surface, #fbfcfe);
  --mp-ink: var(--ink, #253246);
  --mp-muted: var(--muted, #6d7a9e);
  --mp-line: var(--line, #e4e8f1);
  --mp-radius: 16px;
  --mp-shadow: 0 8px 30px rgba(42,62,119,.10);
  --mp-mono: ui-monospace,SFMono-Regular,Menlo,monospace;
  color: var(--mp-ink);
}
.media-player *{box-sizing:border-box}

/* ---- Unified media stage (always visible) ---- */
.mp-stage{background:var(--mp-surface);border:1px solid var(--mp-line);border-radius:var(--mp-radius);
  box-shadow:var(--mp-shadow);overflow:hidden;margin-bottom:16px}
.mp-media{position:relative;width:100%;aspect-ratio:16/9;background:#141b2e;display:grid;place-items:center}
.mp-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mp-cover{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;background:radial-gradient(120% 120% at 50% 0%, #324271 0%, #141b2e 70%);color:#eef1f8;cursor:pointer;padding:20px;text-align:center}
.mp-bigplay{width:84px;height:84px;border-radius:50%;background:var(--mp-accent);color:#fff;border:0;
  display:grid;place-items:center;font-size:2rem;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .1s}
.mp-bigplay:active{transform:scale(.94)}
.mp-eq{display:flex;gap:4px;height:22px;align-items:flex-end;opacity:0;transition:opacity .2s}
.mp-eq.on{opacity:.85}
.mp-eq span{width:4px;background:#8ea2d8;border-radius:2px;animation:mp-eq 900ms ease-in-out infinite}
.mp-eq span:nth-child(2){animation-delay:.15s}.mp-eq span:nth-child(3){animation-delay:.3s}
.mp-eq span:nth-child(4){animation-delay:.45s}.mp-eq span:nth-child(5){animation-delay:.6s}
@keyframes mp-eq{0%,100%{height:6px}50%{height:22px}}
.mp-kicker{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.mp-cover-title{font-size:1.1rem;font-weight:600;max-width:40ch}
.mp-empty{color:#b9c3dd;font-size:.95rem;padding:20px;text-align:center}

.mp-info{padding:12px 16px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--mp-line)}
.mp-info-text{flex:1;min-width:0}
.mp-info-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-info-sub{font-size:.8rem;color:var(--mp-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-ext{font-size:.82rem;color:var(--mp-accent);text-decoration:none;white-space:nowrap}
.mp-ext:hover{text-decoration:underline}

.mp-transport{display:flex;align-items:center;gap:10px;padding:0 16px 14px}
.mp-btn{border:1px solid var(--mp-line);background:var(--mp-surface);color:var(--mp-ink);width:40px;height:40px;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1rem;padding:0;line-height:1}
.mp-btn:hover{background:var(--mp-soft)}
.mp-btn.mp-play{width:46px;height:46px;background:var(--mp-accent);color:var(--mp-accent-ink);border-color:var(--mp-accent);font-size:1.1rem}
.mp-btn:disabled{opacity:.4;cursor:default}
.mp-seekwrap{display:flex;align-items:center;gap:8px;flex:1;min-width:100px}
.mp-time{font-family:var(--mp-mono);font-size:.72rem;color:var(--mp-muted);white-space:nowrap}
.mp-transport input[type=range]{width:100%;accent-color:var(--mp-accent)}
.mp-rate{border:1px solid var(--mp-line);background:var(--mp-surface);color:var(--mp-muted);border-radius:8px;padding:6px;font-size:.78rem}
.mp-dl{border:1px solid var(--mp-line);background:var(--mp-surface);color:var(--mp-muted);width:40px;height:40px;
  border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:1rem}
.mp-dl:hover{background:var(--mp-soft);color:var(--mp-ink)}

/* ---- Toolbar + list ---- */
.mp-toolbar{display:flex;gap:10px;align-items:center;margin:0 0 12px}
.mp-search{flex:1;display:flex;align-items:center;gap:8px;background:var(--mp-surface);
  border:1px solid var(--mp-line);border-radius:999px;padding:8px 14px}
.mp-search input{border:0;background:transparent;color:var(--mp-ink);width:100%;font-size:.95rem;outline:none}
.mp-count{color:var(--mp-muted);font-size:.85rem;white-space:nowrap}
.mp-group{margin-bottom:10px}
.mp-group>summary{cursor:pointer;list-style:none;padding:10px 14px;border-radius:12px;background:var(--mp-surface);
  border:1px solid var(--mp-line);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.mp-group>summary::-webkit-details-marker{display:none}
.mp-group>summary .mp-gcount{color:var(--mp-muted);font-weight:400;font-size:.82rem}
.mp-group[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.mp-tracklist{border:1px solid var(--mp-line);border-top:0;border-radius:0 0 12px 12px;overflow:hidden}
.mp-track{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;background:var(--mp-surface);border-top:1px solid var(--mp-line)}
.mp-track:first-child{border-top:0}
.mp-track:hover,.mp-track.active{background:var(--mp-soft)}
.mp-track .mp-ic{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
  background:var(--mp-soft);border:1px solid var(--mp-line);color:var(--mp-accent);font-size:.7rem}
.mp-track.active .mp-ic{background:var(--mp-accent);color:var(--mp-accent-ink);border-color:var(--mp-accent)}
.mp-track .mp-label{flex:1;min-width:0}
.mp-track .mp-ttitle{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-track .mp-tsub{font-size:.76rem;color:var(--mp-muted)}
.mp-track .mp-dlrow{opacity:.55;text-decoration:none;color:var(--mp-muted);font-size:.8rem;padding:4px 8px;border-radius:8px;border:1px solid transparent}
.mp-track .mp-dlrow:hover{opacity:1;border-color:var(--mp-line)}
.mp-badge{font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;
  background:var(--mp-soft);border:1px solid var(--mp-line);color:var(--mp-muted);white-space:nowrap}
.mp-nofiles{padding:30px;text-align:center;color:var(--mp-muted)}
@media(max-width:560px){ .mp-rate{display:none} }

/* ---- Overview (book cards) ---- */
.mp-book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:18px}
.mp-book-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--mp-ink);
  background:var(--mp-surface);border:1px solid var(--mp-line);border-radius:12px;padding:12px;transition:box-shadow .15s}
.mp-book-card:hover{box-shadow:var(--mp-shadow)}
.mp-book-card img{width:100%;height:auto;border-radius:8px;display:block}
.mp-book-card .mp-book-fallback{width:100%;aspect-ratio:3/4;border-radius:8px;background:var(--mp-soft)}
.mp-book-card .mp-book-name{font-weight:600;font-size:.95rem}
.mp-book-card .mp-book-count{font-size:.78rem;color:var(--mp-muted)}

/* ---- Tabs (one per book on /media) ---- */
.mp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.mp-tab{border:1px solid var(--mp-line);background:var(--mp-surface);color:var(--mp-ink);padding:8px 14px;
  border-radius:999px;cursor:pointer;font-size:.92rem;font-weight:600;text-align:left;line-height:1.2}
.mp-tab small{display:block;font-weight:400;color:var(--mp-muted);font-size:.72rem}
.mp-tab[aria-selected="true"]{background:var(--mp-accent);color:var(--mp-accent-ink);border-color:var(--mp-accent)}
.mp-tab[aria-selected="true"] small{color:var(--mp-accent-ink);opacity:.85}

/* ---- Link card (non-embeddable external video: SchoolTV page, podcast, …) ---- */
.mp-linkcard{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:radial-gradient(120% 120% at 50% 0%, #324271 0%, #141b2e 70%);color:#eef1f8;padding:24px;text-align:center}
.mp-linkbtn{display:inline-block;background:var(--mp-accent);color:#fff;text-decoration:none;padding:10px 18px;border-radius:999px;font-weight:600}
.mp-linkbtn:hover{filter:brightness(1.08)}

/* ---- Two-column layout: the viewer stays put on the left (sticky) while the
   list scrolls on the right. Stacks to one column on a narrow content area.
   Driven by the #content container query (container-name: shop). ---- */
.mp-layout{display:block}
@container shop (min-width: 820px){
  /* Fit the player between the tabs and the site footer so the footer bar stays
     visible; the list (mp-side) scrolls internally instead of growing the page.
     The viewer fills the left column height (true 16:9 is one fullscreen away). */
  .mp-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:20px;
    align-items:stretch;height:calc(100vh - 320px);min-height:360px}
  .mp-viewer{min-height:0;display:flex}
  .mp-viewer .mp-stage{margin-bottom:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .mp-viewer .mp-media{aspect-ratio:auto;flex:1 1 auto;min-height:0}
  .mp-side{min-height:0;max-height:100%;overflow-y:auto}
  /* keep the search box visible while the list scrolls */
  .mp-side .mp-toolbar{margin:0;position:sticky;top:0;z-index:1;background:var(--mp-surface, #fbfcfe);padding-bottom:8px}
}