/* ============================================================
   Digestion Lab — IGCSE 0610 Topic 7
   Design tokens follow Dr Mompel's IGCSE deck house style.
   ============================================================ */
:root{
  /* House palette (from 6.1 Photosynthesis slide 14) */
  --green:#14572B; --green-2:#1E7A3E; --green-tint:#E8F1EA;
  --amber:#A16207; --amber-tint:#FBF3E3;
  --teal:#0F6E8C;  --teal-tint:#E5F0F4;
  --purple:#6B3FA0;--purple-tint:#F1EBF8;
  --red:#B03A2E;   --red-tint:#FAECE9;
  --ink:#1A1A1A;   --grey:#6B6B6B; --line:#C4C4C4;

  /* Surfaces — warm paper, never grey */
  --paper:#FBF8F2; --card:#FFFFFF; --card-2:#FDFBF6;
  --edge:#E7DFD1; --edge-2:#EFE8DC;
  --shadow:0 1px 2px rgba(60,45,25,.06), 0 6px 18px rgba(60,45,25,.07);
  --shadow-lg:0 2px 6px rgba(60,45,25,.08), 0 18px 42px rgba(60,45,25,.12);

  /* Organ tones */
  --o-mouth:#EBD9C4; --o-teeth:#FFFDF7; --o-saliva:#B79BD6; --o-epig:#E4A6A6;
  --o-oes:#DFA096;   --o-stomach:#D98C6A; --o-liver:#9E5A4C; --o-gall:#6FA36B;
  --o-panc:#D9B96A;  --o-duo:#E0A87A;    --o-si:#E8B08A;    --o-li:#C08A72;
  --o-rect:#B0765F;

  --ok:#1E7A3E; --ok-tint:#E8F5EC; --bad:#B03A2E; --bad-tint:#FBEDEA;

  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;
  --font:Calibri,Carlito,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --rail-h:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.25}

/* ---------- App frame ---------- */
.app{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto}

/* ---------- Header ---------- */
/* one look for every topic lab (14 Oct 2026, Daniel): a white bar, as the Cells Lab's, and this lab's own colour — the human body hub's Digestion ochre,
   the colour of its card in the hub — on the way back, the progress rings and a pressed button. Saved stays green: it is a status. */
:root{--hdr-bg:#FFFFFF;--hdr-ink:#1A1A1A;--hdr-veil:rgba(60,45,25,.045);--hdr-line:#E7DFD1;--lab:#8F5D09;--lab-2:#744B06;--lab-tint:#F7EEDC}
.hdr{
  display:flex;align-items:center;gap:14px;padding:9px 16px;min-width:0;
  background:var(--hdr-bg);
  color:var(--hdr-ink);box-shadow:0 1px 0 var(--hdr-line)
}
.hdr__mark{display:flex;align-items:baseline;gap:9px;min-width:0;overflow:hidden}
.hdr__title{font-size:19px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr__sub{font-size:12.5px;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* who made it: small, quiet, but always on screen — not buried in a help panel */
.hdr__by{font-size:11.5px;opacity:.62;white-space:nowrap;color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.hdr__by:hover,.hdr__by:focus-visible{opacity:.95}
.badge{
  font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:var(--r-pill);
  background:var(--hdr-veil);border:1px solid var(--hdr-line);white-space:nowrap
}
.hdr__spacer{flex:1}
.hdr__stats{display:flex;align-items:center;gap:10px;flex:none}
.stat{
  display:flex;align-items:center;gap:7px;background:var(--hdr-veil);
  border:1px solid var(--hdr-line);border-radius:var(--r-pill);padding:4px 12px 4px 6px;font-size:12.5px
}
.stat b{font-size:14px;font-variant-numeric:tabular-nums}
.stat--go{cursor:pointer;transition:background .15s}
.stat--go:hover,.stat--go:focus-visible{background:var(--lab-tint)}
.ring{width:26px;height:26px;flex:none}
.ring circle{fill:none;stroke-width:4}
.ring .bg{stroke:var(--hdr-line)}
.ring .fg{stroke:var(--lab);stroke-linecap:round;transition:stroke-dasharray .5s ease}
.hbtn{
  background:var(--hdr-veil);border:1px solid var(--hdr-line);color:var(--hdr-ink);
  border-radius:var(--r-pill);padding:6px 13px;font-size:13px;cursor:pointer;white-space:nowrap;
  transition:background .15s
}
.hbtn:hover{background:var(--lab-tint)}
/* the way back (14 Oct 2026, Daniel: pupils missed it): a solid pill, first in the header */
.hbtn--back{background:var(--lab);color:#fff;border-color:var(--lab);font-weight:650;text-decoration:none;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.hbtn--back:hover,.hbtn--back:focus-visible{background:var(--lab-2);border-color:var(--lab-2);color:#fff}

/* ---------- header buttons, the saving chip, dialogs ---------- */
/* the saving chip: what the records know, at a glance */
.hbtn--save{font-weight:600}
.hbtn--save.is-ok{background:var(--ok-tint);color:var(--ok);border-color:var(--ok)}
.hbtn--save.is-ok:hover{background:#DCEFE2}
.hbtn--save.is-busy{background:var(--hdr-veil);color:var(--hdr-ink);border-style:dashed}
.hbtn--save.is-no{background:var(--bad-tint);color:var(--bad);border-color:var(--bad)}
.hbtn--save.is-no:hover{background:#F8DCD7}
.hbtn--save.is-off{background:transparent;color:var(--hdr-ink);border-style:dashed}

.modal__box--sm{max-width:460px}
.dlgrow{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
.submsg{font-size:14px;line-height:1.5;margin-top:8px}
.submsg.no{color:var(--bad)} .submsg.ok{color:var(--ok)}
.submsg .code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;font-weight:700;letter-spacing:.08em;
  color:var(--green);background:var(--green-tint);border:1.5px dashed var(--green);border-radius:var(--r);
  padding:12px;text-align:center;margin:12px 0;user-select:all
}
.fineprint{font-size:12.5px;color:var(--grey);margin-top:14px;line-height:1.5}

/* ---------- Stage ---------- */
.stage{display:grid;grid-template-columns:minmax(340px,40%) minmax(0,1fr);min-height:0}

/* ---------- Body column ---------- */
.bodycol{
  position:relative;min-height:0;display:flex;flex-direction:column;
  background:
    radial-gradient(120% 80% at 50% 0%,#FFFDF8 0%,#F7F1E6 60%,#F2EADB 100%);
  border-right:1px solid var(--edge)
}
.bodycol__tools{
  display:flex;gap:6px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--edge-2);
  background:#FFFDF9AA;backdrop-filter:blur(4px);flex-wrap:wrap
}
.tool{
  border:1px solid var(--edge);background:var(--card);border-radius:var(--r-pill);
  padding:5px 12px;font-size:12.5px;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:6px;
  transition:border-color .15s,background .15s
}
.tool:hover{border-color:var(--green-2);background:var(--green-tint)}
.tool[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.tool__dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55}
.bodywrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:6px}
#bodySvg{width:100%;height:100%;display:block;touch-action:manipulation}

/* ---------- organ interaction on the anatomical plate ----------
   The artwork's own paths are the hit targets, so hovering an organ
   highlights exactly that organ and nothing else. */
/* _underlined_ in a Learn sentence: wording the syllabus expects a candidate to produce,
   without adding to the weight of the bold terms already in the line */
u.syl-u{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2.5px;
     text-decoration-color:#9AA98C;font-style:normal}
/* a lab station: the plate shows an experiment, so every layer that belongs to the body
   comes out — organs, their labels, the canal and the hit regions */
#bodySvg.is-lab .art,#bodySvg.is-lab .hits,#bodySvg.is-lab .lblg,
#bodySvg.is-lab .labels,#bodySvg.is-lab #canalPath{display:none}
/* ---------- the practical bench ---------- */
/* The detail layer is pointer-events:none so a click reaches the organ underneath it.
   The bench is the one thing in there that IS meant to be clicked, so its controls take
   their pointer events back — without this the whole bench is a picture. */
#bodySvg .detail__anim .bn,#bodySvg .detail__anim .bn rect,#bodySvg .detail__anim .bn text,
#bodySvg .detail__anim .bn__spot{pointer-events:all}
#bodySvg .detail__anim .bn rect{fill:#FFFDF9;stroke:#B9AE9B;stroke-width:1}
#bodySvg .detail__anim .bn text{font:600 11px Calibri,Carlito,sans-serif;fill:#14572B}
#bodySvg .detail__anim .bn .bn__sub{font-weight:500;font-size:8.5px;fill:#6B6B6B}
#bodySvg .detail__anim .bn{cursor:pointer}
#bodySvg .detail__anim .bn:hover rect{fill:#F3F7EF;stroke:#14572B}
#bodySvg .detail__anim .bn.is-on rect{fill:#14572B;stroke:#14572B}
#bodySvg .detail__anim .bn.is-on text{fill:#FFFDF9}
#bodySvg .detail__anim .bn__spot{fill:#FFFDF9;stroke:#14572B;stroke-width:1.4;stroke-dasharray:2 2.4;cursor:pointer}
#bodySvg .detail__anim .bn__spot:hover{fill:#DCEBD2;stroke-dasharray:none}
#bodySvg .detail__anim .bn__spot.is-sel{fill:#14572B;stroke:#14572B;stroke-dasharray:none}
#bodySvg .detail__anim .bn__say{font:600 10.5px Calibri,Carlito,sans-serif;fill:#4A4A4A}
#bodySvg .detail__anim .bn__id{font:700 12px Calibri,Carlito,sans-serif;fill:#14572B}
#bodySvg .detail__anim .bn__nm{font:500 8.6px Calibri,Carlito,sans-serif;fill:#6B6B6B}
#bodySvg .detail__anim .bn__key{font:500 9px Calibri,Carlito,sans-serif;fill:#6B6B6B}
#bodySvg .detail__anim .bn__samp{font:600 10px Calibri,Carlito,sans-serif;fill:#4A4A4A}
#bodySvg .detail__anim .bn__res{font:700 12px Calibri,Carlito,sans-serif;fill:#1A1A1A}
#bodySvg .detail__anim .bn__sub2{font:500 9.5px Calibri,Carlito,sans-serif;fill:#6B6B6B}
#bodySvg .detail__anim .bn__note{font:600 8.6px Calibri,Carlito,sans-serif;fill:#B5651A}
#bodySvg .art path{pointer-events:none}
#bodySvg .op{transition:opacity .24s ease,filter .24s ease}
/* The plate's own paths carry inline opacities, so the spotlight has to use
   !important. The studied organ keeps its natural colour; everything else
   steps back. That reads better than brightening one organ. */
#bodySvg .art .op.is-dim{opacity:.16 !important;filter:saturate(.3)}
#bodySvg .op.is-hover{filter:saturate(1.25) brightness(1.06)}
#bodySvg .op.is-hidden{display:none !important}
#bodySvg.has-active .art path:not(.op):not(.focus-path){opacity:.2 !important;filter:saturate(.3);transition:opacity .24s ease}

/* invisible click targets traced over the plate */
#bodySvg .focus-copy,#bodySvg .focus-path{pointer-events:none;opacity:1 !important;filter:none !important}
#bodySvg .hit{fill:transparent;stroke:transparent;cursor:pointer;pointer-events:all}
#bodySvg .hit--line{fill:none;stroke-linecap:round;stroke-linejoin:round}
#bodySvg .hits.debug .hit{fill:rgba(20,87,43,.16);stroke:rgba(176,58,46,.85);stroke-width:1.2}
#bodySvg .hits.debug .hit--line{fill:none;stroke:rgba(176,58,46,.45)}

.lblg{cursor:pointer;outline:none}
.lbl{
  font-family:var(--font);font-size:15px;font-weight:600;fill:#2A2A2A;
  paint-order:stroke;stroke:#FBF8F2;stroke-width:3.8px;stroke-linejoin:round;
  transition:fill .16s ease
}
.lbl__lead{stroke:#A5977E;stroke-width:1.1;fill:none;opacity:.8;transition:stroke .16s,stroke-width .16s,opacity .16s}
.lbl__dot{fill:#A5977E;transition:fill .16s}
.lbl__hit{fill:transparent;pointer-events:all}
.lblg:hover .lbl{fill:var(--green-2)}
.lblg:hover .lbl__lead{stroke:var(--green-2);opacity:1;stroke-width:1.6}
.lblg:hover .lbl__dot{fill:var(--green-2)}
.lblg.is-active .lbl{fill:var(--green);font-weight:700}
.lblg.is-active .lbl__lead{stroke:var(--green);opacity:1;stroke-width:1.8}
.lblg.is-active .lbl__dot{fill:var(--green)}
.lblg.beyond .lbl{font-style:italic;fill:#5D3E8C}
.lblg.beyond:hover .lbl,.lblg.beyond.is-active .lbl{fill:var(--purple)}
.lblg:focus-visible .lbl{fill:var(--green)}
.lblg:focus-visible .lbl__hit{stroke:var(--green);stroke-width:1.4;stroke-dasharray:4 3}

/* ---------- Panel column ---------- */
.panel{min-height:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;background:var(--paper)}
.panel__inner{max-width:820px;margin:0 auto;padding:20px 26px 40px;position:relative}

.st-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.st-head__ic{
  width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--green-tint);border:1px solid #CBE0D2
}
.st-head__ic svg{width:28px;height:28px}
.st-title{font-size:26px;color:var(--green);letter-spacing:-.2px}
.st-sub{color:var(--grey);font-size:14.5px;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.chip{
  font-size:11.5px;font-weight:700;letter-spacing:.03em;color:#fff;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--grey);white-space:nowrap
}
.chip--ingestion{background:var(--c-ing)} .chip--digestion{background:var(--c-dig)}
.chip--absorption{background:var(--c-abs)} .chip--assimilation{background:var(--c-ass)}
.chip--egestion{background:var(--c-ege)}
.chip__n{display:inline-block;min-width:1.1em;height:1.1em;line-height:1.1em;text-align:center;
  border-radius:50%;background:rgba(255,255,255,.28);margin-right:6px;font-size:.85em}
.chip--beyond{background:#fff;color:#5A5A5A;border:1.5px dashed #9A9A9A;font-style:italic}

/* tabs */
/* The tab bar stays put while a long station scrolls. It is fully opaque so
   content passes cleanly behind it and is never half-readable through it. */
.tabs{display:flex;gap:4px;margin:16px 0 0;border-bottom:2px solid var(--edge);position:sticky;top:0;
      background:var(--paper);z-index:5;padding-top:8px;
      box-shadow:0 6px 10px -8px rgba(60,45,25,.28)}
.tab{
  background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;
  padding:9px 15px;font-size:14.5px;font-weight:600;color:var(--grey);cursor:pointer;display:flex;align-items:center;gap:7px
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--green);border-bottom-color:var(--green)}
.tab__n{font-size:11px;background:var(--edge-2);color:var(--grey);border-radius:var(--r-pill);padding:1px 7px;font-weight:700}
.tab[aria-selected="true"] .tab__n{background:var(--green);color:#fff}
.tabpane{padding-top:18px}
.tabpane[hidden]{display:none}

/* cards */
.card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-lg);padding:18px 20px;
      box-shadow:var(--shadow);margin-bottom:16px}
.card__h{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.exam-list{margin:0;padding-left:0;list-style:none}
.exam-list li{position:relative;padding:0 0 0 26px;margin-bottom:11px;font-size:16.5px;line-height:1.52}
.exam-list li:last-child{margin-bottom:0}
.exam-list li::before{
  content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--green-2);box-shadow:0 0 0 3px var(--green-tint)
}

.golden{
  background:#fff;border:2.4px solid var(--green);border-radius:var(--r-lg);padding:14px 18px;
  margin-bottom:16px;box-shadow:var(--shadow)
}
.golden__h{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green);
           margin-bottom:6px;display:flex;align-items:center;gap:7px}
.golden p{margin:0;font-size:16px;font-weight:600}

/* ---------- the colour language of the Learn tab ----------
   Seven stage colours, plus one for the food molecules and one for the
   conditions. Green is absent on purpose: it is the app's own colour and can
   no longer carry meaning. Every stage word also wears its number, so the
   coding survives colour blindness and greyscale printing.

   Stage 2 is one warm-red run in three steps — physical at the earthy end,
   chemical at the cool end, the umbrella word "digestion" between them — so
   the two kinds of digestion read as siblings without being the same colour.
   They were previously the SAME HEX, which is why they were indistinguishable.

   All inks pass WCAG AA on the paper, the card and their own chip tint
   (weakest 4.64:1), and every pair stays apart under protanopia and
   deuteranopia (worst CIE76 dE 16.7; 22.7 among the families where colour is
   the only signal). */
:root{
  --c-ing:#985C01;  --c-ing-t:#FDEDDE;
  --c-dig:#AF4A3C;  --c-dig-t:#FFEBE6;  /* stage 2, the parent: between its two children */
  --c-phy:#693100;  --c-phy-t:#F8E8DF;  /* stage 2a — the earthy end of the red run */
  --c-che:#BC235B;  --c-che-t:#FFE4E9;  /* stage 2b — the cool end of the same red run */
  --c-abs:#02719B;  --c-abs-t:#E5F0F8;
  --c-ass:#004289;  --c-ass-t:#E8EAF9;
  --c-ege:#443427;  --c-ege-t:#F0EAE6;
  --c-mol:#851E66;
  --c-cond:#676B6E;   /* conditions: neutral, because a disease is not a stage.
                         Dark enough to clear AA on the pale blue "Real science" box too,
                         which is the lightest background these words land on. */
}
/* plain bold term, coloured by the stage it belongs to */
.t{font-weight:700}
.t--ingestion{color:var(--c-ing)}    .t--physical{color:var(--c-phy)}
.t--chemical{color:var(--c-che)}     .t--absorption{color:var(--c-abs)}
.t--assimilation{color:var(--c-ass)} .t--egestion{color:var(--c-ege)}
.t--molecule{color:var(--c-mol);text-decoration:underline;text-decoration-style:dotted;
             text-decoration-thickness:1.5px;text-underline-offset:3px}
.t--condition{color:var(--c-cond);font-style:italic}

/* a stage word wears a chip carrying its number */
.tc{
  display:inline;font-weight:700;border-radius:var(--r-pill);
  padding:1.5px 5px 1.5px 3px;margin:0 .5px;white-space:normal;
  -webkit-box-decoration-break:clone;box-decoration-break:clone
}
.tc__n{
  display:inline-block;font-style:normal;font-weight:800;font-size:.78em;
  min-width:1.15em;height:1.15em;line-height:1.15em;text-align:center;border-radius:50%;
  margin-right:4px;color:#fff;vertical-align:.08em
}
.tc--ingestion   {color:var(--c-ing);background:var(--c-ing-t)} .tc--ingestion .tc__n{background:var(--c-ing)}
.tc--digestion   {color:var(--c-dig);background:var(--c-dig-t)} .tc--digestion .tc__n{background:var(--c-dig)}
.tc--physical    {color:var(--c-phy);background:var(--c-phy-t)} .tc--physical .tc__n{background:var(--c-phy)}
.tc--chemical    {color:var(--c-che);background:var(--c-che-t)} .tc--chemical .tc__n{background:var(--c-che)}
.tc--absorption  {color:var(--c-abs);background:var(--c-abs-t)} .tc--absorption .tc__n{background:var(--c-abs)}
.tc--assimilation{color:var(--c-ass);background:var(--c-ass-t)} .tc--assimilation .tc__n{background:var(--c-ass)}
.tc--egestion    {color:var(--c-ege);background:var(--c-ege-t)} .tc--egestion .tc__n{background:var(--c-ege)}
/* physical and chemical are both stage 2, told apart by colour and by the word */
.tc--physical .tc__n::after,.tc--chemical .tc__n::after{content:""}

.kw dt .t,.kw dt .tc{font-weight:700}
.exam-list li{line-height:1.62}

.legendbox{
  border:1px solid var(--edge);background:var(--card-2);border-radius:var(--r);
  padding:0 14px;margin-bottom:16px;font-size:13.5px
}
.legendbox summary{padding:11px 0;cursor:pointer;color:var(--grey);font-weight:600;list-style:none}
.legendbox summary::-webkit-details-marker{display:none}
.legendbox summary::before{content:"▸ ";color:var(--green)}
.legendbox[open] summary::before{content:"▾ "}
.legend__intro{font-size:13px;color:#4A4A4A;margin:0 0 10px;line-height:1.5}
.legend{display:flex;flex-wrap:wrap;gap:9px 12px;padding:0 0 14px}
.legend__i{font-size:13.5px}

/* the colour key, always on screen above the Learn text */
.keybar{
  background:var(--card-2);border:1px solid var(--edge);border-left:4px solid var(--green);
  border-radius:var(--r);padding:11px 15px 8px;margin-bottom:16px
}
.keybar .legend__intro{margin:0 0 9px;font-size:12.5px;color:#4A4A4A}
.keybar .legend{gap:7px 10px;padding:0}
.keybar .legend__i{font-size:13px}

/* where the topic comes back later in the course */
.later{border-left:4px solid var(--c-ass)}
.later__list{margin:0;padding:0;list-style:none}
.later__list li{font-size:15px;line-height:1.55;margin-bottom:11px;padding-left:2px}
.later__list li:last-child{margin-bottom:0}
.later__ref{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  color:#fff;background:var(--c-ass);border-radius:var(--r-pill);
  padding:2px 9px;margin-right:8px;white-space:nowrap;vertical-align:1px
}

/* videos sit in the same frame as the photographs */
.photo--video{width:100%;display:block;background:#111;cursor:default}
.photo--video:hover{filter:none}

/* keywords */
.kw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px}
.kw{background:var(--card-2);border:1px solid var(--edge);border-radius:var(--r);padding:10px 13px}
/* a key word is asked before it is answered: the definition is there but not shown until
   the reader has had a go at it, and stays shown once turned */
.kw-hint{margin:0 0 9px;font-size:13px;color:#6B6B6B}
.kw--flip{cursor:pointer;transition:border-color .15s ease,background .15s ease}
.kw--flip:hover,.kw--flip:focus-visible{border-color:#B9AE9B;background:#FFFDF9}
.kw--flip:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.kw__ask{margin:4px 0 0;font-size:12.5px;color:#8A8A8A;font-style:italic}
.kw__ask::before{content:'\21BB  ';font-style:normal}
.kw--flip dd{display:none}
.kw--flip.is-open dd{display:block;animation:kwIn .16s ease-out}
.kw--flip.is-open .kw__ask{display:none}
@keyframes kwIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kw--flip.is-open dd{animation:none}}
.kw dt{font-weight:700;color:var(--green);font-size:14.5px;margin-bottom:2px}
.kw dd{margin:0;font-size:13.5px;color:#3C3C3C;line-height:1.45}

/* where a link lands: flash the exact place, then get out of the way */
.flash{position:relative;border-radius:var(--r);animation:flashRing 2.8s ease-out 1}
@keyframes flashRing{
  0%   {box-shadow:0 0 0 3px rgba(20,87,43,.85), 0 0 0 9px rgba(20,87,43,.18); background:rgba(20,87,43,.10)}
  18%  {box-shadow:0 0 0 3px rgba(20,87,43,.25), 0 0 0 9px rgba(20,87,43,.04); background:rgba(20,87,43,.03)}
  36%  {box-shadow:0 0 0 3px rgba(20,87,43,.85), 0 0 0 9px rgba(20,87,43,.18); background:rgba(20,87,43,.10)}
  54%  {box-shadow:0 0 0 3px rgba(20,87,43,.25), 0 0 0 9px rgba(20,87,43,.04); background:rgba(20,87,43,.03)}
  72%  {box-shadow:0 0 0 3px rgba(20,87,43,.7),  0 0 0 9px rgba(20,87,43,.14); background:rgba(20,87,43,.08)}
  100% {box-shadow:0 0 0 3px rgba(20,87,43,0),   0 0 0 9px rgba(20,87,43,0);   background:transparent}
}
.exam-list li.flash{padding-left:26px;margin-left:-4px}

.backchip{
  position:sticky;bottom:14px;left:0;margin:0 0 0 4px;z-index:30;
  border:1.5px solid var(--green);background:var(--card);color:var(--green);
  border-radius:var(--r-pill);padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;
  box-shadow:var(--shadow-lg);transition:opacity .9s ease
}
.backchip:hover{background:var(--green-tint)}
.backchip.is-fading{opacity:0}

/* a highlighted word you can act on */
.t.is-peek,.tc.is-peek,.t.is-jump,.tc.is-jump{cursor:pointer}
/* Vertical padding on an inline element grows the hit area without pushing the
   lines apart, so a word is easier to tap without changing the layout. */
.t.is-peek,.tc.is-peek,.t.is-jump,.tc.is-jump{padding-top:4px;padding-bottom:4px}
.t.is-peek,.tc.is-peek{border-bottom:2px dotted currentColor}
/* the quietest of the three marks: a definition is available, nothing more. No icon —
   this is the commonest case and a marker on every one of them would be a field of them. */
/* a word the reader may not know is not a stage: no colour, no weight, only the mark */
.t--plain{color:inherit;font-weight:inherit}
.t.is-gloss,.tc.is-gloss{cursor:pointer;border-bottom:1px dotted rgba(0,0,0,.28);padding-bottom:1px}
.t.is-gloss:hover,.tc.is-gloss:hover,.t.is-gloss:focus-visible,.tc.is-gloss:focus-visible{
  border-bottom-color:currentColor;border-bottom-style:solid}
.t.is-jump,.tc.is-jump{border-bottom:1.5px solid currentColor}
.t.is-jump::after,.tc.is-jump::after{content:"\2197";font-size:.72em;vertical-align:.35em;margin-left:1px;opacity:.75}
.t.is-peek::after,.tc.is-peek::after{content:"\1F50D";font-size:.62em;vertical-align:.2em;margin-left:3px;opacity:.65}
.t.is-peek:hover,.tc.is-peek:hover,.t.is-jump:hover,.tc.is-jump:hover{background:rgba(20,87,43,.10);border-radius:3px}
.t.is-peek:focus-visible,.tc.is-peek:focus-visible,
.t.is-jump:focus-visible,.tc.is-jump:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}

/* the small picture that opens where you clicked */
.peek{
  position:absolute;z-index:120;width:min(320px,86vw);background:var(--card);
  border:1px solid var(--edge);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  overflow:hidden;animation:peekIn .14s ease-out
}
@keyframes peekIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.peek img{width:100%;height:auto;max-width:100%;display:block;background:#fff}
/* Two views of one thing, side by side — a real tooth beside the drawing of
   it, or the two radiographs together. They stack on a narrow screen, where
   side-by-side would make each half too small to read. */
/* centred, because one half is often much taller than the other and a
   short photograph stranded at the top of a tall diagram reads as a mistake */
/* A figure that will not fit its column scrolls inside its own box rather
   than shrinking its labels away. min-width:0 is the part that matters: without
   it a flex or grid ancestor happily grows to fit the wide child, and the page
   goes wider than the phone instead of the figure scrolling. */
.figscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.figscroll::-webkit-scrollbar{height:7px}
.figscroll::-webkit-scrollbar-thumb{background:#CFC7B6;border-radius:4px}
.media--fig,.pair__half{min-width:0;max-width:100%}
.pair{display:flex;gap:14px;align-items:center}
.pair__half{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.pair__half img{width:100%;height:auto;display:block;border-radius:var(--r-sm)}
.pair__half svg{width:100%;height:auto;display:block}
.pair__half .annot{width:100%}
.pair__lab{margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--grey);text-align:center}
@media (max-width:620px){.pair{flex-direction:column;gap:16px}}
.peek__fig{background:#fff;padding:6px 4px 2px}
.peek__fig svg{width:100%;height:auto;display:block}
/* A figure carries its own labels, so it needs more width than a photograph:
   at 320px the labels come out around 8px, which is not readable. The wider
   card and the larger type below bring them back to roughly footnote size. */
.peek.has-fig{width:min(430px,92vw)}
.peek__fig .fl{font-size:14px}
.peek__fig .fs{font-size:12.2px}
.peek__fig .fb{font-size:15px}
.peek__note{padding:10px 13px;font-size:13.5px;line-height:1.5;color:#3C3C3C}
.peek__credit{display:block;margin-top:6px;font-size:11px;color:var(--grey)}
.peek__x{
  position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  border:none;background:rgba(255,255,255,.9);color:#4A4A4A;font-size:16px;line-height:1;
  cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2)
}
.peek__x:hover{background:#fff;color:var(--red)}

/* "trace it on the diagram" — points at the plate instead of repeating it */
.traceBtn{
  display:flex;align-items:center;gap:9px;width:100%;margin-top:14px;
  border:1.5px solid var(--green);background:var(--green-tint);color:var(--green);
  border-radius:var(--r);padding:11px 14px;font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background .15s
}
.traceBtn:hover{background:#DDEBE1}
.traceBtn__dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none}

/* labels drawn on top of a photograph */
.annot{position:relative;display:block;line-height:0}
.annot .media__el--img,.annot img{display:block;width:100%;height:auto}
.annot__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.annot__svg line{stroke:#fff;stroke-width:2.4;opacity:.95}
.annot__svg circle{fill:#fff;stroke:#1A1A1A;stroke-width:1.2}
.annot__lab{
  position:absolute;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;
  font:700 12.5px/1 var(--font);color:#fff;background:rgba(20,25,20,.82);
  padding:4px 9px;border-radius:var(--r-pill);letter-spacing:.01em;
  box-shadow:0 1px 4px rgba(0,0,0,.35)
}
.annot__lab--big{font-size:14px;background:var(--green);padding:5px 11px}
.lb__stage{position:relative;display:block;line-height:0;max-width:100%}
.lb__stage img{max-width:100%;height:auto;max-height:78vh;object-fit:contain;background:#fff;
  border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-lg);display:block;margin:auto}
@media (max-width:620px){ .annot__lab{font-size:10.5px;padding:3px 7px} }

/* ---------- media, sitting inside the text ----------
   An image belongs under the sentence it illustrates, not in a separate tab
   the reader has to cross-reference. */
.media{
  margin:12px 0 16px;background:var(--card-2);border:1px solid var(--edge);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)
}
.media__el{width:100%;height:auto;display:block;background:#FFFDF8}
.media__el--img{margin:0 auto}
.annot{display:flex;justify-content:center}
.media__el--img{cursor:zoom-in;background:#F2EADB;transition:filter .18s}
.media__el--img:hover{filter:brightness(1.03) saturate(1.04)}
.media--video .media__el{background:#111}
.media--fig .figbox__stage{width:100%;display:block;background:#FFFDF8}
/* The place a drawing holds while js/data/figure-art.js is on its way. Its height comes
   from an inline aspect-ratio computed from the figure's own viewBox, never from a value
   here — a flat height would leave exactly the jump this box exists to prevent. */
.figwait{display:grid;place-items:center;width:100%;background:#F5F2EC;border-radius:8px;
  color:var(--grey);font-size:13px;font-style:italic}
.bootnote{margin:40px 0;color:var(--grey);font-size:15px}
.media__cap{
  padding:10px 14px;border-top:1px solid var(--edge-2);font-size:13.5px;line-height:1.5;
  color:#4A4A4A;background:var(--card)
}
.media__cap b{color:var(--green)}
.exam-list li .media{margin-left:-26px;margin-right:0}

.kindtag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--c-abs);border-radius:var(--r-pill);padding:2px 8px;margin-right:7px;
  vertical-align:1px;white-space:nowrap
}
.kindtag--fig{background:var(--grey)}

.moremedia{
  border:1px solid var(--edge);background:var(--card-2);border-radius:var(--r);
  padding:0 14px;margin-bottom:16px
}
.moremedia summary{padding:12px 0;cursor:pointer;color:var(--green);font-weight:600;
  font-size:14px;list-style:none}
.moremedia summary::-webkit-details-marker{display:none}
.moremedia summary::before{content:"▸ ";}
.moremedia[open] summary::before{content:"▾ ";}
.moremedia__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding-bottom:14px}
.moremedia__grid .media{margin:0}

.photo-missing{padding:26px 18px;text-align:center;color:var(--grey);font-size:13.5px;background:var(--card-2)}

/* ---------- Activities ---------- */
.act{background:var(--card);border:1px solid var(--edge);border-radius:var(--r-lg);padding:17px 20px 15px;
     box-shadow:var(--shadow);margin-bottom:16px;position:relative}
.act.is-right{border-color:#A9D6BA;background:linear-gradient(180deg,#F4FBF6,#fff 60px)}
.act.is-wrong{border-color:#E3B4AC}
.act__top{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.act__kind{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;
           background:var(--grey);border-radius:var(--r-pill);padding:3px 9px}
.act__kind[data-k="blank"]{background:var(--amber)} .act__kind[data-k="drag"]{background:var(--teal)}
.act__kind[data-k="mcq"]{background:var(--purple)}  .act__kind[data-k="order"]{background:var(--red)}
.act__kind[data-k="match"]{background:#2F6F5E}      .act__kind[data-k="sort"]{background:#8A5A2B}
.act__kind[data-k="ph"]{background:var(--green)}
.act__n{font-size:12px;color:var(--grey);font-weight:600}
.act__prompt{font-size:16px;font-weight:600;margin-bottom:13px;line-height:1.45}

.cloze{font-size:16.5px;line-height:2.35}
.gap{
  display:inline-block;min-width:118px;border:none;border-bottom:2.2px solid var(--amber);background:var(--amber-tint);
  border-radius:5px 5px 0 0;padding:3px 9px;font:inherit;font-size:15.5px;color:var(--ink);text-align:center;
  outline-offset:2px
}
.gap:focus{outline:2px solid var(--green);background:#fff}
.gap.ok{border-bottom-color:var(--ok);background:var(--ok-tint);color:#14572B;font-weight:600}
.gap.no{border-bottom-color:var(--bad);background:var(--bad-tint)}
.gap[disabled]{opacity:1}
.hintbtn{
  border:1px solid var(--edge);background:var(--card-2);border-radius:var(--r-pill);width:22px;height:22px;
  font-size:12px;font-weight:700;color:var(--amber);cursor:pointer;padding:0;vertical-align:2px;margin-left:3px;line-height:1
}
.hintbtn:hover{background:var(--amber-tint);border-color:var(--amber)}
.hinttext{display:block;font-size:13px;color:var(--amber);background:var(--amber-tint);border-radius:var(--r-sm);
          padding:6px 11px;margin-top:9px;border-left:3px solid var(--amber)}

/* drag & drop */
.tokens{display:flex;flex-wrap:wrap;gap:8px;padding:11px;background:var(--card-2);border:1px dashed var(--edge);
        border-radius:var(--r);margin-bottom:13px;min-height:50px;align-content:flex-start}
.tok{
  background:#fff;border:1.5px solid var(--teal);color:var(--teal);border-radius:var(--r-pill);
  padding:6px 14px;font-size:14.5px;font-weight:600;cursor:grab;user-select:none;touch-action:none;
  box-shadow:0 1px 3px rgba(0,0,0,.07);transition:transform .12s,box-shadow .12s
}
.tok:active{cursor:grabbing}
.tok.is-drag{opacity:.45}
.tok:focus-visible,.oitem:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.act__hint{font-size:12.5px;color:var(--grey);margin:2px 0 8px}

.tok.is-ghost{position:fixed;z-index:999;pointer-events:none;transform:translate(-50%,-50%) scale(1.06);
              box-shadow:var(--shadow-lg);opacity:.96}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
/* label above, drop-well below: long labels then have the full width and can
   never squeeze the well into a one-word-per-line column */
.slot{border:1px solid var(--edge);border-radius:var(--r);padding:11px 13px;background:var(--card-2);
      display:flex;flex-direction:column;gap:9px;min-height:56px}
.slot__lab{font-size:14px;font-weight:600;color:#3C3C3C;line-height:1.4}
.slot__well{
  width:100%;min-height:38px;border:1.8px dashed var(--line);border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:13.5px;color:var(--grey);padding:3px 8px;transition:.15s
}
.slot__well .tok{max-width:100%;text-align:center}
.slot__well.over{border-color:var(--teal);background:var(--teal-tint)}
.slot__well .tok{cursor:grab;box-shadow:none}
.slot.ok{border-color:#A9D6BA;background:var(--ok-tint)}
.slot.no{border-color:#E3B4AC;background:var(--bad-tint)}

/* mcq */
.opts{display:flex;flex-direction:column;gap:8px}
.opt{
  display:flex;align-items:flex-start;gap:11px;border:1.5px solid var(--edge);background:var(--card-2);
  border-radius:var(--r);padding:11px 14px;cursor:pointer;text-align:left;font-size:15.5px;transition:.14s;width:100%
}
.opt:hover{border-color:var(--purple);background:var(--purple-tint)}
.opt__k{
  width:24px;height:24px;flex:none;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:var(--grey);background:#fff
}
.opt[aria-pressed="true"]{border-color:var(--purple);background:var(--purple-tint)}
.opt[aria-pressed="true"] .opt__k{background:var(--purple);border-color:var(--purple);color:#fff}
.opt.ok{border-color:var(--ok);background:var(--ok-tint)}
.opt.ok .opt__k{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.no{border-color:var(--bad);background:var(--bad-tint)}
.opt.no .opt__k{background:var(--bad);border-color:var(--bad);color:#fff}
.opt__why{display:block;font-size:13px;color:#4A4A4A;margin-top:5px;line-height:1.45}

/* order */
.order{display:flex;flex-direction:column;gap:7px}
.oitem{
  display:flex;align-items:center;gap:11px;border:1.5px solid var(--edge);background:var(--card-2);
  border-radius:var(--r);padding:10px 13px;font-size:15px;cursor:grab;user-select:none;touch-action:none
}
.oitem.is-drag{opacity:.4}
.oitem__grip{color:var(--line);font-size:15px;letter-spacing:-2px;flex:none}
.oitem__n{width:23px;height:23px;flex:none;border-radius:50%;background:var(--red);color:#fff;display:grid;
          place-items:center;font-size:12.5px;font-weight:700}
.oitem.ok{border-color:#A9D6BA;background:var(--ok-tint)} .oitem.ok .oitem__n{background:var(--ok)}
.oitem.no{border-color:#E3B4AC;background:var(--bad-tint)} .oitem.no .oitem__n{background:var(--bad)}

/* match */
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;align-items:start}
.mcol{display:flex;flex-direction:column;gap:7px}
.mcol__h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:2px}
.mitem{border:1.5px solid var(--edge);background:var(--card-2);border-radius:var(--r);padding:10px 12px;
       font-size:14.5px;cursor:pointer;text-align:left;width:100%;display:flex;gap:8px;align-items:center;transition:.14s}
.mitem:hover{border-color:#2F6F5E}
.mitem[aria-pressed="true"]{border-color:#2F6F5E;background:#E9F3EF}
.mitem__b{width:19px;height:19px;flex:none;border-radius:5px;background:var(--edge-2);display:grid;place-items:center;
          font-size:11px;font-weight:700;color:var(--grey)}
.mitem.paired{border-style:solid}
.mitem.ok{border-color:#A9D6BA;background:var(--ok-tint)} .mitem.no{border-color:#E3B4AC;background:var(--bad-tint)}

/* diet-matching: people on the left, pie charts on the right */
.mitem--person{align-items:flex-start}
.mitem__who{display:block;color:var(--green);font-size:14.5px;margin-bottom:2px}
.mitem__note{display:block;font-size:13px;color:#4A4A4A;line-height:1.45;font-weight:400}
.mitem--chart{flex-direction:column;align-items:stretch;gap:6px;padding:12px}
.mitem--chart .mitem__b{align-self:flex-start}
.mitem__chart{display:flex;gap:12px;align-items:center}
.pie{width:104px;height:104px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}
.piekey{list-style:none;margin:0;padding:0;font-size:12px;line-height:1.55}
.piekey li{display:flex;align-items:center;gap:6px;white-space:nowrap}
.piekey i{width:10px;height:10px;border-radius:3px;flex:none}
.piekey b{font-variant-numeric:tabular-nums}

/* sort */
.bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px;margin-top:12px}
.bin{border:1.8px dashed var(--line);border-radius:var(--r);padding:10px;min-height:96px;background:var(--card-2);
     display:flex;flex-direction:column;gap:6px;transition:.15s}
.bin.over{border-color:#8A5A2B;background:#F8F1E7}
.bin__h{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8A5A2B;text-align:center;
        padding-bottom:6px;border-bottom:1px solid var(--edge-2)}
.bin .tok{border-color:#8A5A2B;color:#8A5A2B;width:100%;text-align:center;font-size:13.5px;padding:6px 10px}
.bin .tok.ok{border-color:var(--ok);color:var(--ok);background:var(--ok-tint)}
.bin .tok.no{border-color:var(--bad);color:var(--bad);background:var(--bad-tint)}

/* ph slider */
.ph{margin-top:6px}
.ph__scale{position:relative;height:26px;border-radius:var(--r-pill);margin:8px 0 2px;
  background:linear-gradient(90deg,#C0392B 0%,#E67E22 22%,#F1C40F 36%,#7DBE45 50%,#2E9E6B 64%,#1F7FA8 82%,#5B3FA0 100%)}
.ph__marks{display:flex;justify-content:space-between;font-size:11px;color:var(--grey);font-variant-numeric:tabular-nums}
.ph input[type=range]{width:100%;margin:10px 0 4px;accent-color:var(--green)}
.ph__read{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.ph__val{font-size:26px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;min-width:56px}
.ph__state{font-size:14px;font-weight:600;padding:5px 13px;border-radius:var(--r-pill);border:1.5px solid}
.ph__state.on{color:var(--ok);border-color:#A9D6BA;background:var(--ok-tint)}
.ph__state.off{color:var(--bad);border-color:#E3B4AC;background:var(--bad-tint)}
.ph__enz{width:100%;height:88px;margin-top:6px}

/* activity footer */
.act__foot{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.btn{
  border:1.5px solid var(--green);background:var(--green);color:#fff;border-radius:var(--r-pill);
  padding:8px 18px;font-size:14.5px;font-weight:600;cursor:pointer;transition:.15s
}
.btn:hover{background:var(--green-2);border-color:var(--green-2)}
.btn--ghost{background:#fff;color:var(--green)}
.btn--ghost:hover{background:var(--green-tint)}
.btn--quiet{background:#fff;color:var(--grey);border-color:var(--edge)}
.btn--quiet:hover{background:var(--card-2);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.verdict{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.verdict.ok{color:var(--ok)} .verdict.no{color:var(--bad)}
.feedback{
  margin-top:12px;padding:12px 15px;border-radius:var(--r);font-size:14.5px;line-height:1.5;border-left:3px solid
}
.feedback.ok{background:var(--ok-tint);border-color:var(--ok);color:#14572B}
.feedback.no{background:var(--bad-tint);border-color:var(--bad);color:#7A2A20}

/* ---------- Journey rail ---------- */
.rail{
  display:flex;align-items:center;gap:8px;padding:0 12px;height:var(--rail-h);background:var(--card);
  border-top:1px solid var(--edge);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin
}
.rail__track{display:flex;align-items:center;gap:6px;margin:0 auto}
.rstep{
  display:flex;align-items:center;gap:8px;border:1.5px solid var(--edge);background:var(--card-2);
  border-radius:var(--r-pill);padding:6px 13px 6px 7px;font-size:13px;cursor:pointer;white-space:nowrap;
  color:#3C3C3C;transition:.15s;font-weight:600
}
.rstep:hover{border-color:var(--green-2)}
.rstep[aria-current="true"]{background:var(--green);border-color:var(--green);color:#fff}
.rstep__n{
  width:22px;height:22px;flex:none;border-radius:50%;background:var(--edge-2);color:var(--grey);
  display:grid;place-items:center;font-size:11.5px;font-weight:700
}
.rstep[aria-current="true"] .rstep__n{background:rgba(255,255,255,.24);color:#fff}
.rstep.done .rstep__n{background:var(--ok);color:#fff}
.rstep__bar{width:26px;height:3px;border-radius:2px;background:var(--edge-2);flex:none}
.rstep__bar i{display:block;height:100%;border-radius:2px;background:var(--ok);transition:width .4s}

/* ---------- Modal ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;
       background:rgba(38,30,18,.5);backdrop-filter:blur(3px)}
.modal__box{background:var(--card);border-radius:var(--r-lg);max-width:680px;width:100%;max-height:84vh;
            overflow:auto;box-shadow:var(--shadow-lg);padding:26px 30px}
.modal__box h2{color:var(--green);font-size:22px;margin-bottom:4px}
.modal__box h3{color:var(--green);font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin:20px 0 8px}
.modal__box p,.modal__box li{font-size:15px;line-height:1.55}
.modal__box ul{padding-left:20px;margin:0}
.modal__box li{margin-bottom:6px}
.modal__close{float:right;border:1px solid var(--edge);background:var(--card-2);border-radius:var(--r-pill);
              width:32px;height:32px;font-size:17px;cursor:pointer;color:var(--grey);line-height:1}
.modal__close:hover{background:var(--red-tint);color:var(--red);border-color:var(--red)}

/* which tier a word belongs to, said plainly rather than left to be guessed */
.tier{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);
      font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tier--ext{background:#F1EDE3;color:#7A6B52;border:1px dashed #C3B69C}
.tier--sup{background:#EAF1F6;color:#3E6FA8;border:1px solid #C4D8E8}

/* ---------- Key words, gathered ---------- */
.gloss__find{width:100%;margin:14px 0 6px;padding:10px 13px;font-size:15px;font-family:inherit;
             border:1px solid var(--edge);border-radius:var(--r);background:var(--card-2);color:inherit}
.gloss__find:focus{outline:2px solid var(--green);outline-offset:1px;background:var(--card)}
.gloss__count{margin:0 0 4px;font-size:13px;color:#6B6B6B}
.gloss__grp{margin-top:18px}
.gloss__h{color:var(--green);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
          margin:0 0 8px;padding-bottom:5px;border-bottom:1px solid var(--edge)}
.gloss__dl{margin:0}
.gloss__row{padding:8px 0;border-bottom:1px solid rgba(0,0,0,.05)}
.gloss__row:last-child{border-bottom:none}
.gloss__row dt{font-weight:700;color:var(--green);font-size:14.5px}
.gloss__row dd{margin:2px 0 0;font-size:14px;line-height:1.5;color:#3C3C3C}
.gloss__row[hidden],.gloss__grp[hidden]{display:none}
.gloss__also{margin:6px 0 0;font-size:12.5px;color:#6B6B6B}
.gloss__got{display:inline-block;margin:8px 0 0;font:inherit;font-size:12.5px;cursor:pointer;
            color:var(--grey);background:none;border:1px dashed var(--edge);border-radius:var(--r-pill);padding:2px 10px}
.gloss__got:hover,.gloss__got:focus-visible{color:var(--green);border-color:var(--green);border-style:solid}
.gloss__got.is-known{color:var(--green);border-style:solid;border-color:#C4D8B8;background:#F3F7EF}
.gloss__known{margin:0 0 6px;font-size:12.5px;color:#6B6B6B}
.gloss__known button{font:inherit;font-size:12.5px;color:var(--green);background:none;border:none;
                     text-decoration:underline;cursor:pointer;padding:0}
.gloss__see{font:inherit;font-size:12.5px;color:var(--green);background:var(--card-2);
            border:1px solid var(--edge);border-radius:var(--r-pill);padding:1px 9px;margin:0 2px 2px 0;cursor:pointer}
.gloss__see:hover,.gloss__see:focus-visible{background:#FFFDF9;border-color:#B9AE9B}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(var(--rail-h) + 14px);transform:translateX(-50%) translateY(14px);
  background:var(--green);color:#fff;border-radius:var(--r-pill);padding:10px 20px;font-size:14.5px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.28s;z-index:60;max-width:88vw;text-align:center
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#updBar{bottom:calc(var(--rail-h) + 66px);background:var(--ink,#25303B)}  /* clear of a station-complete toast */

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track has a min of auto, so it grows to
     fit its widest child. One wide diagram would then stretch the whole column
     past the phone screen and the station heading would need scrolling to read. */
  .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);overflow-y:auto}
  .bodycol{border-right:none;border-bottom:1px solid var(--edge);height:min(58vh,520px)}
  .panel{overflow:visible}
  .panel__inner{padding:16px 16px 32px}
  .hdr__sub{display:none}
  .hdr__by{font-size:10.5px;opacity:.7}
  .badge{padding:1px 7px;font-size:10px;letter-spacing:.06em} .stat__lbl{display:none} .stat{padding:4px 10px 4px 5px} .stat--stations{display:none}
  .hbtn{padding:6px 11px}
  #btnHelp{width:32px;padding:0;display:grid;place-items:center;height:30px}
}
.hbtn__short{display:none}
@media (max-width:820px){
  .hdr{gap:8px;padding:8px 11px} .hdr__title{font-size:16px} .badge{padding:1px 7px;font-size:10px;letter-spacing:.06em}
  .stat__lbl{display:none} .stat{padding:4px 10px 4px 5px}
  .stat--stations{display:none}
  .hbtn{padding:6px 11px}
  .hbtn__long{display:none} .hbtn__short{display:inline;font-size:15px;font-weight:700}
  #btnHelp{width:32px;padding:0;display:grid;place-items:center;height:30px}
  .st-title{font-size:21px}
  .match{grid-template-columns:1fr}
  .panel__inner{padding:14px 13px 30px}
  .card,.act,.golden{padding:14px 15px}
  :root{--rail-h:58px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- round 13: Supplement / extension badges, question tables, figure hints, peek sheet ---- */
.sup{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--grey);border:1px solid var(--line);border-radius:4px;padding:0 5px;margin-right:7px;vertical-align:2px;line-height:1.55;cursor:help;background:var(--card-2)}
.sup--ext{text-transform:uppercase;font-size:9.5px;letter-spacing:.08em}
/* in an older 0610 syllabus but not in 2026–28: the badge names the syllabus (labs-shared/syllabus-past.json) */
.sup--old{text-transform:uppercase;font-size:9.5px;letter-spacing:.08em;color:#7A4B12;background:#FBF1E2;border-color:#DDBB85}
.tier--old{background:#FBF1E2;color:#7A4B12;border:1px solid #DDBB85;cursor:help}
.later__ref.later__ref--old{background:#FBF1E2;color:#7A4B12;border:1px solid #DDBB85;cursor:help}
.act__old{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7A4B12;background:#FBF1E2;border:1px solid #DDBB85;border-radius:4px;padding:1px 6px;cursor:help}
/* ---- Not in the syllabus for 2026–2029: the card right below What you need to know ---- */
.offsyl{background:var(--card-2,#FAF8F3);border:1px dashed #CFC6B2}
.offsyl .card__h{color:#6B5B45}
.card__h .card__hsub{font-weight:600;letter-spacing:.06em;color:var(--grey,#6B6B6B)}
.offsyl__h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7A6B52;margin:14px 0 8px}
.offsyl__h:first-of-type{margin-top:4px}
.offsyl__lead{margin:6px 0 2px;font-size:15.5px;line-height:1.5;color:#5E503C}
.qtable{overflow-x:auto;margin:-4px 0 14px}
.qtable table{border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums;min-width:280px}
.qtable th,.qtable td{border:1px solid var(--edge);padding:5px 11px;text-align:left;vertical-align:top}
.qtable thead th{background:var(--card-2);font-weight:600}
.qtable tbody th{font-weight:500;background:#fff}
.pair--stack{flex-direction:column;gap:16px;align-items:stretch}
.pair--stack .pair__half{flex:none;width:100%}
.media{position:relative}
.fighint{position:absolute;top:8px;right:8px;z-index:3;font-size:11.5px;font-weight:600;color:#fff;background:rgba(20,87,43,.86);border-radius:var(--r-pill);padding:4px 10px;pointer-events:none;transition:opacity .3s}
.fighint.is-gone{opacity:0}
.peek--sheet{position:fixed;left:0!important;right:0;top:auto!important;bottom:0;width:auto;max-width:none;max-height:62vh;overflow:auto;border-radius:14px 14px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.28);animation:none}
.peek--sheet img{max-height:34vh;width:auto;max-width:100%;margin:0 auto}
.peek--sheet .peek__x{position:sticky;top:6px;float:right}
.figlegend{list-style:none;margin:0;padding:8px 14px 10px;font-size:13px;line-height:1.5;color:#3C3C3C;border-top:1px dashed var(--edge);background:var(--card-2)}
.figlegend li{margin:0 0 3px}
.figlegend__h{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.figlegend b{color:var(--green)}
.pair__half{position:relative}
.exam-list .figlegend li{padding:0;margin:0 0 3px;font-size:13px;line-height:1.45}
.exam-list .figlegend li::before{content:none}
.exam-list .figlegend .figlegend__h{font-size:10.5px}

/* ---- the plate follows the text: camera + in-place detail ---- */
#bodySvg.is-zoomed .labels{display:none}
.bodycol.is-zoomed .tool--body{display:inline-flex}   /* wherever it currently lives */
.tool--body{display:none}
#bodySvg .detail{pointer-events:none;transition:opacity .35s ease}
#bodySvg.has-detail .art .op.is-on{opacity:.25 !important}
.detailstrip{position:absolute;left:8px;right:8px;bottom:6px;display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-size:12px;color:var(--ink);background:rgba(255,253,249,.88);border:1px solid var(--edge-2);border-radius:var(--r-pill);
  padding:4px 12px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.detailstrip.is-on{opacity:1}
.detailstrip b{font-weight:600;color:var(--green)}
.detailstrip span{font-size:10.5px;color:var(--grey);white-space:nowrap}
@media (max-width:1000px){
  .bodycol{position:sticky;top:0;z-index:4;height:min(42vh,380px)}
  .detailstrip{font-size:11px;padding:3px 10px}
  .detailstrip span{display:none}

  /* On a phone this was the fourth button in a row that wrapped, so the way back to the
     whole plate sat on a second line and pushed everything down — easy to miss when it is
     the one control you want. It goes onto the plate itself, and on the RIGHT: the left is
     where the "what happens here" and "the food is now" cards sit. */
  /* It has to live INSIDE .bodywrap: the plate's <svg> paints above the toggle row, so a
     button placed over the plate from inside that row is drawn but cannot be tapped —
     every touch lands on the plate behind it. app.js moves it in and out. */
  .bodycol.is-zoomed .bodywrap > .tool--body{
    position:absolute;top:8px;right:8px;z-index:6;
    background:rgba(255,253,249,.94);border-color:var(--green);color:var(--green);
    font-weight:700;box-shadow:0 2px 10px rgba(20,60,35,.18);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)
  }
  .bodycol__tools{position:static}
}

/* the food tracer sits on the plate's own canal; under a registered illustration it would point at the wrong structure */
#bodySvg.has-detail #bolus, #bodySvg.has-detail #bolusGlowC { opacity: 0; transition: opacity .3s; }

/* labels drawn on the plate's detail: our own, so the camera never cuts a word */
#bodySvg .detail .dl__t{font-family:Calibri,Carlito,"Segoe UI",-apple-system,sans-serif;font-weight:600;fill:#1F2A1F;paint-order:stroke;stroke:#FFFDF9;stroke-width:.34em;stroke-linejoin:round}
#bodySvg .detail .dl__l{stroke:#3A3A3A;fill:none;stroke-linecap:round}
#bodySvg .detail .dl__d{fill:#3A3A3A;stroke:#FFFDF9}

/* phone: the tab bar must not float over the sticky plate */
@media (max-width:1000px){ .tabs{position:static} }

/* an inset is the one thing on the detail layer that takes a click: full size in the lightbox */
#bodySvg .detail .inset{pointer-events:auto;cursor:zoom-in}
#bodySvg .detail .inset:hover rect:first-child{stroke:#5E7A55;stroke-width:1.2}
#bodySvg .detail .inset:focus{outline:none}
#bodySvg .detail .inset:focus rect:first-child{stroke:#5E7A55;stroke-width:1.4}

/* some stations show the plate's own drawing of the organ, undimmed, with labels over it */
#bodySvg.has-detail.keep-organ .art .op.is-on{opacity:1 !important}

/* ---- in the exam: what to write here ---- */
.examfocus{background:#FFF8E6;border:1.5px solid #E2B95F;border-radius:var(--r);padding:12px 15px;margin-top:14px}
.examfocus__h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8A5A0E;margin-bottom:7px}
.examfocus ul{margin:0;padding-left:19px}
.examfocus li{font-size:14.5px;color:#3A2E14;margin-bottom:7px;line-height:1.5}
.examfocus li:last-child{margin-bottom:0}
.examfocus__tag{color:#8A5A0E}
/* going further: one list, three kinds of tag */
.later__ref--ib{background:#EFE9F8;color:#4C2E85;border-color:#C9B8E6}
.later__ref--beyond{background:#F1F1EE;color:#5A5A5A;border-color:#C9C9C4;font-style:italic}
/* the zoom-in cue between an inset and the picture it is a piece of: a filled cone opening from
   the boxed piece to the enlarged view, every line drawn over a pale halo so it reads on a dark
   micrograph as clearly as on a pale illustration */
#bodySvg .detail .dl__zoomcone{fill:#E8A33D;opacity:.2;stroke:none}
#bodySvg .detail .dl__zoomhalo{stroke:#FFFDF9;fill:none;opacity:.9;stroke-linejoin:round;stroke-linecap:round}
#bodySvg .detail .dl__zoomedge{stroke:#A85E12;fill:none;stroke-linecap:round}
#bodySvg .detail .dl__zoombox{stroke:#A85E12;fill:none;stroke-linejoin:round}
#bodySvg .detail .dl__zoomtick{stroke:#5E3208;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---- instant tooltips on the badges (hover, keyboard focus, or a tap) ---- */
.tip{position:relative;cursor:help}
.tip::after{
  content:attr(data-tip);position:absolute;left:0;top:calc(100% + 7px);z-index:40;
  width:max-content;max-width:min(300px,72vw);white-space:normal;text-align:left;
  background:#1F2A1F;color:#fff;font-size:12.5px;font-weight:500;line-height:1.38;letter-spacing:0;text-transform:none;font-style:normal;
  padding:7px 11px;border-radius:7px;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .1s,transform .1s
}
/* near the right edge of the header the tooltip would run off the page */
.tip--right::after{left:auto;right:0}
.tip--right::before{left:auto;right:14px}
.tip::before{
  content:"";position:absolute;left:9px;top:calc(100% + 1px);border:6px solid transparent;border-top-width:0;border-bottom-color:#1F2A1F;
  opacity:0;pointer-events:none;transition:opacity .1s
}
.tip:hover::after,.tip:hover::before,.tip:focus-visible::after,.tip:focus-visible::before,.tip.is-open::after,.tip.is-open::before{opacity:1;transform:none}
.tip:focus{outline:none}
.tip:focus-visible{box-shadow:0 0 0 2px var(--green)}

/* ---- a magnifying lens on a figure opens its close-up ---- */
.figbox__stage .fig-lens{cursor:pointer}
.figbox__stage .fig-lens:focus{outline:none}
.figbox__stage .fig-lens:focus-visible .lens__glass,.figbox__stage .fig-lens:hover .lens__glass{stroke-width:3;fill:#FFF3D6}
.figbox__stage .lens__chip rect{fill:#FFFDF9;stroke:#14572B;stroke-width:1.5}
.figbox__stage .fig-lens:focus-visible .lens__chip rect,.figbox__stage .fig-lens:hover .lens__chip rect{fill:#FFF3D6;stroke-width:2.4}
.figbox__stage.is-cell .lens__chip{display:none}      /* the enlarged cell opens here */
.figbox__stage .fig-cell{display:none}
.figbox__stage.is-cell .fig-cell{display:block}
.figbox__stage.is-cell .fig-lens .lens__glass{fill:#FFE7A8}
.figbox__stage .fig-cell__close{cursor:pointer}
.examfocus__qa{margin:6px 0 0;display:grid;grid-template-columns:minmax(0,1fr);gap:2px 0}
.examfocus__qa dt{font-weight:600;color:#3A2E14;margin-top:5px}
.examfocus__qa dd{margin:0 0 2px 0;padding-left:14px;color:#5A4A1E;border-left:2px solid #E2B95F}

/* ---- Follow the food: the five processes, one card over the plate ---- */
.tourcard{
  position:absolute;left:10px;right:10px;top:50px;z-index:12;
  background:rgba(255,253,249,.96);border:1.5px solid var(--green);border-radius:var(--r-lg);
  padding:10px 14px 10px;box-shadow:var(--shadow-lg);font-size:13.5px;line-height:1.45;color:var(--ink)
}
.tourcard__top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.tourcard__step{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
/* one thing to read at a time: the eyebrow says which, the line says it */
.tourcard__say{margin:0 0 8px}
.tourcard__eyebrow{margin:0 0 3px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.tourcard__line{margin:0;font-size:13px;line-height:1.45;color:#3A4A3A}
.tourcard__line--def{font-weight:600;color:var(--ink)}
.tourcard__btns{display:flex;gap:6px;flex-wrap:wrap}
.tourcard__btns .btn{padding:4px 12px;font-size:12.5px}
.tourcard__btns .btn[disabled]{opacity:.45;cursor:default}
#bodySvg .tourfx circle{filter:drop-shadow(0 0 1px rgba(0,0,0,.35))}
.tourcard--bottom{top:auto;bottom:12px}
.tourcard__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.tourcard__more{font-size:11px;color:var(--grey);text-align:right;line-height:1.35;display:flex;flex-direction:column;align-items:flex-end}
.tourcard__link{background:none;border:0;padding:0;font:inherit;font-size:11.5px;font-weight:700;color:var(--green);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.tourcard__link:hover{color:#0D3D1E}
/* a graph or photograph inside a question */
.qimg{margin:2px 0 14px;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:8px 10px 6px;max-width:560px}
.qimg img{display:block;width:100%;height:auto}
.qimg figcaption{font-size:12.5px;color:var(--grey);margin-top:6px}
/* the enzymes recap: a little always, the rest on request */
.recap{border-left:4px solid var(--c-chem,#B23A6B)}
.recap__intro{margin:0 0 10px;font-size:16px;line-height:1.55}
.recap details{border:1px solid var(--edge);border-radius:var(--r);background:var(--card-2);padding:0}
.recap summary{cursor:pointer;padding:10px 14px;font-weight:700;color:var(--green);list-style:none;display:flex;align-items:center;gap:8px}
.recap summary::before{content:"▸";display:inline-block;transition:transform .15s}
.recap details[open] summary::before{transform:rotate(90deg)}
.recap summary::-webkit-details-marker{display:none}
.recap__body{padding:4px 14px 14px}
.recap__h{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin:14px 0 6px}
.recap__body ul{margin:0;padding-left:19px}
.recap__body li{font-size:15px;line-height:1.55;margin-bottom:7px}
.recap__figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:8px 0 4px}
.recap__figs figure{margin:0;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:8px}
.recap__figs img{display:block;width:100%;height:auto}
.recap__figs figcaption{font-size:12.5px;color:#3C3C3C;margin-top:6px;line-height:1.4}
.recap__exam{background:#FFF8E6;border:1.5px solid #E2B95F;border-radius:var(--r);padding:10px 14px;margin-top:12px}
.recap__exam .recap__h{color:#8A5A0E;margin-top:0}
.recap b,.recap__figs figcaption b{color:#8A2C55;font-weight:700}
.recap__figs figcaption{font-size:13.5px;color:#2E2E2E;line-height:1.5}
.recap__figs{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* the tour card moves between top and bottom with a fade and a drift, never a jump */
.tourcard{transition:opacity .3s ease,transform .3s ease}
.tourcard.is-moving{opacity:0;transform:translateY(var(--drift,8px))}
/* what the card is saying changing inside a scene: fade the words, do not blink them */
.tourcard__say{transition:opacity .24s ease}
.tourcard__say.is-swap{opacity:0}
/* the badge is loud while the definition is being read and quiet once the commentary starts,
   so there is only ever one thing asking to be read */
.tourcard__chip .chip{transition:font-size .25s ease,padding .25s ease,opacity .25s ease}
.tourcard.is-notes .tourcard__chip .chip{font-size:10px;padding:2px 8px;opacity:.8}
.tourcard.is-notes .tourcard__chip .chip__n{margin-right:4px}
#bodySvg .tourfx{transition:opacity .3s ease}
@media (prefers-reduced-motion:reduce){.tourcard,.tourcard__say,.tourcard__chip .chip,#bodySvg .tourfx{transition:none}.tourcard.is-moving{opacity:1;transform:none}.tourcard__say.is-swap{opacity:1}}
/* a spotlit organ: the drawn organ itself lights up, so nothing is traced behind its neighbours */
#bodySvg .art .op.is-spot{filter:saturate(1.5) brightness(1.08) drop-shadow(0 0 2.4px #E8A33D) !important;opacity:1 !important}
/* the key words on the plate: what happens here, and what the food is called at this point.
   Plain ink cards with square corners — the five processes own the round coloured chips, and a
   second coloured pill would read as part of that system when it is not. */
#bodySvg .detail .dl__keycard{fill:#FFFDF9;stroke:#4A4A4A;opacity:.97}
#bodySvg .detail .dl__keybar{fill:#2B2B2B;stroke:none}
#bodySvg .detail .dl__key text{font-family:Calibri,Carlito,"Segoe UI",-apple-system,sans-serif;stroke:none;paint-order:normal}
#bodySvg .detail .dl__keycap{font-weight:600;fill:#6B6B6B;letter-spacing:.1em}
#bodySvg .detail .dl__keyword{font-weight:800;fill:#1F2A1F;letter-spacing:.05em}
#bodySvg .detail .dl__keysub{font-weight:600;fill:#4A4A4A}
#bodySvg .detail .dl__shot{pointer-events:auto;cursor:zoom-in}

/* "How to use": what you need in the first minute is open; the rest folds away, so the
   panel is short enough to be read at all. Nothing was deleted, only folded. */
.helpmore{margin:10px 0 0;border-top:1px solid var(--edge);padding-top:8px}
.helpmore > summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--green);list-style:none;padding:2px 0}
.helpmore > summary::-webkit-details-marker{display:none}
.helpmore > summary::before{content:"▸ ";display:inline-block;transition:transform .15s ease}
.helpmore[open] > summary::before{content:"▾ "}
.helpmore > summary:hover{color:#0D3D1E}
.helpmore ul{margin:6px 0 2px}



/* the saving dialog: who you are, and the Google button */
.signinbox{margin:10px 0 4px;min-height:44px;display:flex;justify-content:center}
.who{margin:8px 0 2px;font-size:13.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* a narrow phone: the header wraps onto two rows rather than running off the screen */
@media (max-width:540px){
  .hdr{flex-wrap:wrap;row-gap:6px;padding:8px 10px}
  .hdr__mark{flex:1 1 100%;overflow:visible}
  .hdr__spacer{display:none}
  .hdr__stats{flex:1 1 100%;flex-wrap:wrap;gap:6px}
  .hbtn{padding:5px 9px;font-size:12.5px}
  .stat{padding:3px 9px 3px 4px}
  #btnReset .hbtn__long{display:none} #btnReset .hbtn__short{display:inline;font-size:13px;font-weight:600}
}
/* the other number of a term, printed small beside it in the glossary and on the key-word cards */
.num{display:inline-block;margin-left:7px;font-size:11.5px;font-weight:500;color:var(--grey);vertical-align:1px;white-space:nowrap}

/* ---------- phone and upright tablet: the plate pinned above the notes ----------
   On a laptop the plate stays put while the notes scroll; on a phone it scrolled away with them and
   the animations went out of sight. Now it is pinned at the top of the scrolling stage, at a height
   that leaves the notes room, with a button that folds it to a strip for a reader who wants the notes
   alone. A screen too short for both (a phone held sideways) keeps the old behaviour: it scrolls away. */
.fold{display:none;margin-left:auto;white-space:nowrap}
@media (max-width:1000px) and (min-height:561px){
  .bodycol{position:sticky;top:0;z-index:4;height:min(42vh,380px);box-shadow:0 2px 10px rgba(20,60,35,.14)}
  .tabs{position:static}
  .fold{display:inline-flex}
  .bodycol.is-folded{height:auto;min-height:0}
  .bodycol.is-folded .bodywrap{position:absolute;left:0;right:0;top:46px;height:320px;visibility:hidden}   /* kept at a real size: the drawing's geometry must stay sane while it is out of sight */
  .bodycol.is-folded .detailstrip,.bodycol.is-folded .bodycol__tools > :not(.fold){display:none}
}
@media (max-width:1000px) and (max-height:560px){ .bodycol{position:static} }

/* the plate's tool row on a phone: one line each, the hint clamped to two lines */
@media (max-width:1000px){
  .tool{white-space:nowrap}
  .bodycol__tools{padding:6px 10px;gap:4px 6px;background:#FFFDF9}
}
/* the short button labels up to 1000px — placed after the base rule that hides them, which would otherwise win */
@media (max-width:1000px){ .hbtn__long{display:none} .hbtn__short{display:inline;font-size:15px;font-weight:700} }

/* up to 820px the header takes two rows — the name and byline above, the counts and buttons below — so the name is never cut short on an upright tablet */
@media (max-width:820px){ .hdr{flex-wrap:wrap;row-gap:6px} .hdr__mark{flex:1 1 100%;overflow:visible} .hdr__spacer{display:none} .hdr__stats{flex:1 1 100%} }
/* the way back shares the first row with the name (the name and byline stack beside it if they must), so the header is no taller than before it moved (14 Oct 2026) */
@media (max-width:820px){ .hbtn--back + .hdr__mark{flex:1 1 0;min-width:0;flex-wrap:wrap;row-gap:2px} }
/* a laptop: the way back says it short (← The body); the lab's name never shrinks to "D…" and the byline is never cut: the subtitle,
   which only ever showed as "Top…" here, goes, and the byline steps under the name when the row is full, as it does on a tablet (14 Oct 2026) */
@media (max-width:1440px){ .hbtn--back .hbtn__long{display:none} .hbtn--back .hbtn__short{display:inline} .hdr__sub{display:none} .hdr__mark{flex-wrap:wrap;row-gap:0} .hdr__title{line-height:1.1} .hdr__by{line-height:1.15} }
@media (min-width:821px){ .hdr__title{flex-shrink:0} }
/* the way back's short words are the pill's own size, not the 15 px of the icon-like short labels (A–Z, ?); on a phone a long name
   (Classification Lab) goes onto two lines rather than being cut (14 Oct 2026) */
.hbtn--back .hbtn__short{font-size:inherit;font-weight:inherit}
@media (max-width:820px){ .hbtn--back + .hdr__mark .hdr__title{white-space:normal;flex:0 1 auto;min-width:0} }
/* a small phone (370 px or less: 360 and 320): the way back and the name have the first row to themselves, so the name and the byline are
   never cut; the IGCSE 0610 badge wraps to start the second row, beside the counts (14 Oct 2026) */
@media (max-width:370px){ .hbtn--back + .hdr__mark{flex:1 1 calc(100% - 140px)} .hdr__stats{flex:1 1 0;min-width:0} .hbtn--back ~ .badge{align-self:flex-start;margin-top:8px} }

/* a tablet held flat (1024px) and every narrower screen: no subtitle, and a smaller name up to 1000px, so the name is never cut short */
@media (max-width:1100px){ .hdr__sub{display:none} }
@media (max-width:1000px){ .hdr__title{font-size:16px} }

/* the compact header up to 1100px — a tablet held flat included — with the byline allowed onto a second line, so the name is never cut short.
   Last in the file on purpose: the base rule that hides the short labels would otherwise win. */
@media (max-width:1100px){
  .badge{padding:1px 7px;font-size:10px;letter-spacing:.06em} .stat__lbl{display:none} .stat{padding:4px 10px 4px 5px} .stat--stations{display:none}
  .hbtn{padding:6px 11px} #btnHelp{width:32px;padding:0;display:grid;place-items:center;height:30px}
  .hbtn__long{display:none} .hbtn__short{display:inline;font-size:15px;font-weight:700}
  .hdr__title{font-size:16px} .hdr__mark{flex-wrap:wrap;row-gap:0}
}

/* folded: the column clips, so nothing of the drawing — not even a part that sets its own visibility — shows below the strip or catches a tap */
@media (max-width:1000px) and (min-height:561px){ .bodycol.is-folded{overflow:hidden} .bodycol.is-folded .bodywrap{pointer-events:none} .bodycol.is-folded .bodywrap *{visibility:hidden} }

/* the pinned plate paints above everything in the notes — the numbered pins, tags and tab bar carry their own z-index — and below tooltips, toasts, sheets and modals */
@media (max-width:1000px) and (min-height:561px){ .bodycol{z-index:35} }

/* A lab step replaces the body with its own apparatus, so the canal's toggles go with it.
   The fold button stays: on a phone it still folds whatever the plate is showing. */
.bodycol.is-lab #tJourney,
.bodycol.is-lab #tLabels,
.bodycol.is-lab #tBeyond,
.bodycol.is-lab #tBody { display:none; }
#tDiagram { display:none; }
.bodycol.is-lab #tDiagram { display:inline-flex; }
/* It is the only control on this plate and it was read as decoration, so it is
   filled rather than outlined, and says what it will show. */
#tDiagram{
  background:#A16207; color:#FFFDF9; border-color:#A16207; font-weight:600;
  box-shadow:0 1px 2px rgba(60,45,25,.18), 0 4px 10px rgba(60,45,25,.16);
}
#tDiagram::before{ content:"\29C9\00a0\00a0"; font-weight:400; }
#tDiagram:hover{ background:#7A4F07; border-color:#7A4F07; }
#tDiagram[aria-pressed="true"]{ background:#14572B; border-color:#14572B; }
#tDiagram[aria-pressed="true"]:hover{ background:#0E3D1E; border-color:#0E3D1E; }
/* Filled and coloured, the button is still walked past, so a note points at it whenever
   the bench is showing. It steps aside while the diagram is up and comes back after. */
#tDiagramHint{ display:none; }
.bodycol.is-lab #tDiagramHint{
  display:inline-flex; align-items:center; gap:.3em; white-space:nowrap;
  font:600 12.5px/1.2 Calibri,Carlito,"Segoe UI",-apple-system,sans-serif; color:#A16207;
}
.bodycol.is-lab #tDiagramHint::before{ content:"\2190"; font-size:1.2em; line-height:1; }
.bodycol.is-lab #tDiagram[aria-pressed="true"] ~ #tDiagramHint{ display:none; }
/* The limits of the model had been a note at the foot of the figure, where it was read past
   however large it was set. It is a button now: it owns the words instead of competing with
   the drawing for room, and the drawing gets that room back. */
#tLimits { display:none; }
.bodycol.is-lab #tLimits{
  display:inline-flex; background:#A8322A; color:#FFFDF9; border-color:#A8322A; font-weight:600;
  box-shadow:0 1px 2px rgba(80,25,20,.2), 0 4px 10px rgba(80,25,20,.16);
}
.bodycol.is-lab #tLimits::before{ content:"\26A0\FE0E\00a0\00a0"; font-weight:400; }
.bodycol.is-lab #tLimits:hover{ background:#7E2119; border-color:#7E2119; }
.limits{ margin:.65em 0; padding-left:1.15em; }
.limits li{ margin:.5em 0; }
/* On a phone these two controls wrapped the plate's toolbar onto a second row, and the row
   comes straight off the height of the drawing — a fifth of the label size. The toolbar is
   kept to one row there: the note goes, its work already done by two filled, coloured
   buttons on a bar that now holds only three things, and the red one says its own name. */
#tLimits .lbl-short{ display:none; }
@media (max-width:560px){
  .bodycol.is-lab #tDiagramHint{ display:none; }
  #tLimits .lbl-long{ display:none; }
  #tLimits .lbl-short{ display:inline; }
}

/* the maker's name, wherever it appears: a quiet link out to who made this. Same dotted
   underline the header credit already uses, so it reads as a link without shouting. */
.by-me{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.by-me:hover,.by-me:focus-visible{border-bottom-style:solid}

/* A station's Practise tab, on its second go or once something is answered: which go it is, how
   the first go went, and Practise again (js/app.js paintGoLine). */
.goline{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--card-2);border:1px solid var(--edge);border-radius:var(--r-lg);
  padding:9px 14px;margin:0 0 12px;font-size:14.5px;color:var(--ink)}
.goline span:empty{display:none}
.goline .btn{margin-left:auto}
.goline--bare{background:none;border:0;padding:0}