/* Lessons 41–45 use lab.css; this file adds a quote panel, a working list, colour-keyed readouts and phone layouts. */
.ninth-stage{position:relative}
/* A scene button centred just above the point it acts on. */
.ninth-lab .on-graph.mid{transform:translate(-50%,-100%)}
/* lessons 36–40's stylesheet still names the dice demo; keep this lesson's buttons on the scene. */
.lab.ninth-lab[data-demo=dice] .on-graph:not(.centered){position:absolute;display:flex;margin:0}
.ninth-lab .lab-instruction .lab-chips{margin-top:14px}
.ninth-lab .lab-chips>span{white-space:nowrap}
.ninth-notes{margin:16px 30px 0;padding:16px 22px;background:#f3ead6;border-left:4px solid #aa8435;border-radius:4px}
.ninth-notes p{font-size:19px;line-height:1.55;margin:0}
.ninth-notes p+p{margin-top:8px}
.ninth-notes .quote{font-family:var(--serif);font-size:21px}
.ninth-notes .cite{font-size:17px;color:#5f5c4d}
.ninth-notes .verse{font-family:var(--serif);font-size:20px;line-height:1.5}
.ninth-notes .verse span{display:block;color:#8d8775}
.ninth-notes .verse span.on{color:var(--ink)}
.ninth-notes .verse span.now{color:var(--green);font-weight:600}
.ninth-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}
.ninth-working li+li{margin-top:6px}
.ninth-lab .lab-equation output{font-variant-numeric:tabular-nums;overflow-wrap:anywhere;white-space:normal}
.ninth-lab .lab-result .equation{overflow-wrap:anywhere}
/* Colour = identity: each readout box carries the colour of what it measures (set per step from the script). */
.ninth-lab .lab-equation>div.top-green{border-top:4px solid var(--green)}
.ninth-lab .lab-equation>div.top-copper{border-top:4px solid var(--copper)}
.ninth-lab .lab-equation>div.top-gold{border-top:4px solid #aa8435}
.ninth-lab .lab-equation>div.top-ink{border-top:4px solid var(--ink)}
@media(min-width:761px){.lab.ninth-lab .lab-equation{grid-template-columns:var(--cols,minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr))}}
/* Scene text: dark-sky labels and a softer ink for scale numbers. */
.ninth-lab .lab-scene text.on-dark{fill:#f6eed6;stroke:#1f2830}
.ninth-lab .lab-scene .lbl.soft{fill:#5d5a4c}
.ninth-lab .lab-scene .lbl.big{font-size:30px}
.ninth-lab .lab-scene .lbl.mid{font-size:21px}
.ninth-lab .lab-scene .gold{fill:#86651f}
.ninth-lab .lab-scene .pip-label{font-size:22px}
@media(max-width:760px){
 /* Phones get their own narrower scene (600 units wide), so labels are only moderately enlarged. */
 .ninth-lab .lab-scene .lbl{font-size:30px}
 .ninth-lab .lab-scene .lbl.big{font-size:36px}
 .ninth-lab .lab-scene .lbl.mid{font-size:26px}
 .ninth-lab .lab-scene .secondary{display:none}
 .ninth-notes{margin:14px 14px 0;padding:14px 16px}
 .ninth-notes .quote{font-size:19px}
 .ninth-notes .verse{font-size:18px}
 .ninth-working{margin:0 14px 20px;padding:14px 14px 14px 38px;font-size:18px}
 .ninth-lab .lab-equation,.ninth-lab .lab-equation:has(>div[hidden]){grid-template-columns:1fr;gap:6px}
 .ninth-lab .lab-equation .operator{padding:0;text-align:center;font-size:24px;line-height:1}
 .ninth-lab .lab-equation>div{display:flex;justify-content:space-between;align-items:center;gap:12px}
 .ninth-lab .lab-equation .eq-label{max-width:58%}
 .ninth-lab .lab-equation output{text-align:right;font-size:24px}
 /* Pills that point at one spot stay on the scene as icons, with the full text for screen readers. */
 .ninth-lab .on-graph.icon{padding:7px}
 .ninth-lab .on-graph.icon .pill-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}