/* ===================================================================
   teach.css v2 — Scribbler overlay + calculator dock + side board
   Z-order: content(1) < ink canvas(50) < calc(100) < board(160) < toolbars(200)
   Canvas is FIXED viewport-sized; ink lives in content coords and is
   drawn through the zoom/scroll view-transform (see teach.js).
   =================================================================== */

#teach-canvas{position:fixed;inset:0;z-index:50;pointer-events:none;touch-action:none;transition:opacity .22s ease}
#teach-canvas.hide{opacity:0}
#teach-canvas.on{pointer-events:auto;cursor:crosshair}

/* ---------- toolbar ---------- */
.tb{position:fixed;left:14px;bottom:86px;z-index:200;
  /* bottom-anchored: the tray grows UP from just above the ✏️ FAB (bottom:18px,
     56px tall) so the open/close button can never sit on top of the tray. */
  background:#fff;border:1px solid #e2e9f2;border-radius:18px;box-shadow:0 14px 44px rgba(20,40,80,.18);
  padding:7px;display:flex;flex-direction:column;gap:5px;width:94px;font-family:var(--font-body,Poppins,system-ui,sans-serif);
  transition:transform .28s cubic-bezier(.2,.9,.25,1),opacity .2s;max-height:calc(100vh - 104px);overflow:auto;scrollbar-width:none}
.tb::-webkit-scrollbar{display:none}
.tb.collapsed{transform:translateX(-130%);opacity:0;pointer-events:none}
.tb .grp{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.tb .div{height:1px;background:#eef2f8;margin:2px 4px;flex:none}
.tb button{width:36px;height:34px;border-radius:10px;border:1.5px solid transparent;background:#f5f8fc;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:16px;color:#2c3a60;transition:.13s;padding:0;flex:none}
.tb button:hover{background:#eef3fb}
.tb button.sel{background:#16294a;color:#fff;border-color:#16294a}
.tb button.lit{background:#fff7e8;border-color:#f0dcb4;color:#b06f00}
.tb .sw{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px #d8e1ee;cursor:pointer;transition:.12s;flex:none}
.tb .sw.white{box-shadow:0 0 0 1.5px #9fb0cd;background-image:linear-gradient(45deg,#eef2f8 25%,transparent 25%,transparent 75%,#eef2f8 75%),linear-gradient(45deg,#eef2f8 25%,#fff 25%,#fff 75%,#eef2f8 75%);background-size:8px 8px;background-position:0 0,4px 4px}
.tb .sw.sel{box-shadow:0 0 0 2.5px #16294a;transform:scale(1.08)}
.tb .swrow{display:grid;grid-template-columns:repeat(3,22px);gap:6px;justify-content:center;width:100%}
/* highlighter swatches read as translucent marker chips, not solid pen dots */
.tb .sw.hi{opacity:.72;border-radius:5px;box-shadow:0 0 0 1.5px #d8e1ee}
.tb .sw.hi.sel{box-shadow:0 0 0 2.5px #16294a;opacity:1}
.tb .dot{width:34px;height:26px;border-radius:8px;background:#f5f8fc;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.tb .dot.sel{background:#eaf0f9}
.tb .dot i{display:block;border-radius:50%;background:#2c3a60}

/* pencil FAB (bottom-left) */
.fab-pen{position:fixed;left:18px;bottom:18px;z-index:200;width:56px;height:56px;border-radius:50%;cursor:pointer;
  background:#fff;color:#16294a;font-size:23px;box-shadow:0 10px 26px rgba(20,40,80,.24);border:1.5px solid #e2e9f2;
  display:flex;align-items:center;justify-content:center;transition:transform .16s,background .16s,color .16s}
.fab-pen:hover{transform:scale(1.07)}
.fab-pen.active{background:linear-gradient(135deg,#F5A623,#e8941e);color:#fff;border-color:transparent}

/* mode / hint pill */
.mode-pill{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:200;
  background:#16294a;color:#fff;font-family:var(--font-body,Poppins,sans-serif);font-weight:700;font-size:12.5px;
  padding:7px 15px;border-radius:30px;box-shadow:0 8px 22px rgba(20,40,80,.22);opacity:0;transition:opacity .25s;pointer-events:none;
  max-width:80vw;text-align:center}
.mode-pill.show{opacity:1}

/* ---------- calculator dock ---------- */
.calc-fab{position:fixed;right:18px;bottom:18px;z-index:200;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#22386a,#16294a);color:#fff;font-size:24px;box-shadow:0 10px 26px rgba(20,40,80,.28);
  display:flex;align-items:center;justify-content:center;transition:transform .16s}
.calc-fab:hover{transform:scale(1.07)}
.calc-win{position:fixed;z-index:100;width:198px;height:321px;background:#eef1f6;border-radius:18px;overflow:hidden;
  box-shadow:0 26px 70px rgba(15,24,48,.34);border:1px solid #cdd6e4;display:flex;flex-direction:column;
  transform-origin:bottom right;transition:transform .3s cubic-bezier(.34,1.4,.4,1),opacity .22s;touch-action:none}
.calc-win.hidden{transform:scale(.45) translateY(46px);opacity:0;pointer-events:none}
.calc-bar{height:32px;flex:none;background:linear-gradient(180deg,#22386a,#1a2c54);color:#fff;display:flex;align-items:center;
  gap:8px;padding:0 12px;cursor:grab;font-family:var(--font-body,Poppins,sans-serif);font-weight:700;font-size:12.5px;user-select:none}
.calc-bar:active{cursor:grabbing}
.calc-bar .dots{display:flex;gap:5px}.calc-bar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);display:block}
.calc-bar .t{flex:1}
.calc-bar .x{cursor:pointer;font-size:16px;opacity:.85}.calc-bar .x:hover{opacity:1}
/* The calculator renders at 60% of natural size (Kerwin, 11 Jul 2026).
   We scale the iframe CONTENT rather than just shrinking the frame, so the
   calculator keeps its exact proportions and every key stays hittable.
   The iframe must live in a positioned wrapper — as a direct flex child its
   percentage height would be ignored (flex-basis wins on the main axis) and
   the scaled content would leave a dead band at the bottom. */
.calc-frame{flex:1;position:relative;overflow:hidden;background:#eef1f6}
.calc-win iframe{position:absolute;top:0;left:0;border:0;background:#eef1f6;
  width:calc(100% / var(--calc-zoom,.6));
  height:calc(100% / var(--calc-zoom,.6));
  transform:scale(var(--calc-zoom,.6));transform-origin:0 0}
.calc-grip{position:absolute;right:2px;bottom:2px;width:18px;height:18px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 50%,#9fb0cc 50%,#9fb0cc 62%,transparent 62%,transparent 74%,#9fb0cc 74%,#9fb0cc 86%,transparent 86%)}
.calc-shield{position:absolute;inset:0;display:none}
.calc-win.dragging .calc-shield{display:block}

/* ---------- side board ---------- */
.board{position:fixed;top:0;right:0;bottom:0;width:min(560px,42vw);z-index:160;background:#fff;
  border-left:1px solid #d8e1ee;box-shadow:-18px 0 50px rgba(20,40,80,.16);display:flex;flex-direction:column;
  transform:translateX(104%);transition:transform .3s cubic-bezier(.2,.9,.25,1)}
.board.open{transform:none}
.board-hd{flex:none;height:46px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid #e7edf5;
  font-family:var(--font-body,Poppins,sans-serif);font-weight:800;font-size:13.5px;color:#16294a;background:#fbfcff}
.board-hd .sp{flex:1}
.board-hd button{border:none;background:#f3f7fd;border-radius:9px;padding:6px 12px;font-family:inherit;font-weight:700;
  font-size:12px;color:#2c4478;cursor:pointer}
.board-hd button:hover{background:#eaf0f9}
.board-cv{flex:1;position:relative}
.board-cv canvas{position:absolute;inset:0;touch-action:none;cursor:crosshair}
.board-drag{position:absolute;left:-7px;top:0;bottom:0;width:14px;cursor:ew-resize;z-index:2}
.board-drag::after{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:4px;height:52px;border-radius:3px;background:#cdd8ea}
.board-drag:hover::after{background:#F5A623}
.board.grid .board-cv{background-image:linear-gradient(#eef3fb 1px,transparent 1px),linear-gradient(90deg,#eef3fb 1px,transparent 1px);background-size:24px 24px}

@media(prefers-reduced-motion:reduce){.tb,.calc-win,.calc-fab,.board{transition:none}}
@media(max-width:640px){
  .tb{left:8px;width:50px}.tb button{width:34px;height:34px;font-size:15px}
  /* On a phone the dock is already small in absolute terms — shrinking the
     calculator to 60% on top of that would make the keys unhittable, so the
     phone keeps it at full scale in a near-full-width dock. */
  .calc-win{width:92vw;height:70vh;--calc-zoom:1}
  .board{width:88vw}
}

/* ---------- keyboard shortcuts sheet ---------- */
.teach-help{position:fixed;inset:0;z-index:260;display:none;align-items:center;justify-content:center;background:rgba(15,27,45,.45);backdrop-filter:blur(2px)}
.th-card{background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,32,53,.3);width:min(420px,92vw);max-height:86vh;overflow:auto;font-family:var(--font-body,Poppins,system-ui,sans-serif)}
.th-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 10px;font-weight:800;font-size:16px;color:#16294a}
.th-x{border:0;background:#f5f8fc;border-radius:9px;width:30px;height:30px;cursor:pointer;font-size:14px;color:#2c3a60}
.th-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:6px 20px 8px}
.th-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;color:#2c3a60}
.th-row kbd{min-width:34px;text-align:center;background:#f5f8fc;border:1.5px solid #d8e1ee;border-bottom-width:3px;border-radius:7px;padding:3px 7px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;color:#16294a}
.th-ft{padding:8px 20px 16px;font-size:12px;color:#5b6b82}
@media (max-width:480px){.th-grid{grid-template-columns:1fr}}

/* ---------- item 8: writing-space spacer ---------- */
.ks-spacer{position:relative;margin:12px 0;border:1.5px dashed #cdd8ea;border-radius:12px;min-height:80px;
  background:repeating-linear-gradient(#fff,#fff 27px,#eef3fb 28px);box-shadow:inset 0 0 0 1px #fff}
.ks-spacer-tag{position:absolute;top:6px;left:11px;font:700 11px var(--font-body,Poppins,sans-serif);color:#a7b6cf;letter-spacing:.03em;pointer-events:none}
.ks-spacer-x{position:absolute;top:5px;right:6px;width:22px;height:22px;border:none;border-radius:7px;background:#eef3fb;
  color:#5b6b82;cursor:pointer;font-size:12px;line-height:1;z-index:2;display:flex;align-items:center;justify-content:center}
.ks-spacer-x:hover{background:#fde4e4;color:#c0392b}
.ks-spacer-grip{position:absolute;left:0;right:0;bottom:-5px;height:14px;cursor:ns-resize;z-index:2}
.ks-spacer-grip::after{content:"";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:44px;height:4px;border-radius:3px;background:#cdd8ea}
.ks-spacer-grip:hover::after{background:#F5A623}
/* the green insertion guide shown while the spacer tool is active */
.ks-spacer-guide{position:fixed;left:0;right:0;height:0;border-top:2.5px dashed #15a35b;z-index:70;pointer-events:none;opacity:0;transition:opacity .1s}
.ks-spacer-guide.show{opacity:1}
.ks-spacer-guide::before{content:"＋ writing space";position:absolute;left:16px;top:-9px;background:#15a35b;color:#fff;
  font:800 10px var(--font-body,Poppins,sans-serif);padding:1px 8px;border-radius:8px}

/* ---------- item 5: hummingbird on the sticky topics rail ---------- */
.rail-bird{position:absolute;right:12px;top:50%;transform:translateY(-50%);height:28px;width:auto;
  opacity:.95;cursor:pointer;user-select:none;transition:transform .15s ease,opacity .15s ease;
  /* soft white glow so scrolling topic chips slide cleanly underneath the logo */
  filter:drop-shadow(0 0 6px rgba(251,252,255,1)) drop-shadow(0 1px 2px rgba(20,40,80,.15))}
.rail-bird:hover{transform:translateY(-50%) scale(1.1);opacity:1}
.rail-bird:active{transform:translateY(-50%) scale(.94)}
@media (max-width:480px){.rail-bird{height:23px;right:8px}}

/* ---------- item 6: house confirm modal ---------- */
.teach-confirm{position:fixed;inset:0;z-index:280;display:flex;align-items:center;justify-content:center;
  background:rgba(15,27,45,.5);backdrop-filter:blur(2px);padding:18px}
.tc-card{background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,32,53,.32);width:min(400px,94vw);
  padding:22px;font-family:var(--font-body,Poppins,system-ui,sans-serif);animation:tcPop .16s ease-out}
@keyframes tcPop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.tc-t{font-weight:800;font-size:17px;color:#16294a;margin-bottom:6px}
.tc-b{font-size:13.5px;line-height:1.6;color:#3d4f68;margin-bottom:16px}
.tc-b b{color:#16294a}
.tc-acts{display:flex;gap:8px;justify-content:flex-end}
.tc-acts button{font-family:inherit;font-weight:800;font-size:13.5px;border-radius:11px;padding:9px 16px;cursor:pointer;border:1.5px solid #e2e9f2}
.tc-cancel{background:#fff;color:#16294a}
.tc-cancel:hover{background:#f5f8fc}
.tc-ok{background:#16294a;color:#fff;border-color:#16294a}
.tc-ok.danger{background:#e0483d;border-color:#e0483d}
.tc-ok.danger:hover{background:#c5372e}

/* ---------- item 3: laser CONTACT glow — words the trail passes over light up ---------- */
/* base transition so a word eases in when hit and eases out when it fades */
main b, main strong{transition:text-shadow .2s ease, background-color .2s ease, color .2s ease}
main b.laser-hit, main strong.laser-hit{
  color:#a35c00;background-color:rgba(245,166,35,.18);border-radius:4px;
  text-shadow:0 0 11px rgba(245,166,35,.95),0 0 3px rgba(245,166,35,.7)}
@media (prefers-reduced-motion:reduce){
  .tc-card{animation:none}
  main b, main strong{transition:none}
}