/* Lessons 36–40 (class e8) use lab.css; this file adds notes, working, scene buttons and phone layouts. */
.e8-stage{position:relative}
.e8 .lab-instruction .lab-chips{margin-top:14px}
.e8 .lab-chips>span{white-space:nowrap}
.e8 .lab-scene text{font-variant-numeric:lining-nums tabular-nums}
.e8 .lab-scene .e8-digits{font:400 64px var(--serif);fill:var(--ink)}
.e8 .lab-scene .e8-tick{font-size:20px;font-weight:600;fill:#5d5a4c}
.e8 .lab-scene .e8-tag{font-size:21px;font-weight:700}
.e8 .lab-scene .e8-row{font-size:22px;font-weight:700;fill:#3f3e34}
.e8 .lab-scene .green{fill:var(--green)}.e8 .lab-scene .copper{fill:var(--copper)}.e8 .lab-scene .gold{fill:#86651f}.e8 .lab-scene .slate{fill:#4c5f80}
.e8 .lab-scene .on-dark{fill:#fbf6e7;stroke:#3a3226}
/* Scene buttons that sit on the spot they act on. */
.e8 .on-graph.at{transform:translate(-50%,-50%)}
.e8 .drag-handle.e8-pin{width:40px;height:40px;margin:-20px 0 0 -20px;font-size:17px}
/* Notes: the mathematician's own rule, with its source, beside the moment it applies. */
.e8-notes{margin:16px 30px 0;padding:16px 22px;background:#f3ead6;border-left:4px solid #aa8435;border-radius:4px}
.e8-notes p{font-size:19px;line-height:1.55;margin:0}
.e8-notes p+p{margin-top:8px}
.e8-notes .e8-quote{font-family:var(--serif);font-size:21px}
.e8-notes .e8-cite{font-size:17px;color:#5f5c4d}
.e8-working{margin:0 30px 24px;padding:18px 20px 18px 48px;background:#f1eadb;border:1px solid #d2c4a9;border-radius:8px;font-size:20px;line-height:1.6;font-variant-numeric:tabular-nums}
.e8-working li+li{margin-top:6px}
.e8 .lab-equation output{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;white-space:normal}
.e8 .lab-result .equation{overflow-wrap:anywhere;font-size:32px}
.e8 .digits-agree{color:var(--green);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
/* Colour = identity: each readout box carries the colour of what it measures. */
.e8 .lab-equation>div.top-green{border-top:4px solid var(--green)}
.e8 .lab-equation>div.top-copper{border-top:4px solid var(--copper)}
.e8 .lab-equation>div.top-gold{border-top:4px solid #b08a35}
.e8 .lab-equation>div.top-slate{border-top:4px solid #4c5f80}
@media(min-width:761px){.lab.e8 .lab-equation{grid-template-columns:var(--cols,minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.e8 .on-graph{transition:none}}
@media(max-width:760px){
 /* Phones get a narrow scene (600 units wide), chosen once for the device, so labels need less enlarging. */
 .e8 .lab-scene svg.e8-narrow .lbl{font-size:31px}
 .e8 .lab-scene svg.e8-narrow .e8-digits{font-size:62px}
 .e8 .lab-scene svg.e8-narrow .e8-tick{font-size:28px}
 .e8 .lab-scene svg.e8-narrow .e8-tag{font-size:28px}
 .e8 .lab-scene svg.e8-narrow .e8-row{font-size:30px}
 .e8 .on-graph.at{padding:7px}
 .e8 .on-graph.at .pill-text{display:none}
 .e8 .on-graph.at.e8-labelled{padding:7px 14px 7px 7px}
 .e8 .on-graph.at.e8-labelled .pill-text{display:inline}
 .e8 .drag-handle.e8-pin{width:44px;height:44px;margin:-22px 0 0 -22px}
 .e8-notes{margin:14px 14px 0;padding:14px 16px}
 .e8-notes .e8-quote{font-size:19px}
 .e8-working{margin:0 14px 20px;padding:14px 14px 14px 36px;font-size:19px}
 /* Readouts stack as rows, operators between them, so each value reads on one line. */
 .lab.e8 .lab-equation,.lab.e8 .lab-equation:has(>div[hidden]){grid-template-columns:1fr;gap:4px}
 .e8 .lab-equation>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px}
 .e8 .lab-equation .eq-label{max-width:56%}
 .e8 .lab-equation output{font-size:24px;text-align:right}
 .e8 .lab-equation .operator{padding:0;text-align:center;font-size:24px;line-height:1.1}
 .e8 .lab-result .equation{font-size:25px}
}