/* .fourth-lab rules style the shared lab() markup used by lessons 21–35. */
.fourth-lab .lab-scene{max-width:780px;margin:0 auto}
.fourth-stage{position:relative}
.fourth-rule{margin:0 26px 24px;padding:22px;background:#f1eadb;border:1px solid #d2c4a9;border-radius:8px}
.fourth-rule h3{font-size:26px}.fourth-rule p{font-size:19px;line-height:1.55;margin:10px 0}
.rule-candidates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}
.rule-candidates>div{background:#fffaf0;padding:14px;border:1px solid #c9baa0;border-radius:6px;font-size:18px;overflow-wrap:anywhere}
.rule-candidates strong{display:block;font-size:26px;color:var(--green)}
.rule-candidates .not-prime strong{color:var(--copper)}
.fourth-lab .lab-scene .lbl{font-size:28px}
.fourth-lab .lab-scene .lbl-sm{font-size:26px}
.fourth-lab .lab-scene .lbl-big{font-size:36px}
.fourth-lab .lab-instruction .lab-chips{margin-top:16px}
.fourth-lab .lab-equation{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fourth-lab .lab-equation output{font-size:28px;overflow-wrap:anywhere}
.fourth-working{margin:0 26px 24px;padding:18px 20px 18px 44px;font-size:20px;line-height:1.65;background:#f1eadb;border:1px solid #d2c4a9;border-radius:8px}
.fourth-working li+li{margin-top:8px}
.fourth-lab .lab-result .equation{overflow-wrap:anywhere}
@media(max-width:760px){
 .fourth-lab .lab-scene .lbl,.fourth-lab .lab-scene .lbl-sm{font-size:31px}
 .fourth-lab .lab-scene .secondary{display:none}
 .fourth-lab .lab-equation{grid-template-columns:1fr}
 .fourth-lab .lab-equation>div{display:flex;justify-content:space-between;align-items:center;gap:12px}
 .fourth-lab .lab-equation .eq-label{max-width:55%}
 .fourth-lab .lab-equation output{text-align:right;font-size:26px}
 .fourth-working{margin:0 14px 20px;padding:14px 14px 14px 34px}
 .fourth-rule{margin:0 14px 20px;padding:16px}.rule-candidates{grid-template-columns:1fr}
}

/* Lessons 16–20 (class f4): notes, working and scene buttons that sit on the exact spot they act on. */
.f4 .on-graph.at{transform:translate(-50%,-50%)}
.f4 .lab-scene text{font-variant-numeric:lining-nums}
.f4 .lab-scene .f4-digit{font:400 72px var(--serif);fill:#f6f0e0;stroke:none}
.f4 .lab-scene .f4-over{fill:#f0a37c}
.f4-notes{margin:16px 30px 0;padding:16px 22px;background:#f3ead6;border-left:4px solid #aa8435;border-radius:4px}
.f4-notes p{font-size:19px;line-height:1.55;margin:0}
.f4-notes p+p{margin-top:8px}
.f4-notes .f4-quote{font-family:var(--serif);font-size:21px}
.f4-notes .f4-cite{font-size:17px;color:#5f5c4d}
.f4-notes .rule-candidates{margin:14px 0}
.f4-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}
.f4-working li+li{margin-top:6px}
.f4-bowl{position:absolute;transform:translate(-50%,-50%);width:14%;height:24%;min-width:44px;min-height:44px;background:transparent;border:3px solid transparent;border-radius:18px;cursor:pointer;z-index:1}
.f4-bowl:hover{border-color:#c5ad84;background:#fffaf040}
.f4-bowl:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media(max-width:760px){
 .f4 .on-graph.at{padding:7px}
 .f4 .on-graph.at .pill-text{display:none}
 .f4 .lab-scene .f4-desk{display:none}
 /* Phones get a narrow scene (600 units wide), so labels need less enlarging. */
 .f4 .lab-scene svg.f4-narrow .lbl{font-size:30px}
 .f4 .lab-scene svg.f4-narrow .lbl-big{font-size:38px}
 .f4 .lab-scene svg.f4-narrow .f4-digit{font-size:80px}
 /* The readouts stack on phones: each box keeps its label and value on one line, operators between. */
 .f4 .lab-equation,.f4 .lab-equation:has(>div[hidden]){grid-template-columns:1fr;gap:2px}
 .f4 .lab-equation>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px}
 .f4 .lab-equation .eq-label{overflow-wrap:normal}
 .f4 .lab-equation output{font-size:24px;text-align:right}
 .f4 .lab-equation .operator{padding:0;text-align:center;font-size:24px;line-height:1.1}
 .f4-notes{margin:14px 14px 0;padding:14px 16px}
 .f4-notes .f4-quote{font-size:19px}
 .f4-working{margin:0 14px 20px;padding:14px 14px 14px 36px;font-size:19px}
}

/* Long sums (Thabit's divisors) wrap inside their box instead of running into the next one. */
.f4 .lab-equation output{white-space:normal;overflow-wrap:anywhere;min-width:0}
.f4 .lab-equation>div{min-width:0}
