/* ============================================================
   Plants Lab — IGCSE 0610 Topics 6, 8, 14.5, 16.3 and 18.2
   The frame, header, panel, activities and rail are the other labs', so a student
   moving between labs finds the same chrome. What is this lab's own is at the end: the
   plant in daylight in the left column, the colour language of the plant topics, the
   Learn-tab widgets and the two activity types borrowed from the Classification Lab.
   ============================================================ */
: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);


  --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 Plants hub's green,
   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:#1C7442;--lab-2:#155C34;--lab-tint:#E6F2EA}
.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;flex:none}
.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: "students miss it… they don't know how to go back"): 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(--red)} .submsg.ok{color:var(--green-2)}
.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(360px,42%) minmax(0,1fr);min-height:0}

/* ---------- 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__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-part{margin:14px -20px 12px;padding:14px 20px 12px;background:var(--green-tint);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.exam-part__h{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.exam-part .exam-list > li:last-child{margin-bottom:0}
@media (max-width:820px){ .exam-part{margin:12px -15px 10px;padding:12px 15px 10px} }
.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)
}

/* the mistake students make: a faint red ground so it reads as the important one, the heading on a yellow marker */
.golden{
  background:#FFF3F0;border:2.4px solid #C94A3D;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:#A83A2E;
  background:linear-gradient(180deg,transparent 18%,#FFE98A 18%,#FFE98A 90%,transparent 90%);display:inline-block;padding:0 6px 0 4px;margin-left:-4px;
           margin-bottom:6px;display:flex;align-items:center;gap:7px}
.golden p{margin:0;font-size:16px;font-weight:600}

.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__out{display:inline-block;margin-left:6px;font-size:12.5px;font-weight:600;color:#fff;
            background:var(--teal);border-radius:var(--r-pill);padding:2px 10px;text-decoration:none}
.later__out:hover{filter:brightness(1.08)}
.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
}
.peek.peek--fig{width:min(420px,92vw)}
@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%}
.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%;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%;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__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(--green-2);background:var(--green-tint);color:#14572B;font-weight:600}
.gap.no{border-bottom-color:var(--red);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(--green-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(--green-2);background:var(--green-tint)}
.opt.ok .opt__k{background:var(--green-2);border-color:var(--green-2);color:#fff}
.opt.no{border-color:var(--red);background:var(--bad-tint)}
.opt.no .opt__k{background:var(--red);border-color:var(--red);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(--green-tint)} .oitem.ok .oitem__n{background:var(--green-2)}
.oitem.no{border-color:#E3B4AC;background:var(--bad-tint)} .oitem.no .oitem__n{background:var(--red)}

/* 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(--green-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(--green-2);color:var(--green-2);background:var(--green-tint)}
.bin .tok.no{border-color:var(--red);color:var(--red);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(--green-2);border-color:#A9D6BA;background:var(--green-tint)}
.ph__state.off{color:var(--red);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(--green-2)} .verdict.no{color:var(--red)}
.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(--green-tint);border-color:var(--green-2);color:#14572B}
.feedback.no{background:var(--bad-tint);border-color:var(--red);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(--green-2);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(--green-2);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, 64px) + 66px)}  /* clear of a station-complete toast */
.bootnote{margin:40px 0;color:var(--grey);font-size:15px}
/* <picture> is display:inline by default. .finder__stage is position:relative and every pin
   is placed from stage.getBoundingClientRect() as a percentage, so an inline wrapper's
   baseline gap would drift every pin off the feature it names. */
picture{display:block;line-height:0}

/* ---------- 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}
  .platecol{border-right:none;border-bottom:1px solid var(--edge);height:min(64vh,560px)}
  .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}
}
/* 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}
}
@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}

/* ---- 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}

/* ---- 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)}

/* ============================================================
   From here down: what is this lab's own.
   ============================================================ */

/* ---------- the plant, in daylight ----------
   The left column is the Plants Hub's plant, drawn by the shared js/plant-draw.js, so a
   student arriving from the hub sees the same picture. The sky is the column's own;
   the soil is drawn in the SVG, so the two meet at the horizon whatever the column's shape. */
:root{
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.platecol{
  position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column;color:#1B2A22;
  background:#DDEFF7;background-image:linear-gradient(180deg,#CFE6F3 0%,#E2F0F4 36%,#F3EFDF 58%,#8E5F36 62%,#6B4426 100%)
}
.field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.field__sun{position:absolute;inset:0;background:radial-gradient(40% 32% at 62% 8%,rgba(255,236,170,.55),transparent 70%)}
.field__haze{position:absolute;left:0;right:0;top:44%;height:18%;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,250,235,.55) 60%,rgba(255,250,235,0))}
.platecol__tools{position:relative;z-index:6;display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:46px}
.platecol__hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#4E6357}
.tool{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#1B2A22;cursor:pointer;
  border:1px solid rgba(27,42,34,.28);border-radius:999px;padding:6px 12px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .15s,color .15s
}
.tool:hover{border-color:rgba(27,42,34,.6)}
.tool[hidden]{display:none}
.platewrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0}
.platewrap svg#plant{width:100%;height:100%;display:block;overflow:hidden}
.said{position:relative;z-index:4;text-align:center;padding:0 14px 12px;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(180deg,rgba(90,58,32,0),rgba(70,44,24,.55))}
.said__name{display:block;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--c,#FFF7E6)}
.said__note{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#F1DDBF;margin-top:3px}
/* a station that stands something else on the bench: the potometer takes the whole column */
.platecol.is-bench,.platecol.is-sim{background:#F3EFE4;background-image:none}
.platecol.is-bench .field,.platecol.is-bench .platewrap,.platecol.is-bench .platecol__tools,.platecol.is-bench .said{display:none}
/* a simulation standing where the plant is, while the student answers beside it. Unlike the
   bench this KEEPS the tools row, because that row now carries the way back to the plant. */
.platecol.is-sim .field,.platecol.is-sim .platewrap,.platecol.is-sim .said{display:none}
.platecol.is-sim .tool--whole,.platecol.is-sim .platecol__hint{display:none}
.sim{flex:1;min-height:0;overflow:auto;padding:0 14px 16px;display:flex;flex-direction:column}
/* a lone drawing sits in the middle of the column; auto margins centre it without the
   clipping that justify-content:center causes once the content is taller than the box */
.sim > .ax__pack{margin-top:auto;margin-bottom:auto;width:100%}
.sim > .ax__pack .ax__stage{border:0;background:transparent;padding:0}
.sim > .ax__pack .ax__key{margin-top:10px}
.sim > .ax__pack .ax__log{margin-top:8px;padding:9px 11px;font-size:12.5px;line-height:1.55}
.sim[hidden]{display:none}
.sim .widget{margin-top:0;border:none;box-shadow:none;background:transparent;padding:0}
.tool--sim{margin-right:auto}
/* The widgets' own narrow layouts are VIEWPORT media queries, so in a 430-605 px column on a
   1440 px screen they stay two- and three-column and overflow. These are required, not polish. */
.sim .ind__row,.sim .tubes{grid-template-columns:1fr}
.sim .st{grid-template-columns:1fr}
.sim .fl,.sim .pt,.sim .ad{grid-template-columns:1fr}
.sim .po{grid-template-columns:1fr}
.bench{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:18px 18px 20px}
.bench[hidden]{display:none}
.bench .po__stage{width:100%;flex:none}
.bench .po__live{flex:none}
.po__live{display:flex;flex-direction:column;gap:10px}
.po__live .po__clock{margin-top:2px}
.po__live .po__result{margin-top:0}
.po__slot:empty{display:none}
.po__slot{display:flex;flex-direction:column;gap:10px}
.po--split .po{grid-template-columns:1fr}
.po--split .po__ctl{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;align-items:end}
.po--split .po__ctl .po__row:first-child,.po--split .po__ctl .po__snote{grid-column:1 / -1}
.po--split .po__btns{margin-left:0;margin-top:12px}
@media (max-width:1000px){ .platecol.is-bench{display:none} }
.tag{position:absolute;z-index:5;pointer-events:none;opacity:0;transform:translate(-50%,-100%) scale(.96);transition:opacity .22s,transform .22s;white-space:nowrap}
.tag.on{opacity:1;transform:translate(-50%,-100%) scale(1)}
.platewrap.is-flying .tag{opacity:0}
.tag__pill{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:#14231A;background:var(--c,#B8F08E);padding:5px 11px;border-radius:2px;box-shadow:0 0 22px color-mix(in srgb,var(--c,#B8F08E) 55%,transparent)}

/* ---------- the colour language of the Learn tab ----------
   Four inks, one per thing the plant is doing, each dark enough to read on paper (all
   clear WCAG AA on the paper and the card). Green is the app's own colour and carries no
   meaning in the text. */
:root{ --k-water:#0B6A8C; --k-food:#8A5A0E; --k-repro:#A33569; --k-grow:#5B3FA0; }
.t{font-weight:700}
.t--water{color:var(--k-water)} .t--food{color:var(--k-food)} .t--repro{color:var(--k-repro)} .t--grow{color:var(--k-grow)}
.kw dt .t{font-weight:700}
.exam-list > li{line-height:1.62}
.legend__intro{font-size:13px;color:#4A4A4A;margin:0 0 10px;line-height:1.5}
.legend{display:flex;flex-wrap:wrap;gap:9px 12px}
.legend__i{font-size:13.5px}
.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}
.later{border-left:4px solid var(--k-grow)}
.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(--k-grow);
  border-radius:var(--r-pill);padding:2px 9px;margin-right:8px;white-space:nowrap;vertical-align:1px}
.chip--k{background:var(--k-water)}
.chip--water{background:var(--k-water)} .chip--food{background:var(--k-food)} .chip--repro{background:var(--k-repro)} .chip--grow{background:var(--k-grow)}
.chip--skill{background:#3C3C3C}

/* ---------- the Learn tab's widgets ---------- */
.widget{margin:14px 0 6px;border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--card-2);padding:14px 16px 14px;box-shadow:var(--shadow)}
.widget__h{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.widget__h .widget__try{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:#fff;background:var(--green);border-radius:var(--r-pill);padding:2px 9px}
.widget__ask{font-size:14.5px;color:#3C3C3C;margin:0 0 12px;line-height:1.45}
.widget__note{font-size:13px;color:var(--grey);margin:10px 0 0;line-height:1.45}
.widget__done{margin:10px 0 0;font-size:13.5px;font-weight:600;color:var(--green-2)}
.exam-list li .widget,.exam-list li .media,.exam-list li .photo,.exam-list li .ctable{margin-left:-26px}

/* A tall, narrow diagram — a xylem vessel, a sieve tube, a root tip — set under its sentence
   left a column of empty paper 490px wide beside it. app.js puts a portrait figure first in its
   sentence and this stands it in the margin, so the sentence closes round it. Marked by
   widgets.js from the size the build recorded, so nothing jumps when the file arrives.
   Below 780px there is no room for two columns and it goes back to sitting on its own. */
@media (min-width:780px){
  .exam-list li .photo--portrait{
    float:left;width:clamp(170px,26%,228px);max-width:none;
    margin:4px 20px 8px -26px;shape-margin:14px
  }
  /* The labels on these two drawings run down opposite sides — the xylem's on its left, the
     phloem's on its right — so standing them on opposite sides of the page turns them to face
     each other, and stops two pictures in a row leaving their white space in the same place. */
  .exam-list li .photo--portrait.photo--right{float:right;margin:4px 0 8px 22px}
  .exam-list li .photo--portrait img{width:100%;height:auto}
  .exam-list li .photo--portrait figcaption{font-size:10.5px;line-height:1.38}
  /* the sentence must be at least as tall as its picture, and nothing structural may ride up
     beside it: a widget, an activity or the next block starts below */
  .exam-list li:has(> .photo--portrait){min-height:1px}
  .exam-list li:has(> .photo--portrait)::after{content:"";display:block;clear:both}
  .exam-list li .widget,.exam-part,.golden,.examfocus,.card__h{clear:both}
}
.wbtn{font:inherit;font-size:13px;font-weight:600;color:var(--green);background:#fff;border:1.5px solid var(--green);border-radius:var(--r-pill);padding:5px 12px;cursor:pointer;transition:.14s}
.wbtn:hover{background:var(--green-tint)}
.wbtn[aria-pressed="true"],.wbtn.is-on{background:var(--green);color:#fff}
.wbtn--quiet{color:var(--grey);border-color:var(--edge)}
.wbtn--quiet:hover{color:var(--ink);background:var(--card-2)}

/* a lesson video, in the same frame as the photographs */
.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:#111}
.media--video .media__el{max-height:420px;object-fit:contain}
.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__credit{display:block;margin-top:4px;font-size:11.5px;color:var(--grey)}
.kindtag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--k-grow);border-radius:var(--r-pill);padding:2px 8px;margin-right:7px;vertical-align:1px;white-space:nowrap}

/* the feature finder and the pinned pictures: the shared widgets' classes */
.finder{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,1fr);gap:30px;align-items:start}
.finder__stage{position:relative;line-height:0;border-radius:var(--r);overflow:visible;background:#1B2226}
.finder__stage img{width:100%;height:auto;display:block;border-radius:var(--r)}
.finder__credit{font-size:11px;color:var(--grey);margin:6px 0 0;line-height:1.4}
.finder__credit a{color:inherit}
.finder__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
@media (max-width:620px){ .finder{grid-template-columns:1fr} }
.finder.finder--narrow{grid-template-columns:1fr}
.finder__tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.finder__tools .finder__credit{margin:0}
.pins{position:relative}
.pins__lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:3}
.pins__halo{stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.9}
.pins__line{stroke:#14572B;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.pin{position:absolute;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid #fff;z-index:4;
  background:rgba(20,87,43,.62);color:#fff;font:700 11px/1 var(--font);display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
.pin:hover{background:rgba(20,87,43,.9)}
.pin.is-found{animation:none;background:#fff;color:var(--green);border-color:var(--green)}
.pin--extra{background:rgba(90,90,90,.62)} .pin--extra:hover{background:rgba(90,90,90,.9)}
.pin--extra.is-found{background:#fff;color:#5A5A5A;border-color:#8A8A8A}
.pins__item--extra.is-found{border-color:#C9C9C4;background:#F4F4F1}
.pins__item--extra.is-found .n{background:#8A8A8A}
.pins__item--extra b{color:#5A5A5A}
.pins__tag{display:inline-block;vertical-align:.06em;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.03em;color:#7A6B52;background:#F4F0E6;border:1px solid #DCD2BC;border-radius:var(--r-pill);padding:0 6px;line-height:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finder__list.is-column{position:relative}
.finder__list.is-column .pins__item{left:0;right:0}
.pins__item{display:flex;gap:8px;align-items:center;font-size:13px;line-height:1.3;padding:4px 8px 4px 8px;border:1px solid var(--edge);border-radius:var(--r);background:#fff;transition:border-color .15s,background .15s;cursor:pointer;min-height:38px}
.pins__item.is-found{min-height:74px}
.pins__item b{color:var(--green)}
.pins__item small{display:block;color:var(--grey);font-size:12px}
.pins__item .n{flex:none;width:20px;height:20px;border-radius:50%;background:var(--edge-2);color:var(--grey);font-size:11px;font-weight:700;display:grid;place-items:center}
.pins__txt{flex:1;min-width:0;overflow-wrap:anywhere}
.pins__zoom{display:none;flex:none;width:64px;height:64px;border-radius:8px;border:1px solid var(--edge);background-color:#1B2226;background-repeat:no-repeat;position:relative;overflow:hidden}
.pins__mark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pins__markl{stroke:rgba(255,255,255,.9);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 4;filter:drop-shadow(0 0 1.6px rgba(0,0,0,.9))}
.pins__item.is-found{border-color:#A9D6BA;background:var(--green-tint)}
.pins__item.is-found .n{background:var(--green-2);color:#fff}
.pins__item.is-found .pins__zoom{display:block}
@media (max-width:620px){ .finder .pins__lines{display:none} }

/* a comparison table and a photograph inside Learn */
.ctable{overflow-x:auto;margin:12px 0 4px}
.ctable table{border-collapse:collapse;font-size:14px;min-width:420px;width:100%}
.ctable th,.ctable td{border:1px solid var(--edge);padding:6px 10px;text-align:left;vertical-align:top;line-height:1.4}
.ctable thead th{background:var(--card-2);font-weight:700;color:var(--green)}
.ctable tbody th{font-weight:600;background:#fff;white-space:nowrap}
.ctable caption{caption-side:bottom;text-align:left;font-size:12.5px;color:var(--grey);padding:6px 2px 0}
.photo{margin:12px 0 4px}
.photo.photo--small{max-width:236px;margin-left:auto;margin-right:auto}
.photo.photo--small img{width:100%;height:auto}
.photo img{width:100%;height:auto;display:block;border-radius:var(--r);cursor:zoom-in;background:#1B2226}
.photo figcaption{font-size:12.5px;color:var(--grey);margin-top:6px;line-height:1.45}
.photo--pair .photo__row{display:flex;gap:14px;align-items:flex-start}
.photo--pair .photo__cell{min-width:0}
.photo--pair .photo__sub{font-size:12px;color:var(--grey);margin-top:5px;line-height:1.4}
@media (max-width:620px){ .photo--pair .photo__row{display:block} .photo--pair .photo__cell + .photo__cell{margin-top:12px} }
.photo figcaption a{color:inherit}

.gridq{overflow-x:auto;margin-bottom:4px}
.gridq table{border-collapse:collapse;font-size:14px;width:100%}
.gridq th,.gridq td{border:1px solid var(--edge);padding:5px 6px;text-align:center;vertical-align:middle}
.gridq thead th{background:var(--card-2);font-weight:700;color:var(--k-water);font-size:13px}
.gridq thead th small{display:block;font-weight:500;font-size:10.5px;color:var(--grey);letter-spacing:0}
.gridq tbody th{text-align:left;font-weight:600;white-space:nowrap;background:#fff}
.gridq tbody th small{display:block;font-weight:400;font-size:12px;color:var(--grey);white-space:normal}
.gridq input{width:20px;height:20px;accent-color:var(--k-water);cursor:pointer;margin:0}
.gridq tr.ok th,.gridq tr.ok td{background:var(--green-tint)} .gridq tr.no th,.gridq tr.no td{background:var(--bad-tint)}
.gridq tr.no th::after{content:" ✗";color:var(--red)} .gridq tr.ok th::after{content:" ✓";color:var(--green-2)}
.hs__stage{position:relative;line-height:0;border-radius:var(--r);overflow:hidden;background:#1B2226;margin-bottom:8px}
.hs__stage img,.hs__stage svg{width:100%;height:auto;display:block}
.hs__stage svg{background:#fff}
.hs__pt{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1/1;height:auto;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:rgba(255,255,255,.18);cursor:pointer;padding:0;transition:.14s;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.hs__stage svg ~ .hs__pt{border-color:rgba(20,87,43,.7);background:rgba(20,87,43,.12)}
.hs__pt:hover{background:rgba(255,255,255,.45)}
.hs__pt[aria-pressed="true"]{background:var(--green);border-color:#fff;box-shadow:0 0 0 3px rgba(20,87,43,.45)}
.hs__pt[aria-pressed="true"]::after{content:"✓";color:#fff;font:700 13px/1 var(--font);position:absolute;inset:0;display:grid;place-items:center}
.hs__count{font-size:13px;color:var(--grey);margin:0 0 6px}
.hs__count b{color:var(--green)}
.act.is-wrong .hs__pt[aria-pressed="true"]{background:var(--red);box-shadow:0 0 0 3px rgba(176,58,46,.4)}
.act.is-right .hs__pt[aria-pressed="true"]{background:var(--green-2)}
.act__credit{font-size:11px;color:var(--grey);margin:-2px 0 10px}
.qshow{margin:0 0 14px}
.svgbox{border:1px solid var(--edge);border-radius:var(--r);background:#fff;padding:8px;max-width:520px}
.svgbox svg{width:100%;height:auto;display:block}
.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%;max-width:100%;height:auto}
.qimg figcaption{font-size:12.5px;color:var(--grey);margin-top:6px}

/* ---------- this lab's own widgets ---------- */
/* four tubes of seeds */
.tubes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tube{border:1.5px solid var(--edge);border-radius:var(--r);background:#fff;padding:10px 8px;font:inherit;cursor:pointer;text-align:center;transition:.15s;display:flex;flex-direction:column;align-items:center;gap:6px}
.tube:hover{border-color:var(--green)}
.tube__glass{display:block;width:34px;height:64px;border:2px solid #7F94A2;border-top:none;border-radius:0 0 17px 17px;position:relative;background:linear-gradient(180deg,#fff,#EAF4F8)}
.tube__svg{position:absolute;left:-2px;right:-2px;bottom:0;width:34px;height:60px;overflow:visible}
.tube b{font-size:13px;color:var(--ink)}
.tube__has{display:flex;flex-direction:column;gap:2px;font-size:11.5px;font-style:normal}
.tube__has i{font-style:normal;color:#3C3C3C}
.tube__has i.off{color:#B5B5B5;text-decoration:line-through}
.tube__out{display:block;font-size:12.5px;line-height:1.35;color:#3C3C3C;min-height:0}
.tube__out b{display:block;color:var(--green-2)}
.tube.is-no .tube__out b{color:var(--red)}
.tube__out small{display:block;color:var(--grey);margin-top:3px}
@media (max-width:620px){ .tubes{grid-template-columns:repeat(2,1fr)} }

/* the equation */
/* The browser's own rule for the hidden attribute is [hidden]{display:none}, which ANY class
   setting display beats — so el.hidden = true did nothing on .eq__bal, .po__result and .st__why,
   and the balanced equation, the potometer's results and the starch-test explanation were on
   screen from the start with a button that appeared to do nothing. One rule, and every toggle in
   the lab works: found 11 Sep 2026 by Daniel pressing "Show the balanced equation". */
[hidden]{display:none!important}

.eq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:16px;margin:4px 0 8px}
.eq__w{font:inherit;font-size:15.5px;font-weight:700;color:var(--k-food);background:#fff;border:1.5px solid var(--edge);border-radius:var(--r-pill);padding:6px 13px;cursor:pointer;transition:.14s}
.eq__w:hover,.eq__w.is-on{border-color:var(--k-food);background:var(--amber-tint)}
.eq__w--cond{font-size:12.5px;padding:2px 9px;color:var(--k-grow)}
.eq__w--cond:hover,.eq__w--cond.is-on{border-color:var(--k-grow);background:var(--purple-tint)}
.eq__op{font-weight:700;color:var(--grey)}
.eq__arrow{display:inline-flex;flex-direction:column;align-items:center;gap:3px;padding:0 10px}
.eq__line{font-size:30px;line-height:.9;color:var(--green);letter-spacing:-.06em}
.eq__over,.eq__under{display:flex;gap:4px}
.eq__note{margin:0 0 10px;font-size:14px;line-height:1.5;color:#3C3C3C;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:9px 12px}
.eq__note b{color:var(--k-food)}
.eq__bal{margin-top:10px;background:#fff;border:1.5px solid var(--edge);border-radius:var(--r);padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eq__f{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.eq__bal small{flex:1 1 100%;font-size:12.5px;color:var(--grey)}

/* ---------- indicator: the rack of tubes ---------- */
.ind__stage{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:6px 8px;overflow-x:auto}
.ind__stage svg{width:100%;height:auto;display:block;min-width:420px}
.ind__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.ind__card{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:9px 11px;display:grid;gap:5px}
.ind__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.ind__card label{font-size:12px;color:#5B5B5B;display:grid;gap:3px}
.ind__card select{font:inherit;font-size:12.5px;padding:3px 5px;border:1px solid var(--edge);border-radius:4px;background:#fff;color:var(--ink)}
.ind__say{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:#3C3C3C;border-left:3px solid var(--c);padding-left:8px}
.ind__why{font:inherit;font-size:11.5px;font-weight:600;color:#fff;background:var(--k-food);border:0;border-radius:var(--r-pill);padding:2px 10px;margin-left:3px;cursor:pointer}
.ind__why:hover{filter:brightness(1.08)}
.ind__verdict{margin-top:11px;font-size:13.5px;line-height:1.55;color:#3C3C3C;border-radius:var(--r);padding:10px 13px;border:1px solid}
.ind__verdict.is-ok{background:#F2F9F4;border-color:#BEDCC7}
.ind__verdict.is-ok b{color:#2F7040}
.ind__verdict.is-no{background:var(--amber-tint);border-color:#E6D6AE}
.ind__verdict.is-no b{color:var(--k-food)}
.ind__vbody b{color:var(--ink)}
.ind__note{margin-top:10px;font-size:13.5px;line-height:1.55;color:#3C3C3C;background:var(--amber-tint);
           border:1px solid #E6D6AE;border-radius:var(--r);padding:10px 13px}
.ind__note b{color:var(--k-food)}

/* ---------- auxin: the shoot, its cells and the grains inside ---------- */
.ax{display:grid;gap:10px}
.ax__lamps{display:flex;gap:7px;flex-wrap:wrap}
.ax__lamp{font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--edge);
          border-radius:var(--r-pill);padding:5px 13px;cursor:pointer;transition:.14s}
.ax__lamp:hover{border-color:var(--k-grow)}
.ax__lamp.is-on{background:var(--k-grow);border-color:var(--k-grow);color:#fff}
.ax__stage{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:4px 6px;overflow-x:auto}
.ax__stage svg{width:100%;height:auto;display:block;min-width:330px}

/* ---------- watch: an embedded film, loaded only when pressed ---------- */
.ytv{margin:12px 0 4px}
.ytv__frame{position:relative;width:100%;aspect-ratio:16/9;background:#0E1512;border-radius:var(--r);overflow:hidden}
.ytv__ifr,.ytv__poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytv__poster{padding:0;cursor:pointer;background:#0E1512;display:block}
.ytv__still{width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:opacity .18s ease}
.ytv__poster:hover .ytv__still{opacity:1}
.ytv__poster.is-bare .ytv__still{display:none}
.ytv__btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border-radius:50%;
          background:rgba(200,32,32,.94);color:#fff;font-size:22px;display:grid;place-items:center;
          box-shadow:0 4px 16px rgba(0,0,0,.35);transition:transform .16s ease,background .16s ease;padding-left:4px}
.ytv__poster:hover .ytv__btn{transform:translate(-50%,-50%) scale(1.07);background:#D01F1F}
.ytv__poster:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.ytv__over{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;color:#fff;font-size:13.5px;
           font-weight:600;text-align:left;line-height:1.35;
           background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72))}

/* ---------- pondweed: the bubble-counting practical ---------- */
.pw__ctl{display:grid;gap:7px;margin:2px 0 10px}
.pw__row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(120px,1.2fr);align-items:center;gap:11px;font-size:13px}
.pw__lab{color:#3C3C3C}
.pw__lab b{color:var(--k-food);font-weight:700;margin-left:5px}
.pw__stage{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:4px 6px;overflow-x:auto}
.pw__stage svg{width:100%;height:auto;display:block;min-width:380px}
.pw__live{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px 16px;margin-top:9px;
          background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:9px 13px}
.pw__clock{font-family:var(--mono);font-size:12px;color:var(--grey)}
.pw__live b{font-size:15px;color:var(--k-food)}
.pw__int{font-size:12.5px;color:#5B5B5B}
.pw__int b{font-size:13px;color:var(--ink)}
.pw__int small{color:var(--grey)}
.pw__btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pw__note{margin-top:10px;font-size:13.5px;line-height:1.55;color:#3C3C3C;background:var(--amber-tint);
          border:1px solid #E6D6AE;border-radius:var(--r);padding:10px 13px}
.pw__note b{color:var(--k-food)}
.pw__why{font:inherit;font-size:12.5px;font-weight:600;color:#fff;background:var(--k-food);border:0;
         border-radius:var(--r-pill);padding:3px 12px;margin-left:6px;cursor:pointer}
.pw__why:hover{filter:brightness(1.08)}
.pw__table{margin-top:11px}
.pw__row--check{grid-template-columns:auto 1fr;gap:9px;cursor:pointer}
.pw__row--pick{grid-template-columns:minmax(160px,1fr) auto auto;gap:7px;align-items:center}
.pw__pick{font:inherit;font-size:12px;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--edge);
          border-radius:var(--r-pill);padding:4px 11px;cursor:pointer;transition:.14s}
.pw__pick:hover:not(:disabled){border-color:var(--k-food)}
.pw__pick.is-on{background:var(--k-food);border-color:var(--k-food);color:#fff}
.pw__pick:disabled{opacity:.6;cursor:not-allowed}
.pw__row--check input{width:16px;height:16px;accent-color:var(--k-food)}
.pw__settle{position:relative;font-size:11.5px;color:var(--grey);padding-bottom:5px;min-width:132px}
.pw__settle.is-wait{color:var(--k-food);font-weight:600}
.pw__settle i{position:absolute;left:0;bottom:0;height:3px;border-radius:2px;background:var(--k-food);transition:width .2s linear}
.pw__int b.is-hot{color:#C4552F}
.pw__finds{display:grid;gap:7px;margin-top:10px}
.pw__find{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;font-size:13.5px;line-height:1.55;
          background:var(--amber-tint);border:1px solid #E6D6AE;border-radius:var(--r);padding:9px 12px}
.pw__find b{color:var(--k-food);font-weight:600}
.pw__findq{flex:none;width:19px;height:19px;border-radius:50%;background:var(--k-food);color:#fff;
           font-size:12px;font-weight:700;display:grid;place-items:center;align-self:center}
.pw__findw{flex:1 1 100%;color:#3C3C3C}
.pw__findw b{color:var(--ink)}
.pw__warn{color:#C4552F;font-weight:600}
.pw__hint{margin:7px 0 0;font-size:12.5px;color:var(--grey);line-height:1.5}

/* ---------- limitgraph: the curves a reader plots and compares ---------- */
.lg__ctl{display:grid;gap:10px;margin:2px 0 10px}
.lg__axis{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.lg__axlab{font-size:12.5px;color:var(--grey);margin-right:2px}
.lg__ax{font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--edge);
        border-radius:var(--r-pill);padding:5px 12px;cursor:pointer;transition:.14s}
.lg__ax:hover{border-color:var(--k-food)}
.lg__ax.is-on{background:var(--k-food);border-color:var(--k-food);color:#fff}
.lg__sliders{display:grid;gap:7px}
.lg__row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(120px,1.2fr);align-items:center;gap:11px;font-size:13px}
.lg__row.is-x{opacity:.55}
.lg__row.is-x input{cursor:not-allowed}
.lg__lab{color:#3C3C3C}
.lg__lab b{color:var(--k-food);font-weight:700;margin-left:5px}
.lg__stage{position:relative}
.lg__plot{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:6px 8px;overflow-x:auto}
.lg__plot svg{width:100%;height:auto;display:block;min-width:430px}
.lg__mk:hover,.lg__mkt:hover{opacity:.75}
.lg__btns{position:absolute;top:9px;right:11px;display:flex;gap:7px;flex-wrap:wrap;z-index:2}
.lg__btns .wbtn{box-shadow:0 1px 5px rgba(20,30,25,.13)}
/* with the graph standing in the plant's column, Plot and Clear sit with the sliders instead of on its corner */
.widget.is-staged .lg__btns{position:static;justify-content:flex-start;margin:8px 0 6px}
.widget.is-staged .lg__btns .wbtn{box-shadow:none}
.sim > .stg-pack .lg__plot svg{min-width:0}
@media (max-width:640px){.lg__stage{display:flex;flex-direction:column-reverse;gap:8px}.lg__btns{position:static;justify-content:flex-end}}
.lg__read{display:grid;gap:5px;margin-top:11px;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:10px 13px}
.lg__rate{display:block;height:7px;border-radius:4px;background:#EDEBE3;overflow:hidden}
.lg__rate i{display:block;height:100%;background:var(--k-food);border-radius:4px;transition:width .25s ease}
.lg__read b{font-size:13.5px;color:var(--ink)}
.lg__who{font-size:12.5px;color:var(--grey)}.lg__who b{color:var(--k-food)}
.lg__read small{font-size:12.5px;line-height:1.5;color:#5B5B5B}
.lg__legend{display:grid;gap:4px;margin-top:9px}
.lg__key{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#3C3C3C}
.lg__key[data-off]{opacity:.5}
.lg__key i{width:16px;height:3px;border-radius:2px;flex:none}
.lg__key em{color:var(--grey);font-style:normal}
.lg__note{margin-top:10px;font-size:13.5px;line-height:1.55;color:#3C3C3C;background:var(--amber-tint);
          border:1px solid #E6D6AE;border-radius:var(--r);padding:10px 13px}
.lg__note b{color:var(--k-food)}


/* the starch test */
.st{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:start}
.st__pick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;margin:2px 0 10px}
.st__pickgrp{display:flex;flex-direction:column;gap:5px;min-width:0}
.st__pickh{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.st__pickh span{text-transform:none;letter-spacing:0;font-weight:500}
.st__pickrow{display:flex;flex-wrap:wrap;gap:8px}
.st__leafbtn--real{background:#FBF6EC;border-color:#D9C8A4}
.st__leafbtn--real.is-on{background:#F3E7CB;border-color:#B08A4A;color:#6B4E16}
.st__leafbtn--real.is-on small{color:#6B4E16}
.st__leafbtn{display:flex;flex-direction:column;line-height:1.25;font:inherit;font-size:13.5px;font-weight:600;color:#3C3C3C;background:#fff;border:1.5px solid var(--edge);border-radius:var(--r);padding:7px 13px;cursor:pointer;transition:.14s;text-align:left}
.st__leafbtn small{font-weight:500;font-size:11.5px;color:var(--grey)}
.st__leafbtn.is-on{border-color:var(--green-2);background:var(--green-tint);color:var(--green)}
.st__leafbtn.is-on small{color:var(--green)}
.st__before{font-size:13.5px;line-height:1.5;color:#4A4A4A;background:var(--tint,#FAF8F2);border:1px solid var(--edge);border-radius:var(--r);padding:9px 12px;margin:0 0 12px}
.st__leaf{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:8px}
.st__svg{width:100%;height:auto;display:block}
.st__cap{font-size:12px;line-height:1.4;color:#5A5A5A;text-align:center;margin:7px 2px 1px}
.st.st--real{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.st__photo{display:block;width:100%;height:auto;border-radius:6px}
/* the water bath stands upright, so it is capped in height rather than stretched to the width */
.st__photo--tall{width:auto;max-width:100%;max-height:430px;margin:0 auto}
.st--real .st__cap{text-align:left;font-size:13px;line-height:1.45;color:#4A4A4A;margin:8px 2px 2px}
.st__res{font-size:14px;line-height:1.55;color:#3C3C3C;background:var(--green-tint);border:1px solid #A9D6BA;border-radius:var(--r);padding:11px 13px;margin-top:14px}
.st__res b{color:var(--green)}
.st__steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.st__btn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;font:inherit;font-size:14.5px;font-weight:600;color:#3C3C3C;background:#fff;border:1.5px solid var(--edge);border-radius:var(--r);padding:9px 12px;cursor:pointer;transition:.14s}
.st__btn .n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--edge-2);color:var(--grey);display:grid;place-items:center;font-size:11.5px;font-weight:700}
.st__step.is-done .st__btn{border-color:#A9D6BA;background:var(--green-tint);color:var(--green)}
.st__step.is-done .st__btn .n{background:var(--green-2);color:#fff}
.st__why{display:block;font-size:13px;line-height:1.45;color:#4A4A4A;padding:6px 12px 2px 43px}
/* a step already done can be pressed again to look back at it */
.st__step.is-done .st__btn{cursor:pointer}
.st__step.is-view .st__btn{box-shadow:0 0 0 2px var(--green-2) inset}
/* the three stages of the class practical, side by side, once the test is complete */
.st__cmp{margin:14px 0 0;padding:12px;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.st__cmp[hidden]{display:none}
.st__cmprow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.st__cmpcell img{display:block;width:100%;height:auto;border-radius:6px}
.st__cmph{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#3C3C3C;margin:0 0 5px}
.st__cmph .n{flex:none;width:18px;height:18px;border-radius:50%;background:var(--green-2);color:#fff;display:grid;place-items:center;font-size:10.5px}
.st__cmp figcaption{font-size:12.5px;line-height:1.5;color:#5A5A5A;margin-top:8px}
.st__cmp figcaption b{color:#3C3C3C}
@media (max-width:620px){ .st,.st.st--real{grid-template-columns:1fr} .st__leaf{max-width:220px;margin:0 auto} .st--real .st__leaf{max-width:none} .st__leafbtn{flex:1 1 44%} .st__pickgrp{flex:1 1 100%} }
@media (max-width:420px){ .st__cmprow{gap:5px} .st__cmph{font-size:11px} .st__cmph .n{display:none} }

/* hydrogencarbonate indicator */
.ind{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ind__tube{border:1.5px solid var(--edge);border-radius:var(--r);background:#fff;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ind__glass{display:block;width:44px;height:96px;border:2px solid #7F94A2;border-top:none;border-radius:0 0 22px 22px;position:relative;overflow:hidden;background:#fff}
.ind__liq{position:absolute;left:0;right:0;bottom:0;height:78%;transition:background .5s;background:#E8713A}
.ind__tube[data-colour="purple"] .ind__liq{background:#7B4FA6} .ind__tube[data-colour="yellow"] .ind__liq{background:#E8C93A} .ind__tube[data-colour="orange"] .ind__liq{background:#E8713A}
.ind__weed{position:absolute;left:14px;bottom:8px;width:16px;height:56px;display:none;background:repeating-linear-gradient(180deg,#2E8B4A 0 6px,transparent 6px 10px);border-left:3px solid #2E8B4A;opacity:.9}
.ind__tube.has-weed .ind__weed{display:block}
.ind__tube.is-dark .ind__glass{background:#3A3A3A}
.ind__tube label{font-size:12px;color:#3C3C3C;display:flex;flex-direction:column;gap:2px;width:100%}
.ind__tube select{font:inherit;font-size:12.5px;padding:3px 6px;border:1px solid var(--edge);border-radius:6px;background:var(--card-2)}
.ind__say{margin:0;font-size:12.5px;line-height:1.4;color:#3C3C3C}
@media (max-width:620px){ .ind{grid-template-columns:1fr} }

/* the potometer practical */
.po{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.po__ctl{display:flex;flex-direction:column;gap:8px}
.po__ctl.is-locked{opacity:.6}
.po__row{display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:600;color:#3C3C3C}
.po__row > span{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.po__row b{font-weight:600;color:var(--k-water);font-variant-numeric:tabular-nums;white-space:nowrap}
.po__row select{font:inherit;font-size:13.5px;font-weight:400;padding:5px 8px;border:1.5px solid var(--edge);border-radius:8px;background:#fff}
.po__row input[type=range]{width:100%;margin:0;accent-color:var(--k-water)}
.po__snote{font-size:11.5px;color:var(--grey);line-height:1.35;margin-top:-4px}
.po__stage{border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:#F7F4EC}
.po__svg{width:100%;height:auto;display:block}
.po__water{fill:#CFE8F7}
.po__glass{fill:none;stroke:#7F94A2;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.po__tube-out{fill:none;stroke:#7F94A2;stroke-width:14;stroke-linejoin:round;stroke-linecap:butt}
.po__tube-glass{fill:none;stroke:#EDF1F3;stroke-width:11;stroke-linejoin:round;stroke-linecap:butt}
.po__tube-water{fill:none;stroke:#BFE0F5;stroke-width:9;stroke-linejoin:round;stroke-linecap:butt}
.po__tube-out.po__tube--wide{stroke-width:30;stroke-linecap:round}
.po__tube-glass.po__tube--wide{stroke-width:27;stroke-linecap:round}
.po__tube-water.po__tube--wide{stroke-width:25;stroke-linecap:round}
.po__bubble{fill:#fff;stroke:#7F94A2;stroke-width:1.4}
.po__ticks line{stroke:#7A6B3C;stroke-width:1}
.po__ticks text,.po__unit{font-size:18px;fill:#7A6B3C;font-family:var(--font)}
.po__leaf .po__blade{stroke-width:1.4;stroke-linejoin:round}
.po__leaf .po__vein{fill:none;stroke:#2A6B3B;stroke-width:1.1;opacity:.6}
.po__leaf .po__vein--pale{stroke:#CFE9C8;opacity:.9}
.po__leaf .po__gloss{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round}
.po__grille line,.po__grille circle{stroke:#B8C1C8;stroke-width:1;fill:none}
.po__leaf.is-off{display:none}
.po__vap{fill:#9FCDE8;opacity:0}
.po__svg.is-running .po__vap{animation:povap var(--vap,2.6s) ease-out infinite}
.po__leaf:nth-child(2) .po__vap{animation-delay:.4s} .po__leaf:nth-child(3) .po__vap{animation-delay:.9s} .po__leaf:nth-child(4) .po__vap{animation-delay:.2s} .po__leaf:nth-child(5) .po__vap{animation-delay:.7s} .po__leaf:nth-child(6) .po__vap{animation-delay:1.1s}
@keyframes povap{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-22px)}}
.po__glow,.po__beam{opacity:0;transition:opacity .3s}
.po__rec:not(:disabled){background:var(--green);color:#fff}
.po__btns .wbtn:disabled{color:#9AA39C;border-color:#D8DED9;background:#F5F7F4;cursor:default}   /* greyed by colour, not opacity: an opacity would drop its tooltip behind the next button */
.po__stat b{overflow-wrap:anywhere}
.po__bag{fill:rgba(255,255,255,.4);stroke:#8FB3C7;stroke-width:2;stroke-dasharray:6 5;opacity:0;transition:opacity .3s}
.po__svg.is-bagged .po__bag{opacity:1}
.po__blades{transform-box:fill-box;transform-origin:center}
.po__svg[data-wind="1"] .po__blades{animation:pospin 2.4s linear infinite}
.po__svg[data-wind="2"] .po__blades{animation:pospin 1s linear infinite}
.po__svg[data-wind="3"] .po__blades{animation:pospin .45s linear infinite}
@keyframes pospin{to{transform:rotate(360deg)}}
.po__air path{stroke:#8FB3C7;stroke-width:2;stroke-linecap:round;stroke-dasharray:6 6;opacity:0;fill:none}
.po__svg[data-wind="1"] .po__air path{opacity:.5;animation:poair 1.6s linear infinite}
.po__svg[data-wind="2"] .po__air path{opacity:.8;animation:poair .9s linear infinite}
.po__svg[data-wind="3"] .po__air path{opacity:1;animation:poair .5s linear infinite}
@keyframes poair{to{stroke-dashoffset:-24}}
.po__tap{transform-box:fill-box;transform-origin:center;transition:transform .3s}
.po__svg.is-tapping .po__tap{transform:rotate(-30deg)}
.po__names text{font-size:20px;fill:#6B7780;font-family:var(--font)}
.po__names .po__names--small{font-size:17.5px}
.po__read{font-size:19px;fill:#3C3C3C;font-family:var(--font);font-weight:600}
.po__bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px}
.po__clock{display:flex;align-items:baseline;gap:6px}
.po__clock b{font-size:26px;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:.02em;line-height:1}
.po__clock span{font-size:12px;color:var(--grey)} .po__clock i{font-style:normal;font-weight:600}
.po__reading{font-size:13.5px;color:#3C3C3C} .po__reading b{color:var(--k-water);font-size:16px;font-variant-numeric:tabular-nums}
.po__btns{display:flex;flex-direction:column;gap:7px;align-items:stretch}
.po__brow{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-start}
.po__brow .po__resetset,.po__brow .po__resetall{margin-left:auto}
.po__start{background:var(--green);color:#fff}
.po__start:hover{background:var(--green-2);color:#fff}
.po__result{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.po__right{display:flex;flex-direction:column;gap:10px}
.po__stat{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:8px 10px;min-width:0}
.po__stat span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.po__stat b{display:block;font-size:16px;color:var(--k-water);margin:2px 0;font-variant-numeric:tabular-nums;white-space:nowrap}
.po__stat small{display:block;font-size:11.5px;color:var(--grey);line-height:1.35}
.po__warn{grid-column:1/-1;margin:0;font-size:13px;line-height:1.4;color:#A64B2A;background:#FFF1EA;border:1px solid #F2C9B8;border-radius:var(--r);padding:7px 10px}
.po__say{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:#3C3C3C} .po__say b{color:var(--k-water)}
.po__data{margin-top:14px;border-top:1px dashed var(--edge);padding-top:12px}
.po__gate{margin-top:14px;border-top:1px dashed var(--edge);padding-top:12px;font-size:13.5px;color:#3C3C3C}
.po__gate[hidden]{display:none}
.po__kept{display:block;font-weight:600;color:var(--green);margin-bottom:8px}
.po__unlock{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.po__unlock label{flex:1 1 320px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;line-height:1.4}
.po__unlock input{font:inherit;font-size:13.5px;padding:5px 9px;border:1.5px solid var(--edge);border-radius:8px;background:#fff;width:150px}
.po__gatesay{font-size:12.5px;color:#A64B2A}
.po__tablewrap{overflow-x:auto}
.po__table{border-collapse:collapse;font-size:12.5px;width:100%;min-width:640px}
.po__table th,.po__table td{border:1px solid var(--edge);padding:4px 7px;text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums}
.po__table thead th{background:var(--card-2);color:var(--green);font-weight:700;font-size:11.5px}
.po__del{font:inherit;font-size:12px;color:var(--grey);background:none;border:0;cursor:pointer;padding:0 4px}
.po__del:hover{color:#A64B2A}
.po__table th small{display:block;font-weight:500;font-size:10px;letter-spacing:0;text-transform:none;color:var(--grey)}
.po__cond{white-space:normal!important;min-width:200px;font-size:12px;line-height:1.35;color:#3C3C3C}
.po__cond b{color:#A64B2A}
/* the independent variable's value: the reading the row is about, not a warning */
.po__ivval{font-size:14px;font-weight:700;color:var(--ink)}
.po__cond:has(.po__ivval){min-width:0;white-space:nowrap!important}
.po__trial{position:relative;padding-right:18px!important}
.po__trial small{display:block;font-size:10px;color:var(--grey)}
/* a table's title goes ABOVE it, a figure's caption BELOW — the convention both boards use */
.po__cap{caption-side:top;text-align:left;font-size:12.5px;line-height:1.45;color:#3C3C3C;padding:0 0 6px}
.po__cap b{color:var(--green)}
.po__table--proc{margin-top:16px}
.po__stylenote{font-size:12.5px;line-height:1.5;color:var(--grey);margin:8px 0 0}
.po__stylenote--grey{margin-top:6px}
/* a spanning heading over the columns that share one quantity, and the row of trials under it */
.po__table thead tr:first-child th[colspan]{text-align:center;border-bottom:1px solid var(--edge)}
.po__table thead tr + tr th{font-weight:600;font-size:12px}
/* the controlled variables belong under the table, once — not repeated down a column */
.po__ctrlvars{font-size:12.5px;line-height:1.5;color:#4A4A4A;background:var(--card-2,#F7F5EF);border-left:3px solid var(--edge);
  border-radius:0 var(--r) var(--r) 0;padding:7px 11px;margin:8px 0 0}
.po__ctrlvars b{color:var(--green)}
.po__ctrlvars b + b,.po__ctrlvars b:not(:first-child){color:var(--ink);font-weight:600}
/* the one thing you change, and the ones you have stopped being able to change */
.po__row--iv select{font-weight:600}
.po__row--iv span small{display:block;font-weight:400;font-size:11.5px;color:var(--grey)}
.po__row--set{border-bottom:1px solid var(--edge);padding-bottom:10px;margin-bottom:4px}
.po__row--frozen{opacity:.5}
.po__row--frozen span::after{content:' · held constant';font-size:11px;color:var(--grey);font-weight:500}
.po__row--isiv span::after{content:' · the one you change';font-size:11px;color:var(--green);font-weight:700}
/* a line that has no runs yet: its controlled values are still being chosen */
.po__row--open span::after{content:' · set it now, then held';font-size:11px;color:#8A5A0E;font-weight:600}
.po__trial--leak{background:#FFF1EA}
/* a trial whose bubble did not start from 0: kept, so the spread shows what it costs, but
   marked everywhere it appears so it can be found again and dropped */
.po__trial--nozero{background:#FBE3E3;box-shadow:inset 3px 0 0 #C0392B}
.po__trial--nozero b,.po__trial--nozero small{color:#9B2F22}
.po__trial--empty{color:var(--grey);text-align:center}
.po__trial .po__del{position:absolute;right:2px;top:2px}
.po__statcell{background:#F6F8F5}
.po__statcell b{color:var(--k-water)}
.po__term{font:inherit;font-size:11.5px;font-weight:700;color:var(--green);background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}
.po__term i{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--green);font-style:normal;font-size:10px;margin-left:2px}
.po__term:hover i{background:var(--green);color:#fff}
.po__pop{margin-top:10px;background:#fff;border:1.5px solid var(--green);border-radius:var(--r);padding:10px 14px;font-size:13.5px;line-height:1.5;color:#3C3C3C}
.po__pop[hidden]{display:none}
.po__pop__h{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.po__pop__x{font:inherit;font-size:13px;color:var(--grey);background:none;border:0;cursor:pointer;padding:0 4px}
.po__pop p{margin:0 0 8px}
.po__pop__how{background:var(--card-2);border-radius:var(--r);padding:8px 10px;font-size:13px}
.po__pop__how b{color:var(--k-water)}
.po__pop__note{font-size:12px;color:var(--grey);margin:0}
.po__errbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;font-size:12.5px;color:#3C3C3C}
.po__errbar__l{font-weight:600;margin-right:4px}
.po__errbar__b{font:inherit;font-size:12.5px;color:var(--green);background:#fff;border:1.5px solid var(--edge);border-radius:var(--r-pill);padding:4px 11px;cursor:pointer}
.po__errbar__b:hover{border-color:var(--green)}
.po__errbar__b[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.po__band{fill:#BFE0F5;opacity:.55;stroke:none}
/* the confidence box drawn ON a bar of the same hue: no fill, a ruled edge in its colour,
   with a pale halo under it so the edge reads whatever the bar is filled with */
.po__band--onbar{fill:none;opacity:1;stroke:var(--ink);stroke-width:1.6;paint-order:stroke;stroke-linejoin:round;
  filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 1.5px rgba(255,255,255,.95))}
.po__whisker{fill:none;stroke:#2F6F8E;stroke-width:1.4}
.po__whisker--onbar{stroke:var(--ink);stroke-width:1.7;
  filter:drop-shadow(0 0 1.6px rgba(255,255,255,.95)) drop-shadow(0 0 1.6px rgba(255,255,255,.95))}
.po__chart{margin-top:12px}
.po__gsvg{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--edge);border-radius:var(--r)}
.po__grid{stroke:#EEE9DD;stroke-width:1} .po__axis{stroke:#7B8790;stroke-width:1.2}
.po__gt{font-size:12.5px;fill:#5A5A5A;font-family:var(--font)} .po__gl{font-size:13px;fill:#3C3C3C;font-family:var(--font);font-weight:600}
.po__line{fill:none;stroke:var(--k-water);stroke-width:2}
.po__gbar{fill:#BFE0F5;fill-opacity:.3;stroke:#7F94A2;stroke-width:1.6}
/* every plotted point is a cross (IGCSE): stroked, never filled */
.po__dot{fill:none;stroke:var(--k-water);stroke-width:1.5;stroke-linecap:round} .po__dot--rep{stroke-width:1.3}
.po__dot--bad{stroke:#C0392B!important;stroke-width:2!important;opacity:1!important}
.po__dotmean{fill:none;stroke:var(--k-water);stroke-width:2.4;stroke-linecap:round}
.po__xhalo{fill:none;stroke:#fff;stroke-width:5.4;stroke-linecap:round}
.po__gnote{display:block;margin-top:6px;font-size:12px;color:var(--grey);line-height:1.4}
.po__tools{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
@media (max-width:700px){ .po__result{grid-template-columns:1fr} .po__btns{margin-left:0} .po__names{display:none} }

/* sources and sinks */
.ss__tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.ss__list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px}
.ss__part{border:1.5px solid var(--edge);border-radius:var(--r);background:#fff;padding:9px 11px;font-size:13.5px;line-height:1.35}
.ss__part b{display:block;color:var(--ink)}
.ss__part small{display:block;color:var(--grey);font-size:12.5px;margin-top:3px}
.ss__tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:1px 8px;margin-top:3px;color:#fff}
.ss__part--source{border-color:#E2B95F;background:#FFF8E6} .ss__part--source .ss__tag{background:var(--k-food)}
.ss__part--sink{border-color:#B7D2E6;background:#EEF6FB} .ss__part--sink .ss__tag{background:var(--k-water)}
.ss__say{margin:10px 0 0;font-size:14px;line-height:1.5;color:#3C3C3C}

/* auxin */
.ax__lamps{display:flex;gap:7px;justify-content:center;margin-bottom:8px}
.ax__lamp{font:inherit;font-size:13px;font-weight:600;border:1.5px solid var(--edge);border-radius:var(--r-pill);background:#fff;padding:5px 12px;cursor:pointer;color:#3C3C3C}
.ax__lamp.is-on{border-color:#E2B95F;background:#FFF8E6;color:#8A5A0E}
.ax__svg{width:100%;max-width:360px;height:auto;display:block;margin:0 auto;border:1px solid var(--edge);border-radius:var(--r);background:#F7F4EC}
.ax__stem{fill:#8FD48A;stroke:#2F7D46;stroke-width:1.8}
.ax__dots circle{fill:#F2A93B;stroke:#8A5A0E;stroke-width:.6;transition:cx .9s}
.ax__l{font-size:9.5px;fill:#2A6B3B;font-family:var(--font);font-weight:600}
.ax__say{font-size:9.5px;fill:#3C3C3C;font-family:var(--font)}
@media (prefers-reduced-motion:reduce){ .ax__shoot,.ax__dots circle{transition:none} }

/* the half-flower */
.fl{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(180px,1fr);gap:14px;align-items:start}
.fl__left{min-width:0}
/* nothing to click on a photograph, so it takes the room the naming panel was using */
.fl.is-photo{grid-template-columns:1fr}
.fl.is-photo .fl__info{display:none}
.fl__switch{display:flex;gap:6px;margin:0 0 8px}
.fl__switch .wbtn{font-size:12.5px;padding:4px 11px}
.fl__stage{background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:6px}
.fl__photo{margin:0;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:6px}
.fl__photo img{display:block;width:100%;height:auto;border-radius:4px}
.fl__psvg{display:block;width:100%;height:auto;font-family:var(--font)}
.fl__photo figcaption{font-size:12px;line-height:1.45;color:var(--grey);margin-top:6px}
.fl__svg{width:100%;height:auto;display:block;font-family:var(--font)}
.fl__stalk{fill:#8FD48A;stroke:#2F7D46;stroke-width:1.6}
.fl__sepal{fill:#9BC76A;stroke:#2F7D46;stroke-width:1.6}
.fl__petal{fill:#F5A3C3;stroke:#B85C86;stroke-width:1.6}
.fl__filament{fill:none;stroke:#8A5A0E;stroke-width:3.2;stroke-linecap:round}
.fl__anther{fill:#F3C844;stroke:#8A5A0E;stroke-width:1.6}
/* the petals of the far half stand behind the carpel: the same petal, further away */
.fl__petal--back{fill:#FAC6DA;stroke:#C57B9E}
/* pollen is drawn over the anther, so it must not be what a click lands on */
.fl__pollen{fill:#E5A81B;stroke:#8A5A0E;stroke-width:.7;pointer-events:none}
.fl__nectary{fill:#F7D96B;stroke:#8A5A0E;stroke-width:1}
.fl__ovary{fill:#C7E3A6;stroke:#2F7D46;stroke-width:1.6}
.fl__ovule{fill:#FFFFFF;stroke:#2F7D46;stroke-width:1.4}
/* the cavity inside a cut ovary, and the stalk each ovule hangs from */
.fl__locule{fill:#FBF7E8;stroke:#2F7D46;stroke-width:1.2}
.fl__funicle{fill:none;stroke:#2F7D46;stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.fl__style{fill:#B9DB94;stroke:#2F7D46;stroke-width:1.4}
.fl__stigma{fill:#7AA35A;stroke:#2F7D46;stroke-width:1.4}
.fl__svg [data-part]{cursor:pointer;transition:filter .15s}
.fl__svg [data-part]:hover,.fl__svg [data-part].is-on{filter:drop-shadow(0 0 4px #14572B)}
.fl__svg [data-part]:focus-visible{outline:none;filter:drop-shadow(0 0 5px #A16207)}
.fl__lead{stroke:#14572B;stroke-width:.9;fill:none}
.fl__lead--extra{stroke:#B5B5B5;stroke-dasharray:3 2}
.fl__dot{fill:#14572B}
.fl__lab{font-size:11px;fill:#14572B;font-weight:600}
.fl__lab--extra{fill:#8A8A8A;font-weight:500;font-style:italic}
.fl__title{font-size:10.5px;fill:#3C3C3C;font-style:italic}
.fl__info{background:#fff;border:1.5px solid var(--edge);border-radius:var(--r);padding:12px 14px;font-size:14px;line-height:1.5;min-height:90px}
.fl__info b{font-size:17px;color:var(--k-repro)}
.fl__info small{display:block;font-size:13.5px;color:#3C3C3C;margin-top:4px}
.fl__group{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--k-repro);background:#FBEAF1;border-radius:var(--r-pill);padding:1px 8px;margin-left:6px;vertical-align:2px}
@media (max-width:620px){ .fl{grid-template-columns:1fr} }

/* the pollen tube */
/* pollentube: the controls above; the drawing and the steps below. Only the step on screen is
   open, so the steps column stays about as tall as the drawing beside it. */
.pt__bar{display:flex;align-items:center;gap:12px;margin:10px 0 12px;flex-wrap:wrap}
.pt__play{font:inherit;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:122px;padding:7px 16px 7px 13px;cursor:pointer;
  border:1.5px solid var(--k-repro);border-radius:var(--r-pill);background:var(--k-repro);color:#fff}
.pt__play:hover{filter:brightness(1.08)}
.pt__play.is-playing{background:#fff;color:var(--k-repro)}
/* a step has finished and is waiting: the button says so, twice, and then stays still */
.pt__play.is-next{animation:pt-next 1.5s ease-out 2}
@keyframes pt-next{0%{box-shadow:0 0 0 0 rgba(163,53,105,.5)}100%{box-shadow:0 0 0 11px rgba(163,53,105,0)}}
@media (prefers-reduced-motion:reduce){.pt__play.is-next{animation:none}}
.pt__all{font:inherit;font-size:12.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;cursor:pointer;
  border:1.5px solid var(--edge);border-radius:var(--r-pill);background:#fff;color:#5A5A5A}
.pt__all:hover{border-color:var(--k-repro);color:var(--k-repro)}
.pt__all .pt__ico{font-size:9px;letter-spacing:-1px}
.pt__ico{font-size:11px;line-height:1}
.pt__prog{flex:1 1 160px;min-width:120px;display:flex;gap:3px;height:9px;cursor:pointer}
.pt__seg{position:relative;flex:1 1 0;background:var(--edge-2);border-radius:var(--r-pill);overflow:hidden}
.pt__seg i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--k-repro);border-radius:inherit}
.pt__count{font-size:12.5px;font-weight:600;color:var(--grey);min-width:80px;text-align:right;font-variant-numeric:tabular-nums}
.pt{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(200px,1fr);gap:16px;align-items:start}
.pt.pt--stack{grid-template-columns:minmax(0,1fr)}
.pt__fig{margin:0;position:relative}
.pt__svg{width:100%;max-width:440px;height:auto;display:block;margin:0 auto}
.pt__view{fill:#F5F0E3}
.pt__viewline{fill:none;stroke:#E1D7C3;stroke-width:1}
.pt__lab{fill:#232323;font-family:var(--font);font-weight:600;text-rendering:geometricPrecision}
.pt__lead{fill:none;stroke:#474747;stroke-width:.9;stroke-linejoin:round}
.pt__leadhalo{fill:none;stroke:#FFFFFF;stroke-opacity:.85;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pt__pin{fill:#333333;stroke:#FFFFFF;stroke-width:.8}
.pt__now{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.pt__steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.pt__stepb{font:inherit;display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;padding:7px 11px;
  border:1.5px solid var(--edge);border-radius:var(--r);background:#fff;color:#4A4A4A;transition:border-color .2s,background-color .2s}
.pt__stepb:hover{border-color:#D9A9C0}
.pt__num{flex:none;width:21px;height:21px;border-radius:50%;background:var(--edge-2);color:var(--grey);font-size:11.5px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.pt__txt{display:block;font-size:13.5px;line-height:1.42;padding-top:1px}
.pt__txt b{color:var(--ink);font-weight:700}
.pt__tag{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);background:var(--edge-2);border-radius:var(--r-pill);padding:1px 7px;vertical-align:1px;white-space:nowrap}
.pt__p,.pt__stepib{display:none}
.pt__step.is-on .pt__p{display:block;margin-top:3px}
.pt.is-ib .pt__step.is-on .pt__stepib{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed #D3C2EA;color:#4B3A6E;font-size:13px}
.pt__step.is-on .pt__stepb{border-color:var(--k-repro);background:#FBEAF1;color:var(--ink)}
.pt__step.is-on .pt__num{background:var(--k-repro);color:#fff}
.pt__step.is-done .pt__stepb{border-color:#A9D6BA;background:var(--green-tint)}
.pt__step.is-done .pt__num{background:var(--green-2);color:#fff}
.pt__ibchip{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#5A3D8A;background:#EFE8F8;border:1px solid #CDB9E8;border-radius:var(--r-pill);padding:0 6px;vertical-align:1px}
.pt__more{font:inherit;font-size:13.5px;font-weight:600;width:100%;margin-top:12px;text-align:left;cursor:pointer;padding:9px 13px;line-height:1.4;
  border:1.5px dashed #CDB9E8;border-radius:var(--r);background:#FAF7FD;color:#4B3A6E}
.pt__more:hover{border-style:solid;background:#F3ECFB}
.pt__more[aria-expanded="true"]{border-style:solid}
.pt__moreq{font-weight:800;color:#5A3D8A}
.pt__ib{margin-top:8px;padding:13px 16px;border:1px solid #DCCDEF;border-radius:var(--r);background:#FCFAFE;font-size:13.5px;line-height:1.52;color:#333}
.pt__ib p{margin:0 0 8px}
.pt__ib ul{margin:0 0 8px;padding-left:20px}
.pt__ib li{margin:2px 0}
.pt__ib b{color:#4B3A6E}
.pt__ibbanner{background:#EFE8F8;color:#4B3A6E;border-radius:var(--r-sm);padding:6px 9px;font-size:12.5px}
.pt__beyond{margin:10px 0 8px;padding:8px 10px;border-left:3px solid var(--red);background:var(--red-tint);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13px}
.pt__beyond b{color:var(--red)}
.pt__src{font-size:11.5px;color:#6B6B63;margin:0!important;line-height:1.45}

/* two plants built for hard places */
.ad{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ad__plant{border:1.5px solid var(--edge);border-radius:var(--r);background:#fff;padding:12px 13px}
.ad__plant--xerophyte{border-top:4px solid #E2B95F} .ad__plant--hydrophyte{border-top:4px solid #7FB8DC}
.ad__plant h4{font-size:15.5px;color:var(--ink);margin:0 0 8px}
.ad__plant h4 small{display:block;font-size:12.5px;font-weight:400;color:var(--grey);margin-top:2px}
.ad__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.ad__chip{font:inherit;font-size:12.5px;font-weight:600;border:1.5px solid var(--edge);border-radius:var(--r-pill);background:var(--card-2);padding:4px 10px;cursor:pointer;color:#3C3C3C;transition:.14s;text-align:left}
.ad__chip:hover{border-color:var(--green)}
.ad__chip.is-on{background:var(--green);border-color:var(--green);color:#fff}
.ad__say{margin:0;font-size:13.5px;line-height:1.5;color:#3C3C3C;min-height:60px}
.ad__f{font-weight:700;color:var(--ink)} .ad__d{color:var(--k-water)} .ad__w{color:var(--green-2);font-weight:600}
.ad__arrow{color:var(--line);margin:0 3px}
@media (max-width:820px){ .ad{grid-template-columns:1fr} }
/* Read the plant: the picture of each feature. It stands in the plant's column (.sim), in the strip
   on a phone, or under the chips of the plant it belongs to. */
/* an extension chip: dashed, with a small tag, so it never passes for an exam feature */
.ad__chip--ext{border-style:dashed;border-color:#C9A3B0;background:#FFF8FA}
.ad__chip--ext:hover{border-color:var(--red)}
.ad__chip--ext.is-on{background:#8C3B55;border-color:#8C3B55;border-style:solid;color:#fff}
.ad__extpill{display:inline-block;margin-left:4px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--red);background:var(--red-tint);border-radius:var(--r-pill);padding:0 6px;vertical-align:1px}
.ad__chip--ext.is-on .ad__extpill{background:rgba(255,255,255,.2);color:#fff}
.ad__extnote{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--red);margin-bottom:2px}
/* ----- stageWidget: a widget's drawing, standing where the plant is ----- */
.stg-park[hidden]{display:none}
.stg-pack__h{display:none}
.sim > .stg-pack{margin:auto 0;width:100%;display:flex;flex-direction:column;gap:8px}
.sim > .stg-pack .stg-pack__h{display:block;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#4E6357}
.sim > .stg-pack svg{display:block;width:100%;height:auto}
.sim > .stg-pack--strip{height:100%;justify-content:center;margin:0}
.sim > .stg-pack--strip .stg-pack__h{display:none}
.sim > .stg-pack--strip svg{max-height:100%}

/* ----- stagephoto: a station picture that stands where the plant is ----- */
.sph{margin:20px 0}
.sph__sent{display:block;height:0;overflow:hidden}
.sph__shell{margin:0}
.sph__shell img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid var(--line);background:#fff}
.sph__cap{margin-top:7px;font-size:13px;line-height:1.5}
.sph__credit{margin:3px 0 0;font-size:10.5px;color:var(--muted)}
.sph__stub{margin:0;padding:2px 0 2px 9px;border-left:3px solid #CBB68A;font-size:12.5px;line-height:1.5;color:var(--muted)}
.sph__stub[hidden]{display:none}
.sph__arrow{color:#B08A4A;font-size:11px;margin-right:2px}
.sim > .sph__shell{margin-top:auto;margin-bottom:auto;width:100%}
.sim > .sph__shell img{max-height:60vh;object-fit:contain;background:#FBF6EC}
.sim > .sph__shell .sph__cap{font-size:13.5px;line-height:1.55}
.sim > .sph__shell--strip{display:flex;flex-direction:column;justify-content:center;height:100%;margin:0}
.sim > .sph__shell--strip picture{flex:1;min-height:0;display:flex}
.sim > .sph__shell--strip img{height:100%;width:100%;max-height:none;object-fit:contain}
.sim > .sph__shell--strip .sph__cap,.sim > .sph__shell--strip .sph__credit{display:none}

/* ----- curio: a strange true thing, fenced off from the exam ----- */
.curio{margin:26px 0;border:1px solid #E3D6BF;border-left:4px solid #B08A4A;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FCF7EC,#FBF3E4);padding:14px 16px 16px;overflow:hidden}
.curio__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:10px}
.curio__pill{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6B4E16;
  background:#F0E0BC;border:1px solid #D7BE8C;border-radius:var(--r-pill);padding:2px 9px}
.curio__fence{font-size:11.5px;color:var(--muted)}
.curio__body{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.curio--tall .curio__body{grid-template-columns:210px 1fr}
.curio__fig{margin:0}
.curio__fig picture{display:block}
.curio__fig img{width:100%;height:auto;display:block;border-radius:var(--r-md);border:1px solid #E0D3BB;background:#EFE7D8}
.curio__credit{margin-top:5px;font-size:10.5px;line-height:1.35;color:var(--muted)}
.curio__title{margin:0 0 6px;font-size:16.5px;line-height:1.3;color:var(--ink)}
.curio__p{margin:0 0 8px;font-size:14.5px;line-height:1.55}
.curio__src{margin:2px 0 0;font-size:11.5px;color:var(--muted)}
@media (max-width:620px){
  .curio__body,.curio--tall .curio__body{grid-template-columns:1fr}
  .curio__fig img{max-height:300px;object-fit:cover}
  .curio--tall .curio__fig img{max-height:360px;object-fit:contain;background:#FBF6EC}
}
.ad__slot:empty{display:none}
.ad__slot{margin-top:10px;padding-top:10px;border-top:1px solid var(--edge)}
.ad--split .ad__slot{display:none}
.adv{width:100%}
.sim > .adv{margin-top:auto;margin-bottom:auto}
.sim > .adv__stage{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;margin:0}
.adv__head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin:0 0 10px}
.adv__tag{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:2px 9px}
.adv__tag--xerophyte{background:#FBF1DC;color:#7A5410;border:1px solid #E2B95F}
.adv__tag--hydrophyte{background:#E6F2FA;color:#1F5E86;border:1px solid #7FB8DC}
.adv__tag--ext{background:var(--red-tint);color:var(--red);border:1px solid #E7B7AE}
.adv__title{font-size:16.5px;font-weight:700;color:var(--ink)}
.adv__fig{position:relative;width:100%}
.adv__frame{position:absolute;top:0;border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(40,30,15,.1),0 6px 18px rgba(40,30,15,.1);
  opacity:0;transform:scale(1.03);transition:opacity .35s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.adv__fig.is-in .adv__frame{opacity:1;transform:none}
.adv__frame picture,.adv__frame img{display:block;width:100%;height:100%}
.adv__frame img{object-fit:cover}
.adv__svg{display:block;width:100%;height:100%}
.adv__over{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.adv__labs{position:absolute;inset:0;pointer-events:none}
.adv__lab{position:absolute;font-size:13px;line-height:1.25;font-weight:600;color:#1F2A20;
  opacity:0;transform:translateY(3px);transition:opacity .35s ease,transform .35s ease}
.adv__lab--l{text-align:right}
.adv__lab.is-on{opacity:1;transform:none}
.adv__pin{opacity:0;transition:opacity .35s ease}
.adv__pin.is-on{opacity:1}
.adv__lead{fill:none;stroke:#1F2A20;stroke-width:1.2;stroke-linejoin:round}
.adv__leadhalo{fill:none;stroke:#fff;stroke-width:3.6;stroke-linejoin:round;opacity:.9}
.adv__dot{fill:#1F2A20;stroke:#fff;stroke-width:1.2}
.adv__ringg{opacity:0;transition:opacity .5s ease .25s}
.adv__ringg.is-on{opacity:1}
.adv__ring{fill:none;stroke:#FFE27A;stroke-width:2.2;stroke-dasharray:7 4}
.adv__ringhalo{fill:none;stroke:rgba(20,20,20,.38);stroke-width:4.2}
.adv__numhalo{fill:#fff;opacity:.92}
.adv__num{fill:#1F2A20}
.adv__numtxt{font-size:11px;font-weight:700;fill:#fff;font-family:var(--font)}
.adv__key{margin:8px 0 0;padding-left:22px;font-size:13px;line-height:1.45;color:#2C2C2C}
.adv__key:empty{display:none}
.adv__keyi{opacity:.35;transition:opacity .3s}
.adv__keyi.is-on{opacity:1}
.adv__cap{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#3C3C3C}
.adv__credit{display:block;margin-top:4px;font-size:11.5px;color:#77776F}
.adv__replay{position:absolute;z-index:2;font:inherit;font-size:12px;font-weight:600;padding:4px 10px;cursor:pointer;
  border:1px solid var(--edge);border-radius:var(--r-pill);background:rgba(255,255,255,.94);color:#3C3C3C}
.adv__replay:hover{border-color:var(--green);color:var(--green)}
/* labels drawn inside a diagram, so the picture can have the whole width */
.adv__ilab{font-family:var(--font);font-weight:700;fill:#2A1E12;paint-order:stroke;stroke:#FCF7EB;stroke-linejoin:round;stroke-linecap:round}
.adv__ilab--light{fill:#FFFFFF;stroke:#17405E}
.adv__ilead{stroke:#3B2A1A;fill:none;opacity:.8}
.adv__idot{fill:#3B2A1A}
.adv__ruler{font-family:var(--font);font-weight:600;fill:#3B2A1A}
.adv__replay[hidden]{display:none}
.adv__intro{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.adv__tile{font:inherit;display:block;text-align:left;padding:0;overflow:hidden;cursor:pointer;
  border:1.5px solid var(--edge);border-radius:var(--r);background:#fff;transition:border-color .15s}
.adv__tile--xerophyte:hover{border-color:#E2B95F} .adv__tile--hydrophyte:hover{border-color:#7FB8DC}
.adv__tile img{display:block;width:100%;height:150px;object-fit:cover}
.adv__tilecap{display:block;padding:7px 10px;font-size:13px;font-weight:700;color:var(--ink)}
/* the drawings and the particles */
.adv__svgtxt{font-size:13px;font-weight:600;fill:#3B2A1A;font-family:var(--font)}
.adv__camhead{font-size:13px;font-weight:800;letter-spacing:.14em;font-family:var(--font)}
.adv__camtxt{font-size:17px;font-weight:600;font-family:var(--font)}
.adv__camtag{font-size:15px;font-weight:800;fill:#4A4A4A;font-family:var(--font);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.adv__root{fill:#F4E7CC;stroke:#6F5332;stroke-width:1}
.adv__flow{fill:none;stroke:#2F7FCB;stroke-width:2.2;stroke-dasharray:5 11;stroke-linecap:round}
.adv__lroot{fill:#DCCBA8;stroke:#8E7A5A;stroke-width:.5}
.adv__stalk{fill:none;stroke:#6E4630;stroke-width:3.6;stroke-linecap:round}
.adv__stalkhi{fill:none;stroke:#B07B55;stroke-width:1.1;stroke-linecap:round;opacity:.6}
.adv__mol{fill:#2F7FCB;stroke:#fff;stroke-width:1}
.adv__mol--co2{fill:#5E5E5E}
.adv__haze{fill:#7CC0F0;opacity:.3}
.adv__gastag{font-size:12px;font-weight:700;font-family:var(--font);paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.adv__gastag--co2{fill:#4A4A4A}
.adv__gastag--o2{fill:#1F6FB8}
@media (prefers-reduced-motion:reduce){ .adv__frame,.adv__lab,.adv__pin,.adv__ringg,.adv__keyi{transition:none} }

/* the Supplement badge and the plant scene on a phone */
@media (max-width:1000px){
  .platecol{height:min(60vh,520px)}
  .platewrap svg#plant{height:100%}
}
/* 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}
/* the potometer's statistics in the Learn text: bold, and a click shows the working in place */
.t.is-stat{font-weight:700;cursor:pointer;border-bottom:1px dotted rgba(0,0,0,.35);padding-bottom:1px}
.t.is-stat:hover,.t.is-stat:focus-visible{background:rgba(0,0,0,.05);outline:none}
.po__pop--inline{margin:8px 0 12px}

/* ---------- 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){
  .platecol{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}
  .platecol.is-folded{height:auto;min-height:0}
  .platecol.is-folded .platewrap{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 */
  .platecol.is-folded .said,.platecol.is-folded .platecol__hint{display:none}
}
@media (max-width:1000px) and (max-height:560px){ .platecol{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}
  .platecol__hint{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
}

/* a phone with a station zoomed in: the whole-plate button and the fold are enough; the hint would only crowd them */
@media (max-width:540px){ .tool--whole:not([hidden]) ~ .platecol__hint{display:none} }
/* 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){ .platecol.is-folded{overflow:hidden} .platecol.is-folded .platewrap{pointer-events:none} .platecol.is-folded .platewrap *{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){ .platecol{z-index:35} }
/* the potometer's reset: at the end of the button row, in its own colour so it is found at once */
.po__resetall{margin-left:auto;color:#9A4A22;border-color:#C9793F;background:#FFF6EE}
.po__resetall:hover{background:#F7DCC6}
/* the statistics pop-up: the formula set out, a key to its letters, the working as steps and a table */
.po__pop__h > span{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.po__pop__ib{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5A3D8A;background:#EFE8F8;border:1px solid #CDB9E8;border-radius:var(--r-pill);padding:1px 8px}
.po__pop__fm{font-family:"Times New Roman",Times,Georgia,serif;font-size:19px;line-height:1.3;text-align:center;padding:10px 8px;margin:8px 0 6px;background:#fff;border:1px dashed var(--edge);border-radius:var(--r);color:#1F2A1F}
.po__pop__fm i{font-style:italic}
.fm__frac{display:inline-block;vertical-align:middle;text-align:center;margin:0 3px}
.fm__num{display:block;border-bottom:1.3px solid currentColor;padding:0 6px 1px}
.fm__den{display:block;padding:1px 6px 0}
.fm__sqrt{display:inline-block;vertical-align:middle;font-size:26px;line-height:1;margin-right:1px}
.fm__rad{display:inline-block;vertical-align:middle;border-top:1.3px solid currentColor;padding:3px 6px 0}
.po__pop__key{font-family:var(--mono);font-size:11.5px;color:var(--grey);text-align:center;margin:0 0 10px}
.po__pop__key i{font-family:"Times New Roman",Times,Georgia,serif;font-size:14px;color:#1F2A1F}
.po__pop__how p{margin:0 0 6px}
.po__pop__steps{margin:6px 0 0;padding-left:22px}
.po__pop__steps li{margin:0 0 4px;line-height:1.45}
.po__pop__steps i,.po__pop__tbl i{font-family:"Times New Roman",Times,Georgia,serif;font-size:14.5px}
.po__pop__tbl{border-collapse:collapse;margin:6px 0 8px;font-variant-numeric:tabular-nums;font-size:12.5px;background:#fff}
.po__pop__tbl th,.po__pop__tbl td{border:1px solid var(--edge);padding:4px 10px;text-align:center}
.po__pop__tbl th{font-weight:600;color:var(--green);background:var(--card-2);line-height:1.25}
/* the shoot in the auxin widget: a stack of cells; the shaded half tints as the auxin arrives and its cells grow longer */
.ax__shade{fill:#F6D98A;opacity:0;transition:opacity .3s}
.ax__cells{fill:none;stroke:#2F7D46;stroke-width:.9;opacity:.6}
/* the lines of the potometer's graph: tabs above the table (one a line), the line's name, a legend that hides and shows */
.po__linetabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.po__linetab{font:inherit;font-size:13px;font-weight:700;border:1.5px solid var(--edge);border-radius:var(--r-pill);background:#fff;padding:4px 12px 4px 8px;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.po__linetab small{font-weight:500;color:var(--grey);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.po__linetab[aria-pressed="true"]{border-color:var(--lc);box-shadow:inset 0 0 0 1.5px var(--lc)}
.po__swatch{width:12px;height:12px;border-radius:50%;background:var(--lc);flex:none;display:inline-block}
.po__linehead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 6px}
.po__linename{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);border:0;border-bottom:1px dashed var(--edge);background:transparent;padding:2px 4px;min-width:min(280px,100%)}
.po__linename:focus{outline:none;border-bottom-color:var(--green)}
.po__linehead small{color:var(--grey);font-size:12px}
.po__delline{margin-left:auto;font-size:12px;padding:3px 9px}
.po__legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:6px 0 2px}
.po__legend__b{font:inherit;font-size:12.5px;font-weight:600;border:1px solid var(--edge);border-radius:var(--r-pill);background:#fff;padding:2px 10px 2px 6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.po__legend__b[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.po__legend small{color:var(--grey);font-size:12px}
.po__band{opacity:.16}
/* what each bench button is for, at once on hover or keyboard focus */
.wbtn[data-tip]{position:relative}
.wbtn[data-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;padding:7px 11px;border-radius:7px;box-shadow:var(--shadow-lg);opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .1s,transform .1s}
.wbtn[data-tip]::before{content:"";position:absolute;left:12px;top:calc(100% + 1px);border:6px solid transparent;border-top-width:0;border-bottom-color:#1F2A1F;opacity:0;pointer-events:none;transition:opacity .1s}
.wbtn[data-tip]:hover::after,.wbtn[data-tip]:hover::before,.wbtn[data-tip]:focus-visible::after,.wbtn[data-tip]:focus-visible::before{opacity:1;transform:none}
.po__resetall[data-tip]::after{left:auto;right:0}
.po__resetall[data-tip]::before{left:auto;right:14px}
.po__btns,.po__right,.po{overflow:visible}
/* a hovered button's tooltip sits above its neighbours in the row */
.wbtn[data-tip]:hover,.wbtn[data-tip]:focus-visible{z-index:41}
.po__resetall:disabled{background:#F5F7F4}
/* the trials toggle sits with the statistic toggle; a struck-through pill means the trials are hidden */
.po__dots[aria-pressed="false"]{text-decoration:line-through;opacity:.7}
/* a button asking to be pressed again before it loses work */
.po .wbtn.is-armed,.po__data .wbtn.is-armed{background:#B4532A!important;border-color:#B4532A!important;color:#fff!important}
.po__errbar__l2{margin-left:10px}
/* a phone: each row a two-column grid, the record and the resets full width, so every button is a clear target */
@media (max-width:540px){
  .po__brow{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .po__brow .wbtn{width:100%;margin:0;text-align:center;padding:8px 8px}
  .po__brow .po__rec,.po__brow .po__resetset,.po__brow .po__resetall,.po__brow .po__newshoot,.po__brow .po__newline{grid-column:1 / -1}   /* only Start and the tap share a line; every button one line tall */
  .po__resetall[data-tip]::after{left:0;right:auto}.po__resetall[data-tip]::before{left:12px;right:auto}
}
/* the small reset in a widget's header */
.widget__h .widget__reset{margin-left:auto;font:inherit;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--grey);background:#fff;border:1px solid var(--edge);border-radius:var(--r-pill);padding:2px 9px;cursor:pointer}
.widget__h .widget__try ~ .widget__reset{margin-left:0}
.widget__h .widget__reset:hover{color:var(--ink);border-color:var(--green)}
@media (max-width:540px){ .widget__h{row-gap:3px} .widget__h .widget__try,.widget__h .widget__reset{padding:1px 8px} }

/* ---- auxin: the experiment bench ---- */
.ax__panel{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.ax__grp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ax__grpl{flex:0 0 auto;min-width:148px;font-size:12px;font-weight:700;color:#5A5A5A;letter-spacing:.01em}
.ax__pills{display:flex;gap:6px;flex-wrap:wrap}
.ax__log{margin:10px 0 0;padding:11px 13px;list-style:none;background:var(--purple-tint);
  border:1px solid #D8CBE8;border-radius:var(--r);
  font-size:13.5px;line-height:1.6;color:#3C3C3C;min-height:3.4em}
.ax__logi{margin:0 0 5px;padding-left:16px;position:relative}
.ax__logi:last-child{margin-bottom:0}
.ax__logi::before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;
  background:#C3B4DC;transition:background .25s}
.ax__logi.is-now::before{background:var(--k-grow)}
.ax__logi.is-who{padding-left:0;font-size:12.5px;color:#6A6A6A;font-style:italic}
.ax__logi.is-who::before{display:none}
.ax__log b{color:var(--k-grow)}
.ax__again{font:inherit;font-size:12.5px;font-weight:600;margin-top:10px;padding:5px 12px;cursor:pointer;
  border:1.5px solid var(--edge);border-radius:var(--r-pill);background:#fff;color:#3C3C3C}
.ax__again:hover{border-color:var(--k-grow);color:var(--k-grow)}
.ax__l{font-size:10.5px;fill:#4A4A4A;font-family:var(--font);font-weight:600}
.ax__s{font-size:10px;fill:#7A7A7A;font-family:var(--font)}
.exam-steps{margin:8px 0 2px;padding-left:22px;list-style:decimal}
.exam-steps li{margin:4px 0;padding-left:3px;line-height:1.55}
.ax__key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;font-size:12px;color:#5A5A5A}
.ax__keyi{display:inline-flex;align-items:center;gap:5px}
.ax__sw{width:15px;height:15px;flex:0 0 auto}
.sim__pick{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0 12px;position:sticky;top:0;background:#F3EFE4;z-index:2}
.sim__pickb{font:inherit;font-size:12px;font-weight:600;border:1.5px solid var(--edge);border-radius:var(--r-pill);
  background:#fff;color:#3C3C3C;padding:4px 11px;cursor:pointer}
.sim__pickb.is-on{background:var(--k-grow);border-color:var(--k-grow);color:#fff}
.sim__slot{margin:0 0 18px;padding:0 0 14px;border-bottom:2px solid var(--edge)}
.sim__slot .sim__pick{background:var(--paper)}
/* a phrase that names something further down the page, and takes you to it */
.goto{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-style:solid;text-underline-offset:2px;
  text-decoration-color:var(--k-grow);text-decoration-thickness:1.5px}
.goto:hover,.goto:focus-visible{color:var(--k-grow)}
.goto__a{font-size:.82em;margin-left:2px;opacity:.75;text-decoration:none;display:inline-block}
@keyframes gotoflash{0%{box-shadow:0 0 0 3px var(--k-grow)}100%{box-shadow:0 0 0 3px transparent}}
.is-found{animation:gotoflash 1.5s ease-out 1;border-radius:var(--r)}
@media (prefers-reduced-motion:reduce){ .is-found{animation:none;outline:3px solid var(--k-grow)} }
/* a phrase that opens a short aside */
.xplain{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-style:dashed;text-underline-offset:3px;
  text-decoration-color:#9A7BC8;text-decoration-thickness:1.4px}
.xplain:hover,.xplain:focus-visible{color:#6E4E9E}
.xplain__a{font-size:.72em;font-weight:700;margin-left:3px;color:#6E4E9E;text-decoration:none;
  display:inline-block;border:1.3px solid #B9A2DC;border-radius:50%;width:1.35em;height:1.35em;
  line-height:1.28em;text-align:center;vertical-align:.12em}
.xp{position:fixed;inset:0;z-index:60;background:rgba(28,24,20,.5);display:grid;place-items:center;padding:22px}
.xp__card{background:var(--paper,#FBFAF6);border-radius:var(--r);max-width:640px;width:100%;
  max-height:86vh;display:flex;flex-direction:column;box-shadow:0 18px 60px rgba(0,0,0,.34)}
.xp__h{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1.5px solid var(--edge)}
.xp__h b{font-size:15.5px;color:var(--k-grow)}
.xp__x{margin-left:auto;font:inherit;font-size:15px;border:0;background:none;cursor:pointer;color:#6B6B63;padding:2px 6px}
.xp__x:hover{color:#2C2C2C}
.xp__b{padding:14px 18px 20px;overflow-y:auto;font-size:14.5px;line-height:1.62;color:#3C3C3C}
.xp__b p{margin:0 0 11px}
.xp__b p:last-child{margin-bottom:0}
.xp__svg{width:100%;height:auto;display:block;margin:14px 0;background:#fff;
  border:1px solid var(--edge);border-radius:var(--r)}
.xp__t{font-size:11px;font-weight:700;fill:#2A6B3B;font-family:var(--font)}
.xp__s{font-size:9.5px;fill:#6B6B63;font-family:var(--font)}
.ax__acts{display:flex;gap:8px;align-items:center;margin:2px 0 10px}
.ax__go{font:inherit;font-size:13px;font-weight:700;padding:6px 16px;cursor:pointer;
  border:1.5px solid var(--k-grow);border-radius:var(--r-pill);background:var(--k-grow);color:#fff}
.ax__go:hover{filter:brightness(1.07)}
.ax__rst{font:inherit;font-size:12.5px;font-weight:600;padding:5px 12px;cursor:pointer;
  border:1.5px solid var(--edge);border-radius:var(--r-pill);background:#fff;color:#5A5A5A}
.ax__rst:hover{border-color:var(--k-grow);color:var(--k-grow)}
.ax--split .ax__slot{display:none}
.platecol.is-sim .ax__stage{border:0;background:transparent;padding:0}
/* the drawing is beside you, or pinned above the controls: either way you see the change as you
   make it, so the re-run button is only for the Practise column */
/* the drawing is beside you in the column, or above you in the strip: either way you see the
   change as you make it, so the re-run button is only for the Practise column */
.ax--split .ax__acts,.ax--strip .ax__acts{display:none}
/* in the strip the drawing is alone and should fill it */
.platecol.is-sim .sim > .ax__stage{margin:0;height:100%}
.platecol.is-sim .sim > .ax__stage svg{height:100%;width:100%;object-fit:contain}
.xp__b img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--edge);margin:12px 0 6px}
.xp__cr{font-size:11.5px;color:#6B6B63;margin:0 0 12px}
/* the labels, when there is no room for a column beside the drawing */
.ax__pins{margin:10px 0 0;padding-left:22px;list-style:decimal;font-size:12.5px;line-height:1.5;color:#3C3C3C}
.ax__pins:empty{display:none}
.ax__pins li{margin:3px 0}
.ax__pin{font-size:12px;font-weight:700;fill:#3C3C3C;font-family:var(--font)}

/* On a phone the strip is about a third of the screen, and a 46 px row of tools on top of the
   drawing is a sixth of that spent on one button. While a simulation is standing there the row
   floats over the drawing instead, and the drawing takes the whole strip. */
@media (max-width:1000px) and (min-height:561px){
  .platecol.is-sim .platecol__tools{position:absolute;top:0;right:0;left:auto;z-index:8;
    padding:5px 8px;min-height:0;background:none;pointer-events:none}
  .platecol.is-sim .platecol__tools > *{pointer-events:auto}
  .platecol.is-sim .fold{font-size:10.5px;padding:3px 9px;background:rgba(255,255,255,.86);
    border-radius:var(--r-pill);border:1px solid var(--edge);backdrop-filter:blur(2px)}
  .platecol.is-sim .sim{padding:0 8px 8px}
}
.ax__pintxt{font-size:10.5px;fill:#3C3C3C;font-family:var(--font)}

/* ---------- minifig: a postage-stamp diagram beside a sentence ---------- */
.minifig{float:right;width:152px;margin:1px 0 6px 14px;padding:0;
  background:#FBFAF6;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.minifig__svg{display:block;width:100%;height:auto}
/* The row has to grow to contain its own floated figure. overflow:hidden does that, but it also
   CLIPS list markers, which are painted outside the principal box — so the numbers in front of
   the four auxin facts silently disappeared. flow-root contains the float and clips nothing. It
   is also scoped to the top-level bullet, not to every li inside it. */
.exam-list > li{display:flow-root}
/* A numbered run of facts under a sentence that has a figure was wrapping round the float for
   its first three lines and then springing out to full width, which reads as a staircase with a
   bite out of it. The picture belongs beside the sentence it illustrates; the list starts under
   it, at one width. */
.minifig ~ .exam-steps{clear:right}
@media (max-width:560px){
  /* on a phone a 122 px float leaves a 3-word column beside it, which is worse than no
     picture at all: it goes full width and the text runs under it instead of round it */
  .minifig{float:none;width:186px;margin:4px auto 8px}
}
.figref{display:inline-flex;align-items:center;justify-content:center;width:1.3em;height:1.3em;
  margin:0 .1em 0 .16em;border:1.4px solid #3C3C3C;border-radius:50%;font-size:.76em;font-weight:700;
  line-height:1;vertical-align:.06em;color:#3C3C3C;flex:0 0 auto}
.minifig__ph{position:relative;display:block;line-height:0}
.minifig__img{display:block;width:100%;height:auto}
.minifig__pin{position:absolute;transform:translate(-50%,-50%);width:19px;height:19px;border-radius:50%;
  background:#fff;border:1.5px solid #3C3C3C;color:#3C3C3C;font:700 11px/16px var(--font);
  text-align:center;font-style:normal;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.xp__cite{margin:14px 0 0;padding-top:10px;border-top:1px dashed var(--edge);
  font-size:12.5px;line-height:1.5;color:#6A6A6A}
.xp__cite a{color:var(--k-grow)}
.xp__warn{margin:0 0 14px;padding:9px 12px;border-radius:var(--r);
  background:#FDECEC;border:1.5px solid #E4B4B4;border-left:4px solid #C0392B;
  color:#9B2F22;font-size:13px;font-weight:700;line-height:1.45}

/* ----- which bench: the four factors, or the whole apparatus -----
   A radio group styled as a segmented control. Each bench keeps its own colour AND its own
   glyph, at rest and when chosen, so the two are told apart by shape as well as by hue — and
   a sentence underneath says what the chosen bench holds. */
.po__mode{border:1px solid var(--edge);border-radius:var(--r);padding:8px 11px 9px;margin:0 0 12px;background:var(--card-2)}
.po__mode legend{font-size:11.5px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.05em;padding:0 5px}
.po__mode__seg{display:inline-flex;border:1px solid var(--edge);border-radius:9px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.po__mode__b{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;font-size:13.5px;cursor:pointer;
  color:var(--grey);user-select:none;transition:background .13s,color .13s}
.po__mode__b + .po__mode__b{border-left:1px solid var(--edge)}
.po__mode__b input{position:absolute;opacity:0;width:0;height:0}
.po__mode__i{display:inline-grid;place-items:center;line-height:0}
/* at rest the glyph carries the bench's colour, so each half is identifiable before it is chosen */
.po__mode__b--igcse .po__mode__i{color:var(--green-2)}
.po__mode__b--full  .po__mode__i{color:var(--teal)}
.po__mode__b:hover{background:var(--card-2);color:var(--ink)}
.po__mode__b.is-on{font-weight:700;color:#fff}
.po__mode__b.is-on .po__mode__i{color:#fff}
.po__mode__b--igcse.is-on{background:var(--green)}
.po__mode__b--full.is-on{background:var(--teal)}
.po__mode__b input:focus-visible ~ .po__mode__t{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.po__mode__say{font-size:12.4px;line-height:1.45;color:#4A4A4A;margin:7px 0 0;padding-left:3px;border-left:3px solid var(--edge);padding-left:9px}
.po__mode:has(.po__mode__b--igcse.is-on) .po__mode__say{border-left-color:var(--green-2)}
.po__mode:has(.po__mode__b--full.is-on)  .po__mode__say{border-left-color:var(--teal)}

/* ----- the shoot inside the row: two kinds of repeat, kept apart by the table itself ----- */
.po__srow td{background:var(--green-tint);font-weight:700}
.po__srow td:first-child{font-weight:500;color:#3C3C3C}
.po__ivcell{vertical-align:middle}
.po__shootcell{white-space:nowrap;font-weight:600;color:#3C3C3C}
.po__blank{color:var(--line)}
.po__table thead th{white-space:normal;line-height:1.3}
/* every column showing the same quantity gets the same width — the browser's own layout gives the
   leftover space to whichever column happens to hold the widest text, which made Trial 3 balloon */
.po__table{table-layout:fixed}
.po__nest,.po__paired{font-size:12.5px;line-height:1.55;color:#3C3C3C;background:var(--card-2);
  border-left:3px solid var(--green-2);border-radius:0 var(--r) var(--r) 0;padding:9px 12px;margin:10px 0 0}
.po__paired{border-left-color:var(--teal)}
.po__nest b,.po__paired b{color:var(--green)}
.po__paired b{color:var(--teal)}
.po__errbar__b.is-off{opacity:.45;border-style:dashed;cursor:not-allowed}
/* a term button inside a heading must be allowed to wrap — .po__term is nowrap for the inline case */
.po__table thead th .po__term{white-space:normal;text-align:left;line-height:1.3}

/* ----- the standing question: why a repeat, why a new shoot ----- */
.po__whybtn.is-open{background:var(--green);color:#fff;border-color:var(--green)}
.po__why{border:1.5px solid var(--green);border-radius:var(--r);background:var(--card);overflow:hidden;margin:10px 0 0}
.po__why__h{background:var(--green);color:#fff;padding:9px 14px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:9px}
.po__why__q{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#fff;color:var(--green);font-size:12px;font-weight:800}
.po__why__top{padding:11px 14px 0;margin:0;font-size:13.2px;line-height:1.5}
.po__why__top b{color:var(--green)}
.po__why__g{border-collapse:collapse;width:100%;font-size:12.4px;line-height:1.5;margin:10px 0 0;table-layout:fixed}
.po__why__g th,.po__why__g td{border:1px solid var(--edge-2);padding:7px 10px;vertical-align:top;text-align:left}
.po__why__g thead th{background:var(--card-2);color:var(--green);font-size:11.8px;font-weight:700}
.po__why__g thead th:first-child{width:23%}
.po__why__g thead th em{display:block;font-style:normal;font-weight:400;color:var(--grey);font-size:11px;margin-top:1px}
.po__why__t{background:#FCFBF7;font-weight:700;color:var(--ink)}
.po__why__t small{display:block;font-weight:400;color:var(--grey);font-size:10.8px;line-height:1.35;margin-top:2px}
.po__why__v{font-weight:800;margin-right:5px}
.po__why__y{color:var(--ok)}.po__why__no{color:var(--bad)}.po__why__p{color:var(--amber)}
.po__why__w{margin:9px 14px 0;padding:7px 10px;font-size:12.2px;line-height:1.5;background:var(--amber-tint);
  border-left:3px solid var(--amber);border-radius:0 var(--r-sm) var(--r-sm) 0}
.po__why__w--bad{background:var(--red-tint);border-left-color:var(--red);margin-bottom:11px}
.po__why__live{border-top:1px solid var(--edge-2);background:var(--green-tint);padding:11px 14px 13px;font-size:12.6px;line-height:1.55}
.po__why__live h4{margin:0 0 5px;font-size:13px;color:var(--green)}
.po__why__live p{margin:6px 0 0}
.po__why__num{border-collapse:collapse;margin:5px 0 0;font-size:12.4px}
.po__why__num td{padding:2px 12px 2px 0;font-variant-numeric:tabular-nums}
.po__why__num td:first-child{color:#4A4A4A}
.po__why__punch{background:var(--card);border-left:3px solid var(--green);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:7px 10px;margin-top:9px!important}
@media (max-width:640px){ .po__why__g,.po__why__g thead,.po__why__g tbody,.po__why__g tr,.po__why__g td,.po__why__g th{display:block;width:auto!important} .po__why__g thead{display:none} }
.po__why__g--one thead th:first-child{width:24%}
.po__why__door{border-top:1px solid var(--edge-2);background:var(--teal-tint);padding:11px 14px 13px;font-size:12.8px;line-height:1.55}
.po__why__door p{margin:0}
.po__why__door b{color:var(--teal)}
.po__why__go{margin-top:9px;font:inherit;font-size:13px;font-weight:700;color:#fff;background:var(--teal);border:0;border-radius:8px;padding:7px 13px;cursor:pointer}
.po__why__go:hover{filter:brightness(1.08)}
.po__why__go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* both spreads on one figure: a shoot is hollow with a thin bar, the plant is solid with a thick one */
.po__dotshoot{fill:none;stroke-width:1.8;stroke-linecap:round}
.po__dot--trial{opacity:.4;stroke-width:1.1}
.po__whisker--shoot{stroke-width:1.15;opacity:.8;fill:none}
.po__whisker--grand{stroke-width:2.6!important}
.po__dotmean--grand{stroke-width:3}
.po__gkey{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:11.8px;color:#4A4A4A;margin:4px 0 0;align-items:center}
.po__gkey svg{vertical-align:middle;margin-right:5px}
.po__nest--warn{border-left-color:var(--amber);background:var(--amber-tint)}
.po__nest--warn b{color:var(--amber)}
/* no independent variable chosen: said at the top of the table, where it is read first */
.po__noiv{font-size:12.8px;line-height:1.5;color:#3C3C3C;background:var(--amber-tint);border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;padding:8px 12px;margin:0 0 10px}
.po__noiv b{color:var(--amber)}

/* ----- labelphoto: a photograph labelled the way a drawing is ----- */
.lp{margin:14px 0;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:8px 6px 6px}
.lp__svg{display:block;width:100%;height:auto;font-family:var(--font)}
.lp__ringhalo{fill:none;stroke:rgba(0,0,0,.45);stroke-width:4.2}
.lp__ring{fill:none;stroke:#FFF1A8;stroke-width:2;stroke-dasharray:6 3.5}
.lp__leadhalo{stroke:#fff;stroke-width:3.4;opacity:.9}
.lp__lead{stroke:#14572B;stroke-width:1.3}
.lp__dot{fill:#14572B;stroke:#fff;stroke-width:1.6}
.lp__lab{font-size:13px;fill:#14572B;font-weight:700}
.lp__brace{fill:none;stroke:#3C3C3C;stroke-width:1.5}
.lp__group{font-size:13px;fill:#3C3C3C;font-weight:700;font-style:italic}
.lp figcaption{font-size:12.5px;line-height:1.5;color:var(--grey);margin:6px 6px 0}

/* 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}