/* Additions for the PHP student area (on top of styles.css from the approved mockup). */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.err{color:#7a3550;font-weight:600}
.note.err{border-color:#c98a9e;background:#fbf1f4;color:#7a3550}
form.inline{display:inline}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.linklike:hover{text-decoration:underline}
.grid.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.reader-wrap{border-radius:14px;overflow:hidden;border:1px solid rgba(58,42,96,.15);background:#fff;margin:1rem 0 .4rem}
.reader-wrap iframe{display:block;width:100%;height:80vh;min-height:480px;border:0}
.finish-form .reflect{display:none;margin-top:1rem}
.finish-form.open .reflect{display:block}
.finish-form.open .js-reveal{display:none}
.no-js .finish-form .reflect{display:block}
/* ---------- lesson player (04) ---------- */
.lp{display:grid;grid-template-columns:minmax(10rem,14rem) 1fr;gap:1rem;align-items:start;margin:1rem 0}
.lp-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem;position:sticky;top:1rem}
.lp-toc a{display:block;padding:.45rem .6rem;border-radius:.5rem;text-decoration:none;color:inherit;font-size:.92rem;border:1px solid transparent}
.lp-toc a[aria-current]{background:rgba(120,90,200,.10);border-color:rgba(120,90,200,.35);font-weight:600}
.lp-toc a.seen{opacity:.75}
.lp:not(.js) .lp-item{margin-bottom:1rem}
.lp-item h2{margin-top:.2rem}
.lp-hidden{display:none}
.lp-ctl{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.lp-play{min-width:9.5rem;min-height:2.8rem;font-size:1rem}
.lp-seek{flex:1;min-width:9rem;accent-color:#7a5cc8}
.lp-words,.lp-lyrics,.lp-text{font-size:1.15rem;line-height:1.75}
.lp-lyrics p{margin:0 0 1.1rem}
.lp-words .w{border-radius:.25rem;padding:0 .05rem;transition:background-color .15s,color .15s;cursor:pointer}
.lp-words.timed .w{color:#6b6b78}
.lp-words.timed .w.said{color:#2b2b33}
.lp-words .w.on{background:rgba(212,175,55,.35);color:#1a1a22}
.lp-pick{margin:.8rem 0;border:1px solid #e4e0d6;border-radius:10px;padding:.5rem .8rem}
.lp-pick summary{cursor:pointer;font-weight:600;padding:.2rem 0}
.lp-pick-list{display:flex;flex-direction:column;gap:.3rem;max-height:22rem;overflow:auto;margin-top:.4rem;-webkit-overflow-scrolling:touch}
.lp-pick-o{display:flex;align-items:baseline;gap:.45rem;padding:.35rem .5rem;border-radius:8px;font-size:.93rem;line-height:1.35}
.lp-pick-o:hover{background:#f6f3ec}
.lp-pick-o input{flex:none;transform:translateY(1px)}
.lp-pick-o .muted{font-size:.85rem}
.lp-text h4{margin:1rem 0 .3rem}
.lp-decree{border-top:1px solid #eee;padding-top:.6rem;margin-top:.6rem}
.lp-timer{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.6rem 0;opacity:.85}
.lp-timer-bar{flex-basis:100%;height:3px;background:#eee;border-radius:2px;overflow:hidden}
.lp-timer-bar i{display:block;height:100%;width:0;background:#9b84d6;transition:width 1s linear}
.lp-timer.reached .lp-timer-bar i{background:#c9b6f0}
.lp-bar{grid-column:2;display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.lp-bar .btn{min-height:2.7rem;min-width:7.5rem}
.lp .reader-wrap iframe{width:100%;height:80vh;border:0}
@media (max-width:760px){
 .lp{grid-template-columns:minmax(0,1fr)}
 .lp>*{min-width:0}
 .lp-toc ol{flex-direction:row;overflow-x:auto;position:static;padding-bottom:.3rem;-webkit-overflow-scrolling:touch}
 .lp-toc a{white-space:nowrap;border-color:#e6e6ee;max-width:78vw;overflow:hidden;text-overflow:ellipsis}
 .lp-bar{grid-column:1;position:sticky;bottom:0;background:#fff;padding:.55rem 0 calc(.55rem + env(safe-area-inset-bottom));border-top:1px solid #eee;z-index:5}
 .lp-words,.lp-lyrics,.lp-text{font-size:1.08rem}
}
.lp [hidden]{display:none!important}

.lp-vchoose{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.6rem 0 1rem}
.lp-vchoose [aria-pressed="true"]{background:#2d2a4a;color:#fff;border-color:#2d2a4a}
.lp-variant+.lp-variant{border-top:1px solid #e4e0d6;margin-top:1.2rem;padding-top:.8rem}
.lp-note{font-style:italic;color:#5d5874;margin:.2rem 0 .7rem}
.lp-live{background:#f6f3fb;border-left:3px solid #9b84d6;border-radius:8px;padding:.6rem .8rem;margin:.4rem 0 1rem}
.lp-live p{margin:.2rem 0}
.lp-later,.lp-then{margin-top:.8rem}
.steps-mini{margin:.4rem 0 .6rem 1.2rem;padding:0}.steps-mini li{margin:.25rem 0}.steps-mini li.ok{color:#2e6b3a}

/* music before/after the class + full-screen contemplation loop (t277u) */
.lp-tracks{margin:.4rem 0 .6rem;padding-left:1.4rem}
.lp-track{margin:.25rem 0}
.lp-track.on{font-weight:600}
.lp-ov{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center}
.lp-ov[hidden]{display:none}
.lp-ov-v{width:100%;height:100%;object-fit:contain;background:#000}
.lp-ov-bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:.6rem;align-items:center;justify-content:flex-end;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.55))}
.lp-ov-cap{margin-right:auto;color:#eee;font-size:.9rem;opacity:.85}
.lp-ov-btn{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.45rem .9rem;font-size:.95rem;cursor:pointer}
.lp-ov-btn:hover,.lp-ov-btn:focus{background:rgba(255,255,255,.3)}
html.lp-ov-open,html.lp-ov-open body{overflow:hidden}
@media (max-width:600px){.lp-ov-cap{display:none}.lp-ov-v{object-fit:contain}}

.lp-cd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem .8rem;margin:.6rem 0;padding:.55rem .8rem;border:1px solid rgba(110,70,170,.25);border-radius:10px;background:rgba(110,70,170,.06)}
.lp-cd-t{font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:600;color:#5b3a99}
.lp-cd.done .lp-cd-t{font-size:1rem}
.lp-ov-cd{color:#fff;font-variant-numeric:tabular-nums;font-size:1rem;opacity:.85}
@media (max-width:600px){.lp-cd-t{font-size:1.2rem}}