/* Hopkins on the coaching pages (18 Oct 2026; 19 Oct: the shared engine, his signature over him, and the message box for anyone not a
   registered school): Hopkins beside "How it works", the teaching-aid box that opens when he is clicked, and the message box. He is drawn
   by /skip-man-v2/skipman.js (the developer page's engine), the boxes by /assets/skipman-embed.js. */
.shk .sm-howrow{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto 1fr;grid-template-areas:"head fig" "copy fig";column-gap:40px;row-gap:16px;align-items:start;padding-top:34px;padding-bottom:30px}   /* rows auto 1fr (19 Oct): the heading's row stays the heading's height — before, the figure's height was shared between the two rows and the copy sat well below the heading when the copy was short */
.shk .sm-howrow h2{grid-area:head;margin:0;padding-top:6px}
.shk .sm-copy{grid-area:copy;display:grid;gap:16px}
.shk .sm-embed{grid-area:fig;justify-self:end;width:300px;text-align:center;cursor:pointer;border-radius:18px;-webkit-tap-highlight-color:transparent}
.shk .sm-embed canvas{width:100%;aspect-ratio:3/4;display:block;border-radius:18px}   /* 19 Oct: taller (was 5/6) for his signature over the rope, so he stays the size he was */
.shk .sm-embed:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.shk .sm-embed .sm-hint{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-top:2px}
.shk .sm-embed:hover .sm-hint{color:var(--navy)}
@media (max-width:760px){.shk .sm-howrow{grid-template-columns:minmax(0,1fr) 180px;grid-template-areas:"head fig" "copy copy";column-gap:14px}.shk .sm-embed{width:180px}}
/* the sixteen other skills (data-hop-tier="more", 19 Oct): Hopkins for registered schools and the Skip Pass only; everyone else has the section as it was, one column */
html:not([data-view="school"]):not([data-view="pass"]) .shk.sm-howwrap[data-hop-tier="more"] .sm-embed{display:none}
html:not([data-view="school"]):not([data-view="pass"]) .shk.sm-howwrap[data-hop-tier="more"] .sm-howrow{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"head" "copy";max-width:700px;margin-inline:auto}

.sm-dialog{border:0;border-radius:22px;padding:0;width:min(960px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);background:#fff;color:#16213A;font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 20px 60px rgba(22,33,58,.3)}
.sm-dialog::backdrop{background:rgba(22,33,58,.55)}
.sm-dialog *{box-sizing:border-box}
.sm-box{padding:22px 22px 18px;position:relative}
.sm-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1.5px solid #DCE4F5;background:#fff;font:inherit;font-size:26px;line-height:1;cursor:pointer;color:#16213A;display:grid;place-items:center}
.sm-close:hover{background:#FFF8E8}
.sm-title{margin:0 46px 8px 0;font-size:clamp(22px,4vw,30px);font-weight:900;line-height:1.15;letter-spacing:-.01em}
.sm-teach{font-size:16px;line-height:1.5}
.sm-teach p{margin:0 0 8px}
.sm-teach .sm-say{font-weight:800;color:#2C5595}
.sm-teach ul{margin:0 0 6px;padding-left:20px}
.sm-teach li{margin:0 0 2px}
.sm-teach .sm-k{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5B6782;margin:8px 0 2px}
.sm-stages{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.sm-stage{position:relative;background:#FFF8E8;border-radius:16px;overflow:hidden}
.sm-stage canvas{width:100%;aspect-ratio:1/1;display:block}
.sm-who{position:absolute;top:8px;left:0;right:0;text-align:center;font-size:13px;font-weight:800;color:#5B6782;pointer-events:none}
.sm-cue{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-weight:800;font-size:clamp(15px,3vw,19px);letter-spacing:.02em;color:#5B6782;height:1.4em;pointer-events:none}
.sm-cue span{position:absolute;left:0;right:0;transition:opacity .18s;opacity:0}
.sm-cue .big{color:#8E6F00}
.sm-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px;margin:14px auto 0}
.sm-ctrl.sm-legs{margin-bottom:-4px}
.sm-ctrl button{font:inherit;font-size:15px;font-weight:800;border:1.5px solid #DCE4F5;background:transparent;color:#16213A;padding:8px 0;border-radius:999px;cursor:pointer}
.sm-ctrl button[aria-pressed="true"]{background:#FEC603;border-color:#FEC603;color:#16213A}
.sm-ctrl button:focus-visible,.sm-scrub input:focus-visible,.sm-close:focus-visible{outline:3px solid #FEC603;outline-offset:2px}
.sm-scrub{margin:12px auto 2px;max-width:520px;padding:0 2px}
.sm-scrub input{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:grab;margin:0;display:block}
.sm-scrub input:active{cursor:grabbing}
.sm-scrub input::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,#FEC603 var(--pct,0%),#DCE4F5 var(--pct,0%))}
.sm-scrub input::-moz-range-track{height:6px;border-radius:999px;background:#DCE4F5}
.sm-scrub input::-moz-range-progress{height:6px;border-radius:999px;background:#FEC603}
.sm-scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#FEC603;border:2.5px solid #16213A;margin-top:-8px}
.sm-scrub input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#FEC603;border:2.5px solid #16213A}
@media (max-width:640px){.sm-stages{grid-template-columns:1fr}.sm-stage canvas{aspect-ratio:5/4}.sm-box{padding:16px 14px 14px}}
/* HOPKINS'S CRIB (19 Oct, 19:10; built out 20:40 — "go to town on it"): the teaching aid as a full-screen zone — the box used to be capped at the window's height with its contents 850 px tall, so on a laptop Hopkins was cut off at the knees and the controls were below the fold with nothing to say the box scrolled. Now: the whole screen, the views sized to it (he is always whole), the words beside him (under him on a phone, one view at a time), the buttons along the bottom, a big Back to the page button; the award colour on the walls of his hall. */
.sm-dialog.sm-crib{position:fixed;top:0;left:0;right:0;bottom:0;inset:0;width:100%;height:100vh;height:100dvh;max-width:100%;max-height:none;margin:0;border:0;border-radius:0;padding:0;overflow:hidden;background:#fff;box-sizing:border-box;-webkit-text-size-adjust:100%;text-size-adjust:100%}   /* (22:25, an iPhone: width 100% not 100vw, the position spelt out, the text not inflated — Safari's own dialog rules otherwise) */
.crib{max-width:100%;overflow:hidden}
.crib{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100%;--lc:#2C5595}
.crib *{box-sizing:border-box}
.crib-top{display:flex;align-items:center;gap:14px;padding:10px 18px 6px}
.crib-head{flex:1;min-width:0}
.crib-k{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--lc)}
.crib .sm-title{margin:0;font-size:clamp(20px,2.6vw,30px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crib-close{font:inherit;font-weight:900;font-size:16px;background:#FEC603;color:#16213A;border:0;border-radius:999px;padding:10px 12px 10px 20px;cursor:pointer;display:flex;align-items:center;gap:10px;flex:none}
.crib-close b{font-size:26px;line-height:1;font-weight:900;width:30px;height:30px;display:grid;place-items:center;background:#16213A;color:#FEC603;border-radius:50%}
.crib-close:hover{background:#FFD23F}
.crib-close:focus-visible{outline:3px solid #16213A;outline-offset:2px}
.crib-main{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,30%,380px);gap:14px;padding:4px 18px 0;min-height:0}
.crib-stages{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:0}
.crib .sm-stage{min-height:0;background:#F3EAE2;touch-action:pan-y;cursor:grab}
.crib .sm-stage canvas{width:100%;height:100%;aspect-ratio:auto}
.crib .sm-cue{font-size:clamp(18px,2.6vw,30px);bottom:12px}
.crib .sm-cue span{text-shadow:0 0 6px #fff,0 0 12px #fff,0 1px 0 #fff}   /* the cue words lifted off the floor */
.crib-words{overflow:auto;min-height:0;padding:2px 6px 8px 0;font-size:15px;line-height:1.45}
.crib-words .sm-teach p{margin:0 0 8px}
.crib-ctrl{display:grid;gap:6px;padding:6px 14px 10px;justify-items:center}
.crib-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:8px;max-width:1200px}
.crib-ctrl .sm-scrub{margin:0;width:min(560px,100%);padding:0}
/* the buttons (20:40): pictures a child can read, the words under */
.hb{font:inherit;font-weight:800;font-size:11px;letter-spacing:.01em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:62px;padding:6px 8px 5px;border:2px solid #16213A;border-radius:16px;background:#fff;color:#16213A;cursor:pointer;line-height:1.1;-webkit-tap-highlight-color:transparent}
.hb svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hb .note{font-size:24px;line-height:26px}
.hb[aria-pressed="true"]{background:#FEC603;border-color:#FEC603}
.hb:hover{background:#FFF4D1}.hb[aria-pressed="true"]:hover{background:#FFD23F}
.hb:focus-visible{outline:3px solid #FEC603;outline-offset:2px}
.sm-crib button{touch-action:manipulation}   /* (20 Oct, the phone) two quick taps on a button are two presses, never a zoom */
.hb.go{background:#16213A;color:#FEC603;border-color:#16213A;font-size:13px;padding:6px 14px 5px}
.hb.go[aria-pressed="true"]{background:#D93A3A;border-color:#D93A3A;color:#fff}
.hb.go:hover{background:#2C5595}
.hb.star[aria-pressed="true"] svg{fill:#16213A}
.hb.view{display:none}
/* the beat (20:20): the jumps count, the cue words popping on each landing */
.crib-count{display:flex;align-items:baseline;gap:6px;margin-right:6px;color:#16213A}
.crib-count b{font-size:clamp(22px,3vw,34px);font-weight:900;line-height:1;min-width:1.2em;text-align:right;font-variant-numeric:tabular-nums}
.crib-count span{font-size:13px;font-weight:800;color:#5B6782;letter-spacing:.04em;text-transform:uppercase}
.crib .sm-cue .big.pop{animation:cuepop .28s ease-out}
@keyframes cuepop{0%{transform:scale(1)}30%{transform:scale(1.28)}100%{transform:scale(1)}}
/* his speech bubble, over the front view */
.crib-say{position:absolute;top:34px;left:14px;max-width:70%;background:#fff;color:#16213A;font-weight:900;font-size:clamp(16px,2.2vw,24px);padding:8px 14px;border-radius:18px 18px 18px 4px;box-shadow:0 4px 14px rgba(22,33,58,.18);pointer-events:none;z-index:2}
.crib-say.in{animation:sayin .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes sayin{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
/* Copy Hoppy, over the front view */
.crib-game{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:12%;gap:4px;pointer-events:none;z-index:1;text-align:center}
.crib-game .g-txt{font-size:clamp(18px,2.6vw,30px);font-weight:900;color:#16213A;background:rgba(255,255,255,.85);padding:6px 16px;border-radius:999px}
.crib-game .g-num{font-size:clamp(64px,14vw,150px);font-weight:900;color:#16213A;line-height:1;text-shadow:0 0 18px #fff,0 0 36px #fff}
.crib-game[hidden]{display:none}
.crib-game.turn .g-num{color:#D93A3A}
.crib-game .g-btns{display:none;gap:10px;pointer-events:auto;margin-top:8px}
.crib-game.again .g-btns{display:flex}
.crib-game .g-btns button{font:inherit;font-weight:900;font-size:17px;border:0;border-radius:999px;padding:10px 20px;cursor:pointer;background:#FEC603;color:#16213A}
.crib-game .g-btns .g-done{background:#fff;border:2px solid #16213A}
.confetti{position:absolute;left:50%;top:40%;width:10px;height:14px;border-radius:3px;pointer-events:none;z-index:3;animation:confetti 1.4s cubic-bezier(.2,.8,.6,1) forwards}
@keyframes confetti{0%{transform:translate(0,0) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 160px)) rotate(var(--r));opacity:0}}
/* the Teacher switch: music off, the games away, the words bigger */
.crib-teacher{font:inherit;font-weight:800;font-size:13px;border:2px solid #DCE4F5;background:#fff;color:#16213A;padding:8px 14px;border-radius:999px;cursor:pointer;margin-right:4px}
.crib-teacher[aria-pressed="true"]{background:#16213A;border-color:#16213A;color:#fff}
.crib-gpanel{display:none}
/* Copy Hoppy on a computer (19 Oct 22:40): the steps and the count on the left, Hoppy from the front on the right, the view from behind put away */
.crib.gaming .crib-main{grid-template-columns:clamp(300px,34%,440px) minmax(0,1fr)}
.crib.gaming .crib-words,.crib.gaming .sm-stage.back{display:none}
.crib.gaming .crib-stages{grid-template-columns:1fr;order:2}
.crib.gaming .sm-stage.front{display:block}
.crib.gaming .crib-gpanel{display:flex;flex-direction:column;gap:10px;order:1;overflow:auto;min-height:0;padding:14px 18px 12px;background:#fff;border-radius:18px;border:3px solid var(--lc,#2C5595);color:#16213A}
.crib-gpanel .crib-k{font-weight:900;font-size:22px;color:var(--lc,#2C5595)}
.crib-gpanel .gp-skill{margin:-6px 0 0;font-size:17px;font-weight:800;opacity:.75}
.crib-gpanel .gp-steps{margin:0;padding:0;list-style:none;counter-reset:gp;display:flex;flex-direction:column;gap:6px}
.crib-gpanel .gp-steps li{counter-increment:gp;position:relative;padding:8px 10px 8px 44px;border-radius:12px;font-size:15px;line-height:1.35;opacity:.5;transition:opacity .2s,background .2s}
.crib-gpanel .gp-steps li::before{content:counter(gp);position:absolute;left:10px;top:7px;width:24px;height:24px;border-radius:50%;background:#16213A;color:#fff;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center}
.crib-gpanel .gp-steps li.on{opacity:1;background:#FFF4C2;font-size:17px}
.crib-gpanel .gp-steps li.on::before{background:#D93A3A}
.crib-gpanel .gp-now{display:flex;justify-content:center;min-height:150px}
.crib-game.in-panel{position:relative;inset:auto;padding:4px 0;pointer-events:auto}
.crib-game.in-panel .g-txt{background:none;padding:0;font-size:24px}
.crib-game.in-panel .g-num{font-size:clamp(70px,9vw,120px);text-shadow:none}
.crib-gpanel .gp-teach{font-size:14px;line-height:1.4;border-top:2px dashed rgba(22,33,58,.2);padding-top:8px}
.crib-gpanel .gp-teach p{margin:0 0 6px}.crib-gpanel .gp-teach ul{margin:2px 0 8px;padding-left:18px}
.crib-gpanel .gp-tip{margin:auto 0 0;font-size:13px;opacity:.8}
.crib.teacher .hb.go,.crib.teacher .hb.star,.crib.teacher .crib-music,.crib.teacher .crib-say{display:none}
.crib.teacher .crib-words{font-size:17px}
/* the teaching points only with the Teacher switch on (Scott, 20 Oct 16:10: "when it's not pressed the teaching points are not visible. The teaching points only become visible when the teacher button is depressed"): without them Hopkins takes the room */
.crib:not(.teacher) .crib-words{display:none}
.crib:not(.teacher):not(.gaming) .crib-main{grid-template-columns:minmax(0,1fr)}
@media (prefers-reduced-motion:reduce){.crib .sm-cue .big.pop,.crib-say.in{animation:none}}
/* a narrower computer or a tablet on its side: the toggles' longer words ("Go double bounce") over two lines, so the buttons stay on one row (20 Oct) */
@media (min-width:901px) and (max-width:1240px){.hb span{max-width:74px;line-height:1.08}}
/* a phone upright, or any narrow window: one view at a time (Front / Behind), the words under him, the buttons along the bottom */
@media (max-width:900px){
  .crib-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;padding:0 12px}
  .crib-words{max-height:22vh;font-size:14px}
  .crib-stages{grid-template-columns:1fr}
  .crib .sm-stage.back{display:none}.crib.show-back .sm-stage.back{display:block}.crib.show-back .sm-stage.front{display:none}
  .hb.view{display:flex}
  .crib-ctrl{display:flex;flex-direction:column;align-items:center;gap:0;padding:4px 8px calc(14px + env(safe-area-inset-bottom))}.crib-ctrl .sm-scrub{order:-1;margin:2px 0 12px;width:100%}.crib-ctrl .sm-scrub input{height:34px}   /* THE SLIDER UNDER HIM (Scott, 20 Oct, on the phone mock-ups: "A: under Hopkins"): it moves him, so it sits just under him, the buttons below it with a clear gap (a tap a few pixels above the slider used to press the button over it) and room under them for the iPhone's swipe bar */
  .crib-row{gap:6px}.hb{min-width:54px;padding:5px 6px 4px;font-size:10px;border-radius:14px}.hb svg{width:22px;height:22px}.hb .note{font-size:20px;line-height:22px}.hb.go{font-size:12px;padding:5px 10px 4px}
  .crib-top{padding:8px 12px 4px}.crib-close .t{display:none}.crib-close{padding:6px}.crib-teacher{padding:6px 10px;font-size:12px}
  .crib-count span{display:none}
  .crib .sm-title{white-space:normal;font-size:17px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}   /* (20 Oct) the whole name on a phone, over two or three lines, rather than cut off: "Hopping on one …" */
  .crib-say{top:30px;left:10px;font-size:15px;padding:6px 12px}
}
/* a phone on its side, or a short window: both views side by side (since 20 Oct), the words beside him, everything compact */
@media (max-height:560px) and (min-width:601px){
  .crib-main{grid-template-columns:minmax(0,1fr) clamp(200px,32%,320px);grid-template-rows:minmax(0,1fr);padding:0 12px}
  .crib-words{max-height:none;font-size:13px}
  .crib-stages{grid-template-columns:1fr 1fr;gap:10px}
  .crib .sm-stage.back,.crib.show-back .sm-stage.front{display:block}   /* BOTH VIEWS SIDE BY SIDE (Scott, 20 Oct, on the mock-up of a phone on its side: "Both views"): one long low view showed him small; two side by side are nearer square, so he comes out bigger in both, and the swap button goes */
  .hb.view{display:none}.hb.spin{display:none}   /* (no room for Spin on a phone on its side: drag him round instead) */
  .crib-ctrl{gap:3px;padding:3px 8px 5px}.crib-row{gap:5px}.hb{min-width:48px;padding:3px 5px 2px;font-size:9px;border-radius:12px;gap:1px}.hb span{max-width:60px;line-height:1.05}   /* (20 Oct) the toggles' longer words ("Go double bounce") over two lines, so the buttons stay on one row */.hb svg{width:20px;height:20px}.hb .note{font-size:18px;line-height:20px}.hb.go{font-size:11px;padding:3px 9px 2px}
  .crib-ctrl .sm-scrub{margin:0 0 6px}.crib-ctrl .sm-scrub input{height:20px}
  .crib-top{padding:6px 12px 2px}.crib .sm-title{font-size:18px}.crib-k{font-size:10px}.crib-close{padding:4px 4px 4px 14px;font-size:14px}.crib-close b{width:26px;height:26px;font-size:22px}.crib-teacher{padding:4px 10px;font-size:12px}
  .crib-count b{font-size:20px}.crib-count span{display:none}
  .crib-say{top:28px;left:10px;font-size:14px;padding:5px 10px}
}
/* the message box (19 Oct; Scott: "when you're not signed in, when you click on him, nothing happens except a message comes up saying, 'Register your school to see Hopkins coaching the skill'") */
.sm-dialog.hop-ask{width:min(560px,calc(100vw - 32px))}
.hop-ask .hop-msg{font-size:18px;font-weight:800;line-height:1.45;margin:6px 40px 16px 0}
.hop-go{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hop-go .hop-btn{display:inline-block;background:#FEC603;color:#16213A;font-weight:900;text-decoration:none;padding:10px 18px;border-radius:999px}
.hop-go .hop-later{font:inherit;font-size:15px;font-weight:800;border:1.5px solid #DCE4F5;background:transparent;color:#16213A;padding:10px 18px;border-radius:999px;cursor:pointer}
.hop-go .hop-btn:focus-visible,.hop-go .hop-later:focus-visible{outline:3px solid #FEC603;outline-offset:2px}