/* ============================================================
   Course player — immersive learner view. Works under both the
   public app layout and the dashboard preview. Stable hooks:
   .player .lesson-video .quiz-form .quiz-q .quiz-opt
   RTL/LTR safe (logical properties). Aurora SaaS look.
   ============================================================ */

.player{display:grid;grid-template-columns:340px 1fr;min-height:100vh;background:var(--bg);position:relative}

/* --------------------------------------------------------------- sidebar */
.player__sidebar{border-inline-end:1px solid var(--line);background:var(--bg-2);
  overflow-y:auto;height:100vh;position:sticky;inset-block-start:0;display:flex;flex-direction:column}
.player__head{padding:var(--s-5);border-bottom:1px solid var(--line);background:var(--surface);position:sticky;inset-block-start:0;z-index:2}
.player__brand{display:flex;align-items:flex-start;gap:10px;color:var(--text)}
.player__brand:hover .player__course-title{color:var(--brand-fg)}
.player__brand-ico{color:var(--muted);margin-top:3px;transform:scaleX(-1);flex-shrink:0}
[dir="ltr"] .player__brand-ico{transform:none}
.player__brand-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.player__course-title{font-weight:800;font-size:var(--fz-md);line-height:1.25;transition:color var(--dur) var(--ease)}
.player__preview-badge{align-self:flex-start}

.player__progress-row{display:flex;align-items:center;gap:10px;margin-top:var(--s-4)}
.player__progress{flex:1;height:8px;background:var(--bg-3);border-radius:var(--r-full);overflow:hidden}
.player__progress-bar{height:100%;background:var(--brand-grad);border-radius:inherit;transition:width var(--dur-slow) var(--ease-out-expo)}
.player__progress-pct{font-size:var(--fz-xs);font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:34px;text-align:end}

.player__lessons{padding:var(--s-3);flex:1}
.player__skeleton{display:flex;flex-direction:column;gap:10px;padding:var(--s-3)}

.player__progress-fraction{display:block;font-size:var(--fz-xs);color:var(--muted);
  font-variant-numeric:tabular-nums;margin-top:var(--s-2)}

/* ------------------------------------------------ chapters (expandable) */
.player__chapter{border-radius:var(--r);margin-bottom:var(--s-1);overflow:hidden;position:relative;
  border:1px solid transparent;
  transition:background var(--dur-slow) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur-slow) var(--ease)}
.player__chapter:hover{background:var(--tint)}
.player__chapter.is-open{background:var(--brand-grad-soft);border-color:color-mix(in srgb,var(--brand-line) 14%,transparent)}
.player__chapter.has-active{border-color:var(--line-brand);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand-2) 10%,transparent),var(--shadow-sm)}

.player__chapter-head{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;
  background:transparent;border:0;color:var(--text);text-align:start;cursor:pointer;font:inherit;border-radius:var(--r);
  transition:background var(--dur) var(--ease)}
/* Nothing moves on hover/press anywhere in the app — the tint IS the affordance
   (the head previously only signalled a press via transform:scale). */
.player__chapter-head:hover{background:var(--tint)}
.player__chapter-head:active{background:var(--tint-strong)}
.player__chapter-name{flex:1;min-width:0;font-size:var(--fz-sm);font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__chapter.has-active .player__chapter-name{color:var(--brand-fg)}

.player__chapter-pct{flex-shrink:0;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;
  padding:3px 8px;min-width:42px;text-align:center;border-radius:var(--r-full);letter-spacing:.3px;
  background:var(--bg-3);color:var(--muted);border:1px solid var(--line);
  transition:background var(--dur-slow) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur-slow) var(--ease)}
.player__chapter-pct.is-partial{background:var(--tint-strong);color:var(--brand-fg);border-color:var(--line-brand)}
.player__chapter-pct.is-done{background:color-mix(in srgb,var(--accent-green) 16%,transparent);
  color:var(--success-fg);border-color:color-mix(in srgb,var(--accent-green) 45%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-green) 22%,transparent),0 0 12px color-mix(in srgb,var(--accent-green) 30%,transparent)}

.player__chapter-caret{flex-shrink:0;color:var(--muted);display:grid;place-items:center;
  transition:transform var(--dur-slow) var(--ease-out-expo),color var(--dur) var(--ease)}
.player__chapter-caret .icon{width:16px;height:16px}
.player__chapter.is-open .player__chapter-caret{transform:rotate(-180deg);color:var(--brand-fg)}

/* per-chapter mini progress bar */
.player__chapter-bar{height:3px;margin:0 12px 4px;background:var(--bg-3);border-radius:var(--r-full);overflow:hidden}
.player__chapter-fill{display:block;height:100%;border-radius:inherit;background:var(--brand-grad);
  transition:width var(--dur-slower) var(--ease-out-expo),background var(--dur-slow) var(--ease)}
.player__chapter-pct.is-done ~ .player__chapter-bar .player__chapter-fill,
.player__chapter[data-key] .player__chapter-fill{will-change:width}

/* collapsible lesson body */
.player__chapter-body{max-height:0;overflow:hidden;opacity:0;
  transition:max-height var(--dur-slow) var(--ease),opacity var(--dur) var(--ease)}
.player__chapter.is-open .player__chapter-body{max-height:1800px;opacity:1;
  transition:max-height var(--dur-slower) var(--ease-out-expo),opacity var(--dur-slow) var(--ease) 40ms}
.player__chapter-inner{display:flex;flex-direction:column;gap:2px;padding:2px 6px 8px}

/* ------------------------------------------------ lesson rows */
.player__lesson{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--r-sm);
  color:var(--text-2);cursor:pointer;text-align:start;border:1px solid transparent;position:relative;font:inherit;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out-expo)}
/* entrance stagger — runs each time a chapter expands */
/* CLOSING: `opacity` and `transform` are in the transition list above ON PURPOSE.
   Without them this rule applied opacity:0 in the SAME frame as the class flip, so
   the rows VANISHED instantly and only an already-empty box eased shut — the pop
   this pass bans. Now they fade+slide out over --dur while .player__chapter-body
   collapses, and the closed values deliberately match plessonIn's `from` frame so
   the OUT direction is the exact reverse of the entrance.
   pointer-events:none stays UNTRANSITIONED so a collapsing chapter cannot swallow
   a click on a lesson it is in the middle of hiding. */
.player__chapter:not(.is-open) .player__lesson{opacity:0;transform:translateX(6px);pointer-events:none}
.player__chapter.is-open .player__lesson{animation:plessonIn .42s cubic-bezier(.2,.7,.3,1.15) backwards}
.player__chapter.is-open .player__lesson:nth-child(1){animation-delay:.03s}
.player__chapter.is-open .player__lesson:nth-child(2){animation-delay:.06s}
.player__chapter.is-open .player__lesson:nth-child(3){animation-delay:.09s}
.player__chapter.is-open .player__lesson:nth-child(4){animation-delay:.12s}
.player__chapter.is-open .player__lesson:nth-child(5){animation-delay:.15s}
.player__chapter.is-open .player__lesson:nth-child(6){animation-delay:.18s}
.player__chapter.is-open .player__lesson:nth-child(7){animation-delay:.21s}
.player__chapter.is-open .player__lesson:nth-child(8){animation-delay:.24s}
.player__chapter.is-open .player__lesson:nth-child(n+9){animation-delay:.27s}
@keyframes plessonIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:translateX(0)}}

.player__lesson:hover{background:var(--tint);color:var(--text)}
.player__lesson.active{background:var(--tint-strong);border-color:var(--line-brand);color:var(--brand-fg)}
/* active accent bar on the leading (inline-start) edge */
.player__lesson::after{content:"";position:absolute;inset-block:7px;inset-inline-start:-1px;width:3px;border-radius:var(--r-full);
  background:var(--brand-grad);opacity:0;transform:scaleY(.4);transform-origin:center;
  transition:opacity var(--dur) var(--ease),transform var(--dur-slow) var(--ease-out-expo)}
.player__lesson.active::after{opacity:1;transform:scaleY(1)}

/* status check — hollow ring idle, brand gradient disc when done */
.player__lesson-status{width:20px;height:20px;flex-shrink:0;border-radius:var(--r-full);
  border:1.6px solid var(--line-strong);background:var(--bg-2);display:grid;place-items:center;color:transparent;position:relative;
  transition:background var(--dur-slow) cubic-bezier(.2,.7,.3,1.3),border-color var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),color var(--dur) var(--ease)}
.player__lesson-status .player__lesson-check{width:12px;height:12px;stroke-width:3}
.player__lesson-status .player__lesson-check path{stroke-dasharray:24;stroke-dashoffset:24}
.player__lesson:hover .player__lesson-status{border-color:var(--line-brand);box-shadow:0 0 0 3px var(--tint)}
/* The status circle is itself a completion toggle — surface it as clickable and
   preview the check on direct hover (skipped for locked lessons). */
.player__lesson:not(.locked) .player__lesson-status{cursor:pointer}
.player__lesson:not(.locked):not(.done) .player__lesson-status:hover{
  border-color:var(--brand-line);box-shadow:0 0 0 4px var(--tint);color:color-mix(in srgb,var(--brand-fg) 55%,transparent)}
.player__lesson.locked .player__lesson-status{cursor:default}
/* burst layer */
.player__lesson-status::before{content:"";position:absolute;inset:-3px;border-radius:var(--r-full);pointer-events:none;
  opacity:0;transform:scale(.65);z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-2) 55%,transparent) 0%,color-mix(in srgb,var(--accent-green) 35%,transparent) 45%,transparent 70%)}

.player__lesson.done .player__lesson-status{border-color:transparent;color:var(--on-brand);
  background:linear-gradient(135deg,var(--brand-3) 0%,var(--accent-green) 100%);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-2) 20%,transparent),0 0 14px color-mix(in srgb,var(--brand-2) 40%,transparent),0 0 26px color-mix(in srgb,var(--accent-green) 28%,transparent);
  animation:plPop .55s cubic-bezier(.2,.7,.3,1.5) both,plGlow 2.6s ease-in-out .55s infinite}
.player__lesson.done .player__lesson-status::before{animation:plBurst .85s cubic-bezier(.2,.6,.3,1) both}
.player__lesson.done .player__lesson-status .player__lesson-check path{animation:plDraw .55s .12s cubic-bezier(.2,.6,.3,1) forwards}
/* active+done: steady halo, no re-burst on navigation */
.player__lesson.active.done .player__lesson-status{animation:plGlow 2.6s ease-in-out infinite}

/* un-complete reverse */
.player__lesson.uncompleting .player__lesson-status{animation:plUnpop .45s cubic-bezier(.4,0,.6,1) both}
.player__lesson.uncompleting .player__lesson-status::before{animation:plUnburst .35s ease-out both}
.player__lesson.uncompleting .player__lesson-status .player__lesson-check path{stroke-dashoffset:0;animation:plUndraw .3s cubic-bezier(.4,0,.6,1) forwards}

@keyframes plPop{0%{transform:scale(.55) rotate(-10deg)}55%{transform:scale(1.28) rotate(4deg)}78%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes plBurst{0%{opacity:1;transform:scale(.55)}55%{opacity:.8;transform:scale(1.7)}100%{opacity:0;transform:scale(2.2)}}
@keyframes plGlow{0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-2) 16%,transparent),0 0 12px color-mix(in srgb,var(--brand-2) 38%,transparent),0 0 24px color-mix(in srgb,var(--accent-green) 22%,transparent)}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-2) 28%,transparent),0 0 20px color-mix(in srgb,var(--brand-2) 60%,transparent),0 0 36px color-mix(in srgb,var(--accent-green) 40%,transparent)}}
@keyframes plUnpop{0%{transform:scale(1)}45%{transform:scale(.65)}100%{transform:scale(1)}}
@keyframes plUnburst{0%{opacity:.6;transform:scale(1.4)}100%{opacity:0;transform:scale(.6)}}
@keyframes plDraw{to{stroke-dashoffset:0}}
@keyframes plUndraw{to{stroke-dashoffset:24}}

.player__lesson-ico{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--bg-3);color:var(--muted);border:1px solid var(--line);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.player__lesson-ico .icon{width:14px;height:14px}
.player__lesson.active .player__lesson-ico{background:var(--brand-grad);color:var(--on-brand);border-color:transparent}
.player__lesson.done .player__lesson-ico{color:var(--success-fg);border-color:color-mix(in srgb,var(--accent-green) 30%,transparent)}
.player__lesson-main{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.player__lesson-title{font-size:var(--fz-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__lesson.active .player__lesson-title{color:var(--brand-fg)}
.player__lesson-meta{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__lesson.locked{opacity:.55;cursor:not-allowed}
.player__lesson.locked:hover{background:transparent;color:var(--text-2)}

@media (prefers-reduced-motion:reduce){
  .player__chapter.is-open .player__lesson{animation:none}
  /* Chapter disclosure => INSTANT both ways. Both state rules must be listed:
     `.player__chapter.is-open .player__chapter-body` (0,2,0) declares its own
     transition and would otherwise out-specify a base-only override.
     Purely class-driven (course-player.js never waits on transitionend), so
     killing the transition strands nothing and leaves no pending timer. */
  .player__chapter-body,.player__chapter.is-open .player__chapter-body{transition:none}
  /* Drop ONLY the disclosure fade/slide — the hover colour transitions stay, per
     the motion.css reduced-motion policy (neutralise motion, keep gentle hovers). */
  .player__lesson{transition:background var(--dur-fast) var(--ease),
                             border-color var(--dur-fast) var(--ease),
                             color var(--dur-fast) var(--ease)}
  .player__lesson.done .player__lesson-status,
  .player__lesson.done .player__lesson-status::before,
  .player__lesson.done .player__lesson-status .player__lesson-check path,
  .player__lesson.active.done .player__lesson-status,
  .player__lesson.uncompleting .player__lesson-status,
  .player__lesson.uncompleting .player__lesson-status::before,
  .player__lesson.uncompleting .player__lesson-status .player__lesson-check path{animation:none!important}
  .player__lesson.done .player__lesson-status .player__lesson-check path{stroke-dashoffset:0}
  /* progress fills snap instantly */
  .player__progress-bar,.player__chapter-fill{transition:none}
  .player__chapter-body{transition:none}
}

/* --------------------------------------------------------------- stage */
.player__main{overflow-y:auto;height:100vh;padding:var(--s-10) var(--s-8)}
.player__content{max-width:900px;margin-inline:auto;width:100%}
.player__loading{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-4)}

.player__lesson-head{margin-bottom:var(--s-6)}
.player__lesson-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:var(--fz-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:1px;color:var(--brand-fg);margin-bottom:var(--s-3)}
.player__lesson-h{font-size:var(--fz-xl);line-height:1.2}

.lesson-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;
  background:#000;border:1px solid var(--line);margin-bottom:var(--s-6);box-shadow:var(--shadow-lg)}
.lesson-video iframe,.lesson-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.lesson-video>.muted{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}

.lesson-article{line-height:1.9;font-size:var(--fz-md);color:var(--text-2)}
.lesson-article h1,.lesson-article h2{margin:var(--s-8) 0 var(--s-3);color:var(--text)}
.lesson-article h3{margin:var(--s-6) 0 var(--s-3);color:var(--text)}
.lesson-article p{margin-bottom:var(--s-4)}
.lesson-article ul,.lesson-article ol{margin:var(--s-4) 0;padding-inline-start:var(--s-6)}
.lesson-article li{list-style:inherit;margin-bottom:var(--s-2)}
.lesson-article ul{list-style:disc}
.lesson-article ol{list-style:decimal}
.lesson-article a{
  color:var(--brand-fg);font-weight:600;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0% 1.5px no-repeat;
  transition:background-size var(--dur-slow) var(--ease),color var(--dur) var(--ease);
}
.lesson-article a:hover{background-size:100% 1.5px}
[dir="rtl"] .lesson-article a{background-position:100% 100%}
.lesson-article img{border-radius:var(--r-lg);margin-block:var(--s-4)}
.lesson-article blockquote{border-inline-start:3px solid var(--line-brand);padding-inline-start:var(--s-4);
  margin-block:var(--s-4);color:var(--muted)}
.lesson-article code{background:var(--bg-3);padding:2px 6px;border-radius:6px;font-size:.9em}
.lesson-article pre{background:var(--bg-3);padding:var(--s-4);border-radius:var(--r);overflow-x:auto;margin-block:var(--s-4)}
.lesson-article pre code{background:none;padding:0}

.lesson-complete{margin-top:var(--s-5);position:relative;overflow:visible}
.lesson-complete.is-done{color:var(--success-fg);
  border-color:color-mix(in srgb,var(--accent-green) 38%,transparent);
  background:color-mix(in srgb,var(--accent-green) 10%,transparent)}
.lesson-complete.is-done .icon{color:var(--success-fg)}
/* Preview / logged-out: the affordance is shown but purely informational
   (owner isn't an enrolled learner). Muted, not disabled, so the tooltip +
   explanatory click still work. */
.lesson-complete.is-preview{opacity:.6;cursor:default}
.lesson-complete.is-preview:hover{opacity:.75}
/* one-shot brand burst ring on completion */
.lesson-complete--burst::after{content:"";position:absolute;inset:-6px;border-radius:var(--r-full);pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-2) 45%,transparent) 0%,color-mix(in srgb,var(--accent-green) 30%,transparent) 45%,transparent 72%);
  animation:plBurst .7s cubic-bezier(.2,.6,.3,1) both}

.lesson-nav{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-10);
  padding-top:var(--s-6);border-top:1px solid var(--line)}
.lesson-nav__btn:disabled{opacity:.4}
/* nudge the button toward its own edge; arrow order is set in JS per direction */
.lesson-nav__btn--next{margin-inline-start:auto}

@media (prefers-reduced-motion:reduce){.lesson-complete--burst::after{animation:none;opacity:0}}

/* --------------------------------------------------------------- quiz (player) */
.quiz-form{display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-4)}
.quiz-form .quiz-q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s-5);box-shadow:var(--shadow-xs)}
.quiz-q__body{display:flex;align-items:flex-start;gap:10px;font-weight:600;color:var(--text);margin-bottom:var(--s-4)}
/* .quiz-q__num is the ONE selector this sheet shares with modules/course.css, and
   the two declaration sets are now deliberately IDENTICAL, so the cascade can never
   pick a different winner no matter which sheet a page links first (or links at all).
   The `box-shadow` below is the reason this note exists: it used to reach the player
   ONLY because course.css was @import'ed into the primunity.css manifest on every
   page. When course.css became page-linked, /learn/{slug} — which links player.css
   and NOT course.css — silently lost it (measured: `none`, where the shipped page
   computed `rgba(30,90,220,.12) 0 8px 30px`). Declared here so the badge is
   self-sufficient on the player and reads identically to the builder's.
   Keep the two rules in lockstep: if you change one, change the other. The only
   remaining difference is logical (course.css: inline-size/block-size) vs physical
   (here: width/height) sizing — equivalent for a 26px square in every writing mode. */
.quiz-q__num{flex-shrink:0;width:26px;height:26px;display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--brand-grad);color:var(--on-brand);font-size:var(--fz-xs);font-weight:800;box-shadow:var(--glow)}
.quiz-form .quiz-opt{display:block;margin-bottom:10px}
.quiz-form .quiz-opt:last-child{margin-bottom:0}
.quiz-opt label{display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;width:100%;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.quiz-opt label:hover{border-color:var(--line-brand);background:var(--tint)}
.quiz-opt input{accent-color:var(--brand-fill);width:18px;height:18px;flex-shrink:0}
.quiz-opt.is-correct label{border-color:var(--accent-green);background:color-mix(in srgb,var(--accent-green) 10%,transparent)}
.quiz-opt.is-wrong-pick label{border-color:var(--accent-red);background:color-mix(in srgb,var(--accent-red) 10%,transparent)}

.quiz-result{display:flex;align-items:center;gap:12px;margin-top:var(--s-4);padding:var(--s-5);
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.quiz-result__ico{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--r-full)}
.quiz-result__ico .icon{width:24px;height:24px}
.quiz-result__body{display:flex;flex-direction:column;line-height:1.35}
.quiz-result__body strong{font-size:var(--fz-md)}
.quiz-result__score{font-size:var(--fz-sm);color:var(--muted)}
.quiz-result.pass{border-color:var(--accent-green);background:color-mix(in srgb,var(--accent-green) 10%,transparent)}
.quiz-result.pass .quiz-result__ico{background:color-mix(in srgb,var(--accent-green) 17%,transparent);color:var(--success-fg)}
.quiz-result.fail{border-color:var(--accent-red);background:color-mix(in srgb,var(--accent-red) 10%,transparent)}
.quiz-result.fail .quiz-result__ico{background:color-mix(in srgb,var(--accent-red) 17%,transparent);color:var(--danger-fg)}

/* --------------------------------------------------------------- notes seam */
/* FAB + empty slide-in panel shell. Behavior (persistence, categories, list)
   is populated by a later coder; only open/close is wired here. */
/* The FAB floats above the app chrome (topbar z-index:50) but must stay BELOW
   the open drawer + its scrim so it never pokes through the overlay. */
.player__notes-fab{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:1095;
  background:var(--surface-solid);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);color:var(--brand-fg);
  transition:box-shadow var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.player__notes-fab:hover{box-shadow:var(--shadow-xl)}
.player__notes-fab[aria-expanded="true"]{background:var(--brand-grad);color:var(--on-brand);border-color:transparent}

/* Scrim behind the drawer — mirrors .sidebar-scrim (layout.css). Above the
   topbar (50) and FAB, below the drawer, so the player is dimmed + inert while
   the drawer is open (no more "squeezed content" reading). */
.player__notes-scrim{position:fixed;inset:0;z-index:1099;background:rgba(11,27,58,.4);
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease)}
.player__notes-scrim.is-open{opacity:1;visibility:visible}

/* Drawer sits in the app's overlay tier (above topbar:50, above scrim:1099) so
   it overlays the whole player cleanly instead of docking beside/under the
   dashboard chrome. RTL slides from the inline-start edge (handled below). */
.player__notes{position:fixed;inset-block:0;inset-inline-end:0;z-index:1100;width:min(420px,92vw);
  background:var(--surface);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-xl);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform var(--dur-slower) var(--ease-out-expo)}
[dir="rtl"] .player__notes{transform:translateX(-100%)}
.player__notes.is-open{transform:none}
.player__notes-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-5);border-bottom:1px solid var(--line)}
.player__notes-title{font-size:var(--fz-md);font-weight:800}
/* Body padding/layout is authoritative in notes.css (loaded after this file). */
.player__notes-body{flex:1;overflow-y:auto;padding:var(--s-5)}

/* --------------------------------------------------------------- mobile drawer */
.player__toggle{position:fixed;inset-block-end:20px;inset-inline-start:20px;z-index:40;display:none;
  background:var(--surface-solid);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);color:var(--text)}

@media (max-width:1024px){
  .player{grid-template-columns:1fr}
  .player__sidebar{position:fixed;inset-block:0;inset-inline-start:0;z-index:45;width:min(340px,86vw);
    transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-out-expo);box-shadow:var(--shadow-xl)}
  [dir="rtl"] .player__sidebar{inset-inline-start:auto;inset-inline-end:0;transform:translateX(100%);
    border-inline-end:0;border-inline-start:1px solid var(--line)}
  .player--nav-open .player__sidebar{transform:none}
  .player__main{height:auto;min-height:100vh;padding:var(--s-8) var(--s-5)}
  .player__toggle{display:grid;place-items:center}
}

/* --------------------------------------------------------------- "Trainer"
   design polish — aligns the player with the Exercises design language
   (exercises.css): brand-accent hairline on the sidebar head, dark-theme
   accent-cyan tints on active/branded elements, consistent focus-visible.
   Purely additive: no structural hook / animation / z-index is touched. */
.player__head{position:sticky;inset-block-start:0;z-index:2}
.player__head::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;
  background:var(--brand-grad);opacity:.9;pointer-events:none}
.player__notes-head{position:relative}
.player__notes-head::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;block-size:3px;
  background:var(--brand-grad);opacity:.9;pointer-events:none}
.player__lesson:focus-visible,
.player__chapter-head:focus-visible{outline:2px solid var(--focus-line);outline-offset:-2px;border-radius:var(--r-sm)}