/* ======================================================================
   THE TYPE SCALE. This is the intention, and it is the only place a size
   is decided. Nothing below, and nothing in any other file, may write a
   font-size in pixels. Use a step. If a thing does not fit a step, the
   thing is wrong, not the scale.

     --t-hero   the one big name on a page. One per page, never two.
     --t-title  the heading of a card or a step.
     --t-item   THE THING A CHILD CLICKS. A lesson name in a list, the
                label on a choice. This is a menu for an eleven year old,
                so the clickable thing is BIG. It may never be smaller
                than --t-body: if the words you read are bigger than the
                words you press, the page is built backwards.
     --t-lead   the one line under a title that says what this is.
     --t-body   reading text.
     --t-meta   crumbs, captions, labels, the small print. Nothing a
                child has to read to get through the lesson.

   Every step is a clamp, so one rule works on a phone and on a 1600px
   screen without a second set of numbers.
   ====================================================================== */
:root{
  --t-hero:clamp(34px,4.2vw,52px);
  --t-title:clamp(24px,2.4vw,32px);
  --t-item:clamp(20px,1.8vw,26px);
  --t-lead:clamp(17px,1.5vw,21px);
  --t-body:clamp(17px,1.4vw,20px);
  --t-meta:clamp(12px,1vw,14px);
}


html.rk-focus,body.rk-focus{overflow:hidden !important;height:100%}
.rkb{
 /* ---- the wardrobe: every colour this design uses, in one place ----
    Structure never names a colour. A course changes its look by overriding
    these values and nothing else, so one stylesheet dresses many courses.
    See beats.THEMES and beats.style_for(). */
 --ink:#1a1a1a;--ink2:#666666;--mute:#8a8a8a;
 --paper:#ffffff;--page:#fafaf8;--line:#e6e3dc;--hair:#ececec;--hatch:#d8d4cc;--dash:#cfcac0;
 --or:#ff6b35;--or-d:#e85f2c;--or-l:#fdf1ef;
 --gr:#2e8b57;--gr-l:#eef7f1;--red:#c0392b;
 --blue:#1a8fd1;--shade:#000;--or-b:#f6c9b8;--or-x:#a8431f;--gr-b:#bfe0cd;--gr-x:#1f6b43;--grey:#bdbdbd;--grey-d:#a0a0a0;--grey-w:#b9b4a9;--tar:#4a4a4a;--tar-d:#3c3c3c;--warn:#c9a227;--or-e:#f6d9cf;--info-l:#eef3fb;--info:#2a5d9f;--caut-l:#fdf6e3;--caut:#8a6d1f;--bad-l:#fdeeec;
 font-family:var(--face,Lato),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--ink);}
.rkb *{box-sizing:border-box}
.rkb .beat{display:none;background:var(--paper);border:1px solid var(--line);border-radius:12px;
 box-shadow:0 2px 10px rgba(0,0,0,.05);padding:clamp(22px,3vw,38px);margin:0 0 20px;position:relative}
.rkb .beat.on{display:block}
.rkb .beat.past{display:block;background:var(--page);box-shadow:none}
.rkb .beat.past .bnum i{background:var(--hair)}
.rkb .bnum{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:900;
 letter-spacing:1.8px;text-transform:uppercase;margin:0 0 16px;color:var(--or)}
.rkb .bnum i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
 background:var(--or);color:var(--paper);font-size:14px;font-weight:900}
.rkb h2.bt{font-size:clamp(24px,2.8vw,34px);font-weight:900;line-height:1.15;margin:0 0 12px;color:var(--ink);text-wrap:balance}
.rkb p.bp{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--ink2);margin:0 0 14px;max-width:60ch}
.rkb p.bp b{color:var(--ink);font-weight:900}
/* placeholders */
.rkb .ph{position:relative;border:2px dashed var(--dash);border-radius:10px;padding:clamp(26px,4vw,50px) 24px;margin:0 0 16px;
 background:var(--page)}
.rkb .ph .kind{display:inline-block;font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase;
 background:var(--or);color:var(--paper);padding:5px 11px;border-radius:999px;margin:0 0 12px}
.rkb .ph.img .kind{background:var(--blue)}
.rkb .ph.game .kind{background:var(--gr)}
.rkb .ph h4{font-size:19px;font-weight:900;margin:0 0 6px;color:var(--ink)}
.rkb .ph p{font-size:15.5px;color:var(--ink2);margin:0;max-width:56ch;line-height:1.55}
.rkb .ph .len{display:block;margin-top:10px;font-size:12px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--mute)}
/* real artwork */
.rkb figure.art{margin:0 0 16px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--page)}
.rkb figure.art img,.rkb figure.art video{display:block;width:100%;height:auto;background:var(--shade)}
.rkb figure.art.plain{margin-bottom:18px}
.rkb figure.art figcaption{font-size:13px;font-weight:800;letter-spacing:.6px;
 color:var(--ink2);padding:11px 14px;background:var(--paper);border-top:1px solid var(--line);
 line-height:1.5}
.rkb figure.art figcaption:first-letter{text-transform:uppercase}
.rkb .tile.art .pic{padding:0;background:var(--page);overflow:hidden}
.rkb.player .tile.art .pic{aspect-ratio:4/3}
.rkb .tile.art .pic img{display:block;width:100%;height:100%;object-fit:cover}
.rkb .tile.art.right .pic{background:var(--gr-l)}
/* step map: shows the teaching before the questions */
.rkb .smap{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.rkb .smap b{flex:0 0 100%;font-size:10.5px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;color:var(--ink2);margin:0 0 3px}
.rkb .smap i{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.6px;padding:5px 10px;border-radius:999px;
 border:1px solid var(--line);background:var(--paper);color:var(--ink2);white-space:nowrap}
.rkb .smap i.teach{background:var(--or-l);border-color:var(--or-b);color:var(--or-x)}
.rkb .smap i.ask{background:var(--gr-l);border-color:var(--gr-b);color:var(--gr-x)}
.rkb .smap i.now{outline:2px solid var(--or);outline-offset:1px}
@media(max-width:620px){.rkb .smap i{font-size:10px;padding:4px 8px}.rkb .smap{gap:5px}}
/* narration captions */
.rkb .vo{margin:0 0 16px;padding:14px 16px 8px;background:var(--page);border:1px solid var(--line);border-radius:10px}
.rkb .vo .volbl{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:900;
 letter-spacing:1.8px;text-transform:uppercase;color:var(--or);margin:0 0 7px}
.rkb .vo p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink2);max-width:62ch}
.rkb .vo.on{border-color:var(--or)}

/* ---- one transport, same shape and same place, for every player on the site ---- */
.rkb .mplay{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:9px 10px;
 background:var(--paper);border:1px solid var(--line);border-radius:999px}
.rkb figure.art .mplay{margin:0;border-radius:0;border-left:0;border-right:0;border-top:0}
.rkb .mplay button{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;padding:0;
 border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font:inherit}
.rkb .mplay button:hover{border-color:var(--or);color:var(--or-d)}
.rkb .mplay button:focus-visible{outline:3px solid var(--or);outline-offset:2px}
.rkb .mplay button.pp{background:var(--or);border-color:var(--or);color:var(--paper);width:44px;height:44px}
.rkb .mplay button.pp:hover{background:var(--or-d);border-color:var(--or-d);color:var(--paper)}
.rkb .mplay button svg{width:17px;height:17px;display:block;fill:currentColor}
.rkb .mplay button.pp svg{width:19px;height:19px}
.rkb .mplay .scrub{flex:1 1 auto;min-width:40px;height:6px;margin:0;accent-color:var(--or);cursor:pointer}
.rkb .mplay .tm{flex:0 0 auto;font-size:12px;font-weight:900;letter-spacing:.4px;color:var(--ink2);
 font-variant-numeric:tabular-nums;min-width:76px;text-align:right}
.rkb .mplay .lbl{flex:0 0 auto;font-size:10.5px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;
 color:var(--ink2);padding-left:2px}
@media(max-width:620px){
 .rkb .vo{padding:12px 13px 8px}
 .rkb .vo p{font-size:14.5px}
 .rkb .mplay{gap:8px;padding:8px}
 .rkb .mplay .tm{min-width:0;font-size:11px}
 .rkb .mplay .lbl{display:none}
}
/* say it out loud */
.rkb .shout{background:var(--page);border-top:4px solid var(--or);border-radius:11px;padding:24px 28px;margin:0 0 16px}
.rkb .shout .lbl{font-size:12px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase;margin:0 0 8px;color:var(--or)}
.rkb .shout .line{font-size:clamp(22px,2.6vw,30px);font-weight:900;line-height:1.25;margin:0;color:var(--ink)}
/* answer tiles */
.rkb .tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 4px}
@media(min-width:760px){.rkb .tiles{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.rkb .tile{position:relative;cursor:pointer;font-family:inherit;padding:0;overflow:hidden;border-radius:10px;
 border:2px solid var(--line);background:var(--paper);text-align:left;transition:border-color .15s,box-shadow .15s}
.rkb .tile:hover{border-color:var(--or);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.rkb .tile .pic{position:relative;aspect-ratio:1/1;display:grid;place-items:center;padding:18px;
 border-bottom:1px solid var(--line);background:var(--page)}
.rkb .tile .pic .tag{position:absolute;top:8px;left:8px;font-size:9.5px;font-weight:900;letter-spacing:1.4px;
 text-transform:uppercase;background:var(--paper);color:var(--mute);border:1px solid var(--line);padding:3px 8px;border-radius:999px}
.rkb .tile .pic .brief{font-size:13.5px;line-height:1.45;text-align:center;margin:0;padding:22px 24px 0;font-weight:700;color:var(--mute)}
.rkb .tile .cap{display:block;padding:14px 16px;font-size:var(--t-body);font-weight:900;line-height:1.3;color:var(--ink)}
.rkb .tile.nocap .pic{border-bottom:none}
.rkb .tile .mark{position:absolute;inset:0;display:none;pointer-events:none}
.rkb .tile.right{border-color:var(--gr);background:var(--gr-l)}
.rkb .tile.right .pic{background:var(--gr-l)}
.rkb .tile.right:after{content:'✓';position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:50%;
 background:var(--gr);color:var(--paper);font-size:17px;font-weight:900;display:grid;place-items:center;z-index:2}
.rkb .tile.wrong{opacity:.55}
.rkb .tile.wrong:after{content:'✕';position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:50%;
 background:var(--red);color:var(--paper);font-size:21px;font-weight:900;display:grid;place-items:center;line-height:1}
.rkb .tile.dim{opacity:.35}
/* feedback: type under a thin orange rule */
.rkb .fbk{display:none;margin:18px 0 0;padding:14px 0 0;border-top:3px solid var(--or);
 font-size:18px;line-height:1.6;color:var(--ink2);max-width:60ch}
.rkb .fbk.on{display:block}
.rkb .fbk b{color:var(--ink);font-weight:900}
/* tap chips */
.rkb .taps{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.rkb .tap{cursor:pointer;font-family:inherit;font-size:var(--t-body);font-weight:700;padding:12px 18px;border-radius:999px;
 border:2px solid var(--line);background:var(--paper);color:var(--ink);transition:border-color .15s}
.rkb .tap:hover{border-color:var(--or)}
.rkb .tap.got{background:var(--gr);border-color:var(--gr);color:var(--paper)}
.rkb .tap.miss{border-color:var(--red);color:var(--red);text-decoration:line-through;opacity:.6}
/* do-it */
.rkb .doit{display:flex;gap:16px;align-items:center;background:var(--page);border-top:4px solid var(--or);border-radius:11px;
 padding:20px 24px;margin:0 0 14px;cursor:pointer}
.rkb .doit .box{flex:0 0 auto;width:30px;height:30px;border:2px solid var(--grey);border-radius:7px;background:var(--paper)}
.rkb .doit.done{background:var(--gr-l);border-top-color:var(--gr)}
.rkb .doit.done .box{background:var(--gr);border-color:var(--gr)}
.rkb .doit.done .box:after{content:'✓';color:var(--paper);font-size:19px;font-weight:900;display:block;line-height:26px;text-align:center}
.rkb .doit p{margin:0;font-size:var(--t-body);font-weight:700;line-height:1.45;color:var(--ink)}
/* controls */
.rkb .bnav{display:flex;gap:14px;align-items:center;margin:22px 0 0;flex-wrap:wrap}
/* Next and Back are the two most pressed things on the page. They take the
   press step like every other button. 15px was smaller than the words. */
.rkb .next{cursor:pointer;font-family:inherit;font-size:var(--t-item);font-weight:900;letter-spacing:.5px;
 padding:14px 30px;border:none;border-radius:999px;background:var(--or);color:var(--paper);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.rkb .next:hover{background:var(--or-d)}
.rkb .next[disabled]{background:var(--hair);color:var(--grey-d);box-shadow:none;cursor:default}
.rkb .hint{font-size:14px;font-weight:700;color:var(--ink2);margin:0}
/* progress */
.rkb .rkprog{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--line);
 padding:10px 0;margin:0 0 22px;display:flex;align-items:center;gap:14px}
.rkb .rkprog .t{font-size:12px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;color:var(--ink2)}
.rkb .rkprog .tr{flex:1 1 auto;display:flex;gap:4px}
.rkb .rkprog .seg{flex:1 1 0;height:8px;border-radius:999px;background:var(--hair)}
.rkb .rkprog .seg.on{background:var(--gr)}
.rkb .rkprog .seg.now{background:var(--or)}
/* focus toggle */
.rkb .rkprog .focusb{margin-left:auto;flex:0 0 auto;cursor:pointer;font-family:inherit;display:inline-flex;
 align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;
 background:var(--paper);color:var(--ink2);border:2px solid var(--line);border-radius:999px;padding:7px 14px;white-space:nowrap}
.rkb .rkprog .focusb:hover{border-color:var(--or);color:var(--ink)}
.rkb .rkprog .focusb i{display:block;width:13px;height:13px;border:2px solid currentColor;border-radius:3px;flex:0 0 auto}
.rkb.player .rkprog .focusb{background:var(--or);border-color:var(--or);color:var(--paper)}
.rkb.player .rkprog .focusb i{border-style:dashed}
@media(max-width:620px){
 .rkb .rkprog{flex-wrap:wrap}
 .rkb .rkprog .tr{order:3;flex:1 1 100%}
 .rkb .rkprog .focusb{font-size:11px;padding:6px 11px;letter-spacing:.8px}
}
/* listen */
.rkb .listen{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
 font-size:13px;font-weight:900;color:var(--or);background:var(--paper);border:2px solid var(--or);border-radius:999px;
 padding:8px 16px;margin:0 0 16px}
.rkb .listen:hover{background:var(--or-l)}
/* end card */
.rkb .endc{display:none;background:var(--page);border-top:4px solid var(--or);border-radius:11px;padding:clamp(26px,4vw,44px)}
.rkb .endc.on{display:block}
.rkb .endc h3{font-size:clamp(26px,3.2vw,38px);font-weight:900;margin:0 0 12px;color:var(--ink)}
.rkb .endc p{font-size:var(--t-body);line-height:1.55;margin:0 0 22px;max-width:50ch;color:var(--ink2)}
.rkb .endc a{display:inline-block;background:var(--or);color:var(--paper);font-weight:900;font-size:15px;
 padding:14px 30px;text-decoration:none;border-radius:999px;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.rkb .endc a:hover{background:var(--or-d)}
/* player mode: one card on a fixed stage that always fits the screen */
.rkb.player .beat.past{display:none}
/* The card is as tall as what is in it. It used to be pinned to a stage
   height with its own scrollbar, so a step with one more line than the stage
   allowed simply had that line cut off behind the buttons - the child never
   saw it and nothing reported it. The page scrolls; the card does not clip. */
.rkb.player .beat.on,.rkb.player .endc.on{display:flex;flex-direction:column;
 height:auto;min-height:var(--stage,min(72vh,720px));overflow:visible;
 animation:rkin .28s ease-out}
.rkb.player .endc.on{justify-content:center;height:auto;min-height:min(52vh,460px);overflow:visible}
.rkb.player .beat.on .bnav{position:sticky;bottom:0;z-index:3;margin-top:auto;
 padding:18px 0 0;background:linear-gradient(to bottom,rgba(255,255,255,0) 0,var(--paper) 16px,var(--paper) 100%)}
/* The hint belongs with the question, but AFTER the line that says what to do,
   and it must not grow. flex:1 1 100% let it absorb the leftover height of the
   column, so on a quiz step two hint paragraphs ate 160px above the question.
   The second one is the answer-feedback line, which is empty until the child
   presses Check: empty, it must take no room at all. */
/* flex-basis in a COLUMN is a height, so 100% here meant 'as tall as the whole
   column'. That is what made these stretch. auto means as tall as the words. */
.rkb.player .beat.on p.ask{order:-2;flex:0 0 auto}
.rkb.player .beat.on .hint{order:-1;flex:0 0 auto;margin:0 0 10px}
.rkb .hint:empty{display:none!important}
.rkb.player .beat.on .listen{align-self:flex-start}
/* the card is a flex column, and overflow:hidden lets a child shrink to nothing.
   the in-page media must keep its own height. */
.rkb.player .beat.on .tcard,.rkb.player .beat.on .mg{flex:0 0 auto}
@keyframes rkin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rkb.player h1{font-size:clamp(22px,2.2vw,28px) !important;margin:0 0 4px !important}
.rkb.player .lede{font-size:15px;line-height:1.45;margin:0 0 14px;padding:0 0 12px;border-bottom-width:2px}
/* FOCUS MODE = a real full-screen player. Fixed to the viewport, nothing scrolls behind it. */
.sosc.playerpage .crumbs{display:none}
.sosc.playerpage .layout{display:block}
.sosc.playerpage .side{display:none}
.sosc.playerpage .main{width:100%;max-width:none}
.rkb.player{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;width:100dvw;height:100vh;height:100dvh;
 z-index:2147483000;background:var(--page);margin:0;max-width:none;
 display:flex;flex-direction:column;align-items:center;
 padding:clamp(10px,1.6vh,20px) clamp(14px,3vw,40px) clamp(10px,1.6vh,20px);
 overflow:hidden}
.rkb.player > *{width:100%;max-width:1120px;flex:0 0 auto}
.rkb.player .beat.on{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch}
.rkb.player .endc.on{flex:1 1 auto;min-height:0;height:auto;overflow-y:auto;justify-content:center}
.rkb.player .beat.past{display:none}
/* the crumb inside the player, since the page one is hidden */
.rkb .pcrumb{display:none}
.rkb.player .pcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;
 font-size:12px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase}
.rkb.player .pcrumb a{color:var(--or);text-decoration:none}
.rkb.player .pcrumb a:hover{text-decoration:underline}
.rkb.player .pcrumb span{color:var(--grey-w)}
.rkb.player .smap{display:none}
.rkb.player .juribar{display:none}
.rkb.player .rkprog{position:static;margin:0 0 12px}
.rkb.player figure.art img,.rkb.player figure.art video{max-height:42vh;object-fit:contain;margin:0 auto}
/* mobile: the stage is the screen. nothing above it, list below it. */
@media(max-width:900px){
 .sosc.playerpage .crumbs{display:none}
 .sosc.playerpage .side{margin:26px 0 0}
 .rkb.player h1{font-size:16px !important;line-height:1.25;margin:0 0 7px !important;
  padding:0 0 7px;border-bottom:2px solid var(--or)}
 .rkb.player .lede{display:none}
 .rkb.player .tierbar{display:none}
 .rkb.player .pcrumb{display:none}
 .rkb.player .smap{display:none}
 .rkb.player .pcrumb{font-size:10.5px;letter-spacing:1px;margin:0 0 6px}
 .rkb.player .rkprog{margin:0 0 10px;padding:6px 0}
 .rkb.player .rkprog .t{font-size:10.5px;letter-spacing:1.2px}
 .rkb.player .rkprog .seg{height:7px}
 .rkb.player .beat{padding:20px 18px}
 .rkb.player .beat{padding-bottom:0}
 .rkb.player .beat.on .bnav{padding:14px 0 16px;margin-bottom:0}
 .rkb.player .next,.rkb.player .back{flex:1 1 auto;text-align:center;padding:15px 18px}
 .rkb.player .beat.on .hint{margin:0 0 8px;font-size:13px}
 .rkb.player .tile .pic{aspect-ratio:5/4;padding:12px}
 .rkb.player .tile .pic .brief{font-size:12.5px;line-height:1.35}
 .rkb.player .tile .cap{padding:11px 12px;font-size:15px}
 .rkb.player .tiles{gap:10px}
 .rkb.player .tap{font-size:15px;padding:11px 15px}
 .rkb.player h2.bt{font-size:var(--t-title)}
 .rkb.player p.bp{font-size:var(--t-body)}
 .rkb.player .ph{padding:26px 18px}
 .rkb.player .shout .line{font-size:var(--t-body)}
}
.rkb .back{cursor:pointer;font-family:inherit;font-size:var(--t-item);font-weight:900;padding:14px 22px;border:2px solid var(--line);
 border-radius:999px;background:var(--paper);color:var(--ink2)}
.rkb .back:hover{border-color:var(--or);color:var(--ink)}

/* ---- typography card: the law, the classes, the checklist ---- */
.rkb .tcard{margin:0 0 18px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper)}
.rkb .tcard .trow{display:grid;grid-template-columns:minmax(84px,auto) 1fr;gap:0;border-top:1px solid var(--line)}
.rkb .tcard .trow:first-child{border-top:0}
.rkb .tcard .tk{background:var(--or-l);padding:16px 14px;display:flex;flex-direction:column;justify-content:center;
 border-right:1px solid var(--line)}
.rkb .tcard .tk b{display:block;font-size:clamp(19px,2vw,24px);font-weight:900;color:var(--or-d);line-height:1.1}
.rkb .tcard .tk span{display:block;margin-top:4px;font-size:11px;font-weight:900;letter-spacing:1.4px;
 text-transform:uppercase;color:var(--ink2)}
.rkb .tcard .tv{padding:16px 18px}
.rkb .tcard .tv b{display:block;font-size:16.5px;font-weight:900;color:var(--ink);margin:0 0 3px}
.rkb .tcard .tv p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.rkb .tcard .tfoot{padding:13px 16px;background:var(--page);border-top:1px solid var(--line);
 font-size:14.5px;line-height:1.55;color:var(--ink2)}
.rkb .tcard .tfoot b{color:var(--ink);font-weight:900}

/* ---- motion graphic: things a camera cannot photograph ---- */
.rkb .mg{margin:0 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.rkb .mg .mgtop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;
 border-bottom:1px solid var(--line);background:var(--page)}
.rkb .mg .mgttl{font-size:12px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink2)}
.rkb .mg .mgbtn{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;
 padding:7px 15px;font:inherit;font-size:13px;font-weight:900;cursor:pointer}
.rkb .mg .mgbtn:hover{border-color:var(--or);color:var(--or-d)}
.rkb .mg .mgbody{padding:18px 16px 16px}
.rkb .mg .lane{margin:0 0 20px}
.rkb .mg .lane:last-child{margin-bottom:0}
.rkb .mg .lnm{font-size:14px;font-weight:900;color:var(--ink);margin:0 0 8px}
.rkb .mg .lnm em{font-style:normal;color:var(--ink2);font-weight:700}
.rkb .mg .track{position:relative;height:34px;background:var(--page);border:1px solid var(--line);
 border-radius:8px;overflow:hidden}
.rkb .mg .bar{position:absolute;top:0;bottom:0;left:0;transform-origin:left center;transform:scaleX(0);
 transition:transform 1.5s cubic-bezier(.22,.75,.3,1)}
.rkb .mg .bar.think{background:repeating-linear-gradient(135deg,var(--hatch) 0 7px,var(--line) 7px 14px)}
.rkb .mg .bar.brake{background:var(--or)}
.rkb .mg .cross{position:absolute;top:0;bottom:0;width:4px;background:var(--red);opacity:.85}
.rkb .mg .cross::after{content:'';position:absolute;left:-3px;right:-3px;top:0;bottom:0;
 background:repeating-linear-gradient(0deg,var(--red) 0 5px,transparent 5px 10px)}
.rkb .mg.go .bar{transform:scaleX(1)}
.rkb .mg .keys{display:flex;flex-wrap:wrap;gap:16px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.rkb .mg .keys span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink2)}
.rkb .mg .keys i{width:16px;height:14px;border-radius:3px;display:block}
.rkb .mg .keys i.k1{background:repeating-linear-gradient(135deg,var(--hatch) 0 5px,var(--line) 5px 10px)}
.rkb .mg .keys i.k2{background:var(--or)}
.rkb .mg .keys i.k3{background:var(--red);width:4px}
.rkb .mg .mgnote{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--ink2)}
.rkb .mg .mgnote b{color:var(--ink);font-weight:900}

/* ---- the slider: drag it yourself ---- */
.rkb .sl .track{height:40px}
.rkb .sl .bar{transition:none;transform:none}
.rkb .sl input[type=range]{width:100%;margin:18px 0 6px;accent-color:var(--or)}
.rkb .sl .slrow{display:flex;justify-content:space-between;font-size:12px;font-weight:900;
 letter-spacing:1.2px;text-transform:uppercase;color:var(--ink2)}
.rkb .sl .slout{margin:14px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink2);min-height:3em}
.rkb .sl .slout b{color:var(--ink);font-weight:900}
.rkb .sl .slout.hit b{color:var(--red)}
@media(max-width:560px){
 .rkb .tcard .trow{grid-template-columns:1fr}
 .rkb .tcard .tk{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;align-items:baseline;gap:9px}
 .rkb .tcard .tk span{margin-top:0}
}

/* ---- the stopping diagram: a road, a rider, and the road she needs ---- */
.rkb .mg.dia .dlane{margin:0 0 26px}
.rkb .mg.dia .dlane:last-of-type{margin-bottom:6px}
.rkb .mg.dia .road{position:relative;height:96px;border-radius:8px 8px 0 0;
 background:linear-gradient(var(--tar),var(--tar-d));overflow:hidden}
.rkb .mg.dia .road::after{content:'';position:absolute;left:0;right:0;bottom:16px;height:3px;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 26px,transparent 26px 52px)}
.rkb .mg.dia .rider{position:absolute;left:1%;bottom:5px;height:84px;width:auto;z-index:2}
.rkb .mg.dia .stopmk{position:absolute;top:0;bottom:0;width:3px;background:var(--red);z-index:3;
 box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.rkb .mg.dia .meas{position:relative;height:30px;background:var(--page);
 border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;overflow:hidden}
.rkb .mg.dia .meas .bar{position:absolute;top:0;bottom:0;transform-origin:left center;transform:scaleX(0);
 transition:transform 1.4s cubic-bezier(.22,.75,.3,1)}
.rkb .mg.dia.go .meas .bar{transform:scaleX(1)}
.rkb .mg.dia .stoplab{position:absolute;top:50%;transform:translate(6px,-50%);font-size:11px;
 font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:var(--red);white-space:nowrap;
 opacity:0;transition:opacity .5s ease 2.1s;background:var(--paper);border:1px solid var(--line);
 padding:3px 8px;border-radius:999px;z-index:4}
.rkb .mg.dia.go .stoplab{opacity:1}
.rkb .mg.dia .stoplab.flip{transform:translate(calc(-100% - 8px),-50%)}
@media(max-width:620px){
 .rkb .mg.dia .road{height:74px}
 .rkb .mg.dia .rider{height:64px}
 .rkb .mg.dia .stoplab{font-size:9.5px;letter-spacing:.4px}
}

/* ---- jurisdiction slots: local law is data, and its confidence shows ---- */
.rkb .juri{display:inline;font-weight:800;color:var(--ink);border-bottom:1px dotted var(--line-d)}
.rkb .juri.unset{color:var(--or-d);border-bottom-style:solid}
.rkb .juri.hedge{border-bottom-color:var(--warn)}
.rkb .juri.none{border-bottom-color:var(--red)}
.rkb .juribar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;padding:12px 14px;
 background:var(--or-l);border:1px solid var(--or-e);border-radius:10px}
.rkb .juribar b{font-size:12px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--or-d)}
.rkb .juribar select{font:inherit;font-size:15px;font-weight:700;padding:8px 12px;border-radius:8px;
 border:1px solid var(--line);background:var(--paper);color:var(--ink);max-width:100%}
.rkb .juribar .note{flex:1 1 240px;font-size:13px;line-height:1.5;color:var(--ink2);min-width:0}
.rkb .jsrc{display:block;margin:10px 0 0;padding:11px 13px;background:var(--page);border:1px solid var(--line);
 border-left:3px solid var(--or);border-radius:0 8px 8px 0;font-size:14px;line-height:1.55;color:var(--ink2)}
.rkb .jsrc b{color:var(--ink);font-weight:900}
.rkb .jsrc .tag{display:inline-block;font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;
 padding:3px 8px;border-radius:999px;margin:0 8px 0 0;vertical-align:1px}
.rkb .jsrc .tag.primary{background:var(--gr-l);color:var(--gr)}
.rkb .jsrc .tag.agency{background:var(--info-l);color:var(--info)}
.rkb .jsrc .tag.aggregator{background:var(--caut-l);color:var(--caut)}
.rkb .jsrc .tag.not_found{background:var(--bad-l);color:var(--red)}
.rkb .jsrc a{color:var(--or-d)}

/* ---- utilities, so nothing has to hand-write a style attribute ----
   Spencer's rule, 3 Sep 2026: CSS belongs in ONE block at the top of the html
   field, never sprinkled through the markup as per-element style attributes -
   otherwise it cannot
   be maintained. The only style attributes left in this codebase are computed
   per-instance VALUES (a bar's width, a marker's position). Those are data, not
   styling, and they have nowhere else to live. */
.rkb .cta-lg,.sosc .cta-lg{display:inline-block;padding:16px 30px;font-size:15px}
.rkb .plainlink,.sosc .plainlink{color:inherit;text-decoration:none}
.rkb .centred,.sosc .centred{text-align:center}
.rkb .flush,.sosc .flush{margin:0}
.rkb .tight,.sosc .tight{margin:14px 0 0}
.rkb .fineprint,.sosc .fineprint{font-size:12px;color:var(--mute);font-weight:700}

/* ---- Badge Kids Surface: navigation order and weight -------------------
   Back sits on the left and stays the size of its label. Next sits on the
   right and takes the rest of the row, because forward is the action a kid
   is looking for. Same order on every beat, so the thumb learns one place. */
.rkb.player .bnav{display:flex;gap:14px;align-items:center;flex-wrap:nowrap}
.rkb.player .bnav .back{order:0;flex:0 0 auto;min-width:112px;text-align:center}
.rkb.player .bnav .next{order:1;flex:1 1 auto;margin-left:auto;text-align:center;
  font-size:var(--t-item);font-weight:800;letter-spacing:.01em;padding:17px 22px}
@media (max-width:640px){
  .rkb.player .bnav .back{min-width:96px}
  .rkb.player .bnav .next{font-size:var(--t-item);padding:18px 20px}
}

/* ---- Badge Kids Surface: a beat fills the page ------------------------
   One beat is one screen. The card grows to the room available instead of
   leaving a dead white field under three lines of text. Beats that carry a
   picture put it beside the words on a wide screen and above them on a
   phone. A beat whose picture has not been shot yet still shows the space
   it will occupy, labelled, so the shape of the finished lesson is visible
   before the footage exists. */
.rkb.player .beat.on{display:flex;flex-direction:column;
  min-height:clamp(420px,60vh,640px)}
.rkb.player .beat.on > .bnav{margin-top:auto}

.bkslot{margin:0 0 18px}
.bkslot .art{margin:0}
.bkslot img{display:block;width:100%;height:auto;border-radius:12px}
.bkslot figcaption{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--grey-d,#6b7280)}
.bkhole{position:relative;display:flex;flex-direction:column;justify-content:center;
  gap:10px;aspect-ratio:16/9;width:100%;padding:24px;border-radius:12px;
  border:2px dashed var(--hair,#d8dee9);background:var(--cream,#fff6eb);text-align:left}
.bkhole--still{aspect-ratio:4/3}
.bktag{position:absolute;top:14px;left:14px;display:inline-block;
  padding:5px 11px;border-radius:99px;background:var(--or,#f07c2e);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.bkbrief{margin:14px 0 0;max-width:46ch;font-size:15px;line-height:1.5;
  color:var(--ink,#1a2b5c)}
.bknote{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grey-d,#6b7280)}
.bktext > .bp:first-child{margin-top:0}

@media (min-width:900px){
  .rkb.player .beat.has-media.on{display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-areas:"num  num" "head head" "media text" "nav nav";
    column-gap:32px;row-gap:6px;align-content:start}
  .rkb.player .beat.has-media.on > .bnum{grid-area:num}
  .rkb.player .beat.has-media.on > .bt{grid-area:head}
  .rkb.player .beat.has-media.on > .bkslot{grid-area:media;margin:8px 0 0;
    position:sticky;top:16px}
  .rkb.player .beat.has-media.on > .bktext{grid-area:text;margin:8px 0 0}
  .rkb.player .beat.has-media.on > .bnav{grid-area:nav;margin-top:26px}
}

/* the forward button is the biggest thing on the row, not the whole row */
.rkb.player .bnav .next{max-width:none}
@media (min-width:700px){
  .rkb.player .bnav{justify-content:flex-start}
  .rkb.player .bnav .next{flex:0 1 380px;max-width:380px;margin-left:auto}
}

/* ---- the nav sits on the floor of the card, always ---------------------
   A short beat and a long beat put Back and Next in the same place, so the
   thumb does not hunt. The content area takes the slack, not the buttons. */
.rkb.player .beat.on{min-height:clamp(440px,64vh,680px)}
.rkb.player .beat.on > .bnav{margin-top:auto;padding-top:20px}
@media (min-width:900px){
  .rkb.player .beat.has-media.on{
    grid-template-rows:auto auto 1fr auto;
    min-height:clamp(460px,66vh,700px)}
  .rkb.player .beat.has-media.on > .bkslot,
  .rkb.player .beat.has-media.on > .bktext{align-self:start}
  .rkb.player .beat.has-media.on > .bnav{align-self:end;margin-top:0}
}

/* every beat carries a slot now, so the placeholder has to look deliberate */
.bkhole{align-items:flex-start}
.bkhole .bkbrief{margin:0;max-width:42ch}
.rkb.player .beat.has-media.on > .bktext .tiles,
.rkb.player .beat.has-media.on > .bktext .taps{margin-top:4px}

/* The card is as tall as it needs to be, with the nav resting on its floor.
   It does not stretch to the height of the player shell and leave a field of
   white between the last line and the buttons. */
.rkb.player .beat.on{min-height:520px;height:auto}
@media (min-width:900px){
  .rkb.player .beat.has-media.on{
    grid-template-rows:auto auto auto 1fr;
    min-height:520px}
  .rkb.player .beat.has-media.on > .bnav{align-self:end;padding-top:28px}
}

/* Focus mode stretches the player to the screen, which left a field of white
   between the last line and the buttons. The card sizes to its content and the
   nav sits directly under it, in the same place on every beat. */
html.rk-focus .rkb.player .beat.on,
.rkb.player .beat.on{height:auto!important;align-content:start}
@media (min-width:900px){
  html.rk-focus .rkb.player .beat.has-media.on,
  .rkb.player .beat.has-media.on{grid-template-rows:auto auto auto auto!important}
  .rkb.player .beat.has-media.on > .bnav{align-self:start;padding-top:26px}
}

/* ---- the navigation never moves ---------------------------------------
   It is a bar across the floor of the player, in the same place on every
   beat, on every lesson, at every screen size. Space above it is fine; a
   button that moves is not, because a kid then has to find it each time. */
.rkb.player .bnav{position:sticky;bottom:0;z-index:6;
  display:flex;gap:14px;align-items:center;
  margin:26px 0 0;padding:14px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 14px,#fff 100%);
  border-top:1px solid var(--hair,#e2e8f0)}
.rkb.player .bnav .back{order:0;flex:0 0 auto;min-width:112px}
.rkb.player .bnav .next{order:1;flex:0 1 380px;max-width:380px;margin-left:auto}
@media (max-width:699px){
  .rkb.player .bnav .back{min-width:96px}
  .rkb.player .bnav .next{flex:1 1 auto;max-width:none}
}

/* a picture question runs the full width of the card */
.bktext--wide{grid-column:1 / -1}
.tiles{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
@media (max-width:640px){
  .tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .tile .cap{padding:11px 12px;font-size:15px}
}

/* ---- full screen means full width ------------------------------------
   Plugin Manager's test: in full screen the idea fills the width. A locked
   column with fat white margins is the wrong thing. Outline mode keeps the
   lesson as the wide pane with the section list narrow beside it. */
html.rk-focus .bks,
html.rk-focus .sosc.playerpage{width:100%;max-width:none;margin:0}
html.rk-focus .rkb.player{max-width:none;padding-left:clamp(20px,4vw,64px);
  padding-right:clamp(20px,4vw,64px)}
@media (min-width:900px){
  html.rk-focus .rkb.player .beat.has-media.on{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(28px,4vw,64px)}
  html.rk-focus .rkb.player .beat.on > .bktext--wide{grid-column:1 / -1}
  html.rk-focus .tiles{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  html.rk-focus .rkb.player .bnav .next{flex:0 1 460px;max-width:460px}
}

/* a question holds the forward button until the child has answered */
.rkb.player .next[disabled]{opacity:.45;cursor:not-allowed}
.doit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 22px;margin:14px 0 0;border-radius:12px;border:2px solid var(--ink,#1a2b5c);
  background:#fff;color:var(--ink,#1a2b5c);font-weight:800;font-size:16px;cursor:pointer}
.doit:hover,.doit:focus{background:var(--ink,#1a2b5c);color:#fff}
.doit.done{background:var(--ink,#1a2b5c);color:#fff}
.doit.done::after{content:" ✓";margin-left:8px}
.fbk{display:none}
.fbk.on{display:block}