/* ============================================================
   ETB Audio Library — audio.enjoythebible.org
   Scoped entirely under #etb-aud. Design tokens and component
   language taken from the Video Library app so the two read as
   one family; the player is the part that had to change.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ---------- standalone page ----------
   This stylesheet is scoped under #etb-aud, which was right when the pattern
   came from an Elementor block where the theme reset the page for us. On its
   own subdomain nothing does, so the browser's default 8px body margin showed
   as a white gutter down both sides and the masthead never reached the edge
   of a phone screen.

   The colours are written out: the custom properties are scoped to #etb-aud,
   so nothing out here can reference them. #faf8f4 is --parchment, #132539 is
   --navy-deep.

   html is navy, not parchment. Android paints the system navigation bar from
   the page background and picks its icon colour from theme-color — which is
   navy, so it draws the back/home/recents icons in white. With a parchment
   page behind them that was white on white. #etb-aud still carries the
   parchment and is held to the full viewport height, so the navy shows only
   where the app itself does not reach.

   Deliberately NOT overflow-x:hidden — on html or body that turns the page
   into a scroll container and kills the sticky masthead on mobile. */
html,body{margin:0;padding:0;}
html{background:#132539;-webkit-text-size-adjust:100%;}

#etb-aud{
  --navy:#1a2e4a;
  --navy-mid:#2c4a6e;
  --navy-deep:#132539;
  --navy-lt:#3d6291;
  --gold:#b8922a;
  --gold-soft:#d4aa4a;
  --parchment:#faf8f4;
  --paper:#f0ece3;
  --ink:#2a2a2a;
  --muted:#6b6560;
  --rule:#ddd8cc;

  --fs-display:'Crimson Pro',Georgia,serif;
  --fs-body:'Crimson Pro',Georgia,serif;
  --fs-ui:'Source Sans 3',system-ui,sans-serif;

  background:var(--parchment);
  min-height:100vh;
  min-height:100dvh;   /* so a short filtered list never leaves navy showing */
  color:var(--ink);
  font-family:var(--fs-body);
  font-size:17px;
  line-height:1.55;
  padding:0 0 3.5rem;
  margin:0;
  -webkit-font-smoothing:antialiased;
}
#etb-aud *,#etb-aud *::before,#etb-aud *::after{box-sizing:border-box;}
#etb-aud button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
#etb-aud [hidden]{display:none !important;}
#etb-aud a{color:var(--navy);}
#etb-aud :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ---------- masthead ---------- */
#etb-aud .ea-mast{
  background:linear-gradient(180deg,#16294a 0%,#1f3960 100%);
  color:#fff;padding:1.05rem 1.4rem;text-align:left;
}
#etb-aud .ea-mast-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:1rem;}
#etb-aud .ea-badge{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  border:1.5px solid var(--gold-soft);display:grid;place-items:center;
  color:var(--gold-soft);line-height:1;
}
#etb-aud .ea-badge svg{width:26px;height:auto;display:block;}
#etb-aud .ea-mast h1{
  font-family:var(--fs-display);font-weight:700;font-size:clamp(1.4rem,5.2vw,2rem);
  line-height:1.15;margin:0;color:#fff;letter-spacing:.005em;
}
#etb-aud .ea-mast h1 .amp{color:var(--gold-soft);}
#etb-aud .ea-eyebrow{
  font-family:var(--fs-ui);font-size:.72rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.8);margin:.28rem 0 0;
}
#etb-aud .ea-eyebrow sup{font-size:.68em;letter-spacing:0;top:-.45em;position:relative;}
/* The eyebrow carries two links — the way back to the main site, and the
   way to report a fault. The global link colour is navy, which would vanish
   against the navy masthead, so they inherit the eyebrow's white and only
   take an underline on hover. Same rule as the video app. */
#etb-aud .ea-eyebrow a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
#etb-aud .ea-eyebrow a:hover,#etb-aud .ea-eyebrow a:focus-visible{
  color:var(--gold-soft);border-bottom-color:var(--gold-soft);
}
#etb-aud .ea-stats{
  font-family:var(--fs-ui);font-size:.66rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:5px;
}

/* ---------- part strip ---------- */
#etb-aud .ea-catbar{
  position:sticky;top:0;z-index:32;display:flex;gap:9px;
  justify-content:center;justify-content:safe center;
  overflow-x:auto;overflow-y:hidden;scroll-padding-inline:1rem;
  padding:.7rem 1.25rem;background:#132747;
  border-top:1px solid rgba(201,168,76,.55);
  border-bottom:1px solid rgba(201,168,76,.55);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
#etb-aud .ea-catbar::-webkit-scrollbar{display:none;}
#etb-aud .ea-catpill{
  flex:0 0 auto;padding:7px 18px;border-radius:999px;
  font-family:var(--fs-ui);font-size:.78rem;font-weight:600;
  border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;
  white-space:nowrap;transition:background .15s,color .15s,border-color .15s;
}
#etb-aud .ea-catpill:hover{border-color:var(--gold-soft);color:var(--gold-soft);}
#etb-aud .ea-catpill[aria-pressed="true"]{background:#c9a24a;color:#16294a;border-color:#c9a24a;}
#etb-aud .ea-catpill i{font-style:normal;opacity:.62;margin-left:6px;font-size:.72em;font-weight:500;}

/* ---------- the collection pill is a menu button ----------
   On a phone it opens the contents list as a drawer. Without a caret it read
   as a filter chip and nothing suggested it opened anything. It flips when
   the drawer is open. Only rendered on mobile, where the drawer exists. */
#etb-aud .ea-catpill .ea-caret{
  display:inline-block;margin-left:.4rem;font-size:.78em;line-height:1;
  opacity:.8;transition:transform .18s ease;
}
#etb-aud .ea-catpill[aria-expanded="true"] .ea-caret{transform:rotate(180deg);opacity:1;}
@media(prefers-reduced-motion:reduce){#etb-aud .ea-catpill .ea-caret{transition:none;}}

/* Ten parts fit on a wide screen, so let them wrap rather than scroll —
   nothing hides off the right edge. Below 900px the strip goes back to a
   single scrolling row, which is what a phone wants. */
@media(min-width:901px){
  #etb-aud .ea-catbar{flex-wrap:wrap;overflow-x:visible;row-gap:7px;padding:.6rem 1.25rem;}
}

#etb-aud .ea-scrim{position:fixed;inset:0;background:rgba(26,46,74,.45);z-index:44;opacity:0;transition:opacity .22s ease;}
#etb-aud .ea-scrim.on{opacity:1;}
#etb-aud .ea-drawer-head{display:none;}

/* ---------- toolbar ---------- */
#etb-aud .ea-bar{
  position:sticky;top:var(--catbarh,46px);z-index:30;background:rgba(244,239,228,.96);
  backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--rule);
}
#etb-aud .ea-bar-in{
  max-width:1180px;margin:0 auto;padding:.7rem 1.5rem;
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
}
#etb-aud .ea-chip{
  font-family:var(--fs-ui);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem .7rem;border:1px solid var(--rule);border-radius:2px;color:var(--muted);
  background:var(--paper);white-space:nowrap;
}
#etb-aud .ea-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--gold-soft);}
#etb-aud .ea-chip.install{
  margin-left:auto;border-color:var(--gold);color:var(--navy);
  background:rgba(200,164,92,.18);font-weight:600;
}
#etb-aud .ea-chip.install:hover{background:rgba(200,164,92,.32);}
/* The sidebar is always on screen above 900px, so the drawer button has
   nothing to open there. */
@media(min-width:901px){ #etb-aud #eaMenu{display:none;} }

/* ---------- queue strip ---------- */
#etb-aud .ea-queue{max-width:1180px;margin:0 auto;padding:0 1.5rem;}
#etb-aud .ea-queue-in{
  display:none;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin-top:.8rem;padding:.6rem .85rem;
  background:var(--navy-deep);color:var(--paper);border-left:3px solid var(--gold);
}
#etb-aud .ea-queue-in.on{display:flex;}
#etb-aud .ea-queue-label{font-family:var(--fs-ui);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);}
#etb-aud .ea-queue-now{flex:1 1 200px;font-size:.95rem;color:rgba(255,255,255,.85);}
#etb-aud .ea-qbtn{
  font-family:var(--fs-ui);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.3);padding:.32rem .6rem;color:#fff;
}
#etb-aud .ea-qbtn:hover{border-color:var(--gold);color:var(--gold-soft);}

/* ---------- layout ---------- */
#etb-aud .ea-wrap{
  max-width:1180px;margin:0 auto;padding:1.6rem 1.5rem 0;
  display:grid;grid-template-columns:255px 1fr;gap:2.2rem;align-items:start;
}

/* ---------- part index ---------- */
#etb-aud .ea-aside{position:sticky;top:calc(var(--barh,56px) + 14px);
  max-height:calc(100vh - var(--barh,56px) - 30px);overflow:auto;}
#etb-aud .ea-cat{
  font-family:var(--fs-ui);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);background:var(--navy);margin:0 0 .5rem;
  padding:.42rem .6rem;border-left:3px solid var(--gold);
  display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
}
#etb-aud .ea-cat span{color:rgba(255,255,255,.55);letter-spacing:.08em;}
#etb-aud .ea-ser{
  display:block;width:100%;text-align:left;padding:.4rem .55rem;
  border-left:2px solid transparent;color:var(--ink);font-size:.95rem;line-height:1.2;
}
#etb-aud .ea-ser:hover{background:rgba(14,36,64,.05);}
#etb-aud .ea-ser[aria-current="true"]{border-left-color:var(--gold);background:rgba(200,164,92,.14);font-weight:600;}
#etb-aud .ea-ser-meta{
  display:block;font-family:var(--fs-ui);font-size:.6rem;letter-spacing:.06em;
  color:var(--muted);margin-top:.12rem;line-height:1.2;
}
#etb-aud .ea-ser-bar{display:block;height:2px;background:var(--rule);margin-top:.3rem;font-size:0;line-height:0;}
#etb-aud .ea-ser-bar i{display:block;height:2px;background:var(--gold);}

/* ============================================================
   THE PLAYER — the one real departure from the video app.
   Audio is listened to while you keep reading, so the transport
   never scrolls away: a rail under the toolbar on desktop, a
   fixed deck at the bottom of the screen on a phone.
   ============================================================ */
#etb-aud .ea-deck{
  position:sticky;top:var(--barh,56px);z-index:24;
  background:var(--navy-deep);color:var(--paper);
  border-left:3px solid var(--gold);
  margin-bottom:1.3rem;padding:.7rem .95rem .8rem;
  box-shadow:0 3px 12px rgba(26,46,74,.22);
}
#etb-aud:not(.has-audio) .ea-deck{
  background:var(--navy-deep);box-shadow:none;
}
#etb-aud .ea-deck-top{display:flex;align-items:center;gap:.8rem;min-width:0;}
#etb-aud .ea-deck-thumb{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  display:grid;place-items:center;color:var(--gold-soft);
}
#etb-aud .ea-deck-thumb svg{width:20px;height:20px;display:block;}
#etb-aud .ea-deck-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
#etb-aud .ea-deck-kicker{
  font-family:var(--fs-ui);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
#etb-aud .ea-deck-title{
  font-family:var(--fs-display);font-weight:600;font-size:1.18rem;color:#fff;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#etb-aud .ea-deck-sub{
  font-family:var(--fs-ui);font-size:.72rem;color:rgba(255,255,255,.6);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#etb-aud .ea-deck-x{
  flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);font-size:.95rem;line-height:1;
}
#etb-aud .ea-deck-x:hover{background:rgba(163,58,46,.8);color:#fff;}
#etb-aud:not(.has-audio) .ea-deck-x{display:none;}

/* transport row */
#etb-aud .ea-deck-ctl{display:flex;align-items:center;gap:.5rem;margin-top:.65rem;flex-wrap:wrap;}
#etb-aud .ea-tbtn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.22);
}
#etb-aud .ea-tbtn:hover{border-color:var(--gold);color:var(--gold-soft);}
#etb-aud .ea-tbtn svg{width:17px;height:17px;display:block;fill:currentColor;}
#etb-aud .ea-tbtn.big{width:46px;height:46px;background:var(--gold);border-color:var(--gold);color:#16294a;}
#etb-aud .ea-tbtn.big:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:#16294a;}
#etb-aud .ea-tbtn.big svg{width:20px;height:20px;}
#etb-aud .ea-tbtn[disabled]{opacity:.32;cursor:default;}
#etb-aud .ea-tbtn[disabled]:hover{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.85);}
#etb-aud .ea-skip{font-family:var(--fs-ui);font-size:.58rem;font-weight:600;letter-spacing:.02em;}

#etb-aud .ea-rate{
  font-family:var(--fs-ui);font-size:.64rem;letter-spacing:.08em;
  border:1px solid rgba(255,255,255,.25);padding:.34rem .5rem;color:rgba(255,255,255,.85);
  border-radius:2px;margin-left:auto;
}
#etb-aud .ea-rate:hover{border-color:var(--gold);color:var(--gold-soft);}
#etb-aud .ea-rate.on{background:var(--gold);border-color:var(--gold);color:#16294a;}

/* seek */
#etb-aud .ea-seek{display:flex;align-items:center;gap:.6rem;margin-top:.6rem;}
#etb-aud .ea-time{
  font-family:var(--fs-ui);font-size:.64rem;letter-spacing:.06em;
  color:rgba(255,255,255,.6);min-width:3.1rem;font-variant-numeric:tabular-nums;
}
#etb-aud .ea-time.end{text-align:right;}
#etb-aud .ea-track{
  flex:1 1 auto;position:relative;height:16px;display:flex;align-items:center;cursor:pointer;
}
#etb-aud .ea-track .rail{position:absolute;left:0;right:0;height:4px;background:rgba(255,255,255,.18);}
#etb-aud .ea-track .buf{position:absolute;left:0;height:4px;background:rgba(255,255,255,.28);width:0;}
#etb-aud .ea-track .fill{position:absolute;left:0;height:4px;background:var(--gold);width:0;}
#etb-aud .ea-track .knob{
  position:absolute;width:11px;height:11px;background:var(--gold);
  border:1px solid var(--navy-deep);left:0;transform:translateX(-50%);
}
#etb-aud:not(.has-audio) .ea-seek{opacity:.35;pointer-events:none;}
#etb-aud:not(.has-audio) .ea-deck-ctl .ea-rate{opacity:.35;pointer-events:none;}

/* ---------- part head ---------- */
#etb-aud .ea-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:0 0 .5rem;}
#etb-aud .ea-head h2{font-family:var(--fs-display);font-weight:700;font-size:1.4rem;margin:0;line-height:1.2;}
#etb-aud .ea-head span{font-family:var(--fs-ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
#etb-aud .ea-stage-line{
  font-family:var(--fs-ui);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 1rem;
}
#etb-aud .ea-sub{
  font-family:var(--fs-ui);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:1.6rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--rule);
}
#etb-aud .ea-docs{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1.1rem;}
#etb-aud .ea-doc{
  font-family:var(--fs-ui);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.3rem .55rem;color:var(--navy);text-decoration:none;
  background:var(--paper);border-radius:2px;display:inline-flex;align-items:center;gap:.4rem;line-height:1;
}
#etb-aud .ea-doc:hover{border-color:var(--gold);background:rgba(200,164,92,.14);}
#etb-aud .ea-doc svg{flex:0 0 auto;width:13px;height:15px;display:block;}
#etb-aud .ea-doc.pending{opacity:.5;border-style:dashed;cursor:default;}

/* ---------- the lesson spine ---------- */
#etb-aud .ea-list{list-style:none;margin:0;padding:0 0 0 1.4rem;position:relative;}
#etb-aud .ea-list::before{content:"";position:absolute;left:0;top:.9rem;bottom:.9rem;width:1px;background:var(--rule);}
#etb-aud .ea-row{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:.9rem;align-items:start;
  padding:.55rem .6rem .55rem 0;border-bottom:1px solid rgba(14,36,64,.07);position:relative;
}
#etb-aud .ea-row::before{content:"";position:absolute;left:-1.4rem;top:1.2rem;width:.85rem;height:1px;background:var(--rule);}
#etb-aud .ea-row.playing{background:rgba(200,164,92,.16);}
#etb-aud .ea-row.done .ea-title{color:var(--muted);}
#etb-aud .ea-stone{
  position:absolute;left:calc(-1.4rem - 5px);top:1.2rem;transform:translateY(-50%);
  width:11px;height:11px;background:var(--parchment);border:1px solid var(--navy);
}
#etb-aud .ea-row.done .ea-stone{background:var(--gold);border-color:var(--gold);}
#etb-aud .ea-row.playing .ea-stone{background:var(--navy);border-color:var(--navy);}
#etb-aud .ea-num{font-family:var(--fs-ui);font-size:.72rem;color:var(--muted);min-width:2.4rem;letter-spacing:.06em;padding-top:.28rem;}
#etb-aud .ea-play{text-align:left;min-width:0;}
#etb-aud .ea-title{font-size:1.02rem;line-height:1.3;}
/* provisional: the block heading standing in for a lesson title */
#etb-aud .ea-title.prov{color:var(--muted);font-style:italic;font-size:.9rem;}
#etb-aud .ea-ref.prov-note{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:.75;}
#etb-aud .ea-play:hover .ea-title{color:var(--navy);text-decoration:underline;text-underline-offset:3px;}
#etb-aud .ea-ref{
  display:block;font-family:var(--fs-ui);font-size:.68rem;color:var(--muted);
  margin-top:.1rem;line-height:1.3;
}
#etb-aud .ea-resume{
  display:block;font-family:var(--fs-ui);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-top:.15rem;
}
#etb-aud .ea-dur{
  font-family:var(--fs-ui);font-size:.72rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:.28rem;
}
#etb-aud .ea-acts{display:flex;gap:.3rem;align-items:center;margin-top:-.12rem;}
#etb-aud .ea-act{
  width:38px;height:38px;display:grid;place-items:center;color:var(--muted);
  font-family:var(--fs-ui);font-size:1.06rem;line-height:1;border:1px solid transparent;border-radius:2px;
}
#etb-aud .ea-act:hover{border-color:var(--rule);color:var(--navy);}
#etb-aud .ea-act[aria-pressed="true"],#etb-aud .ea-act.on{color:var(--gold);border-color:rgba(200,164,92,.5);}
#etb-aud .ea-act.busy{color:var(--gold);border-color:rgba(200,164,92,.5);animation:ea-pulse 1.1s ease-in-out infinite;}
@keyframes ea-pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* a lesson held on the device gets a filled gold ring on its stone */
#etb-aud .ea-row.saved .ea-stone{box-shadow:0 0 0 2px rgba(184,146,42,.55);}
#etb-aud .ea-getbar .lbl{font-family:var(--fs-ui);font-size:.6rem;letter-spacing:.08em;color:var(--muted);white-space:nowrap;}

/* lesson note panel */
#etb-aud .ea-note{
  grid-column:2 / -1;margin:.5rem 0 .3rem;padding:.65rem .85rem;
  background:var(--paper);border-left:2px solid var(--gold);font-size:.95rem;
}
#etb-aud .ea-note p{margin:0 0 .4rem;}
#etb-aud .ea-note ul{margin:.2rem 0 0;padding-left:1.1rem;}
#etb-aud .ea-note li{margin:.15rem 0;}
#etb-aud .ea-note-k{font-family:var(--fs-ui);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
#etb-aud .ea-note .focus{font-style:italic;color:var(--navy);}

/* progress + storage */
#etb-aud .ea-store{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin-top:.8rem;padding:.55rem .8rem;background:var(--paper);border-left:3px solid var(--gold);
}
#etb-aud .ea-store-bar{flex:1 1 140px;height:4px;background:var(--rule);min-width:100px;}
#etb-aud .ea-store-bar i{display:block;height:100%;background:var(--gold);}
#etb-aud .ea-store-txt{font-family:var(--fs-ui);font-size:.66rem;letter-spacing:.08em;color:var(--muted);}
#etb-aud .ea-getbar{grid-column:2 / -1;display:flex;align-items:center;gap:.6rem;margin-top:.4rem;}
#etb-aud .ea-getbar .t{flex:1 1 auto;height:3px;background:var(--rule);}
#etb-aud .ea-getbar .t i{display:block;height:100%;background:var(--gold);transition:width .2s;}
#etb-aud .ea-getbar span{font-family:var(--fs-ui);font-size:.6rem;letter-spacing:.08em;color:var(--muted);white-space:nowrap;}

#etb-aud .ea-offline{
  max-width:1180px;margin:.8rem auto 0;padding:.55rem .9rem;
  background:#fdf3d8;border-left:3px solid var(--gold);color:#6b5410;
  font-family:var(--fs-ui);font-size:.72rem;font-weight:600;letter-spacing:.04em;
}

/* ---------- states ---------- */
#etb-aud .ea-msg{padding:2.5rem 0;color:var(--muted);text-align:center;font-size:1rem;}
#etb-aud .ea-msg b{display:block;font-family:var(--fs-display);font-size:1.3rem;color:var(--ink);margin-bottom:.3rem;font-weight:600;}
@media(prefers-reduced-motion:reduce){#etb-aud *{transition:none !important;animation:none !important;}}

/* ============================================================
   MOBILE — the transport leaves the flow and becomes a deck
   pinned to the bottom edge, so it survives scrolling a
   thirty-eight lesson list.
   ============================================================ */
@media(max-width:900px){
  #etb-aud{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));}
  #etb-aud .ea-wrap{grid-template-columns:1fr;gap:1.1rem;padding:1rem 1rem 0;}
  #etb-aud .ea-mast{position:sticky;top:0;z-index:34;padding:.75rem 1rem;}
  #etb-aud .ea-catbar{top:var(--masth,64px);padding:.45rem .5rem;gap:5px;}
  #etb-aud .ea-bar{top:calc(var(--masth,64px) + var(--catbarh,40px));}
  #etb-aud .ea-catpill{padding:6px 11px;font-size:.72rem;}
  #etb-aud .ea-badge{width:40px;height:40px;}
  #etb-aud .ea-badge svg{width:20px;}
  #etb-aud .ea-mast h1{font-size:1.35rem;}
  #etb-aud .ea-eyebrow{font-size:.66rem;margin-top:.2rem;}
  #etb-aud .ea-stats{font-size:.6rem;margin-top:3px;}
  #etb-aud.scrolled .ea-mast{padding:.4rem 1rem;}
  #etb-aud.scrolled .ea-badge{width:30px;height:30px;}
  #etb-aud.scrolled .ea-badge svg{width:16px;}
  #etb-aud.scrolled .ea-mast h1{font-size:1.05rem;}
  #etb-aud.scrolled .ea-eyebrow,#etb-aud.scrolled .ea-stats{display:none;}

  /* the deck detaches and pins to the bottom */
  #etb-aud .ea-deck{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:46;
    margin:0;border-left:0;border-top:2px solid var(--gold);
    padding:.55rem .8rem calc(.6rem + env(safe-area-inset-bottom,0px));
    box-shadow:0 -4px 16px rgba(26,46,74,.32);
  }
  #etb-aud:not(.has-audio) .ea-deck{transform:translateY(102%);transition:transform .2s ease;}
  #etb-aud.has-audio .ea-deck{transform:none;}
  #etb-aud .ea-deck-thumb{width:36px;height:36px;}
  #etb-aud .ea-deck-title{font-size:1.02rem;}
  #etb-aud .ea-deck-ctl{margin-top:.5rem;gap:.35rem;justify-content:space-between;}
  #etb-aud .ea-tbtn{width:36px;height:36px;}
  #etb-aud .ea-tbtn.big{width:42px;height:42px;}
  #etb-aud .ea-rate{margin-left:0;}
  #etb-aud .ea-seek{margin-top:.45rem;}

  /* lesson rows stack */
  #etb-aud .ea-row{
    grid-template-columns:auto 1fr auto;padding:.55rem .5rem .5rem 0;
    row-gap:.35rem;column-gap:.7rem;align-items:start;
  }
  #etb-aud .ea-row::before{top:1.2rem;}
  #etb-aud .ea-stone{top:1.2rem;}
  #etb-aud .ea-num{padding-top:.15rem;}
  #etb-aud .ea-dur{padding-top:.2rem;}
  #etb-aud .ea-acts{grid-column:2 / -1;justify-content:flex-start;gap:.15rem;margin-left:-.35rem;}
  #etb-aud .ea-act{width:40px;height:40px;font-size:1.1rem;}
  #etb-aud .ea-list > li:nth-child(odd){background:rgba(26,46,74,.045);}
  #etb-aud .ea-list > li:nth-child(odd) .ea-note{background:var(--parchment);}
  #etb-aud .ea-row{border-bottom:1px solid rgba(26,46,74,.09);}
  #etb-aud .ea-row.playing{background:rgba(184,146,42,.22);}
  #etb-aud .ea-list > li:nth-child(odd).ea-row.playing{background:rgba(184,146,42,.22);}

  /* the aside becomes a drawer */
  #etb-aud .ea-aside{
    position:fixed;top:0;left:0;bottom:0;width:min(84vw,330px);
    max-height:none;z-index:47;background:var(--parchment);
    border-right:3px solid var(--gold);box-shadow:4px 0 22px rgba(26,46,74,.28);
    transform:translateX(-102%);transition:transform .24s ease;
    overflow-y:auto;padding:0 .75rem 1.25rem;
  }
  #etb-aud .ea-aside.open{transform:translateX(0);}
  #etb-aud .ea-drawer-head{
    display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    position:sticky;top:0;background:var(--navy);color:var(--gold-soft);
    margin:0 -.75rem .6rem;padding:.65rem .75rem;
    font-family:var(--fs-ui);font-size:.68rem;font-weight:600;
    letter-spacing:.15em;text-transform:uppercase;
  }
  #etb-aud .ea-drawer-x{color:#fff;font-size:1.5rem;line-height:1;padding:0 .2rem;}
  #etb-aud .ea-cat{display:none;}
  #etb-aud .ea-bar-in{padding:.55rem 1rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  #etb-aud .ea-bar-in::-webkit-scrollbar{display:none;}
  #etb-aud .ea-chip{flex:0 0 auto;}
  #etb-aud .ea-head h2{font-size:1.18rem;}
  #etb-aud .ea-queue{padding:0 1rem;}
}
@media(min-width:901px){#etb-aud .ea-scrim{display:none;}}
@media(prefers-reduced-motion:reduce){#etb-aud .ea-aside{transition:none;}}