:root{
  --paper:#FDFBF7;
  --card:#FFFFFF;
  --ink:#223047;
  --ink-soft:#5A6779;
  --line:#EAE3D6;
  --rule:#C9DCEF;
  --margin-red:#E86A5E;
  --maths:#14957F;
  --english:#3B6FD4;
  --afrikaans:#E8791D;
  --oral:#7A56D6;
  --gold:#F2B21B;
  --ok:#2E9E63;
  --amber:#E8912D;
  --maths-t:#E3F3F0;
  --english-t:#E7EEFB;
  --afrikaans-t:#FCEEDF;
  --oral-t:#EFEAFB;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Atkinson Hyperlegible',sans-serif;
  font-size:16px;line-height:1.55;
  padding-bottom:90px;
}
h1,h2,h3{font-family:'Baloo 2',sans-serif;line-height:1.15}
button{font-family:inherit}
a{color:var(--english)}

.crayons{
  height:8px;
  background:linear-gradient(90deg,
    var(--maths) 0 25%,var(--english) 25% 50%,
    var(--afrikaans) 50% 75%,var(--oral) 75% 100%);
}
.wrap{max-width:720px;margin:0 auto;padding:0 16px}

.topbar{display:flex;align-items:center;justify-content:flex-end;padding-top:12px}
.lang-switch{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.lang-switch button{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;
  background:transparent;color:var(--ink-soft);border:0;padding:5px 12px;cursor:pointer;
}
.lang-switch button.active{background:var(--ink);color:#fff}

header.site{padding:6px 0 4px}
header.site h1{font-size:clamp(1.9rem,6vw,2.5rem);font-weight:800}
header.site .sub{color:var(--ink-soft);font-size:15px;margin-top:2px}
.badge-term{
  display:inline-block;margin-top:10px;
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:13px;
  background:var(--card);border:1.5px solid var(--line);
  border-radius:999px;padding:4px 12px;color:var(--ink-soft);
}

.card{
  background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:18px;margin-top:16px;
}
.section-label{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--ink-soft);
}
h2.week-title{font-size:1.45rem;font-weight:700;margin-top:2px}

/* exercise-book note */
.jotter{
  margin-top:12px;border:1.5px solid var(--rule);
  border-radius:12px;overflow:hidden;
  background:
    linear-gradient(90deg,transparent 0 38px,var(--margin-red) 38px 40px,transparent 40px),
    repeating-linear-gradient(#fff 0 27px,var(--rule) 27px 28px);
  padding:14px 16px 14px 52px;
}
.jotter p{line-height:28px;font-size:15.5px;white-space:pre-line}
.jotter .signoff{font-weight:700;line-height:28px}
.note-subj{font-family:'Baloo 2',sans-serif;font-weight:700}
.note-subj.Maths{color:var(--maths)}
.note-subj.English{color:var(--english)}
.note-subj.Afrikaans{color:var(--afrikaans)}
.note-subj.Oral{color:var(--oral)}

/* chips */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:13.5px;
  border-radius:999px;padding:6px 13px;cursor:pointer;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink-soft);
}
.chip.active{color:#fff;border-color:transparent}
.chip.active[data-f="all"]{background:var(--ink)}
.chip.active[data-f="Maths"]{background:var(--maths)}
.chip.active[data-f="English"]{background:var(--english)}
.chip.active[data-f="Afrikaans"]{background:var(--afrikaans)}
.chip.active[data-f="Oral"]{background:var(--oral)}

/* worksheet rows */
.rows{margin-top:6px}
.row{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px 2px;border-top:1.5px dashed var(--line);
}
.rows .row:first-child{border-top:0}
.subj{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:11.5px;
  border-radius:8px;padding:5px 8px;min-width:74px;text-align:center;flex-shrink:0;
}
.subj.Maths{background:var(--maths-t);color:var(--maths)}
.subj.English{background:var(--english-t);color:var(--english)}
.subj.Afrikaans{background:var(--afrikaans-t);color:var(--afrikaans)}
.subj.Oral{background:var(--oral-t);color:var(--oral)}
.row .t{font-weight:700;font-size:15px;overflow-wrap:anywhere}
.row .m{font-size:12.5px;color:var(--ink-soft)}
.tag{
  display:inline-block;margin-left:6px;font-size:11px;font-weight:700;
  color:var(--margin-red);background:#FBE9E7;border-radius:6px;padding:1px 6px;
  vertical-align:1px;
}
.btn-dl{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13.5px;
  background:var(--card);color:var(--ink);border:2px solid var(--ink);
  border-radius:999px;padding:6px 13px;cursor:pointer;white-space:nowrap;
}
.btn-dl:hover{background:var(--ink);color:#fff}
.btn-dl[disabled]{opacity:.5;cursor:wait}

/* accordions */
details.week{
  background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--radius);margin-top:12px;overflow:hidden;
}
details.week summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 18px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16.5px;
}
details.week summary::-webkit-details-marker{display:none}
details.week summary .count{
  margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-soft);
  background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:2px 10px;
  white-space:nowrap;
}
details.week summary .chev{transition:transform .2s;color:var(--ink-soft);font-size:13px}
details.week[open] summary .chev{transform:rotate(90deg)}
details.week .rows{padding:0 18px 14px}
@media (prefers-reduced-motion:reduce){details.week summary .chev{transition:none}}

/* private page */
.stu-head{display:flex;align-items:center;gap:14px;margin-top:4px}
.avatar{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:var(--oral-t);color:var(--oral);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:24px;
  display:flex;align-items:center;justify-content:center;
  border:2.5px solid var(--oral);
}
.stu-head h1{font-size:clamp(1.7rem,6vw,2.2rem);font-weight:800}
.stu-head .sub{color:var(--ink-soft);font-size:14.5px}
.private-flag{
  display:inline-block;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:11.5px;
  background:var(--oral);color:#fff;border-radius:999px;padding:2px 10px;margin-left:8px;
  vertical-align:3px;letter-spacing:.04em;
}
.oral-card{border-left:5px solid var(--oral)}
.focus{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.focus .f{
  display:flex;align-items:center;gap:7px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:13.5px;font-weight:700;
}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dot.improving{background:var(--amber)}
.dot.new{background:var(--english)}
.star{color:var(--gold);font-size:14px}
.legend{font-size:12.5px;color:var(--ink-soft);margin-top:10px}

/* gate */
.gate{max-width:440px;margin:8vh auto 0;padding:0 16px}
.gate .card{padding:26px 22px;text-align:center}
.gate h1{font-size:clamp(1.8rem,7vw,2.3rem);font-weight:800}
.gate .sub{color:var(--ink-soft);margin-top:2px}
.gate .hint{font-size:13.5px;color:var(--ink-soft);margin-top:10px}
.code-input{
  width:100%;margin-top:18px;
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:22px;text-align:center;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:var(--paper);border:2px solid var(--line);border-radius:14px;padding:13px 12px;
}
.code-input:focus{outline:none;border-color:var(--english)}
.gate-err{color:var(--margin-red);font-weight:700;font-size:14px;margin-top:10px;display:none}
.gate-err.show{display:block}

.btn{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:15.5px;
  border-radius:12px;padding:11px 20px;cursor:pointer;border:2px solid var(--ink);
}
.btn.primary{background:var(--ink);color:#fff}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.small{font-size:13.5px;padding:7px 14px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:wait}
.btn.block{width:100%;margin-top:14px}
.btn.danger{border-color:var(--margin-red);color:var(--margin-red);background:var(--card)}

.foot{
  text-align:center;margin-top:22px;font-size:13.5px;color:var(--ink-soft);
}
.foot a{color:var(--ink-soft)}

/* forms (admin) */
.drop{
  border:2.5px dashed var(--rule);border-radius:14px;background:var(--paper);
  padding:22px 16px;text-align:center;color:var(--ink-soft);margin-top:12px;cursor:pointer;
  font-size:15px;
}
.drop b{color:var(--ink)}
.drop.hasfile{border-color:var(--ok);color:var(--ink)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.field select,.field input[type=text],.field input[type=number],.field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;
}
.field textarea{min-height:96px;resize:vertical}
.field.full{grid-column:1 / -1}
.pubrow{display:flex;align-items:center;gap:10px;margin-top:14px}
.pubrow .lab{font-weight:700;font-size:15px}
.pubrow .hint{font-size:12.5px;color:var(--ink-soft)}
.actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

.switch{position:relative;width:46px;height:26px;flex-shrink:0;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#CBD2DC;border-radius:999px;cursor:pointer;transition:.2s}
.slider::before{
  content:"";position:absolute;width:20px;height:20px;border-radius:50%;
  background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.mini-switch{transform:scale(.82)}
@media (prefers-reduced-motion:reduce){.slider,.slider::before{transition:none}}

.uploads .row{grid-template-columns:auto 1fr auto auto auto}
.status{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12px;
  border-radius:8px;padding:4px 10px;text-align:center;min-width:66px;
}
.status.live{background:#E4F4EA;color:var(--ok)}
.status.draft{background:#F1EFEA;color:var(--ink-soft)}
.icon-btn{
  background:var(--card);border:1.5px solid var(--line);border-radius:9px;
  font-size:13px;font-weight:700;color:var(--ink-soft);padding:5px 9px;cursor:pointer;
}
.icon-btn:hover{border-color:var(--ink);color:var(--ink)}
.icon-btn.danger:hover{border-color:var(--margin-red);color:var(--margin-red)}

.ws-row{border-top:1.5px dashed var(--line);padding:14px 0}
.ws-rows .ws-row:first-child{border-top:0}
.ws-grid{display:grid;grid-template-columns:1fr 130px;gap:8px}
.ws-grid .field.full{grid-column:1 / -1}
.ws-meta{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.ws-type{
  font-family:'Baloo 2',sans-serif;font-weight:700;font-size:11.5px;
  border-radius:8px;padding:4px 9px;
}
.ws-type.class{background:var(--english-t);color:var(--english)}
.ws-type.private{background:var(--oral-t);color:var(--oral)}

.focus-edit-row{display:grid;grid-template-columns:1fr 130px auto;gap:8px;margin-top:8px;align-items:center}

.muted{color:var(--ink-soft);font-size:13.5px}
.spacer{flex:1}
.admin-note{font-size:13px;color:var(--ink-soft);margin-top:10px}
hr.soft{border:0;border-top:1.5px dashed var(--line);margin:16px 0}

#toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;font-weight:700;font-size:14px;
  border-radius:999px;padding:10px 20px;opacity:0;pointer-events:none;
  transition:.25s;z-index:60;max-width:90vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%)}

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;
}

@media (max-width:520px){
  .row{grid-template-columns:auto 1fr;row-gap:6px}
  .row .btn-dl{grid-column:2;justify-self:start}
  .uploads .row{grid-template-columns:auto 1fr;row-gap:8px}
  .uploads .row .status,.uploads .row .icon-btn,.uploads .row .switch{grid-column:2;justify-self:start}
  .uploads .row .rowtools{grid-column:2;display:flex;gap:8px;align-items:center}
  .form-grid{grid-template-columns:1fr}
  .ws-grid{grid-template-columns:1fr}
  .focus-edit-row{grid-template-columns:1fr}
}