/* The listen player built by listen.js, shared by library.html and share.html. */
.lp-bar { position:fixed; top:0; left:0; right:0; height:3px; background:transparent; z-index:5; }
.lp-fill { height:100%; width:0; background:var(--accent); transition:width 0.4s; }
.lp-controls { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; margin-bottom:1.25rem; }
.lp-controls select { font:inherit; font-size:0.8125rem; padding:0.4rem 0.5rem; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg2); color:var(--text); max-width:11rem; }
.lp-controls .lp-status { flex-basis:100%; }
.lp-body { display:grid; grid-template-columns:12rem minmax(0,1fr); gap:2rem; align-items:start; }
.lp-toc { position:sticky; top:1.5rem; max-height:calc(100vh - 3rem); overflow:auto; font-size:0.8125rem; }
.lp-toc ol { list-style:none; counter-reset:ch; }
.lp-toc li { counter-increment:ch; }
.lp-toc a { display:block; padding:0.35rem 0.5rem; border-radius:var(--radius-sm); color:var(--text2); text-decoration:none; }
.lp-toc a::before { content:counter(ch) "  "; color:var(--text3); }
.lp-toc a:hover { color:var(--text); background:var(--bg2); }
.lp-toc small { color:var(--text3); font-size:.85em; white-space:nowrap; }
.lp-text > div.marked { box-shadow: inset 3px 0 0 var(--accent); }
.lp-text > div.found { background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 8px; }
.lp-toc .lp-marks a::before { content:none; }
.lp-toc .lp-marks a { padding:6px 0; border-radius:0; background:none; }
.lp-marks h4 { font-size:13px; font-weight:600; color:var(--text2); margin:24px 0 8px; }
.lp-marks a { display:block; font-size:13px; color:var(--text2); padding:6px 0; border-top:1px solid var(--border); text-decoration:none; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.lp-toc a.on { color:var(--text); background:var(--bg2); font-weight:500; }
.lp-text > div { margin-bottom:0.9rem; padding:0.3rem 0.6rem; margin-left:-0.6rem; margin-right:-0.6rem; border-radius:var(--radius-sm); color:var(--text2); cursor:pointer; scroll-margin:40vh; }
.lp-text > div b { color:var(--text3); font-weight:500; margin-right:0.25rem; }
.lp-text > div.on { background:var(--bg2); color:var(--text); }
.lp-text mark { background:var(--accent); color:var(--bg); border-radius:2px; padding:0 0.1em; }
.lp-text > div > :last-child, .lp-text > div > ul, .lp-text > div > ol { margin:0; }
.lp-text > div ul, .lp-text > div ol { padding-left:1.2rem; }
.lp-text > div h1, .lp-text > div h2, .lp-text > div h3 { font-family:var(--font-display); font-size:1.05rem; color:var(--text); }
.lp-text .lp-loading { color:var(--text3); cursor:default; }
@media (max-width:700px) { .lp-body { grid-template-columns:1fr; } .lp-toc { position:static; max-height:none; } .lp-toc ol { display:flex; flex-wrap:wrap; gap:0.25rem; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }
/* Same control height and capsule as the library, for the shared page. */
.lp-controls button, .lp-controls select { min-height:44px; border-radius:999px; }