:root{
    --red:#E8412F; --red-d:#B32718; --red-l:#FFF0EE;
    --sky:#2F86D6; --sky-d:#1B5E9E; --sky-l:#EAF4FC;
    --sun:#F5B324; --sun-d:#C4860B; --sun-l:#FFF6DF;
    --grass:#4FA85B; --grass-d:#2F7A3A; --grass-l:#EEF8EF;
    --orange:#F2762B; --orange-d:#C25214; --orange-l:#FFF2E9;
    --grape:#8564C4; --grape-d:#5F429B; --grape-l:#F3EFFB;
    --teal:#22A6A0; --teal-d:#137873; --teal-l:#E7F7F6;
    --berry:#E0507F; --berry-d:#B22D5A; --berry-l:#FDEEF3;
    --ground:#FFF7E4; --card:#fff;
    --ink:#25313D; --ink-2:#43535F; --ink-3:#6C7C88; --ink-4:#9AA7B1; --line:#E4DCC9;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--ground);color:var(--ink-2);overflow:hidden;
       font-family:Nunito,system-ui,sans-serif;line-height:1.3;font-size:clamp(12px,1.06vw,19px);
       display:flex;flex-direction:column;gap:.6vh;padding:.8vh .8vw}
  h1,h2,h3,h4{font-family:Fredoka,system-ui,sans-serif;margin:0;line-height:1;color:var(--ink);font-weight:600}
  .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:.62em;
       letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)}
  .card{background:var(--card);border:3.5px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);
        padding:.55em .7em;display:flex;flex-direction:column;min-height:0}
  .btn{font-family:Fredoka,sans-serif;font-weight:600;font-size:.98em;border:3px solid var(--ink);
       border-radius:10px;padding:.32em .5em;background:#fff;color:var(--ink);cursor:pointer;
       box-shadow:0 3.5px 0 var(--ink);width:100%;text-align:center}
  .btn:hover{transform:translateY(2px);box-shadow:0 1.5px 0 var(--ink)}
  .btn:active{transform:translateY(3.5px);box-shadow:0 0 0 var(--ink)}
  .btn.go{background:var(--grass);color:#fff}
  .btn.warn{background:var(--orange);color:#fff}

  .top{background:var(--sky);border:3.5px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);
       padding:.4em .8em;display:flex;gap:.6em;align-items:center;flex:none}
  .brand{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.45em;color:#fff;white-space:nowrap;cursor:pointer}
  .brand span{color:#FFE49B}
  .gtabs{display:flex;gap:.22em;margin-left:.7em}
  .gtab{font-family:Fredoka,sans-serif;font-weight:600;font-size:.98em;background:rgba(255,255,255,.2);
       color:#fff;border:2.5px solid rgba(255,255,255,.45);border-radius:999px;padding:.08em .7em;cursor:pointer}
  .gtab.on{background:#fff;color:var(--sky-d);border-color:#fff}
  .dayline{margin-left:auto;font-family:Fredoka,sans-serif;font-weight:500;font-size:1em;color:#DCEDFB}
  .ver{background:var(--ink);color:#FFE49B;border:2.5px solid #fff;border-radius:999px;padding:.12em .7em;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.72em;letter-spacing:.1em;margin-left:.5em}
  .who{background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:.12em .8em;
       font-family:Fredoka,sans-serif;font-weight:600;font-size:.95em;color:var(--ink);margin-left:.6em}

  .grid{flex:1;min-height:0;display:grid;grid-template-columns:13.5em 1fr 19.5em;gap:.6vh .6vw}
  .col{display:grid;gap:.6vh;min-height:0}
  .col.left{grid-template-rows:1fr}
  .col.right{grid-template-rows:auto 1fr auto}
  #view{min-height:0;display:grid;gap:.6vh;grid-template-rows:auto 1fr auto}

  /* roster */
  .rbtns{display:grid;grid-template-columns:repeat(3,1fr);gap:.22em;flex:none;margin:.3em 0 .25em}
  .rlegend{display:flex;gap:.5em;flex:none;margin-bottom:.35em;font-size:.7em;font-weight:800;color:var(--ink-3)}
  .rlegend span{display:flex;align-items:center;gap:.22em}
  .rlegend i{width:.6em;height:.6em;border-radius:50%;border:2px solid var(--ink);display:block}
  .rbtn{font-family:Fredoka,sans-serif;font-weight:600;font-size:.78em;border:2.5px solid var(--ink);
       border-radius:9px;background:#fff;color:var(--ink);padding:.3em 0;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
  .rbtn:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
  .roster{flex:1;min-height:0;overflow:auto;display:grid;gap:.28em;align-content:start;padding-right:.15em}
  .kid{display:flex;gap:.5em;align-items:center;border:2.5px solid var(--ink);border-radius:10px;
       padding:.3em .5em;background:#fff;flex:none}
  .kid .av{width:1.8em;height:1.8em;border-radius:50%;border:2px solid var(--ink);flex:none;
       display:grid;place-items:center;font-family:Fredoka,sans-serif;font-weight:600;font-size:.72em;color:#fff}
  .kid b{font-family:Fredoka,sans-serif;font-weight:500;font-size:1.05em;color:var(--ink);flex:1;
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kid .st{width:.62em;height:.62em;border-radius:50%;border:2px solid var(--ink);flex:none}
  .kid.now{background:var(--sun)}

  /* home view pieces */
  .verse{flex:none;border:3.5px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);
       background:linear-gradient(100deg,var(--sky) 0%,var(--grape) 100%);padding:.5em .9em;text-align:center;color:#fff}
  .verse .t{font-family:Fredoka,sans-serif;font-weight:500;font-size:1.28em;line-height:1.1}
  .verse .r{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.68em;letter-spacing:.12em;opacity:.85;margin-top:.2em}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6vw;flex:none}
  .stat{background:#fff;border:3.5px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);padding:.4em;text-align:center}
  .stat .v{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.85em;line-height:1;color:var(--ink)}
  .stat .k{font-family:Fredoka,sans-serif;font-weight:600;font-size:.92em;color:var(--ink-3);margin-top:.1em;line-height:1.05}
  .today{background:var(--sun-l);gap:.45em}
  .thead{display:flex;justify-content:space-between;align-items:center;flex:none}
  .chip{font-family:Fredoka,sans-serif;font-weight:600;font-size:.85em;background:var(--sun);
       border:2.5px solid var(--ink);border-radius:999px;padding:.1em .7em;color:var(--ink)}
  .tbody{display:flex;gap:.7em;flex:none;align-items:center}
  .thumb{width:8em;aspect-ratio:16/10;border:3px solid var(--ink);border-radius:10px;overflow:hidden;flex:none}
  .thumb svg{width:100%;height:100%;display:block}
  .tinfo h3{font-size:1.55em;font-weight:700}
  .tinfo .d{font-size:.95em;font-weight:700;color:var(--ink-2);margin-top:.15em}
  .tinfo .meta{font-size:.85em;font-weight:800;color:var(--sun-d);margin-top:.2em}
  .seclabel{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.6em;letter-spacing:.14em;
       text-transform:uppercase;color:var(--sun-d);flex:none}
  .beats{display:grid;grid-template-columns:repeat(6,1fr);gap:.35em;flex:none}
  .beat{background:#fff;border:3px solid var(--ink);border-radius:10px;padding:.3em .15em;text-align:center;cursor:pointer}
  .beat .t{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.56em;letter-spacing:.1em;color:var(--ink-4)}
  .beat .n{font-family:Fredoka,sans-serif;font-weight:600;font-size:.85em;color:var(--ink);line-height:1.02;margin:.08em 0}
  .beat .m{font-family:Fredoka,sans-serif;font-weight:700;font-size:1em;color:var(--sun-d);line-height:1}
  .beat.on{background:var(--grass-l);border-color:var(--grass-d)} .beat.on .m{color:var(--grass-d)}
  .midrow{flex:1;min-height:0;display:grid;grid-template-columns:1.15fr 1fr;gap:.5em}
  .panel{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:.5em .7em;
       display:flex;flex-direction:column;min-height:0;overflow:auto}
  .panel h4{font-size:1.12em;font-weight:600;flex:none}
  .chantbox{background:var(--sun);border:3px solid var(--ink);border-radius:12px;padding:.5em .7em;flex:none}
  .chantbox .lbl{font-family:Fredoka,sans-serif;font-weight:700;font-size:1em;color:var(--ink);display:block}
  .chantbox .c{font-weight:800;font-size:.9em;color:var(--ink);display:block;margin-top:.1em}
  .chantbox .a{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.28em;color:var(--ink);line-height:1.05;display:block;margin-top:.1em}
  ol.steps{margin:.3em 0 0;padding-left:1.1em;font-size:.95em;font-weight:700;color:var(--ink-2)}
  ol.steps li{margin-bottom:.2em;line-height:1.15}
  .actions{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:.4em;flex:none}

  .runorder{flex:1;min-height:0;display:grid;gap:.45em;align-content:stretch}
  .step{display:flex;gap:.8em;align-items:center;background:#fff;border:3.5px solid var(--ink);
       border-radius:14px;padding:.5em .8em;cursor:pointer;min-height:0}
  .step .n{width:2.1em;height:2.1em;border-radius:50%;background:var(--ink);color:#fff;flex:none;
       display:grid;place-items:center;font-family:Fredoka,sans-serif;font-weight:700;font-size:1.15em}
  .step .b{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.62em;letter-spacing:.14em;
       text-transform:uppercase;color:var(--ink-4);width:5.2em;flex:none}
  .step .w{flex:1;font-family:Fredoka,sans-serif;font-weight:500;font-size:1.22em;color:var(--ink);line-height:1.12;min-width:0}
  .step .w b{font-weight:600}
  .step .m{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.5em;color:var(--sun-d);flex:none;width:1.6em;text-align:right}
  .step.on{background:var(--sun);border-width:4.5px}
  .step.on .n{background:#fff;color:var(--ink)} .step.on .m{color:var(--ink)}
  .step.done{background:var(--grass-l);border-color:var(--grass-d)}
  .step.done .n{background:var(--grass-d)} .step.done .m{color:var(--grass-d)}

  /* today's schedule strip */

  /* ---- center split: stage + live agenda (v2.1) ---- */
  .todaywrap{display:grid;grid-template-columns:1fr;gap:.6em;flex:1;min-height:0}
  .tleft{display:flex;flex-direction:column;gap:.45em;min-height:0}
  .agenda{background:#fff;border:3.5px solid var(--ink);border-radius:12px;display:flex;
          flex-direction:column;min-height:0;overflow:hidden}
  .ahead{background:var(--sky);padding:.4em .6em;flex:none}
  .ahead .cls{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.2em;color:#fff;line-height:1}
  .ahead .mt{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.58em;letter-spacing:.11em;
             color:#DCEDFB;margin-top:.2em;display:block}
  .ahead .live{display:flex;justify-content:space-between;align-items:center;margin-top:.35em}
  .ahead .nowclock{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1.25em;color:#fff;line-height:1}
  .ahead .state{font-family:Fredoka,sans-serif;font-weight:600;font-size:.82em;background:#fff;
                color:var(--sky-d);border-radius:999px;padding:.08em .7em;white-space:nowrap}
  .ahead .state.live{background:var(--sun);color:var(--ink)}
  .qa4{display:grid;grid-template-columns:1fr 1fr;gap:.3em;margin-top:.35em}
  .alist{flex:1;min-height:0;overflow:auto;padding:.3em;display:grid;gap:.2em;align-content:start}
  .arow{display:grid;grid-template-columns:3.1em 1fr auto;gap:.35em;align-items:center;
        border:2.5px solid var(--line);border-radius:8px;padding:.2em .38em;background:#fff;cursor:pointer}
  .arow:hover{border-color:var(--ink-4)}
  .arow .at{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.72em;color:var(--ink-4)}
  .arow .an{font-family:Fredoka,sans-serif;font-weight:600;font-size:.98em;color:var(--ink);line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .arow .ad{font-family:Fredoka,sans-serif;font-weight:700;font-size:.8em;color:var(--ink-4)}
  .arow.bell{background:var(--sky-l);border-color:var(--sky)}
  .arow.done{background:var(--grass-l);border-color:var(--grass-d)}
  .arow.done .at,.arow.done .ad{color:var(--grass-d)}
  .arow.now{background:var(--sun);border-color:var(--ink);border-width:3.5px}
  .arow.now .at,.arow.now .ad,.arow.now .an{color:var(--ink)}
  .afoot{flex:none;padding:.36em;border-top:3px solid var(--line);display:grid;gap:.3em}
  .afoot .btn{font-size:.9em;padding:.28em .4em}

  /* ---- maximize ---- */
  body.max .col.left,body.max .col.right,body.max .verse,body.max .sched,body.max .navbar{display:none}
  body.max .grid{grid-template-columns:1fr}
  body.max #view{grid-template-rows:1fr}
  body.max .gtabs,body.max .dayline,body.max .who{display:none}
  .topsteps{display:none;gap:.22em;align-items:center;margin-left:.8em}
  body.max .topsteps{display:flex}
  .tstep{font-family:Fredoka,sans-serif;font-weight:600;font-size:.88em;background:rgba(255,255,255,.2);
         color:#fff;border:2.5px solid rgba(255,255,255,.45);border-radius:999px;padding:.08em .7em;
         white-space:nowrap;cursor:pointer}
  .tstep.done{background:rgba(255,255,255,.45)}
  .tstep.on{background:var(--sun);color:var(--ink);border-color:var(--ink)}
  .topclock{display:none;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1.15em;
            color:#fff;margin-left:auto;background:rgba(0,0,0,.2);border-radius:999px;padding:.1em .7em}
  body.max .topclock{display:inline-block}


  /* ---- inline lesson stage (v2.2) ---- */
  .stagebox{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;
            border:3.5px solid var(--ink);border-radius:12px;overflow:hidden}
  .stagebox .stagepic{flex:1;min-height:0;background:var(--sun-l);display:flex;align-items:center;
            justify-content:center;padding:1.2% 8%}
  .stagebox .stagepic svg{width:100%;height:100%}
  .stagebox .stagecap{background:#fff;border-top:5px solid var(--sun);padding:.7em 1em;text-align:center;flex:none}
  .stagebox .stagecap p{margin:0;font-family:Fredoka,sans-serif;font-weight:600;
            font-size:clamp(1.05rem,1.9vw,2rem);color:var(--ink);line-height:1.12}
  .playrow{display:flex;gap:.4em;align-items:center;flex:none}
  .playrow .btn{width:auto;padding:.32em .9em}
  .playrow .dots{display:flex;gap:.28em;margin:0 .3em}
  .playrow .dot{width:.7em;height:.7em;border-radius:50%;background:#fff;border:2.5px solid var(--ink-4)}
  .playrow .dot.on{background:var(--sun);border-color:var(--ink)}
  .playrow .sp{margin-left:auto;display:flex;gap:.4em}
  .stclock{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.5em;color:var(--ink);line-height:1;
           background:#fff;border:3px solid var(--ink);border-radius:10px;padding:.1em 0;margin:.25em 0}


  /* ---- lesson mode: stage fills everything (v2.3) ---- */
  body.lesson .col.left,body.lesson .col.right,body.lesson .verse,
  body.lesson .sched,body.lesson .navbar,body.lesson .agenda,body.lesson .thead,
  body.lesson .tbody{display:none}
  body.lesson .stagebox{border-width:0;border-radius:0}
  body.lesson .playrow{background:var(--ink);border-radius:10px;padding:.3em .45em;gap:.35em}
  body.lesson .playrow .btn{box-shadow:none;border-width:2.5px;font-size:.92em;padding:.24em .8em}
  body.lesson .screenname{display:flex}
  .screenname{display:none;flex:1;align-items:center;justify-content:center;background:#fff;
      border:2.5px solid var(--ink);border-radius:8px;padding:.2em .8em;min-width:0;
      font-family:Fredoka,sans-serif;font-weight:600;font-size:1em;color:var(--ink);
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.lesson .playrow .dots{display:none}
  body.lesson .playrow .sp{margin-left:0}
  body.lesson .grid{grid-template-columns:1fr}
  body.lesson #view{grid-template-rows:1fr}
  body.lesson .gtabs,body.lesson .dayline,body.lesson .who{display:none}
  body.lesson .todaywrap{grid-template-columns:1fr}
  body.lesson .today{background:var(--card);padding:.35em}
  body.lesson .stagebox .stagecap p{font-size:clamp(1.5rem,3vw,3rem)}
  body.lesson .topsteps{display:flex}
  body.lesson .topclock{display:inline-block}
  .tleft{position:relative}
  .floatclock{display:none;position:absolute;right:.7em;bottom:3.6em;z-index:8;
      font-family:Fredoka,sans-serif;font-weight:700;font-size:1.6em;color:var(--ink);
      background:var(--sun);border:3.5px solid var(--ink);border-radius:999px;
      box-shadow:0 4px 0 var(--ink);padding:.12em .8em}
  body.lesson .floatclock{display:block;bottom:auto;top:3%;right:3%}
  .floatclock small{display:block;font-size:.42em;letter-spacing:.12em;font-weight:700;
      text-transform:uppercase;color:var(--ink-2);line-height:1;margin-top:-.15em}
  /* agenda rows made legible */
  .arow{grid-template-columns:3.3em 1.7em 1fr auto}
  .arow .ab{width:1.55em;height:1.55em;border-radius:50%;background:var(--ink);color:#fff;
      font-family:Fredoka,sans-serif;font-weight:700;font-size:.9em;display:flex;
      align-items:center;justify-content:center;line-height:1}
  .arow.door .ab{background:var(--sky);border-radius:5px;font-size:.8em}
  .arow.door{background:var(--sky-l);border-color:var(--sky)}
  .arow.done .ab{background:var(--grass-d)}
  .arow.now .ab{background:#fff;color:var(--ink);border:2px solid var(--ink)}
  .arow.at{box-shadow:0 0 0 3px var(--grape)}


  /* ---- year lists & real screens (v2.4) ---- */
  .sbody{align-content:start}
  .tierlab{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.58em;letter-spacing:.13em;
      text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:.18em .7em;flex:none}
  .yl{display:grid;gap:.28em}
  .ylrow{display:grid;grid-template-columns:2.3em 1fr auto auto;gap:.55em;align-items:center;
      background:#fff;border:2.5px solid var(--line);border-radius:9px;padding:.28em .5em;cursor:pointer}
  .ylrow:hover{border-color:var(--ink-4)}
  .ylrow .yn{width:1.7em;height:1.7em;border-radius:50%;background:var(--ink-4);color:#fff;
      font-family:Fredoka,sans-serif;font-weight:700;font-size:.85em;display:flex;align-items:center;
      justify-content:center;line-height:1}
  .ylrow .yt{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.02em;color:var(--ink);line-height:1.06}
  .ylrow .ys{font-size:.8em;font-weight:800;color:var(--ink-3);line-height:1.05}
  .ylrow .ymark{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.58em;letter-spacing:.1em;
      text-transform:uppercase;border-radius:999px;padding:.2em .6em;white-space:nowrap}
  .m-done{background:var(--grass-l);color:var(--grass-d)}
  .m-todo{background:#F4F0E5;color:var(--ink-4)}
  .m-now{background:var(--sun);color:var(--ink)}
  .ylrow.done{background:var(--grass-l);border-color:var(--grass-d)}
  .ylrow.done .yn{background:var(--grass-d)}
  .ylrow.now{background:var(--sun-l);border-color:var(--ink);border-width:3.5px}
  .ylrow.now .yn{background:var(--sun-d)}
  .ylc{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.58em;letter-spacing:.12em;
      text-transform:uppercase;color:var(--ink-4);margin:.35em 0 .1em}
  /* menu grid */
  .mgrid{display:grid;grid-template-columns:9.5em 1fr 1fr;gap:.35em;align-items:stretch}
  .mgh{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.58em;letter-spacing:.12em;
      text-transform:uppercase;color:var(--ink-4);padding:.2em .3em}
  .mcon{display:flex;align-items:center;gap:.45em;background:var(--sun-l);border:2.5px solid var(--ink);
      border-radius:9px;padding:.3em .5em;font-family:Fredoka,sans-serif;font-weight:600;color:var(--ink)}
  .mcon svg{width:1.9em;height:1.9em;flex:none}
  .mcell{background:#fff;border:2.5px solid var(--line);border-radius:9px;padding:.32em .55em;cursor:pointer;
      display:flex;flex-direction:column;justify-content:center;min-height:2.7em}
  .mcell b{font-family:Fredoka,sans-serif;font-weight:600;font-size:.95em;color:var(--ink);line-height:1.05}
  .mcell span{font-size:.74em;font-weight:800;color:var(--ink-3)}
  .mcell.done{background:var(--grass-l);border-color:var(--grass-d)}
  .mcell.now{background:var(--sun);border-color:var(--ink);border-width:3.5px}
  .mcell:hover{border-color:var(--ink-4)}
  /* badge board */
  .bboard{display:grid;grid-template-columns:8.5em repeat(8,1fr);gap:.25em;align-items:center}
  .bhead{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.5em;letter-spacing:.06em;
      text-transform:uppercase;color:var(--ink-4);text-align:center;line-height:1.1}
  .bname{font-family:Fredoka,sans-serif;font-weight:600;font-size:.92em;color:var(--ink);white-space:nowrap;
      overflow:hidden;text-overflow:ellipsis}
  .bcell{aspect-ratio:1;border:2.5px solid var(--line);border-radius:50%;display:flex;align-items:center;
      justify-content:center;background:#fff}
  .bcell.on{border-color:var(--ink);background:var(--sun-l)}
  .bcell svg{width:78%;height:78%;opacity:.22}
  .bcell.on svg{opacity:1}
  /* editable settings */
  .field{display:grid;grid-template-columns:11em 1fr;gap:.4em;align-items:center;margin-bottom:.3em}
  .field label{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.58em;letter-spacing:.11em;
      text-transform:uppercase;color:var(--ink-4)}
  .field input,.field select{font-family:Nunito,sans-serif;font-weight:700;font-size:.95em;color:var(--ink);
      background:#fff;border:2.5px solid var(--ink);border-radius:8px;padding:.24em .5em;width:100%}
  .field input:focus,.field select:focus{outline:3px solid var(--sun);outline-offset:1px}
  .rubric{display:grid;grid-template-columns:9em 1fr 4.5em;gap:.3em .6em;align-items:baseline}
  .rubric .rk{font-family:Fredoka,sans-serif;font-weight:600;color:var(--ink)}
  .rubric .rv{font-size:.9em;font-weight:700;color:var(--ink-2)}
  .rubric .rp{font-family:Fredoka,sans-serif;font-weight:700;color:var(--sun-d);text-align:right}
  .toggle{display:inline-flex;border:2.5px solid var(--ink);border-radius:999px;overflow:hidden}
  .toggle button{font-family:Fredoka,sans-serif;font-weight:600;font-size:.82em;border:0;padding:.16em .7em;
      background:#fff;color:var(--ink-3);cursor:pointer}
  .toggle button.on{background:var(--grass);color:#fff}
  .toggle button.on.no{background:var(--orange)}
  .owlq{display:grid;gap:.3em}
  .owlq button{text-align:left;font-family:Nunito,sans-serif;font-weight:800;font-size:.95em;color:var(--ink-2);
      background:#fff;border:2.5px solid var(--line);border-radius:9px;padding:.3em .6em;cursor:pointer}
  .owlq button:hover{border-color:var(--grape)}
  .owlsay{background:var(--grape-l);border:3px solid var(--grape);border-radius:12px;padding:.6em .8em;
      font-family:Fredoka,sans-serif;font-weight:600;font-size:1.15em;color:var(--ink);line-height:1.15}


  /* ---- backdrop stage + name drop (v2.5) ---- */
  .stagebox .stagepic{background-size:contain;background-repeat:no-repeat;background-color:#FFF0C9;background-position:center;position:relative;padding:0;
      display:flex;align-items:center;justify-content:center}
  .stagepic .overlaypic{width:32%;max-width:14em;filter:drop-shadow(0 8px 0 rgba(37,49,61,.25))}
  body.lesson .stagebox{position:relative}
  body.lesson .stagebox.act .stagecap{display:none}
  .stagebox.act .stagecap{display:none}
  body.lesson .stagebox .stagecap{position:absolute;left:4%;right:4%;bottom:3.5%;border:4px solid var(--ink);
      border-radius:16px;box-shadow:0 6px 0 rgba(37,49,61,.3);padding:.7em 1.4em}
  .kbwrap{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:.5em;padding:1.2% 3%}
  .kbname{font-family:Fredoka,sans-serif;font-weight:700;font-size:clamp(1.5rem,4vw,3rem);
      color:var(--ink);letter-spacing:.06em;min-height:1.2em;display:flex;gap:.06em}
  .kbname i{font-style:normal;opacity:0;transform:translateY(-.6em);transition:opacity .2s,transform .2s}
  .kbname i.in{opacity:1;transform:none}
  .kb{width:100%;max-width:50em}
  .kb svg{width:100%;height:auto;display:block}
  .kb .kcap{fill:#fff;stroke:#25313D;stroke-width:5;transition:fill .2s}
  .kb .klet{font-family:Fredoka,sans-serif;font-weight:600;font-size:42px;fill:#25313D;
      text-anchor:middle;dominant-baseline:central}
  .kb g.home .kcap{fill:#FFF0EE}
  .kb g.lit .kcap{fill:#F5B324}
  .kbbtn{display:flex;gap:.5em}
  .kbbtn .btn{width:auto;padding:.32em 1.2em}
  @media (prefers-reduced-motion:reduce){.kbname i{transition:none}.kb .kcap{transition:none}}


  /* ---- live state (v2.6) ---- */
  .toast{position:fixed;left:50%;bottom:2.2em;transform:translateX(-50%) translateY(1.5em);
     background:var(--ink);color:#fff;font-family:Fredoka,sans-serif;font-weight:600;font-size:1.05em;
     border-radius:999px;padding:.5em 1.4em;box-shadow:0 5px 0 rgba(0,0,0,.25);z-index:90;
     opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
  .toast.on{opacity:1;transform:translateX(-50%)}
  .attkid{cursor:pointer;user-select:none}
  .attkid:hover{border-color:var(--ink-4)}
  .ylrow .mk{font-family:Fredoka,sans-serif;font-weight:600;font-size:.8em;border:2.5px solid var(--ink);
     border-radius:999px;padding:.1em .7em;background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
  .ylrow .mk.on{background:var(--grass);color:#fff}
  @media (prefers-reduced-motion:reduce){.toast{transition:none}}


  .speaker{display:block;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.42em;
      letter-spacing:.18em;text-transform:uppercase;color:var(--sun-d);margin-bottom:.25em}
  .welcome{background:rgba(255,255,255,.93);border:4px solid var(--ink);border-radius:18px;
      box-shadow:0 6px 0 rgba(37,49,61,.28);padding:.9em 1.8em;text-align:center;
      display:flex;flex-direction:column;gap:.12em;max-width:88%}
  .welcome .wk{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.62em;
      letter-spacing:.16em;text-transform:uppercase;color:var(--sun-d)}
  .welcome b{font-family:Fredoka,sans-serif;font-weight:700;font-size:2.4em;color:var(--ink);line-height:1.05}
  .welcome .wl{font-family:Fredoka,sans-serif;font-weight:600;font-size:.95em;color:var(--ink-3)}


  /* ---- Alphabet Soup (v3.4) ---- */
  .soup{position:relative;width:100%;height:100%;display:flex;flex-direction:column;
        align-items:center;justify-content:flex-start;gap:.3em;padding:.6% 2% 0}
  .soupTop{display:flex;align-items:center;gap:.8em;width:100%;max-width:54em;flex:none}
  .soupAsk{flex:1;font-family:Fredoka,sans-serif;font-weight:600;font-size:clamp(1rem,2vw,1.7rem);
        color:var(--ink);line-height:1.05}
  .soupAsk b{color:var(--red-d)}
  .soupBowl{display:flex;gap:.18em;align-items:center;background:#fff;border:3px solid var(--ink);
        border-radius:999px;padding:.18em .6em;min-height:2em}
  .soupBowl i{font-style:normal;font-family:Fredoka,sans-serif;font-weight:700;font-size:.95em;
        color:#fff;background:var(--grass-d);border-radius:50%;width:1.5em;height:1.5em;
        display:flex;align-items:center;justify-content:center;line-height:1}
  .soupBowl span{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.58em;
        letter-spacing:.1em;color:var(--ink-4);text-transform:uppercase;margin-right:.2em}
  .soupScene{position:relative;width:100%;max-width:54em;flex:1;min-height:0}
  .soupScene svg{width:100%;height:100%;display:block}
  .noodle{position:absolute;width:3.1em;height:3.1em;border-radius:50%;
        background:#F5B324;border:3.5px solid var(--ink);box-shadow:0 4px 0 rgba(37,49,61,.35);
        display:flex;align-items:center;justify-content:center;
        font-family:Fredoka,sans-serif;font-weight:700;font-size:1.45em;color:var(--ink);
        transition:transform .45s cubic-bezier(.4,1.5,.5,1),opacity .35s;animation:bob 2.6s ease-in-out infinite}
  .noodle.target{background:#FFE49B;border-width:5px;box-shadow:0 0 0 .5em rgba(245,179,36,.35),0 4px 0 rgba(37,49,61,.35)}
  .noodle.eaten{transform:translate(var(--fx),var(--fy)) scale(.25);opacity:0}
  .noodle.wobble{animation:wob .4s ease}
  @keyframes bob{0%,100%{margin-top:0}50%{margin-top:-.55em}}
  @keyframes wob{0%,100%{transform:none}25%{transform:rotate(-11deg)}75%{transform:rotate(11deg)}}
  .soupKb{width:100%;max-width:44em;flex:none}
  .soup .kb .kcap{fill:#fff;stroke:#25313D;stroke-width:5}
  .soup .kb g.home .kcap{fill:#FFF0EE}
  .soupKb svg{width:100%;height:auto;display:block}
  .soupOwl{position:absolute;right:1%;top:2%;width:22%;max-width:9em;display:none}
  .soupOwl.on{display:block}
  .soupOwl .bub{background:#fff;border:3px solid var(--grape);border-radius:12px;padding:.3em .5em;
        font-family:Fredoka,sans-serif;font-weight:600;font-size:.8em;color:var(--ink);line-height:1.1;
        margin-top:.2em}
  .soupDone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:5}
  .soupDone div{background:#fff;border:4px solid var(--ink);border-radius:18px;padding:1em 2em;
        box-shadow:0 6px 0 rgba(37,49,61,.3);text-align:center;
        font-family:Fredoka,sans-serif;font-weight:700;font-size:1.8em;color:var(--ink)}
  @media (prefers-reduced-motion:reduce){
    .noodle{animation:none;transition:opacity .2s}.noodle.wobble{animation:none}}


  .turnwho{display:block;font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.5em;
      letter-spacing:.16em;text-transform:uppercase;color:var(--red-d);margin-bottom:.15em}
  .soupCount{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.6em;letter-spacing:.11em;
      text-transform:uppercase;color:var(--ink-4);white-space:nowrap}


  /* ---- Name Drop as a guess-the-name puzzle (v3.9) ---- */
  .ndWrap{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:.5em;padding:1% 3%}
  .ndAsk{font-family:Fredoka,sans-serif;font-weight:600;font-size:clamp(1rem,2.1vw,1.8rem);
      color:var(--ink);text-align:center;line-height:1.1}
  .ndAsk b{color:var(--red-d)}
  .ndSlots{display:flex;gap:.4em;align-items:center;justify-content:center;flex-wrap:wrap}
  .slot{width:2.1em;height:2.6em;border:3.5px dashed var(--ink-4);border-radius:10px;background:#fff;
      display:flex;align-items:center;justify-content:center;
      font-family:Fredoka,sans-serif;font-weight:700;font-size:1.7em;color:var(--ink);
      transition:background .2s,border-color .2s,transform .2s}
  .slot.on{border-style:solid;border-color:var(--ink);background:var(--sun);transform:translateY(-.1em)}
  .slot.gap{border:0;background:none;width:1em}
  .ndDone{font-family:Fredoka,sans-serif;font-weight:700;font-size:clamp(1.2rem,2.6vw,2.2rem);
      color:var(--grass-d);text-align:center}
  .ndBtns{display:flex;gap:.5em}
  .ndBtns .btn{width:auto;padding:.3em 1.1em}
  .ndKb{width:100%;max-width:44em}
  .ndKb svg{width:100%;height:auto;display:block}


  /* ---- Name Drop v4.0: the letters are given, scrambled ---- */
  .ndTray{display:flex;gap:.5em;flex-wrap:wrap;justify-content:center;margin-top:.2em}
  .tile{width:2.4em;height:2.7em;border:3.5px solid var(--ink);border-radius:12px;background:#fff;
      box-shadow:0 4px 0 var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
      font-family:Fredoka,sans-serif;font-weight:700;font-size:1.7em;color:var(--ink);
      transition:transform .16s,opacity .2s,background .16s;user-select:none;touch-action:manipulation}
  .tile:hover{background:var(--sun-l)}
  .tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
  .tile.used{opacity:0;pointer-events:none;transform:scale(.4)}
  .tile.no{animation:wob .4s ease;background:var(--red-l)}
  .ndHint{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.62em;letter-spacing:.12em;
      text-transform:uppercase;color:var(--ink-4)}


  /* ---- button index (v4.1) ---- */
  .ixsec{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.6em;letter-spacing:.14em;
      text-transform:uppercase;color:#fff;background:var(--ink);border-radius:999px;padding:.22em .8em;
      display:inline-block;margin:.5em 0 .3em}
  .ixrow{display:grid;grid-template-columns:11em 1fr auto;gap:.6em;align-items:center;
      border:2.5px solid var(--line);border-radius:9px;padding:.3em .5em;background:#fff;margin-bottom:.25em}
  .ixrow.go{cursor:pointer}
  .ixrow.go:hover{border-color:var(--ink)}
  .ixrow b{font-family:Fredoka,sans-serif;font-weight:600;font-size:1em;color:var(--ink)}
  .ixrow span.d{font-size:.88em;font-weight:700;color:var(--ink-2);line-height:1.15}
  .ixrow .tag{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.55em;letter-spacing:.1em;
      text-transform:uppercase;border-radius:999px;padding:.2em .6em;white-space:nowrap}
  .t-open{background:var(--sky-l);color:var(--sky-d)}
  .t-does{background:var(--grass-l);color:var(--grass-d)}
  .t-none{background:#F4F0E5;color:var(--ink-4)}


  /* ---- child card + grade screens (v4.2) ---- */
  .kidcard{display:grid;grid-template-columns:auto 1fr;gap:.9em;align-items:center}
  .kidphoto{width:5.5em;height:5.5em;border-radius:14px;border:3.5px dashed var(--ink-4);
      background:var(--surface-2,#F6F1E6);display:flex;align-items:center;justify-content:center;
      font-family:Fredoka,sans-serif;font-weight:700;font-size:1.8em;color:var(--ink-4);text-align:center;line-height:1}
  .kidbadges{display:flex;gap:.3em;flex-wrap:wrap;margin-top:.4em}
  .kidbadges .bc{width:2.4em;height:2.4em;border-radius:50%;border:2.5px solid var(--line);
      background:#fff;display:flex;align-items:center;justify-content:center}
  .kidbadges .bc svg{width:76%;height:76%;opacity:.2}
  .kidbadges .bc.on{border-color:var(--ink);background:var(--sun-l)}
  .kidbadges .bc.on svg{opacity:1}
  .soon{background:var(--sun-l);border-color:var(--sun-d)}

  .sched{flex:none;gap:.4em}
  .sgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.4em}
  .per{border:3px solid var(--line);border-radius:11px;padding:.35em .5em;background:#fff;cursor:pointer}
  .per.done{background:var(--grass-l);border-color:var(--grass-d)}
  .per.now{border-color:var(--sun-d);background:var(--sun-l);border-width:4px}
  .per .tm{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.6em;letter-spacing:.1em;color:var(--ink-4)}
  .per .g{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.1em;color:var(--ink);line-height:1}
  .per .ls{font-size:.82em;font-weight:700;color:var(--ink-2);line-height:1.1;margin-top:.1em}
  .per .tag{font-family:Fredoka,sans-serif;font-weight:600;font-size:.72em;color:var(--grass-d)}

  /* right rail */
  .pick{background:var(--sun);text-align:center;gap:.3em;flex:none}
  .pick .mono{color:var(--sun-d)}
  .pick .lab{font-family:Fredoka,sans-serif;font-weight:500;font-size:.95em;color:var(--ink)}
  .pick .name{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.35em;color:var(--ink);line-height:1;
       background:#fff;border:3px solid var(--ink);border-radius:10px;padding:.18em .15em}
  .pick .turns{font-weight:800;font-size:.78em;color:var(--sun-d)}
  .timer{text-align:center;gap:.3em;flex:none}
  .clockface{font-family:Fredoka,sans-serif;font-weight:700;font-size:2em;color:var(--ink);
       background:var(--grape-l);border:3px solid var(--grape);border-radius:10px;padding:.05em;
       font-variant-numeric:tabular-nums;line-height:1.1}
  .presets{display:grid;grid-template-columns:repeat(4,1fr);gap:.25em}
  .presets .btn{padding:.18em 0;font-size:.88em}
  .presets .btn.play{background:var(--grass);color:#fff}
  .qgrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:.3em;align-content:start;overflow:auto}
  .qgrid .btn{font-size:.9em;padding:.34em .2em}

  /* bottom */
  .navbar{background:var(--sky-d);border:3.5px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);
       padding:.45em .55em;display:grid;grid-template-columns:repeat(8,1fr);gap:.4em;flex:none}
  .navbtn{background:#fff;border:3px solid var(--ink);border-radius:11px;padding:.3em .15em;display:flex;
       flex-direction:column;align-items:center;gap:.1em;box-shadow:0 3.5px 0 var(--ink);cursor:pointer;position:relative}
  .navbtn svg{width:2em;height:2em}
  .navbtn b{font-family:Fredoka,sans-serif;font-weight:600;font-size:.76em;color:var(--ink)}
  .navbtn .tick{position:absolute;top:-.4em;right:-.3em;width:1.15em;height:1.15em;border-radius:50%;
       background:var(--grass);border:2.5px solid var(--ink);color:#fff;display:grid;place-items:center;font-size:.7em;font-weight:900}
  .navbtn.locked{opacity:.38}
  .navbtn.next{border-color:var(--sun-d);border-width:3.5px;background:var(--sun-l);box-shadow:0 5.5px 0 var(--ink);transform:translateY(-3px)}

  /* generic sub-screen */
  .screen{min-height:0;display:flex;flex-direction:column;gap:.5em}
  .shead{display:flex;gap:.6em;align-items:center;flex:none}
  .shead h2{font-size:1.7em;font-weight:700}
  .shead .back{width:auto;padding:.3em .9em;flex:none}
  .shead .sub{font-weight:800;font-size:.95em;color:var(--ink-3);margin-left:auto}
  .sbody{flex:1;min-height:0;overflow:auto;display:grid;gap:.5em;align-content:start}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
  .three{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em}
  .box{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:.6em .8em}
  .box h4{font-size:1.15em;margin-bottom:.25em}
  .box p{margin:0;font-size:.95em;font-weight:700;color:var(--ink-2)}
  .box ul{margin:.3em 0 0;padding-left:1.1em;font-size:.95em;font-weight:700;color:var(--ink-2)}
  .box li{margin-bottom:.18em}
  table.t{width:100%;border-collapse:collapse;font-size:.95em}
  table.t th,table.t td{text-align:left;padding:.3em .5em;border-bottom:2px solid var(--line)}
  table.t th{font-family:"JetBrains Mono",monospace;font-size:.6em;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
  table.t td{font-weight:700;color:var(--ink-2)}
  table.t td:first-child{font-family:Fredoka,sans-serif;font-weight:600;color:var(--ink)}
  .grpcols{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em}
  .grp{background:#fff;border:3px solid var(--ink);border-radius:12px;padding:.5em}
  .grp .gh{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.05em;color:#fff;border-radius:8px;
       padding:.15em .5em;margin-bottom:.35em;text-align:center}
  .grp .m{font-weight:700;font-size:.92em;color:var(--ink-2);padding:.12em 0}
  .att{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
  .attkid{display:flex;gap:.5em;align-items:center;background:#fff;border:3px solid var(--ink);
       border-radius:10px;padding:.3em .5em}
  .attkid b{flex:1;font-family:Fredoka,sans-serif;font-weight:500;font-size:1em;color:var(--ink)}
  .attkid .p{font-family:Fredoka,sans-serif;font-weight:600;font-size:.8em;border:2.5px solid var(--ink);
       border-radius:999px;padding:.05em .5em;cursor:pointer}
  .attkid .p.y{background:var(--grass);color:#fff}
  .attkid .p.n{background:#fff;color:var(--ink-3)}

  /* lesson player overlay */
  .overlay{position:fixed;inset:0;background:var(--ink);z-index:50;display:none;
       flex-direction:column;padding:1vh 1vw;gap:.8vh}
  .overlay.on{display:flex}
  .stage{flex:1;min-height:0;background:#fff;border:5px solid #fff;border-radius:16px;
       display:flex;flex-direction:column;overflow:hidden}
  .stagepic{flex:1;min-height:0;background:var(--sun-l);display:flex;align-items:center;justify-content:center;padding:1.5% 12%}
  .stagepic svg{width:100%;height:100%}
  .stagecap{background:#fff;border-top:6px solid var(--sun);padding:2.2vh 3vw;text-align:center;flex:none}
  .stagecap p{margin:0;font-family:Fredoka,sans-serif;font-weight:600;font-size:clamp(1.4rem,3.4vw,3rem);color:var(--ink);line-height:1.12}
  .playbar{display:flex;gap:.5em;align-items:center;flex:none}
  .playbar .btn{width:auto;padding:.4em 1em}
  .playbar .steward{margin-left:auto;background:var(--sun);border:3px solid #fff;border-radius:999px;
       padding:.25em 1em;font-family:Fredoka,sans-serif;font-weight:700;font-size:1.1em;color:var(--ink)}
  .playbar .dots{display:flex;gap:.3em}
  .playbar .dot{width:.85em;height:.85em;border-radius:50%;background:#4a5763;border:2px solid #6C7C88}
  .playbar .dot.on{background:var(--sun);border-color:#fff}


  /* ================= CALM SKIN =================
     Same dashboard, same buttons. Three rules:
     1. only the thing you press keeps a heavy edge
     2. nothing appears twice
     3. anything you do not need while teaching is one tap away, not on screen
  */
  body{gap:.45vh;padding:.6vh .7vw}
  .card{border-width:2px;border-color:#E2D9C6;box-shadow:none;border-radius:12px}
  .top{border-width:2px;border-color:#1B5E9E;box-shadow:none;padding:.3em .7em;background:var(--sky-d)}
  #verTop{display:none}
  .gtab{border-width:2px}
  .who{border-width:2px;box-shadow:none}

  /* the verse stays, it just stops shouting */
  .verse{background:#FFF6DF;border-width:2px;border-color:#E2D9C6;box-shadow:none;padding:.35em .8em}
  .verse .t{color:var(--ink);font-size:1.05em;font-weight:500}
  .verse .r{color:var(--sun-d);opacity:1}

  /* the roster: a list, not eighteen boxes */
  .kid{border-width:0;border-bottom:1.5px solid #EFE7D6;border-radius:0;padding:.32em .4em;background:none}
  .kid:hover{background:var(--sun-l)}
  .kid.now{background:var(--sun);border-radius:8px}
  .kid .av{width:1.55em;height:1.55em;border-width:1.5px}
  .rbtn{box-shadow:none;border-width:2px}
  .rlegend{opacity:.75}

  /* one stage, one heavy edge on the one button you press */
  .btn{box-shadow:none;border-width:2px}
  .btn:hover{transform:none;box-shadow:none;background:var(--sun-l)}
  .btn:active{transform:translateY(2px);box-shadow:none}
  .btn.go{box-shadow:0 3px 0 var(--grass-d)}
  .btn.go:hover{background:var(--grass);transform:translateY(2px);box-shadow:0 1px 0 var(--grass-d)}
  .btn.warn{box-shadow:0 3px 0 var(--orange-d)}
  .stagebox{border-width:2px;border-color:#E2D9C6}
  .thumb{display:none}
  .tinfo .meta{color:var(--ink-4);font-weight:700}
  .chip{box-shadow:none;border-width:2px;background:var(--sun-l);color:var(--sun-d)}

  /* the schedule: now and next only, the rest is one tap */
  .agenda{border-width:2px;border-color:#E2D9C6}
  .ahead{background:var(--sky-d)}
  .arow{border-width:0;border-bottom:1.5px solid #EFE7D6;border-radius:0;background:none}
  .arow.now{background:var(--sun);border-radius:8px;border-bottom-color:transparent}
  .arow.done{background:none}
  .arow.done .an{opacity:1;color:var(--ink-2)}
  .arow.door{background:none}
  .arow .ab{background:#C9D6E0;color:var(--ink)}
  .arow.now .ab{background:#fff}
  .arow.done .ab{background:#CFE3D3;color:var(--grass-d)}
  .afoot{border-top-width:2px;border-top-color:#EFE7D6}

  /* today's other classes: back, because it shows the grade you are teaching */
  .sched{gap:.35em}
  .per{border-width:2px;border-color:#E2D9C6}
  .per.now{border-color:var(--sun-d);border-width:3px;background:var(--sun-l)}
  .per.done{background:#F4F7F2;border-color:#CFE3D3}
  .per .g{font-size:1.15em}

  /* the eight faces stay. the blue slab behind them does not */
  .navbar{background:transparent;border:0;box-shadow:none;padding:.15em 0}
  .navbtn{box-shadow:none;border-width:2px;border-color:#DCD2BF;background:#fff}
  .navbtn:hover{border-color:var(--ink);background:var(--sun-l)}
  .navbtn.next{border-color:var(--sun-d);box-shadow:none;transform:none;background:var(--sun-l)}
  .navbtn b{color:var(--ink-2)}

  /* the steward card is the only thing left with a color block */
  .pick{box-shadow:none}
  .stclock{box-shadow:none;border-width:2px}


  /* ---- roster opens and closes, schedule gets the room ---- */
  .grid{grid-template-columns:13.5em 1fr 22em}
  body.norost .col.left{display:none}
  body.norost .grid{grid-template-columns:1fr 25em}
  #rosterBtn{white-space:nowrap}

  /* the daily schedule, readable from across the room */
  .ahead{padding:.5em .7em}
  .ahead .cls{font-size:1.4em}
  .ahead .mt{font-size:.62em;margin-top:.25em}
  .ahead .nowclock{font-size:1.55em}
  .ahead .state{font-size:.9em;padding:.14em .8em}
  .alist{padding:.45em;gap:.3em}
  .arow{grid-template-columns:5.3em 1.7em 1fr auto;padding:.45em .5em;gap:.5em}
  .arow .at{font-size:.88em}
  .arow .ab{width:2em;height:2em;font-size:1.1em}
  .arow .an{font-size:1.22em}
  .arow .ad{font-size:1em}
  .afoot{padding:.45em;gap:.35em}
  .afoot .btn{font-size:1.02em;padding:.36em .5em}
  .pick .name{font-size:1.5em}
  .stclock{font-size:1.7em}
  .qgrid .btn{font-size:1em;padding:.4em .2em}


  /* ---- the roster closes from the roster, and reopens from the left edge ---- */
  .rhead{display:flex;align-items:center;gap:.4em;flex:none}
  .rhead .mono{flex:1;margin:0}
  .rtog{display:none;width:1.9em;height:1.9em;border:2px solid var(--ink);border-radius:8px;background:#fff;
        cursor:pointer;font-family:Fredoka,sans-serif;font-weight:700;font-size:.95em;color:var(--ink);
        display:flex;align-items:center;justify-content:center;line-height:1;padding:0}
  .rtog:hover{background:var(--sun-l)}
  .rtog{display:none!important}
  .rshow{display:none!important;width:2.2em;background:#fff;border:2px solid #E2D9C6;border-radius:12px;
         cursor:pointer;align-items:center;justify-content:center}
  .rshow:hover{border-color:var(--ink);background:var(--sun-l)}
  .rshow span{writing-mode:vertical-rl;transform:rotate(180deg);
        font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.62em;
        letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
  body.norost .grid{grid-template-columns:1fr 25em}


  /* ---- the schedule is the thing she reads across the room ---- */
  .agenda{min-height:0}
  .alist{align-content:stretch;grid-auto-rows:minmax(1.75em,1fr);gap:.22em;scroll-behavior:smooth}
  .arow{align-items:center;min-height:0;padding:.22em .5em}
  .arow .at{font-size:.88em;color:var(--ink-3);font-weight:700;white-space:nowrap}
  .arow .an{font-size:1.12em;color:var(--ink)}
  .arow .ad{font-size:1.05em;color:var(--ink-3)}
  .arow .ab{width:1.5em;height:1.5em;font-size:.92em;background:#DDE5EB;color:var(--ink-2)}
  .arow.done{background:#F4F7F2}
  .arow.done .at{color:var(--grass-d)}
  .arow.done .ab{background:#CFE3D3;color:var(--grass-d)}
  .arow.now{background:var(--sun)}
  .arow.now .at,.arow.now .an,.arow.now .ad{color:var(--ink)}
  .arow.door{background:#F2F6FA}
  .arow.door .an{color:var(--ink)}


  /* ---- schedule colors: blue circles, one meaning each ---- */
  .arow .ab{background:var(--sky);color:#fff;border:0}
  .arow .at{color:var(--ink-3)}
  .arow .ad{color:var(--ink-3)}
  .arow.done{background:#F4F7F2}
  .arow.done .ab{background:#A9C6DE;color:#fff}
  .arow.done .at{color:var(--ink-4)}
  .arow.done .an{color:var(--ink-2)}
  .arow.done .ad{color:var(--ink-4)}
  .arow.now{background:var(--sun)}
  .arow.now .ab{background:#fff;color:var(--sky-d);border:2px solid var(--ink)}
  .arow.now .at,.arow.now .an,.arow.now .ad{color:var(--ink)}
  .arow.door .ab{background:var(--sky-d)}
  .arow{cursor:pointer}
  .arow:hover{outline:2px solid var(--sky);outline-offset:-2px}


  /* ---- where am I: grade, unit, lesson, in plain large type ---- */
  .whereami{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.15em;color:var(--ink);
      background:#fff;border:2px solid var(--ink);border-radius:999px;padding:.18em .9em;
      line-height:1.1}
  .whereami b{color:var(--sun-d)}


  /* ---- make room so all nine steps fit without scrolling ---- */
  .afoot{grid-template-columns:1fr 1fr;gap:.3em}
  .afoot #agStart{grid-column:1 / -1}
  .afoot .btn{font-size:.95em;padding:.3em .4em}
  .pick .name{font-size:1.3em}
  .stclock{font-size:1.4em;margin:.18em 0}
  .pick{gap:.22em}
  .ahead .mt{font-size:.56em}


  /* ---- tick a step off, collapse the grades strip ---- */
  .schead{display:flex;align-items:center;gap:.4em}
  .schead .mono{flex:1}
  .ctog{width:1.8em;height:1.8em;border:2px solid var(--ink-4);border-radius:7px;background:#fff;
        cursor:pointer;font-size:.8em;color:var(--ink-2);line-height:1;padding:0}
  .ctog:hover{border-color:var(--ink);background:var(--sun-l)}
  .sched.shut .sgrid{display:none}
  .dbtn{font-family:Fredoka,sans-serif;font-weight:600;font-size:.85em;color:#fff;
        background:var(--grass-d);border:2px solid var(--ink);border-radius:999px;
        padding:.1em .7em;cursor:pointer;white-space:nowrap}
  .dbtn:hover{background:var(--grass)}
  .arow.done .ab{font-size:1em}


  /* ---- the character is alive while it is talking ---- */
  .stagebox .stagepic{position:relative}
  .bdrop{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;
         background-position:center;transform-origin:50% 62%}
  .bdrop.sway{animation:sway 2.6s ease-in-out infinite}
  @keyframes sway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}}
  @media (prefers-reduced-motion:reduce){.bdrop.sway{animation:none}}


  /* ---- activity screens: nothing floats over the controls ---- */
  body.lesson .floatclock{display:none}
  .soup{padding:1% 2% 0;gap:.5em}
  .soupTop{max-width:64em;gap:1em}
  .turnwho{font-size:.85em;letter-spacing:.1em;color:var(--red-d);margin-bottom:.25em}
  .soupAsk{font-size:clamp(1.1rem,2.3vw,2rem)}
  .soupScene{aspect-ratio:1000/470;max-height:100%;width:100%;max-width:64em;margin:0 auto;flex:0 1 auto}
  .soupKb{max-width:60em}
  .soupCount{font-size:.7em}


  /* ================= NARROW SCREENS =================
     phone, tablet, or a small window. the three columns cannot fit,
     so the page stacks and scrolls instead of clipping.
  */
  @media (max-width:900px){
    html,body{height:auto;overflow:visible}
    body{display:block;padding:8px;font-size:15px}
    .top{flex-wrap:wrap;row-gap:.35em;position:sticky;top:0;z-index:40}
    .gtabs{margin-left:0;flex-wrap:wrap}
    .dayline{margin-left:0;width:100%;font-size:.9em}
    .who{margin-left:0}
    .grid{display:flex;flex-direction:column;gap:8px}
    .col,.col.left,.col.right{display:block}
    body.norost .grid{display:flex}
    #view{display:block}
    .card{min-height:0;margin-bottom:8px}
    .verse{margin-bottom:8px}

    /* the lesson stage keeps a real size */
    .todaywrap,.tleft{display:block}
    .stagebox{height:52vh;margin-bottom:8px}
    .playrow{flex-wrap:wrap;row-gap:.3em}
    .playrow .btn{flex:1 1 8em}

    /* the roster scrolls inside its own box instead of running forever */
    .roster{max-height:40vh}
    .rbtns{grid-template-columns:repeat(3,1fr)}

    /* the schedule shows itself fully here */
    .agenda{height:auto}
    .alist{max-height:46vh}
    .arow .an{font-size:1.1em}

    /* eight faces in two rows, not eight squeezed columns */
    .navbar{grid-template-columns:repeat(4,1fr);row-gap:.4em}
    .navbtn svg{width:2.4em;height:2.4em}

    /* full-screen lesson mode still fills the screen */
    body.lesson .stagebox{height:auto;min-height:78vh}
    body.lesson .grid{gap:0}
  }
  @media (max-width:560px){
    .navbar{grid-template-columns:repeat(2,1fr)}
    .stagebox{height:44vh}
    .qgrid{grid-template-columns:1fr}
  }


  /* ---- activities: the screen IS the game (v2) ---- */
  .aw{width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
      font-size:clamp(15px,1.55vw,34px)}

  /* instruction strip across the top - never a card in the middle */
  .atop{background:var(--sun);border-bottom:.12em solid var(--ink);padding:.5em 1em;
      display:flex;align-items:center;justify-content:center;gap:.6em;text-align:center}
  .atop h3{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.45em;color:var(--ink);
      line-height:1.08;margin:0}
  .atop h3 b{color:var(--red-d)}
  .acount{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.55em;
      letter-spacing:.12em;text-transform:uppercase;color:var(--sun-d);white-space:nowrap}

  /* the play area fills everything left over */
  .aplay{position:relative;min-height:0;display:flex;align-items:center;justify-content:center}

  /* controls strip across the bottom */
  .abot{background:var(--ink);padding:.45em .8em;display:flex;align-items:center;gap:.5em;
      flex-wrap:wrap;justify-content:center}
  .abot .btn{width:auto;padding:.3em 1em;font-size:.95em;box-shadow:none;border-width:.09em}
  .asay{flex:1;min-width:8em;font-family:Fredoka,sans-serif;font-weight:600;font-size:1.02em;
      color:#fff;text-align:center;line-height:1.12}
  .asay b{color:#FFE49B}
  .asay.good{color:#9BE8B0}
  .asay.stop{color:#FFB3A8}

  /* 1 POWER - giant button, the whole field */
  .pwrwrap{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:3%}
  .pwr{border:none;background:none;cursor:pointer;padding:0;
      width:min(52vh,52vw);height:min(52vh,52vw)}
  .pwr svg{width:100%;height:100%;display:block;transition:transform .12s}
  .pwr:active svg{transform:scale(.95)}
  .wdots{display:flex;gap:2vh}
  .wdots i{width:min(6.5vh,6.5vw);height:min(6.5vh,6.5vw);border-radius:50%;background:#fff;
      border:.35vh solid var(--ink);display:block;box-shadow:0 .4vh 0 rgba(37,49,61,.25)}
  .wdots i.on{background:var(--sun)}
  .awake{font-family:Fredoka,sans-serif;font-weight:700;font-size:6vh;color:var(--grass-d)}

  /* 2 SCREEN - cards fill the top, two bins own the bottom half-widths */
  .gwrap{width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1.5%}
  .gcards{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
      gap:1.6%;padding:1.5% 2%}
  .gcard{background:#fff;border:.35vh solid var(--ink);border-radius:1.6vh;
      box-shadow:0 .55vh 0 var(--ink);cursor:pointer;
      font-family:Fredoka,sans-serif;font-weight:600;font-size:3.1vh;color:var(--ink);
      width:30%;min-height:15vh;display:flex;align-items:center;justify-content:center;
      text-align:center;line-height:1.14;padding:1vh 1.2vh;user-select:none;
      transition:transform .16s,opacity .2s,background .16s}
  .gcard.pick{background:var(--sun);transform:translateY(-.5vh) scale(1.03)}
  .gcard.gone{opacity:0;pointer-events:none;transform:scale(.5)}
  .gcard.no{animation:wob .4s ease;background:var(--red-l)}
  .gbins{display:grid;grid-template-columns:1fr 1fr;gap:1.5%;padding:0 2% 2%}
  .gbin{border:.6vh dashed var(--ink-4);border-radius:2vh;background:#fff;cursor:pointer;
      min-height:17vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .gbin b{font-family:Fredoka,sans-serif;font-weight:700;font-size:4.6vh;color:var(--ink)}
  .gbin span{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:1.5vh;
      letter-spacing:.1em;color:var(--ink-4);margin-top:.5vh}
  .gbin.lit{border-style:solid;border-color:var(--ink);background:var(--sun-l)}

  /* 3 TRACKPAD - the top is the screen, the bottom is a real-size trackpad */
  .swrap{width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0}
  .sscreen{position:relative;margin:2% 2% 1%;background:#BFE0F7;
      border:.45vh solid var(--ink);border-radius:2vh;overflow:hidden}
  .starget{position:absolute;top:50%;width:17vh;height:17vh;margin-top:-8.5vh;margin-left:-8.5vh;
      border-radius:50%;background:var(--sun);border:.45vh dashed var(--ink)}
  .sdot{position:absolute;top:50%;width:8vh;height:8vh;margin-top:-4vh;margin-left:-4vh;
      border-radius:50%;background:#fff;border:.45vh solid var(--ink);
      box-shadow:0 .5vh 0 rgba(37,49,61,.3)}
  .sdot.hit{background:var(--grass);border-color:var(--grass-d)}
  .spad{margin:0 2% 2%;height:24vh;background:#BFE7C5;border:.45vh solid var(--ink);
      border-radius:2.5vh;touch-action:none;cursor:grab;display:flex;align-items:center;
      justify-content:center;font-family:Fredoka,sans-serif;font-weight:600;
      font-size:2.6vh;color:#2F7A3A;user-select:none}
  .spad.live{background:#A6DCB0;cursor:grabbing}
  .spad{font-size:3.2vh}

  /* 4 ARROW - three targets spread across the whole field */
  .awrap{width:100%;height:100%;display:flex;align-items:center;justify-content:space-around;
      padding:2% 4%}
  .acell{flex:1;max-width:31%;display:grid;grid-template-rows:18vh minmax(0,1fr) auto;
      justify-items:center;align-items:center;border-radius:2vh;padding:1vh}
  .acell > svg{width:100%;max-width:32vh;height:32vh}
  .acell b{font-family:Fredoka,sans-serif;font-weight:700;font-size:4.2vh;color:var(--ink)}
  .acell.here{background:var(--sun-l);box-shadow:inset 0 0 0 .45vh var(--ink)}
  .aarrow{width:100%;display:flex;align-items:flex-end;justify-content:center;height:100%}
  .aarrow svg{width:15vh;height:16vh}

  /* 5 CHARGER - a battery big enough to read from the back of the room */
  .bwrap{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
      justify-content:center;gap:3vh}
  .bat{width:min(74vw,96vh);height:36vh;border:.9vh solid var(--ink);border-radius:2.5vh;
      background:#fff;position:relative;display:flex;align-items:center;padding:1.4vh}
  .bat:after{content:"";position:absolute;right:-3.4vh;top:7.5vh;width:3vh;height:11vh;
      background:var(--ink);border-radius:0 1vh 1vh 0}
  .batfill{height:100%;border-radius:1.4vh;transition:width .4s}
  .batpct{position:absolute;left:0;right:0;text-align:center;font-family:Fredoka,sans-serif;
      font-weight:700;font-size:11vh;color:var(--ink)}
  .bwhy{max-width:30ch;text-align:center;font-family:Fredoka,sans-serif;font-weight:600;
      font-size:3.4vh;color:var(--ink);background:#fff;border:.35vh solid var(--ink);
      border-radius:1.6vh;padding:1.4vh 2vh;line-height:1.16}

  /* 6 FOLDER - three folders across the whole field */
  .fwrap{width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);
      align-items:center;padding:2%}
  .fitem{justify-self:center;background:#fff;border:.5vh solid var(--ink);border-radius:2vh;
      box-shadow:0 .7vh 0 var(--ink);padding:2vh 4vh;
      font-family:Fredoka,sans-serif;font-weight:700;font-size:5.5vh;color:var(--ink)}
  .ffold{display:flex;align-items:center;justify-content:space-around;gap:2%}
  .fone{flex:1;max-width:30%;cursor:pointer;text-align:center;background:#fff;
      border:.4vh solid var(--ink);border-radius:2vh;padding:2vh 1vh;box-shadow:0 .55vh 0 var(--ink)}
  .fone svg{width:100%;max-width:30vh;height:26vh;display:block;margin:0 auto}
  .fone b{font-family:Fredoka,sans-serif;font-weight:700;font-size:4.6vh;color:var(--ink)}
  .fone.lit{background:var(--sun-l)}
  .fone.no{animation:wob .4s ease;background:var(--red-l)}

  /* 7 LOCK - four slots across the top, four tiles across the bottom */
  .owrap{width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
      align-items:center;padding:2%;gap:1.5%}
  .orow{display:flex;justify-content:center;gap:1.5%}
  .oslot{flex:1;max-width:23%;min-height:19vh;border:.4vh dashed var(--ink-4);border-radius:1.8vh;
      background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;
      padding:1vh;font-family:Fredoka,sans-serif;font-weight:600;font-size:2.7vh;
      color:var(--ink);line-height:1.14;font-size:3.2vh}
  .oslot.on{border-style:solid;border-color:var(--ink);background:var(--sun)}
  .oslot i{font-style:normal;font-family:Fredoka,sans-serif;font-weight:700;font-size:7vh;
      color:var(--ink-4)}
  .oarrowdown{text-align:center;font-size:4vh;color:var(--ink-4);line-height:1}
  .otile{flex:1;max-width:23%;min-height:19vh;border:.4vh solid var(--ink);border-radius:1.8vh;
      background:#fff;box-shadow:0 .55vh 0 var(--ink);cursor:pointer;display:flex;
      align-items:center;justify-content:center;text-align:center;padding:1vh;
      font-family:Fredoka,sans-serif;font-weight:600;font-size:3.2vh;color:var(--ink);
      line-height:1.14;user-select:none;transition:transform .16s,opacity .2s,background .16s}
  .otile:hover{background:var(--sun-l)}
  .otile.used{opacity:0;pointer-events:none;transform:scale(.4)}
  .otile.no{animation:wob .4s ease;background:var(--red-l)}
  @keyframes wob{0%,100%{transform:none}25%{transform:rotate(-11deg)}75%{transform:rotate(11deg)}}
  @media (prefers-reduced-motion:reduce){.gcard,.otile,.sdot{transition:none}}


  /* ---- whose turn it is, in the middle of the scene ---- */
  .soupName{position:absolute;top:2%;left:0;right:0;text-align:center;z-index:4;
      font-family:Fredoka,sans-serif;font-weight:700;font-size:6.5vh;color:var(--ink);
      line-height:1;pointer-events:none;text-shadow:0 .3vh 0 rgba(255,255,255,.9)}
  .turnwho{display:none}
  .promise{display:block;font-family:Fredoka,sans-serif;font-weight:600;line-height:1.25}
  .promise b{color:var(--red-d)}

  /* =====================================================================
     GodMadeMusic v190 additions. Everything above this line is the stylesheet of
     dashboard-calm_4.html (Digital Stewards), carried unchanged, at her instruction
     2026-09-25: "build it as exactly as digital stewards and use the content of
     god made music content". Only what the reference has no equivalent for is below.
     ===================================================================== */
  .stagebox .stagepic iframe.deckframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#10151c}
  .stagebox .stagepic.deck{background:#10151c}
  .navbtn .un{display:flex;align-items:center;justify-content:center;width:2.1em;height:2.1em;border:3px solid var(--ink);border-radius:10px;font-family:Fredoka,sans-serif;font-weight:700;font-size:1.05em;color:#fff;margin:0 auto .1em}
  .thumb .tn{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#FFF0C9;font-family:Fredoka,sans-serif;font-weight:700;color:var(--ink);line-height:1}
  .thumb .tn b{font-size:1.9em}
  .thumb .tn span{font-family:"JetBrains Mono",monospace;font-size:.5em;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:.2em}
  .rosteredit{width:100%;min-height:9em;font-family:Nunito,sans-serif;font-weight:700;font-size:.95em;color:var(--ink);border:2.5px solid var(--ink);border-radius:8px;padding:.4em .5em}
  .flink{color:var(--sky-d);font-weight:800;text-decoration:underline;word-break:break-word}
  .pingate{position:fixed;inset:0;z-index:50;background:var(--ground);display:flex;align-items:center;justify-content:center}
  .pingate[hidden]{display:none}
  .pingate .card{width:min(22em,90vw);gap:.5em;text-align:center}
  .pingate input{font-family:Fredoka,sans-serif;font-size:1.3em;text-align:center;border:3px solid var(--ink);border-radius:10px;padding:.3em}
  .attkid .p.m0{background:var(--red-l);color:var(--red-d)}
  .attkid .p.m1{background:var(--orange-l);color:var(--orange-d)}
  .attkid .p.m2{background:var(--grass-l);color:var(--grass-d)}
  .attkid .p.m3{background:var(--sky-l);color:var(--sky-d)}
  @media (max-width:900px){
    .sgrid{grid-template-columns:repeat(2,1fr)!important}
    .navbar{overflow-x:auto;grid-template-columns:repeat(var(--nu,11),minmax(6.5em,1fr))!important}
  }
  /* v192 - the unit menu she picked, 2026-09-25 (her screenshot of the Sound Island Grade 3 menu from
     dashboard v185, 05_App / Claude outputs GodMadeMusic_TeacherDashboard_v185.html). Card rules carried
     from that version's styles.css lines 407-428, values unchanged. */
  .gm-units .page-head{margin-bottom:1.125rem}
  .gm-units .page-head h1{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.75rem;color:#2D3748}
  .gm-units .page-head .sub{color:#4A5568;font-weight:700;margin-top:.25rem}
  .gm-units .menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.125rem}
  @media (max-width:900px){.gm-units .menu-grid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:600px){.gm-units .menu-grid{grid-template-columns:1fr}}
  .gm-units .unit-card{background:#fff;border-radius:.75rem;padding:1.25rem;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:all .2s;position:relative;border:1px solid #E2E8F0;cursor:pointer}
  .gm-units .unit-card:hover{transform:translateY(-.25rem);box-shadow:0 4px 16px rgba(0,0,0,.12)}
  .gm-units .unit-card .badge{position:absolute;top:.75rem;right:.75rem;background:#6BAB68;color:#fff;font-weight:900;font-size:.625rem;padding:.1875rem .5rem;border-radius:20px;font-family:Nunito,sans-serif}
  .gm-units .unit-card .ic-wrap{width:3.25rem;height:3.25rem;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:.75rem;color:#fff}
  .gm-units .unit-card .un{font-size:.75rem;font-weight:900;color:#718096}
  .gm-units .unit-card h3{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.125rem;margin:.125rem 0 .25rem;color:#2D3748}
  .gm-units .unit-card .concept{color:#E8845C;font-weight:800;font-size:.875rem;margin-bottom:.5rem}
  .gm-units .unit-card.now{border:2px solid #E8B923}
  /* v193 - the four buttons she named, 2026-09-25: "there is always launch lesson, plan, resources,
     all units" (her screenshot). Button rules carried from v185 styles.css .action-btn (lines 235-240). */
  .gm-four{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;flex:none}
  .gm-four .gm-b{display:flex;align-items:center;justify-content:center;gap:.5em;padding:.55em 1em;border-radius:.75rem;
    font-family:Fredoka,sans-serif;font-weight:600;font-size:1.02em;cursor:pointer;border:1px solid #E2E8F0;background:#FDF8F3;color:#2D3748;transition:all .2s}
  .gm-four .gm-b i{font-size:1.15em}
  .gm-four .gm-b.primary{background:#4A90A4;color:#fff;border-color:#4A90A4}
  .gm-four .gm-b.primary:hover{background:#3d7a8c;transform:translateY(-.125rem);box-shadow:0 4px 16px rgba(0,0,0,.12)}
  .gm-four .gm-b:not(.primary):hover{background:#E2E8F0}
  body.lesson .gm-four{display:none}
  .gm-units .unit-card .meta{color:#4A5568;font-size:.8125rem;font-weight:600;display:flex;flex-direction:column;gap:.1875rem}
  .gm-units .unit-card .meta i{width:1rem;color:#4A90A4;margin-right:.2em}
  @media (max-width:700px){.gm-four{grid-template-columns:repeat(2,1fr)}}
  body:not(.lesson) #playLesson, body:not(.lesson) .playrow .sp{display:none}
  .card.screen > .gm-four{margin-top:.6em}

/* v194 - print buttons on Resources and Plan */
.rfile{display:inline-flex;align-items:center;gap:.4em;flex-wrap:wrap}
.gm-pr{font:inherit;font-size:.8em;font-weight:800;padding:.1em .55em;border:2px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
.gm-pr:hover{background:var(--sun-l)}
.gm-pr .ti{font-size:1em}

/* v195 - roster panel: the Digital Stewards boxed-card roster (her screenshot 2026-09-25) */
.grid{grid-template-columns:17em 1fr 22em}
@media (max-width:1100px){.grid{grid-template-columns:15em 1fr 19em}}
.rbtns{gap:.3em;margin:.45em 0 .4em}
.rbtn{font-size:.95em;padding:.4em .1em;white-space:nowrap;border:2.5px solid var(--ink);border-radius:9px;box-shadow:0 3px 0 var(--ink)}
.rlegend{font-size:.9em;gap:.8em;margin-bottom:.55em;color:var(--ink-3);opacity:1}
.rlegend i{width:.7em;height:.7em;border:2px solid var(--ink)}
.roster{gap:.45em;padding-right:.2em}
.kid{border:2.5px solid var(--ink);border-radius:10px;background:#fff;padding:.45em .7em;gap:.6em}
.kid:hover{background:var(--sun-l)}
.kid.now{background:var(--sun);border-radius:10px}
.kid .av{width:2.1em;height:2.1em;border:2px solid var(--ink);font-size:.85em}
.kid b{font-size:1.25em;font-weight:500}
.kid .st{width:.8em;height:.8em;border:2px solid var(--ink)}

/* v196 - top bar and Daily Schedule header in the Digital Stewards blue (her screenshot: the brighter sky blue, thick dark border) */
.top{background:var(--sky);border:3.5px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.ahead{background:var(--sky)}

/* v197 - the deck fills the stage edge to edge; no title, skill or set-out lines above it; no deck control bar inside it */
.stagebox{container-type:size;background:transparent;border:0!important;align-items:center;justify-content:center}
.stagebox .stagepic.deck{flex:none;width:min(100cqw,calc(100cqh * 16 / 9));height:min(100cqh,calc(100cqw * 9 / 16));
  border-radius:12px;overflow:hidden;border:3px solid var(--ink);padding:0}
body:not(.lesson) .stagebox .stagecap{display:none}
.slidecount{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:1em;color:var(--ink);padding:0 .4em;white-space:nowrap}
body.lesson .slidecount{color:#fff}
.playrow{justify-content:center}
@media (max-width:900px){.stagebox{height:auto;aspect-ratio:16/9;container-type:inline-size}
  .stagebox .stagepic.deck{width:100%;height:auto;aspect-ratio:16/9}}

/* v198 - the roster panel always shows; on a narrow window it sits under the lesson instead of disappearing */
@media (max-width:900px){
  .grid{display:flex;flex-direction:column}
  #view{order:1} .col.left{order:2;display:block} .col.right{order:3}
  .col.left .roster{max-height:none;overflow:visible}
  body.norost .col.left{display:none}
  body.lesson .col.left{display:none}
}


/* ===== v199 (2026-09-29): sign-in, Teacher Home, play spaces ===== */
.pingate .card{gap:.6em}
.pingate .vline{font-family:Fredoka,sans-serif;font-weight:500;font-size:.95em;color:var(--ink-2);margin:.2em 0 0;line-height:1.25}
#homeScreen{display:none;flex:1;min-height:0;overflow:auto}
body.athome #homeScreen{display:block}
body.athome .grid, body.athome .navbar, body.athome #gtabs, body.athome #rosterBtn, body.athome #topsteps, body.athome #topclock{display:none}
.hhead{flex-direction:row;align-items:center;gap:.9em;flex-wrap:wrap}
.hhead h2{font-size:1.9em}
.hhead .btn{width:auto;padding:.25em .9em}
.hsub{font-family:Fredoka,sans-serif;font-weight:500;color:var(--ink-3);font-size:1.05em}
.hname{display:flex;gap:.4em;align-items:center}
.hname input{font-family:Fredoka,sans-serif;font-size:1em;border:3px solid var(--ink);border-radius:10px;padding:.2em .5em;width:11em}
.hcols{display:grid;grid-template-columns:1.4fr 1fr;gap:.6vh .6vw;margin-top:.6vh;align-items:start}
.hside{display:grid;gap:.6vh}
.hclass{border:3px solid var(--ink);border-radius:12px;padding:.5em .7em;background:#fff;margin-top:.45em}
.hclass.now{background:var(--sun-l)}
.hclass.done{opacity:.6}
.ht{display:flex;gap:.7em;align-items:baseline;flex-wrap:wrap}
.ht b{font-family:Fredoka,sans-serif;font-size:1.15em;color:var(--ink)}
.hs{color:var(--ink-3);font-weight:700;font-size:.9em}
.hrow2{display:flex;gap:.6em;align-items:center;justify-content:space-between;margin-top:.35em}
.hl{font-weight:800;font-size:.95em;color:var(--ink-2);flex:1}
.hrow2 .btn{width:auto;padding:.28em 1em;flex:none}
.hbtns{display:grid;grid-template-columns:1fr 1fr;gap:.45em;margin-top:.45em}
.hnote{font-weight:700;font-size:.85em;color:var(--ink-3);margin:.4em 0 0}
.hverse{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.25em;color:var(--ink);margin:.3em 0 0;line-height:1.15}
.playframe{width:100%;height:100%;min-height:62vh;border:3px solid var(--ink);border-radius:12px;background:#fff}
@media (max-width:800px){ .hcols{grid-template-columns:1fr} .hhead h2{font-size:1.4em} }

/* ===== v201 (2026-09-29): Teacher Home built from the teaching dashboard's own parts.
   Same cream ground, same white cards with the thin warm edge, same outline buttons.
   Cards are told apart by FILL, every button is one size, one orange button per screen. ===== */
#homeScreen{padding:.1em .1em .6em}
#homeScreen .hhead{background:#fff}
#homeScreen .hcols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:.6vh .6vw;margin-top:.45vh}
#homeScreen .hside{gap:.45vh}
#homeScreen .hbottom{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:.6vh .6vw;margin-top:.6vh}
#homeScreen .card{min-width:0;gap:.35em;padding:.7em .9em}
#homeScreen .btn{box-sizing:border-box;height:2.6em;padding:0 .8em;display:flex;align-items:center;justify-content:center;
  font-size:.95em;line-height:1;background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:none;transform:none;white-space:nowrap}
#homeScreen .btn:hover{background:var(--sun-l);transform:none;box-shadow:none}
#homeScreen .btn.warn{background:var(--orange);border-color:var(--ink);color:#fff;box-shadow:0 3px 0 var(--orange-d)}
#homeScreen .btn.warn:hover{background:var(--orange-d)}
#homeScreen .btn.go{background:#fff;color:var(--ink);box-shadow:none}
#homeScreen .hrow2 .btn{width:13em;flex:none}
#homeScreen .btn[data-names]{width:6.5em}
#homeScreen .hbtns .btn{width:100%}
#homeScreen .hclass{border:2px solid #E2D9C6;border-radius:12px;background:#fff;padding:.55em .7em;margin-top:.5em}
#homeScreen .hclass.now{background:var(--sun-l);border-color:var(--sun-d)}
#homeScreen .hclass.done{background:var(--grass-l);opacity:1}
#homeScreen .hclass.done .hl, #homeScreen .hclass.done b{color:var(--ink-3)}
#homeScreen .hname input{height:2.6em;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink);padding:0 .7em;width:11em}
#homeScreen .hname .btn{width:5em}
#homeScreen .hverse{font-size:1.15em}
@media (max-width:800px){
  #homeScreen .hcols, #homeScreen .hbottom{grid-template-columns:minmax(0,1fr)}
  #homeScreen .hrow2{flex-wrap:wrap}
  #homeScreen .hrow2 .btn{width:100%}
  #homeScreen .hrow2 .btn[data-names]{width:6.5em}
  #homeScreen .hl{flex:1 1 100%}
  #homeScreen .hrow2:has(.btn[data-names]) .hl{flex:1 1 0}
  #homeScreen .hhead .btn{width:auto}
  #homeScreen .hbtns .btn{white-space:normal;height:auto;min-height:2.6em;padding:.4em .5em}
}

/* ===== v202: Admin Dashboard + My Schedule ===== */
#homeScreen .tint-white{background:#fff} #homeScreen .tint-sun{background:var(--sun-l)} #homeScreen .tint-teal{background:var(--teal-l)}
#homeScreen .tint-grape{background:var(--grape-l)} #homeScreen .tint-sky{background:var(--sky-l)}
#homeScreen .hcols{align-items:start}
#homeScreen .hright{margin-left:auto;display:flex;gap:.5em}
#homeScreen .hright .btn{width:auto}
#homeScreen .hb3{grid-template-columns:repeat(3,minmax(0,1fr))}
#homeScreen .hstat{display:grid;grid-template-columns:11.5em minmax(0,1fr) 5em;gap:.7em;align-items:center;font-weight:700;color:var(--ink-2);margin-top:.35em}
#homeScreen .hstat b{text-align:right;color:var(--ink);font-family:Fredoka,sans-serif}
#homeScreen .hstat .bar{height:.7em;background:#EEE6D4;border-radius:99px;overflow:hidden;display:block}
#homeScreen .hstat .bar i{display:block;height:100%;background:var(--grass);border-radius:99px}
#homeScreen .hr{color:var(--ink);font-weight:800;text-align:right;font-size:.92em}
#homeScreen .hsched{max-width:60em}
#homeScreen .hbottom{display:none}
@media (max-width:800px){ #homeScreen .hb3{grid-template-columns:repeat(2,minmax(0,1fr))} #homeScreen .hstat{grid-template-columns:7.5em minmax(0,1fr) 4.5em} #homeScreen .hright{margin-left:0} }

/* ===== v203: Admin Dashboard laid out like the 'God Made Music' Home in her screenshots (Today's Classes, Your Worlds, Verse / This Week / Coming Up) ===== */
#homeScreen{display:none}
body.athome #homeScreen{display:flex;flex-direction:column;gap:.6vh}
#homeScreen .datecard{background:#fff;border:2px solid #E2D9C6;border-radius:12px;padding:.25em .9em;text-align:center;display:flex;flex-direction:column;line-height:1.1}
#homeScreen .datecard b{font-family:Fredoka,sans-serif;font-size:1.6em;color:var(--orange-d)}
#homeScreen .datecard span{font-size:.8em;color:var(--ink-3);font-weight:700}
#homeScreen .crow{display:grid;grid-template-columns:3.2em 2.4em minmax(0,1fr) 9em;gap:.8em;align-items:center;padding:.4em .5em;border-bottom:1px solid #EFE7D6}
#homeScreen .crow:last-of-type{border-bottom:0}
#homeScreen .crow.done{opacity:.55}
#homeScreen .crow.now{background:var(--sun-l);border-radius:10px;border-bottom-color:transparent}
#homeScreen .ctime{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:.8em;color:var(--ink-3)}
#homeScreen .cinfo{display:flex;flex-direction:column;min-width:0}
#homeScreen .cinfo b{font-family:Fredoka,sans-serif;color:var(--ink);font-size:1.05em}
#homeScreen .cinfo span{color:var(--ink-3);font-weight:700;font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#homeScreen .gbadge{width:2.2em;height:2.2em;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Fredoka,sans-serif;font-weight:600}
#homeScreen .gbK{background:var(--berry)} #homeScreen .gb1{background:var(--orange)} #homeScreen .gb2{background:var(--grass)}
#homeScreen .gb3{background:var(--sky)} #homeScreen .gb4{background:var(--grape)} #homeScreen .gb5{background:var(--teal)}
#homeScreen .btn.link{border:0;background:none;width:auto;height:auto;min-height:0;justify-content:flex-start;padding:.3em 0 0;color:var(--sky-d);text-decoration:underline}
#homeScreen .worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em;margin-top:.3em}
#homeScreen .world{text-align:left;background:var(--sky-l);border:2px solid #E2D9C6;border-radius:12px;padding:.6em .8em;display:flex;flex-direction:column;gap:.15em;cursor:pointer;font-family:inherit}
#homeScreen .world b{font-family:Fredoka,sans-serif;font-size:1.1em;color:var(--ink)}
#homeScreen .world span{color:var(--ink-3);font-weight:700;font-size:.88em}
#homeScreen .world .wnow{color:var(--ink-2)}
#homeScreen .world:hover{border-color:var(--sky)}
#homeScreen .hthree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6vh .6vw;align-items:start}
#homeScreen .htwo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6vh .6vw;align-items:start}
#homeScreen .hthree .hstat{grid-template-columns:7.5em minmax(0,1fr) 3.6em}
#homeScreen .hthree .hrow2{gap:.4em} #homeScreen .hthree .hr{font-size:.8em}
@media (max-width:800px){ #homeScreen .hthree, #homeScreen .htwo, #homeScreen .worlds{grid-template-columns:minmax(0,1fr)}
  #homeScreen .crow{grid-template-columns:2.4em minmax(0,1fr) 7em} #homeScreen .ctime{display:none} #homeScreen .cinfo span{white-space:normal} }

#homeScreen > *{flex:none}
#homeScreen .card{flex:none}

/* v204 - Admin Dashboard follows her design 02-B (light blue page, white tiles, blue lesson card) */
#homeScreen .adm{background:linear-gradient(#E3F3FD,#D5ECFB);border-radius:14px;padding:.8em;display:flex;flex-direction:column;gap:.7em}
#homeScreen .adm > *{flex:none}
#homeScreen .adm .hhead{background:transparent;border:0;box-shadow:none;padding:.2em .2em 0}
#homeScreen .atiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7em}
#homeScreen .atile{background:#fff;border-radius:14px;padding:.9em 1em;display:flex;align-items:center;gap:.8em;min-width:0}
#homeScreen .atile>i{font-size:1.9em;width:2em;height:2em;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#DCEBFA;color:#0B6FB8;flex:none}
#homeScreen .atile:nth-child(2)>i{background:#DDF3E6;color:#188A55}
#homeScreen .atile:nth-child(3)>i{background:#E8E1F7;color:#6B4BB8}
#homeScreen .atile:nth-child(4)>i{background:#FCE7CF;color:#B86A12}
#homeScreen .atile b{display:block;font-size:1.5em;line-height:1.1;color:#0E3F63}
#homeScreen .atile span span{font-size:.85em;color:#000;font-weight:700}
#homeScreen .hero{background:#fff;border-radius:16px;overflow:hidden}
#homeScreen .herotop{background:linear-gradient(120deg,#1AA0E3,#0777C2);color:#fff;padding:1em 1.2em;display:flex;gap:1em;justify-content:space-between;flex-wrap:wrap}
#homeScreen .herotxt{min-width:0;flex:1 1 20em}
#homeScreen .pill{display:inline-block;background:rgba(255,255,255,.22);border-radius:99px;padding:.25em .8em;font-size:.72em;font-weight:800;letter-spacing:.03em}
#homeScreen .herotop h3{margin:.4em 0 .2em;font-size:1.55em;color:#fff}
#homeScreen .herotop p{margin:.15em 0;color:#fff}
#homeScreen .hverse2{font-style:italic;color:#fff}
#homeScreen .herobtns{display:flex;gap:.5em;align-items:flex-start;flex-wrap:wrap}
#homeScreen .herobtns .btn{min-width:8.5em}
#homeScreen .btn.white{background:#fff;color:#0B6FB8;border-color:#fff;font-weight:800}
#homeScreen .btn.ghost{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.4)}
#homeScreen .btn.ghost:hover{background:rgba(255,255,255,.3)}
#homeScreen .herobody{display:grid;grid-template-columns:1fr 1fr;gap:1.2em;padding:1em 1.2em}
#homeScreen .herobody h4{margin:.1em 0 .5em;color:#0E3F63}
#homeScreen .obj{list-style:none;margin:0;padding:0}
#homeScreen .obj li{padding:.45em 0;border-bottom:1px solid #EEF2F6;color:#000}
#homeScreen .chips{display:flex;flex-wrap:wrap;gap:.5em}
#homeScreen .chip{border:0;background:#EEF6FC;color:#0B6FB8;font:inherit;font-weight:700;border-radius:99px;padding:.5em .9em;cursor:pointer;display:inline-flex;gap:.4em;align-items:center}
#homeScreen .chip:hover{background:#DCEBFA}
#homeScreen .aclass{display:flex;align-items:center;gap:.7em;background:#F6F9FC;border-radius:12px;padding:.6em .7em;margin:.35em 0}
#homeScreen .aclass.now{background:#E1F1FC}
#homeScreen .aclass .ainfo{flex:1;min-width:0;display:flex;flex-direction:column}
#homeScreen .btn.go{background:#0B84D6;border-color:#0B84D6;color:#fff}
#homeScreen .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
#homeScreen .btn.qa{height:4em;justify-content:flex-start;gap:.7em;background:#F6F9FC;border:0;border-radius:12px;font-weight:700}
#homeScreen .btn.qa i{font-size:1.6em;color:#0B6FB8}
@media (max-width:700px){#homeScreen .atiles{grid-template-columns:1fr 1fr}#homeScreen .herobody{grid-template-columns:1fr}}
#homeScreen .aclass .btn{flex:none;width:auto;min-width:6.5em}
#homeScreen .aclass .ainfo b{color:#000}
#homeScreen .aclass .ainfo span{color:#000;font-size:.85em}

/* v205 - Admin Dashboard built to her design 02-B */
body.athome{background:linear-gradient(#E3F4FD,#D2EAFA) fixed}
body.athome .top{display:none}
body.athome #homeScreen{padding:0;background:transparent}
#homeScreen .a2bar{background:#fff;height:60px;box-shadow:0 2px 8px rgba(20,60,100,.08);display:flex;align-items:center;gap:1em;padding:0 1.4em;position:sticky;top:0;z-index:5}
#homeScreen .a2logo{font-family:Georgia,"Times New Roman",serif;font-size:1.5em;color:#1F9AD6;display:flex;gap:.4em;align-items:center;white-space:nowrap}
#homeScreen .a2tabs{display:flex;gap:.3em;margin:0 auto;flex-wrap:nowrap}
#homeScreen .a2right{display:flex;gap:.4em;align-items:center}
#homeScreen .a2tab{cursor:pointer;display:inline-flex;gap:.4em;align-items:center;height:2.6em;padding:0 1em;border-radius:12px;font-weight:700;color:#3F6B8A;white-space:nowrap}
#homeScreen .a2tab:hover{background:#EAF5FC}
#homeScreen .a2tab.on{background:#0B8DD6;color:#fff}
#homeScreen .a2av{width:2.6em;height:2.6em;border-radius:50%;background:#0B8DD6;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
#homeScreen .a2page{max-width:1250px;margin:0 auto;padding:1.2em 1.2em 3em;display:flex;flex-direction:column;gap:1em}
#homeScreen .a2page>*{flex:none}
#homeScreen .a2h{font-family:Georgia,"Times New Roman",serif;font-size:2.2em;color:#0E4A6E;margin:.2em 0 0}
#homeScreen .a2sub{margin:0;color:#4A7896;font-size:1.05em}
#homeScreen .a2tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1em}
#homeScreen .a2tile{background:#fff;border-radius:20px;padding:1.1em;display:flex;align-items:center;gap:.9em;min-width:0;box-shadow:0 2px 8px rgba(20,60,100,.06)}
#homeScreen .a2tile>i{font-size:1.7em;width:2.2em;height:2.2em;display:flex;align-items:center;justify-content:center;border-radius:14px;background:#DCEBFA;color:#0B6FB8;flex:none}
#homeScreen .a2tile:nth-child(2)>i{background:#DDF3E6;color:#188A55}
#homeScreen .a2tile:nth-child(3)>i{background:#E8E1F7;color:#6B4BB8}
#homeScreen .a2tile:nth-child(4)>i{background:#FCE7CF;color:#B86A12}
#homeScreen .a2tile b{display:block;font-family:Georgia,serif;font-size:1.9em;line-height:1.1;color:#0E4A6E}
#homeScreen .a2tile span span{font-weight:800;color:#000;font-size:.85em}
#homeScreen .a2hero{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 2px 8px rgba(20,60,100,.06)}
#homeScreen .a2top{background:linear-gradient(100deg,#12A3E8,#0879C4);color:#fff;padding:1.3em 1.6em;display:flex;gap:1em;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
#homeScreen .a2txt{flex:1 1 22em;min-width:0}
#homeScreen .a2pill{display:inline-block;background:rgba(255,255,255,.22);border-radius:99px;padding:.3em .9em;font-size:.75em;font-weight:800}
#homeScreen .a2top h2{font-family:Georgia,serif;font-size:1.9em;margin:.35em 0 .15em;color:#fff}
#homeScreen .a2top p{margin:.15em 0;color:#fff}
#homeScreen .a2v{font-style:italic;color:#FFF3B0}
#homeScreen .a2btns{display:flex;gap:.6em;flex-wrap:nowrap}
#homeScreen .a2b{cursor:pointer;height:42px;padding:0 1.3em;border-radius:12px;display:inline-flex;gap:.5em;align-items:center;font-weight:800;white-space:nowrap}
#homeScreen .a2b.white{background:#fff;color:#0B6FB8}
#homeScreen .a2b.glass{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.35)}
#homeScreen .a2body{display:grid;grid-template-columns:1fr 1fr;gap:1.6em;padding:1.3em 1.6em}
#homeScreen .a2body h3,#homeScreen .a2ch h3{font-family:Georgia,serif;color:#0E4A6E;margin:0 0 .6em;font-size:1.15em}
#homeScreen .a2body ul{list-style:none;margin:0;padding:0}
#homeScreen .a2body li{padding:.55em 0;border-bottom:1px solid #EEF2F6;color:#000}
#homeScreen .a2chips{display:flex;flex-wrap:wrap;gap:.6em}
#homeScreen .a2chip{cursor:pointer;background:#EEF6FC;color:#0B6FB8;font-weight:800;border-radius:99px;padding:.55em 1em;display:inline-flex;gap:.4em;align-items:center}
#homeScreen .a2chip:hover{background:#DCEBFA}
#homeScreen .a2two{display:grid;grid-template-columns:1fr 1fr;gap:1em}
#homeScreen .a2card{background:#fff;border-radius:24px;padding:1.3em;box-shadow:0 2px 8px rgba(20,60,100,.06);min-width:0}
#homeScreen .a2ch{display:flex;justify-content:space-between;align-items:center}
#homeScreen .a2link{cursor:pointer;color:#0B8DD6;font-weight:800}
#homeScreen .a2row{cursor:pointer;display:flex;align-items:center;gap:.8em;background:#F5F8FB;border-radius:14px;padding:.75em .8em;margin:.5em 0}
#homeScreen .a2row.now{background:#E1F1FC}
#homeScreen .a2row .ainfo{flex:1;min-width:0;display:flex;flex-direction:column}
#homeScreen .a2row .ainfo b,#homeScreen .a2row .ainfo span{color:#000}
#homeScreen .a2row .ainfo span{font-size:.85em}
#homeScreen .a2pc{text-align:right;display:flex;flex-direction:column}
#homeScreen .a2pc b{color:#188A55;font-size:1.05em}
#homeScreen .a2pc span{font-size:.75em;color:#000}
#homeScreen .a2qgrid{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
#homeScreen .a2qa{cursor:pointer;background:#F5F8FB;border-radius:16px;padding:1em;display:flex;align-items:center;gap:.8em;min-height:3.2em}
#homeScreen .a2qa:hover{background:#EAF3FA}
#homeScreen .a2qa i{font-size:1.5em;width:1.9em;height:1.9em;border-radius:12px;background:#DCEBFA;color:#0B6FB8;display:flex;align-items:center;justify-content:center;flex:none}
#homeScreen .a2qa:nth-child(2) i{background:#DDF3E6;color:#188A55}
#homeScreen .a2qa:nth-child(3) i{background:#E8E1F7;color:#6B4BB8}
#homeScreen .a2qa:nth-child(4) i{background:#FCE7CF;color:#B86A12}
#homeScreen .a2qa b{color:#0E4A6E}
#homeScreen .btn{height:42px;border-radius:12px;border:0;box-shadow:none;background:#EEF6FC;color:#0B6FB8;font-weight:800}
#homeScreen .btn:hover{background:#DCEBFA}
#homeScreen .a2page .hhead,#homeScreen .a2page .card{background:#fff;border:0;border-radius:24px;box-shadow:0 2px 8px rgba(20,60,100,.06)}
@media (max-width:900px){#homeScreen .a2tabs{display:none}#homeScreen .a2tiles{grid-template-columns:1fr 1fr}#homeScreen .a2body,#homeScreen .a2two{grid-template-columns:1fr}#homeScreen .a2btns{flex-wrap:wrap}}
@media (max-width:600px){#homeScreen .a2right .a2tab{display:none}#homeScreen .a2bar{padding:0 1em}#homeScreen .a2page{padding:1em .8em 3em}}

/* v206 - Admin Dashboard = her 02-B screenshot, value for value from 02-B_teacher_dashboard.html.
   Sizes are in rem (16px), so the page no longer scales with the teaching dashboard's type. */
body.athome{padding:0 !important;gap:0 !important;background:linear-gradient(180deg,#e0f4ff 0%,#b8e6fc 100%) fixed !important;font-size:16px}
body.athome #homeScreen{padding:0 !important;gap:0 !important;display:block !important;height:100vh;overflow:auto;background:transparent}
#homeScreen .gxnav, #homeScreen .gx, #homeScreen .gx *{box-sizing:border-box}
#homeScreen .gxnav{position:sticky;top:0;left:0;right:0;height:60px;background:rgba(255,255,255,.98);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;z-index:100;box-shadow:0 2px 20px rgba(0,0,0,.08);font-family:"Helvetica Neue",Arial,sans-serif}
#homeScreen .gxlogo{font-family:Georgia,"Times New Roman",serif;font-size:1.5rem;color:#0ea5e9;display:flex;align-items:center;gap:.5rem;cursor:pointer;white-space:nowrap}
#homeScreen .gxlogo i{font-size:1.6rem}
#homeScreen .gxlinks{display:flex;gap:.25rem}
#homeScreen .gxlink{background:none;border:none;padding:.5rem 1rem;border-radius:10px;font-family:inherit;font-size:.9rem;font-weight:700;color:#64748b;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;box-shadow:none;height:auto;transition:all .2s}
#homeScreen .gxlink i{font-size:1.05rem}
#homeScreen .gxlink:hover{background:#f0f9ff;color:#0284c7}
#homeScreen .gxlink.on{background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff}
#homeScreen .gxright{display:flex;align-items:center;gap:.75rem;position:relative}
#homeScreen .gxpill{background:#f0f9ff;border:2px solid #bae6fd;padding:.4rem .9rem;border-radius:20px;font-family:inherit;font-weight:700;font-size:.85rem;color:#0284c7;cursor:pointer;display:flex;align-items:center;gap:.4rem;white-space:nowrap;height:auto;box-shadow:none}
#homeScreen .gxpill:hover, #homeScreen .gxpill.on{background:#e0f2fe}
#homeScreen .gxav{width:38px;height:38px;background:linear-gradient(135deg,#0ea5e9,#0284c7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.9rem;cursor:pointer;flex:none}
#homeScreen .gxmenu{position:absolute;top:48px;right:0;background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.12);padding:1rem;display:flex;flex-direction:column;gap:.6rem;width:16rem;z-index:120}
#homeScreen .gxmenu[hidden]{display:none}
#homeScreen .gxmenu b{color:#0c4a6e;font-size:.85rem}
#homeScreen .gxmenu .hname{display:flex;gap:.4rem}
#homeScreen .gxmenu input{flex:1;min-width:0;height:2.4rem;border:2px solid #bae6fd;border-radius:10px;padding:0 .6rem;font:inherit;font-size:.9rem;color:#0c4a6e;width:auto}
#homeScreen .gxsave, #homeScreen .gxout{border:none;background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;font:inherit;font-weight:700;font-size:.85rem;border-radius:10px;padding:0 .9rem;height:2.4rem;cursor:pointer}
#homeScreen .gxout{background:#f0f9ff;color:#0284c7;display:flex;align-items:center;justify-content:center;gap:.4rem}
#homeScreen .gx{padding:20px 1.5rem 2rem;max-width:1300px;margin:0 auto;font-family:"Helvetica Neue",Arial,sans-serif;color:#475569;font-size:1rem;line-height:1.35}
#homeScreen .gxhead{margin-bottom:1.5rem}
#homeScreen .gxgreet{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:2rem;color:#0c4a6e;margin:0 0 .25rem}
#homeScreen .gxgsub{color:#64748b;font-size:1rem;margin:0}
#homeScreen .gxstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
#homeScreen .gxstat{background:#fff;border-radius:20px;padding:1.25rem;box-shadow:0 4px 20px rgba(0,0,0,.06);display:flex;align-items:center;gap:1rem;min-width:0;transition:all .2s}
#homeScreen .gxstat:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.1)}
#homeScreen .gxsico, #homeScreen .gxqico{width:55px;height:55px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex:none}
#homeScreen .gxqico{width:42px;height:42px;border-radius:12px;font-size:1.3rem}
#homeScreen .blue{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#2563eb}
#homeScreen .green{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#16a34a}
#homeScreen .purple{background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#7c3aed}
#homeScreen .orange{background:linear-gradient(135deg,#ffedd5,#fed7aa);color:#ea580c}
#homeScreen .gxsinfo{min-width:0}
#homeScreen .gxsinfo h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.8rem;color:#0c4a6e;line-height:1;margin:0 0 .15rem}
#homeScreen .gxsinfo p{color:#64748b;font-size:.85rem;font-weight:700;margin:0}
#homeScreen .gxweek{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.08);margin-bottom:1.5rem}
#homeScreen .gxwhead{background:linear-gradient(135deg,#0ea5e9,#0284c7);padding:1.5rem;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem}
#homeScreen .gxwinfo{flex:1 1 24rem;min-width:0}
#homeScreen .gxbadge{display:inline-flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.2);padding:.3rem .8rem;border-radius:15px;font-size:.8rem;font-weight:700;color:#fff;margin-bottom:.5rem}
#homeScreen .gxwtitle{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.6rem;color:#fff;margin:0 0 .25rem}
#homeScreen .gxwsub{color:rgba(255,255,255,.9);font-size:.95rem;margin:0}
#homeScreen .gxwverse{color:#fde68a;font-style:italic;font-size:.9rem;margin:.5rem 0 0}
#homeScreen .gxwacts{display:flex;gap:.5rem;flex-wrap:wrap}
#homeScreen .gxwbtn{padding:.7rem 1.25rem;border-radius:12px;font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:all .2s;border:none;display:inline-flex;align-items:center;gap:.4rem;height:auto;box-shadow:none}
#homeScreen .gxwbtn.primary{background:#fff;color:#0284c7}
#homeScreen .gxwbtn.primary:hover{background:#f0f9ff;transform:translateY(-2px)}
#homeScreen .gxwbtn.secondary{background:rgba(255,255,255,.2);color:#fff;border:2px solid rgba(255,255,255,.3)}
#homeScreen .gxwbtn.secondary:hover{background:rgba(255,255,255,.3)}
#homeScreen .gxwbody{padding:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
#homeScreen .gxwbody h4{font-family:Georgia,"Times New Roman",serif;font-weight:700;color:#0c4a6e;font-size:1rem;margin:0 0 .75rem;display:flex;align-items:center;gap:.4rem}
#homeScreen .gxwbody h4 i{color:#0ea5e9}
#homeScreen .gxobj{list-style:none;margin:0;padding:0}
#homeScreen .gxobj li{padding:.5rem 0;color:#475569;font-size:.9rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #f1f5f9}
#homeScreen .gxobj li:last-child{border-bottom:none}
#homeScreen .gxobj li i{color:#0ea5e9}
#homeScreen .gxtags{display:flex;flex-wrap:wrap;gap:.5rem}
#homeScreen .gxtag{background:#f0f9ff;color:#0284c7;padding:.4rem .8rem;border-radius:10px;font-size:.8rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
#homeScreen .gxtag:hover{background:#e0f2fe}
#homeScreen .gxtwo{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}
#homeScreen .gxcard{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.06);min-width:0}
#homeScreen .gxch{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
#homeScreen .gxch h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.1rem;color:#0c4a6e;margin:0;display:flex;align-items:center;gap:.45rem}
#homeScreen .gxch h3 i{color:#0ea5e9}
#homeScreen .gxca{color:#0ea5e9;font-weight:700;font-size:.85rem;cursor:pointer}
#homeScreen .gxca:hover{text-decoration:underline}
#homeScreen .gxlist{display:flex;flex-direction:column;gap:.75rem}
#homeScreen .gxclass, #homeScreen .gxup{display:flex;align-items:center;gap:1rem;padding:.75rem;background:#f8fafc;border-radius:12px;cursor:pointer;transition:all .2s}
#homeScreen .gxclass:hover, #homeScreen .gxup:hover{background:#f0f9ff;transform:translateX(5px)}
#homeScreen .gxclass.now{background:#e0f2fe;box-shadow:inset 0 0 0 2px #7dd3fc}
#homeScreen .gxclass.done{opacity:.6}
#homeScreen .gxcav{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#0c4a6e;flex:none}
#homeScreen .gxcav.k{background:linear-gradient(135deg,#fde68a,#fcd34d)}
#homeScreen .gxcav.g1{background:linear-gradient(135deg,#bbf7d0,#86efac)}
#homeScreen .gxcav.g2{background:linear-gradient(135deg,#bfdbfe,#93c5fd)}
#homeScreen .gxcav.g3{background:linear-gradient(135deg,#ddd6fe,#c4b5fd)}
#homeScreen .gxcav.g4{background:linear-gradient(135deg,#fed7aa,#fdba74)}
#homeScreen .gxcav.g5{background:linear-gradient(135deg,#fbcfe8,#f9a8d4)}
#homeScreen .gxcinfo, #homeScreen .gxuinfo{flex:1;min-width:0}
#homeScreen .gxcname, #homeScreen .gxutitle{font-weight:800;color:#0c4a6e;font-size:.95rem}
#homeScreen .gxutitle{font-weight:700;font-size:.9rem}
#homeScreen .gxcmeta, #homeScreen .gxumeta{color:#64748b;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#homeScreen .gxcprog{width:60px;text-align:right;flex:none}
#homeScreen .gxcnum{font-family:Georgia,"Times New Roman",serif;color:#22c55e;font-size:1rem}
#homeScreen .gxclab{font-size:.7rem;color:#64748b}
#homeScreen .gxqas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
#homeScreen .gxqa{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#f8fafc;border-radius:14px;cursor:pointer;transition:all .2s;border:2px solid transparent}
#homeScreen .gxqa:hover{background:#fff;border-color:#0ea5e9;transform:translateY(-3px);box-shadow:0 8px 25px rgba(14,165,233,.15)}
#homeScreen .gxqa span{font-weight:700;color:#0c4a6e;font-size:.9rem}
#homeScreen .gxact{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid #f1f5f9}
#homeScreen .gxact:last-child{border-bottom:none}
#homeScreen .gxaico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;background:#f0f9ff;color:#0284c7;flex:none}
#homeScreen .gxatext{flex:1;font-size:.85rem;color:#475569}
#homeScreen .gxatext strong{color:#0c4a6e}
#homeScreen .gxatime{font-size:.75rem;color:#94a3b8}
#homeScreen .gxudate{width:50px;text-align:center;flex:none}
#homeScreen .gxuday{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.4rem;color:#0ea5e9;line-height:1}
#homeScreen .gxumon{font-size:.7rem;color:#64748b;font-weight:700}
/* the Classes and My Schedule screens sit on the same page and bar */
#homeScreen .gx > .card, #homeScreen .gx .adm{border-radius:20px}
#homeScreen .gx .adm{background:transparent;padding:0}
@media (max-width:1100px){ #homeScreen .gxlink{padding:.5rem .6rem} #homeScreen .gxlink i{display:none} }
@media (max-width:900px){ #homeScreen .gxstats{grid-template-columns:repeat(2,1fr)} #homeScreen .gxtwo{grid-template-columns:1fr}
  #homeScreen .gxnav{height:auto;flex-wrap:wrap;padding:.6rem 1rem;gap:.5rem} #homeScreen .gxlinks{order:3;width:100%;overflow-x:auto} }
@media (max-width:768px){ #homeScreen .gxwbody{grid-template-columns:1fr} }
@media (max-width:500px){ #homeScreen .gxstats{grid-template-columns:1fr} #homeScreen .gxpill{padding:.35rem .6rem} #homeScreen .gxgreet{font-size:1.6rem} }
#homeScreen .gxqa{min-width:0}
@media (max-width:500px){ #homeScreen .gxqa{padding:.75rem;gap:.5rem} #homeScreen .gxqa span{font-size:.85rem} }

  /* ---- v207 (teacher dashboard only) ---- */
  /* 5a.34: with no names typed, the roster asks for them instead of showing sample names */
  .rempty{padding:.6em .3em;text-align:center}
  .rempty p{font-weight:800;color:var(--ink-3);margin-bottom:.5em}
  .rempty .btn{width:auto;padding:.3em 1em}
  .box.rempty{text-align:left}
  /* 5a.35: the unit's rainbow color beside its name on the unit page */
  .ucol{display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;border-radius:.35em;margin-right:.4em;font-size:.8em;vertical-align:.1em}
  /* 5a.36: Resources uses the All Units cards; no hover lift, the lists read plainly */
  .gm-res .rcard{cursor:default}
  .gm-res .rcard:hover{transform:none;box-shadow:0 2px 8px rgba(0,0,0,.08)}
  .gm-res .rcard ul{margin:.2em 0 0 1.1em;display:grid;gap:.3em;font-weight:600;color:#2D3748}
  .gm-res .rcard .ic-wrap{width:2.6rem;height:2.6rem;font-size:1.35rem;margin-bottom:.5rem}
  .gm-res .rall{margin-top:1.125rem;background:#fff;border:1px solid #E2E8F0;border-radius:.75rem;padding:.8em 1em}
  .gm-res .rall summary{cursor:pointer;font-family:Fredoka,sans-serif;font-weight:600;font-size:1.05rem;color:#2D3748}
  .gm-res .rall .yl{margin-top:.6em}
  .gm-res .rcard .rfile{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:.5em}
  .gm-res .rcard .rfile .gm-pr{flex:none}
  #dayline{white-space:nowrap}
  .gm-res .menu-grid{grid-template-columns:repeat(2,1fr)}
  @media (max-width:600px){.gm-res .menu-grid{grid-template-columns:1fr}}
  /* spec 7.4: taught / now / later from the real calendar, on All Units */
  .gm-units .unit-card .ustate{position:absolute;top:.75rem;right:6.4rem;font-weight:900;font-size:.625rem;padding:.1875rem .5rem;border-radius:20px;text-transform:uppercase;font-family:Nunito,sans-serif}
  .gm-units .unit-card .ustate.taught{background:var(--grass-l);color:var(--grass-d)}
  .gm-units .unit-card .ustate.now{background:var(--sun-l);color:var(--sun-d)}
  .gm-units .unit-card .ustate.later{background:#EDF2F7;color:#4A5568}
  /* spec 7.5: song words on the Songs page */
  .songw{margin-top:.5em}.songw b{font-family:Fredoka,sans-serif;font-size:1.1em}.songw p{margin-top:.2em}
  /* v208: the names box stays white with dark ink, even when the Mac is in dark mode */
  .rosteredit{background:#fff!important;color:#2D3748!important;color-scheme:light}
  .rosteredit::placeholder{color:#8A94A6}
  /* v208: the roster never grows past its column (long names were pushing it under the lesson) */
  .col.left,.col.left .card{min-width:0;overflow:hidden}
  .rbtn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kid{min-width:0}
  /* v208: homeroom tag beside a child's name, and a chip row to show one homeroom at a time */
  .kid .rtag{font-style:normal;font-size:.62em;font-weight:800;color:#4A5568;background:#EDF2F7;border-radius:999px;padding:.1em .5em;flex:none;white-space:nowrap}
  .rfilt{display:flex;flex-wrap:wrap;gap:.25em;margin-bottom:.3em}
  .rfilt .rf{font:inherit;font-size:.72em;font-weight:800;border:0;border-radius:999px;padding:.2em .7em;background:#EDF2F7;color:#2D3748;cursor:pointer}
  .rfilt .rf.on{background:var(--sky);color:#fff}
  .rtagin{flex:1;min-width:12em;font-family:Nunito,sans-serif;font-weight:700;font-size:.95em;border:2px solid #CBD5E0;border-radius:8px;padding:.3em .6em;background:#fff;color:#2D3748;color-scheme:light}
  /* v208: mark the child's answer right under the picked name */
  .pmarks{display:grid;grid-template-columns:1fr 1fr;gap:.25em;margin-top:.35em}
  .pmarks .pm{font:inherit;font-size:.7em;font-weight:800;border:0;border-radius:8px;padding:.35em .2em;background:#fff;color:#2D3748;cursor:pointer}
  .pmarks .pm.on.m0{background:var(--red);color:#fff}.pmarks .pm.on.m1{background:var(--orange);color:#fff}
  .pmarks .pm.on.m2{background:var(--grass);color:#fff}.pmarks .pm.on.m3{background:var(--sky);color:#fff}
  /* v208, her words 9/29/2026: the Admin Dashboard logo is the teacher dashboard's own GodMadeMusic mark, and the four numbers are not serif */
  #homeScreen .gxlogo{font-family:Fredoka,sans-serif;font-weight:700;font-size:1.45rem;color:#fff;background:#2F86D6;border-radius:12px;padding:.25rem .8rem;gap:0}
  #homeScreen .gxlogo span{color:#FFE49B}
  #homeScreen .gxsinfo h3{font-family:Fredoka,sans-serif;font-weight:700}
  /* v208: a Names button that is always in the roster */
  .rnames{font-family:Fredoka,sans-serif;font-weight:700;font-size:.72em;border:0;border-radius:999px;padding:.2em .7em;background:var(--grass);color:#fff;cursor:pointer;flex:none}
  /* v208, her words 9/29/2026 "ugly off brand looking login": the sign-in wears the dashboards' own look -
     the Admin Dashboard's light-blue page, the GodMadeMusic mark in the teacher bar's blue, rounded Fredoka type */
  .pingate{background:linear-gradient(180deg,#e0f4ff 0%,#b8e6fc 100%)}
  .pingate .card{width:min(24em,90vw);background:#fff;border:0;border-radius:20px;box-shadow:0 10px 40px rgba(14,74,110,.15);padding:2em 1.8em 1.6em;display:flex;flex-direction:column;align-items:stretch;gap:.7em}
  .pinlogo{align-self:center;font-family:Fredoka,sans-serif;font-weight:700;font-size:2.1em;color:#fff;background:#2F86D6;border-radius:14px;padding:.15em .6em;line-height:1.2}
  .pinlogo span{color:#FFE49B}
  .pinsub{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.05em;color:#0c4a6e;margin-bottom:.3em}
  .pingate input{border:2px solid #bae6fd;border-radius:12px;background:#f0f9ff;color:#0c4a6e;font-size:1.15em;padding:.45em .6em;color-scheme:light}
  .pingate input:focus{outline:none;border-color:#2F86D6;background:#fff}
  .pingate .btn.go{background:#2F86D6;border:0;border-radius:12px;box-shadow:none;color:#fff;font-size:1.15em;padding:.5em}
  .pingate .vline{color:#475569}
  /* v208 sign-in art: her Covenant Arch (07_Business/GodMadeMusic_VISUAL_IDENTITY_v4.html), the deck's instruments, falling rainbow notes */
  .pinsky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .pingate .card{position:relative;z-index:2}
  .pinlogo2{align-self:center;text-align:center;color:#000}
  .pinlogo2 .pinarch{width:190px;height:auto;display:block;margin:0 auto}
  .pinlogo2 .arch path{fill:none;stroke-linecap:butt}
  .pinwm{font-family:Outfit,Fredoka,sans-serif;font-weight:900;letter-spacing:-.02em;line-height:.95;text-transform:uppercase;font-size:2em;margin-top:.35em;color:#000}
  .pinnote{position:absolute;top:-80px;opacity:.85;animation:pinfall 9s linear infinite}
  @keyframes pinfall{from{transform:translateY(0) rotate(-10deg)}to{transform:translateY(115vh) rotate(12deg)}}
  .pinins{position:absolute;width:120px;height:130px;opacity:.95}
  .pinins svg{width:100%;height:100%}
  .pinins.p0{left:6%;bottom:8%}.pinins.p1{left:16%;top:14%}.pinins.p2{right:16%;top:12%}
  .pinins.p3{right:6%;bottom:10%}.pinins.p4{left:20%;bottom:30%}.pinins.p5{right:22%;bottom:34%}
  @media (max-width:700px){.pinins{width:70px;height:76px}.pinins.p4,.pinins.p5{display:none}}
  @media (prefers-reduced-motion:reduce){.pinnote{animation:none;display:none}}
  /* v208, spec rule 11 (her ruling 9/29/2026: no yellow or beige page background) and her screenshot "it was not that
     yellow color": the teaching screen's page is the Admin Dashboard's light blue, not cream. Cards keep their fills. */
  :root{--ground:#E6F3FC}
  body{background:linear-gradient(180deg,#e0f4ff 0%,#cdeafb 100%) fixed}
  /* v208: one control row - Words, Sound and a Sound effects pop-up beside Back / Next / Full screen */
  .sfxwrap{position:relative;display:inline-flex}
  .sfxpop{position:absolute;bottom:calc(100% + .4em);left:0;z-index:80;display:grid;grid-template-columns:repeat(2,minmax(7em,1fr));gap:.3em;background:#fff;border-radius:12px;padding:.5em;box-shadow:0 8px 30px rgba(0,0,0,.25)}
  .sfxpop[hidden]{display:none}
  .sfxpop .btn{width:auto;font-size:.9em;padding:.3em .6em}
  /* v208: the slide's music controls in the bottom row */
  .musgroup{display:inline-flex;align-items:center;gap:.3em}
  .bpmval{font-family:"JetBrains Mono",monospace;font-size:.85em;background:#fff;border-radius:8px;padding:.1em .4em;color:var(--ink)}
  body.lesson .bpmval{background:#fff}
  /* v208: full screen is the whole teaching area - the slide, the six parts and this row - so every button keeps working */
  .fsparts{display:none}
  .tleft:fullscreen{display:flex;flex-direction:column;background:#10151c;padding:.4em;gap:.4em}
  .tleft:fullscreen .stagebox{flex:1;min-height:0;height:auto!important}
  .tleft:fullscreen .stagepic,.tleft:fullscreen .deckframe{height:100%!important;width:100%}
  .tleft:fullscreen .fsparts{display:flex;gap:.35em;justify-content:center;flex:none}
  .tleft:fullscreen .gm-four,.tleft:fullscreen .floatclock{display:none!important}
  .tleft:fullscreen .playrow{display:flex!important;flex:none;background:var(--ink);border-radius:10px;padding:.3em .45em}
  /* v208, her words 9/29/2026: "those buttons... too big and too ugly. They need to be streamlined... like the buttons on the top row" */
  .playrow{flex-wrap:wrap;gap:.3em;align-items:center}
  .playrow .btn,.playrow .sfxwrap .btn{width:auto;height:auto;white-space:nowrap;border:0;border-radius:999px;box-shadow:none;
    font-family:Fredoka,sans-serif;font-weight:600;font-size:.86em;padding:.28em .85em;background:#2F86D6;color:#fff;line-height:1.2}
  .playrow .btn:hover{background:#1B5E9E}
  .playrow .btn.go{background:var(--grass)}
  .playrow .btn i{font-size:1em}
  .playrow .slidecount{font-family:Fredoka,sans-serif;font-weight:700;font-size:.95em;padding:0 .2em}
  .playrow .bpmval{font-size:.8em;padding:.1em .45em;border-radius:999px;background:#EAF4FC}
  body.lesson .playrow .btn,.tleft:fullscreen .playrow .btn{background:rgba(255,255,255,.2);color:#fff;border:0;font-size:.86em;padding:.28em .85em}
  body.lesson .playrow .btn:hover,.tleft:fullscreen .playrow .btn:hover{background:rgba(255,255,255,.32)}
  .sfxpop .btn{background:#2F86D6!important;color:#fff!important}
  .outline{margin:.3em 0 0 1.3em;display:grid;gap:.25em;font-size:.92em}

  /* ---- v209, her review 9/29/2026 against Digital Stewards ---- */
  /* the roster: thin rows so the whole class fits (her words: "look how they have their left hand panel so that all of the rosters fit") */
  .roster{gap:0!important}
  .kid{border:0!important;border-bottom:1.5px solid #EFE7D6!important;border-radius:0!important;padding:.2em .35em!important;background:none!important;box-shadow:none!important}
  .kid.now{background:var(--sun)!important;border-radius:8px!important}
  .kid b{font-size:.98em!important;font-weight:600}
  .kid .av{width:1.45em!important;height:1.45em!important;font-size:.62em!important;border-width:1.5px!important}
  /* the lesson pill leaves the stage; Unit, Lesson and Week are in the top bar */
  .today .thead{display:none!important}
  /* the verse card says the verse boldly, the reference once, in blue */
  .verse .t{font-weight:700!important}
  .verse .r{color:#1B5E9E!important;font-weight:700}
  /* before the lesson is launched: only Back, count, Next, Full screen */
  body:not(.lesson) .playrow .lo{display:none!important}
  .tleft:fullscreen .playrow .lo{display:inline-flex!important}
  .tleft:fullscreen .playrow .musgroup[style*="none"]{display:none!important}
  body:not(.lesson) .playrow{justify-content:center}
  /* launched: the controls drop into a bar that looks like the top bar - two rows when the music needs them */
  body.lesson .playrow,.tleft:fullscreen .playrow{background:var(--sky)!important;border:3px solid var(--ink)!important;border-radius:14px!important;padding:.35em .6em!important;gap:.35em!important;flex-wrap:wrap;justify-content:center}
  body.lesson .playrow .btn,.tleft:fullscreen .playrow .btn,body.lesson .playrow .sfxwrap .btn{background:rgba(255,255,255,.2)!important;color:#fff!important;border:2px solid rgba(255,255,255,.45)!important;border-radius:999px!important;font-family:Fredoka,sans-serif;font-weight:600;font-size:.86em;padding:.12em .75em!important}
  body.lesson .playrow .btn:hover{background:rgba(255,255,255,.34)!important}
  body.lesson .playrow .slidecount,.tleft:fullscreen .playrow .slidecount{color:#fff}
  body.lesson .playrow .bpmval{background:#fff;color:var(--ink)}
  body.lesson .screenname{background:#fff;border-radius:999px;color:var(--ink)}

  /* ---- v210, her walk-through 9/29/2026: "I don't see my grade" - the grade stays on the teaching screen ---- */
  .gradechip{font-family:Fredoka,sans-serif;font-weight:600;font-size:.95em;background:#F5C400;color:var(--ink);border-radius:999px;padding:.25em .9em;white-space:nowrap;align-self:center;flex:none}

  /* ---- v211/v213, her walk-through 9/29/2026: one plain color for the slide row only (Back, Next, Full screen...). v213: the big four buttons, the top bar and the side panels are back to how they were - she did not ask for those.
     One blue (#2F86D6, the top bar's own blue), white words, no borders, no shadows. On a blue bar the same buttons turn white with blue words. ---- */
  .playrow .btn,.playrow .sfxwrap .btn,.playrow .gradechip{background:#2F86D6!important;color:#fff!important;border:0!important;box-shadow:none!important;border-radius:999px!important}
  .playrow .btn:hover{background:#1B6FBE!important;transform:none!important;box-shadow:none!important}
  body.lesson .playrow .btn,.tleft:fullscreen .playrow .btn,body.lesson .playrow .sfxwrap .btn,body.lesson .playrow .gradechip,.tleft:fullscreen .playrow .gradechip{background:#fff!important;color:#1B5E9E!important;border:0!important}
  body.lesson .playrow .btn:hover{background:#E6F1FB!important}
  body.lesson .playrow,.tleft:fullscreen .playrow{border:0!important}
  /* v212: the double arrows beside Back and Next - just the arrows, not whole buttons */
  .playrow .jmp{background:none;border:0;box-shadow:none;cursor:pointer;font-family:Fredoka,sans-serif;font-weight:700;font-size:1.5em;line-height:1;padding:0 .15em;color:#2F86D6}
  .playrow .jmp:hover{color:#1B6FBE}
  body.lesson .playrow .jmp,.tleft:fullscreen .playrow .jmp{color:#fff}
  /* v213, her words 9/29/2026: "why does the screen not fill up the space? Why do you have it on a card?" The slide keeps its
     16:9 shape, so the stage box now takes exactly the slide's shape (no cream bands above and below it); the controls sit right under it. */
  body:not(.lesson) .stagebox{flex:0 1 auto!important;aspect-ratio:16/9;width:100%;height:auto!important;max-height:100%;margin:0 auto}
  body:not(.lesson) .tleft{justify-content:flex-start}
  body.lesson .stagebox{justify-content:flex-start!important}
  /* v213, her words: the roster names are "so small, I can't read them" */
  .kid b{font-size:1.2em!important}
  .kid{padding:.3em .4em!important}
  /* v214, her words 9/29/2026: "make the launch button the same color as the... add names... green" */
  .gm-four .gm-b.primary{background:var(--grass)!important;border-color:var(--grass)!important;color:#fff!important}
  .gm-four .gm-b.primary:hover{background:var(--grass-d)!important}
  /* v215, her words 9/29/2026: the Index and Record buttons "should be like pill buttons, like the word roster. They're not supposed to be that round and big." */
  .top button.gtab,.top .gtab[data-view]{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap;height:auto;line-height:1.2}
  .top .who{white-space:nowrap}
  /* v216, 5a 98: a small drum (Beat Keeper) or xylophone (Melody Maker) beside a child who has had that job this round */
  .kid .jobi{width:1.05em;height:1.05em;flex:none;margin-left:.2em}
  /* v217, her screenshot 9/30/2026: empty cream under Launch / Plan / Resources / All Units. The lesson card now hugs the slide and
     its buttons, and today's classes sits right under it, instead of the card stretching to fill the window. */
  body:not(.lesson) #view{grid-template-rows:auto auto auto;align-content:start}
  body:not(.lesson) .card.today{height:auto}
  body:not(.lesson) .todaywrap{flex:none}