/* KidSmart Grade 4 Pilot — Volume 1 styles. Brand: Nunito body, Arima display,
   warm cream/ivory, Deep Navy #0D0078. Matte, nonreflective. */
:root{
  --navy:#0D0078; --ink:#1c2a4a; --cream:#FFFAF2; --ivory:#FFFBF3;
  --panel:#FFF6E5; --line:#E7DAC4; --accent:#0167F5; --good:#1a7f37;
  --radius:18px; --fs:1;
}
*{box-sizing:border-box}
html{font-size:calc(16px * var(--fs))}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:"Nunito",system-ui,sans-serif;line-height:1.55}
h1,h2,h3,.arima{font-family:"Arima",serif;color:var(--navy);line-height:1.2}
a{color:var(--accent)}
.wrap{max-width:880px;margin:0 auto;padding:0 20px 80px}
/* chrome */
.topbar{display:flex;align-items:center;gap:14px;background:var(--ivory);
  border-bottom:2px solid var(--line);padding:10px 20px;position:sticky;top:0;z-index:20}
.topbar img{height:44px}
.topbar .ptitle{font-family:"Arima",serif;font-weight:700;color:var(--navy);font-size:1.15rem}
.topbar .spacer{flex:1}
/* accessibility toolbar */
.a11y{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.a11y button{border:2px solid var(--navy);background:#fff;color:var(--navy);
  border-radius:999px;padding:6px 12px;font-weight:800;cursor:pointer;font-size:.85rem}
.a11y button[aria-pressed="true"]{background:var(--navy);color:#fff}
body.hc{--cream:#fff;--ivory:#fff;--panel:#fff;--ink:#000;--navy:#000;--line:#000}
body.hc .card,body.hc .say,body.hc .organizer{border-width:3px}
/* hero / cards */
.hero{background:var(--ivory);border:2px solid var(--line);border-radius:24px;
  padding:28px;margin:24px 0}
.daycards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.daycard{background:var(--ivory);border:2px solid var(--line);border-radius:var(--radius);
  padding:18px;display:block;text-decoration:none;color:inherit}
.daycard:hover{border-color:var(--navy)}
.daycard .dn{font-weight:900;color:var(--navy);font-size:.8rem;letter-spacing:.06em}
.daycard h3{margin:.3em 0}
.status{font-size:.85rem;font-weight:800}
.status.done{color:var(--good)}
.xpbar{height:12px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:8px}
.xpbar>i{display:block;height:100%;background:var(--accent);width:0}
/* lesson player */
.progress{display:flex;gap:6px;margin:18px 0;flex-wrap:wrap}
.progress .dot{width:34px;height:34px;border-radius:50%;border:2px solid var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem;
  background:#fff;color:var(--navy)}
.progress .dot.done{background:var(--navy);color:#fff}
.progress .dot.now{outline:3px solid var(--accent);outline-offset:2px}
.stepnav{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn{border:none;border-radius:999px;padding:12px 26px;font-weight:900;font-size:1rem;
  cursor:pointer;background:var(--navy);color:#fff;font-family:inherit}
.btn.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn:disabled{opacity:.45;cursor:default}
.btn.big{font-size:1.2rem;padding:16px 40px}
/* dialogue */
.say{display:flex;gap:14px;background:var(--ivory);border:2px solid var(--line);
  border-radius:var(--radius);padding:14px;margin:12px 0;align-items:flex-start}
.say img.cface{width:84px;height:84px;object-fit:contain;flex:none;
  background:#fff;border-radius:16px;border:2px solid var(--line)}
.hostemblem{width:84px;height:84px;flex:none;border-radius:50%;border:3px dashed var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--navy);
  background:var(--panel);font-size:1.05rem;text-align:center;line-height:1.1}
.say .who{font-weight:900;color:var(--navy)}
.say .speak{margin-left:auto;flex:none;border:2px solid var(--navy);background:#fff;
  border-radius:999px;padding:4px 12px;font-weight:800;cursor:pointer;font-size:.8rem;color:var(--navy)}
.card{background:var(--ivory);border:2px solid var(--line);border-radius:var(--radius);padding:18px;margin:14px 0}
.goalcard{border-left:8px solid var(--accent)}
.chip{display:inline-block;background:var(--panel);border:2px solid var(--line);
  border-radius:999px;padding:2px 12px;font-size:.8rem;font-weight:800;margin:2px 4px 2px 0;color:var(--navy)}
.strategy{background:#E8F1FE;border:2px dashed var(--accent);border-radius:12px;
  padding:10px 14px;margin:10px 0;font-weight:700}
/* inputs */
textarea,input[type=text]{width:100%;font:inherit;padding:10px 12px;border:2px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink);margin:6px 0}
textarea{min-height:96px;resize:vertical}
label.f{display:block;font-weight:800;margin-top:10px;color:var(--navy)}
.choices{display:grid;gap:10px;margin:12px 0}
.choice{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid var(--line);
  border-radius:12px;padding:12px;cursor:pointer}
.choice:hover{border-color:var(--navy)}
.choice input{margin-top:4px;transform:scale(1.3)}
.feedback{border-radius:12px;padding:12px 16px;margin:12px 0;font-weight:700}
.feedback.ok{background:#e6f4ea;border:2px solid var(--good)}
.feedback.no{background:#fdecea;border:2px solid #b3261e}
/* organizer tables */
table.organizer{width:100%;border-collapse:collapse;background:#fff;margin:12px 0}
table.organizer th,table.organizer td{border:2px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
table.organizer th{background:var(--panel);color:var(--navy)}
/* vocab */
.vocabgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.vcard{background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px}
.vcard .vw{font-weight:900;color:var(--navy);font-size:1.05rem}
/* bugs */
.bugsbar{margin:14px 0}
.bugspanel{background:#FFF3E0;border:2px dashed #b26a00;border-radius:var(--radius);padding:14px;margin:10px 0}
/* evidence / close */
.evrow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.badge{display:inline-block;background:var(--navy);color:#fff;border-radius:999px;
  padding:8px 20px;font-weight:900;margin:6px 4px}
/* offline */
.offline{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:20px;margin:16px 0}
/* printable */
@media print{
  .topbar,.a11y,.stepnav,.progress,.noprint{display:none!important}
  body{background:#fff}
  .card,.say{break-inside:avoid}
  .pagebreak{break-before:page}
}
.cut{border:2px dashed var(--navy);border-radius:8px}
.logline{border-bottom:2px solid var(--line);min-height:34px;margin:6px 0}
/* reduced motion */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.rm *{animation:none!important;transition:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skiplink{position:absolute;left:-9999px}
.skiplink:focus{left:8px;top:8px;background:#fff;padding:8px 14px;z-index:99;border:2px solid var(--navy);border-radius:8px}