/* Purposeful teaching drawings: readable labels, reflowing text equivalents and native controls. */
.visual-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.visual-card { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:22px; border:1px solid var(--line-2); border-radius:var(--r-m); background:var(--sheet); color:var(--ink); text-decoration:none; }
.visual-card:hover { border-color:var(--tray); background:var(--tray-soft); }
.visual-card p { margin:0; }
.visual-card-number { font:600 var(--f-4)/1 var(--sans); color:var(--tray); }
.visual-card-action { margin-top:auto; font-weight:650; color:var(--tray); }
.visual-activity { max-width:840px; overflow-wrap:anywhere; }
.visual-activity > section { margin:24px 0; }
.visual-objective { border-inline-start:4px solid var(--tray); padding-inline-start:12px; margin:16px 0; }
.visual-use-note { font-size:var(--f-1); color:var(--ink-2); margin:14px 0; }
.visual-figure { margin:14px 0; padding:20px; border:1px solid var(--line-2); border-radius:var(--r-m); background:var(--sheet); }
.visual-figure figcaption { font-size:var(--f-3); font-weight:650; margin-bottom:16px; color:var(--ink); }
.visual-rx { border:2px solid var(--ink-2); border-radius:4px; padding:18px; background:var(--sheet-2); }
.visual-stamp { font-size:var(--f-0); font-weight:750; letter-spacing:.05em; border-bottom:1px dashed var(--ink-3); padding-bottom:10px; margin-bottom:12px; color:var(--caution); }
.visual-rx-field { display:flex; align-items:flex-start; gap:12px; width:100%; text-align:start; margin:12px 0 0; padding:14px 10px; background:var(--sheet); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-s); font:inherit; cursor:pointer; }
.visual-rx-field small { display:block; margin-top:4px; font-size:var(--f-1); color:var(--ink-2); }
.visual-letter { display:inline-grid; place-items:center; min-width:32px; height:32px; flex-shrink:0; border:1px solid var(--tray); border-radius:50%; color:var(--tray); font-weight:700; }
.visual-feedback { padding:14px; border-inline-start:4px solid var(--tray); background:var(--tray-soft); color:var(--ink); margin:16px 0 0; min-height:3.5em; }
.visual-rx-field[aria-pressed=true],.visual-spots button[aria-pressed=true] { outline:2px solid var(--tray); outline-offset:1px; background:var(--tray-soft); }
.visual-text { border:1px solid var(--line-2); border-radius:var(--r-s); padding:0 16px; margin:18px 0; background:var(--sheet); }
.visual-text summary,.visual-figure summary { padding:14px 0; min-height:44px; font-weight:600; cursor:pointer; }
.visual-text > div { padding-bottom:12px; }
.visual-text p { margin:10px 0; }
.visual-explanation p { margin-top:10px; }
.visual-equation { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; padding:24px 8px; margin:18px 0; border-block:1px solid var(--line-2); font-size:var(--f-4); font-weight:600; line-height:1.5; }
.visual-equation > span,.visual-equation > strong { white-space:nowrap; }
.visual-fraction { display:inline-flex; flex-direction:column; text-align:center; }
.visual-fraction > span:first-child { border-bottom:2px solid var(--ink); padding:0 10px 4px; }
.visual-fraction > span:last-child { padding:4px 10px 0; }
.visual-cancel { text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--caution); }
.visual-steps { padding-inline-start:25px; }
.visual-steps li { margin:10px 0; padding-inline-start:4px; }
.visual-device { max-width:300px; margin:0 auto 14px; }
.visual-device svg { display:block; width:100%; height:auto; max-width:none; max-height:none; overflow:visible; }
.visual-device svg text { font-family:var(--sans); font-size:18px; fill:var(--ink); stroke:none; }
.visual-svg-barrel { fill:var(--sheet-2); stroke:var(--ink-2); stroke-width:2; }
.visual-svg-liquid { fill:var(--tray-soft); stroke:none; }
.visual-svg-rod { fill:var(--line-2); stroke:var(--ink-2); stroke-width:1; }
.visual-svg-plunger { fill:var(--ink); }
.visual-svg-line,.visual-svg-ticks { stroke:var(--ink-2); stroke-width:2; fill:none; }
.visual-svg-reading { fill:none; stroke:var(--caution); stroke-width:2; }
.visual-device svg .visual-svg-label { font-size:18px; font-weight:650; fill:var(--caution); }
.visual-volume-label { display:block; margin:10px 0; font-weight:600; }
#visual-volume { display:block; width:100%; min-height:44px; margin:0; accent-color:var(--tray); }
.visual-spots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.visual-spots button { display:flex; flex-direction:column; align-items:center; gap:12px; min-height:150px; background:var(--sheet-2); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-s); padding:16px 8px; font:inherit; cursor:pointer; }
.visual-spots strong { font-size:var(--f-5); white-space:nowrap; }
.visual-practice { border:1px solid var(--line-2); border-radius:var(--r-m); padding:20px; background:var(--sheet-2); }
.visual-practice .btn { margin:6px 8px 6px 0; }
.visual-lessons li { margin:10px 0; }
.visual-activity .sources { overflow-wrap:anywhere; }
@media (max-width:600px) { .visual-grid { grid-template-columns:1fr; } .visual-figure { padding:14px; } .visual-rx { padding:12px; } .visual-spots { grid-template-columns:1fr; } .visual-spots button { min-height:80px; flex-direction:row; flex-wrap:wrap; justify-content:space-between; padding:14px; } .visual-spots strong { font-size:var(--f-4); } .visual-rx-field { flex-wrap:wrap; } }
@media print { .visual-figure,.visual-text,.visual-practice { break-inside:avoid; } .visual-practice button { display:none; } .visual-use-note { color:#333; } }