/* ============================================================ PML QUIET MODE — additive only. Nothing here applies unless _pml-quiet.js puts .pmlq on , which it only does when the URL carries ?quiet=1. Default site is untouched. ============================================================ */ #qswitch{position:fixed;top:10px;right:12px;z-index:99999;display:inline-flex;gap:2px;padding:3px; border-radius:999px;background:rgba(255,255,255,.94);border:1px solid var(--line,#e3e7f0); box-shadow:0 2px 10px rgba(15,29,58,.12);font-family:inherit} #qswitch button{border:0;background:transparent;border-radius:999px;padding:6px 14px;font-size:12.5px; font-weight:800;color:#5b6680;cursor:pointer} #qswitch button[aria-pressed="true"]{background:#0f1d3a;color:#fff} #qswitch button:focus-visible{outline:2px solid #ff7a3d;outline-offset:2px} #qbar{display:none} html.pmlq #qbar{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:0 130px 0 2px} #qname{border:0;background:transparent;padding:4px 0;font-size:15px;font-weight:800;color:#0f1d3a; cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit} #qname .car{font-size:10px;color:#8d97a8;transition:transform .16s} html.qopen #qname .car{transform:rotate(180deg)} #qname:focus-visible{outline:2px solid #ff7a3d;outline-offset:3px;border-radius:4px} #qseg{flex:1;display:flex;gap:4px;height:4px;min-width:50px} #qseg i{flex:1;border-radius:999px;background:#e3e7f0;cursor:pointer} #qseg i.done{background:#1f9d6e} #qseg i.now{background:#ff7a3d} #qpanel{display:none} html.pmlq.qopen #qpanel{display:block;background:#fff;border:1px solid var(--line,#e3e7f0);border-radius:14px; padding:14px 16px;margin:-8px 0 18px;box-shadow:0 8px 26px rgba(15,29,58,.10)} #qpanel .qh{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#a7b0c0;margin:10px 0 6px} #qpanel .qh:first-child{margin-top:0} #qpanel .pmlfoot{margin-top:8px!important;border-top:0!important;padding-top:0!important} /* the quiet default — every one of these is still reachable inside #qpanel */ html.pmlq .topbar, html.pmlq .ladder, html.pmlq #igcseBoard, html.pmlq .pmlfoot, html.pmlq #lesson-text, html.pmlq .slbl{display:none} html.pmlq.qopen #qpanel .ladder{display:flex} html.pmlq.qopen #qpanel #igcseBoard{display:block} html.pmlq.qopen #qpanel .pmlfoot{display:flex} html.pmlq.qopen #qpanel .qbtns{display:inline-flex;gap:7px} html.pmlq .stage{min-height:0;padding:24px 26px} html.pmlq .rulehd{display:none} html.pmlq details.more{margin-top:14px;opacity:.55;font-size:12.5px} html.pmlq details.more[open]{opacity:1} html.pmlq .wrap{padding-bottom:96px} /* two floating buttons become one */ html.pmlq .qfab{display:none!important} html.pmlq.qtools .qfab{display:block!important} #qtool{display:none} html.pmlq #qtool{display:flex;position:fixed;right:14px;bottom:74px;z-index:9998;width:40px;height:40px; border-radius:999px;border:0;background:#0f1d3a;color:#fff;font-size:17px;cursor:pointer; align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(15,29,58,.28)} html.pmlq.qtools #qtool{background:#ff7a3d} #qtool:focus-visible{outline:2px solid #ff7a3d;outline-offset:3px} @media (prefers-reduced-motion:reduce){#qname .car{transition:none}}