/* ============================================================ PRACTICAL ENGINE — shared chrome for guided practicals (D3 + SVG course; TutorAI Academy). Self-contained to this course: relies only on the design-system CSS variables that the chapter already loads (../../css/design.css). A page opts in by adding (the engine does this) and calling Practical.init({...}). The host page supplies ONLY the apparatus + data; everything visual below is generic. ============================================================ */ body.prac{--uis:1; overflow:hidden; /* HUD text-size multiplier (A-/A+) */ /* GREEN is reserved for the Biology course. Re-point the design-system's "result/success" tokens to THIS chemistry course's teal-blue (--cool) so every "correct / useful / conclusion" cue is teal, never green. */ --result:var(--cool); --result-bg:var(--cool-bg); } body.prac .pbtn[hidden]{display:none!important;} /* play/pause swap survives flex/grid */ /* hide any AI tutor chrome the scripts inject; the bar drives them */ body.prac #ai-tutor-floating-pill, body.prac .llm-cog-btn{display:none!important;} /* --- top media-player bar (reuses the lecture player look) --- */ .prac-bar{position:fixed;top:0;left:0;right:0;height:58px;z-index:60;display:flex;align-items:center;gap:12px; padding:0 14px;background:var(--paper-2);border-bottom:1px solid var(--line);box-sizing:border-box;} .prac-bar .pb-back{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink); display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px;flex:none;transition:border-color .12s,transform .12s;} .prac-bar .pb-back:hover{border-color:var(--accent);transform:translateY(-1px);} .prac-titlewrap{display:flex;flex-direction:column;line-height:1.18;min-width:0;flex:none;max-width:24vw;} .prac-title{font-family:"Fraunces",serif;font-weight:600;font-size:calc(15.5px*var(--uis));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .prac-sub{font-family:"JetBrains Mono",monospace;font-size:calc(10px*var(--uis));letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .prac-player{margin:0 auto;display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:4px 10px;} .prac-player .pbtn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:calc(12px*var(--uis));cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .12s,background .12s,border-color .12s;flex:none;} .prac-player .pbtn:hover{transform:translateY(-1px);border-color:var(--accent);} .prac-player .pbtn.play{background:var(--accent);border-color:var(--accent);color:#fff;} .prac-player .pbtn:disabled{opacity:.4;cursor:default;transform:none;} .prac-player .ptrack{width:120px;height:5px;border-radius:5px;background:var(--line);overflow:hidden;cursor:pointer;} .prac-player .pfill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--accent));transition:width .25s;} .prac-player .ptime{font-family:"JetBrains Mono",monospace;font-size:calc(11px*var(--uis));color:var(--muted);min-width:54px;text-align:center;} .prac-tail{display:flex;align-items:center;gap:8px;flex:none;} .prac-toggle{display:flex;align-items:center;gap:6px;font-family:"JetBrains Mono",monospace;font-size:calc(10.5px*var(--uis));color:var(--ink);cursor:pointer;user-select:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:5px 10px;transition:border-color .12s;white-space:nowrap;} .prac-toggle:hover{border-color:var(--accent);} .prac-toggle.on{background:var(--accent);border-color:var(--accent);color:#fff;} .prac-az{display:flex;align-items:center;border:1px solid var(--line);background:var(--paper);border-radius:999px;overflow:hidden;} .prac-az button{border:none;background:transparent;color:var(--ink);font-family:"JetBrains Mono",monospace;font-size:calc(13px*var(--uis));cursor:pointer;padding:5px 9px;} .prac-az button:hover{background:var(--paper-2);} .prac-az span{font-family:"JetBrains Mono",monospace;font-size:calc(9px*var(--uis));color:var(--muted);padding:0 2px;letter-spacing:.04em;} .prac-icbtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:calc(14px*var(--uis));cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .12s,transform .12s;} .prac-icbtn:hover{border-color:var(--accent);transform:translateY(-1px);} @media(max-width:1180px){.prac-player .ptrack{width:80px;} .prac-titlewrap{max-width:16vw;} .prac-toggle{padding:5px 7px;}} /* --- stage layout below the bar --- */ .prac-stage{position:fixed;top:58px;left:0;right:0;bottom:0;display:flex;background:var(--paper);} .prac-scene{flex:1 1 auto;position:relative;display:flex;flex-direction:column;min-width:0;padding:14px 16px 0;box-sizing:border-box;} .prac-scene-bar{display:flex;align-items:baseline;gap:9px;flex:none;white-space:nowrap;overflow:hidden;margin-bottom:8px;} .prac-scene-bar .scene-tag{font-family:"JetBrains Mono",monospace;font-size:calc(10.5px*var(--uis));letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none;} .prac-scene-bar .scene-title{font-family:"Fraunces",serif;font-weight:600;font-size:calc(16px*var(--uis));color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .prac-svgwrap{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;} /* the apparatus SVG sits on a clean even bench background (no washy panel) */ .prac-svgwrap svg{width:auto;height:100%;max-height:100%;max-width:100%;display:block; border:1px solid var(--line);border-radius:14px;margin:0;box-shadow:0 18px 40px -28px rgba(40,25,10,.55);} .prac-caption{flex:none;font-family:"Newsreader",serif;font-size:calc(14px*var(--uis));line-height:1.5;color:var(--ink);margin:9px 2px 0;min-height:1.5em;} .prac-caption b{color:var(--accent-data,var(--accent-deep));} /* controls dock pinned to the bottom of the scene column */ .prac-dock{flex:none;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin:9px 0 12px;} .prac-dock .row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;} .prac-dock .ctrl{flex:1;min-width:150px;} .prac-dock label{display:block;font-family:"JetBrains Mono",monospace;font-size:calc(11px*var(--uis));color:var(--muted);margin-bottom:5px;} .prac-dock label .val{color:var(--accent-data,var(--accent-deep));font-weight:700;} .prac-dock input[type=range]{width:100%;accent-color:var(--accent);} .prac-rec{flex:none;align-self:flex-end;font-family:"JetBrains Mono",monospace;font-size:calc(12px*var(--uis));font-weight:700;letter-spacing:.04em; border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:9px;padding:9px 16px;cursor:pointer;transition:transform .12s,background .12s;white-space:nowrap;} .prac-rec:hover{transform:translateY(-1px);background:var(--accent-deep);} .prac-rec:active{transform:translateY(0);} /* --- live readings strip (compact stats) --- */ .prac-readouts{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;} .prac-ro{flex:1;min-width:74px;background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:7px 10px;text-align:center;} .prac-ro .rk{font-family:"JetBrains Mono",monospace;font-size:calc(9px*var(--uis));letter-spacing:.1em;text-transform:uppercase;color:var(--muted);} .prac-ro .rv{font-family:"JetBrains Mono",monospace;font-size:calc(16px*var(--uis));font-weight:700;color:var(--accent-data,var(--accent-deep));line-height:1.25;} .prac-ro.inv .rv{color:var(--accent-data2,var(--result));} /* --- results / data panel (full height of its side) --- */ .prac-results{flex:none;width:286px;border-left:1px solid var(--line);background:var(--paper-2);box-sizing:border-box; display:flex;flex-direction:column;padding:12px 12px 0;overflow:hidden;} .prac-results .pr-hd{font-family:"JetBrains Mono",monospace;font-size:calc(11px*var(--uis));letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none;margin-bottom:8px;} .prac-tablewrap{flex:1 1 auto;min-height:40px;overflow-y:auto;border:1px solid var(--line);border-radius:9px;background:var(--paper);} .prac-table{border-collapse:collapse;width:100%;font-family:"JetBrains Mono",monospace;font-size:calc(11.5px*var(--uis));} .prac-table th{position:sticky;top:0;background:var(--cool);color:#fff;font-size:calc(9.5px*var(--uis));letter-spacing:.04em;text-transform:uppercase;padding:6px 8px;text-align:right;} .prac-table th:first-child{text-align:center;} .prac-table td{border-top:1px solid var(--line);padding:5px 8px;text-align:right;color:var(--ink);} .prac-table td:first-child{text-align:center;color:var(--muted);} .prac-table tr:last-child td{background:color-mix(in srgb,var(--gold) 16%,transparent);} .prac-empty{padding:16px 10px;text-align:center;color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:calc(11px*var(--uis));line-height:1.5;} /* predict question card */ .prac-predict{flex:0 1 auto;min-height:0;overflow-y:auto;margin-top:10px;background:var(--cool-bg);border:1px solid var(--line);border-radius:10px;padding:10px 11px;} .prac-predict .pp-q{font-family:"Newsreader",serif;font-size:calc(13px*var(--uis));line-height:1.4;color:var(--ink);margin-bottom:7px;} .prac-predict .pp-q b{color:var(--accent-data,var(--accent-deep));} .prac-predict .pp-opts{display:flex;flex-direction:column;gap:5px;} .prac-predict .pp-opt{font-family:"JetBrains Mono",monospace;font-size:calc(11.5px*var(--uis));text-align:left;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:7px;padding:6px 9px;cursor:pointer;transition:border-color .12s,background .12s;} .prac-predict .pp-opt:hover{border-color:var(--accent);} .prac-predict .pp-opt.right{background:color-mix(in srgb,var(--result) 16%,transparent);border-color:var(--result);color:var(--result);font-weight:700;} .prac-predict .pp-opt.wrong{background:color-mix(in srgb,var(--accent) 13%,transparent);border-color:var(--accent);color:var(--accent-deep);} .prac-predict .pp-fb{font-family:"Newsreader",serif;font-size:calc(12.5px*var(--uis));line-height:1.4;margin-top:7px;color:var(--ink);display:none;} .prac-predict .pp-fb.show{display:block;} .prac-predict .pp-fb b{color:var(--result);} /* --- Plot button + mini P-V graph PINNED at the bottom --- */ .prac-plotbtn{flex:none;margin-top:10px;font-family:"JetBrains Mono",monospace;font-size:calc(12px*var(--uis));font-weight:700;letter-spacing:.04em; border:1px solid var(--cool);background:var(--cool);color:#fff;border-radius:9px;padding:9px 12px;cursor:pointer;transition:transform .12s,background .12s,opacity .12s;width:100%;} .prac-plotbtn:hover:not(:disabled){transform:translateY(-1px);} .prac-plotbtn:disabled{opacity:.5;cursor:not-allowed;background:color-mix(in srgb,var(--cool) 55%,var(--paper-2));border-color:var(--line);color:var(--ink);} .prac-guardhint{flex:none;font-family:"JetBrains Mono",monospace;font-size:calc(9.5px*var(--uis));color:var(--muted);text-align:center;margin-top:5px;min-height:1.2em;} .prac-graph{flex:none;margin:9px 0 12px;} .prac-graph .pg-hd{font-family:"JetBrains Mono",monospace;font-size:calc(9.5px*var(--uis));letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between;align-items:center;} .prac-graph .pg-expand{font-family:"JetBrains Mono",monospace;font-size:calc(9px*var(--uis));border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:6px;padding:3px 7px;cursor:pointer;text-transform:none;letter-spacing:0;} .prac-graph .pg-expand:hover{border-color:var(--accent);} .prac-graph svg{width:100%;height:clamp(150px,22vh,210px);background:var(--paper-2);border:1px solid var(--line);border-radius:9px;display:block;} .prac-conclusion{flex:0 1 auto;min-height:0;overflow-y:auto;margin:8px 0 12px;background:var(--result-bg);border:1px solid var(--line);border-left:5px solid var(--result);border-radius:9px;padding:9px 11px;font-family:"Newsreader",serif;font-size:calc(12.5px*var(--uis));line-height:1.45;color:var(--ink);display:none;} .prac-conclusion.show{display:block;} .prac-conclusion b{color:var(--result);} @media(max-width:980px){.prac-results{width:236px;}} /* --- expanded large graph modal --- */ .prac-modal{position:fixed;inset:0;z-index:120;background:rgba(20,12,4,.66);display:none;align-items:center;justify-content:center;padding:24px;} .prac-modal.show{display:flex;} .prac-modal-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px -30px rgba(20,12,4,.8); width:min(820px,94vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;} .prac-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid var(--line);} .prac-modal-hd .mt{font-family:"Fraunces",serif;font-weight:600;font-size:calc(18px*var(--uis));color:var(--ink);} .prac-modal-hd .mx{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font-size:16px;cursor:pointer;} .prac-modal-hd .mx:hover{border-color:var(--accent);} .prac-modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px;overflow:auto;} .prac-modal-body svg{width:100%;height:min(56vh,460px);background:var(--paper-2);border:1px solid var(--line);border-radius:12px;display:block;} .prac-modal-read{font-family:"JetBrains Mono",monospace;font-size:calc(13px*var(--uis));color:var(--ink);text-align:center;min-height:1.4em;} .prac-modal-read b{color:var(--accent-data,var(--accent-deep));} /* --- guided-demo overlays: cursor, spotlight, bubble --- */ .prac-cursor{position:fixed;z-index:90;width:26px;height:26px;left:0;top:0;pointer-events:none; transition:left var(--curT,1.2s) cubic-bezier(.5,.05,.3,1), top var(--curT,1.2s) cubic-bezier(.5,.05,.3,1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));opacity:0;} .prac-cursor.show{opacity:1;} .prac-cursor svg{width:100%;height:100%;display:block;} .prac-ripple{position:fixed;z-index:89;border:2px solid var(--gold);border-radius:50%;pointer-events:none; width:14px;height:14px;margin:-7px 0 0 -7px;opacity:0;} .prac-ripple.go{animation:pracRipple .55s ease-out;} @keyframes pracRipple{0%{opacity:.9;transform:scale(.3);}100%{opacity:0;transform:scale(3.4);}} .prac-spot{position:fixed;z-index:80;border:2.5px solid var(--gold);border-radius:12px;pointer-events:none; box-shadow:0 0 0 9999px rgba(20,12,4,.52);opacity:0; transition:left .4s ease,top .4s ease,width .4s ease,height .4s ease,opacity .3s ease;} .prac-spot.show{opacity:1;} .prac-bubble{position:fixed;z-index:88;max-width:312px;background:var(--paper);border:1px solid var(--line); border-left:5px solid var(--accent);border-radius:11px;padding:11px 13px; box-shadow:0 16px 40px -16px rgba(40,25,10,.65);opacity:0;transform:translateY(4px); transition:opacity .28s ease,transform .28s ease;font-size:calc(13px*var(--uis));} .prac-bubble.show{opacity:1;transform:none;} .prac-bubble .bb-title{font-family:"Fraunces",serif;font-weight:600;font-size:calc(14.5px*var(--uis));color:var(--accent-data,var(--accent-deep));margin-bottom:4px;} .prac-bubble .bb-body{font-family:"Newsreader",serif;font-size:calc(13.5px*var(--uis));line-height:1.45;color:var(--ink);} .prac-bubble .bb-body b{color:var(--accent-data,var(--accent-deep));} .prac-bubble.cc-off .bb-body{display:none;} .prac-bubble .bb-arrow{position:absolute;width:14px;height:14px;background:var(--paper);border:1px solid var(--line);transform:rotate(45deg);} .prac-bubble .bb-next{margin-top:9px;font-family:"JetBrains Mono",monospace;font-size:calc(11.5px*var(--uis));font-weight:700; border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:8px;padding:6px 13px;cursor:pointer;display:none;} .prac-bubble .bb-next:hover{background:var(--accent-deep);} .prac-bubble.stepmode .bb-next{display:inline-block;} .prac-hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:70;font-family:"JetBrains Mono",monospace; font-size:calc(10.5px*var(--uis));color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 14px;opacity:.92;}