/* Art of Smart tokens, kept identical to Exam Insights so the two tools read as one product. */
:root{
  --green:#12A845; --green-dark:#0d7c33; --coral:#FF7D5E;
  --paper:#f6f8f6; --panel:#ffffff; --panel2:#eef1ee; --line:#e6e8e6;
  --ink:#262626; --muted:#656565;
  --red:#e0483d; --amber:#e8a81c;
  --round:'Avenir','ui-rounded','SF Pro Rounded','Quicksand','Segoe UI',Nunito,system-ui,-apple-system,sans-serif;
  --sans:'Avenir',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px 80px}
h1,h2,h3{font-family:var(--round);letter-spacing:-.015em;margin:0}
h1{font-size:clamp(26px,4vw,40px);line-height:1.08}
h2{font-size:21px}
h3{font-size:16px}
a{color:var(--green)}

.bar{background:var(--panel);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:14px;padding:14px 20px;justify-content:space-between}
.brand{font-family:var(--round);font-weight:800;font-size:17px;display:flex;align-items:center;gap:11px}
.brand-logo{display:block;width:126px;height:38px;object-fit:contain;object-position:left center}
.brand-separator{width:1px;height:22px;background:var(--line);display:inline-block}

.hero{padding:36px 0 8px}
.lead{color:var(--muted);font-size:16px;max-width:62ch;margin:8px 0 0}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:16px 0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}

label{display:block;font-family:var(--round);font-weight:800;font-size:13px;margin:14px 0 5px}
input,select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:var(--sans);font-size:15px;background:var(--panel)}
input:focus,select:focus{outline:none;border-color:var(--green)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;
  border:none;border-radius:24px;padding:13px 22px;font-family:var(--round);font-weight:800;font-size:15px;cursor:pointer}
.btn:hover{background:var(--green-dark)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost{background:none;color:var(--green);border:1px solid var(--green)}
.btn.ghost:hover{background:var(--green);color:#fff}

.code{font-family:var(--round);font-weight:800;font-size:clamp(38px,9vw,64px);letter-spacing:.14em;
  color:var(--green);background:var(--panel2);border-radius:14px;padding:16px 10px;text-align:center;margin:10px 0}
.muted{color:var(--muted)}
.small{font-size:13px}

/* rating rows */
.rate-topic{font-family:var(--round);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:22px 0 6px;padding-top:14px;border-top:1px solid var(--line)}
.rate-sub{font-family:var(--round);font-weight:800;font-size:14px;color:var(--ink);margin:12px 0 4px}
.rrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.rrow .lbl{flex:1;min-width:0;font-size:14.5px}
.rrow .mk{color:var(--muted);font-size:12px;white-space:nowrap}
.dots{display:flex;gap:6px;flex:0 0 auto}
.dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--panel);cursor:pointer;padding:0}
.dot.r.on{background:var(--red);border-color:var(--red)}
.dot.y.on{background:var(--amber);border-color:var(--amber)}
.dot.g.on{background:var(--green);border-color:var(--green)}
.dot:hover{border-color:var(--muted)}

.progress{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);
  padding:12px 20px;display:flex;align-items:center;gap:14px;justify-content:space-between}
.pmeter{flex:1;height:8px;background:var(--panel2);border-radius:6px;overflow:hidden}
.pmeter i{display:block;height:100%;background:var(--green);width:0;transition:width .2s}

/* teacher plan */
.stat{display:flex;gap:26px;flex-wrap:wrap;margin:6px 0 0}
.stat div{min-width:96px}
.stat .n{font-family:var(--round);font-weight:800;font-size:26px;line-height:1}
.stat .t{color:var(--muted);font-size:12.5px}

.week{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin:14px 0;overflow:hidden}
.week-h{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--panel2);flex-wrap:wrap}
.week-n{font-family:var(--round);font-weight:800;font-size:13px;background:var(--green);color:#fff;
  border-radius:20px;padding:5px 12px}
.week-t{font-family:var(--round);font-weight:800;font-size:16px;flex:1;min-width:0}
.week-m{color:var(--muted);font-size:12.5px}
.week-b{padding:6px 18px 14px}

.pitem{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.pitem:first-child{border-top:none}
.chk{flex:0 0 auto;width:22px;height:22px;border:2px solid var(--line);border-radius:6px;background:var(--panel);
  cursor:pointer;padding:0;margin-top:2px}
.chk.on{background:var(--green);border-color:var(--green)}
.pbody{flex:1;min-width:0}
.pname{font-family:var(--round);font-weight:800;font-size:14.5px}
.pmeta{color:var(--muted);font-size:12.5px;margin-top:2px}
.pill{display:inline-block;font-family:var(--round);font-weight:800;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;padding:2px 8px;border-radius:20px;margin-right:6px}
.pill.red{background:#fdeceb;color:#a3302a}
.pill.amb{background:#fdf3dc;color:#8a6410}
.pill.mk{background:var(--panel2);color:var(--muted)}
.done{opacity:.45}
.done .pname{text-decoration:line-through}

.roster{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{background:var(--panel2);border-radius:20px;padding:6px 13px;font-family:var(--round);font-weight:700;font-size:13px}

.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.err{background:#fdeceb;border:1px solid #f2b8b4;color:#a3302a;border-radius:10px;padding:11px 14px;margin:12px 0;font-size:14px}
.hide{display:none!important}
@media print{.bar,.progress,.noprint{display:none!important}.week{break-inside:avoid}}

/* ---------------- resume / prominent code entry ---------------- */
.resume{border:2px solid var(--green);background:var(--panel)}
.resume-row{display:flex;gap:12px;align-items:stretch;margin-top:12px;flex-wrap:wrap}
.bigcode{flex:1;min-width:200px;font-family:var(--round);font-weight:800;font-size:24px;
  letter-spacing:.18em;text-transform:uppercase;text-align:center}
.bigcode::placeholder{letter-spacing:.08em;font-size:15px;font-weight:700;color:var(--muted)}
.resume-row .btn{flex:0 0 auto}
.chip-btn{border:1px solid var(--line);cursor:pointer;font-family:var(--round)}
.chip-btn:hover{border-color:var(--green);color:var(--green)}

/* ---------------- teacher tabs ---------------- */
.tabs{display:flex;gap:8px;margin:22px 0 4px;flex-wrap:wrap}
.tab{border:1px solid var(--line);background:var(--panel);color:var(--muted);font-family:var(--round);
  font-weight:800;font-size:14px;padding:10px 18px;border-radius:22px;cursor:pointer}
.tab.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---------------- week additions ---------------- */
.week-sub{padding:8px 18px 0;color:var(--muted);font-size:12.5px}
.week-gain{font-family:var(--round);font-weight:800;font-size:13px;color:var(--green);
  background:#e7f6ec;border-radius:20px;padding:5px 12px;white-space:nowrap}
.week-gain.grey{color:var(--muted);background:var(--panel2)}
.week-n.grey{background:var(--muted)}
.week.over{opacity:.92;border-style:dashed}
.mins{font-family:var(--round);font-weight:700;font-size:11.5px;color:var(--muted);
  background:var(--panel2);border-radius:20px;padding:2px 8px;margin-left:6px}
.stat .n.gain{color:var(--green)}

/* ---------------- who needs what ---------------- */
.mapwrap{overflow-x:auto;margin-top:14px}
table.map{border-collapse:separate;border-spacing:3px;font-size:13px}
table.map th.ml{text-align:left;min-width:120px;font-weight:400;padding-right:10px;vertical-align:middle}
table.map th.ml b{font-family:var(--round);font-weight:800;font-size:13.5px;display:block;line-height:1.25}
.msub{color:var(--muted);font-size:11.5px}
.mtopic{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--muted)}
th.mh{font-family:var(--round);font-weight:800;font-size:11.5px;color:var(--muted);
  padding-bottom:6px;white-space:nowrap;vertical-align:bottom}

.nrow{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.ndot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.nbody{flex:1;min-width:0}
.nname{font-family:var(--round);font-weight:800;font-size:14.5px}
.nmeta{color:var(--muted);font-size:12.5px;margin-top:1px}
.ncount{font-family:var(--round);font-weight:800;font-size:13px;color:#a3302a;
  background:#fdeceb;border-radius:20px;padding:5px 12px;white-space:nowrap}
.nwho{font-family:var(--round);font-weight:800;font-size:13px;color:#8a6410;
  background:#fdf3dc;border-radius:20px;padding:5px 12px;text-align:right}
.card.few .ndot{opacity:.55}
.watchrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.wchip{background:var(--panel2);border-radius:20px;padding:7px 14px;font-size:13px}
.wchip b{font-family:var(--round);font-weight:800}
.wchip.hot{background:#fdeceb;color:#a3302a}

/* ---------------- lesson structure ---------------- */
.submeta{color:var(--muted);font-size:12px;margin-right:10px}
.essayblk{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.essayh{font-family:var(--round);font-weight:800;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--green);margin-bottom:4px}
.essayt{font-family:var(--round);font-weight:800;font-size:15px}
.essaym{color:var(--muted);font-size:12.5px;margin-top:2px}
.essayq{background:var(--panel2);border-radius:10px;padding:10px 13px;margin-top:9px;font-size:13.5px;line-height:1.45}
.essayq .qmeta{display:block;margin-top:5px;font-size:12px}
.plink{color:var(--green);font-weight:700;text-decoration:none}
.plink:hover{text-decoration:underline}
.subhead{font-family:var(--round);font-weight:800;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--green);margin:14px 0 2px;padding-top:10px;border-top:1px solid var(--line)}
.pitem + .pitem{border-top:1px solid var(--line)}
.subhead + .pitem{border-top:none}

/* ---------------- student's own page ---------------- */
.btn.small{padding:8px 15px;font-size:13.5px}
.flash{background:#e7f6ec;border:1px solid #b7e2c6;color:#0d7c33;border-radius:10px;
  padding:12px 15px;margin:16px 0 0;font-size:14.5px}
.movement{background:var(--panel2);border-radius:10px;padding:13px 16px;margin-bottom:16px;font-size:14.5px}
.movement.good{background:#e7f6ec;color:#0d7c33}
.drill{flex:0 0 auto;margin-top:2px;white-space:nowrap}
.permwarn{background:#fdf3dc;border:1px solid #f0d9a0;color:#7a5a0e;border-radius:10px;
  padding:12px 15px;margin:12px 0;font-size:13.5px;line-height:1.5}
/* ---------------- which booklet for this week ---------------- */
.resblk{background:var(--panel2);border-radius:10px;padding:11px 14px;margin:10px 0 4px}
.resh{font-family:var(--round);font-weight:800;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin-bottom:5px}
.res{display:block;font-size:13.5px;line-height:1.45;padding:1px 0}
.res b{font-family:var(--round);font-weight:800;color:var(--green-dark)}
.resq{font-style:normal;font-size:10.5px;color:var(--muted);background:var(--panel);
  border-radius:20px;padding:1px 7px;margin-left:5px;cursor:help}
.resgap{margin-top:7px;padding-top:7px;border-top:1px solid var(--line);
  color:#8a6410;font-size:12.5px;line-height:1.45}

.runway{background:#e7f6ec;border:1px solid #b7e2c6;color:#12692f;border-radius:10px;
  padding:11px 14px;margin:9px 0 0;font-size:13px;line-height:1.5}
.runway.gone{background:#fdf3dc;border-color:#f0d9a0;color:#7a5a0e}

.docrow{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.doc-url{flex:1;min-width:220px;padding:11px 13px;font-size:14.5px}
.docbig{font-family:var(--round);font-weight:800;font-size:16px}

/* ---------------- marking register ---------------- */
.docrow.student{padding:11px 0;margin:0;border-top:1px solid var(--line)}
.docrow.student .dname{font-family:var(--round);font-weight:800;font-size:14.5px;flex:0 0 120px}
.docrow.student.none{opacity:.6}
.rerow{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}

/* ---------------- printing one week ----------------
   The teacher prints a single lesson sheet, not the whole program. */
@media print{
  body.printing-one .hero,body.printing-one .card,body.printing-one .tabs{display:none!important}
  body.printing-one .week{display:none!important}
  body.printing-one .week.printing{display:block!important;border:none}
  body.printing-one .week.printing .week-h{background:none;padding-left:0}
}

/* ---------------- roster: dropping and restoring a student ---------------- */
.chip{display:inline-flex;align-items:center;gap:7px}
.chipx{border:none;background:none;cursor:pointer;color:var(--muted);font-size:16px;
  line-height:1;padding:0 2px;border-radius:50%}
.chipx:hover{color:var(--red)}
.chip.gone{background:none;border:1px dashed var(--line);color:var(--muted)}
.chipback{border:none;background:none;cursor:pointer;color:var(--green);
  font-family:var(--round);font-weight:800;font-size:11.5px;padding:0}
.chipback:hover{text-decoration:underline}
.removedrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line);width:100%}
.insights-link{margin-bottom:16px}

/* ---------------- locking and moving ---------------- */
.latebox{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.latebox .chip{margin:6px 6px 0 0}
.movebtns{flex:0 0 auto;display:flex;gap:4px;align-items:flex-start;margin-top:2px}
.mvb{border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;
  width:26px;height:26px;border-radius:7px;font-size:13px;line-height:1;padding:0}
.mvb:hover{border-color:var(--green);color:var(--green)}
.mvb.reset{color:var(--amber);border-color:#f0d9a0}
.movedtag{font-family:var(--round);font-weight:800;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;background:#fdf3dc;color:#8a6410;border-radius:20px;padding:2px 8px;margin-left:4px}
.overfull{color:#a3302a}
.overtag{font-family:var(--round);font-weight:800;font-size:10px;text-transform:uppercase;
  letter-spacing:.05em;background:#fdeceb;color:#a3302a;border-radius:20px;padding:2px 8px}

@media(max-width:700px){
  .brand{font-size:15px;gap:8px}
  .brand-logo{width:104px;height:32px}
  .brand-separator{height:18px}
}