/* Guided focus: an explain method walked one screen at a time, and a worked
   example revealed as a complete solution. Chemistry observation colours stay
   inside their figures; the border is a navigation cue only. */
.pr-learn-focus{border-inline-start:4px solid var(--pr-ink-3);padding:1rem 1.25rem;background:var(--pr-sunk);border-radius:4px;margin-block:1rem}
.pr-learn-focus-count{font-weight:600;color:var(--pr-ink-2);font-size:.9rem;margin-top:0}
.pr-learn-focus:focus-visible,.pr-learn-overview summary:focus-visible{outline:3px solid var(--pr-focus);outline-offset:4px}
.pr-learn-overview{margin-block:1.25rem;border-top:1px solid var(--pr-rule);padding-top:.75rem}
.pr-learn-overview summary{cursor:pointer;padding:.5rem;min-height:44px;box-sizing:border-box;font-weight:600}
.pr-learn-overview .pr-learn-steps{margin-top:1rem}
@media(max-width:480px){.pr-learn-focus{padding:.75rem}.pr-learn-focus .pr-learn-figure{margin-inline:0}}

/* One reveal shows the whole solution as numbered, separated steps. The final
   step's result is emphasised with weight and a stronger rule in both themes. */
.pr-learn-solution>h3:focus-visible{outline:3px solid var(--pr-focus);outline-offset:4px}
.pr-learn-worked{list-style:none;margin:1.25rem 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.pr-learn-worked-step{min-width:0;border-inline-start:4px solid var(--pr-rule-2);padding:1rem 1.25rem;background:var(--pr-sunk);border-radius:4px}
.pr-learn-worked-step[data-learn-worked-final]{border-inline-start-color:var(--pr-ink-3)}
.pr-learn-worked-step[data-learn-worked-final] .pr-learn-working{font-weight:600;color:var(--pr-ink)}
.pr-learn-worked-step .pr-learn-worked-action{margin-bottom:.75rem}
.pr-learn-working{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--pr-rule)}
.pr-learn-working>p:last-child{margin-bottom:0}
@media(max-width:480px){.pr-learn-worked-step{padding:.75rem}.pr-learn-worked-step .pr-learn-figure{margin-inline:0}}
/* The compare panel's model drawings on a phone (GENFIT, 2026-09-28): the panel's
   20px side padding left a figure 258px, too narrow for a mechanism or a graph to
   shrink to with its labels still at 14px, so it scrolled. The padding narrows as
   the worked step's does, and a figure also takes half of what is left. */
@media(max-width:480px){.pr-learn-model{padding:.75rem}.pr-learn-model .pr-learn-figure{margin-inline:-.5rem}}

.pr-learn-drawing-ready{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem;min-height:44px;border:1px solid var(--pr-rule-3);border-radius:4px;margin-block:1rem}
.pr-learn-drawing-ready input{margin-top:.3rem;min-width:20px;min-height:20px}

/* The ∝ sign drawn at the text's x-height in the text colour (CODE16; the font
   subset has no ∝ and the borrowed glyph was a third of the text's height).
   learn-render.mjs drawPropSigns wraps each one; the character stays inside
   as .pr-sr for screen readers. */
.pr-prop{display:inline-block;position:relative;width:.8em;height:.54em;margin:0 .06em;vertical-align:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M22.5 2.5C18 2.5 15.5 5.2 12 8.2C9 10.8 7 12.5 5 12.5C2.8 12.5 1.3 10.6 1.3 8S2.8 3.5 5 3.5C7 3.5 9 5.2 12 7.8C15.5 10.8 18 13.5 22.5 13.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M22.5 2.5C18 2.5 15.5 5.2 12 8.2C9 10.8 7 12.5 5 12.5C2.8 12.5 1.3 10.6 1.3 8S2.8 3.5 5 3.5C7 3.5 9 5.2 12 7.8C15.5 10.8 18 13.5 22.5 13.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media (forced-colors:active){.pr-prop{background:CanvasText}}
.pr-learn-feedback-detail{font-weight:600}

/* EQUILIBRIUM SHIFT's prediction buttons (CODE7, 2026-09-23). A student saw a
   prediction button already shaded before choosing. Measured over CDP with a
   real pointer: pressing Back at stage 3 brings the prediction panel back
   where Back was, so the pointer (or, on a phone, the hover a tap leaves
   behind) sits over a prediction button, and the shared .pr-btn:hover filled
   it with --pr-sunk, which is the panel's own colour and reads as "chosen"
   (at 375 and 1280 px the button under the pointer computed
   oklch(0.955 0.008 80) against white for the others). Inside the panel a
   hover now marks the border only, so a filled button always means a pressed
   one. */
.pr-learn-anim .es-guess:hover:not(:disabled){background:var(--pr-sheet);border-color:var(--pr-ink-2)}
.pr-learn-anim .es-guess[aria-pressed="true"]:hover:not(:disabled){background:var(--pr-ink);border-color:var(--pr-ink)}
.pr-learn-anim .es-q:focus{outline:none}
.pr-learn-anim .es-q:focus-visible{outline:3px solid var(--pr-focus);outline-offset:4px}

/* THE FEEDBACK BOX (CODE7, 2026-09-23; design research item 4): the verdict,
   then what the student gave ("You chose: …" / "You wrote: …"), then the
   reason. The student's own words sit back a little, set off by a rule, so the
   reason under them is what reads first after the heading. */
.pr-learn-feedback[data-learn-feedback] .pr-learn-feedback-said{margin:0 0 10px;padding-inline-start:.75rem;border-inline-start:3px solid var(--pr-rule-2);color:var(--pr-ink-2)}
.pr-learn-feedback-typed{overflow-wrap:anywhere}
/* A typed formula echoed as chemistry (COPY2 item 6): the sub/sup stay welded
   to their atom and do not open the line. */
.pr-learn-feedback-typed sub,.pr-learn-feedback-typed sup{font-size:.72em;line-height:0}
.pr-learn-feedback-typed .pr-chem-preview-note{display:block;font-size:.85rem;color:var(--pr-ink-3)}

/* THE SELF-CHECK on a compare block (CODE7): the pressed button is filled and
   ticked, so the choice is visible without relying on colour alone, and the
   saved line sits directly under the buttons. */
.pr-learn-selfcheck{margin-bottom:8px}
.pr-learn-selfcheck .pr-btn[aria-pressed="true"]{background:var(--pr-ink);border-color:var(--pr-ink);color:var(--pr-ink-flip)}
.pr-learn-selfcheck .pr-btn[aria-pressed="true"]:hover:not(:disabled){background:var(--pr-ink-2);border-color:var(--pr-ink-2)}
.pr-learn-selfcheck-tick{display:none;margin-inline-end:.4em;font-weight:700}
.pr-learn-selfcheck [aria-pressed="true"] .pr-learn-selfcheck-tick{display:inline}
.pr-learn-selfcheck-saved{margin:0;min-height:1.5em;color:var(--pr-ink)}
.pr-learn-selfcheck-saved:empty{min-height:0}

/* A PREDICTION on an explain block, and its callback on the teaching that
   answers it (CODE7). Unscored: the radios are a plain native group. */
.pr-learn-predict{margin:1.25rem 0;padding:1rem 1.25rem;border:1px solid var(--pr-rule-2);border-radius:var(--pr-r);background:var(--pr-sunk);min-width:0}
.pr-learn-predict legend{padding:0 .35rem;font-weight:700;color:var(--pr-ink)}
.pr-learn-predict-q>p:first-child{margin-top:0}
.pr-learn-predict-options{display:grid;gap:.5rem;margin:.75rem 0}
.pr-learn-predict-options label{display:flex;gap:.75rem;align-items:flex-start;min-height:44px;box-sizing:border-box;padding:.6rem .75rem;border:1px solid var(--pr-rule-2);border-radius:var(--pr-r);background:var(--pr-sheet);cursor:pointer}
.pr-learn-predict-options input{margin-top:.3rem;min-width:20px;min-height:20px;flex:none;accent-color:var(--pr-ink)}
.pr-learn-predict-options label:has(input:checked){border-color:var(--pr-ink);box-shadow:inset 3px 0 0 var(--pr-ink)}
.pr-learn-predict-options input:focus-visible{outline:3px solid var(--pr-focus);outline-offset:2px}
.pr-learn-predict-said{margin-bottom:0}
.pr-learn-predicted{margin:0 0 1rem;padding:.6rem .85rem;border-inline-start:4px solid var(--pr-ink-3);background:var(--pr-sunk);border-radius:4px;color:var(--pr-ink)}
.pr-learn-predicted-label{font-weight:700}
@media(max-width:480px){.pr-learn-predict{padding:.75rem}}

/* The finish screen's "what happened" list (CODE7). */
.pr-learn-finish-notes{margin:.5rem 0 1.25rem;color:var(--pr-ink-2)}
/* Each row: "Step 9: title" on its own line, then the opening words of the
   question, then what happened (COPY2 item 3). */
.pr-learn-evidence>li{margin-bottom:.6rem}
.pr-learn-evidence>li>strong{display:block}
.pr-learn-evidence-q{display:block;color:var(--pr-ink-2);font-size:.95em}
/* The Practice questions a lesson hands on to (COPY2 items 1, 8, 9): the
   author's description is a line of text, the button under it says what it
   does. Not a list to read as bullets. */
.pr-learn-practice-targets{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.pr-learn-practice-targets p{margin:0 0 8px;color:var(--pr-ink-2)}
.pr-learn-practice-targets .pr-btn{white-space:normal;text-align:left;min-height:44px}
/* A button whose label carries a <sub>/<sup> (COPY2 item 1): the label is one
   inline box, so its subscript stays against its letter. */
.pr-btn-label sub,.pr-btn-label sup{font-size:.72em;line-height:0}
/* The line that replaces Continue on an unanswered exit or review check
   (COPY2 item 10). */
.pr-learn-goon{margin:0;flex:1 1 12rem}

/* THE POINTS TO LOOK FOR on a compare block, each with its own tick box
   (COPY2 item 4). Kept on this device, never sent. */
.pr-learn-criteria{margin:1rem 0;padding:0;border:0;min-width:0}
.pr-learn-criteria legend{padding:0;font-weight:700;color:var(--pr-ink)}
.pr-learn-criteria ul{list-style:none;margin:.5rem 0;padding:0;display:grid;gap:.4rem}
.pr-learn-criteria label{display:flex;gap:.75rem;align-items:flex-start;min-height:44px;box-sizing:border-box;padding:.5rem .6rem;border:1px solid var(--pr-rule-2);border-radius:var(--pr-r);background:var(--pr-sheet);cursor:pointer}
.pr-learn-criteria input{margin-top:.25rem;min-width:20px;min-height:20px;flex:none;accent-color:var(--pr-ink)}
.pr-learn-criteria input:focus-visible{outline:3px solid var(--pr-focus);outline-offset:2px}
.pr-learn-criteria label:has(input:checked){border-color:var(--pr-ink);box-shadow:inset 3px 0 0 var(--pr-ink)}
.pr-learn-criteria .pr-learn-muted{margin:.25rem 0 0;font-size:.9rem}

/* THE "TAUGHT HERE" MARK (CODE13, 2026-09-23; launch-bar/design-beyond-colour.md
   §5.3). <dfn class="pr-def"> marks the one place a registered term is defined.
   Weight 600 (body 400, <strong> 700) and upright: a browser draws <dfn> in
   italic by default, which the first mock-up showed. Neither property depends
   on the theme, so this one rule holds in light, in dark by preference and in
   the explicit dark toggle alike; the colour is the text's own. */
.pr-learn-card dfn.pr-def{font-style:normal;font-weight:600}

/* TAP-TO-DEFINE (CODE13, 2026-09-23; design-beyond-colour.md §5.3). The first
   use in a lesson of a term taught elsewhere is a real button inside the
   sentence: it reads as the word itself, with a dotted underline as the cue,
   and its name is the word. A tap opens the definition in a panel after the
   paragraph; a second tap or Escape closes it. Every colour is an existing
   token, so the light, dark-by-preference and dark-toggle states all follow. */
.pr-learn-card .pr-term{font:inherit;color:inherit;background:none;border:0;border-radius:2px;padding:0;margin:0;cursor:pointer;
  text-align:inherit;white-space:normal;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.pr-learn-card .pr-term[aria-expanded="true"]{text-decoration-style:solid;background:var(--pr-sunk)}
.pr-learn-card .pr-term:focus-visible{outline:3px solid var(--pr-focus);outline-offset:2px}
/* A TERM INSIDE A SENTENCE KEEPS THE LINE'S HEIGHT (L18 item 8). The page-wide
   `.pr-learn-page button{min-height:44px}` made each term button a 44 px box,
   so a line holding one stood taller than its neighbours: alkene-hydration's
   Step 2 has two ("lone pair", "protonated") and its lines spread unevenly.
   The button takes no extra height in the line; its tap area is still 44 px
   tall, drawn by an empty ::after that is positioned out of the flow. The
   selector names .pr-learn-page so it outranks the page-wide rule. */
.pr-learn-page .pr-learn-card .pr-term{min-height:0;min-width:0;position:relative}
.pr-learn-card .pr-term::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 22px);bottom:calc(50% - 22px)}
.pr-learn-card .pr-term-panel{display:block;margin:.5rem 0 .75rem;padding:.6rem .85rem;border-inline-start:3px solid var(--pr-ink-3);
  background:var(--pr-sunk);border-radius:4px;color:var(--pr-ink);font-weight:400;font-style:normal;line-height:1.5}
.pr-learn-card .pr-term-panel[hidden]{display:none}
.pr-learn-card .pr-term-where{display:block;margin-top:.3rem;color:var(--pr-ink-2);font-size:.9em}
/* A term and the punctuation after it (W19; glueRange in
   practice/_engine/learn-terms.mjs): no line break between the button and its
   full stop or comma. The elements inside (the button, or the <strong> the
   term sits in) still wrap between their own words, because a break is
   governed by the element that holds both sides of it. */
.pr-learn-card .pr-term-glue{white-space:nowrap}
.pr-learn-card .pr-term-glue>*{white-space:normal}
/* "HOW SURE ARE YOU?" (CONF, Joe approved the mock-up 2026-09-23). The chips
   are the labels of a native radio group (confidenceHTML in learn-render.mjs):
   each radio is invisible and stretched over its chip, so the whole 44 px chip
   is the target, the arrow keys move between them, and the focus ring is drawn
   on the chip. The chosen chip is filled and ticked, as the compare
   self-check's pressed button is above. Every colour is an existing token, so
   both themes follow. */
.pr-learn-sure{border:0;padding:0;margin:4px 0 16px;min-width:0}
.pr-learn-sure legend{padding:0;margin-bottom:10px;font-size:16px;font-weight:600;color:var(--pr-ink)}
.pr-learn-sure-chips{display:flex;gap:8px;max-width:420px}
.pr-learn-page .pr-learn-sure label{position:relative;flex:1 1 0;min-width:0;margin:0;line-height:1.2}
.pr-learn-sure input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pr-learn-sure label>span{display:flex;align-items:center;justify-content:center;gap:.3em;min-height:44px;box-sizing:border-box;padding:0 6px;
  border:1px solid var(--pr-rule-2);border-radius:var(--pr-r);background:var(--pr-sheet);color:var(--pr-ink);font-size:16px;white-space:nowrap}
.pr-learn-sure label:hover>span{border-color:var(--pr-ink-3)}
.pr-learn-sure input:checked+span{background:var(--pr-ink);border-color:var(--pr-ink);color:var(--pr-ink-flip);font-weight:500}
.pr-learn-sure-tick{display:none;font-weight:700}
.pr-learn-sure input:checked+span .pr-learn-sure-tick{display:inline}
.pr-learn-sure input:focus-visible+span{outline:3px solid var(--pr-focus);outline-offset:3px}
.pr-learn-sure-note{margin:0 0 10px}
/* The feedback box's confidence line, before the reason it points at. */
.pr-learn-feedback[data-learn-feedback] .pr-learn-feedback-lead{font-weight:600;margin-bottom:4px}

/* DRAW THE TANGENT (TANGENT, 2026-09-23; practice/app/learn-tangent.mjs and
   the reusable graph-interact.mjs). The student's own ruler and points are
   drawn in --pr-ruler, a blue that is theirs and nobody else's on the graph;
   the curve, the grid and the axes keep graph.mjs's theme tokens, so the whole
   drawing follows light and dark. --pr-ruler is declared in all three theme
   states: light, dark by preference, and dark by the toggle. */
:root{--pr-ruler:oklch(0.50 0.14 255)}
@media (prefers-color-scheme:dark){:root:not([data-pr-theme="light"]){--pr-ruler:oklch(0.78 0.10 255)}}
:root[data-pr-theme="dark"]{--pr-ruler:oklch(0.78 0.10 255)}
/* The graph is an instrument: a drag moves the ruler, never the page, and a
   long press does not select the tick labels. Bigger than a Practice graph on a
   wide screen, because it is worked on, not only read. */
.dt-stage{margin:10px 0 0}
.dt-stage svg{display:block;width:100%;max-width:560px;height:auto;margin-inline:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.gi-ruler{stroke:var(--pr-ruler)}
.gi-ruler-band{cursor:grab}
.gi-catch{fill:transparent;stroke:none}
.gi-dot{fill:var(--pr-ruler);stroke:var(--pr-sheet);stroke-width:2.5}
.gi-knob{fill:var(--pr-sheet);stroke:var(--pr-ruler);stroke-width:2.5}
.gi-knob-arrows{stroke:var(--pr-ruler);stroke-width:1.6;stroke-linecap:round}
.gi-h{cursor:grab;outline:none}
.gi-h:active{cursor:grabbing}
/* The focus ring is drawn on the catch circle, so a keyboard user sees which
   handle the arrow keys will move. */
.gi-h:focus-visible{outline:none}
.gi-h:focus-visible .gi-catch{stroke:var(--pr-focus);stroke-width:3}
.gi-cross{stroke:var(--pr-ruler);stroke-width:2.4;stroke-linecap:round;fill:none}
.gi-point-num{fill:var(--pr-ruler);font-weight:600}
.dt-root.is-marking .dt-stage svg{cursor:crosshair}
.dt-say{margin:10px 0 0;color:var(--pr-ink-2);line-height:1.5}
.dt-read{margin:8px 0 0;min-height:1.5em;font-variant-numeric:tabular-nums}
.dt-read p{margin:.2rem 0;color:var(--pr-ink)}
.dt-read sup{font-size:.72em;line-height:0}
.dt-tools .pr-btn,.dt-modes .pr-btn{min-height:44px}
.dt-tools [hidden],.dt-modes[hidden]{display:none}
.dt-tpl{display:none}
.dt-alt{margin-top:12px}
.dt-alt.is-closed{display:none}
.dt-alt .dt-values{margin:10px 0;max-width:420px}
.dt-alt .dt-values caption{text-transform:none;letter-spacing:normal}
.dt-alt .dt-values th{text-transform:none;letter-spacing:normal}
.dt-alt .dt-values th,.dt-alt .dt-values td{text-align:left;font-variant-numeric:tabular-nums}
.dt-typed{display:grid;gap:12px;margin-top:10px;max-width:420px}
.dt-typed-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.dt-typed-row label{font-weight:600;font-size:.95rem}
.dt-typed sup,.dt-alt th sup{font-size:.72em;line-height:0}

/* PLOT THE POINTS, DRAW THE LINE OF BEST FIT, EXTRAPOLATE (GRAPH2,
   2026-09-24; practice/app/learn-plot.mjs on graph-interact.mjs). The same
   instrument as the tangent: the student's own points and ruler in
   --pr-ruler, the grid in graph.mjs's tokens, both themes.
   ENLARGED, the grid is drawn two to three times as wide in a box that
   scrolls. A finger on the empty grid pans it (pan-x pan-y); a finger on a
   point, the ruler's body or a handle moves that (touch-action is decided by
   the element the touch starts on, so those keep none). */
.gp-view{margin:10px 0 0}
.gp-stage svg{display:block;width:100%;max-width:560px;height:auto;margin-inline:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.gp-viewwrap{position:relative}
/* Enlarged, the box scrolls SIDEWAYS only (the page scrolls up and down as
   usual), so the fixed y-axis copy in .gp-ystrip lines up with the grid. */
.gp-view.is-big{overflow-x:auto;overflow-y:hidden;border:1px solid var(--pr-rule);border-radius:6px;overscroll-behavior-x:contain}
.gp-ystrip{display:none}
.gp-root.is-big .gp-ystrip{display:block;position:absolute;left:1px;top:1px;bottom:1px;width:3.4em;overflow:hidden;background:color-mix(in oklch,var(--pr-sheet) 96%,var(--pr-learn-tint,var(--pr-sunk)));border-right:1.5px solid var(--pr-rule-2)}
/* A sketch's axes carry no y numbers, so there is no strip to keep in view,
   and drawn it covered the origin's "0" and the y axis itself (CODE16 item 5). */
.gp-root[data-task="sketch"].is-big .gp-ystrip{display:none}
.gp-ytick{position:absolute;right:6px;transform:translateY(-50%);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1;color:var(--pr-ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Enlarged, the axis titles are text outside the box, never cut off. */
.gp-big-title{display:none;margin:10px 0 4px;color:var(--pr-ink-2);font-size:.95rem;text-transform:none;letter-spacing:normal}
.gp-root.is-big .gp-big-title{display:block}
.gp-big-title.gp-big-x{text-align:center;margin:4px 0 0}
.gp-big-title sup{font-size:.72em;line-height:0}
.gp-view.is-big .gp-xtitle,.gp-view.is-big .dt-ytitle{display:none}
.gp-view.is-big .gp-stage svg{max-width:none;margin-inline:0;touch-action:pan-x pan-y}
.gp-view.is-big .gi-h,.gp-view.is-big .gi-ruler-band,.gp-view.is-big .gi-point{touch-action:none}
.gp-say{margin:10px 0 0;color:var(--pr-ink-2);line-height:1.5}
.gp-tools .pr-btn,.gp-scales .pr-btn,.gp-nudge .pr-btn{min-height:44px}
.gp-scales{margin-top:10px}
.gp-scales .pr-btn{white-space:normal;text-align:left}
.gp-scales sup{font-size:.72em;line-height:0}
.gp-scales .pr-btn[aria-pressed="true"],.gp-values .pr-btn[aria-pressed="true"]{background:var(--pr-ink);color:var(--pr-ink-flip);border-color:var(--pr-ink)}
/* The nudge pad: four buttons a thumb can find without looking, each moving
   the chosen point half a small square. Only a plot check has one. */
.gp-nudge{display:flex;gap:8px;margin-top:10px}
.gp-nudge .pr-btn{min-width:52px;font-size:1.15rem;line-height:1}
.gp-nudge[hidden],.gp-stage[hidden]{display:none}
.gp-root:not(.has-scale) .gp-stage[data-scale]{display:none}
/* Nothing to nudge or enlarge until there is a grid. */
.gp-root:not(.has-scale) .gp-nudge,.gp-root:not(.has-scale) .gp-big{display:none}
.gp-values{margin:10px 0;max-width:460px}
.gp-values caption,.gp-values th{text-transform:none;letter-spacing:normal}
.gp-values th,.gp-values td{text-align:left;font-variant-numeric:tabular-nums;vertical-align:middle;padding:6px 12px 6px 0}
.gp-values sup{font-size:.72em;line-height:0}
.gp-values{width:100%;border-collapse:collapse}
.gp-values th{white-space:normal}
/* The plot table's third column holds the row buttons, flush right. */
.gp-values td:nth-child(3),.gp-values th:nth-child(3){padding-right:0;text-align:right}
.gp-values .pr-btn{min-height:44px;min-width:80px;padding:8px 10px}
.gp-values tr.is-chosen td{background:color-mix(in oklch,var(--pr-ruler) 12%,transparent)}
.gi-point.is-chosen .gi-cross{stroke-width:3.4}
.gi-point.is-chosen .gi-point-num{text-decoration:underline}
.gp-alt{margin-top:12px}
.gp-alt.is-closed{display:none}
.gp-typed{display:grid;gap:12px;margin-top:10px;max-width:460px}
.gp-typed sup,.gp-typed label sup{font-size:.72em;line-height:0}

/* THE ANSWER BOX'S FOCUS RING HAS ROOM (the lead's 375 px read, 2026-09-23).
   The shared ring (practice.css, .pr-input:focus-visible: 2px, offset 1px)
   sat on the first line of the guidance under a Learn answer box, because
   that line followed the box with no gap. This is every typed Learn check,
   not only the tangent: the line under the box now starts 10px down, clear
   of the ring. */
.pr-learn-page .pr-input+.pr-learn-muted,.pr-learn-page .pr-input+.pr-chem-preview{margin-top:10px}
/* A BORN–HABER COMPLETION (BH, 2026-09-24): one box for each numbered line of
   the cycle, each with its own "Reads as" preview straight under it, and the
   lines the student wrote listed in the feedback. The typed example in the
   guidance is set in the monospace face and never broken across two lines. */
.pr-learn-levels{border:0;padding:0;margin:18px 0 0;min-width:0}
.pr-learn-levels legend{font-size:14px;color:var(--pr-ink-3);margin:0 0 10px;padding:0}
.pr-learn-level{margin:0 0 16px}
.pr-learn-page .pr-learn-level label{font-weight:600;margin-bottom:6px}
.pr-learn-page .pr-learn-level .pr-input+.pr-chem-preview{margin-top:8px}
.pr-learn-said-lines{margin:6px 0 0;padding-inline-start:1.2em}
.pr-learn-said-lines li{margin:2px 0}
.pr-learn-typed-example{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;white-space:nowrap}
/* A graph to read a value off (BH): on a wide screen it is drawn no wider
   than 520 px, so the whole of a tall graph (both axes and the line) fits in
   the window at once. At phone width it is the card's width, as before. */
.pr-learn-figure svg.pr-read-svg{max-width:min(100%,520px);margin-inline:auto}

/* ---- CURVE (2026-09-24): the curve tool and, after a check, the model curve
   and its band. The student's curve is in --pr-ruler, as their ruler and
   points are; the model is green, DASHED, and its band is shaded AND edged
   with a dotted line, so colour is never the only thing telling them apart
   (the key under the grid says which is which in words). An anomalous reading
   is ringed in amber, dashed. Both themes: the tokens are declared in each. */
.gi-curve{stroke:var(--pr-ruler);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none}
.gi-handle .gi-knob{fill:var(--pr-sheet);stroke:var(--pr-ruler);stroke-width:2.5}
.gi-handle.is-chosen .gi-knob{fill:var(--pr-ruler)}
.gp-band{fill:color-mix(in oklch,var(--pr-green) 20%,transparent);stroke:var(--pr-green-ink);stroke-width:1;stroke-dasharray:2 3}
.gp-model{stroke:var(--pr-green-ink);stroke-width:2.2;stroke-dasharray:8 5;stroke-linecap:round;fill:none}
.gp-ring{stroke:var(--pr-amber-ink);stroke-width:2;stroke-dasharray:3 3;fill:none}
.gp-reveal{pointer-events:none}
.gp-key-wrap{margin:12px 0 4px;padding:10px 12px;border:1px solid var(--pr-rule);border-radius:6px}
.gp-key-title{margin:0 0 6px;font-size:1rem;text-transform:none;letter-spacing:normal}
.gp-key{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gp-key li{display:grid;grid-template-columns:36px 1fr;gap:10px;align-items:start;line-height:1.4;color:var(--pr-ink-2)}
.gp-key-swatch{margin-top:3px}
.gp-key-swatch .gi-stroke{stroke:var(--pr-ruler);stroke-width:2.6;stroke-linecap:round}
/* The tool choice on a best-fit check (CURVE): three buttons, none pressed
   until the student chooses, each naming its tool and what it draws. The
   pressed one is filled, as the scale buttons are. Controls that belong to
   one tool wait with .gp-off until it is chosen. */
.gp-off{display:none!important}
.gp-toolset{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:10px 0 0}
.gp-tool{min-height:52px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;text-align:left;white-space:normal;padding:8px 10px}
.gp-tool-name{font-weight:600;font-size:15px;line-height:1.2}
.gp-tool-what{font-size:15px;line-height:1.25;color:var(--pr-ink-3)}
.gp-tool[aria-pressed="true"]{background:var(--pr-ink);color:var(--pr-ink-flip);border-color:var(--pr-ink)}
.gp-tool[aria-pressed="true"] .gp-tool-what{color:var(--pr-ink-flip)}
.gi-join{stroke-linejoin:miter}
/* Every button a student works a graph with carries 15 px text (the lead's
   standard for Learn's graph checks), the small tool buttons included. */
.gp-tools .pr-btn,.gp-nudge .pr-btn,.gp-scales .pr-btn{font-size:15px}
/* A line or curve check's enlarged grid: the browser reads touch-action on the
   <svg> alone, so a handle inside it could not keep its own "none" and a drag
   on it panned the box. These checks pan the box by hand (learn-plot.mjs); the
   plot check keeps the browser's pan, which its taps rely on. */
.gp-root:not([data-task="plot"]) .gp-view.is-big .gp-stage svg{touch-action:none}
/* Enlarged, the grid's own y numbers give way to the fixed strip's copy
   (learn-plot.mjs reads their positions, so they keep their place, unseen):
   drawn three times as large, their left digits were covered by the strip and
   their last digit showed beside it ("0.06 6" at 375 px, CURVE's read). */
.gp-view.is-big .gp-stage svg text[text-anchor="end"]{visibility:hidden}

/* READY (2026-09-24): a student who has finished every Learn lesson for a
   Practice topic is told so. On the lesson-complete screen, one box above the
   practice buttons; on the lesson list, a short "Ready to practise" box. The
   same green as the later-check line, because both say "this is ready for
   you now". Titles in here are never uppercased: they carry chemistry. */
.pr-learn-ready{margin:1rem 0;padding:10px 14px;border-inline-start:3px solid var(--pr-green);background:var(--pr-green-wash);color:var(--pr-green-ink);line-height:1.5}
.pr-learn-ready p{margin:0 0 .6rem}
.pr-learn-ready p:last-child{margin-bottom:0}
.pr-learn-next{margin-block:1rem}
.pr-learn-readybox{margin:1.5rem 0;padding:var(--pr-s5);border:1px solid var(--pr-rule);background:var(--pr-sheet)}
.pr-learn-page .pr-learn-readybox h2{margin:0 0 .5rem;font-size:20px}
.pr-learn-readybox>p{margin:0}
.pr-learn-readybox ul{list-style:none;margin:.75rem 0 0;padding:0}
.pr-learn-readybox li{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;padding:.4rem 0;border-top:1px solid var(--pr-rule)}
.pr-learn-readybox li a{display:inline-flex;align-items:center;min-height:44px;margin-inline-start:auto;font-weight:600}
.pr-learn-readymark{display:inline-block;padding:1px 8px;border-radius:var(--pr-r-pill);background:var(--pr-green-wash);color:var(--pr-green-ink);font-size:.8rem;font-weight:600}

/* SKETCH (2026-09-24): a curve sketched on given axes, on the shared plot
   component. A pinned handle is a small solid dot (it cannot be moved, so it
   is not drawn as a knob); the activation-energy line the student moves is
   dashed in the tool's colour, its knob on the energy axis. After a check the
   marks are listed as AQA groups them, each with a tick or a cross AND the
   words "met" / "not met" (colour is never the only cue). Titles are never
   uppercased: they carry chemistry. */
.gi-pin-dot{fill:var(--pr-ruler);stroke:var(--pr-sheet);stroke-width:2}
.gi-marker{stroke:var(--pr-ruler);stroke-linecap:round}
.gp-key-original{stroke:currentColor;stroke-width:2;stroke-linecap:round}
.gp-marks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.gp-mark{padding-top:10px;border-top:1px solid var(--pr-rule)}
.gp-mark-head{margin:0;line-height:1.4}
.gp-mark-label{font-weight:700;margin-inline-end:4px}
.gp-mark-all{color:var(--pr-ink-2)}
.gp-mark-text{margin:4px 0 0;color:var(--pr-ink-2);line-height:1.45}
.gp-mark-points{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.gp-mark-points li{display:grid;grid-template-columns:max-content 1fr;gap:8px;align-items:baseline;line-height:1.45;color:var(--pr-ink-2)}
.gp-mark-state{font-weight:600;white-space:nowrap}
.gp-mark-state.is-met{color:var(--pr-green-ink)}
.gp-mark-state.is-not{color:var(--pr-red-ink)}

/* FIGFIT (2026-09-24): "See the whole figure" under a figure wider than the
   card, and the full-screen view it opens (openWholeFigure in
   app/learn-figures.mjs). The view's sizes and its quarter turn are set by the
   script from the screen's width and height; these rules only paint it. */
.pr-learn-see-whole{display:block;margin:var(--pr-s3) auto 0;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.pr-learn-see-whole[hidden]{display:none}
.pr-learn-whole{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--pr-sheet);color:var(--pr-ink);overflow:hidden}
.pr-learn-whole::backdrop{background:var(--pr-sheet)}
.pr-learn-whole-stage{position:absolute;top:0;left:0;transform-origin:0 0;display:flex;flex-direction:row}
.pr-learn-whole-bar{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:12px 4px;box-sizing:border-box;border-inline-start:1px solid var(--pr-rule)}
.pr-learn-whole-bar p{margin:0;font-size:12px;line-height:1.35;text-align:center;color:var(--pr-ink-2)}
.pr-learn-whole-bar .pr-btn{min-height:44px;min-width:44px;padding-inline:6px;flex:none}
.pr-learn-whole-view{flex:1;min-width:0;overflow:auto;padding:12px;box-sizing:border-box}
.pr-learn-whole-view:focus-visible{outline:3px solid var(--pr-focus);outline-offset:-3px}
.pr-learn-whole-view svg{display:block;margin-inline:auto}

/* TAP AN ATOM (CLICK, 2026-09-24; practice/app/learn-atoms.mjs). The drawing
   is worked on, so a tap chooses the NEAREST atom (the buttons take no
   pointer events; they are there for the keyboard and a screen reader), and
   the page never scrolls or selects text under a finger. What the student
   has chosen is drawn in --pr-ruler, the student's own blue, and always as a
   SHAPE — a ring, two dots, a dashed line, a δ label — so it never rests on
   colour alone; each atom's button also says "pressed". */
/* 44px narrower than the card: each atom's button is centred on its atom and is
   44px wide on a phone (the card's tap-target floor), so the end atoms' buttons
   stand 22px outside the drawing. At 30px the card still scrolled sideways by
   2 to 5px on the three widest tap drawings (GENFIT, 2026-09-28; measured again
   by Lead 20, 2026-10-06: button 44px wide, its right edge 5px past the card). */
.ap-stage{position:relative;width:fit-content;max-width:calc(100% - 44px);margin:10px auto 0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ap-stage svg{display:block;max-width:100%;height:auto}
.ap-atoms{position:absolute;inset:0;pointer-events:none}
.ap-atom{position:absolute;width:30px;height:30px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);pointer-events:none}
.ap-atom:focus{outline:none}
.ap-atom:focus-visible{outline:3px solid var(--pr-focus);outline-offset:2px}
.ap-sel{fill:color-mix(in oklab,var(--pr-ruler) 14%,transparent);stroke:var(--pr-ruler);stroke-width:2.6}
.ap-lp{fill:var(--pr-ruler)}
.ap-hb{stroke:var(--pr-ruler);stroke-width:2;stroke-dasharray:6 4;fill:none}
.ap-delta{fill:var(--pr-ruler);font-weight:600}
.ap-tools{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.ap-tools .pr-btn{min-height:44px;min-width:44px}
/* Text and ground must change together when a tool is selected. The shared
   background transition otherwise briefly paints flipped text on its old
   ground (measured 1.07:1 light and 1.28:1 dark). */
.ap-tools .pr-btn[aria-pressed]{transition:none}
.ap-tools .pr-btn[aria-pressed="true"]{background:var(--pr-ink);border-color:var(--pr-ink);color:var(--pr-ink-flip)}
.ap-tools .pr-btn[aria-pressed="true"]:hover:not(:disabled){background:var(--pr-ink);border-color:var(--pr-ink);color:var(--pr-ink-flip)}
/* The tick's room is kept on every button that can be pressed, and the four
   hydrogen-bond tools sit in a fixed grid (APPARATUS3): choosing a tool used
   to widen it by its tick and push the others onto a new row under the
   thumb. Nothing moves now when a tool is chosen. */
.ap-tools .pr-btn[aria-pressed]::before{content:"\2713\00a0";font-weight:700;visibility:hidden}
.ap-tools .pr-btn[aria-pressed="true"]::before{visibility:visible}
.ap-tools[role="group"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.ap-tools[role="group"]{grid-template-columns:repeat(4,max-content)}}
.ap-say{margin:10px 0 0;color:var(--pr-ink-2);line-height:1.5}
.ap-reveal{margin:14px 0 0}
.ap-reveal .pr-fig{margin:6px 0 0}
.ap-reveal-note{margin:8px 0 0}
.gp-mark-state.is-open{color:var(--pr-ink-3)}
/* a found mistake whose mark a correct part cancelled (APPARATUS3): amber,
   and allowed to wrap, since it is a phrase and not a word */
.gp-mark-state.is-cancelled{color:var(--pr-amber-ink);white-space:normal}

/* FIX THE SET-UP (APPARATUS, 2026-09-24; practice/app/learn-apparatus.mjs).
   The drawing is worked on, so a tap chooses the part with the NEAREST spot
   (the part buttons take no pointer events; they are there for the keyboard
   and a screen reader), and the page never scrolls or selects text under a
   finger. A chosen part is ringed in --pr-ruler, the student's own blue, as a
   SHAPE as well as a colour; each part's button also says "pressed". A
   focused part shows a 44 px focus ring. */
.ax-stage{position:relative;max-width:400px;margin:10px auto 0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ax-stage svg{display:block;width:100%;height:auto}
.ax-parts{position:absolute;inset:0;pointer-events:none}
.ax-part{position:absolute;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%);pointer-events:none}
.ax-part:focus{outline:none}
.ax-part:focus-visible{outline:3px solid var(--pr-focus);outline-offset:0}
.ax-sel{fill:color-mix(in oklab,var(--pr-ruler) 16%,transparent);stroke:var(--pr-ruler);stroke-width:2.6}
.ax-tools{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.ax-tools .pr-btn{min-height:44px;min-width:44px}
.ax-say{margin:10px 0 0;color:var(--pr-ink-2);line-height:1.5}
.ax-reveal{margin:14px 0 0}
.ax-pair{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.ax-pair{grid-template-columns:1fr 1fr}}
.ax-pair .pr-fig{margin:0}
.ax-pair svg{width:100%;height:auto;max-width:400px}

/* COPY3 (2026-09-25; practice/_engine/test/learn-copy3.test.mjs).

   2. DATA TABLES AT PHONE WIDTH. A table's <caption> is as wide as its table,
   so when the table was wider than the card the caption ran off the card with
   it and read "Physical properties of the Group 2 metal…" until scrolled.
   The scroll box is now a size container, and the caption is held to its
   width (100cqi) and pinned to its left edge while the table scrolls under it.
   At phone width the table's text is 15 px and its cells' side padding 6 px:
   that is what lets a table whose longest words fit, such as group2-trends'
   four columns, fit the card without scrolling. A table with a word or a
   formula wider than its share of the card still scrolls inside its own box,
   under its "Scroll sideways" line. Measured over all 153 tables at 375 px:
   33 overflowed and 25 captions ran past the card before; 22 and 0 after. */
.pr-learn-table{container-type:inline-size}
.pr-learn-table caption{max-width:100cqi;position:sticky;left:0}
@media (max-width:760px){.pr-learn-table table{font-size:15px}.pr-learn-table th,.pr-learn-table td{padding:10px 6px}}

/* 3. How sure the student said they were, kept under "You chose" once the
   answer is checked: plain text, in the quieter ink of the line above it. */
.pr-learn-feedback[data-learn-feedback] .pr-learn-feedback-sure{margin:0 0 10px;color:var(--pr-ink-2)}

/* 5. The next step after "Partly there" or "Needs another look", under the
   saved line, with its one button. */
.pr-learn-nextstep{margin-top:12px}
.pr-learn-nextstep p{margin:0 0 10px}
.pr-learn-nextstep .pr-learn-actions{margin:0}

/* 6. THE EMPTY STATUS LINE. #learn-status is the page's "Saved…" line
   (practice.css holds it open at 24 px + 8 px so a message does not push the
   page down). On the start screen it is empty, and that empty line was the
   blank gap above "Report a problem" that every blind student noticed — as a
   student and in author preview alike. Empty, it now takes no room. */
#learn-status:empty{min-height:0;margin-bottom:0}

/* ===== JOEREAD1 (2026-09-25): Joe's own reads of chiral-centres and
   rp5-distillation. ===== */

/* A COLOUR CHANGE, SEEN (colourChange, netlify/functions/_learn-colour-change.mjs).
   The markup draws the tube at its END colour, with the start colour on top
   fully transparent. Where motion is allowed that top layer fades from
   opaque to clear ONCE (1.5 s at the start colour, 3.5 s to change), then
   stays clear: nothing keeps moving on the page. Under reduced motion there
   is no animation and the still is the end state. */
@media (prefers-reduced-motion:no-preference){
  .pr-colour-change .pr-cc-from{animation:pr-cc-fade 5s ease-in-out 1 both}
}
@keyframes pr-cc-fade{0%,30%{opacity:1}100%{opacity:0}}

/* CHOICE OPTIONS THAT CARRY A DRAWING (learn-render.mjs optionHTML). Each
   option is a card: the radio and the option's words on the first row, the
   drawing under them across the card. Stacked on a phone; two to a row where
   there is room. The drawing keeps its own size and shrinks to fit. */
.pr-learn-options--figures{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.pr-learn-options--figures{grid-template-columns:1fr 1fr}}
.pr-learn-options label.pr-learn-option-fig{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:10px;align-items:start;margin:0}
.pr-learn-option-drawing{grid-column:1/-1;display:block;color:var(--pr-ink)}
.pr-learn-option-drawing svg{display:block;max-width:100%;height:auto;margin:0 auto}

/* THE ON-SCREEN DRAWING BOX on a paper-drawing compare block (learn-render.mjs
   drawBoxHTML): the Practice drawing lane's own surface (practice.css .pr-draw),
   opened by "Draw here instead". */
.pr-learn-drawbox-toggle{margin:4px 0 0}
.pr-learn-drawbox{margin:12px 0 16px}

/* Lesson start: keep the phone order, give the title most of the desktop
   width, and fit each action to its words. Quiet actions previously lost
   their border and fill; here every action needs a visible button boundary. */
.pr-learn-intro.pr-learn-intro-layout{max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px 40px;align-items:start}
.pr-learn-intro-main{min-width:0}.pr-learn-intro-main .pr-learn-lead{font-size:18px;line-height:1.65}.pr-learn-intro-actions{display:grid;justify-items:start;max-width:300px;gap:8px}
.pr-learn-readiness{min-width:0;border:1px solid var(--pr-rule);border-radius:12px;overflow:hidden;background:var(--pr-sheet)}
.pr-learn-readiness-heading{padding:22px 24px;background:var(--pr-sunk)}.pr-learn-readiness-heading h2{font-size:21px;margin:0 0 8px}.pr-learn-readiness-heading p{font-size:15px;color:var(--pr-ink-2);margin:0}
.pr-learn-foundations{padding:0 24px}.pr-learn-foundation{border-bottom:1px solid var(--pr-rule)}.pr-learn-foundation:last-child{border-bottom:0}.pr-learn-foundation summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:17px 0;cursor:pointer}.pr-learn-foundation summary::-webkit-details-marker{display:none}.pr-learn-foundation strong{display:block;font-size:16px}.pr-learn-reminder{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--pr-ink-2)}.pr-learn-disclosure{flex:none;color:var(--pr-ink-3)}.pr-learn-foundation[open] .pr-learn-disclosure{transform:rotate(180deg)}.pr-learn-revisit{padding:0 0 18px}.pr-learn-revisit a{display:block;padding:9px 12px;border-inline-start:2px solid var(--pr-rule);font-size:14px}.pr-learn-revisit a span{display:block;font-size:12px;color:var(--pr-ink-3)}.pr-learn-intro-footer{grid-column:1/-1}
@media(max-width:760px){.pr-learn-intro.pr-learn-intro-layout{display:flex;flex-direction:column;gap:24px}.pr-learn-intro-main,.pr-learn-readiness,.pr-learn-intro-footer{width:100%}.pr-learn-intro-actions{max-width:none}.pr-learn-readiness-heading{padding:18px}.pr-learn-foundations{padding:0 18px}.pr-learn-reminder{font-size:13px}}
.pr-learn-intro-main{grid-column:1;grid-row:1}.pr-learn-readiness{grid-column:2;grid-row:1 / span 2}.pr-learn-intro-controls{grid-column:1;grid-row:2}.pr-learn-intro-controls .pr-learn-actions{margin-top:0}.pr-learn-foundation summary:focus-visible{outline:3px solid var(--pr-focus);outline-offset:3px;border-radius:3px}.pr-learn-revisit a{min-height:44px}
@media(max-width:760px){.pr-learn-intro-controls{width:100%}.pr-learn-intro-controls .pr-learn-actions{margin:0}}
.pr-learn-intro-actions .pr-btn--quiet{border-color:var(--pr-rule-3);background:var(--pr-sheet);color:var(--pr-ink)}
.pr-learn-intro-actions .pr-btn--quiet:hover:not(:disabled){border-color:var(--pr-ink-2);background:var(--pr-sunk)}
/* A resumable run is the main action unless a filled due-check button is
   already present. Keep the reconciled saved-run markup's existing contract. */
.pr-learn-intro-actions:not(:has(.pr-btn--primary)) [data-learn-action="resume-saved"]{background:var(--pr-ink);border-color:var(--pr-ink);color:var(--pr-ink-flip)}
.pr-learn-intro-actions:not(:has(.pr-btn--primary)) [data-learn-action="resume-saved"]:hover:not(:disabled){background:var(--pr-ink-2);border-color:var(--pr-ink-2)}
@media(min-width:761px){
 .pr-learn-intro.pr-learn-intro-layout{margin-inline:auto;grid-template-rows:min-content min-content auto;row-gap:20px}
 .pr-learn-intro-main h1{font-size:38px;line-height:1.15;margin:14px 0 18px}
 .pr-learn-intro-controls .pr-learn-intro-actions{display:flex;max-width:none;gap:10px;align-items:flex-start}
}

/* Completed lesson: the recorded evidence keeps its wording and order;
   colour supports the status word and never turns a self-report into a mark. */
.pr-learn-finish{max-width:960px;margin:30px auto;padding-bottom:30px;min-width:0}
.pr-learn-finish-header{border-bottom:2px solid var(--pr-rule-2);padding-bottom:20px;margin-bottom:24px}
.pr-learn-finish-header .pr-learn-muted{margin:0 0 10px;font-size:16px;color:var(--pr-ink-2)}
.pr-learn-finish-header h1{font-size:36px;line-height:1.15;margin:0}
.pr-learn-finish h2{font-size:21px;margin:0 0 16px}
.pr-learn-finish-help{padding:16px 20px;background:var(--pr-sunk);border:1px solid var(--pr-rule);border-radius:var(--pr-r);margin-bottom:28px}
.pr-learn-finish-help h2{font-size:16px;margin-bottom:8px}
.pr-learn-finish-help .pr-learn-finish-notes{margin:0;padding-left:20px;font-size:14px}
.pr-learn-finish .pr-learn-evidence{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.pr-learn-finish .pr-learn-evidence>li{margin:0;padding:18px 20px;border:1px solid var(--pr-rule-2);border-radius:var(--pr-r);background:var(--pr-sheet);display:grid;gap:12px;min-width:0}
.pr-learn-result-copy{min-width:0;overflow-wrap:anywhere}
.pr-learn-result-copy>strong{display:block;font-size:16px;line-height:1.45}
.pr-learn-result-copy .pr-learn-evidence-q{font-size:15px;margin-top:6px;line-height:1.55}
.pr-learn-result-state{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.pr-learn-result-chip{display:inline-block;max-width:100%;padding:4px 10px;border-radius:var(--pr-r-pill);background:var(--pr-sunk);color:var(--pr-ink-2);font-size:13px;font-weight:600;line-height:1.4}
.pr-learn-result-chip[data-learn-result="correct"]{background:var(--pr-green-wash);color:var(--pr-green-ink)}
.pr-learn-result-chip[data-learn-result="needs-look"]{background:var(--pr-amber-wash);color:var(--pr-amber-ink)}
.pr-learn-result-detail{font-size:13px;line-height:1.5;color:var(--pr-ink-3)}
.pr-learn-finish-key{font-size:14px;color:var(--pr-ink-3);max-width:80ch;margin:18px 0 28px}
.pr-learn-finish-next{padding:22px 24px;border:1px solid var(--pr-rule-2);border-radius:var(--pr-r);background:var(--pr-sheet)}
.pr-learn-finish-next>p{margin:0 0 16px}
.pr-learn-finish .pr-btn{border-color:var(--pr-rule-3);color:var(--pr-ink)}
.pr-learn-finish .pr-btn--primary{border-color:var(--pr-ink);color:var(--pr-ink-flip)}
/* Readiness owns the next-lesson link. Dress it as a button only here, so
   the catalogue's links and the in-lesson controls keep their own styling. */
.pr-learn-finish .pr-learn-next a{display:inline-block;vertical-align:middle;width:fit-content;max-width:100%;min-height:44px;box-sizing:border-box;padding:10px 16px;margin:10px 0;border:1px solid var(--pr-rule-3);border-radius:var(--pr-r);background:var(--pr-sheet);color:var(--pr-ink);font-size:15px;font-weight:500;line-height:1.5;text-decoration:none}
.pr-learn-finish .pr-learn-next a:hover{background:var(--pr-sunk);border-color:var(--pr-ink-2)}
@media(min-width:641px){
 .pr-learn-finish .pr-learn-evidence>li{grid-template-columns:minmax(0,1fr) 200px;gap:24px}
}
@media(max-width:640px){
 .pr-learn-finish-header h1{font-size:30px}
 .pr-learn-finish-header{padding-bottom:16px;margin-bottom:20px}
 .pr-learn-finish-help,.pr-learn-finish .pr-learn-evidence>li,.pr-learn-finish-next{padding:16px}
 .pr-learn-finish .pr-learn-actions .pr-btn{max-width:100%}
}

/* Closed source-preserving note layouts: usable phone default before JS. */
.pr-learn-figure .pr-note-original{display:none}
.pr-learn-figure .pr-note-narrow{display:block}
/* Lead 15 approved phone panels use the same state radios as other figures.
   JS uses the card's 600px boundary; this is the script-free viewport fallback. */
.pr-learn-phone-copy{display:block}
.pr-learn-wide-copy{display:none}
.pr-learn-wide-copy .pr-note-original{display:block}
@media(min-width:768px){
 .pr-learn-phone-copy{display:none}
 .pr-learn-wide-copy{display:block}
}

/* A chiral pair (chiralCentre) comes drawn twice: side by side (.cc-row) and
   stacked (.cc-stack). Side by side it is ~440 units wide and shrank to 8-13px
   labels in an answer option or a phone card (Claude figure QC, 2026-09-27),
   so an option always shows the stack, and a figure shows it on a phone. */
svg.cc-stack,.pr-learn-figure svg.cc-stack{display:none}
.pr-learn-option-drawing svg.cc-row{display:none}
.pr-learn-option-drawing svg.cc-stack{display:block}
@media (max-width:520px){
  .pr-learn-figure svg.cc-row{display:none}
  .pr-learn-figure svg.cc-stack{display:block;margin:0 auto}
}

/* THE FREQUENCY SYMBOL (W19, 2026-09-28). IBM Plex Sans draws Greek nu (ν)
   almost exactly like a Latin v, so "ΔE = hν" read as "hv". Lesson text wraps
   the symbol as <span class="pr-nu">&nu;</span> (the only thing that span may
   hold — netlify/functions/_learn-content.mjs checkNu) and it is drawn in a
   serif italic, the way a textbook prints it, where its curved left stroke
   tells it apart from v. */
.pr-nu{font-family:Georgia,'Times New Roman',serif;font-style:italic}

/* Self-compare: shrink flex text to the card and wrap even a long condensed
   formula. Existing chemistry markup remains intact. */
/* Space under the model answer before the line that follows it (L18 item 4:
   "Compare your own reasoning with each criterion" sat against it). A model
   that ends in its own paragraph collapses with this, so the gap is the same. */
.pr-learn-model-answer{min-width:0;max-width:100%;overflow-wrap:anywhere;margin-block-end:1rem}
.pr-learn-criteria label>span{min-width:0;overflow-wrap:anywhere}

/* Joe: every Learn drawing fits its card; full-size reading lives in the
   separate dialog. !important is needed for generator-owned inline widths
   and the shared Practice wide-structure rules. Those rules stay unchanged. */
.pr-learn-figure svg,.pr-learn-option-drawing svg{
 max-width:min(100%,var(--learn-figure-max,100%))!important;height:auto!important;
}
.pr-learn-figure :is(.pr-struct,.pr-fig-scroll,.pr-learn-anim-scroll,.tr-stage,.gp-view){
 max-width:100%;min-width:0;overflow:visible!important;
}
.pr-learn-figure .pr-fig-scroll{background:none}
.pr-learn-figure .pr-fig-more{display:none}
/* Retire figure-only scrolling cues; table/line cues remain useful. */
.pr-learn-figure [data-learn-scroll-cue]:not(.pr-learn-table+[data-learn-scroll-cue]){display:none}
.pr-learn-figure{container-type:inline-size}
@container(min-width:600px){
 .pr-learn-figure .pr-note-original{display:block}
 .pr-learn-figure .pr-note-narrow{display:none}
 .pr-learn-phone-copy{display:none}
 .pr-learn-wide-copy{display:block}
}
@container(max-width:599px){
 .pr-learn-phone-copy{display:block}
 .pr-learn-wide-copy{display:none}
}
.pr-learn-whole-bar{overflow-y:auto}
.pr-learn-whole-view{touch-action:pan-x pan-y pinch-zoom}

/* Phase 3a: task first on phones; compact support and reachable navigation. */
.pr-learn-help-menu{margin:0 0 12px;font-size:14px;color:var(--pr-ink-2)}
.pr-learn-help-menu>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;width:fit-content;padding-inline:8px}
.pr-learn-help-menu>summary::after{content:'⌄';margin-left:8px}
.pr-learn-help-menu[open]>summary::after{content:'⌃'}
.pr-learn-topline{position:sticky;top:var(--pr-head-h);z-index:5;background:var(--pr-paper);padding-block:8px}
.pr-learn-topline>a{min-height:44px;display:inline-flex;align-items:center}
.pr-learn-drawing-departure{flex-basis:100%;margin:0;font-size:14px}
.pr-learn-resume-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Phase 3b: section landmarks, one stopping point, and room for the verdict. */
.pr-learn-section-progress{display:grid;gap:4px;min-width:0;line-height:1.4}
.pr-learn-section-progress>span{font-size:13px;color:var(--pr-ink-2)}
.pr-learn-outline-section{margin:16px 0}
.pr-learn-outline-section h3{font-size:15px;line-height:1.4;margin:0 0 8px;text-transform:none;letter-spacing:normal}
.pr-learn-achieved{margin-bottom:24px}
.pr-learn-achieved li{margin-block:8px}
.pr-learn-stop{margin-block:20px}
.pr-learn-foundations-verdict{margin-block:24px;line-height:1.6}
.pr-learn-foundations-repair{margin-block:32px}
.pr-learn-finish-record{margin-top:32px}
.pr-learn-finish-record>summary{min-height:44px;cursor:pointer;margin-bottom:20px;display:list-item;padding-block:12px}
.pr-learn-finish-next>h3{margin-top:28px}
.pr-learn-handoff-note{margin-block:20px;color:var(--pr-ink-2)}
#learn-heading{scroll-margin-top:180px}

/* Phase 2: one prerequisite decision, retained when the original check returns. */
.pr-learn-recovery{border-left:3px solid var(--pr-accent,var(--pr-ink));padding:12px 16px;margin:16px 0;min-width:0}
.pr-learn-recovery h3{margin-top:0}
.pr-learn-recovery .pr-learn-actions{flex-wrap:wrap}

/* Route choices and weak-area handoff use the existing card typography. */
.pr-learn-route-choice { margin-block: 1rem; }
.pr-learn-route-choice p, .pr-learn-route-choice li { line-height: 1.55; }
.pr-learn-route-choice summary, .pr-learn-weak-home summary { cursor: pointer; }
.pr-learn-weak { margin-block: 1.5rem; }
.pr-learn-weak li { margin-block: .65rem; overflow-wrap: anywhere; }
/* The Practice link after an area's title, apart from it and a full tap target (L18 item 3). */
.pr-learn-weak-link{display:inline-block;min-height:44px;line-height:44px;margin-inline-start:.75rem}
.pr-learn-weak-home > details { margin-block: 1rem; }
.pr-learn-route-choice .pr-btn { white-space: normal; text-align: left; }

/* Keep the main lesson route visible while other entry routes stay available. */
.pr-learn-other-routes { margin-top: 16px; border-top: 1px solid var(--pr-rule); padding-top: 8px; }
.pr-learn-other-routes > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.pr-learn-other-routes > summary::before { content: "+"; }
.pr-learn-other-routes[open] > summary::before { content: "−"; }
.pr-learn-other-routes > summary:focus-visible { outline: 2px solid var(--pr-focus); outline-offset: 3px; }
.pr-learn-other-routes .pr-learn-actions { margin-top: 8px; }

/* L17 E2: compact phone navigation and plain route choices. The lesson title
   and the All lessons link scroll; only progress, tools and leaving stick. */
.pr-learn-page button{min-height:44px;min-width:44px}
.pr-learn-content>.pr-btn{margin:8px 8px 0 0;max-width:100%;white-space:normal}
.pr-learn-page button+button{margin-inline-start:8px}
.pr-learn-help{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pr-learn-intro-main .pr-learn-intro-actions{display:grid;justify-items:start;gap:8px;max-width:none;margin:16px 0}
.pr-learn-intro-actions>p,.pr-learn-route-choice>p{margin:0;font-size:15px;color:var(--pr-ink-2);line-height:1.5}
.pr-learn-intro-controls .pr-learn-route-choice{margin-top:0}
.pr-learn-other-routes .pr-learn-actions{display:grid;align-items:start;gap:16px}
.pr-learn-section-name:empty{display:none}
.pr-learn-tools{position:relative;flex:none}
.pr-learn-tools>summary{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:8px;box-sizing:border-box;border:1px solid var(--pr-rule-3);border-radius:var(--pr-r);cursor:pointer;list-style:none}
.pr-learn-tools>summary::-webkit-details-marker{display:none}
.pr-learn-tools>summary::after{content:'⌄';margin-left:6px}
.pr-learn-tools[open]>summary::after{content:'⌃'}
.pr-learn-tools>div{position:absolute;top:calc(100% + 8px);right:0;z-index:6;padding:8px;min-width:160px;background:var(--pr-sheet);border:1px solid var(--pr-rule-3);border-radius:var(--pr-r);box-shadow:0 4px 16px #0002}
.pr-learn-tools>summary:focus-visible,[data-learn-method-figure]:focus-visible{outline:3px solid var(--pr-focus);outline-offset:3px}
.pr-learn-method{min-width:0}
.pr-learn-method-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.pr-learn-method-bar .pr-learn-focus-count{flex-basis:100%;margin:4px 0 0}
.pr-learn-method-bar .pr-btn{white-space:normal;margin:0}
.pr-learn-method .pr-learn-focus{margin-top:8px}
.pr-learn-method [hidden]{display:none}
#learn-heading{scroll-margin-top:var(--learn-sticky-offset,112px)}
/* B4 round 3 (pixel): "Show the working" scrolls this heading into view; give it the same clearance under the sticky row. */
[data-learn-solution-heading]{scroll-margin-top:var(--learn-sticky-offset,112px)}
.pr-learn-finish-next{min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
.pr-learn-finish-next .pr-btn{white-space:normal;max-width:100%;height:auto;min-height:44px;box-sizing:border-box;text-align:left}
.pr-learn-finish-next .pr-learn-practice-targets{padding:0;list-style:none;min-width:0}
.pr-learn-finish-next .pr-learn-next{display:block;min-width:0}
.pr-learn-finish-next .pr-learn-weak ul{padding-left:20px}
.pr-map-progress{font-size:14px;color:var(--pr-ink-2)}
@media(max-width:760px){
 .pr-learn-topline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;max-height:96px;box-sizing:border-box;padding:8px 0;flex-wrap:nowrap}
 .pr-learn-topline .pr-learn-section-name{display:none}
 .pr-learn-topline .pr-learn-section-progress>span{font-size:12px;line-height:1.3}
 .pr-learn-topline>.pr-btn{margin:0;padding:10px 8px;font-size:13px;white-space:nowrap}
 .pr-learn-tools>summary{font-size:13px;padding-inline:6px}
 .pr-learn-page .pr-learn-intro-main h1{font-size:30px;line-height:1.15;margin:12px 0}
 .pr-learn-intro.pr-learn-intro-layout{margin:12px 0;gap:20px}
 .pr-learn-intro-main .pr-learn-intro-actions{margin:12px 0}
 .pr-learn-intro-main .pr-learn-lead{font-size:17px;line-height:1.5}
 .pr-learn-finish-next{padding:18px 14px}
 .pr-learn-finish .pr-learn-evidence>li{padding:14px}
 .pr-learn-section-progress{gap:0}
}

.pr-learn-route-description{display:block;margin-top:6px;font-size:15px;font-weight:400;line-height:1.5}

/* Links are also actions. Keep notes, help and finish links tappable on phones. */
@media(max-width:600px){
 .pr-learn-page a{min-height:44px;display:inline-block;box-sizing:border-box;padding-block:8px;max-width:100%}
 .pr-learn-page .pr-learn-actions{gap:8px}
}

/* Narrow screens: long lesson titles wrap inside the phone width. */
@media (max-width:600px){
 .pr-learn-finish-checks .pr-btn{white-space:normal;max-width:100%;min-width:0;overflow-wrap:anywhere;text-align:left;}
 .pr-learn-support-links summary{min-height:44px;box-sizing:border-box;display:flex;align-items:center;}
 .pr-learn-option-feedback summary{min-height:44px;box-sizing:border-box;display:flex;align-items:center;}
}

/* Joe 2026-10-05: the "More" menu held only Data sheet and sat oddly between the progress and Save and leave.
   Both actions are now matching buttons grouped on the right of the sticky bar. */
.pr-learn-topline-actions{display:flex;gap:8px;align-items:center;flex:none;margin-left:auto}
.pr-learn-topline-actions>.pr-btn{margin:0;white-space:nowrap}
.pr-learn-tools-btn:focus-visible{outline:3px solid var(--pr-focus);outline-offset:3px}
@media (max-width:760px){
 .pr-learn-topline-actions>.pr-btn{padding:10px 8px;font-size:13px}
}
/* E6 item 11 (2026-10-05): a long "Revisit: <title>" button ran 481 px wide on a
   375 px phone (.pr-btn is nowrap). Inside a lesson card and on the finish
   screen every button wraps and stays within its column. */
.pr-learn-card .pr-btn, .pr-learn-finish .pr-btn { white-space: normal; max-width: 100%; overflow-wrap: anywhere; height: auto; }
/* E6 item 3 (2026-10-05): the start page's "Other ways in" is a list of
   identical rows: the route's name as a quiet link-button and one plain line
   beneath, same type size and spacing for every route. */
.pr-learn-other-routes .pr-learn-route-rows { display: grid; gap: 0; margin-top: 4px; }
.pr-learn-route-row { padding: 12px 0; border-top: 1px solid var(--pr-rule); min-width: 0; }
.pr-learn-route-row:first-child { border-top: 0; }
.pr-learn-route-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; border: 0; background: none; color: var(--pr-ink); font: inherit; font-size: 16px; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.pr-learn-route-link:hover { text-decoration-thickness: 2px; }
.pr-learn-route-link:focus-visible { outline: 2px solid var(--pr-focus); outline-offset: 3px; border-radius: 2px; }
.pr-learn-route-link[aria-expanded]::after { content: "+"; margin-inline-start: 8px; text-decoration: none; display: inline-block; }
.pr-learn-route-link[aria-expanded="true"]::after { content: "−"; }
.pr-learn-route-line { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--pr-ink-2); }
.pr-learn-route-more { display: grid; gap: 8px; justify-items: start; margin-top: 10px; }
.pr-learn-route-more[hidden] { display: none; }
.pr-learn-route-more label { font-size: 15px; font-weight: 600; }
.pr-learn-route-more select { max-width: 100%; }
.pr-learn-route-more p { margin: 0; font-size: 15px; color: var(--pr-ink-2); }
.pr-learn-route-more .pr-btn { white-space: normal; max-width: 100%; }
/* THE AUTHOR READ-THROUGH (2026-10-06; learn-author.mjs). One lesson on one
   page for Joe's reviews: each screen as the player draws it, and under each
   check a fold of what the student can see later. Author preview only. */
.pr-read-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:8px 0 4px}
.pr-read-toggle{display:inline-flex;align-items:center;gap:6px;font-size:15px}
.pr-read-note{font-size:14px;line-height:1.5;color:var(--pr-ink-3);margin:6px 0}
.pr-read-section{margin:40px 0 8px;padding-top:12px;border-top:3px solid var(--pr-rule-2);font-size:20px}
.pr-read-screen{margin:28px 0 0;scroll-margin-top:16px}
.pr-read-count{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--pr-ink-2)}
.pr-read-later{margin:10px 0 0;padding:10px 14px 14px;border:1px dashed var(--pr-rule-3);border-radius:var(--pr-r);background:var(--pr-sunk)}
.pr-read-later>summary{cursor:pointer;font-weight:600;color:var(--pr-ink);min-height:32px}
.pr-read-part{margin:14px 0 0;padding-top:10px;border-top:1px solid var(--pr-rule)}
.pr-read-tag{display:inline-block;margin:0 0 6px;padding:1px 8px;border-radius:var(--pr-r-pill);background:var(--pr-sheet);border:1px solid var(--pr-rule-2);font-size:13px;font-weight:600;color:var(--pr-ink-2)}
.pr-read-options{padding-inline-start:20px}
.pr-read-options>li{margin:8px 0}
.pr-read-says{margin:4px 0 0;font-size:15px}
.pr-read-key{color:var(--pr-green-ink);font-weight:600}
.pr-read-fresh{margin:16px 0 0 0;padding-inline-start:14px;border-inline-start:3px solid var(--pr-rule-2)}
.pr-read-model-card{margin:6px 0 0}
.pr-read-finish{margin-top:40px;padding-top:12px;border-top:3px solid var(--pr-rule-2)}
.pr-read-cannow{margin-top:20px}
.pr-read-phone{display:block;box-sizing:content-box;width:375px;max-width:100%;margin:12px auto 0;border:1px solid var(--pr-rule-3);border-radius:var(--pr-r);background:var(--pr-paper)}
.pr-read-index-topic h3{margin:18px 0 4px;font-size:17px}
.pr-read-index-topic ul,.pr-read-index-unit>ul{margin:0;padding-inline-start:20px}
.pr-read-index-row{margin:4px 0}
/* Inside the phone frame: the page alone, without the site's header. */
.pr-read-framed .site-chrome--platform,.pr-read-framed .pr-pagebar,.pr-read-framed .pr-learn-help-menu{display:none}
@media print{.pr-read-bar,.pr-read-phone-wrap,.site-chrome--platform,.pr-pagebar,.pr-learn-help-menu,.pr-learn-preview{display:none}.pr-read-later{break-inside:auto}.pr-read-screen{break-before:auto}}
/* DESKTOP TEXT IN FIVE ANIMATIONS (Lead 20 X1, 2026-10-06; out-r3 P2.2). The
   figure fit grows a static drawing on a desktop card until its smallest label
   reads 12 px, but an animation that draws itself at a fixed pixel width was
   left at that width: measured at 1280 px, the titration lab read 8.5 px, the
   pH-curve picker 10, the fractional column 9, the distillation/reflux vapour
   8.5 and the iodine clock's beaker 11.5. On a desktop card (600 px or more,
   the line learn-anim-phone.mjs draws) each now widens just far enough for its
   smallest label to read 12 px (its viewBox width x 12 / smallest label, plus
   the 2 px plate border), never past the card. The vapour drawing cannot reach
   12 px inside a 756 px card (560 units, 8.5-unit labels), so it fills the card
   and its two 8.5-unit labels take the drawing's own 9 units (12.1 px), the
   reflux one 3% tighter so it keeps clear of the panel divider.
   Inline widths are the controllers' own, so these need !important. A phone
   card (a1/a2-phone) is untouched. */
.pr-learn-anim:is([data-learn-anim="titrationLab"],[data-learn-anim="titrationCurve"],[data-learn-anim="distilReflux"],[data-learn-anim="fractionalDistillation"],[data-learn-anim="iodineClock"]){container:learn-anim / inline-size}
@container learn-anim (min-width: 600px){
.pr-learn-anim[data-learn-anim="titrationLab"] .vt-stage>svg{display:block;width:100% !important;max-width:604px !important;height:auto;margin-inline:auto}
.pr-learn-anim[data-learn-anim="titrationCurve"] .abt-stage>svg{display:block;width:100% !important;max-width:554px !important;height:auto;margin-inline:auto}
.pr-learn-anim[data-learn-anim="fractionalDistillation"] .fd-wide-wrap>svg.fd-stage{display:block;width:100% !important;max-width:606px !important;height:auto !important;margin-inline:auto}
.pr-learn-anim[data-learn-anim="distilReflux"] .dr-stage>svg{display:block;width:100% !important;max-width:none !important;height:auto}
.pr-learn-anim[data-learn-anim="distilReflux"] .dr-stage>svg text[font-size="8.5"]{font-size:9px}
/* "open at the top: never seal it" is centred at x 470 and, at 9 units, would
   cross the panel divider at x 390; set 3% tighter it keeps its 8.5-unit
   footprint (393 to 547). */
.pr-learn-anim[data-learn-anim="distilReflux"] .dr-stage>svg text[font-size="8.5"][x="470"]{letter-spacing:-0.03em}
.pr-learn-anim[data-learn-anim="iodineClock"] .ic-stage .ic-beaker{width:200px}
}

/* "IN THE EXAM" (Joe, 2026-10-06: "exam tips should have a specific in house
   style separate from the pure chemistry teaching"). Modelled on the notes'
   Precision points callout (revision.css .callout-warn: a 4px left rule, a
   light panel, a small title), drawn in its own hue so it reads as neither
   teaching (plain text), a method step (amber panel), help (grey sunk panel)
   nor a verdict (green or red). Violet, hue 300, is used nowhere else in
   Learn. The title is a fixed literal in sentence case (never uppercase: only
   .pr-label may be, practice-label-lint.mjs) with a small drawn exam-paper mark,
   decorative and unread. The markup and its rules: practice/_engine/learn-exam.mjs.
   The three tokens are declared in all three theme states. */
:root{--pr-exam:oklch(0.50 0.14 300);--pr-exam-ink:oklch(0.42 0.13 300);--pr-exam-wash:oklch(0.968 0.018 300)}
@media (prefers-color-scheme:dark){:root:not([data-pr-theme="light"]){--pr-exam:oklch(0.74 0.12 300);--pr-exam-ink:oklch(0.84 0.09 300);--pr-exam-wash:oklch(0.270 0.040 300)}}
:root[data-pr-theme="dark"]{--pr-exam:oklch(0.74 0.12 300);--pr-exam-ink:oklch(0.84 0.09 300);--pr-exam-wash:oklch(0.270 0.040 300)}
.pr-learn-exam{box-sizing:border-box;width:fit-content;max-width:100%;min-width:min(100%,22rem);margin:24px 0;padding:14px 20px 16px;border:1px solid color-mix(in srgb,var(--pr-exam) 35%,var(--pr-rule));border-left:4px solid var(--pr-exam);border-radius:0 var(--pr-r) var(--pr-r) 0;background:var(--pr-exam-wash)}
.pr-learn-exam .pr-learn-exam-title{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:.01em;color:var(--pr-exam-ink)}
.pr-learn-exam .pr-learn-exam-title::before{content:"";flex:none;width:10px;height:13px;border:1.5px solid currentColor;border-radius:2px;background:linear-gradient(currentColor,currentColor) 2px 3px/5px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 2px 6px/5px 1.5px no-repeat,linear-gradient(currentColor,currentColor) 2px 9px/3px 1.5px no-repeat}
.pr-learn-exam p{margin:0 0 12px}
.pr-learn-exam>:last-child{margin-bottom:0}
.pr-learn-exam :is(ul,ol){margin:0 0 12px;padding-left:1.2em}
@media(max-width:480px){.pr-learn-exam{padding:12px 14px 14px;margin:20px 0}}
/* THE INTERACTIVES AREA (Lead 20 IN, 2026-10-06): the tools catalogue
   (?tools=1), a tool's page (?tool=<id>) and Joe's NMR "read a spectrum" tool
   (.nr-*). Every colour is a theme token, so light, dark by preference and the
   dark toggle all follow; Joe's drawings sit on the shared light plate. */
.pr-learn-tools-entry{margin:1rem 0;padding:.75rem 1rem;border:1px solid var(--pr-rule-2);border-radius:var(--pr-r);background:var(--pr-sheet)}
.pr-learn-tools-entry a,.pr-learn-tool-link a{font-weight:600}
.pr-learn-tools-group{margin-top:1.5rem}
.pr-learn-tools-group>h2{margin:0;font-size:20px}
.pr-learn-tool-card h3{margin:8px 0;font-size:22px}
.pr-learn-tool-intro{margin:1rem 0 1.25rem;padding:.75rem 1rem;border-left:3px solid var(--pr-rule-3);background:var(--pr-sheet)}
.pr-learn-tool-intro h2{margin:.5rem 0 .25rem;font-size:16px}
.pr-learn-tool-intro p{margin:0 0 .5rem;max-width:44rem}
.pr-learn-tool-stage{margin:0 0 1.25rem;max-width:46rem}
.pr-learn-tool sup,.pr-learn-tool-card sup{font-size:.72em;line-height:0}
.pr-learn-anim .nr-lab,.pr-learn-anim .nr-q,.pr-learn-anim .nr-log-title{margin:14px 0 4px;font-weight:600;color:var(--pr-ink)}
.pr-learn-anim .nr-grp{margin:6px 0 0}
.pr-learn-anim .nr-grp-lab{margin:8px 0 0;color:var(--pr-ink-2);font-size:var(--pr-t-base)}
.pr-learn-anim .nr-grp .pr-learn-anim-controls{margin-top:4px}
.pr-learn-anim .nr-target{margin:14px 0 0;color:var(--pr-ink);line-height:1.5}
.pr-learn-anim .nr-stage,.pr-learn-anim .nr-close{max-width:640px}
.pr-learn-anim .nr-close-lab,.pr-learn-anim .nr-score,.pr-learn-anim .nr-static,.pr-learn-anim .nr-log-legend{margin:10px 0 0;color:var(--pr-ink-2);line-height:1.5}
.pr-learn-anim .nr-panel{margin:16px 0 0;padding:4px 0 0;border-top:1px solid var(--pr-rule-2)}
.pr-learn-anim .nr-panel-title{margin:12px 0 0;font-weight:600;color:var(--pr-ink)}
.pr-learn-anim .nr-opts .pr-btn{white-space:normal;text-align:left;line-height:1.3}
.pr-learn-anim .nr-opts sub,.pr-learn-anim .nr-opts sup{font-size:.72em;line-height:0}
.pr-learn-anim .nr-range{white-space:nowrap}
.pr-learn-anim .nr-msg{margin:12px 0 0;padding:0 0 0 10px;border-left:3px solid transparent;line-height:1.5;color:var(--pr-ink)}
.pr-learn-anim .nr-msg:empty{margin:0;padding:0;border:0}
.pr-learn-anim .nr-msg.is-ok{border-left-color:var(--pr-green)}
.pr-learn-anim .nr-msg.is-err{border-left-color:var(--pr-red)}
.pr-learn-anim .nr-log{margin:6px 0 0}
.pr-learn-anim .nr-log-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 0;border-bottom:1px solid var(--pr-rule)}
.pr-learn-anim .nr-log-text{margin:0;flex:1 1 18rem;line-height:1.5;color:var(--pr-ink)}
.pr-learn-anim .pr-learn-anim-plate.nr-frag,.pr-learn-anim .pr-learn-anim-plate.nr-molwrap{display:inline-block;max-width:100%;margin:0}
.pr-learn-anim .pr-learn-anim-plate.nr-frag svg,.pr-learn-anim .pr-learn-anim-plate.nr-molwrap svg{width:auto;max-width:100%;height:auto}
.pr-learn-anim .nr-hobs{color:var(--pr-red-ink);font-weight:600}
.pr-learn-anim .nr-hnbr{color:var(--pr-change);font-weight:600}
.pr-learn-anim .nr-reveal{margin:16px 0 0}
.pr-learn-anim .nr-reveal p{margin:10px 0 0;line-height:1.5;color:var(--pr-ink)}
.pr-learn-anim .nr-struct-name{font-weight:600}
.pr-learn-anim .nr-dot{font-size:1.1em}
.pr-learn-anim .nr-dot-0{color:oklch(0.52 0.165 30)}.pr-learn-anim .nr-dot-1{color:oklch(0.44 0.10 250)}
.pr-learn-anim .nr-dot-2{color:oklch(0.46 0.11 155)}.pr-learn-anim .nr-dot-3{color:oklch(0.46 0.12 310)}
@media (prefers-color-scheme:dark){:root:not([data-pr-theme="light"]) .pr-learn-anim .nr-dot-0{color:oklch(0.72 0.14 30)}:root:not([data-pr-theme="light"]) .pr-learn-anim .nr-dot-1{color:oklch(0.72 0.10 250)}:root:not([data-pr-theme="light"]) .pr-learn-anim .nr-dot-2{color:oklch(0.74 0.11 155)}:root:not([data-pr-theme="light"]) .pr-learn-anim .nr-dot-3{color:oklch(0.74 0.11 310)}}
:root[data-pr-theme="dark"] .pr-learn-anim .nr-dot-0{color:oklch(0.72 0.14 30)}:root[data-pr-theme="dark"] .pr-learn-anim .nr-dot-1{color:oklch(0.72 0.10 250)}:root[data-pr-theme="dark"] .pr-learn-anim .nr-dot-2{color:oklch(0.74 0.11 155)}:root[data-pr-theme="dark"] .pr-learn-anim .nr-dot-3{color:oklch(0.74 0.11 310)}
.pr-learn-anim .nr-chem sub,.pr-learn-anim .nr-chem sup,.pr-learn-anim .nr-target sub,.pr-learn-anim .nr-log-text sub,.pr-learn-anim .nr-reveal sub{font-size:.72em;line-height:0}
/* A chosen answer once checked: the wash, never red text on the pressed ink. */
.pr-learn-anim .nr-opts .pr-btn[aria-pressed="true"][data-verdict="miss"]{background:var(--pr-red-wash);color:var(--pr-red-ink);border-color:var(--pr-red);box-shadow:inset 0 -3px 0 var(--pr-red);text-decoration:line-through}
.pr-learn-anim .nr-opts .pr-btn[aria-pressed="true"][data-verdict="right"]{background:var(--pr-green-wash);color:var(--pr-green-ink);border-color:var(--pr-green);box-shadow:inset 0 -3px 0 var(--pr-green)}
/* The oxidation-state tool (.os-*): the charge-sum drawing and the working. */
.pr-learn-anim .os-lab{margin:14px 0 4px;font-weight:600;color:var(--pr-ink)}
.pr-learn-anim .os-q{margin:14px 0 4px;color:var(--pr-ink);line-height:1.5}
.pr-learn-anim .os-chem sub,.pr-learn-anim .os-chem sup{font-size:.72em;line-height:0}
.pr-learn-anim .os-stage{max-width:520px}
.pr-learn-anim .os-msg{margin:12px 0 0;padding:0 0 0 10px;border-left:3px solid transparent;line-height:1.5;color:var(--pr-ink)}
.pr-learn-anim .os-msg:empty,.pr-learn-anim .os-work:empty{margin:0;padding:0;border:0}
.pr-learn-anim .os-msg.is-ok{border-left-color:var(--pr-green)}.pr-learn-anim .os-msg.is-err{border-left-color:var(--pr-red)}
.pr-learn-anim .os-work{margin:10px 0 0;line-height:1.9;color:var(--pr-ink)}
.pr-learn-anim .os-opts .pr-btn[data-verdict="miss"]{background:var(--pr-red-wash);color:var(--pr-red-ink);border-color:var(--pr-red);text-decoration:line-through;opacity:1}
.pr-learn-anim .os-opts .pr-btn[data-verdict="right"]{background:var(--pr-green-wash);color:var(--pr-green-ink);border-color:var(--pr-green);opacity:1}
.pr-learn-tool .pr-frac{position:relative;display:inline-grid;grid-template-rows:auto auto;vertical-align:middle;text-align:center;margin-inline:5px;line-height:1.15}
.pr-learn-tool .pr-frac>span{padding:2px 7px}.pr-learn-tool .pr-frac>span:first-child{border-bottom:1.5px solid currentColor}
.pr-learn-tool .pr-frac-say{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* "ALSO ACCEPTED" (Joe, 2026-10-06; practice/_engine/learn-exam.mjs EXAM_ALT_OPEN):
   the optional last line of an exam box, naming an alternative mark schemes have
   accepted and what to learn instead. Secondary to the box's advice: smaller,
   muted ink, set off by a hairline in the box's own hue. Tokens already carry
   their dark values (--pr-ink-2 in practice.css, --pr-exam above). */
.pr-learn-exam .pr-learn-exam-alt{margin:12px 0 0;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--pr-exam) 30%,transparent);font-size:14px;line-height:1.5;color:var(--pr-ink-2)}
.pr-learn-exam .pr-learn-exam-alt strong{color:var(--pr-exam-ink);font-weight:700}

/* THE CALM FINISH (Joe, 2026-10-14: "a bit overwhelming"). One headline, two short lists, one main action,
   the stop line, then everything else folded. Narrower than the old finish so the lines stay short. */
.pr-learn-finish--calm{max-width:720px}
.pr-learn-finish--calm .pr-learn-finish-header{border-bottom:0;padding-bottom:0;margin-bottom:20px}
.pr-learn-finish-aim{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--pr-ink-2);max-width:60ch}
.pr-learn-finish-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));align-items:start;gap:16px;margin:0 0 24px}
.pr-learn-finish-glance>section{margin:0;padding:16px 20px;border:1px solid var(--pr-rule-2);border-radius:var(--pr-r);background:var(--pr-sheet);min-width:0}
.pr-learn-finish--calm .pr-learn-finish-glance h2{font-size:17px;margin:0 0 8px}
.pr-learn-finish-list,.pr-learn-weak--calm ul{margin:0;padding-left:20px}
.pr-learn-finish-list li{margin-block:6px;line-height:1.5}
.pr-learn-weak--calm li{margin-block:8px;line-height:1.5}
.pr-learn-weak--calm li>strong{display:block;font-weight:600}
/* An area's one link (Practice this area, or Read this section) sits under its title, in one style
   whichever element it is, and keeps its 44 px target. */
.pr-learn-weak--calm .pr-learn-weak-link{display:inline-flex;align-items:center;min-height:44px;line-height:1.4;margin:0;padding:0;border:0;background:none;
 color:var(--pr-ink);font:inherit;font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.pr-learn-finish-note{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--pr-ink-3)}
.pr-learn-finish-main{margin:0 0 4px}
.pr-learn-finish-main .pr-learn-next{margin:0}
.pr-learn-finish-main .pr-learn-next a,.pr-learn-finish-main>.pr-btn{margin:0}
/* The next lesson as THE main action looks like one: the older finish dressed every next-lesson link as an outline. */
.pr-learn-finish-main .pr-learn-next a.pr-btn--primary{background:var(--pr-ink);border-color:var(--pr-ink);color:var(--pr-ink-flip)}
.pr-learn-finish-main .pr-learn-next a.pr-btn--primary:hover{background:var(--pr-ink);border-color:var(--pr-ink);opacity:.92}
.pr-learn-finish-main>p:not(.pr-learn-next){margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--pr-ink-3);max-width:60ch}
.pr-learn-finish-main .pr-learn-practice-targets{list-style:none;padding:0;margin:0}
.pr-learn-finish--calm .pr-learn-stop{margin:16px 0 28px;color:var(--pr-ink-2)}
.pr-learn-finish-more{border-top:1px solid var(--pr-rule);padding-top:4px}
.pr-learn-finish-more>summary,.pr-learn-finish--calm .pr-learn-finish-record>summary{min-height:44px;cursor:pointer;display:list-item;padding-block:12px;margin:0;font-weight:500}
.pr-learn-finish-more-body{padding:4px 0 16px}
.pr-learn-finish-more-body .pr-learn-practice-targets{list-style:none;padding:0}
.pr-learn-finish--calm .pr-learn-finish-record{margin-top:0;border-top:1px solid var(--pr-rule);padding-top:4px}
@media(max-width:640px){
 .pr-learn-finish--calm .pr-learn-finish-header h1{font-size:28px}
 .pr-learn-finish-glance>section{padding:14px 16px}
}