/* _cell-set.css: the plant-cell sets' one look (2026-10-28). Copied as it stood from set 2 (_cell-set-2-mockup.html), the page
   whose look Emily last approved; set 3 (_cell-set-3-mockup.html) is the first page to load it instead of carrying its own copy.
   Set 2 loads it too since 10-29; set 1 still carries its own copy (docs/handoff/2026-10-26-cell-sets/README.md, set 3: the shared engine). */
/* the big headline face (Rubik 700, bundled, as on the lesson page): the envelope's "You have a mission." */
@font-face{font-family:'Rubik';src:url('fonts/rubik-700-latin.woff2') format('woff2');font-weight:700 800;font-display:swap}
:root{--ground:#FBFAF8;--ink:#1C1917;--muted:#57534E;--line:#E6E2DA;--band:#F3F1EC;--card:#FFFFFF;
  --action:#C4461F;--action-hover:#A93B19;--action-ink:#B8431F;--action-on:#FFFFFF;--mark:#E4572E;--mark-text:#B8431F;
  --moss:#5E8E33;--moss-tint:#EEF4E6;--grey:#78716C;--grey-tint:#EFEDE9;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ground);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%;touch-action:none}
#links{position:fixed;inset:0;z-index:4;pointer-events:none}
button{font-family:var(--font)}
.hud{position:fixed;z-index:10;left:16px;top:calc(12px + env(safe-area-inset-top));display:flex;align-items:center;gap:10px;
  background:rgba(251,250,248,.92);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;opacity:0;transition:opacity .4s;pointer-events:none}
.hud.on{opacity:1}
/* the bar keeps its right margin: a long title ends in … on one line rather than wrapping or running off a phone (2026-10-29) */
.hud{max-width:calc(100vw - 32px)}.hud>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud>:not(:first-child){flex:none}
body.filming .hud,body.filming .sndb,body.filming #card,body.filming .veil{visibility:hidden!important}
.sndb{position:fixed;z-index:31;right:calc(16px + env(safe-area-inset-right,0px));top:calc(12px + env(safe-area-inset-top));display:none;align-items:center;gap:6px;background:rgba(251,250,248,.92);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.sndb.on{display:inline-flex}.sndb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:640px){ .sndb{right:calc(12px + env(safe-area-inset-right,0px));top:calc(50px + env(safe-area-inset-top));padding:6px 9px} .sndb span{display:none} }   /* under the top bar: the bar fills a phone's width */
.hud .dots{display:flex;gap:5px}
.hud .dots i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block;transition:background .3s}
.hud .dots i.done{background:var(--moss)}
.hud .clk{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500}
.vlab{position:fixed;z-index:5;font-size:13px;font-weight:600;color:var(--muted);pointer-events:none;opacity:0;transition:opacity .3s}
.vlab.on{opacity:1}
.day{position:fixed;z-index:6;background:rgba(28,25,23,.8);color:#fff;font-size:13px;font-weight:700;border-radius:999px;padding:4px 11px;pointer-events:none;opacity:0;transition:opacity .3s;font-variant-numeric:tabular-nums}
.day.on{opacity:1}
.lab{position:fixed;z-index:6;transform:translate(-50%,-50%);background:rgba(28,25,23,.74);color:#fff;font-size:13px;font-weight:600;
  border-radius:999px;padding:4px 10px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s}
.lab.on{opacity:1}
.lab span{font-weight:400;color:#E7E2DA}
.bare .lab span{display:none}   /* the doctor round: names only, so a case is not solved by matching its words to a nickname */
/* the part a word asks about, on a flat page: an amber pulse around it (the text sets' glow, now every set's; fix B 11-01: data set 2 named
   "the glowing part" and drew only an ink border). The 3D cell's own glow is the stage's (app/_cell-stage.js) */
.glow{outline:3px solid #E8A33D;outline-offset:2px;animation:kglow 1.3s ease-in-out infinite}
@keyframes kglow{0%,100%{outline-color:#E8A33D}50%{outline-color:#F6D49B}}
@media (prefers-reduced-motion: reduce){ .glow{animation:none} }
/* fix B (11-01): the changed-your-mind card, the watch-it-together, a name card in the deck, a key term and its meaning */
.kmind{margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--moss-tint)}
.kmind h4{margin:0 0 4px;font-size:15px;font-weight:800}.kmind p{margin:0;font-size:14.5px;line-height:1.45}.kmind .was{color:var(--muted)}
.kreplay{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.kreplay li{padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:background .3s,border-color .3s}
.kreplay li.now{border-color:var(--ink);background:var(--band)}
.kreplay .rq{margin:0;font-size:14px;color:var(--muted);line-height:1.4}.kreplay .ro{margin:4px 0 0;display:flex;gap:8px;align-items:center;font-size:15px;font-weight:700;line-height:1.35}
.kreplay .ro .mk{flex:none;width:20px;height:20px;border-radius:50%;background:var(--moss);color:#fff;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.kreplay .ro svg.pic{flex:none;width:40px;height:28px}.kreplay .ra{margin:4px 0 0;font-size:14.5px;line-height:1.45}
.namecard .indeck{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--moss)}
.term{border-bottom:2px dotted var(--mark);cursor:pointer}.term:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.kterm{position:fixed;z-index:60;width:min(320px,calc(100vw - 16px));background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 44px 12px 14px;box-shadow:0 8px 24px rgba(28,25,23,.12)}
.kterm b{display:block;font-size:16px}.kterm p{margin:4px 0 0;font-size:14.5px;line-height:1.45}.kterm .ctx{color:var(--muted)}.kterm .ib{position:absolute;right:6px;top:6px}
/* numbers on the scene (the stage's nums(), fix B 11-01): one size on every screen, never smaller than 13 px */
.snums{position:fixed;inset:0;z-index:5;pointer-events:none}
.snum{position:absolute;left:0;top:0;font:600 13px/1.15 var(--font);color:#2A2420;white-space:nowrap;font-variant-numeric:tabular-nums}
.snum.t0{font-size:18px;font-weight:800}.snum.tape{font-size:15px;font-weight:700;color:#1C1917}
.tag{position:fixed;z-index:5;transform:translate(-50%,-50%);background:rgba(255,255,255,.88);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:600;
  border-radius:999px;padding:3px 9px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s}
.tag.on{opacity:1}
.card{position:fixed;z-index:20;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translate(-50%,12px);
  width:min(640px,calc(100vw - 32px));max-height:min(58vh,560px);overflow:auto;scroll-padding-bottom:64px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:16px 18px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.card.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
body.filming .uf-tab,body.filming .uf-hide{visibility:hidden!important}
.card .row{display:flex;align-items:flex-start;gap:10px}
.card .scene{font-size:14.5px;line-height:1.45;color:var(--muted);margin:0 0 8px}
.card .say{font-size:17px;line-height:1.45;font-weight:600;letter-spacing:-.01em;margin:0;flex:1}
.card .ask{font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0 0 10px;flex:1;line-height:1.3}
.card .line{font-size:15.5px;line-height:1.5;margin:8px 0 0}
.card .clue{font-size:15.5px;line-height:1.5;margin:0 0 10px;background:var(--band);border-radius:12px;padding:9px 12px}
.card .foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px}
/* Next never scrolls out of sight: a card's last row stays on the card's bottom edge and the rest scrolls under it. 2026-10-31, Emily on
   text set 2: "the game seems to be stuck at step 3": a result card taller than its box had Next past its edge. check_set fails it now */
.card > .foot:last-child{position:sticky;bottom:-16px;z-index:1;margin:0 0 -16px;padding:12px 0 16px;background:linear-gradient(rgba(255,255,255,0),var(--card) 12px)}
.card .mine{font-size:14px;color:var(--muted);margin:8px 0 0}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{position:relative;display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:48px;padding:9px 44px 9px 12px;border-radius:14px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font-size:15.5px;line-height:1.35;cursor:pointer;transition:background .2s,border-color .2s}
.opt:hover{border-color:#CFC8BC}
.opt svg.pic{flex:none;width:58px;height:40px}
.opt .mk{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.opt.right{background:var(--moss-tint);border-color:var(--moss);cursor:default}
.opt.right .mk{display:flex;background:var(--moss);color:#fff}
.opt.wrong{background:var(--grey-tint);border-color:var(--line);color:#8A837B;cursor:default}
.opt.wrong .mk{display:flex;background:#D6D3CE;color:#fff}
.opt.picked{border-color:var(--ink)}
.opt.gone{display:none}
.opt[disabled]{cursor:default}
.bub{position:relative;margin:6px 0 2px 14px;max-width:calc(100% - 28px);background:var(--ink);color:#fff;font-size:14.5px;line-height:1.45;border-radius:12px;padding:8px 12px;width:max-content}
.bub::before{content:"";position:absolute;left:18px;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:var(--ink)}
.bub.ok{background:var(--moss)}
.bub.ok::before{border-bottom-color:var(--moss)}
.namecard{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.namecard h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.namecard .nick{font-size:15px;color:var(--muted);margin:2px 0 0}
.namecard p{margin:8px 0 0;font-size:15.5px;line-height:1.5}
.namecard .sayit{font-size:15px;color:var(--muted);margin:6px 0 0}
.namecard .sayit b{color:var(--ink);letter-spacing:.01em}
.done-line{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--muted);margin:0 0 10px}
.done-line .mk{flex:none;width:22px;height:22px;border-radius:50%;background:var(--moss);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.slots{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 10px;min-height:44px}
.slot{min-width:46px;height:42px;border-radius:10px;border:1.5px dashed #CFC8BC;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;padding:0 10px;color:var(--ink)}
.slot.filled{border:1.5px solid var(--moss);background:var(--moss-tint)}
.slot{transition:transform .12s,background .12s}.slot.beat{background:#DCEBC9}.slot.stress{transform:scale(1.14)}
.tiles{display:flex;flex-wrap:wrap;gap:8px}
.tile{position:relative;min-width:58px;min-height:48px;padding:8px 16px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:18px;font-weight:700;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.tile:hover{border-color:#CFC8BC}
.tile.used{background:var(--moss-tint);border-color:var(--moss);color:var(--moss);cursor:default}
.tile.wrong{background:var(--grey-tint);color:#A8A29E;cursor:default}
.tile .mk{position:absolute;right:-7px;top:-7px;width:20px;height:20px;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.tile.used .mk{display:flex;background:var(--moss);color:#fff}
.tile.wrong .mk{display:flex;background:#D6D3CE;color:#fff}
.case{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.case svg{flex:none;width:96px;height:72px}
.case p{margin:0;font-size:15.5px;line-height:1.5}
.hints{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.hints:empty{display:none}
.hints .h{background:var(--band);border-radius:12px;padding:8px 12px;font-size:14.5px;line-height:1.45;color:#44403C}
.hints .h b{color:var(--ink)}
.learned{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.learned div{background:var(--band);border-radius:14px;padding:10px 12px;font-size:15px;line-height:1.45}
.learned b{font-size:16px}
.learned span{color:var(--muted)}
.stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.stats div{background:var(--band);border-radius:12px;padding:8px 12px;font-size:13px;color:var(--muted)}
.stats b{display:block;font-size:17px;color:var(--ink);font-weight:700;margin-top:2px}
/* Go deeper on the end card (10-29): the other games' name-card doors (app/_game-shell.js), the answer behind a tap */
.ndeeper{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.ndeeper .nh{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 2px}
.ndq{font:inherit;width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.ndq:hover,.ndq:focus-visible{border-color:var(--ink)}.ndq[aria-expanded="true"] .ndc{transform:rotate(180deg)}.ndc{flex:none;transition:transform .15s}
.nda{padding:2px 14px 4px}.nda p{font-size:15px;line-height:1.55;color:var(--muted);margin:6px 0 0}
.ndmore{font:inherit;align-self:flex-start;background:none;border:none;padding:6px 2px;font-size:15px;font-weight:700;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion: reduce){ .ndc{transition:none} }
.veil{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:calc(66px + env(safe-area-inset-top)) 16px 16px;background:rgba(251,250,248,.6);opacity:0;pointer-events:none;transition:opacity .35s}
.veil.on{opacity:1;pointer-events:auto}
.gcard{width:min(640px,100%);max-height:calc(100vh - 82px - env(safe-area-inset-top));overflow:auto;scroll-padding-bottom:72px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:10px}
.gcard:has(video.film){width:min(880px,100%)}
.filmbox{position:relative;margin-top:12px}
.film{display:block;width:100%;height:auto;border-radius:12px;background:var(--band);border:1px solid var(--line);cursor:pointer}
.filmsnd{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:6px;background:rgba(251,250,248,.94);border:1px solid var(--line);border-radius:999px;
  padding:6px 11px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}.filmsnd.off{border-color:var(--ink)}.filmsnd:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.filmbig{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%) scale(1.35)}.filmbig[hidden]{display:none}   /* the middle of the picture, above the caption band */
.filmbar{height:4px;background:var(--line);border-radius:2px;margin-top:8px;overflow:hidden}.filmbar i{display:block;height:100%;width:0;background:var(--ink)}
.gcard .in{border:1px solid var(--line);border-radius:18px;padding:22px 22px 16px}
.gcard h1{margin:0;font-size:clamp(21px,3.2vw,27px);line-height:1.25;font-weight:800;letter-spacing:-.02em}
.gcard h2{margin:0 0 4px;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.gcard p{margin:10px 0 0;font-size:16px;line-height:1.5;color:#44403C}
.gcard .meta{font-size:13px;color:var(--muted);margin:0 0 10px}
.gcard .storypic{display:block;width:595px;max-width:100%;height:auto;aspect-ratio:595/400;object-fit:cover;margin:0 auto 14px;border:1px solid var(--line);border-radius:14px}   /* the story painting (_cell-set-kit.js storyPic), whole, at one size in every game: 595 x 400, the kit lessons' (Emily 11-01), smaller with its aspect on a phone */
.gcard:has(.storypic){width:min(680px,100%)}   /* room for the 595 px painting inside the card's two paddings */
.gcard ol{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.gcard ol>li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45}   /* numbered steps only: a bare li/span hit the teach-back checklist inside the card (10-31) */
.gcard ol>li>span{flex:none;width:26px;height:26px;border-radius:50%;background:var(--band);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.gcard .foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.gcard .foot:last-child{position:sticky;bottom:-10px;z-index:1;margin:6px 0 -16px;padding:12px 0 16px;background:linear-gradient(rgba(255,255,255,0),#fff 12px)}   /* the same on the full-screen card */
/* the sticky foot covers the last ~66 px of a card's scroll box (the bar on the board card ~60): scroll-padding-bottom on .gcard and .card keeps
   a button that is scrolled or tabbed to above it (11-02: on a phone the Explain card's "Tell Aino" came to rest under the foot's arrow) */
.gcard .opts{margin-top:14px}
#err{position:fixed;inset:auto 16px 16px 16px;z-index:99;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:none;font-size:14px}
@media (max-width:640px){ .card{padding:14px;border-radius:18px;max-height:52vh} .card .say{font-size:16px} .card .ask{font-size:17px} .hud{left:12px;font-size:13px;padding:6px 10px;gap:8px;max-width:calc(100vw - 24px)} .hud .dots{gap:4px}
  .opt svg.pic{width:48px;height:34px} .case svg{width:72px;height:54px} .tile{min-width:52px;padding:8px 13px;font-size:17px} .slot{min-width:42px;font-size:18px} }

/* the classmate who makes the set's claim (D1) and the explanation in the learner's own words (D5): set 3 first (10-30). A round
   headshot, never a full body (Emily 10-22); a classmate not drawn yet shows a round initial. The card's question to the learner is
   the accent (feedback_rafi_claim_tag: accent marks the question, never the claim). */
.claim{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px}
.claim .head{flex:none;border-radius:50%;object-fit:cover;background:var(--band);border:1px solid var(--line)}
.claim .head.ini{display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;color:var(--ink);background:var(--band)}
.claim .who{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.claim .cl{position:relative;margin:4px 0 0;background:var(--band);border-radius:4px 14px 14px 14px;padding:9px 12px;font-size:16px;line-height:1.45;color:var(--ink)}
.gcard h2.ask-cl,.card .ask-cl{color:var(--mark-text)}
.tbnote{font-size:13px;color:var(--muted);margin:8px 0 4px}
#tbHost .tb{margin-top:6px}
/* the explanation widget's buttons (teach-back.js leaves them to the page): Tell is the main action, coral filled (§3.7); Teach it
   again and I already said that are the quieter second choice, ink outline. Its Review button opens a step of a lesson page; a set is
   one page with no step to return to, so it is not shown (never a dead button). */
#tbHost .tb .btnrow{display:flex;gap:10px;flex-wrap:wrap;flex-direction:row-reverse;justify-content:flex-start}
#tbHost .tb .btn{font:inherit;font-size:15px;font-weight:700;background:var(--action);color:var(--action-on);border:1.5px solid var(--action);border-radius:999px;padding:10px 18px;min-height:44px;cursor:pointer}
#tbHost .tb .btn:hover{background:var(--action-hover);border-color:var(--action-hover)}
#tbHost .tb .btn[disabled]{opacity:.45;cursor:default}
#tbHost .tb .ghost{font:inherit;font-size:15px;font-weight:600;background:#fff;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer}
#tbHost #tbReview{display:none}
#tbHost .tb textarea{width:100%;min-height:96px;font:inherit;font-size:16px;line-height:1.45;color:var(--ink);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;resize:vertical}
#tbHost .tb textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
#tbHost .tb-count{font-size:13px;color:var(--muted);margin:0}
#tbHost .tb-count.ok{color:var(--moss);font-weight:600}