/* Beebo "Listen" buttons (see assets/listen.js). Self-contained colours so it
   works on both stylesheets the site uses (site.css guides and example.css home). */
.bb-listen{
  --bbl-bg:#FFFFFF; --bbl-ink:#231E18; --bbl-muted:#6E6456; --bbl-line:#E0D2BB;
  --bbl-accent:#E08A2B; --bbl-accent-ink:#8A4F0A; --bbl-soft:#FBEAD1;
  margin:10px 0 14px; font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.45; text-align:left; letter-spacing:normal; text-transform:none;
  max-width:100%;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bb-listen{
    --bbl-bg:#211A12; --bbl-ink:#F4ECDD; --bbl-muted:#B4A892; --bbl-line:#42361F;
    --bbl-accent:#F0A64A; --bbl-accent-ink:#F3B463; --bbl-soft:#2B2113;
  }
}
:root[data-theme="dark"] .bb-listen{
  --bbl-bg:#211A12; --bbl-ink:#F4ECDD; --bbl-muted:#B4A892; --bbl-line:#42361F;
  --bbl-accent:#F0A64A; --bbl-accent-ink:#F3B463; --bbl-soft:#2B2113;
}
.bb-listen-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bb-listen button{
  font:inherit; font-weight:700; cursor:pointer; min-height:40px;
  border-radius:999px; border:1px solid var(--bbl-line);
  background:var(--bbl-bg); color:var(--bbl-ink);
  box-shadow:0 1px 2px rgba(40,30,15,.08);
}
.bb-listen-play{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px 7px 8px;
}
.bb-listen-icon{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--bbl-accent); color:#fff; font-size:11px; letter-spacing:-1px; flex:none;
}
.bb-listen-time{color:var(--bbl-muted); font-weight:600; font-variant-numeric:tabular-nums}
.bb-listen-bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent}
.bb-listen-bar i{display:block; height:100%; width:0; background:var(--bbl-accent); transition:width .25s linear}
.bb-listen-tx{padding:7px 14px; color:var(--bbl-accent-ink) !important; font-weight:600 !important}
.bb-listen button:hover{border-color:var(--bbl-accent)}
.bb-listen button:focus-visible{outline:3px solid var(--bbl-accent); outline-offset:2px}
.bb-listen[data-state="playing"] .bb-listen-play,
.bb-listen[data-state="paused"] .bb-listen-play{background:var(--bbl-soft); border-color:var(--bbl-accent)}
.bb-listen-transcript{
  margin-top:10px; padding:12px 16px; border-radius:14px; border:1px solid var(--bbl-line);
  background:var(--bbl-bg); color:var(--bbl-ink); max-width:68ch;
}
.bb-listen-transcript p{margin:0 0 .5em; color:var(--bbl-ink); font-size:15px}
.bb-listen-transcript p:first-child{font-weight:700}
.bb-listen-transcript p:last-child{margin-bottom:0}
/* keep it tidy inside grids and flex rows */
li > .bb-listen, td > .bb-listen{margin:6px 0}
.help-cards > .bb-listen, .extra-grid > .bb-listen, .steps > .bb-listen{grid-column:1/-1}
@media (prefers-reduced-motion: reduce){
  .bb-listen-bar i{transition:none}
}
@media print{ .bb-listen{display:none} }