/* Study Book audiobook player (studybook-audio.js), in #sb-audio under each lesson heading. Light parchment look by default, dark below. */
.sba { margin: .6rem 0 1rem; padding: .6rem .8rem .5rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; font-family: var(--sans); }
.sba-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.sba-t { font-weight: 700; color: var(--accent); }
.sba-sel { min-height: 44px; max-width: 100%; padding: 0 .5rem; font: .92rem var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.sba-ch { flex: 1 1 12rem; }
.sba-wave { display: block; width: 100%; height: 40px; margin: .5rem 0 .2rem; color: var(--accent); border-top: 0 solid var(--line); }
.sba-seek { display: flex; align-items: center; gap: .5rem; }
.sba-pos { flex: 1 1 auto; min-height: 44px; margin: 0; accent-color: var(--accent); }
.sba-time { font: .8rem var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
.sba-ctl { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0; }
.sba-b { min-width: 44px; min-height: 44px; padding: 0 .7rem; font: 600 .95rem var(--sans); color: var(--accent); background: transparent; border: 1px solid var(--line); border-radius: 22px; cursor: pointer; }
.sba-play { min-width: 56px; min-height: 56px; border-radius: 50%; font-size: 1.2rem; color: #fff8ee; background: var(--accent); border-color: var(--accent); }
.sba-rate { min-width: 4.5rem; }
.sba-opts { display: flex; align-items: center; justify-content: space-between; gap: .4rem .8rem; flex-wrap: wrap; margin-top: .2rem; }
.sba-tog { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font: 600 .92rem var(--sans); color: var(--ink); cursor: pointer; flex-wrap: wrap; }
.sba-tog input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.sba-tog small { font-weight: 400; color: var(--ink-soft); }
.sba-off { font-size: .85rem; }
.sba-b:disabled { opacity: .6; cursor: default; }
.sba-note { margin: .3rem 0 .1rem; font: .8rem var(--sans); color: var(--ink-soft); }
.sba-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* dark (cinematic) look */
html:not(.light) .sba { background: var(--surface, #17120c); }
html:not(.light) .sba-t { color: var(--gold); }
html:not(.light) .sba-wave { color: var(--gold); border-top-color: rgba(217, 179, 106, .28); }
html:not(.light) .sba-b { color: var(--gold2); }
html:not(.light) .sba-play { background: linear-gradient(180deg, #e6c47f, #c89d52); color: #1a130b; border-color: transparent; }
html:not(.light) .sba-sel { background: rgba(0, 0, 0, .25); color: var(--cream); }
html:not(.light) .sba-pos, html:not(.light) .sba-tog input { accent-color: var(--gold); }
html:not(.light) .sba-tog { color: var(--cream); }
/* guided mode: the block being read gets a soft band with an accent edge (studybook.css adds .sb-cur) */
.sb-cur { box-shadow: inset 3px 0 0 var(--accent); padding-left: .5rem; margin-left: -.5rem; }
html:not(.light) .sb-cur { background: rgba(217, 179, 106, .14); box-shadow: inset 3px 0 0 var(--gold); }
/* mini bar while the player is scrolled away */
.sba-mini { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: .5rem; max-width: calc(100% - 1.2rem); box-sizing: border-box; padding: .3rem .4rem; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 6px 22px var(--shadow, rgba(0,0,0,.25)); font: .85rem var(--sans); }
.sba-mini[hidden], body.sb-sheet-on .sba-mini { display: none; }
.sba-mt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sba-mplay { border-radius: 50%; padding: 0; color: #fff8ee; background: var(--accent); border-color: var(--accent); }
html:not(.light) .sba-mini { background: #17120c; border-color: rgba(217, 179, 106, .35); }
html:not(.light) .sba-mplay { background: linear-gradient(180deg, #e6c47f, #c89d52); color: #1a130b; border-color: transparent; }