/* The Driving Space
   Mobile-first. Tested against iOS Safari. */

:root{
  --green:#1E6F4C; --green-dark:#155238; --green-tint:#E8F1EC;
  --amber:#E8873B; --amber-tint:#FCF0E4;
  --red:#C0492F; --red-tint:#FBE9E5;
  --slate:#1C2B33; --slate-60:#5F6E77; --slate-40:#8D9AA1;
  --paper:#F7F5F0; --card:#FFFFFF;
  --rule:#E2DED4; --rule-strong:#CFC9BB;
  --r:12px; --tap:44px;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}

body{
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--slate);
  font-size:16px;
  line-height:1.45;
  overscroll-behavior-y:none;
}

.wrap{max-width:520px;margin:0 auto;min-height:100vh}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  padding:calc(14px + env(safe-area-inset-top)) 18px 13px;
  display:flex;align-items:center;gap:12px;min-height:58px;
}
.top-t{flex:1;min-width:0}
.top h1{font-size:1.3rem;font-weight:700;letter-spacing:-0.02em;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .sub{font-size:.78rem;color:var(--slate-40);font-weight:500;margin-top:1px}

.back{
  display:flex;align-items:center;gap:3px;flex:none;
  color:var(--green);font-weight:600;font-size:.95rem;
  text-decoration:none;padding:6px 8px 6px 0;margin-left:-4px;
}

main{padding:18px calc(18px + env(safe-area-inset-right))
     calc(32px + env(safe-area-inset-bottom))
     calc(18px + env(safe-area-inset-left))}

.eyebrow{
  font-size:.71rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate-40);margin:26px 0 10px;
}

/* ---------- auth ---------- */
.auth{max-width:360px;margin:0 auto;padding:56px 4px 40px;text-align:center}
.auth-mark{
  width:60px;height:60px;border-radius:15px;margin:0 auto 20px;
  background:var(--green);color:#fff;display:grid;place-items:center;
}
.auth h1{font-size:1.55rem;font-weight:700;letter-spacing:-0.025em}
.auth-sub{color:var(--slate-60);font-size:.94rem;margin-top:5px}

.auth-form{margin-top:28px;text-align:left}
.auth-form label{
  display:block;font-size:.79rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--slate-40);margin:16px 0 6px;
}
.auth-form input{
  width:100%;padding:13px 14px;font:inherit;font-size:1rem;
  background:var(--card);border:1px solid var(--rule-strong);
  border-radius:9px;color:var(--slate);min-height:var(--tap);
}
.auth-form input:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(30,111,76,.12);
}

.err{
  background:var(--red-tint);border:1px solid #F1CFC7;color:#7A2E1C;
  padding:11px 13px;border-radius:9px;margin-top:20px;
  font-size:.89rem;text-align:left;
}

/* ---------- buttons ---------- */
.btn{
  display:block;width:100%;padding:13px;border-radius:9px;border:0;
  background:var(--green);color:#fff;font:inherit;font-weight:600;
  font-size:.97rem;cursor:pointer;margin-top:24px;min-height:var(--tap);
}
.btn:active{background:var(--green-dark)}

.signout{margin-top:28px}
.signout button{
  width:100%;padding:12px;border:1px solid var(--rule-strong);
  background:var(--card);color:var(--slate-60);font:inherit;
  font-size:.9rem;font-weight:600;border-radius:9px;cursor:pointer;
  min-height:var(--tap);
}
.signout button:active{background:#F2EFE9}

/* ---------- class list ---------- */
.plist{
  border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;background:var(--card);
}
.prow-wrap{
  display:flex;align-items:stretch;
  border-bottom:1px solid var(--rule);
}
.prow-wrap:last-child{border-bottom:0}
.prow{
  display:flex;align-items:center;gap:12px;padding:13px 14px;
  min-height:var(--tap);text-decoration:none;color:inherit;
  flex:1;min-width:0;
}
.prow:active{background:#FAF8F4}

.copy-link{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;width:64px;border:0;border-left:1px solid var(--rule);
  background:none;color:var(--slate-40);cursor:pointer;font:inherit;
}
.copy-link:active{background:#F2EFE9}
.copy-link .cl-label{font-size:.62rem;font-weight:600;letter-spacing:.01em}
.copy-link.copied{color:var(--green)}
.copy-link.copied svg{stroke:var(--green)}

.av{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--green-tint);color:var(--green-dark);
  display:grid;place-items:center;font-weight:700;font-size:.85rem;
}
.av.warn{background:var(--amber-tint);color:#A85A1C}
.av.ready{background:var(--green);color:#fff}

.prow .b{flex:1;min-width:0}
.prow .nm{font-weight:600;font-size:.99rem;letter-spacing:-0.01em}
.prow .sm{
  font-size:.79rem;color:var(--slate-60);margin-top:2px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.prow .sm b{font-weight:700;color:var(--slate);font-variant-numeric:tabular-nums}
.prow .sm .dot{color:var(--rule-strong)}

.pbar{height:4px;background:var(--rule);border-radius:2px;margin-top:7px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--green);border-radius:2px}
.pbar i.warn{background:var(--amber)}

.prow .pc{flex:none;text-align:right;min-width:44px}
.prow .pc .n{
  font-size:1.02rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;line-height:1.1;
}
.prow .pc .n.ready{color:var(--green)}
.prow .pc .n small{font-size:.7rem}
.prow .pc .u{font-size:.68rem;color:var(--slate-40);font-weight:600;margin-top:1px}
.prow .exp{flex:none;color:var(--slate-40);font-size:1.1rem}

/* ---------- pupil stats ---------- */
.mini{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);
  border-radius:8px;overflow:hidden;margin-bottom:14px;
}
.mini .c{background:var(--card);padding:11px 7px;text-align:center}
.mini .v{
  font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;line-height:1.2;
}
.mini .v.low{color:var(--amber)}
.mini .v.neg{color:var(--red)}
.mini .k{
  font-size:.64rem;font-weight:600;color:var(--slate-40);
  text-transform:uppercase;letter-spacing:.05em;margin-top:2px;
}

/* ---------- test banner ---------- */
.testban{
  display:flex;align-items:center;gap:13px;
  background:var(--card);border:1px solid var(--rule);
  border-left:3px solid var(--red);border-radius:var(--r);
  padding:14px;margin-bottom:6px;
}
.testban .cd{
  flex:none;text-align:center;background:var(--red-tint);
  border-radius:8px;padding:7px 9px;min-width:52px;
}
.testban .cd .n{
  font-size:1.25rem;font-weight:700;color:var(--red);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
}
.testban .cd .u{
  font-size:.62rem;font-weight:700;color:var(--red);opacity:.75;
  text-transform:uppercase;letter-spacing:.06em;margin-top:2px;
}
.testban .b{flex:1;min-width:0}
.testban .k{
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate-40);margin-bottom:2px;
}
.testban .nm{font-weight:700;font-size:1.02rem;letter-spacing:-0.01em}
.testban .dt{font-size:.81rem;color:var(--slate-60);margin-top:1px;line-height:1.35}

/* ---------- THE MARK GRID ---------- */
.cat{
  font-size:.71rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-40);margin:20px 0 7px;
  padding-bottom:5px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;
}
.cat::-webkit-details-marker{display:none}
.cat::marker{content:""}
.cat-name{flex:1}
.cat-count{
  font-size:.72rem;font-weight:700;letter-spacing:0;color:var(--slate-60);
  background:var(--green-tint);padding:2px 7px;border-radius:20px;
}
.cat-caret{display:grid;place-items:center;transition:transform .2s ease;color:var(--slate-40)}
.cat-block[open] > .cat .cat-caret{transform:rotate(180deg)}
.cat-block:first-of-type .cat{margin-top:8px}
.mrow{
  display:flex;align-items:center;gap:10px;padding:7px 0;
  transition:background .2s;border-radius:5px;
}
.mrow .lb{flex:1;font-size:.89rem;line-height:1.25;min-width:0}
.mrow.zero .lb{color:var(--slate-40)}

/* the save-failed flash */
.mrow.failed{background:var(--red-tint);box-shadow:0 0 0 6px var(--red-tint)}
.mrow.failed .lb::after{
  content:' — not saved';color:var(--red);font-weight:600;font-size:.8rem;
}

.grid5{display:flex;gap:3px;flex:none}
.mk{
  position:relative;
  width:24px;height:24px;border-radius:4px;padding:0;
  border:1.5px solid var(--rule-strong);background:var(--card);
  cursor:pointer;transition:transform .1s;
  display:grid;place-items:center;
  font:inherit;line-height:1;
}
/* the level number inside each square */
.mk-n{
  font-size:.7rem;font-weight:700;color:var(--slate-40);
  pointer-events:none;
}
/* tick replaces the number once level 5 is achieved */
.mk-tick{width:14px;height:14px;display:none;color:#fff;pointer-events:none}
.mk.f.p5 .mk-n{display:none}
.mk.f.p5 .mk-tick{display:block}

/* Filled squares deepen with the level: 1 lightest, 5 darkest. The shade
   carries the meaning, the number confirms it. Same ramp as the homepage. */
.mk.f[data-n="1"]{background:#D6E7DE;border-color:#C4DCD1}
.mk.f[data-n="2"]{background:#AECFBF;border-color:#9DC4B2}
.mk.f[data-n="3"]{background:#7FB49B;border-color:#6FA98D}
.mk.f[data-n="4"]{background:#4E9678;border-color:#448A6D}
.mk.f[data-n="5"]{background:var(--green);border-color:var(--green)}

/* Digits need to flip from dark to light as the background deepens. */
.mk.f[data-n="1"] .mk-n,
.mk.f[data-n="2"] .mk-n{color:#2C5F49}
.mk.f[data-n="3"] .mk-n{color:#F2F7F4}
.mk.f[data-n="4"] .mk-n,
.mk.f[data-n="5"] .mk-n{color:#fff}

.mk.f.p5{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65)}
.mk:active{transform:scale(.88)}

/* Fingers are not 19px wide. Extend the hit area without moving the
   visual square. Vertical padding is generous because the rows are
   close together and a miss marks the wrong topic. */
.mk::before{
  content:'';
  position:absolute;
  top:-11px; bottom:-11px; left:-3px; right:-3px;
}

.legend{
  display:flex;justify-content:space-between;
  font-size:.68rem;color:var(--slate-40);font-weight:600;
  margin-top:14px;padding-top:10px;border-top:1px solid var(--rule);
}

/* ---------- ledger ---------- */
.led{
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;
}
.lrow{
  display:flex;align-items:center;gap:11px;padding:11px 13px;
  border-bottom:1px solid var(--rule);
}
.lrow:last-child{border-bottom:0}
.lrow .ic{
  flex:none;width:24px;height:24px;border-radius:5px;
  display:grid;place-items:center;font-size:.72rem;font-weight:700;
}
.lrow.in .ic{background:var(--green-tint);color:var(--green-dark)}
.lrow.out .ic{background:#F0EDE7;color:var(--slate-60)}
.lrow .b{flex:1;min-width:0}
.lrow .nm{font-size:.9rem;font-weight:500}
.lrow .sm{font-size:.75rem;color:var(--slate-40);margin-top:1px}
.lrow .amt{flex:none;text-align:right;font-variant-numeric:tabular-nums}
.lrow .h{font-size:.9rem;font-weight:700}
.lrow.in .h{color:var(--green-dark)}
.lrow.out .h{color:var(--slate-60)}
.lrow .p{font-size:.75rem;color:var(--slate-40);margin-top:1px}

/* ---------- empty ---------- */
.empty{text-align:center;padding:34px 20px;color:var(--slate-40)}
.empty .h{font-weight:600;color:var(--slate-60);font-size:.95rem}
.empty .p{font-size:.85rem;margin-top:4px}

/* ---------- forms ---------- */
.stack{display:block}
.field{margin-bottom:18px}
.field label{
  display:block;font-size:.79rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--slate-40);margin-bottom:6px;
}
.field label .opt{
  font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--rule-strong);font-size:.82rem;margin-left:2px;
}
.field input{
  width:100%;padding:13px 14px;font:inherit;font-size:1rem;
  background:var(--card);border:1px solid var(--rule-strong);
  border-radius:9px;color:var(--slate);min-height:var(--tap);
}
.field input:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(30,111,76,.12);
}
.field input.bad{border-color:var(--red)}
.field input.bad:focus{box-shadow:0 0 0 3px rgba(192,73,47,.12)}

.field .hint{
  display:block;font-size:.8rem;color:var(--slate-40);
  margin-top:6px;line-height:1.4;
}
.field .fe{
  display:block;font-size:.82rem;color:var(--red);font-weight:600;
  margin-top:6px;
}

/* £ prefix on the rate field */
.prefix{
  display:flex;align-items:stretch;
  border:1px solid var(--rule-strong);border-radius:9px;overflow:hidden;
  background:var(--card);
}
.prefix:focus-within{
  border-color:var(--green);box-shadow:0 0 0 3px rgba(30,111,76,.12);
}
.prefix span{
  display:grid;place-items:center;padding:0 4px 0 14px;
  color:var(--slate-60);font-weight:600;background:var(--card);
}
.prefix input{
  border:0;border-radius:0;flex:1;padding-left:4px;
}
.prefix input:focus{box-shadow:none}

/* add-pupil button on the class list */
.add-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:14px;
}

/* ---------- topic page ---------- */
.topic-grade{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:14px;margin-bottom:16px;
}
.tg-squares{display:flex;gap:4px;flex:none}
.tg-sq{
  width:22px;height:22px;border-radius:4px;
  border:1.5px solid var(--rule-strong);background:var(--card);
}
.tg-sq.f{background:var(--green);border-color:var(--green)}
.tg-sq.f.p5{box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px var(--green)}
.tg-txt{font-size:.92rem;color:var(--slate-60)}
.tg-txt b{color:var(--slate);font-weight:700}

.topic-summary{
  font-size:1.05rem;line-height:1.5;color:var(--slate);
  font-weight:500;margin-bottom:4px;
}
.topic-body{font-size:.96rem;line-height:1.6;color:var(--slate)}
.topic-good{
  font-size:.94rem;line-height:1.55;color:var(--slate);
  background:var(--green-tint);border:1px solid #CFE3D8;
  border-radius:var(--r);padding:13px 15px;
}

.topic-video{
  display:flex;align-items:center;gap:13px;text-decoration:none;
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:14px;color:inherit;
}
.topic-video:active{background:#FAF8F4}
.tv-play{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--red);color:#fff;display:grid;place-items:center;
}
.tv-txt{flex:1;min-width:0}
.tv-t{display:block;font-weight:600;font-size:.96rem}
.tv-s{display:block;font-size:.78rem;color:var(--slate-40);margin-top:1px}
.tv-arrow{color:var(--slate-40);font-size:1.2rem;flex:none}
.topic-novideo{
  font-size:.88rem;color:var(--slate-40);font-style:italic;
  padding:13px 15px;background:var(--card);
  border:1px dashed var(--rule-strong);border-radius:var(--r);
}

/* achievement ladder */
.ladder{
  border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;background:var(--card);
}
.lad-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-bottom:1px solid var(--rule);
}
.lad-row:last-child{border-bottom:0}
.lad-row.todo{background:#FBFAF7}
.lad-dot{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:.85rem;font-weight:700;
  background:var(--green);color:#fff;
}
.lad-row.todo .lad-dot{
  background:var(--card);border:1.5px dashed var(--rule-strong);
}
.lad-b{flex:1;min-width:0;display:flex;align-items:baseline;
  justify-content:space-between;gap:10px}
.lad-name{font-size:.94rem;font-weight:600}
.lad-row.todo .lad-name{color:var(--slate-40);font-weight:500}
.lad-date{font-size:.8rem;color:var(--slate-40);flex:none;
  font-variant-numeric:tabular-nums}
.lad-row.done .lad-date{color:var(--green-dark);font-weight:600}

/* make the topic label in the mark grid tappable */
.mrow .lb a{color:inherit;text-decoration:none;
  border-bottom:1px solid var(--rule-strong)}
.mrow .lb a:active{color:var(--green)}

/* ---------- pupil portal ---------- */
body.portal{background:#F4F7F9}

.phero{
  background:var(--green);color:#fff;
  padding:calc(26px + env(safe-area-inset-top)) 18px 24px;
}
.phero-in{max-width:520px;margin:0 auto}
.phero-hi{font-size:.92rem;opacity:.8;font-weight:500}
.phero h1{font-size:1.65rem;font-weight:700;letter-spacing:-0.025em;margin-top:2px}

.phero-ring{
  display:flex;align-items:center;gap:16px;margin-top:20px;
  background:rgba(255,255,255,.12);border-radius:var(--r);padding:15px;
}
.pr-big{flex:none;text-align:center}
.pr-n{font-size:2.1rem;font-weight:700;letter-spacing:-0.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.pr-l{font-size:.76rem;opacity:.82;margin-top:4px;line-height:1.2}
.pr-bar-wrap{flex:1;min-width:0}
.pr-sub{font-size:.82rem;opacity:.85;line-height:1.35;margin-bottom:9px}
.pr-bar{height:6px;background:rgba(255,255,255,.22);border-radius:3px;overflow:hidden}
.pr-bar i{display:block;height:100%;background:#fff;border-radius:3px}

body.portal main{padding:18px}

.pcard{
  background:var(--card);border:1px solid #DCE5EA;border-radius:var(--r);
  padding:15px;margin-bottom:10px;
}
.pc-k{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-40);margin-bottom:9px}
.pc-big{font-size:1.3rem;font-weight:700;letter-spacing:-0.02em}
.pc-sub{font-size:.86rem;color:var(--slate-60);margin-top:3px;line-height:1.4}
.pcard.red{border-left:3px solid var(--red)}
.pcard.red .pc-big{color:var(--red)}

.portal-note{
  font-size:.9rem;color:var(--slate-60);line-height:1.5;margin-bottom:14px;
}
.portal-note b{color:var(--slate);font-weight:700}

/* read-only topic rows in the portal - whole row is a link */
.prow-link{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  padding:9px 4px;border-radius:6px;
}
.prow-link:active{background:#EAF0F3}
.prow-link .lb{flex:1}
.prow-link .prow-chev{color:var(--slate-40);font-size:1.1rem;flex:none}
.prow-link.zero .lb{color:var(--slate-40)}

.portal-foot{
  text-align:center;font-size:.8rem;color:var(--slate-40);
  margin-top:28px;padding-top:18px;padding-bottom:24px;
  border-top:1px solid #DCE5EA;line-height:1.6;
}
.portal-foot .pf-by{font-size:.74rem;color:var(--slate-40);opacity:.85;margin-top:3px}

/* segmented control (paid-by) */
.seg{display:flex;gap:2px;background:var(--rule);padding:2px;border-radius:9px}
.seg-o{flex:1;position:relative;cursor:pointer}
.seg-o input{position:absolute;opacity:0;pointer-events:none}
.seg-o span{
  display:block;text-align:center;padding:9px 4px;font-size:.86rem;
  font-weight:600;color:var(--slate-60);border-radius:7px;min-height:38px;
  line-height:20px;
}
.seg-o input:checked + span{
  background:var(--card);color:var(--slate);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.seg-o input:focus-visible + span{outline:2px solid var(--green);outline-offset:1px}

.rec-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:0;margin-bottom:6px;
}

/* ---------- settings ---------- */
.ok{
  background:var(--green-tint);border:1px solid #CFE3D8;color:var(--green-dark);
  padding:11px 14px;border-radius:9px;margin-bottom:18px;
  font-size:.9rem;font-weight:600;
}
.settings-note{
  font-size:.88rem;color:var(--slate-60);line-height:1.5;margin-bottom:12px;
}
.settings-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:22px;padding:12px;border:1px solid var(--rule-strong);
  background:var(--card);color:var(--slate-60);text-decoration:none;
  font-size:.9rem;font-weight:600;border-radius:9px;min-height:var(--tap);
}
.settings-link:active{background:#F2EFE9}

/* working hours rows */
.hrs{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden}
.hrow{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-bottom:1px solid var(--rule);min-height:58px;
}
.hrow:last-child{border-bottom:0}
.hrow.off{background:#FBFAF7}
.hrow .dy{flex:none;width:38px;font-weight:700;font-size:.9rem;letter-spacing:-0.01em}
.hrow.off .dy{color:var(--slate-40)}

.tog-wrap{flex:none;cursor:pointer;display:block;position:relative}
.tog-input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.tog{
  display:block;width:44px;height:26px;border-radius:13px;
  background:var(--rule-strong);transition:background .18s;position:relative;
}
.tog-input:checked + .tog{background:var(--green)}
.tog i{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.tog-input:checked + .tog i{transform:translateX(18px)}
.tog-input:focus-visible + .tog{outline:2px solid var(--green);outline-offset:2px}

.hrow .tm{flex:1;display:flex;align-items:center;gap:7px;justify-content:flex-end}
.hrow.off .tm{display:none}
.tsel{
  background:var(--paper);border:1px solid var(--rule-strong);border-radius:7px;
  padding:7px 8px;font:inherit;font-size:.88rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--slate);cursor:pointer;min-height:38px;
}
.tsel:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(30,111,76,.12)}
.hrow .dash{color:var(--slate-40);font-size:.85rem}
.hrow .cls{flex:1;text-align:right;font-size:.85rem;color:var(--slate-40);font-weight:500}
.hrow.on .cls{display:none}

.hsum{
  background:var(--green-tint);border:1px solid #CFE3D8;border-radius:var(--r);
  padding:13px 14px;margin-top:12px;font-size:.9rem;color:var(--green-dark);
}
.hsum b{font-weight:700;font-variant-numeric:tabular-nums}

.note-b{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:13px 14px;margin-top:12px;font-size:.85rem;color:var(--slate-60);line-height:1.45;
}
.note-b svg{flex:none;margin-top:1px;color:var(--slate-40)}

/* ---------- bottom tab bar ---------- */
/* Pages with a tab bar need room so content clears the fixed bar. */
body.has-tabbar main{
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
}

.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:rgba(247,245,240,.94);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar-in{
  max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:9px 4px 8px;text-decoration:none;
  color:var(--slate-40);min-height:56px;
}
.tab svg{width:22px;height:22px;stroke-width:1.9}
.tab span{font-size:.66rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.tab.on{color:var(--green)}
.tab:active{color:var(--green-dark)}

/* portal has no tab bar, so it keeps normal padding */
body.portal main{padding-bottom:18px}

/* ---------- dashboard ---------- */
.dash-empty{
  text-align:center;padding:28px 20px;
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);
}
.de-icon{
  width:48px;height:48px;border-radius:12px;margin:0 auto 12px;
  background:var(--green-tint);color:var(--green-dark);
  display:grid;place-items:center;
}
.de-t{font-weight:600;font-size:.98rem;color:var(--slate)}
.de-p{font-size:.86rem;color:var(--slate-40);margin-top:4px;line-height:1.45;
  max-width:32ch;margin-left:auto;margin-right:auto}

.test-strip{
  display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--rule);
  border-left:3px solid var(--red);border-radius:var(--r);padding:14px;
}
.test-strip:active{background:#FAF8F4}
.ts-cd{flex:none;text-align:center;background:var(--red-tint);
  border-radius:8px;padding:7px 9px;min-width:52px}
.ts-n{font-size:1.25rem;font-weight:700;color:var(--red);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-0.02em;display:block}
.ts-u{font-size:.62rem;font-weight:700;color:var(--red);opacity:.75;
  text-transform:uppercase;letter-spacing:.06em;margin-top:2px;display:block}
.ts-b{flex:1;min-width:0}
.ts-nm{display:block;font-weight:700;font-size:1.02rem;letter-spacing:-0.01em}
.ts-dt{display:block;font-size:.82rem;color:var(--slate-60);margin-top:1px}
.ts-chev{color:var(--slate-40);font-size:1.2rem;flex:none}

.dash-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.dcard{
  display:flex;flex-direction:column;gap:0;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:15px 15px 14px;min-height:88px;justify-content:center;
}
.dcard:active{background:#FAF8F4}
.dc-n{font-size:1.7rem;font-weight:700;letter-spacing:-0.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.dcard.warn .dc-n{color:var(--amber)}
.dc-k{font-size:.83rem;font-weight:600;color:var(--slate-60);margin-top:6px}
.dc-plus{
  width:32px;height:32px;border-radius:8px;
  background:var(--green-tint);color:var(--green-dark);
  display:grid;place-items:center;margin-bottom:8px;
}

/* ---------- logo ---------- */
.logo-mark{display:block}
.logo-full{display:inline-flex;align-items:center;gap:10px}
/* the mark carries its own colours now - nothing to set here */
.logo-words{display:flex;flex-direction:column;line-height:.98}
.logo-the{font-size:.7rem;font-weight:600;color:var(--slate-40);
  letter-spacing:.02em;text-transform:lowercase}
.logo-driving{font-size:1.15rem;font-weight:700;color:var(--slate);
  letter-spacing:-0.02em}
.logo-space{font-size:1.15rem;font-weight:700;color:var(--green);
  letter-spacing:-0.02em;margin-top:-2px}

/* ---------- library ---------- */
.lib-intro{
  font-size:.92rem;color:var(--slate-60);line-height:1.5;
  margin-bottom:20px;
}
.lib-cat{margin-bottom:14px}

/* collapsible category */
.lib-cat > summary{cursor:pointer;list-style:none}
.lib-cat > summary::-webkit-details-marker{display:none}
.lib-cat > summary::marker{content:""}
/* when collapsed, the hero is the whole card - round all corners */
.lib-cat:not([open]) > summary.cat-hero{border-radius:var(--r)}
.lib-cat:not([open]) > summary .cat-bar{border-radius:0 0 var(--r) var(--r);overflow:hidden}

.cat-toggle{
  flex:none;color:#fff;display:grid;place-items:center;
  transition:transform .2s ease;opacity:.9;
}
.lib-cat[open] > summary .cat-toggle{transform:rotate(180deg)}

.cat-hero{
  position:relative;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  min-height:96px;background-size:cover;background-position:center;
  background-color:var(--green-dark);
}
/* colour wash over the (placeholder or real) image, so text always reads
   and it looks intentional before photos are added */
.cat-hero-fill{position:absolute;inset:0}
.cat-tint-1{background:linear-gradient(135deg,#1E6F4C 0%,#508F73 100%);opacity:.9}
.cat-tint-2{background:linear-gradient(135deg,#1F5F8B 0%,#5082A5 100%);opacity:.9}
.cat-tint-3{background:linear-gradient(135deg,#B07818 0%,#C1964B 100%);opacity:.9}
.cat-tint-4{background:linear-gradient(135deg,#6B4C9A 0%,#8C73B0 100%);opacity:.9}
.cat-tint-5{background:linear-gradient(135deg,#A63A2E 0%,#BA655C 100%);opacity:.9}
.cat-tint-6{background:linear-gradient(135deg,#0F766E 0%,#44948E 100%);opacity:.9}
.cat-tint-7{background:linear-gradient(135deg,#8E3A6B 0%,#A7658C 100%);opacity:.9}
.cat-tint-8{background:linear-gradient(135deg,#C05621 0%,#CE7B52 100%);opacity:.9}
.cat-tint-9{background:linear-gradient(135deg,#31456E 0%,#5E6E8E 100%);opacity:.9}
.cat-tint-10{background:linear-gradient(135deg,#5F6B1F 0%,#828C50 100%);opacity:.9}
.cat-tint-11{background:linear-gradient(135deg,#475569 0%,#6F7A8A 100%);opacity:.9}
/* when a real image is present it shows through a darker wash for contrast */
.cat-hero[style*="url"] .cat-hero-fill{opacity:.82}

.cat-hero-in{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:18px 16px;height:100%;
}
.cat-num{
  flex:none;width:34px;height:34px;border-radius:9px;
  background:rgba(255,255,255,.22);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:1rem;
  backdrop-filter:blur(4px);
}
.cat-meta{flex:1;min-width:0}
.cat-meta h2{color:#fff;font-size:1.15rem;font-weight:700;letter-spacing:-0.02em;
  text-shadow:0 1px 3px rgba(0,0,0,.2)}
.cat-prog{color:rgba(255,255,255,.9);font-size:.8rem;font-weight:600;margin-top:2px}

.cat-bar{position:relative;height:4px;background:rgba(255,255,255,.25)}
.cat-bar i{display:block;height:100%;background:#fff}

.cat-topics{
  background:var(--card);border:1px solid var(--rule);border-top:0;
  border-radius:0 0 var(--r) var(--r);overflow:hidden;
}
.topic-card{
  display:flex;align-items:center;gap:10px;padding:13px 15px;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--rule);
  min-height:var(--tap);
}
.topic-card:last-child{border-bottom:0}
.topic-card:active{background:#FAF8F4}
.tc-name{flex:1;font-size:.94rem;font-weight:500;line-height:1.3}
.tc-chev{color:var(--slate-40);font-size:1.15rem;flex:none}
.tc-dots{display:flex;gap:3px;flex:none}
.tc-dot{width:8px;height:8px;border-radius:50%;background:var(--rule-strong)}
.tc-dot.f{background:var(--green)}

/* ---------- logo header ---------- */
.top-logo{
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,#EEF4F0 0%,var(--paper) 100%);
}
.top-greet{margin-left:auto;text-align:right}
.tg-hi{display:block;font-size:.8rem;color:var(--slate-40);font-weight:500}
.tg-name{display:block;font-size:1.05rem;font-weight:700;color:var(--slate);
  letter-spacing:-0.01em}

/* ---------- hero cards ---------- */
.hero-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;
}
.hero-card{
  position:relative;overflow:hidden;border-radius:16px;
  text-decoration:none;color:#fff;min-height:130px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px;
  box-shadow:0 2px 12px rgba(28,43,51,.10);
}
.hero-card:active{transform:scale(.985)}
.hc-bg{position:absolute;inset:0;z-index:0}
.hc-green .hc-bg{background:linear-gradient(150deg,#1E6F4C 0%,#2E9E6B 100%)}
.hc-blue .hc-bg{background:linear-gradient(150deg,#2E86C1 0%,#5BA4CE 100%)}
.hc-body{position:relative;z-index:1;display:flex;flex-direction:column}
.hc-k{font-size:.82rem;font-weight:600;opacity:.9;letter-spacing:.01em}
.hc-n{font-size:2rem;font-weight:800;letter-spacing:-0.03em;line-height:1;margin:3px 0}
.hc-s{font-size:.76rem;opacity:.85;line-height:1.3}
.hc-ico{
  position:absolute;top:14px;right:14px;z-index:1;
  width:26px;height:26px;opacity:.5;
}

/* warm the section headers a touch */
.eyebrow{color:var(--green-dark);opacity:.75}

/* big add-a-pupil button */
.big-add{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:16px;padding:14px;border-radius:12px;
  background:var(--card);border:1.5px dashed var(--rule-strong);
  color:var(--slate-60);text-decoration:none;font-weight:600;font-size:.95rem;
  min-height:var(--tap);
}
.big-add:active{background:#FAF8F4;border-color:var(--green);color:var(--green)}

.portal-lib{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  border-left:3px solid var(--green);
}
.portal-lib .pl-b{flex:1;min-width:0}
.portal-lib svg{width:26px;height:26px;color:var(--green);flex:none}
.portal-lib:active{background:#EAF0F3}

/* ---------- desktop: nav moves to the top ---------- */
/* Phones keep the bottom tab bar. From tablet width up, the same nav
   repositions to a fixed top bar and content is pushed down to clear it.
   Fixed (not sticky) because the nav markup sits after <main> in source
   order - fixed lifts it out of flow so position is independent of that. */
@media (min-width: 700px){
  .wrap{max-width:760px}

  /* Tab bar moves to the top on desktop, so the install bar can drop. */
  .ins{bottom:16px;left:auto;right:16px;max-width:420px}

  .tabbar{
    position:fixed;top:0;bottom:auto;left:0;right:0;
    border-top:0;border-bottom:1px solid var(--rule);
    padding-bottom:0;
  }
  .tabbar-in{
    max-width:760px;
    display:flex;justify-content:flex-start;gap:4px;
    padding:0 10px;
  }
  .tab{
    flex-direction:row;gap:8px;min-height:52px;padding:0 16px;
    border-bottom:2px solid transparent;
  }
  .tab svg{width:18px;height:18px}
  .tab span{font-size:.9rem}
  .tab.on{border-bottom-color:var(--green)}

  /* the whole page clears the fixed top bar (tabbed pages only) */
  body.has-tabbar .wrap{padding-top:53px}
  body.has-tabbar .top{top:53px}
  body.has-tabbar main{padding-bottom:32px}
}

@media (min-width: 1000px){
  .wrap{max-width:820px}
  .tabbar-in{max-width:820px}
}

/* ---------- calendar ---------- */
.cal{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:14px;margin-bottom:18px;
}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-month{font-weight:700;font-size:1.02rem;letter-spacing:-0.01em}
.cal-nav{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  color:var(--slate-60);text-decoration:none;
}
.cal-nav:active{background:#F2EFE9}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-dow{
  text-align:center;font-size:.68rem;font-weight:700;color:var(--slate-40);
  padding-bottom:6px;text-transform:uppercase;
}
.cal-day{
  position:relative;aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  border-radius:9px;text-decoration:none;color:var(--slate);
  font-variant-numeric:tabular-nums;
}
.cal-day.blank{pointer-events:none}
.cal-day .cal-n{font-size:.92rem;font-weight:600}
.cal-day:active{background:#F2EFE9}
.cal-day.today .cal-n{color:var(--green);font-weight:800}
.cal-day.sel{background:var(--green)}
.cal-day.sel .cal-n{color:#fff}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--green)}
.cal-day.sel .cal-dot{background:rgba(255,255,255,.85)}

/* ---------- day lessons ---------- */
.day-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px}
.dh-t{font-weight:700;font-size:1.05rem;letter-spacing:-0.01em}
.dh-add{
  display:flex;align-items:center;gap:6px;text-decoration:none;
  background:var(--green);color:#fff;font-weight:600;font-size:.88rem;
  padding:8px 13px;border-radius:8px;min-height:38px;
}
.dh-add:active{background:var(--green-dark)}

.lesson{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:13px 14px;margin-bottom:8px;
}
.lesson:active{background:#FAF8F4}
.lesson.cancel{opacity:.55}
.ls-time{flex:none;width:52px;text-align:left}
.ls-t{display:block;font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em}
.ls-dur,.ls-day{display:block;font-size:.72rem;color:var(--slate-40);font-weight:600;margin-top:1px}
.ls-bar{flex:none;width:3px;align-self:stretch;border-radius:2px;background:var(--green)}
.lesson.cancel .ls-bar{background:var(--red)}
.ls-b{flex:1;min-width:0}
.ls-nm{font-weight:600;font-size:.97rem}
.ls-sm{font-size:.8rem;color:var(--slate-60);margin-top:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ls-chev{color:var(--slate-40);font-size:1.15rem;flex:none}

/* ---------- booking form extras ---------- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fsel{
  width:100%;padding:13px 14px;font:inherit;font-size:1rem;
  background:var(--card);border:1px solid var(--rule-strong);
  border-radius:9px;color:var(--slate);min-height:var(--tap);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6E77' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;
}
.fsel:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(30,111,76,.12)}
.fsel.bad{border-color:var(--red)}

.wh-hint{
  background:var(--amber-tint);border:1px solid #F0D9BE;color:#8A5A1C;
  padding:11px 13px;border-radius:9px;font-size:.85rem;line-height:1.4;
  margin-bottom:18px;
}

/* ---------- booking detail ---------- */
.booking-card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;margin-bottom:16px;
}
.booking-card.cancelled{opacity:.7}
.bc-when{padding:16px;background:var(--green);color:#fff}
.booking-card.cancelled .bc-when{background:var(--slate-60)}
.bc-date{font-size:1.15rem;font-weight:700;letter-spacing:-0.01em}
.bc-time{font-size:.9rem;opacity:.9;margin-top:3px;font-variant-numeric:tabular-nums}
.bc-pupil{
  display:flex;align-items:center;padding:14px 16px;text-decoration:none;
  color:inherit;border-bottom:1px solid var(--rule);
}
.bc-pupil:active{background:#FAF8F4}
.bc-pnm{flex:1;font-weight:700;font-size:1.02rem}
.bc-chev{color:var(--slate-40);font-size:1.2rem}
.bc-row{display:flex;padding:12px 16px;border-bottom:1px solid var(--rule);gap:12px}
.bc-row:last-child{border-bottom:0}
.bc-k{flex:none;width:70px;font-size:.82rem;font-weight:700;color:var(--slate-40);
  text-transform:uppercase;letter-spacing:.04em}
.bc-v{flex:1;font-size:.94rem}
.bc-cancelled{padding:12px 16px;color:var(--red);font-weight:600;font-size:.9rem}

.btn.danger{background:var(--card);color:var(--red);border:1.5px solid #F1CFC7}
.btn.danger:active{background:var(--red-tint)}

/* ---------- mark-done prompt ---------- */
.prompt-card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:22px 18px;margin-bottom:16px;text-align:center;
  box-shadow:0 2px 14px rgba(28,43,51,.08);
}
.pr-tick{
  width:52px;height:52px;border-radius:50%;margin:0 auto 14px;
  background:var(--green);display:grid;place-items:center;
}
.pr-t{font-weight:700;font-size:1.1rem;letter-spacing:-0.01em}
.pr-p{font-size:.88rem;color:var(--slate-60);margin-top:3px}
.pr-q{font-size:.95rem;font-weight:600;margin-top:16px;margin-bottom:14px}
.pr-actions{display:flex;flex-direction:column;gap:8px}
.pr-actions .btn{margin-top:0}

.bc-completed{padding:12px 16px;color:var(--green-dark);font-weight:600;font-size:.9rem}
.booking-card.completed .bc-when{background:var(--slate)}

/* ---------- note-on-grade-change prompt ---------- */
.note-prompt{
  display:flex;align-items:center;gap:6px;
  padding:8px 10px;margin:2px 0 8px;
  background:var(--green-tint);border:1px solid #CFE3D8;border-radius:9px;
  animation:notein .18s ease-out;
}
@keyframes notein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.np-input{
  flex:1;min-width:0;border:1px solid var(--rule-strong);border-radius:7px;
  padding:8px 10px;font:inherit;font-size:.88rem;background:var(--card);
  min-height:38px;
}
.np-input:focus{outline:none;border-color:var(--green)}
.np-save{
  flex:none;border:0;background:var(--green);color:#fff;font:inherit;
  font-weight:600;font-size:.85rem;padding:8px 12px;border-radius:7px;
  cursor:pointer;min-height:38px;
}
.np-save:active{background:var(--green-dark)}
.np-skip{
  flex:none;border:0;background:none;color:var(--slate-40);
  font-size:1.3rem;line-height:1;cursor:pointer;padding:4px 8px;
}
.np-done{font-size:.88rem;color:var(--green-dark);font-weight:600;padding:6px}

.warn-banner{
  background:var(--amber-tint);border:1px solid #F0D9BE;color:#8A5A1C;
  padding:11px 14px;border-radius:9px;margin-bottom:10px;
  font-size:.88rem;line-height:1.4;
}
.send-prog-form{margin:0}
.send-prog-form .btn{margin-top:0}

.btn.ghost.copied{color:var(--green);border-color:var(--green)}

.pupil-actions-top{display:flex;justify-content:flex-end;margin-bottom:10px}
.edit-link{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--slate-60);font-size:.86rem;font-weight:600;
  padding:6px 10px;border-radius:8px;
}
.edit-link:active{background:#F2EFE9}

.move-current{
  background:var(--green-tint);border:1px solid #CFE3D8;border-radius:var(--r);
  padding:14px 16px;margin-bottom:20px;
}
.move-current .mc-k{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-dark);
}
.move-current .mc-v{font-size:1.05rem;font-weight:700;color:var(--slate);margin-top:3px}
.move-current .mc-s{font-size:.85rem;color:var(--slate-60);margin-top:2px}

/* ---------- dashboard request banner ---------- */
.req-banner{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  background:var(--amber-tint);border:1px solid #F0D9BE;border-radius:var(--r);
  padding:13px 15px;margin-bottom:14px;
}
.rb-badge{
  flex:none;min-width:26px;height:26px;padding:0 7px;border-radius:13px;
  background:var(--amber);color:#fff;font-weight:800;font-size:.9rem;
  display:grid;place-items:center;
}
.rb-txt{flex:1;font-weight:600;font-size:.94rem;color:#8A5A1C}
.rb-chev{color:#C99A5B;font-size:1.2rem}

/* ---------- portal: upcoming lessons ---------- */
.plesson{
  background:var(--card);border:1px solid #DCE5EA;border-radius:var(--r);
  padding:13px 15px;margin-bottom:10px;
}
.pl-when{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pl-date{font-weight:700;font-size:1rem}
.pl-time{font-size:.85rem;color:var(--slate-60);font-variant-numeric:tabular-nums}
.pl-focus{font-size:.86rem;color:var(--slate-60);margin-top:2px}
.pl-req{
  margin-top:10px;width:100%;border:1px solid var(--rule-strong);
  background:var(--paper);color:var(--slate-60);font:inherit;font-weight:600;
  font-size:.86rem;padding:9px;border-radius:8px;cursor:pointer;min-height:38px;
}
.pl-req:active{background:#EAF0F3}
.pl-pending{
  margin-top:10px;text-align:center;font-size:.82rem;font-weight:600;
  color:var(--amber);background:var(--amber-tint);border-radius:8px;padding:8px;
}

/* ---------- portal: request sheet ---------- */
.req-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(28,43,51,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
.req-overlay[hidden]{display:none}
.req-sheet{
  background:var(--card);width:100%;max-width:520px;
  border-radius:18px 18px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom));
  max-height:90vh;overflow-y:auto;
}
.req-head{display:flex;align-items:center;justify-content:space-between}
.req-head h2{font-size:1.2rem;font-weight:700;margin:0}
.req-close{border:0;background:none;font-size:1.8rem;line-height:1;color:var(--slate-40);cursor:pointer;padding:0 4px}
.req-for{font-size:.92rem;color:var(--slate-60);margin:4px 0 16px}

.req-kinds{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.req-kind{position:relative;display:block;cursor:pointer}
.req-kind input{position:absolute;opacity:0}
.req-kind span{
  display:block;padding:13px 15px;border:1.5px solid var(--rule-strong);
  border-radius:10px;font-weight:600;font-size:.95rem;color:var(--slate-60);
}
.req-kind input:checked + span{
  border-color:var(--green);background:var(--green-tint);color:var(--green-dark);
}

.req-field{margin-bottom:14px}
.req-field label{display:block;font-size:.82rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--slate-40);margin-bottom:6px}
.req-opt{font-weight:600;letter-spacing:0;text-transform:none;color:var(--rule-strong)}
.req-field input,.req-field textarea{
  width:100%;padding:12px 14px;font:inherit;font-size:1rem;
  background:var(--card);border:1px solid var(--rule-strong);border-radius:9px;
}
.req-field textarea{min-height:70px;resize:vertical}
.req-field input:focus,.req-field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(30,111,76,.12)}
.req-submit{margin-top:4px}
.req-note{font-size:.8rem;color:var(--slate-40);text-align:center;margin:12px 0 0;line-height:1.4}

.portal-flash{padding:11px 14px;border-radius:9px;margin-bottom:14px;font-size:.9rem;font-weight:600}
.portal-flash.ok{background:var(--green-tint);border:1px solid #CFE3D8;color:var(--green-dark)}
.portal-flash.warn{background:var(--amber-tint);border:1px solid #F0D9BE;color:#8A5A1C}

/* ---------- instructor: request cards ---------- */
.req-card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px;margin-bottom:12px;
}
.rc-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rc-kind{
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--green-dark);background:var(--green-tint);padding:4px 9px;border-radius:6px;
}
.rc-kind.cancel{color:var(--red);background:var(--red-tint)}
.rc-pupil{font-weight:700;font-size:1.05rem}
.rc-current,.rc-pref{font-size:.9rem;color:var(--slate-60);margin-bottom:4px}
.rc-current b,.rc-pref b{color:var(--slate)}
.rc-pref.muted{color:var(--slate-40);font-style:italic}
.rc-pref.muted b{display:none}
.rc-msg{
  font-size:.9rem;color:var(--slate);background:var(--paper);
  border-radius:8px;padding:10px 12px;margin:8px 0;font-style:italic;
}
.rc-actions{display:flex;gap:8px;margin-top:12px}
.rc-actions form{flex:1;margin:0}
.rc-actions .btn{margin-top:0;width:100%}
.rc-decline{width:100%}
.rc-view{display:block;text-align:center;margin-top:10px;font-size:.85rem;
  color:var(--slate-40);text-decoration:none}
.rc-view:active{color:var(--green)}

/* pupils list: filter bar + add */
.pupils-bar{
  display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.status-filter{
  display:flex;flex:1;gap:2px;background:var(--rule);padding:3px;border-radius:10px;
}
.sf-tab{
  flex:1;text-align:center;padding:8px 4px;border-radius:8px;
  font-size:.86rem;font-weight:600;color:var(--slate-60);text-decoration:none;
  white-space:nowrap;
}
.sf-tab.on{background:var(--card);color:var(--slate);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.sf-tab:active{color:var(--slate)}
.sf-add{
  flex:none;width:44px;height:44px;border-radius:10px;
  background:var(--green);color:#fff;display:grid;place-items:center;
  text-decoration:none;
}
.sf-add:active{background:var(--green-dark)}

/* status picker in edit form */
.status-pick{display:flex;gap:6px}
.status-opt{flex:1;position:relative;cursor:pointer}
.status-opt input{position:absolute;opacity:0}
.status-opt span{
  display:block;text-align:center;padding:11px 4px;border:1.5px solid var(--rule-strong);
  border-radius:9px;font-size:.9rem;font-weight:600;color:var(--slate-60);
}
.status-opt input:checked + span{
  border-color:var(--green);background:var(--green-tint);color:var(--green-dark);
}

/* ---------- archive ---------- */
.archive-form{margin-top:28px;text-align:center}
.archive-btn{
  border:0;background:none;color:var(--slate-40);font:inherit;
  font-size:.86rem;font-weight:600;cursor:pointer;padding:10px 16px;
  border-radius:8px;text-decoration:underline;text-underline-offset:3px;
}
.archive-btn:active{color:var(--red);background:var(--red-tint)}

.past-pupils-link{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:12px;padding:12px;border:1px solid var(--rule);
  background:var(--card);color:var(--slate-60);text-decoration:none;
  font-size:.9rem;font-weight:600;border-radius:10px;min-height:var(--tap);
}
.past-pupils-link:active{background:#FAF8F4}

.unarchive-inline{margin:0;display:flex}
.unarchive-inline .copy-link{border-left:1px solid var(--rule)}

/* ---------- signup / verify / welcome ---------- */
.auth-alt{text-align:center;font-size:.92rem;color:var(--slate-60);margin-top:20px}
.auth-alt a{color:var(--green);font-weight:600;text-decoration:none}
.auth .opt{font-weight:500;color:var(--slate-40);font-size:.85em}
.auth .hint{display:block;font-size:.82rem;color:var(--slate-40);margin-top:5px}
.auth .fe{display:block;font-size:.84rem;color:var(--red);margin-top:5px;font-weight:600}
.auth input.bad{border-color:var(--red)}

.code-input{
  text-align:center;font-size:1.8rem;font-weight:700;letter-spacing:.4em;
  font-variant-numeric:tabular-nums;padding-left:.4em;
}
.resend-form{margin:14px 0 0;text-align:center}
.linkbtn{
  border:0;background:none;color:var(--green);font:inherit;font-weight:600;
  font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px;
}
.auth-note{text-align:center;font-size:.85rem;color:var(--slate-40);margin-top:18px;line-height:1.5}

/* welcome */
.welcome{max-width:460px;margin:0 auto;padding:36px 22px 60px;text-align:center}
.wc-mark{margin-bottom:18px;display:flex;justify-content:center}
.welcome h1{font-size:1.9rem;font-weight:700;letter-spacing:-0.02em;margin:0 0 10px}
.wc-lead{font-size:1.05rem;color:var(--slate-60);margin:0 0 30px;line-height:1.5}
.wc-steps{text-align:left;display:flex;flex-direction:column;gap:16px;margin-bottom:30px}
.wc-step{display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px}
.wc-ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--green-tint);
  color:var(--green);display:grid;place-items:center;margin-top:2px}
.wc-tx h3{font-size:1.05rem;font-weight:700;margin:0 0 3px}
.wc-tx p{font-size:.92rem;color:var(--slate-60);margin:0;line-height:1.45}
.wc-cta{width:100%;margin-bottom:12px}
.wc-skip{display:inline-block;color:var(--slate-40);font-size:.92rem;text-decoration:none;font-weight:600}
.wc-skip:active{color:var(--slate-60)}

/* ---------- plans / gating ---------- */
.trial-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-decoration:none;background:var(--green);color:#fff;
  border-radius:var(--r);padding:12px 16px;margin-bottom:14px;
}
.trial-banner .tb-txt{font-size:.94rem}
.trial-banner .tb-txt b{font-weight:800}
.trial-banner .tb-cta{font-size:.9rem;font-weight:600;opacity:.9;white-space:nowrap}
.trial-banner.free{background:var(--slate);}

.gate{
  text-align:center;max-width:400px;margin:20px auto;padding:32px 24px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
}
.gate-ic{
  width:56px;height:56px;border-radius:14px;background:var(--green-tint);color:var(--green);
  display:grid;place-items:center;margin:0 auto 16px;
}
.gate h2{font-size:1.3rem;font-weight:700;margin:0 0 10px}
.gate p{font-size:.96rem;color:var(--slate-60);margin:0 0 20px;line-height:1.5}
.gate .btn{margin-bottom:8px}
.gate-alt{display:inline-block;color:var(--slate-40);font-size:.9rem;text-decoration:none;font-weight:600;padding:8px}

.plans{max-width:460px;margin:0 auto;padding-bottom:20px}
.plan-note{background:var(--amber-tint);border:1px solid #F0D9BE;color:#8A5A1C;
  padding:12px 15px;border-radius:10px;margin-bottom:16px;font-size:.92rem;line-height:1.45}
.plan-note.ok{background:var(--green-tint);border-color:#CFE3D8;color:var(--green-dark)}
.plan-note.err-note{background:#FBEBE7;border-color:#F1CFC7;color:#C0492F}
.plan-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:22px;margin-bottom:14px}
.plan-card.premium{border:2px solid var(--green)}
.plan-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.plan-name{font-size:1.25rem;font-weight:800}
.plan-price{font-size:1rem;font-weight:700;color:var(--green)}
.plan-for{font-size:.92rem;color:var(--slate-60);margin:0 0 16px}
.plan-list{list-style:none;margin:0 0 18px;padding:0}
.plan-list li{position:relative;padding:7px 0 7px 26px;font-size:.95rem;border-bottom:1px solid var(--rule)}
.plan-list li:last-child{border-bottom:0}
.plan-list li::before{content:"";position:absolute;left:2px;top:12px;width:12px;height:7px;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.plan-list.muted li::before{border-color:var(--slate-40)}
.plan-card .btn[disabled]{opacity:.55;cursor:default}
.plan-contact{font-size:.86rem;color:var(--slate-60);margin:12px 0 0;line-height:1.5;text-align:center}
.plan-contact a{color:var(--green);font-weight:600}
.plan-foot{font-size:.84rem;color:var(--slate-40);text-align:center;line-height:1.5;margin-top:6px}

.top-logo .logo-link{text-decoration:none;display:inline-flex;color:inherit}

.auth-mark-link{display:inline-flex;text-decoration:none;color:inherit}
.auth-home{text-align:center;margin-top:10px}
.auth-home a{color:var(--slate-40);font-size:.88rem;text-decoration:none;font-weight:600}
.auth-home a:active{color:var(--slate-60)}

/* ---------- your public page (editor) ---------- */
.set-link{
  display:flex;align-items:center;gap:13px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px;margin:18px 0;text-decoration:none;color:inherit;
}
.set-link:active{background:#FAF8F4}
.sl-ic{
  flex:none;width:40px;height:40px;border-radius:11px;background:var(--green-tint);
  color:var(--green);display:grid;place-items:center;
}
.sl-tx{flex:1;min-width:0}
.sl-tx b{display:block;font-size:1rem;font-weight:700}
.sl-tx span{font-size:.86rem;color:var(--slate-60);line-height:1.4;display:block}
.sl-chev{flex:none;color:var(--slate-40);font-size:1.4rem;line-height:1}

.page-url{
  background:var(--green-tint);border:1px solid #CFE3D8;border-radius:var(--r);
  padding:16px;margin-bottom:20px;
}
.pu-k{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);margin-bottom:5px;
}
.pu-v{
  font-size:.95rem;font-weight:600;color:var(--green-dark);
  word-break:break-all;margin-bottom:11px;
}
.pu-actions{display:flex;gap:8px;flex-wrap:wrap}
.pu-actions .btn{width:auto;padding:9px 15px;font-size:.9rem}
.pu-off{font-size:.83rem;color:var(--slate-60);margin-top:10px}

.pub-toggle{
  display:flex;align-items:center;gap:13px;cursor:pointer;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:15px 16px;margin-bottom:20px;
}
.pub-toggle input{position:absolute;opacity:0;pointer-events:none}
.pt-box{
  flex:none;width:46px;height:27px;border-radius:16px;background:var(--rule-strong);
  position:relative;transition:background .18s;
}
.pt-box::after{
  content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;
  border-radius:50%;background:#fff;transition:transform .18s;
}
.pub-toggle input:checked + .pt-box{background:var(--green)}
.pub-toggle input:checked + .pt-box::after{transform:translateX(19px)}
.pt-tx b{display:block;font-size:.98rem;font-weight:700}
.pt-tx span{font-size:.85rem;color:var(--slate-60)}

.slug-row{display:flex;align-items:stretch}
.slug-pre{
  flex:none;display:grid;place-items:center;padding:0 11px;
  background:var(--green-tint);color:var(--green);font-weight:700;font-size:.95rem;
  border:1px solid var(--rule-strong);border-right:0;border-radius:10px 0 0 10px;
}
.slug-row input{border-radius:0 10px 10px 0}

.price-row{display:flex;gap:7px;margin-bottom:8px}
.price-row input:nth-child(1){flex:1.4;min-width:0}
.price-row input:nth-child(2){flex:.7;min-width:0}
.price-row input:nth-child(3){flex:1.2;min-width:0}

.svc-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.svc{position:relative}
.svc input{position:absolute;opacity:0;pointer-events:none}
.svc span{
  display:block;padding:9px 14px;border:1px solid var(--rule-strong);border-radius:20px;
  font-size:.9rem;font-weight:500;background:var(--card);color:var(--slate-60);cursor:pointer;
}
.svc input:checked + span{
  background:var(--green);border-color:var(--green);color:#fff;font-weight:600;
}

.section-head-sm{
  font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--green);margin:26px 0 12px;
}

.img-now{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
  background:var(--card);border:1px solid var(--rule);border-radius:11px;padding:10px;
}
.img-now img{
  width:60px;height:60px;object-fit:contain;border-radius:8px;background:#FAF8F4;flex:none;
}
.img-now.wide img{width:130px;height:52px;object-fit:cover}
.img-rm{font-size:.86rem;color:var(--slate-60);display:flex;align-items:center;gap:6px;cursor:pointer}
input[type=file]{
  width:100%;font:inherit;font-size:.9rem;padding:10px;
  background:var(--card);border:1px dashed var(--rule-strong);border-radius:10px;
}

.theme-grid{display:flex;flex-wrap:wrap;gap:9px}
.theme{position:relative;cursor:pointer}
.theme input{position:absolute;opacity:0;pointer-events:none}
.theme .th-swatch{
  display:block;width:44px;height:44px;border-radius:11px;
  border:2.5px solid transparent;box-shadow:0 0 0 1px var(--rule-strong) inset;
}
.theme .th-name{
  display:block;text-align:center;font-size:.72rem;color:var(--slate-40);
  margin-top:3px;font-weight:600;
}
.theme input:checked + .th-swatch{
  border-color:var(--slate);box-shadow:0 0 0 2px #fff inset;
}
.theme input:checked ~ .th-name{color:var(--slate)}


/* ---------- locked premium feature block ---------- */
.locked{
  background:var(--card);border:1px dashed var(--rule-strong);border-radius:var(--r);
  padding:20px;margin-bottom:20px;
}
.lk-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.lk-ic{
  flex:none;width:30px;height:30px;border-radius:9px;background:var(--green-tint);
  color:var(--green);display:grid;place-items:center;
}
.lk-head b{font-size:1rem;font-weight:700;flex:1}
.lk-tag{
  font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  background:var(--green);color:#fff;padding:3px 8px;border-radius:20px;
}
.locked > p{font-size:.92rem;color:var(--slate-60);margin:0 0 14px;line-height:1.5}
.locked .btn{width:auto;padding:10px 18px;font-size:.92rem}
.locked-preview{opacity:.4;pointer-events:none;margin-bottom:14px}
.locked-preview .theme{cursor:default}
.lk-kept{font-size:.85rem;color:var(--slate-40);margin:0 0 14px}


/* ---------- recurring series ---------- */
.btn.danger.ghost-danger{
  background:none;color:var(--red);border:1.5px solid var(--red);
}
.btn.danger.ghost-danger:active{background:#FBEBE7}
.series-note{
  font-size:.84rem;color:var(--slate-40);line-height:1.5;
  margin:10px 0 0;text-align:center;
}


/* ---------- change-request slot pickers ---------- */
.req-select{
  width:100%;padding:13px 14px;font:inherit;font-size:1rem;
  background:var(--card);border:1px solid var(--rule-strong);
  border-radius:10px;color:var(--slate);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235F6E77' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:40px;
}
.req-select:disabled{background-color:#F4F2ED;color:var(--slate-40)}
.req-slots-note{
  font-size:.88rem;color:var(--slate-60);line-height:1.5;
  background:var(--amber-tint);border:1px solid #F0D9BE;
  border-radius:9px;padding:11px 13px;margin:0 0 4px;
}

/* ---------- category colours (11 modules, 5 shades each) ---------- */
/* .ccN on a container sets the ramp; .msq/.mk squares pick shade by level */
.cc1 .cat-accent, .cc1.cat-accent{background:#1E6F4C}
.cc1 .cat-tinted{background:#E4EEEA;color:#1E6F4C}
.cc1 .sqf.l1{background:#D2E2DB;color:var(--slate)}
.cc1 .sqf.l2{background:#A5C5B7;color:var(--slate)}
.cc1 .sqf.l3{background:#78A994;color:var(--slate)}
.cc1 .sqf.l4{background:#4B8C70;color:#fff}
.cc1 .sqf.l5{background:#1E6F4C;color:#fff}
.cc2 .cat-accent, .cc2.cat-accent{background:#1F5F8B}
.cc2 .cat-tinted{background:#E4ECF1;color:#1F5F8B}
.cc2 .sqf.l1{background:#D2DFE8;color:var(--slate)}
.cc2 .sqf.l2{background:#A5BFD1;color:var(--slate)}
.cc2 .sqf.l3{background:#799FB9;color:var(--slate)}
.cc2 .sqf.l4{background:#4C7FA2;color:#fff}
.cc2 .sqf.l5{background:#1F5F8B;color:#fff}
.cc3 .cat-accent, .cc3.cat-accent{background:#B07818}
.cc3 .cat-tinted{background:#F6EFE3;color:#B07818}
.cc3 .sqf.l1{background:#EFE4D1;color:var(--slate)}
.cc3 .sqf.l2{background:#DFC9A3;color:var(--slate)}
.cc3 .sqf.l3{background:#D0AE74;color:var(--slate)}
.cc3 .sqf.l4{background:#C09346;color:var(--slate)}
.cc3 .sqf.l5{background:#B07818;color:#fff}
.cc4 .cat-accent, .cc4.cat-accent{background:#6B4C9A}
.cc4 .cat-tinted{background:#EDEAF3;color:#6B4C9A}
.cc4 .sqf.l1{background:#E1DBEB;color:var(--slate)}
.cc4 .sqf.l2{background:#C4B7D7;color:var(--slate)}
.cc4 .sqf.l3{background:#A694C2;color:var(--slate)}
.cc4 .sqf.l4{background:#8970AE;color:#fff}
.cc4 .sqf.l5{background:#6B4C9A;color:#fff}
.cc5 .cat-accent, .cc5.cat-accent{background:#A63A2E}
.cc5 .cat-tinted{background:#F4E7E6;color:#A63A2E}
.cc5 .sqf.l1{background:#EDD8D5;color:var(--slate)}
.cc5 .sqf.l2{background:#DBB0AB;color:var(--slate)}
.cc5 .sqf.l3{background:#CA8982;color:var(--slate)}
.cc5 .sqf.l4{background:#B86158;color:#fff}
.cc5 .sqf.l5{background:#A63A2E;color:#fff}
.cc6 .cat-accent, .cc6.cat-accent{background:#0F766E}
.cc6 .cat-tinted{background:#E2EFEE;color:#0F766E}
.cc6 .sqf.l1{background:#CFE4E2;color:var(--slate)}
.cc6 .sqf.l2{background:#9FC8C5;color:var(--slate)}
.cc6 .sqf.l3{background:#6FADA8;color:var(--slate)}
.cc6 .sqf.l4{background:#3F918B;color:#fff}
.cc6 .sqf.l5{background:#0F766E;color:#fff}
.cc7 .cat-accent, .cc7.cat-accent{background:#8E3A6B}
.cc7 .cat-tinted{background:#F1E7ED;color:#8E3A6B}
.cc7 .sqf.l1{background:#E8D8E1;color:var(--slate)}
.cc7 .sqf.l2{background:#D2B0C4;color:var(--slate)}
.cc7 .sqf.l3{background:#BB89A6;color:var(--slate)}
.cc7 .sqf.l4{background:#A56189;color:#fff}
.cc7 .sqf.l5{background:#8E3A6B;color:#fff}
.cc8 .cat-accent, .cc8.cat-accent{background:#C05621}
.cc8 .cat-tinted{background:#F7EBE4;color:#C05621}
.cc8 .sqf.l1{background:#F2DDD3;color:var(--slate)}
.cc8 .sqf.l2{background:#E6BBA6;color:var(--slate)}
.cc8 .sqf.l3{background:#D99A7A;color:var(--slate)}
.cc8 .sqf.l4{background:#CD784D;color:#fff}
.cc8 .sqf.l5{background:#C05621;color:#fff}
.cc9 .cat-accent, .cc9.cat-accent{background:#31456E}
.cc9 .cat-tinted{background:#E6E9EE;color:#31456E}
.cc9 .sqf.l1{background:#D6DAE2;color:var(--slate)}
.cc9 .sqf.l2{background:#ADB5C5;color:var(--slate)}
.cc9 .sqf.l3{background:#838FA8;color:var(--slate)}
.cc9 .sqf.l4{background:#5A6A8B;color:#fff}
.cc9 .sqf.l5{background:#31456E;color:#fff}
.cc10 .cat-accent, .cc10.cat-accent{background:#5F6B1F}
.cc10 .cat-tinted{background:#ECEDE4;color:#5F6B1F}
.cc10 .sqf.l1{background:#DFE1D2;color:var(--slate)}
.cc10 .sqf.l2{background:#BFC4A5;color:var(--slate)}
.cc10 .sqf.l3{background:#9FA679;color:var(--slate)}
.cc10 .sqf.l4{background:#7F894C;color:#fff}
.cc10 .sqf.l5{background:#5F6B1F;color:#fff}
.cc11 .cat-accent, .cc11.cat-accent{background:#475569}
.cc11 .cat-tinted{background:#E9EBED;color:#475569}
.cc11 .sqf.l1{background:#DADDE1;color:var(--slate)}
.cc11 .sqf.l2{background:#B5BBC3;color:var(--slate)}
.cc11 .sqf.l3{background:#9199A5;color:var(--slate)}
.cc11 .sqf.l4{background:#6C7787;color:#fff}
.cc11 .sqf.l5{background:#475569;color:#fff}

/* ---------- at-a-glance mosaic (pupil page) ---------- */
.mosaic{margin:18px 0 6px}
.mo-cat{margin-bottom:10px}
.mo-label{
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--slate-40);margin-bottom:5px;display:flex;align-items:center;gap:7px;
}
.mo-dot{width:9px;height:9px;border-radius:3px;flex:none}
.mo-row{display:flex;flex-wrap:wrap;gap:4px}
.sqf{
  width:30px;height:30px;border-radius:7px;
  display:grid;place-items:center;
  font-size:.72rem;font-weight:700;
  background:var(--rule);color:var(--slate-40);
  text-decoration:none;
}
.sqf .sq-tick{width:14px;height:14px;display:none}
.sqf.l5 .sq-n{display:none}
.sqf.l5 .sq-tick{display:block}
a.sqf:active{transform:scale(.92)}


/* ---------- dashboard: today ----------
   The day is the anchor: a single card with the lessons inside it, so it
   reads as one thing rather than a stack of identical rows. Everything
   below is deliberately lighter.                                        */
.today-card{
  background:var(--card);border:1px solid var(--rule);
  border-radius:18px;overflow:hidden;margin-bottom:26px;
  box-shadow:0 1px 2px rgba(28,43,51,.04), 0 8px 24px -18px rgba(28,43,51,.28);
}
.tc-head{
  display:flex;align-items:baseline;gap:10px;
  padding:16px 18px 13px;
  background:linear-gradient(180deg,#FCFBF8 0%,var(--card) 100%);
  border-bottom:1px solid var(--rule);
}
.tc-day{font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.tc-date{font-size:.8rem;color:var(--slate-40);font-weight:600}
.tc-count{
  margin-left:auto;font-size:.72rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--green);
  background:var(--green-tint);border-radius:20px;padding:4px 10px;
}
.tc-count.none{color:var(--slate-40);background:#F2F0EA}

.tl{
  display:flex;align-items:stretch;gap:0;
  padding:0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--rule);position:relative;
}
.tl:last-child{border-bottom:0}
.tl-rail{width:4px;flex:none;background:var(--rule)}
.tl-in{flex:1;display:flex;align-items:center;gap:13px;padding:14px 16px;min-width:0}
.tl-when{flex:none;width:52px}
.tl-t{display:block;font-size:1.06rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tl-d{display:block;font-size:.74rem;color:var(--slate-40);font-weight:600;margin-top:1px}
.tl-b{flex:1;min-width:0}
.tl-nm{display:block;font-weight:600;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-sm{display:block;font-size:.84rem;color:var(--slate-60);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-chev{flex:none;color:var(--rule-strong);font-size:1.3rem;line-height:1}

/* On now - the one thing that should shout */
.tl.now{background:var(--green-tint)}
.tl.now .tl-rail{background:var(--green)}
.tl.now .tl-t{color:var(--green-dark)}
.tl-pill{
  display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;border-radius:20px;padding:2px 7px;margin-right:6px;
  vertical-align:1px;
}
.tl-pill.live{background:var(--green);color:#fff}
.tl-pill.todo{background:var(--amber);color:#fff}

/* Done - recedes, but still readable */
.tl.done .tl-in{opacity:.55}
.tl.done .tl-rail{background:var(--rule-strong)}
.tl.done .tl-nm{text-decoration:line-through;text-decoration-color:var(--rule-strong)}

/* Finished but unmarked - needs action */
.tl.todo .tl-rail{background:var(--amber)}

.tc-empty{padding:26px 18px 30px;text-align:center}
.tc-empty .tce-ic{
  width:42px;height:42px;border-radius:13px;margin:0 auto 11px;
  background:var(--green-tint);color:var(--green);display:grid;place-items:center;
}
.tc-empty .tce-t{font-weight:700;font-size:1rem;margin-bottom:3px}
.tc-empty .tce-p{font-size:.88rem;color:var(--slate-60);line-height:1.5}

/* ---------- dashboard: needs a look ----------
   Deliberately lighter than the day card - a list, not a stack of cards. */
.att{
  background:var(--card);border:1px solid var(--rule);
  border-radius:16px;overflow:hidden;margin-bottom:26px;
}
.att-head{
  display:flex;align-items:center;gap:9px;padding:13px 16px 11px;
  border-bottom:1px solid var(--rule);
}
.att-head .ah-ic{
  width:22px;height:22px;border-radius:7px;flex:none;
  background:var(--amber-tint);color:var(--amber);display:grid;place-items:center;
}
.att-head b{font-size:.92rem;font-weight:700}
.att-row{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
}
.att-row:last-child{border-bottom:0}
.att-nm{flex:1;font-weight:600;font-size:.96rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-v{
  font-size:.78rem;font-weight:700;flex:none;
  background:var(--amber-tint);color:#9A5A1E;
  border-radius:20px;padding:4px 10px;
}
.att-row.owes .att-v{background:var(--red-tint);color:var(--red)}
.att-more{
  display:block;text-align:center;padding:11px;
  font-size:.86rem;font-weight:600;color:var(--slate-40);
  text-decoration:none;border-top:1px solid var(--rule);
}

/* ---------- dashboard: quick actions ---------- */
.quick-actions{display:flex;gap:10px;margin-bottom:26px}
.qa{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;
  background:var(--card);border:1px solid var(--rule);
  border-radius:14px;padding:15px 10px;
  font-size:.88rem;font-weight:600;color:var(--slate);
  text-decoration:none;
}
.qa:active{background:var(--green-tint);border-color:#CFE3D8}
.qa-ic{
  width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:var(--green-tint);color:var(--green);
}
.qa.alt .qa-ic{background:#E9EEF3;color:#1F5F8B}

/* ---------- dashboard: coming up ---------- */
.up-row{
  display:flex;align-items:center;gap:13px;
  padding:11px 4px;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--rule);
}
.up-row:last-of-type{border-bottom:0}
.up-when{flex:none;width:74px}
.up-day{display:block;font-size:.78rem;font-weight:700;color:var(--green)}
.up-t{display:block;font-size:.94rem;font-weight:600;font-variant-numeric:tabular-nums}
.up-b{flex:1;min-width:0}
.up-nm{display:block;font-weight:600;font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up-sm{display:block;font-size:.8rem;color:var(--slate-40);margin-top:1px}


/* ---------- add to home screen ----------
   One compact row: mark, text, action, close. Fixed above the tab bar.  */
.ins{
  position:fixed;
  left:12px;right:12px;
  bottom:calc(57px + env(safe-area-inset-bottom));
  z-index:59;                 /* under the tab bar, which is 60 */
  max-width:496px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--rule);
  border-radius:14px 14px 0 0;border-bottom:0;padding:11px 12px;
  box-shadow:0 -2px 6px rgba(28,43,51,.05), 0 -14px 36px -18px rgba(28,43,51,.34);
}
/* The hidden attribute must beat any display set here. */
.ins[hidden], .ins-go[hidden]{display:none}

.ins-mark{
  flex:none;display:grid;grid-template-columns:repeat(2,11px);gap:3px;
  padding:6px;background:var(--paper);border-radius:10px;
}
.ins-mark span{width:11px;height:11px;border-radius:3px;display:block}

.ins-t{flex:1;min-width:0;display:block}
.ins-t b{
  display:block;font-size:.92rem;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The iOS instruction is longer than the Android subtitle, so cap it at
   two lines rather than letting the bar grow. */
.ins-sub{
  font-size:.8rem;color:var(--slate-60);line-height:1.35;margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.ins-sub svg{
  width:13px;height:13px;color:var(--green);
  vertical-align:-2px;margin:0 1px;
}

/* .btn sets display:block, width:100% and margin-top:24px - all wrong
   inside a flex row, and the margin is what was pushing the button onto
   its own line. Override all three. The <a> version needs inline-flex so
   the label centres like a real button. */
.ins-go, a.ins-go{
  flex:none;width:auto;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 18px;font-size:.9rem;border-radius:10px;
  min-height:0;text-decoration:none;white-space:nowrap;
}
.ins-x{
  flex:none;width:30px;height:30px;border:0;background:none;
  color:var(--slate-40);font-size:1.35rem;line-height:1;
  cursor:pointer;border-radius:8px;padding:0;
}
.ins-x:active{background:var(--paper)}


/* ---------- add to home screen: instructions page ---------- */
.ins-page{max-width:440px;margin:0 auto;padding:6px 0 30px}
.ip-mark{
  display:grid;grid-template-columns:repeat(2,26px);gap:5px;
  padding:11px;background:var(--card);border:1px solid var(--rule);
  border-radius:16px;width:max-content;margin:0 auto 20px;
}
.ip-mark span{width:26px;height:26px;border-radius:8px;display:block}
.ins-page h2{
  font-size:1.28rem;font-weight:700;letter-spacing:-.02em;
  margin:0 0 9px;text-align:center;line-height:1.3;
}
.ip-lead{
  font-size:.96rem;color:var(--slate-60);line-height:1.55;
  margin:0 0 24px;text-align:center;
}
.ip-steps{list-style:none;margin:0 0 20px;padding:0}
.ip-steps li{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--card);border:1px solid var(--rule);
  border-radius:13px;padding:14px 15px;margin-bottom:9px;
}
.ip-n{
  flex:none;width:25px;height:25px;border-radius:8px;
  background:var(--green);color:#fff;
  font-size:.82rem;font-weight:800;display:grid;place-items:center;
}
.ip-tx{flex:1;font-size:.96rem;line-height:1.5;padding-top:2px}
.ip-tx b{font-weight:700}
.ip-tx svg{
  width:16px;height:16px;color:var(--green);
  vertical-align:-3px;margin:0 2px;
}
.ip-note{
  font-size:.86rem;color:var(--slate-40);line-height:1.5;
  margin:0 0 22px;text-align:center;
}
.ins-page .btn{width:100%}


/* ---------- topic: DSSSM table ---------- */
.dsssm-intro{
  font-size:.94rem;color:var(--slate-60);line-height:1.55;margin:0 0 12px;
}
.dsssm{
  background:var(--card);border:1px solid var(--rule);
  border-radius:14px;overflow:hidden;margin-bottom:26px;
}
.ds-row{
  display:flex;align-items:flex-start;gap:13px;
  padding:13px 15px;border-bottom:1px solid var(--rule);
}
.ds-row:last-child{border-bottom:0}
.ds-letter{
  flex:none;width:28px;height:28px;border-radius:9px;
  background:var(--green-tint);color:var(--green);
  font-size:.92rem;font-weight:800;display:grid;place-items:center;
}
.ds-body{flex:1;min-width:0}
.ds-term{display:block;font-weight:700;font-size:.97rem;margin-bottom:2px}
.ds-def{display:block;font-size:.89rem;color:var(--slate-60);line-height:1.5}

/* ---------- topic: interactive game card ---------- */
.game-card{
  background:var(--card);border:1px solid var(--rule);
  border-radius:16px;padding:16px 15px 15px;margin-bottom:26px;
}
.gc-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.gc-t{flex:1;font-size:1.02rem;font-weight:700;letter-spacing:-.01em}
.gc-pips{display:flex;gap:5px;flex:none}
.gc-pips i{
  width:20px;height:4px;border-radius:2px;background:var(--rule-strong);
  display:block;transition:background .3s;
}
.gc-pips i.on{background:var(--amber)}
.gc-pips i.done{background:var(--green)}
.gc-lead{
  font-size:.89rem;color:var(--slate-60);line-height:1.5;
  margin:0 0 13px;
}

.gc-stage{
  position:relative;border-radius:13px;overflow:hidden;
  border:1px solid var(--rule);touch-action:none;cursor:grab;
  background:#CBE6F2;
}
.gc-stage.dragging{cursor:grabbing}
.gc-stage svg{display:block;width:100%;height:auto}
.gc-stage::after{
  content:"";position:absolute;inset:0;border-radius:13px;
  box-shadow:inset 0 0 0 3px var(--green);opacity:0;transition:opacity .3s;
  pointer-events:none;
}
.gc-stage.solved::after{opacity:1}

.gc-read{
  display:flex;align-items:center;gap:10px;margin-top:12px;
  background:var(--paper);border-radius:11px;padding:11px 12px;
}
.gc-dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--rule-strong);transition:background .2s;
}
.gc-dot.near{background:var(--amber)}
.gc-dot.good{background:var(--green)}
.gc-rt{flex:1;font-size:.87rem;color:var(--slate-60);line-height:1.45}
.gc-rt b{color:var(--slate)}

.gc-done{
  background:var(--green-tint);border:1px solid #CFE3D8;color:var(--green-dark);
  border-radius:12px;padding:13px 14px;margin-top:11px;
  font-size:.9rem;line-height:1.5;display:none;
}
.gc-done.show{display:block}
.gc-done b{display:block;margin-bottom:3px;font-weight:700}

.gc-btn{
  display:block;width:100%;padding:12px;border-radius:10px;border:0;
  background:var(--green);color:#fff;font:inherit;font-weight:600;
  font-size:.94rem;cursor:pointer;margin-top:11px;min-height:var(--tap);
}
.gc-btn:active{background:var(--green-dark)}
.gc-btn.ghost{
  background:none;border:1.5px solid var(--rule-strong);color:var(--slate);
}
.gc-btn.ghost:active{background:var(--paper)}

/* ---------- a11y ---------- */
.mk:focus-visible,.btn:focus-visible,.prow:focus-visible,
.back:focus-visible,.signout button:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* Plan cards - tier markers and the shared manage-subscription button */
.plan-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--green-tint);color:var(--green-dark);font-size:.68rem;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;vertical-align:middle}
.plan-per{font-size:.8rem;font-weight:600;color:var(--slate-40)}
.plan-manage{margin-top:4px}

/* Portal - the instructor's page, linked above the greeting. Sits on the
   same dark ground as the hero so it reads as one block. */
.pinstr{
  display:flex;align-items:center;gap:11px;
  margin:0 0 18px;padding:9px 12px 9px 9px;
  background:rgba(255,255,255,.12);border-radius:12px;
  color:#fff;text-decoration:none;
}
.pinstr:hover{background:rgba(255,255,255,.18)}
.pi-logo{
  width:36px;height:36px;border-radius:9px;object-fit:cover;flex:0 0 auto;
  background:#fff;
}
.pi-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pi-k{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.6}
.pi-n{font-size:.98rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pi-go{width:17px;height:17px;margin-left:auto;flex:0 0 auto;opacity:.5}
.pinstr:hover .pi-go{opacity:.9}

/* Pupil page - reissuing a portal link. Folded away by default: it is a
   rare, slightly alarming action and should not sit next to the everyday
   buttons competing for attention. */
.link-reset{margin-top:14px}
.link-reset summary{
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--slate-40);
  padding:6px 0;list-style:none;
}
.link-reset summary::-webkit-details-marker{display:none}
.link-reset summary::before{content:"⌄ ";display:inline-block;transition:transform .15s}
.link-reset[open] summary::before{transform:rotate(180deg)}
.link-reset summary:hover{color:var(--slate)}
.link-reset p{
  font-size:.88rem;color:var(--slate-60);line-height:1.5;
  margin:6px 0 12px;
}
.link-reset form{margin:0}

/* Portal - text reminder opt-in. Sits with the other cards rather than
   in a settings page: it is a one-tap decision, not configuration. */
.psms .pc-k{margin-bottom:8px}
.psms-p{font-size:.92rem;color:var(--slate-60);line-height:1.5;margin:0 0 12px}
.psms-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.psms-form input[type=tel]{
  flex:1 1 150px;min-width:0;padding:11px 12px;
  border:1px solid var(--rule-strong);border-radius:10px;
  font:inherit;font-size:1rem;background:#fff;
}
.psms-form input[type=tel]:focus{
  outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-tint);
}
.psms-form .btn{flex:0 0 auto}
.psms-flash{
  font-size:.88rem;padding:9px 11px;border-radius:9px;margin:0 0 12px;
  background:var(--paper);color:var(--slate);
}
.psms-flash.ok{background:var(--green-tint);color:var(--green-dark)}
.psms-flash.bad{background:#FDEDEA;color:#A3341F}
.psms-change{margin-top:12px}
.psms-change summary{
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--slate-40);
  padding:4px 0;list-style:none;
}
.psms-change summary::-webkit-details-marker{display:none}
.psms-change summary::before{content:"⌄ ";display:inline-block}
.psms-change summary:hover{color:var(--slate)}
.psms-change .psms-form{margin-top:8px}

/* ---------- pupil portal: icicle progress card ----------
   Replaces the green hero. Each category is a column; squares hang down
   like icicles of different lengths because categories have different
   topic counts. No labels - it is a glanceable, screenshot-friendly
   snapshot. Reuses .sqf and the .cc1-11 / .l1-5 colour system. */
.ihero{padding:16px 16px 0}
.ic-card{
  max-width:520px;margin:0 auto;
  background:var(--card);border:1px solid var(--rule);border-radius:18px;
  padding:18px 16px 16px;
  box-shadow:0 12px 34px -20px rgba(15,61,41,.35);
}
.ic-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;gap:12px}
.ic-name{font-size:1.4rem;font-weight:700;letter-spacing:-0.02em;color:var(--slate);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-pct{font-size:1.5rem;font-weight:800;color:var(--green);line-height:1;text-align:right;flex:0 0 auto}
.ic-pct span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate-40);margin-top:2px}

.ic-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:5px;align-items:start}
.ic-col{display:flex;flex-direction:column;gap:5px}
/* Square sizing for the grid context - overrides .sqf's fixed 30px so the
   11 columns fit any phone width. */
.ic-grid .sqf{width:auto;aspect-ratio:1;height:auto;font-size:.66rem;border-radius:6px}
.ic-tick{width:12px;height:12px}

.ic-instr{
  display:flex;align-items:center;gap:11px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--rule);
  color:var(--slate);text-decoration:none;
}
.ic-logo{width:32px;height:32px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--paper)}
.ic-itxt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ic-ik{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-40)}
.ic-in{font-size:.96rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-igo{width:16px;height:16px;margin-left:auto;flex:0 0 auto;color:var(--slate-40)}
.ic-instr:hover .ic-igo{color:var(--green)}

@media (max-width:380px){
  .ic-grid{gap:4px}
  .ic-grid .sqf{font-size:.6rem}
}

/* Pupils: outstanding-gap view - header and inline fix form */
.gap-head{display:flex;flex-direction:column;gap:2px;margin:4px 0 12px}
.gap-back{font-size:.85rem;font-weight:600;color:var(--slate-40);text-decoration:none}
.gap-back:hover{color:var(--green)}
.gap-title{font-size:1.05rem;font-weight:700;color:var(--slate);letter-spacing:-0.01em}
.gap-fix{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 10px;padding:10px 12px;
  background:var(--paper);border-radius:0 0 12px 12px;
  border:1px solid var(--rule);border-top:none;
}
.gap-fix-l{font-size:.8rem;font-weight:600;color:var(--slate-60);flex:0 0 auto}
.gap-fix input[type=date],.gap-fix input[type=email]{
  flex:1 1 140px;min-width:0;padding:9px 11px;
  border:1px solid var(--rule-strong);border-radius:9px;
  font:inherit;font-size:.95rem;background:#fff;
}
.gap-fix input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}
.gap-fix .btn{flex:0 0 auto;padding:9px 16px}

/* Topic page: embedded video. 16:9, scales to the column on any screen. */
.topic-embed{
  position:relative;width:100%;aspect-ratio:16/9;
  margin:4px 0 8px;border-radius:var(--r);overflow:hidden;
  background:#000;border:1px solid var(--rule);
}
.topic-embed iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}

/* Topic page: acronym table (HDSM, MSPSL, etc.) - real table, not prose. */
.topic-acro{width:100%;border-collapse:collapse;margin:2px 0 8px}
.topic-acro td{padding:11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.topic-acro tr:last-child td{border-bottom:none}
.ta-k{
  width:44px;font-size:1.15rem;font-weight:800;color:var(--green);
  text-align:center;line-height:1.2;padding-right:14px;
}
.ta-b{padding-left:2px}
.ta-label{display:block;font-weight:700;color:var(--slate);font-size:1rem;margin-bottom:2px}
.ta-detail{display:block;color:var(--slate-60);font-size:.95rem;line-height:1.5}

/* App footer - shown across the logged-in app (via foot.php) */
.app-foot{
  margin-top:48px;padding:24px 20px;
  border-top:1px solid var(--rule);
}
.af-in{
  max-width:1100px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.82rem;color:var(--slate-40);line-height:1.5;
}
.af-brand{font-weight:600;color:var(--slate-60)}
.af-dot{color:var(--rule-strong,#CBD3D8)}
.af-by a{color:var(--slate-60);text-decoration:none;font-weight:600}
.af-by a:hover{color:var(--green);text-decoration:underline}
@media (max-width:520px){
  .af-in{justify-content:center;text-align:center}
  .af-dot{display:none}
  .af-in > span{flex-basis:100%}
}