/* Brain Stars school mode: picture PINs, the class sign-in, the teacher's unit picker, progress heatmap,
   login cards and certificates (with print styles). Sits on the medieval look (css/medieval.css). */

/* ---------- picture PINs ---------- */
.pic { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#FFF6DF; border:2px solid #C9A86B; box-shadow:0 2px 0 #B9975F }
.pic .gi, .pic svg { width:34px; height:34px }
.pic.empty { background:#F3E3BE; border-style:dashed; box-shadow:none }
.pics { display:inline-flex; gap:6px; flex-wrap:wrap }
.pinshow { display:flex; justify-content:center; gap:10px; margin:4px 0 8px }
.pinshow .pic { width:58px; height:58px } .pinshow .pic .gi, .pinshow .pic svg { width:44px; height:44px }
.picpad { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; width:min(100%, 330px); margin:0 auto }
.picbtn { aspect-ratio:1; display:grid; place-items:center; border-radius:18px; background:#FFF7E4; border:3px solid #C9A86B; box-shadow:0 5px 0 #B9975F; cursor:pointer; padding:6px; -webkit-tap-highlight-color:transparent }
.picbtn .gi, .picbtn svg { width:70%; height:70% }
.picbtn:active { transform:translateY(3px); box-shadow:0 2px 0 #B9975F }
.picbtn:disabled { opacity:.55; cursor:default }
.picbtn:focus-visible { outline:4px solid #E8A62E; outline-offset:2px }
.namegrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px, 1fr)); gap:10px; width:100% }
.namegrid .btn { min-height:56px; font-size:1.05rem }
.pupilbtn { display:grid; justify-items:center; gap:6px; padding:12px 8px; border-radius:16px; background:#FFF6DF; border:2px solid #C9A86B; box-shadow:0 3px 0 #B9975F; cursor:pointer; font:800 1rem/1.15 var(--f-ui); color:#3A2A14 }
.pupilbtn .ava { width:64px; height:64px }
.pupilbtn:active { transform:translateY(2px) }

/* ---------- teacher area ---------- */
.codebox { display:grid; justify-items:end; gap:2px; text-align:right } .codebox small { font:800 .72rem/1 var(--f-ui); letter-spacing:.08em; text-transform:uppercase; color:#6B5232 }
.codebig { font:900 1.35rem/1.1 var(--f-ui); letter-spacing:.14em; color:#7A3E0E }
.scclass .chip { margin:2px 2px 0 0 }
.ugroups { display:grid; gap:14px; width:100% }
.ugroup { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px }
.ugroup legend { font:900 .8rem/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:#9A4A12; margin-bottom:8px }
.ubtn { display:grid; gap:3px; text-align:left; padding:10px 12px; border-radius:12px; background:#FFF7E4; border:2px solid #C9A86B; box-shadow:0 3px 0 #B9975F; cursor:pointer; color:#3A2A14 }
.ubtn strong { font:800 .98rem/1.2 var(--f-ui) } .ubtn small { font:600 .78rem/1.3 var(--f-ui); color:#5A3E1C } .ubtn small.helper { color:#8a7354 }
.ubtn.on { background:linear-gradient(#FFF0B8,#FFE07A); border-color:#2F8A3E; box-shadow:0 0 0 3px #2F8A3E55, 0 3px 0 #8A5A00 }
.ubtn.on strong::before { content:"✓ "; color:#2F8A3E }
.ubtn:focus-visible { outline:3px solid #E8A62E; outline-offset:2px }
/* the progress heatmap */
.hmwrap { width:100%; overflow-x:auto; border-radius:12px; border:2px solid #C9A86B; background:#FFFBEF }
.hmwrap:focus-visible { outline:3px solid #E8A62E }
table.heat { border-collapse:collapse; width:100%; font:700 .88rem/1.2 var(--f-ui); color:#3A2A14 }
table.heat th, table.heat td { padding:8px 10px; border-bottom:1px solid #E6D3A6; text-align:center; white-space:nowrap }
table.heat thead th { background:#F3E3BE; font-size:.78rem; white-space:normal; min-width:84px; vertical-align:bottom }
table.heat th[scope="row"] { text-align:left; position:sticky; left:0; background:#FFFBEF; z-index:1 }
.hm small { display:block; font-size:.7rem; font-weight:600; opacity:.75 }
.hm.good { background:#CDEFC9; color:#1E5A24 } .hm.mid { background:#FFE9A8; color:#6A4A00 } .hm.low { background:#F8C9C2; color:#7A1F17 } .hm.none { color:#6f5f45 }
.legend { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font:700 .8rem/1.4 var(--f-ui); color:#5A3E1C }
.legend .hm { padding:2px 8px; border-radius:8px }
.refs { margin:8px 0 0; padding-left:18px; font-size:.85rem; line-height:1.45; color:#3A2A14 }
/* printable login cards */
.lcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; width:100% }
.lcard { display:grid; gap:8px; padding:14px; border-radius:14px; background:#FFFBEF; border:2px dashed #9A6B32; color:#3A2A14; break-inside:avoid }
.lcard.none { opacity:.75 }
.lc-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px } .lc-top b { font:900 1.2rem/1.1 var(--f-ui) } .lc-top small { font:700 .8rem/1 var(--f-ui); color:#6B5232 }
.lc-row { display:grid; gap:3px } .lc-row small { font:700 .75rem/1.2 var(--f-ui); color:#6B5232 } .lc-row b { font:800 .95rem/1.2 var(--f-ui) }
.lc-row .pic { width:40px; height:40px }
/* on the pupil's quest card */
.lv-learn { display:flex; gap:6px; align-items:center; justify-content:center; font:700 .9rem/1.3 var(--f-ui) !important; color:#2F6A1E !important }
.lv-learn .gi { width:20px; height:20px; flex:none }

/* ---------- certificates (only shown when printing) ---------- */
#printcerts { display:none }
.cert { position:relative; display:grid; justify-items:center; gap:10px; text-align:center; padding:48px 56px; border:10px double #9A6B32; background:#FFF8E6; color:#3A2A14; min-height:90vh; box-sizing:border-box; page-break-after:always; break-after:page; font-family:var(--f-ui) }
.cert-logo { width:220px; height:auto }
.cert-k { font:900 1rem/1 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:#9A4A12; margin:0 }
.cert h2 { font-family:var(--f-display); font-weight:400; font-size:3.4rem; margin:6px 0; color:#3A2A14 }
.cert p { font-size:1.2rem; line-height:1.5; max-width:34em; margin:0 }
.cert-champ { width:180px; height:180px; object-fit:contain }
.cert-sig { display:flex; justify-content:space-between; width:100%; border-top:2px solid #C9A86B; padding-top:10px; font-size:1rem !important }

@media print {
  html, body { background:#fff !important } body::before { display:none !important }
  header, nav, footer, .bs-nav, .tabbar, .ptabs, .chips, .noprint, .toast, .demo-banner, #fx, .lv-map, .lv-hud, #lvlayer, .intro, .btns { display:none !important }
  .panel { border:0 !important; border-image:none !important; filter:none !important; box-shadow:none !important }
  .lcard { border-color:#000 } .hmwrap { overflow:visible; border-color:#999 }
  html.printing-certs #app, html.printing-certs .sky { display:none !important }
  html.printing-certs #printcerts { display:block }
}
.row.wraprow { flex-wrap:wrap; gap:10px } .row.wraprow > .grow { min-width:min(100%, 220px) }
html.med .panel .textlink { color:#7A3E0E !important; text-shadow:none !important }

/* ---------- reporting a question ---------- */
.qreport { display:block; margin:10px auto 0; font-size:.9rem }
.qreport-box { display:grid; justify-items:center; gap:8px; margin-top:12px; padding:12px; border-radius:14px; background:#FFF7E4; border:2px dashed #C9A86B; color:#3A2A14 }
.qreport-box p { margin:0 }

/* ---------- admin page and the school lead ---------- */
.adnav { margin:4px 0 6px }
.metrics.adm .metric strong { font-size:1.5rem }
.adstats { display:flex; flex-wrap:wrap; gap:6px 16px; margin:6px 0 4px; font:700 .9rem/1.3 var(--f-ui); color:#5A3E1C }
.adstats b { color:#3A2A14; font-size:1.05rem }
.adschool h3 { margin:14px 0 6px }
.adschool.paused { filter:saturate(.6) }
.admsg { white-space:pre-wrap; font:600 .9rem/1.5 var(--f-ui); background:#FFFBEF; border:2px dashed #C9A86B; border-radius:12px; padding:12px; color:#3A2A14; margin:8px 0 }
.adok h2 .ico, .adok h2 svg { color:#2F8A3E }
.adnote { margin:4px 0 0; font-size:.9rem; color:#5A3E1C; font-style:italic }
.addanger { width:100%; margin-top:6px } .addanger summary { color:var(--bad, #C3313A); font-weight:800; cursor:pointer }
.addanger form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px } .addanger p { width:100%; margin:0 }
.adacc { flex-wrap:wrap } .adq { align-items:flex-start }
.invite .codebig { font-size:1.1rem }
.adbar { display:flex; align-items:center; gap:8px; min-width:120px } .adbar i { display:block; height:10px; min-width:2px; border-radius:6px; background:#E8A62E }
.adbar b { font-size:.85rem; white-space:nowrap }
table.adweeks td { text-align:left }