/*
 * Scoped styles for the single-lesson listening player (courses/listening-exN.php).
 * Extracted from listening/index.html's player view; the multi-course picker
 * ("home" screen) styles were dropped since one post now maps to one course.
 * Recolored to the site's own light palette (assets/css/styles.css :root —
 * --brand/--brand2/--ink/--muted/--border/--shadow) instead of the original
 * standalone tool's dark navy/purple theme, so it reads as part of the page
 * instead of a clashing dark box. Falls back to sane defaults if those
 * variables aren't present. Everything is namespaced under
 * .bv-listening-player so it cannot leak into the rest of the theme.
 */
.bv-listening-player{
  --bvlp-panel: #fff;
  --bvlp-panel2: var(--soft, rgba(15,23,42,.045));
  --bvlp-line: var(--border, rgba(15,23,42,.12));
  --bvlp-text: var(--ink, #0f172a);
  --bvlp-muted: var(--muted, rgba(15,23,42,.62));
  --bvlp-accent: var(--brand, #2f6fed);
  --bvlp-accent2: var(--brand2, #00b8a9);
  --bvlp-hl-bg: rgba(47,111,237,.09);
  --bvlp-s1: var(--bvlp-accent);
  --bvlp-s2: #0f766e;
  --bvlp-shadow: var(--shadow, 0 14px 32px rgba(15,23,42,.10));

  color:var(--bvlp-text);
  font-family:inherit;
  -webkit-font-smoothing:antialiased;
}
.bv-listening-player, .bv-listening-player *{box-sizing:border-box}
.bv-listening-player a{color:var(--bvlp-accent)}

/* ===== Page hero (breadcrumb + title) — shrunk from the site-wide .hero/.display-6
   defaults, which read as too large/roomy for a course/lesson page. Scoped here since
   this stylesheet only loads on the listening template (see inc/listening-lessons.php). */
.bv-course-hero .container{padding-top:22px;padding-bottom:22px}
.bv-course-hero h1{font-size:1.5rem;line-height:1.3}
.bv-course-hero .text-muted-2{font-size:13px}

/* Section below the hero also used the site-wide 72px top padding meant for
   standalone landing sections — way more air than a lesson description needs
   right under a title. */
.bv-course-section{padding-top:16px;padding-bottom:26px}
.bv-course-desc{color:var(--bvlp-muted, var(--muted, rgba(15,23,42,.62)));font-size:15px;line-height:1.6}
@media(max-width:576px){.bv-course-section{padding-top:18px;padding-bottom:28px}}

/* ===== Player layout ===== */
.bv-listening-player .player{display:grid;grid-template-columns:260px 1fr;gap:18px}
@media(max-width:820px){.bv-listening-player .player{grid-template-columns:1fr}}
.bv-listening-player .side{
  background:var(--bvlp-panel);border:1px solid var(--bvlp-line);border-radius:18px;padding:14px;
  box-shadow:var(--bvlp-shadow);
  /* top offset clears the theme's sticky navbar (~78px tall); without it the
     sidebar scrolls up underneath the nav instead of stopping below it. */
  align-self:start; position:sticky; top:90px; max-height:calc(100dvh - 106px); overflow:auto;
}
.bv-listening-player .side h4{margin:4px 4px 12px;font-size:13px;color:var(--bvlp-muted);text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:8px}
/* x/N completed-lessons counter next to the sidebar heading */
.bv-listening-player .side-progress{margin-left:auto;color:var(--bvlp-accent2);background:rgba(0,184,169,.12);
  padding:1px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:0;text-transform:none}
.bv-listening-player .side-progress:empty{display:none}
.bv-listening-player .side-progress.full{color:#fff;background:var(--bvlp-accent2)}
.bv-listening-player .lesson{padding:11px 12px;border-radius:11px;cursor:pointer;border:1px solid transparent;margin-bottom:6px;transition:.12s}
.bv-listening-player .lesson:hover{background:var(--bvlp-panel2)}
.bv-listening-player .lesson.active{background:var(--bvlp-hl-bg);border-color:var(--bvlp-accent)}
.bv-listening-player .lesson .t{font-weight:600;font-size:14px;line-height:1.3;color:var(--bvlp-text)}
/* Green ✓ badge, shown only on lessons played to the end */
.bv-listening-player .lesson .lesson-check{display:none;color:var(--bvlp-accent2);font-weight:900;margin-right:5px}
.bv-listening-player .lesson.done .lesson-check{display:inline}
.bv-listening-player .lesson.done .t{color:var(--bvlp-accent2)}
.bv-listening-player .lesson .tv{color:var(--bvlp-muted);font-size:12px;margin-top:3px}
.bv-listening-player .lesson .dur{color:var(--bvlp-muted);font-size:11px;margin-top:5px}

.bv-listening-player .main{background:var(--bvlp-panel);border:1px solid var(--bvlp-line);border-radius:18px;box-shadow:var(--bvlp-shadow);overflow:hidden;display:flex;flex-direction:column;min-height:48dvh}
.bv-listening-player .mhead{padding:13px 18px;border-bottom:1px solid var(--bvlp-line)}
.bv-listening-player .mhead h2{margin:0 0 2px;font-size:17px;color:var(--bvlp-text)}
.bv-listening-player .mhead .mv{color:var(--bvlp-muted);font-size:13px}

.bv-listening-player .transcript{padding:7px 6px;overflow:auto;flex:1; max-height:calc(100dvh - 300px)}
.bv-listening-player .row{display:flex;gap:10px;padding:8px 12px;border-radius:10px;cursor:pointer;transition:background .12s,opacity .12s;opacity:.68}
.bv-listening-player .row:hover{background:var(--bvlp-panel2);opacity:1}
.bv-listening-player .row.active{background:var(--bvlp-hl-bg);opacity:1}
.bv-listening-player .row.active .text{color:var(--bvlp-accent);font-weight:600}
.bv-listening-player .spk{flex:0 0 72px;font-size:12px;font-weight:700;padding-top:1px}
.bv-listening-player .spk.s1{color:var(--bvlp-s1)} .bv-listening-player .spk.s2{color:var(--bvlp-s2)}
.bv-listening-player .text{font-size:15px;line-height:1.5;color:var(--bvlp-text)}
.bv-listening-player .row.played .text{color:var(--bvlp-muted)}

/* ===== Controls ===== */
/* Sits at the top of the dialogue, directly above the transcript. The transcript
   is its own internal scroll region (overflow:auto below), so these controls stay
   put while the dialogue scrolls — the play/seek bar never scrolls out of view. */
.bv-listening-player .controls{border-bottom:1px solid var(--bvlp-line);padding:10px 16px;background:var(--bvlp-panel2);display:flex;flex-direction:column;gap:8px}
.bv-listening-player .seek{display:flex;align-items:center;gap:12px}
.bv-listening-player .seek input[type=range]{flex:1;accent-color:var(--bvlp-accent);height:5px}
.bv-listening-player .time{font-variant-numeric:tabular-nums;color:var(--bvlp-muted);font-size:12px;min-width:44px;text-align:center}
.bv-listening-player .cbtns{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bv-listening-player .icbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--bvlp-line);background:#fff;color:var(--bvlp-text);
  cursor:pointer;display:grid;place-items:center;transition:.15s;font-size:15px}
.bv-listening-player .icbtn:hover{border-color:var(--bvlp-accent);background:var(--bvlp-hl-bg)}
.bv-listening-player .icbtn.on{border-color:var(--bvlp-accent);background:var(--bvlp-hl-bg);color:var(--bvlp-accent);box-shadow:inset 0 0 0 1px var(--bvlp-accent)}
.bv-listening-player .icbtn.big{width:46px;height:46px;background:linear-gradient(135deg,var(--bvlp-accent),var(--bvlp-accent2));border:none;color:#fff;font-size:18px;box-shadow:0 8px 18px rgba(47,111,237,.25)}
.bv-listening-player .rate{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--bvlp-muted);font-size:13px}
.bv-listening-player .rate select{background:#fff;color:var(--bvlp-text);border:1px solid var(--bvlp-line);border-radius:8px;padding:6px 8px;cursor:pointer}
.bv-listening-player .autoscroll{display:flex;align-items:center;gap:6px;color:var(--bvlp-muted);font-size:13px;cursor:pointer;user-select:none}

/* ===== Vietnamese line + toggles ===== */
.bv-listening-player .text-wrap{flex:1}
.bv-listening-player .trans{font-size:13px;line-height:1.45;color:var(--bvlp-s2);margin-top:4px;font-style:italic;display:none}
.bv-listening-player .transcript.show-vi .trans{display:block}
.bv-listening-player .mtools{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.bv-listening-player .toggle{border:1px solid var(--bvlp-line);background:#fff;color:var(--bvlp-muted);padding:6px 12px;
  border-radius:999px;cursor:pointer;font-size:13px;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.bv-listening-player .toggle:hover{border-color:var(--bvlp-accent);color:var(--bvlp-text)}
.bv-listening-player .toggle.on{background:var(--bvlp-hl-bg);border-color:var(--bvlp-accent);color:var(--bvlp-accent)}

/* ===== Vocab study block (always visible, above the transcript) ===== */
/* Pre-teach the lesson's key words before listening. Set apart from the
   transcript with a soft accent tint + top rule so it reads as its own
   "study first" section rather than part of the dialogue. */
.bv-listening-player .vocab{display:block;border-bottom:1px solid var(--bvlp-line);
  background:linear-gradient(180deg,var(--bvlp-hl-bg),var(--bvlp-panel2));
  box-shadow:inset 0 3px 0 var(--bvlp-accent)}
.bv-listening-player .vocab-inner{padding:11px 16px 13px}
.bv-listening-player .vocab h5{margin:0 2px 10px;font-size:12px;color:var(--bvlp-muted);text-transform:uppercase;
  letter-spacing:.7px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bv-listening-player .vocab h5 .vh-ico{font-size:15px;line-height:1}
.bv-listening-player .vocab h5 .cnt{color:var(--bvlp-accent);background:#fff;border:1px solid var(--bvlp-line);padding:2px 10px;
  border-radius:999px;font-size:12px;letter-spacing:0;text-transform:none;font-weight:700}
.bv-listening-player .vocab h5 .vh-hint{margin-left:auto;color:var(--bvlp-accent2);font-size:11px;font-weight:700;
  letter-spacing:.3px;text-transform:none}
/* Cap the study block so a long vocab list can't push the audio + transcript
   off-screen — it scrolls internally instead, keeping the whole card on screen. */
.bv-listening-player .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;align-items:start;
  max-height:32vh;overflow:auto;padding-right:2px}
.bv-listening-player .vitem{position:relative;background:#fff;
  border:1px solid var(--bvlp-line);border-radius:11px;padding:9px 12px 10px 38px;transition:.15s}
.bv-listening-player .vitem:hover{border-color:var(--bvlp-accent);transform:translateY(-1px);box-shadow:0 8px 20px -14px rgba(47,111,237,.4)}
.bv-listening-player .vitem .vnum{position:absolute;left:10px;top:10px;width:20px;height:20px;border-radius:6px;
  background:var(--bvlp-hl-bg);color:var(--bvlp-accent);font-size:11px;font-weight:800;
  display:grid;place-items:center;font-variant-numeric:tabular-nums}
.bv-listening-player .vitem .vt-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bv-listening-player .vitem .vt{font-weight:700;font-size:15px;color:var(--bvlp-text);line-height:1.3}
.bv-listening-player .vitem .vtype{font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--bvlp-accent2);background:rgba(0,184,169,.12);
  padding:2px 7px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.bv-listening-player .vitem .vm{color:var(--bvlp-s2);font-size:13.5px;margin-top:4px;line-height:1.45}
.bv-listening-player .vitem .ve{color:var(--bvlp-muted);font-size:12.5px;margin-top:6px;padding-left:9px;
  border-left:2px solid var(--bvlp-accent);font-style:italic;line-height:1.45;opacity:.9}

/* Pronounce button (🔊) next to each term */
.bv-listening-player .vitem .vsound{margin-left:auto;flex:none;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--bvlp-line);background:#fff;color:var(--bvlp-accent);font-size:14px;line-height:1;
  cursor:pointer;display:inline-grid;place-items:center;transition:.15s}
.bv-listening-player .vitem .vsound:hover{border-color:var(--bvlp-accent);background:var(--bvlp-hl-bg)}
.bv-listening-player .vitem .vsound:active{transform:scale(.92)}

/* "Đã thuộc" (mark-learned) button + learned state */
.bv-listening-player .vitem .vlearn{margin-top:8px;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--bvlp-line);background:#fff;color:var(--bvlp-muted);
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.bv-listening-player .vitem .vlearn:hover{border-color:var(--bvlp-accent2);color:var(--bvlp-accent2)}
.bv-listening-player .vitem .vlearn .vlearn-ico{font-size:12px;line-height:1}
.bv-listening-player .vitem.learned{background:rgba(0,184,169,.06);border-color:rgba(0,184,169,.45)}
.bv-listening-player .vitem.learned .vt{color:var(--bvlp-accent2)}
.bv-listening-player .vitem.learned .vnum{background:rgba(0,184,169,.14);color:var(--bvlp-accent2)}
.bv-listening-player .vitem.learned .vlearn{background:var(--bvlp-accent2);border-color:var(--bvlp-accent2);color:#fff}

/* Learned-progress counter in the header */
.bv-listening-player .vocab h5 .vh-learned{color:var(--bvlp-accent2);background:rgba(0,184,169,.12);
  padding:2px 10px;border-radius:999px;font-size:12px;letter-spacing:0;text-transform:none;font-weight:700}
.bv-listening-player .vocab h5 .vh-learned:empty{display:none}

/* Ẩn/Hiện (collapse) the word grid — header bar stays so it can be reopened */
.bv-listening-player .vocab h5 .vocab-collapse{flex:none;border:1px solid var(--bvlp-line);background:#fff;
  color:var(--bvlp-muted);padding:3px 12px;border-radius:999px;font-size:12px;font-weight:700;
  letter-spacing:0;text-transform:none;cursor:pointer;transition:.15s}
.bv-listening-player .vocab h5 .vocab-collapse:hover{border-color:var(--bvlp-accent);color:var(--bvlp-accent)}
.bv-listening-player .vocab.collapsed .vgrid{display:none}
.bv-listening-player .vocab.collapsed h5{margin-bottom:0}

/* Below 820px the grid stacks to one column (tablets, e.g. iPad portrait ~768px).
   Once stacked, the 14-lesson sidebar can no longer be a sticky side rail — left as
   a plain block list it renders full height above the player and buries the audio
   controls/transcript off-screen. Turn it into a short horizontal scroll strip instead
   so the player stays visible without scrolling past the whole lesson list first.
   Placed after the base .side/#bvlpLessonList rules above so it actually wins the
   cascade (a media query alone doesn't outrank a later same-specificity rule). */
@media(max-width:820px){
  /* min-width:0 is load-bearing: once .side no longer clips overflow (overflow:visible,
     needed so its own drop-shadow/border aren't clipped), the 1fr grid track stops
     shrinking to fit and instead grows to the lesson strip's full content width,
     pushing the whole page wider. Forcing min-width:0 keeps the track at 1fr and lets
     #bvlpLessonList's own overflow-x:auto do the scrolling instead. */
  .bv-listening-player .side{position:static;max-height:none;overflow:visible;min-width:0;padding:12px;margin-bottom:14px}
  .bv-listening-player .side h4{margin:2px 4px 8px}
  .bv-listening-player #bvlpLessonList{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .bv-listening-player #bvlpLessonList .lesson{flex:0 0 240px;margin-bottom:0;scroll-snap-align:start}

  /* Keep the whole player compact on mobile/tablet: cap the transcript to a modest
     share of the viewport (it scrolls internally) instead of letting it grow to the
     full lesson length, so the player card stays short and controls sit right under
     it without a long page scroll either way. */
  .bv-listening-player .main{min-height:0;overflow:hidden;border-radius:14px}
  .bv-listening-player .transcript{max-height:46vh;overflow:auto;padding:8px}
}

/* ===================== MOBILE ===================== */
@media(max-width:640px){
  .bv-listening-player .side{padding:10px;margin-bottom:12px}
  .bv-listening-player #bvlpLessonList .lesson{flex:0 0 80%}

  .bv-listening-player .mhead{padding:14px 14px}
  .bv-listening-player .mhead h2{font-size:17px}
  .bv-listening-player .transcript{max-height:38vh;padding:6px}
  .bv-listening-player .row{padding:10px 10px;gap:8px}
  .bv-listening-player .spk{flex:0 0 52px;font-size:11px}
  .bv-listening-player .text{font-size:15px;line-height:1.6}
  .bv-listening-player .trans{font-size:13.5px}
  .bv-listening-player .icbtn{width:46px;height:46px}
  .bv-listening-player .icbtn.big{width:54px;height:54px}
  .bv-listening-player .cbtns{gap:8px}
  .bv-listening-player .rate{font-size:12px;gap:6px}
}