/* Global Education CMS — carried over from the approved demo */
/* ============================================================
   GLOBAL EDUCATION CMS — demo stylesheet
   Palette: convent navy + register paper + brass bell accent
   ============================================================ */
:root{
  /* Taken straight from the school mark: the navy house, the cyan child, the pink child. */
  --navy:#243C54; --navy-2:#1B2E42; --navy-3:#33536F;
  --cyan:#00A8D8; --cyan-2:#28C1EC; --cyan-soft:#DFF4FB;
  --pink:#E4609C; --pink-2:#F27FB4; --pink-soft:#FDE7F1;
  --sky:#00A8D8; --sky-2:#28C1EC; --sky-soft:#DFF4FB;      /* older name, same cyan */
  --teal:#13BFA6; --teal-2:#2ED8BE; --teal-soft:#D4F7F0;

  --grad:linear-gradient(135deg,#00A8D8 0%,#0E7BC4 100%);          /* buttons: confident, readable */
  --grad-warm:linear-gradient(135deg,#E4609C 0%,#F58BB0 100%);     /* the pink accent */
  --grad-play:linear-gradient(135deg,#00A8D8 0%,#E4609C 100%);     /* the two children together */
  --grad-soft:linear-gradient(135deg,#DFF4FB 0%,#FDE7F1 100%);
  --side-grad:linear-gradient(168deg,#2A4A66 0%,#243C54 55%,#1B2E42 100%);

  --paper:#F4F8FB; --card:#FFFFFF; --line:#DEE8F0; --line-2:#EDF3F8;
  --brass:#F59E0B; --brass-soft:#FEF3C7;                    /* late, warnings */
  --sage:#12B981; --sage-soft:#D3F8E9;                      /* present, success */
  --clay:#F2416B; --clay-soft:#FFE3EA;                      /* absent, danger */
  --plum:#8B5CF6; --plum-soft:#EDE9FE;
  --ink:#16283A; --muted:#5C7285; --muted-2:#8FA3B4;
  --r:15px; --r-sm:10px;
  --shadow:0 1px 2px rgba(36,60,84,.06), 0 12px 28px -16px rgba(36,60,84,.28);
  --shadow-lift:0 14px 34px -14px rgba(36,60,84,.42);
  /* Each device's own interface font — nothing is downloaded:
     San Francisco on iPhone, iPad and Mac (-apple-system / BlinkMacSystemFont),
     Segoe UI on Windows, Roboto on Android; Noto Sans or the system default elsewhere.
     Using the font a device already has is allowed everywhere; serving Apple's or
     Microsoft's font files from this site would not be, so we never do. */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --slab:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,"Helvetica Neue","Noto Sans",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button,a,input,select,textarea,[data-view],[data-student],[data-req]{touch-action:manipulation}
.tablewrap{-webkit-overflow-scrolling:touch}
.drawer .bd,.modal .bd,.side-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
h1,h2,h3,h4{font-family:var(--slab); font-weight:600; margin:0; letter-spacing:-.01em}
a{color:var(--sky); text-decoration:none}
button{font-family:inherit; font-size:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:252px 1fr; min-height:100vh}
.side{
  background:var(--navy); color:#DCE4EF; display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow:hidden;
}
/* masthead: the operator's mark sits on its own white letterhead band */
.side-head{background:#fff;padding:15px 16px 13px;border-bottom:2px solid var(--brass)}
.vendormark{display:block;width:100%;max-width:186px;margin:0 auto;background:none;border:0;padding:0;image-rendering:auto}
/* school identity band, directly beneath */
.side-school{
  display:flex;gap:10px;align-items:center;padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0))
}
.crest{display:flex; gap:10px; align-items:center}
.crest .mark{
  width:36px;height:36px;border-radius:50%;background:var(--navy-3);display:grid;place-items:center;
  font-family:var(--slab); font-weight:700; color:var(--brass); font-size:12px; flex:none;
  box-shadow:inset 0 0 0 1.5px var(--brass);letter-spacing:.02em
}
.crest .nm{font-family:var(--slab);font-weight:600;color:#fff;font-size:13.5px;line-height:1.2}
.crest .sub{font-size:10.5px;color:#8FA4C0;margin-top:2px;letter-spacing:.01em}
.termpill{
  margin:11px 10px 2px;padding:7px 11px;border-radius:8px;background:rgba(169,118,26,.16);
  border:1px solid rgba(169,118,26,.32);font-size:11px;color:#E8C98A;display:flex;align-items:center;gap:7px
}
.termpill b{color:#fff;font-weight:600}
.side-scroll{flex:1; overflow-y:auto; padding:10px 10px 24px}
.side-scroll::-webkit-scrollbar{width:6px}
.side-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
.navgrp{margin-top:14px}
.navgrp:first-child{margin-top:4px}
.navgrp h5{
  font-family:var(--sans); font-size:10.5px; font-weight:600; color:#7A90AE;
  margin:0 0 6px 10px; letter-spacing:.06em;
}
.navitem{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:7px 10px;border-radius:7px;border:0;background:transparent;color:#C7D3E4;
  font-size:13px;font-weight:500;transition:background .12s,color .12s;margin-bottom:1px;
}
@media(hover:hover){.navitem:hover{background:rgba(255,255,255,.07);color:#fff}}
.navitem.on{background:var(--navy-3);color:#fff;box-shadow:inset 2px 0 0 var(--brass)}
.navitem.on svg{color:var(--brass)}
.navitem svg{width:15px;height:15px;flex:none;color:#8AA0BD}
.navitem .tag{margin-left:auto;background:var(--clay);color:#fff;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:20px}
.side-foot{padding:11px 14px;border-top:1px solid rgba(255,255,255,.09);font-size:10.5px;color:#6F87A6;line-height:1.55}

/* ---------- topbar ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.top{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:0 22px;display:flex;align-items:center;gap:14px;height:60px;
}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:7px;padding:6px}
.top .where{min-width:0}
.top .where h1{font-size:17px}
.top .where p{margin:1px 0 0;font-size:12px;color:var(--muted)}
.top .spacer{flex:1}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:9px;width:14px;height:14px;color:var(--muted-2)}
.search input{
  font-family:var(--sans);font-size:13px;padding:7px 10px 7px 29px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);width:210px;color:var(--ink)
}
.roleswitch{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.roleswitch button{
  border:0;background:transparent;padding:5px 11px;border-radius:6px;font-size:12.5px;
  font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px
}
.roleswitch button.on{background:var(--navy);color:#fff}
.roleswitch button svg{width:14px;height:14px}
.iconbtn{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px;display:grid;place-items:center;position:relative}
.iconbtn svg{width:16px;height:16px;color:var(--navy-2)}
.dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--clay);border:1.5px solid #fff}
.me{display:flex;align-items:center;gap:9px;padding:5px 8px 5px 12px;border-left:1px solid var(--line);
  background:none;border-top:0;border-right:0;border-bottom:0;border-radius:9px;font-family:var(--sans);text-align:left}
.me:hover{background:var(--paper)}
.me .caret{width:13px;height:13px;color:var(--muted-2);flex:none;transition:transform .15s}
.me[aria-expanded="true"] .caret{transform:rotate(180deg)}

/* account menu */
.menu{
  position:absolute;top:52px;right:16px;width:262px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 44px -14px rgba(15,36,64,.34);z-index:70;overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .14s,transform .14s
}
.menu.on{opacity:1;pointer-events:auto;transform:none}
.menu .mhead{padding:12px 14px;border-bottom:1px solid var(--line-2);display:flex;gap:10px;align-items:center}
.menu .mhead b{font-size:13px;display:block;line-height:1.25}
.menu .mhead span{font-size:11.5px;color:var(--muted)}
.menu h6{margin:0;padding:9px 14px 5px;font-size:10.5px;font-weight:600;color:var(--muted-2);letter-spacing:.05em}
.mitem{display:flex;width:100%;gap:9px;align-items:center;padding:8px 14px;border:0;background:transparent;
  font-size:13px;font-family:var(--sans);text-align:left;color:var(--ink)}
.mitem:hover{background:var(--paper)}
.mitem .av{width:26px;height:26px;font-size:10px}
.mitem .lab{line-height:1.25}
.mitem .lab span{display:block;font-size:11px;color:var(--muted)}
.mitem .tick{margin-left:auto;color:var(--sage);opacity:0}
.mitem.on .tick{opacity:1}
.mitem.on{background:var(--sky-soft)}
.menu .mfoot{border-top:1px solid var(--line-2);padding:5px 0}
.mitem.danger{color:var(--clay);font-weight:600}
.mitem.danger svg{color:var(--clay)}
@media(max-width:700px){.menu{right:10px;left:10px;width:auto;top:50px}}
.me .t{font-size:12.5px;font-weight:600;line-height:1.2}
.me .t span{display:block;font-weight:400;color:var(--muted);font-size:11px}
.av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff;background:var(--navy-3);flex:none}

/* ---------- content ---------- */
.content{padding:22px 26px;width:100%;max-width:none;min-height:78vh}
/* On a very wide monitor the text is centred rather than stretched across a
   metre of glass, but nothing is left stranded down the right. */
@media(min-width:1700px){ .content{max-width:1560px;margin:0 auto} }
.pagehead{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.pagehead h2{font-size:21px}
.pagehead p{margin:3px 0 0;color:var(--muted);font-size:13px;max-width:62ch}
.pagehead .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.btn{
  border:1px solid var(--line);background:var(--card);color:var(--ink);padding:7px 13px;
  border-radius:8px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:7px;
  transition:background .12s,border-color .12s
}
@media(hover:hover){.btn:hover{background:var(--line-2)}
tbody tr:hover{background:#FCFBF8}}
.btn svg{width:14px;height:14px}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.brass{background:var(--brass);border-color:var(--brass);color:#fff}
.btn.ok{background:var(--sage);border-color:var(--sage);color:#fff}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:6px}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.5;pointer-events:none}

.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g23{grid-template-columns:2fr 1fr}
.g32{grid-template-columns:1fr 2fr}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card>header{
  padding:13px 16px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px
}
.card>header h3{font-size:14.5px}
.card>header .r{margin-left:auto;display:flex;gap:7px;align-items:center}
.card .body{padding:16px}
.card .body.tight{padding:0}
.hint{font-size:12px;color:var(--muted)}

/* stat tiles */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--navy-3)}
.stat.s-sage::before{background:var(--sage)} .stat.s-clay::before{background:var(--clay)}
.stat.s-brass::before{background:var(--brass)} .stat.s-sky::before{background:var(--sky)}
.stat .k{font-size:12px;color:var(--muted);font-weight:500}
.stat .v{font-family:var(--slab);font-size:25px;font-weight:600;margin-top:3px;letter-spacing:-.02em}
.stat .d{font-size:11.5px;margin-top:3px;color:var(--muted)}
.stat .d b{color:var(--sage);font-weight:600}
.stat .d b.dn{color:var(--clay)}

/* chips & badges */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:2px 8px;border-radius:20px;background:var(--line-2);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--sage-soft);color:var(--sage)}
.chip.warn{background:var(--brass-soft);color:var(--brass)}
.chip.bad{background:var(--clay-soft);color:var(--clay)}
.chip.info{background:var(--sky-soft);color:var(--sky)}
.chip.plum{background:var(--plum-soft);color:var(--plum)}
.chip .bullet{width:6px;height:6px;border-radius:50%;background:currentColor}

/* tables */
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;font-size:11.5px;font-weight:600;color:var(--muted);padding:9px 14px;
  border-bottom:1px solid var(--line);background:#FBFAF7;white-space:nowrap
}
tbody td{padding:10px 14px;border-bottom:1px solid var(--line-2);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td .nm{font-weight:600}
td .sm{font-size:11.5px;color:var(--muted)}
.num{text-align:right}
.tablewrap{overflow-x:auto}
.rowlink{cursor:pointer}

.person{display:flex;align-items:center;gap:9px}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{
  border:0;background:transparent;padding:8px 13px;font-size:13px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap
}
.tabs button.on{color:var(--navy);border-bottom-color:var(--brass)}

/* register grid — the signature element */
.register{display:flex;flex-direction:column;gap:9px}
.regrow{display:grid;grid-template-columns:92px 1fr 128px;gap:12px;align-items:center}
.regrow .cls{font-family:var(--slab);font-weight:600;font-size:13px}
.regrow .cls span{display:block;font-family:var(--sans);font-weight:400;font-size:11px;color:var(--muted)}
.marks{display:flex;flex-wrap:wrap;gap:3px}
.mk{width:12px;height:15px;border-radius:2px;background:var(--sage);opacity:.85}
.mk.a{background:var(--clay)} .mk.l{background:var(--brass)} .mk.e{background:#D8D3C6}
.regrow .pct{display:flex;align-items:center;gap:8px;justify-content:flex-end;font-size:12px;font-weight:600}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted);align-items:center}
.legend i{width:9px;height:11px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* bars */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:8px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.bars .b .fill{width:100%;background:var(--navy-3);border-radius:4px 4px 0 0;position:relative;min-height:3px}
.bars .b .fill.target{background:repeating-linear-gradient(45deg,var(--line-2),var(--line-2) 4px,#fff 4px,#fff 8px);border:1px solid var(--line)}
.bars .b em{font-style:normal;font-size:11px;color:var(--muted)}
.bars .b .val{font-size:11px;font-weight:700;color:var(--navy)}

.meter{height:7px;background:var(--line-2);border-radius:5px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--sage);border-radius:5px}
.meter i.warn{background:var(--brass)} .meter i.bad{background:var(--clay)} .meter i.sky{background:var(--sky)}

/* timeline / feed */
.feed{display:flex;flex-direction:column}
.fitem{display:flex;gap:11px;padding:11px 16px;border-bottom:1px solid var(--line-2)}
.fitem:last-child{border-bottom:0}
.fitem .ic{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--line-2)}
.fitem .ic svg{width:14px;height:14px;color:var(--navy-2)}
.fitem .ic.ok{background:var(--sage-soft)} .fitem .ic.ok svg{color:var(--sage)}
.fitem .ic.bad{background:var(--clay-soft)} .fitem .ic.bad svg{color:var(--clay)}
.fitem .ic.warn{background:var(--brass-soft)} .fitem .ic.warn svg{color:var(--brass)}
.fitem .ic.info{background:var(--sky-soft)} .fitem .ic.info svg{color:var(--sky)}
.fitem p{margin:0;font-size:13px}
.fitem .t{font-size:11.5px;color:var(--muted-2);margin-top:2px}

.period{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line-2);align-items:center}
.period:last-child{border-bottom:0}
.period .tm{font-family:var(--slab);font-size:12.5px;font-weight:600;color:var(--navy)}
.period .tm span{display:block;font-family:var(--sans);font-weight:400;font-size:10.5px;color:var(--muted)}
.period.now{background:var(--brass-soft)}
.period .sub{font-weight:600;font-size:13px}
.period .mt{font-size:11.5px;color:var(--muted)}

/* forms */
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:var(--navy-2)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--line);
  border-radius:7px;background:#fff;color:var(--ink)
}
.field textarea{min-height:92px;resize:vertical;line-height:1.55}
.field .help{font-size:11.5px;color:var(--muted);margin-top:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* segmented attendance control */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:#fff;padding:5px 11px;font-size:12px;font-weight:700;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on[data-v="P"]{background:var(--sage);color:#fff}
.seg button.on[data-v="A"]{background:var(--clay);color:#fff}
.seg button.on[data-v="L"]{background:var(--brass);color:#fff}
.seg button.on[data-v="S"]{background:var(--sky);color:#fff}

/* drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(15,36,64,.42);z-index:90;opacity:0;pointer-events:none;transition:opacity .18s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(480px,94vw);background:var(--card);z-index:95;
  transform:translateX(102%);transition:transform .22s ease;display:flex;flex-direction:column;
  box-shadow:-10px 0 40px rgba(15,36,64,.2)
}
.drawer.on{transform:none}
.drawer header,.modal header{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.drawer header h3,.modal header h3{font-size:15px}
.drawer .bd,.modal .bd{padding:18px;overflow-y:auto;flex:1}
.drawer footer,.modal footer{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:#FBFAF7}
.x{margin-left:auto;border:0;background:transparent;font-size:19px;line-height:1;color:var(--muted);padding:2px 4px}
.modal{
  position:fixed;z-index:95;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;pointer-events:none;
  width:min(640px,94vw);max-height:88vh;background:var(--card);border-radius:12px;display:flex;flex-direction:column;
  box-shadow:0 30px 80px -20px rgba(15,36,64,.45);transition:opacity .16s,transform .16s
}
.modal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
.modal.wide{width:min(920px,95vw)}

/* definition list */
.dl{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:13px}
.dl dt{color:var(--muted);font-size:12px}
.dl dd{margin:0;font-weight:500}

/* report card */
.rc{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.rc .rchead{background:var(--navy);color:#fff;padding:14px 16px;display:flex;gap:12px;align-items:center}
.rc .rchead h4{color:#fff;font-size:15px}
.rc .rchead p{margin:2px 0 0;font-size:11.5px;color:#9DB2CE}
.grade{font-family:var(--slab);font-weight:700;font-size:13px}
.g-A{color:var(--sage)} .g-B{color:var(--sky)} .g-C{color:var(--brass)} .g-D{color:#B8621A} .g-F{color:var(--clay)}

.divbox{display:flex;gap:14px;padding:12px 16px;background:var(--brass-soft);border-top:1px solid var(--line)}
.divbox div{flex:1}
.divbox .k{font-size:11px;color:var(--brass);font-weight:600}
.divbox .v{font-family:var(--slab);font-size:18px;font-weight:700;color:var(--navy)}

/* note / acknowledgement */
.note{border:1px solid var(--line);border-radius:9px;padding:14px;margin-bottom:12px;background:#fff}
.note.unread{border-left:3px solid var(--brass);background:#FFFDF8}
.note h4{font-size:13.5px}
.note p{margin:7px 0 0;font-size:13px;color:#33322E;line-height:1.6}
.note .meta{display:flex;gap:9px;align-items:center;font-size:11.5px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.note .ackbar{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);display:flex;gap:9px;align-items:center;flex-wrap:wrap}

.empty{padding:38px 20px;text-align:center;color:var(--muted)}
.empty h4{font-size:14px;color:var(--ink);margin-bottom:5px}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);background:var(--navy);color:#fff;
  padding:11px 17px;border-radius:9px;font-size:13px;font-weight:500;z-index:120;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;box-shadow:0 14px 40px -10px rgba(15,36,64,.6);display:flex;gap:9px;align-items:center
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:15px;height:15px;color:#7FD3A8}

.kbd{font-family:var(--slab);font-size:11px;background:var(--line-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.sep{height:1px;background:var(--line-2);margin:14px 0}
.stack{display:flex;flex-direction:column;gap:10px}
.inline{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.mono{font-family:var(--slab);letter-spacing:.02em}

/* demo banner */
.demobar{background:var(--navy-2);color:#CFDCEC;font-size:12px;padding:6px 22px;display:flex;gap:10px;align-items:center}
.demobar b{color:#fff}
.demobar .right{color:#9DB2CE}




/* ============================================================
   DOCUMENTS, CERTIFICATES & BROADCAST
   ============================================================ */

/* segmented switch */
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;margin-bottom:14px}
.seg button{
  border:0;background:transparent;padding:7px 15px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:6px
}
.seg button.on{background:var(--navy);color:#fff}
.seg button.on svg{color:var(--brass)}

/* completeness bar in a table cell */
.pack{display:flex;align-items:center;gap:9px;min-width:150px}
.pack .meter{flex:1}
.pack b{font-family:var(--slab);font-size:12.5px;min-width:34px;text-align:right}

/* a single document line inside the drawer */
.doc{
  display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)
}
.doc:last-of-type{border-bottom:0}
.doc .ico{
  width:34px;height:34px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--paper);color:var(--muted-2);border:1px solid var(--line)
}
.doc.have .ico{background:#EDF5EE;color:var(--sage);border-color:#CDE3D2}
.doc.miss .ico{background:#FDF0EE;color:var(--clay);border-color:#F2D5D0}
.doc .t{flex:1;min-width:0}
.doc .t b{display:block;font-size:13.5px;font-weight:600}
.doc .t span{display:block;font-size:11.5px;color:var(--muted);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc .btn{flex:none;padding:6px 11px;font-size:12px}
.doc .req{font-size:10px;font-weight:700;color:var(--clay);letter-spacing:.04em}

/* drag and drop target */
.dropzone{
  border:1.5px dashed var(--line-2);border-radius:var(--r-sm);background:var(--paper);
  padding:22px 18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6;
  transition:border-color .15s, background .15s
}
.dropzone.hot{border-color:var(--navy);background:#F2F6FC;color:var(--navy)}
.dropzone b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}

/* serial number plate */
.serial{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--slab);font-size:14px;font-weight:600;
  background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:7px 12px;color:var(--navy)
}
.serial small{font-family:var(--sans);font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.05em}

/* certificate picker tiles */
.certgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:11px}
.certtile{
  text-align:left;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  padding:15px;color:var(--ink);display:flex;flex-direction:column;gap:7px
}
.certtile .ico{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;
  background:var(--navy);color:var(--brass)}
.certtile b{font-size:14px}
.certtile span{font-size:11.5px;color:var(--muted);line-height:1.55}
@media(hover:hover){.certtile:hover{border-color:var(--navy);box-shadow:var(--shadow)}}

/* broadcast channel buttons in a row */
.chans{display:flex;gap:6px;flex-wrap:wrap}
.chans .btn{padding:5px 10px;font-size:11.5px}
.btn.wa{border-color:#128C7E;color:#0E6E62}
.btn.wa svg{color:#128C7E}

/* the message preview block */
.msgbox{
  white-space:pre-wrap;font-size:12px;line-height:1.65;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:6px;padding:12px 14px;margin:0
}

/* ============================================================
   EMERGENCY  —  SOS button and panel
   Present on every view, for every role. Red is reserved for
   this and nothing else in the interface.
   ============================================================ */
:root{ --sos:#C4231B; --sos-dark:#9A1911; --sos-soft:#FDECEA; }

.sosbtn{
  position:fixed; right:20px; bottom:22px; z-index:300;
  display:flex; align-items:center; gap:9px;
  padding:13px 19px 13px 16px; border:0; border-radius:999px;
  background:var(--sos); color:#fff;
  font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.03em;
  box-shadow:0 4px 14px rgba(154,25,17,.4), 0 0 0 4px rgba(196,35,27,.16);
}
.sosbtn svg{width:19px; height:19px; stroke-width:2.2}
.sosbtn:active{background:var(--sos-dark)}
@media(hover:hover){.sosbtn:hover{background:var(--sos-dark)}}
@media print{.sosbtn{display:none}}
@media(max-width:700px){
  .sosbtn{
    right:14px; bottom:calc(60px + env(safe-area-inset-bottom));
    padding:12px 16px 12px 14px; font-size:13px;
  }
}

/* ---- the panel ---- */
.sos{
  position:fixed; inset:0; z-index:320; display:none;
  background:rgba(12,20,34,.62); backdrop-filter:blur(3px);
  padding:24px; overflow:auto;
}
.sos.on{display:flex; align-items:flex-start; justify-content:center}
.sos .sheet{
  width:100%; max-width:560px; margin:auto;
  background:var(--card); border-radius:var(--r); overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(10,20,40,.55);
}
.sos .hd{
  background:var(--sos); color:#fff; padding:16px 20px;
  display:flex; align-items:center; gap:11px;
}
.sos .hd svg{width:22px; height:22px; flex:none}
.sos .hd h3{color:#fff; font-size:18px; margin:0; flex:1}
.sos .hd button{
  border:0; background:rgba(255,255,255,.16); color:#fff;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
}
.sos .hd button svg{width:16px; height:16px}
.sos .bd{padding:20px}
.sos .step{font-size:13px; color:var(--muted); margin:0 0 14px; line-height:1.6}

/* what has happened */
.sostypes{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.sostype{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  padding:14px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); color:var(--ink); font-size:14px; font-weight:600;
}
.sostype svg{width:20px; height:20px; color:var(--sos)}
.sostype span{font-size:11.5px; font-weight:400; color:var(--muted); line-height:1.45}
.sostype.on,.sostype:active{border-color:var(--sos); background:var(--sos-soft)}
@media(hover:hover){.sostype:hover{border-color:var(--sos)}}
@media(max-width:480px){.sostypes{grid-template-columns:1fr}}

/* a call target */
.soscall{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); color:var(--ink); margin-bottom:8px;
}
.soscall .ico{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--sos-soft); color:var(--sos);
}
.soscall .ico svg{width:17px; height:17px}
.soscall .t{flex:1; min-width:0}
.soscall .t b{display:block; font-size:14px; font-weight:600}
.soscall .t span{display:block; font-size:11.5px; color:var(--muted); line-height:1.45}
.soscall .num{font-family:var(--slab); font-size:15px; font-weight:600; color:var(--sos); flex:none}
.soscall.pri{background:var(--sos); border-color:var(--sos); color:#fff}
.soscall.pri .ico{background:rgba(255,255,255,.18); color:#fff}
.soscall.pri .t span{color:rgba(255,255,255,.8)}
.soscall.pri .num{color:#fff; font-size:19px}
.soscall.wa{border-color:#128C7E}
.soscall.wa .ico{background:#E3F3F0; color:#128C7E}
.soscall.unset{opacity:.6}
.soscall.unset .num{font-size:11.5px; font-family:var(--sans); color:var(--muted)}

.sos h4{font-size:12.5px; color:var(--navy-2); margin:18px 0 8px}
.sos h4:first-child{margin-top:0}

/* the standing warning: this is a demo, not a dispatch system */
.sosnote{
  background:#FFF8E6; border:1px solid #E8D9A8; border-left:3px solid var(--brass);
  border-radius:var(--r-sm); padding:11px 13px; font-size:12px; line-height:1.6;
  color:#6B5312; margin-bottom:16px;
}
.sosnote b{color:#4A3908}
.soslog{font-size:12px; color:var(--muted); line-height:1.7; margin:0}
.soslog li{margin-bottom:3px}

/* ============================================================
   SIGN IN  —  full-screen gate, sits above the shell
   The app is built behind it on first paint, so signing in
   lifts a curtain instead of loading a page.
   ============================================================ */
.login{
  position:fixed; inset:0; z-index:400;
  display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--paper);
  opacity:1; visibility:visible;
  transition:opacity .3s ease, visibility 0s linear 0s;
}
/* signed in: the gate leaves the page entirely, till sign-out */
.login:not(.off) ~ .sosbtn{display:none}
.login.off{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility 0s linear .3s;
}

/* ---- left: the operator's letterhead ---- */
.login .pane{
  background:var(--navy); color:#C9D5E8;
  padding:44px 52px calc(38px + env(safe-area-inset-bottom));
  padding-left:max(52px,env(safe-area-inset-left));
  display:flex; flex-direction:column; justify-content:space-between;
  gap:36px; overflow:auto;
}
.login .pane > img{
  display:block; width:284px; max-width:72%; height:auto;
  background:#fff; border-radius:8px; padding:11px 15px;
  border-bottom:3px solid var(--brass);
}
.login .pane h2{
  color:#fff; font-size:34px; line-height:1.18; letter-spacing:-.02em;
  max-width:15ch; margin:0 0 14px;
}
.login .pane .motto{
  font-family:var(--slab); font-style:italic; font-size:15px;
  color:var(--brass); margin:0 0 16px;
}
.login .pane .lead{
  font-size:14.5px; line-height:1.7; color:#AFC0DA; max-width:46ch; margin:0;
}
.login .pane .foot{
  font-size:11.5px; line-height:1.7; color:#8195B5;
  border-top:1px solid rgba(255,255,255,.14); padding-top:14px;
}

/* ---- right: the desk where you sign ---- */
.login .side2{
  display:flex; align-items:center; justify-content:center;
  padding:40px 40px calc(40px + env(safe-area-inset-bottom));
  padding-right:max(40px,env(safe-area-inset-right));
  overflow:auto;
}
.login .box{
  width:100%; max-width:412px;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:28px;
}
.login .box h3{font-size:21px; margin:0 0 5px}
.login .box .sub{font-size:13px; color:var(--muted); margin:0 0 18px; line-height:1.6}
.login .box .btn.pri{font-size:14px; font-weight:600}
.login .box .hint{line-height:1.6}

/* the account chooser reads as a list of people, not a dropdown */
#acctList{display:flex; flex-direction:column; gap:7px}
.acct{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 11px; color:var(--ink); transition:border-color .14s, background .14s;
}
.acct .who{
  display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;
  font-size:13.5px; font-weight:600;
}
.acct .who span{font-size:11.5px; font-weight:400; color:var(--muted); line-height:1.45}
.acct .tick{display:none; color:var(--sage); flex:none}
.acct .tick svg{width:16px; height:16px; display:block}
.acct.on{border-color:var(--navy); background:#F7F9FC; box-shadow:inset 0 0 0 1px var(--navy)}
.acct.on .tick{display:block}
@media(hover:hover){.acct:hover{border-color:var(--navy-3)}}

/* the mark that stands in for the navy pane on phones */
.loginmark{display:none}

/* ============================================================
   RESPONSIVE  —  desktop · tablet rail · phone
   ============================================================ */

/* safe areas (iPhone notch / Android gesture bar) */
.side{padding-top:env(safe-area-inset-top)}
.top{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}

/* ---- large desktop down to laptop ---- */
@media(max-width:1240px){ .g4{grid-template-columns:repeat(2,1fr)} }

/* ---- small laptops 1025–1180 : icon rail — switched off in 5.6.8: a later rule kept the sidebar
   252px wide, so it half-collapsed; the normal sidebar fits these screens well ---- */
@media(min-width:1025px) and (max-width:1024px){
  .shell{grid-template-columns:74px 1fr}
  .side-head{padding:9px 6px}
  .vendormark{max-width:60px}
  .side-school{justify-content:center;padding:10px 4px}
  .crest .nm,.crest .sub{display:none}
  .termpill{display:none}
  .side-scroll{padding:8px 8px 20px}
  .navgrp h5{display:none}
  .navgrp{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.09)}
  .navgrp:first-child{border-top:0}
  .navitem{justify-content:center;padding:10px 0;position:relative}
  .navitem span:not(.tag){display:none}
  .navitem svg{width:18px;height:18px}
  .navitem .tag{position:absolute;top:3px;right:10px;font-size:9px;padding:0 4px}
  .side-foot{display:none}
  .g23,.g32,.g3{grid-template-columns:1fr}
  .search input{width:150px}
}

/* ---- tablets (iPad up to 1024 wide) & below : off-canvas nav — the menu button is shown up to 1024 ---- */
@media(max-width:1024px){
  .shell{grid-template-columns:1fr}
  .side{
    position:fixed;left:0;top:0;z-index:110;width:270px;height:100dvh;
    transform:translateX(-102%);transition:transform .22s ease;box-shadow:6px 0 30px rgba(15,36,64,.28)
  }
  .side.on{transform:none}
  .burger{display:grid;width:38px;height:38px}
  .top{height:56px;gap:10px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .top .where h1{font-size:16px}
  .top .where p{display:none}
  .search{display:none}
  .g2{grid-template-columns:1fr}
  .content{padding:16px}
  .pagehead h2{font-size:19px}
  .g23,.g32,.g3{grid-template-columns:1fr}
}

/* ---- phones ---- */
@media(max-width:700px){
  .demobar{font-size:11px;padding:5px 14px}
  .demobar .right{display:none}
  .roleswitch{display:none}            /* replaced by the account sheet + bottom bar */
  .me .t{display:none}
  .me{padding-left:8px;gap:6px}
  .content{padding:14px 14px calc(86px + env(safe-area-inset-bottom))}
  .g4{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid{gap:12px}
  .stat{padding:12px}
  .stat .v{font-size:21px}
  .stat .k{font-size:11.5px}
  .stat .d{font-size:11px}
  .pagehead{gap:10px;margin-bottom:14px}
  .pagehead h2{font-size:18px}
  .pagehead p{font-size:12.5px}
  .pagehead .acts{margin-left:0;width:100%}
  .pagehead .acts .btn{flex:1;justify-content:center}
  .card>header{padding:11px 13px}
  .card .body{padding:13px}
  .btn{padding:9px 13px}               /* 40px tall touch targets */
  .btn.sm{padding:6px 10px}
  .seg button{padding:9px 14px;font-size:13px}
  .field input,.field select,.field textarea,
  .search input,input,select,textarea{font-size:16px}   /* stops iOS auto-zoom */
  .regrow{grid-template-columns:74px 1fr;gap:9px}
  .regrow .pct{grid-column:1/-1;justify-content:flex-start}
  .mk{width:10px;height:13px}
  .bars{height:120px;gap:6px}
  .dl{grid-template-columns:110px 1fr;gap:6px 10px;font-size:12.5px}
  .row2{grid-template-columns:1fr}
  .divbox{flex-wrap:wrap;gap:10px}
  .divbox div{flex:0 0 44%}
  .rc .rchead{flex-wrap:wrap}
  .fitem{padding:11px 13px}
  .note{padding:12px}
  .note .ackbar .btn{flex:1;justify-content:center}
  .toast{left:14px;right:14px;bottom:calc(80px + env(safe-area-inset-bottom));transform:translateY(14px)}
  .toast.on{transform:none}

  /* drawer & modal become bottom sheets */
  .drawer{
    top:auto;left:0;right:0;bottom:0;width:100%;height:90dvh;border-radius:16px 16px 0 0;
    transform:translateY(100%);box-shadow:0 -10px 40px rgba(15,36,64,.3)
  }
  .drawer.on{transform:none}
  .drawer header::before,.modal header::before{
    content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:3px;background:var(--line)
  }
  .drawer header,.modal header{position:relative;padding-top:19px}
  .modal,.modal.wide{
    top:auto;left:0;bottom:0;width:100%;max-width:none;max-height:92dvh;border-radius:16px 16px 0 0;
    transform:translateY(100%)
  }
  .modal.on{transform:translateY(0)}
  .drawer footer,.modal footer{padding-bottom:calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .drawer footer .btn,.modal footer .btn{flex:1;justify-content:center}

  /* tables stack into labelled cards */
  .stackable thead{display:none}
  .stackable,.stackable tbody{display:block}
  .stackable tbody tr{
    display:block;padding:12px 13px;border-bottom:1px solid var(--line);background:transparent!important
  }
  .stackable tbody tr:last-child{border-bottom:0}
  .stackable tbody td{
    display:flex;align-items:flex-start;gap:10px;border:0;padding:3px 0;font-size:13px;text-align:left
  }
  .stackable tbody td::before{
    content:attr(data-l);flex:none;width:104px;color:var(--muted);font-size:11.5px;font-weight:600;padding-top:2px
  }
  .stackable tbody td:not([data-l])::before{display:none}
  .stackable tbody td:first-child{display:block;font-weight:600;margin-bottom:7px;font-size:14px}
  .stackable tbody td:first-child::before{display:none}
  .stackable tbody td.num{justify-content:flex-start}
  .stackable tbody td>div[style*="width"]{width:auto!important;flex:1}
  .stackable tbody td .meter{min-width:90px}
  .tablewrap{overflow-x:visible}
  /* tables that start with a row-number column: hide it, promote the name */
  .stackable.hashfirst tbody td:first-child{display:none}
  .stackable.hashfirst tbody td:nth-child(2){display:block;font-weight:600;margin-bottom:7px;font-size:14px}
  .stackable.hashfirst tbody td:nth-child(2)::before{display:none}

  /* login */
  .login{grid-template-columns:1fr}
  .login .pane{display:none}
  .login .box{border:0;box-shadow:none;background:transparent;padding:0}
  .login .side2{padding:22px 18px calc(22px + env(safe-area-inset-bottom));align-items:flex-start}
  .login .box h3{font-size:18px}
  .login .box{padding-top:8px}
  .loginmark{display:block;width:196px;margin:0 auto 22px;background:#fff;border-radius:6px;padding:4px 6px;border:1px solid var(--line)}
}
@media(min-width:701px){ .loginmark{display:none} }

/* ---- very small phones ---- */
@media(max-width:380px){
  .g4{grid-template-columns:1fr}
  .content{padding:12px 12px calc(84px + env(safe-area-inset-bottom))}
  .crest .nm{font-size:13px}
}

/* ---- landscape phone: reclaim vertical space ---- */
@media(max-height:460px) and (orientation:landscape){
  .demobar{display:none}
  .top{height:48px}
  .drawer,.modal{height:96dvh;max-height:96dvh}
}

/* ---- bottom tab bar (phones only) ---- */
.bottomnav{display:none}
@media(max-width:700px){
  .bottomnav{
    display:grid;position:fixed;left:0;right:0;bottom:0;z-index:80;
    grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)
  }
  .bottomnav button{
    border:0;background:transparent;padding:8px 2px 7px;display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:10px;font-weight:600;color:var(--muted-2);min-height:52px
  }
  .bottomnav button svg{width:19px;height:19px}
  .bottomnav button.on{color:var(--navy)}
  .bottomnav button.on svg{color:var(--brass)}
  .bottomnav button .tag{
    position:absolute;transform:translate(14px,-4px);background:var(--clay);color:#fff;
    font-size:9px;font-weight:700;padding:0 4px;border-radius:9px
  }
}

@media print{.side,.top,.demobar,.noprint{display:none}.content{padding:0}}

/* ============================================================
   Laravel additions — forms, flash, pagination, banners
   ============================================================ */
.flash{display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:9px;margin-bottom:16px;font-size:13px;font-weight:500}
.flash.ok{background:var(--sage-soft);color:var(--sage);border:1px solid rgba(34,104,75,.25)}
.flash.bad{background:var(--clay-soft);color:var(--clay);border:1px solid rgba(165,50,42,.25)}
.flash svg{width:16px;height:16px;flex:none}
.field .err{font-size:12px;color:var(--clay);margin-top:5px;font-weight:500}
.field input.is-bad,.field select.is-bad{border-color:var(--clay);background:#FFFBFA}
.acting{display:flex;gap:10px;align-items:center;background:var(--brass-soft);border-bottom:1px solid rgba(169,118,26,.3);
  padding:8px 22px;font-size:12.5px;color:#6B4A0F}
.acting b{color:#4A3308}
.acting form{margin-left:auto}
.pager{display:flex;gap:4px;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.pager .pages{display:flex;gap:4px;flex-wrap:wrap}
.pager a,.pager span.pg{min-width:32px;height:32px;padding:0 9px;display:inline-grid;place-items:center;border:1px solid var(--line);
  border-radius:7px;font-size:12.5px;color:var(--ink);background:#fff}
.pager span.pg.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600}
.pager span.pg.off{color:var(--muted-2);background:var(--paper)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters input,.filters select{font-family:var(--sans);font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.filters input{min-width:220px}
.navitem[aria-disabled="true"]{opacity:.55;cursor:default}
.navitem .soon{margin-left:auto;font-size:9.5px;font-weight:600;color:#8FA4C0;border:1px solid rgba(255,255,255,.18);padding:0 6px;border-radius:10px}
.democreds{margin-top:18px;border:1px dashed var(--line);border-radius:9px;padding:11px 13px;font-size:12px;color:var(--muted)}
.democreds table{font-size:12px}.democreds td{padding:3px 6px;border:0}
.errorpage{min-height:100vh;display:grid;place-items:center;padding:30px;text-align:center}
.errorpage h1{font-size:44px;color:var(--navy)}
@media(max-width:700px){.filters input{min-width:0;flex:1}.acting{padding:8px 14px;flex-wrap:wrap}}

/* Phase 2 — inline table editing, checklist */
.tin{font-family:var(--sans);font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;max-width:100%}
.tin:focus{border-color:var(--navy-3)}
a.stat{display:block;text-decoration:none}
a.stat:hover{border-color:var(--navy-3)}
.checklist .fitem{align-items:center}
.checklist .fitem .done{color:var(--sage);font-weight:600;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
a.mitem{color:var(--ink);text-decoration:none}
@media(max-width:700px){.tin{font-size:16px}}

/* ---- Attendance (v0.3) ---- */
.m{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 4px;border-radius:5px;font-size:11px;font-weight:700;
   font-family:var(--sans);background:var(--line-2);color:var(--muted)}
.m-present{background:var(--sage-soft);color:var(--sage)}
.m-late{background:var(--brass-soft);color:var(--brass)}
.m-activity{background:var(--sky-soft);color:var(--sky)}
.m-absent{background:var(--clay);color:#fff}
.m-excused{background:#EDE7F3;color:#6A4577}
.m-sick{background:#FCE9D9;color:#A2521B}
.m-suspended{background:#3A3A3A;color:#fff}
.legendbar{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 16px;border-bottom:1px solid var(--line-2);font-size:11.5px;color:var(--muted)}
.legendbar span{display:inline-flex;align-items:center;gap:5px}
.regrows{display:flex;flex-direction:column}
.regrow2{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:6px 14px;align-items:center;padding:9px 16px;border-bottom:1px solid var(--line-2)}
.regrow2:last-child{border-bottom:0}
.regrow2 .who{display:flex;gap:10px;align-items:center;min-width:0}
.regrow2 .extra{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.regrow2 .extra[hidden],.regrow2 [hidden]{display:none}
.marks2{display:flex;gap:4px;flex-wrap:wrap}
.marks2 label{position:relative;cursor:pointer}
.marks2 input{position:absolute;opacity:0;pointer-events:none}
.marks2 label span{display:grid;place-items:center;width:36px;height:34px;border-radius:8px;border:1.5px solid var(--line);
   background:#fff;font-weight:700;font-size:13px;color:var(--muted);transition:all .1s}
.marks2 label.m{background:none;padding:0;min-width:0;height:auto}
.marks2 input:focus-visible + span{outline:2px solid var(--brass);outline-offset:2px}
.marks2 .m-present input:checked + span{background:var(--sage);border-color:var(--sage);color:#fff}
.marks2 .m-late input:checked + span{background:var(--brass);border-color:var(--brass);color:#fff}
.marks2 .m-activity input:checked + span{background:var(--sky);border-color:var(--sky);color:#fff}
.marks2 .m-absent input:checked + span{background:var(--clay);border-color:var(--clay);color:#fff}
.marks2 .m-excused input:checked + span{background:#6A4577;border-color:#6A4577;color:#fff}
.marks2 .m-sick input:checked + span{background:#A2521B;border-color:#A2521B;color:#fff}
.marks2 .m-suspended input:checked + span{background:#3A3A3A;border-color:#3A3A3A;color:#fff}
.marks2 input:disabled + span{opacity:.6;cursor:default}
.savebar{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:0 0 10px 10px}
.grid-table th.dcol,.grid-table td.dcol{text-align:center;padding:6px 3px;min-width:26px}
.grid-table th.dcol span{font-weight:400;font-size:10px;color:var(--muted-2)}
.daystrip{display:flex;flex-wrap:wrap;gap:3px}
.dsq{display:inline-block;width:14px;height:18px;border-radius:3px;background:var(--line-2)}
.dsq.m-present{background:var(--sage)} .dsq.m-late{background:var(--brass)} .dsq.m-activity{background:var(--sky)}
.dsq.m-absent{background:var(--clay)} .dsq.m-excused{background:#6A4577} .dsq.m-sick{background:#A2521B}
.dsq.m-suspended{background:#3A3A3A} .dsq.unmarked{background:#fff;border:1px dashed var(--line)}
@media(max-width:700px){
  .regrow2{grid-template-columns:1fr;padding:10px 12px}
  .marks2 label span{width:40px;height:40px;font-size:14px}
  .savebar .btn{flex:1;justify-content:center}
}


/* ============================================================
   v0.4 — light blue & teal, gradients, system font
   Only appearance changes here; no class names were renamed.
   ============================================================ */
h1,h2,h3,h4{letter-spacing:-.021em;font-weight:650}
body{background:var(--paper);letter-spacing:-.006em}

/* ---- menu: gradient, frosted active item ---- */
.side{background:var(--side-grad);color:#DFF4FB}
.side-head{background:#fff;border-bottom:0;box-shadow:0 2px 10px -6px rgba(0,0,0,.4)}
.side-school{background:rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.14)}
.crest .mark{background:var(--grad);color:#fff;box-shadow:none;font-weight:700}
.crest .sub{color:#A9DFF0}
.navgrp h5{color:#8FD3E8;letter-spacing:.08em;text-transform:uppercase}
.navitem{color:#DFF4FB;border-radius:11px}
.navitem svg{color:#9BD9EC}
@media(hover:hover){.navitem:hover{background:rgba(255,255,255,.13);color:#fff}}
.navitem.on{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 3px 0 0 var(--teal-2);backdrop-filter:blur(4px)}
.navitem.on svg{color:var(--teal-2)}
.termpill{background:rgba(45,212,191,.18);border-color:rgba(45,212,191,.42);color:#BFF5EC}
.termpill b{color:#fff}
.side-foot{color:#96C9DA;border-top-color:rgba(255,255,255,.14)}

/* ---- top bar ---- */
.top{background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .where h1{font-weight:680}
.me{border-radius:12px}
.av{background:var(--grad);font-weight:600}

/* ---- buttons ---- */
.btn{border-radius:11px;font-weight:600;letter-spacing:-.01em;transition:transform .08s,box-shadow .15s,background .15s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--grad);border-color:transparent;box-shadow:0 6px 16px -8px rgba(14,165,233,.9)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.ok{background:linear-gradient(135deg,#10B981,#059669);border-color:transparent}
.btn.brass{background:linear-gradient(135deg,#F59E0B,#F97316);border-color:transparent}

/* ---- cards & stats ---- */
.card{border-radius:var(--r);border-color:var(--line)}
.card>header{background:linear-gradient(180deg,#FBFEFF,#F4FAFD);border-bottom:1px solid var(--line-2);border-radius:var(--r) var(--r) 0 0}
.stat{border-radius:var(--r);background:linear-gradient(160deg,#FFFFFF 40%,#F1FAFD 100%);overflow:hidden}
.stat::before{width:100%;height:4px;bottom:auto;background:var(--grad)}
.stat.s-sage::before{background:linear-gradient(90deg,#10B981,#34D399)}
.stat.s-clay::before{background:linear-gradient(90deg,#F43F5E,#FB7185)}
.stat.s-brass::before{background:linear-gradient(90deg,#F59E0B,#FBBF24)}
.stat.s-sky::before{background:linear-gradient(90deg,#0EA5E9,#38BDF8)}
/* gradient numerals, but only where the browser really supports it — otherwise plain ink */
.stat .v{font-weight:700;letter-spacing:-.03em;color:#075985}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .stat .v{background:linear-gradient(135deg,#075985,#0F766E);-webkit-background-clip:text;background-clip:text;color:transparent}
}
a.stat:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}

/* ---- chips, tables, meters ---- */
.chip{border-radius:20px;font-weight:600}
.chip.ok{background:var(--sage-soft);color:#047857}
.chip.warn{background:var(--brass-soft);color:#B45309}
.chip.bad{background:var(--clay-soft);color:#BE123C}
.chip.info{background:var(--sky-soft);color:#0369A1}
thead th{background:linear-gradient(180deg,#F7FCFE,#EFF8FC);color:#4B6C7E;text-transform:uppercase;letter-spacing:.045em;font-size:11px}
@media(hover:hover){tbody tr:hover{background:#F6FCFE}}
.meter{background:var(--line-2);border-radius:99px}
.meter i{background:var(--grad)}
.meter i.warn{background:linear-gradient(90deg,#F59E0B,#FBBF24)}
.meter i.bad{background:linear-gradient(90deg,#F43F5E,#FB7185)}
.meter i.sky{background:linear-gradient(90deg,#0EA5E9,#38BDF8)}
.fitem .ic{border-radius:10px;background:var(--grad-soft)}
.tabs button.on,.tabs a.btn.pri{border-bottom-color:var(--teal)}

/* ---- forms ---- */
.field input,.field select,.field textarea,.filters input,.filters select,.search input,.tin{
  border-radius:11px;border-color:var(--line);background:#fff;transition:border-color .12s,box-shadow .12s}
.field input:focus,.field select:focus,.field textarea:focus,.filters input:focus,.filters select:focus,.search input:focus,.tin:focus{
  outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(14,165,233,.18)}
:focus-visible{outline-color:var(--teal)}

/* ---- attendance marks: brighter, bigger ---- */
.m-present{background:var(--sage-soft);color:#047857}
.m-late{background:var(--brass-soft);color:#B45309}
.m-activity{background:var(--sky-soft);color:#0369A1}
.m-absent{background:linear-gradient(135deg,#F43F5E,#FB7185);color:#fff}
.m-excused{background:var(--plum-soft);color:#6D28D9}
.m-sick{background:#FFEDD5;color:#C2410C}
.m-suspended{background:linear-gradient(135deg,#475569,#334155);color:#fff}
.marks2 label span{border-radius:11px;border-color:var(--line)}
.marks2 .m-present input:checked + span{background:linear-gradient(135deg,#10B981,#059669);border-color:transparent}
.marks2 .m-late input:checked + span{background:linear-gradient(135deg,#F59E0B,#F97316);border-color:transparent}
.marks2 .m-activity input:checked + span{background:linear-gradient(135deg,#0EA5E9,#38BDF8);border-color:transparent}
.marks2 .m-absent input:checked + span{background:linear-gradient(135deg,#F43F5E,#E11D48);border-color:transparent}
.marks2 .m-excused input:checked + span{background:linear-gradient(135deg,#8B5CF6,#7C3AED);border-color:transparent}
.marks2 .m-sick input:checked + span{background:linear-gradient(135deg,#F97316,#EA580C);border-color:transparent}
.marks2 .m-suspended input:checked + span{background:linear-gradient(135deg,#475569,#334155);border-color:transparent}
.dsq.m-present{background:#10B981}.dsq.m-late{background:#F59E0B}.dsq.m-activity{background:#0EA5E9}
.dsq.m-absent{background:#F43F5E}.dsq.m-excused{background:#8B5CF6}.dsq.m-sick{background:#F97316}
.dsq.m-suspended{background:#475569}
.savebar{background:linear-gradient(180deg,#FFFFFF,#F4FAFD)}

/* ---- sign in ---- */
.login .pane{background:var(--side-grad);background-image:
  radial-gradient(circle at 15% 85%, rgba(45,212,191,.45), transparent 45%),
  radial-gradient(circle at 85% 10%, rgba(56,189,248,.40), transparent 45%), var(--side-grad)}
.login .pane .motto{color:#7FE8D8}
.login .pane p.lead{color:#CFEEF8}
.acct{border-radius:12px}
.acct.on{border-color:var(--sky);box-shadow:inset 0 0 0 1px var(--sky);background:var(--grad-soft)}

/* ---- flashes, acting banner, misc ---- */
.flash{border-radius:12px}
.flash.ok{background:var(--sage-soft);color:#047857;border-color:#6EE7B7}
.flash.bad{background:var(--clay-soft);color:#BE123C;border-color:#FDA4AF}
.acting{background:linear-gradient(90deg,#FEF3C7,#FFEDD5);border-bottom-color:#FCD34D;color:#92400E}
.acting b{color:#78350F}
.drawer,.modal{border-radius:18px}
.pager span.pg.on{background:var(--grad);border-color:transparent}
.toast{background:linear-gradient(135deg,#075985,#0F766E);border-radius:12px}

/* bigger touch targets on phones */
@media(max-width:700px){
  .btn{padding:11px 15px;border-radius:12px}
  .navitem{padding:11px 12px}
  .marks2 label span{width:44px;height:44px}
}

/* ---- add-to-home-screen bar ---- */
.installbar{display:flex;gap:12px;align-items:center;padding:10px 22px;background:var(--grad);color:#fff}
.installbar[hidden]{display:none}
.installbar img{width:34px;height:34px;border-radius:9px;flex:none}
.installbar b{font-size:13.5px;display:block;line-height:1.25}
.installbar span{font-size:12px;opacity:.92}
.installbar div{flex:1;min-width:0}
.installbar .btn{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);color:#fff}
.installbar .btn.ghost{background:transparent;border-color:transparent;padding:6px 9px}
@media(max-width:700px){.installbar{padding:10px 14px}.installbar span{display:none}}

/* spacing fallback for old browsers that ignore flex gap */
.legendbar span{margin-right:14px}
.legendbar{gap:6px 0}

/* ---- Fees (v0.6): printable bills and receipts ---- */
.feegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.feegrid label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--muted);font-weight:500}
.feegrid input{padding:8px 10px;border:1px solid var(--line);border-radius:9px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.feegrid label:first-child input{border-color:var(--sky);background:var(--sky-soft)}
.paper{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;max-width:760px;position:relative}
.paper .phead{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--navy);padding-bottom:14px;margin-bottom:18px}
.paper h1{font-size:20px;margin:0;color:var(--navy)}
.paper .phead p{margin:3px 0 0;font-size:12px;color:var(--muted)}
.paper .pref{text-align:right;font-size:12px}.paper .pref b{display:block;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.paper .pref .mono{font-size:15px;font-weight:700}
.pinfo{width:100%;margin-bottom:16px;border-collapse:collapse}
.pinfo td{padding:5px 0;font-size:13px;vertical-align:top}
.pinfo td:first-child{color:var(--muted);width:190px}
.plines{width:100%;border-collapse:collapse;margin:16px 0}
.plines th,.plines td{padding:9px 10px;font-size:13px;border-bottom:1px solid var(--line-2);text-align:left}
.plines thead th{background:var(--paper);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.plines .num,.plines th.num{text-align:right;font-variant-numeric:tabular-nums}
.plines tfoot th{border-top:2px solid var(--navy);font-size:14px}
.pamount{display:flex;justify-content:space-between;align-items:center;background:var(--grad-soft);
  border-radius:10px;padding:14px 18px;margin:16px 0;font-size:13px;color:var(--muted)}
.pamount b{font-size:22px;color:var(--navy);font-variant-numeric:tabular-nums}
.pnote{font-size:12.5px;color:var(--muted);background:var(--paper);border-radius:8px;padding:10px 12px}
.psign{display:flex;gap:40px;margin-top:34px}
.psign div{flex:1;border-top:1px solid var(--ink);padding-top:6px}
.psign span{font-size:11px;color:var(--muted)}
.pfoot{margin:22px 0 0;font-size:10.5px;color:var(--muted-2);text-align:center}
.voidstamp{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) rotate(-18deg);
  font-size:56px;font-weight:800;color:rgba(244,63,94,.18);letter-spacing:.1em;pointer-events:none}
@media print{
  .side,.top,.noprint,.installbar{display:none !important}
  .shell,.main,.content{display:block !important;margin:0 !important;padding:0 !important}
  .paper{border:0;padding:0;max-width:none}
  body{background:#fff}
}

/* ---- Marks entry (v0.7) ---- */
.markin{width:82px;padding:9px 10px;border:1.5px solid var(--line);border-radius:10px;text-align:center;
  font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.markin:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(14,165,233,.18)}
.markin.is-bad{border-color:var(--clay);background:var(--clay-soft)}
.gradetag{min-width:26px;font-size:12px;font-weight:700;color:var(--muted)}
.gradetag.g-A{color:#047857}.gradetag.g-B{color:#0369A1}.gradetag.g-C{color:#B45309}
.gradetag.g-D{color:#C2410C}.gradetag.g-F{color:#BE123C}.gradetag.over{color:var(--clay);font-weight:600}
@media(max-width:700px){.markin{width:70px;font-size:16px}}

/* ---- Timetable (v0.8) ---- */
.ttable{width:100%;border-collapse:collapse}
.ttable th,.ttable td{border:1px solid var(--line-2);padding:7px 8px;vertical-align:top;font-size:12.5px}
.ttable thead th{background:linear-gradient(180deg,#F7FCFE,#EFF8FC);text-align:center;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;color:#4B6C7E}
.ttable .ptime{background:var(--paper);text-align:left;white-space:nowrap;font-weight:600}
.ttable td select{width:100%;padding:5px 6px;border:1px solid var(--line);border-radius:7px;font-size:12px;background:#fff}
.ttable td select.tsel{margin-top:4px;color:var(--muted)}
.ttable .breakrow td,.ttable .breakrow th{background:var(--paper);text-align:center;color:var(--muted)}
.ttable .free{color:var(--muted-2);font-style:italic}
@media(max-width:700px){.ttable th,.ttable td{padding:5px;font-size:11.5px}}

/* ==========================================================================
   v1.0 — phones first. Nothing scrolls sideways, ever.
   Tables turn into stacked cards, each value labelled by its column heading.
   ========================================================================== */
/* Stop sideways scrolling WITHOUT creating a scroll container.
   "clip" is the key: overflow-x:hidden on both html and body makes Android
   Chrome treat the body as the scroller, and vertical scrolling then breaks. */
html, body { max-width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
  html { overflow-x: hidden; }      /* older browsers: html only, never both */
  body { overflow-x: visible; }
}
/* the page scrolls, not an inner box */
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100%; }

/* while a panel is open the page behind it is held still — as a class, so it
   can always be removed again, even when Android restores a cached page */
html.locked, html.locked body { overflow: hidden; touch-action: none; }

@media (max-width: 760px) {
  .content { padding: 14px 12px 90px; }
  .pagehead { flex-direction: column; align-items: stretch; gap: 10px; }
  .pagehead h2 { font-size: 20px; }
  .pagehead .acts { flex-wrap: wrap; }
  .pagehead .acts > * { flex: 1 1 auto; }
  .filters { width: 100%; flex-wrap: wrap; }
  .filters select, .filters input { flex: 1 1 140px; min-width: 0; }
  .grid, .g2, .g3, .g4, .g23, .g32 { grid-template-columns: 1fr !important; gap: 10px; }
  .card > header { flex-wrap: wrap; gap: 8px; }
  .card > header .r { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .row2 { grid-template-columns: 1fr; }

  /* the stat strip stays two-up: four of them in a column is a lot of scrolling */
  .grid.g4 { grid-template-columns: 1fr 1fr !important; }
  .grid.g4 > .card, .grid.g4 > form { grid-column: 1 / -1; }

  /* ---- tables become cards ---- */
  .tablewrap { overflow-x: visible; }
  .tablewrap table:not(.keepgrid) { display: block; width: 100%; }
  .tablewrap table:not(.keepgrid) thead { position: absolute; left: -9999px; }
  .tablewrap table:not(.keepgrid) tbody,
  .tablewrap table:not(.keepgrid) tfoot { display: block; width: 100%; }
  .tablewrap table:not(.keepgrid) tr {
    display: block; padding: 11px 13px; border-bottom: 1px solid var(--line-2); }
  .tablewrap table:not(.keepgrid) tr:last-child { border-bottom: 0; }
  .tablewrap table:not(.keepgrid) td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 3px 0; border: 0; text-align: right; font-size: 13px; }
  .tablewrap table:not(.keepgrid) td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
    color: var(--muted-2); font-weight: 600; }
  .tablewrap table:not(.keepgrid) td:empty { display: none; }
  .tablewrap table:not(.keepgrid) td[data-label=""]::before { display: none; }
  /* the first cell is the heading of the card, not a labelled row */
  .tablewrap table:not(.keepgrid) td:first-child {
    display: block; text-align: left; font-size: 14.5px; font-weight: 650;
    margin-bottom: 5px; color: var(--ink); }
  .tablewrap table:not(.keepgrid) td:first-child::before { display: none; }
  .tablewrap table:not(.keepgrid) td .sm { text-align: right; }
  .tablewrap table:not(.keepgrid) td:first-child .sm { text-align: left; }

  /* On a phone, a table with eight columns becomes eight lines per row, which
     is how a list of twenty children turns into a page nobody reads. A column
     marked "less" is kept off the phone; the whole row is tappable, and the
     full record is one tap away. */
  .tablewrap table:not(.keepgrid) td.less,
  .tablewrap table:not(.keepgrid) th.less { display: none !important; }

  /* what is left sits on one line where it can */
  .tablewrap table:not(.keepgrid) td.pair { display: flex; }
  .tablewrap table:not(.keepgrid) tr.rowlink { position: relative; padding-right: 26px; }
  .tablewrap table:not(.keepgrid) tr.rowlink::after {
    content: '›'; position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    color: var(--muted-2); font-size: 20px; line-height: 1; }
  .tablewrap table:not(.keepgrid) tfoot tr { background: var(--paper); font-weight: 700; }
  .tablewrap table:not(.keepgrid) tfoot th {
    display: flex; justify-content: space-between; padding: 4px 0; border: 0; font-size: 13px; }

  /* ---- true grids (timetable, month attendance, exam matrix): no sideways page scroll,
         they scroll inside their own box and are readable at a glance ---- */
  .keepgrid { display: table; width: 100%; font-size: 11px; }
  .gridscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }

  /* ---- forms and actions ---- */
  .savebar { position: sticky; bottom: 0; padding: 10px 12px;
    box-shadow: 0 -6px 18px -12px rgba(15,23,42,.4); }
  .savebar .btn { width: 100%; justify-content: center; }
  .savebar .hint { font-size: 11.5px; }
  .btn { min-height: 42px; }
  .paper { padding: 18px 14px; }
  .paper .phead { flex-direction: column; gap: 10px; }
  .paper .pref { text-align: left; }
  .pinfo td { display: block; }
  .pinfo td:first-child { color: var(--muted-2); font-size: 11px; text-transform: uppercase; padding-bottom: 0; }
  .psign { flex-direction: column; gap: 22px; }
  .feegrid { grid-template-columns: 1fr 1fr; }
  .dl { grid-template-columns: 1fr; gap: 2px 0; }
  .dl dt { color: var(--muted-2); font-size: 11px; text-transform: uppercase; margin-top: 8px; }
}

/* very small phones */
@media (max-width: 400px) {
  .grid.g4 { grid-template-columns: 1fr !important; }
  .feegrid { grid-template-columns: 1fr; }
}
.onlymobile { display: none; }
@media (max-width: 760px) {
  .onlydesktop { display: none !important; }
  .onlymobile { display: block; }
}
@media (max-width: 760px) {
  /* the totals row reads like the cards above it */
  .tablewrap table:not(.keepgrid) tfoot tr { padding: 11px 13px; }
  .tablewrap table:not(.keepgrid) tfoot th::before,
  .tablewrap table:not(.keepgrid) tfoot td::before {
    content: attr(data-label); font-size: 11px; text-transform: uppercase;
    letter-spacing: .03em; color: var(--muted-2); font-weight: 600; }
  .tablewrap table:not(.keepgrid) tfoot th:first-child { display: block; font-size: 14px; margin-bottom: 4px; }
  .tablewrap table:not(.keepgrid) tfoot th:first-child::before { display: none; }
  .tablewrap table:not(.keepgrid) tfoot td {
    display: flex; justify-content: space-between; padding: 3px 0; text-align: right; }
}

/* ---- public application form (v1.2) ---- */
.applywrap{max-width:660px;margin:0 auto;padding:26px 16px 60px}
.applyhead{text-align:center;margin-bottom:18px}
.applyhead h1{font-size:23px;margin:0 0 4px;color:var(--navy)}
.applyhead p{margin:0;color:var(--muted);font-size:13.5px}
.applyhead .motto{font-style:italic;color:var(--teal);margin-top:6px}
.applywrap .field{margin-bottom:12px}
@media(max-width:760px){ .applywrap{padding:16px 12px 50px} }


/* ==========================================================================
   v1.3 — the school mark's own colours, used with intent
   Cyan carries the actions, pink marks what is about a child, navy holds the
   frame. Bright, but never at the cost of reading a number correctly.
   ========================================================================== */
.side{background:var(--side-grad)}
.navitem.on{background:rgba(255,255,255,.16);box-shadow:inset 3px 0 0 var(--cyan-2)}
.navitem.on svg{color:var(--cyan-2)}
.navgrp h5{color:#8FC6DE}
.crest .mark{background:var(--grad-play);color:#fff}
.termpill{background:rgba(0,168,216,.20);border-color:rgba(40,193,236,.45);color:#CFEFFA}

.btn.pri{background:var(--grad);box-shadow:0 8px 18px -10px rgba(0,124,196,.85)}
.btn.warm{background:var(--grad-warm);border-color:transparent;color:#fff}
.av{background:var(--grad-play)}

/* the four summary cards, each with its own bar — easy to tell apart at a glance */
.stat::before{background:var(--grad)}
.stat.s-pink::before{background:var(--grad-warm)}
.stat .v{color:var(--navy)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .stat .v{background:linear-gradient(135deg,#1B2E42,#0E7BC4);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.fitem .ic{background:var(--grad-soft);color:var(--navy)}
.chip.info{background:var(--cyan-soft);color:#04688A}
.chip.pink{background:var(--pink-soft);color:#B02E6C}
.meter i{background:var(--grad)}

/* things that are about a child carry the pink */
.m-present{background:var(--sage-soft);color:#04704F}
.m-activity{background:var(--cyan-soft);color:#04688A}
.marks2 .m-activity input:checked + span{background:linear-gradient(135deg,#00A8D8,#0E7BC4);border-color:transparent}
.login .pane{background-image:
  radial-gradient(circle at 12% 88%, rgba(228,96,156,.42), transparent 46%),
  radial-gradient(circle at 88% 8%, rgba(0,168,216,.46), transparent 46%), var(--side-grad)}
.installbar{background:var(--grad-play)}
.toast{background:linear-gradient(135deg,#243C54,#0E7BC4)}
.applyhead h1{color:var(--navy)}
.applyhead .motto{color:var(--pink)}

/* ---- a bottom bar on phones: the things people do every day, one thumb away ---- */
.tabbar{display:none}
@media (max-width: 760px){
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -8px 24px -18px rgba(36,60,84,.6);
  }
  .tabbar a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px; border-radius:12px; text-decoration:none;
    color:var(--muted); font-size:10.5px; font-weight:600; line-height:1.15; text-align:center;
  }
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.on{color:var(--cyan); background:var(--cyan-soft)}
  .content{padding-bottom:96px}
  .savebar{bottom:64px}
}

.applymark{width:210px;max-width:70%;height:auto;margin:0 auto 12px;display:block}


/* ---- SOS (v1.4) ---- */
.sosbtn{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,#F2416B,#D81B4A);color:#fff;font-weight:800;font-size:11px;letter-spacing:.06em;
  box-shadow:0 10px 24px -8px rgba(216,27,74,.75)}
.sosbtn:active{transform:scale(.95)}
.sosbtn svg{width:20px;height:20px}
.sosveil{position:fixed;inset:0;z-index:100;background:rgba(22,40,58,.55);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;padding:0}
.sosveil[hidden]{display:none}
.sospanel{background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;overflow:hidden;
  max-height:90vh;display:flex;flex-direction:column;box-shadow:0 -10px 40px -12px rgba(22,40,58,.5)}
.soshead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;
  background:linear-gradient(135deg,#F2416B,#D81B4A);color:#fff}
.soshead h2{margin:0;font-size:17px}
.soshead .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.sosbody{padding:16px 18px 22px;overflow:auto}
.soscall{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:8px;border-radius:13px;
  border:1.5px solid var(--line);text-decoration:none;color:var(--ink);background:#fff}
.soscall:active{background:var(--cyan-soft)}
.soscall .ic{width:38px;height:38px;border-radius:11px;background:var(--grad-soft);display:grid;place-items:center;flex:none;color:var(--navy)}
.soscall .who{flex:1;min-width:0}
.soscall .who b{display:block;font-size:14px}
.soscall .who small{color:var(--muted);font-size:11.5px}
.soscall .num{font-weight:800;font-size:16px;color:var(--cyan);font-variant-numeric:tabular-nums}
.sosraise label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.sosraise select,.sosraise input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px}
.sosraise .btn{width:100%;justify-content:center}
@media(min-width:761px){ .sosveil{align-items:center} .sospanel{border-radius:18px} }
@media(max-width:760px){ .sosbtn{bottom:78px;right:12px;width:54px;height:54px} }
@media print{ .sosbtn,.sosveil{display:none !important} }

/* ---- what needs you (v1.6) ---- */
.nextsteps > header h3{font-size:15px}
.nextsteps .fitem{align-items:center;gap:12px}
.nextsteps .fitem .btn{flex:none}
.nextsteps .step-now{background:linear-gradient(90deg,rgba(242,65,107,.07),transparent)}
.nextsteps .step-soon{background:linear-gradient(90deg,rgba(245,158,11,.07),transparent)}
/* hidden on a wide screen, shown on a phone — declared before the phone
   rules, because a later rule of equal weight wins */
.nextsteps .morebar{display:none;width:100%;border:0;border-top:1px solid var(--line-2);
  background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--cyan);
  padding:10px;cursor:pointer;text-align:center}

@media(max-width:760px){
  /* A full-width button on every row turned this into a wall of blue that
     nobody reads. The whole row is already tappable, so the button is a
     small label on the right and the words get the space instead. */
  .nextsteps .fitem{align-items:flex-start;gap:10px;padding:11px 13px}
  .nextsteps .fitem .btn{flex:none;align-self:center;padding:5px 10px;font-size:11.5px;
    background:transparent;border:1px solid var(--line);color:var(--cyan);box-shadow:none}
  .nextsteps .fitem .btn.pri{background:var(--cyan);color:#fff;border-color:transparent}
  .nextsteps .fitem p{font-size:13.5px;line-height:1.35;margin:0 0 2px}
  .nextsteps .fitem .t{font-size:12px;line-height:1.35}

  /* only the first three at once; the rest on request */
  .nextsteps.folded .feed .fitem:nth-child(n+4){display:none}
  .nextsteps .morebar{display:block}
}

/* ---- a school's own logo (v1.9) ---- */
.schoolmark{padding:0;background:#fff !important;overflow:hidden;display:grid;place-items:center}
.schoolmark img{width:100%;height:100%;object-fit:contain;padding:3px}
.papermark{max-width:130px;max-height:60px;display:block;margin-bottom:8px}
.logopreview{display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:12px;padding:12px;margin-bottom:12px}
.logopreview img{max-width:110px;max-height:60px;background:#fff;border-radius:8px;padding:5px;border:1px solid var(--line)}
@media print{.papermark{max-width:110px}}

/* ---- the head teacher's term report (v2.2) ---- */
.termreport .sec{font-size:14px;margin:22px 0 8px;padding-bottom:5px;border-bottom:2px solid var(--navy);color:var(--navy)}
.termreport .lead{font-size:12.5px;color:var(--muted);margin:12px 0 5px}
.termreport .none{font-size:12.5px;color:var(--muted);font-style:italic;background:var(--paper);padding:9px 11px;border-radius:8px}
.termreport .ptable{width:100%;border-collapse:collapse;margin-bottom:10px;font-size:12px}
.termreport .ptable th,.termreport .ptable td{border:1px solid var(--line);padding:5px 8px;text-align:left}
.termreport .ptable th{background:var(--paper);font-weight:700}
.termreport .ptable .num{text-align:right;font-variant-numeric:tabular-nums}
.termreport .pinfo td:first-child{width:200px;color:var(--muted)}
.termreport .sign{display:flex;gap:40px;margin-top:34px;font-size:12px}
.termreport .sign .line{display:block;border-top:1px solid var(--ink);width:210px;margin-bottom:5px}
@media print{ .noprint{display:none !important} .termreport .sec{page-break-after:avoid} .termreport .ptable{page-break-inside:auto} }

/* ---- live refresh (v2.5) ---- */
.freshbar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:90;
  display:flex;align-items:center;gap:12px;max-width:min(620px,94vw);
  background:linear-gradient(135deg,#243C54,#0E7BC4);color:#fff;
  padding:11px 12px 11px 16px;border-radius:14px;font-size:13.5px;line-height:1.4;
  box-shadow:0 14px 34px -12px rgba(36,60,84,.7);opacity:0;transition:opacity .22s,transform .22s}
.freshbar.on{opacity:1;transform:translate(-50%,0)}
.freshbar button{font:inherit;font-weight:700;border:0;border-radius:10px;padding:8px 14px;cursor:pointer;
  background:#fff;color:var(--navy);flex:none}
.navdot{margin-left:auto;background:var(--clay);color:#fff;font-size:10.5px;font-weight:800;
  border-radius:9px;padding:1px 6px;min-width:18px;text-align:center}
.navitem.on .navdot{background:#fff;color:var(--navy)}
@media(max-width:760px){ .freshbar{bottom:80px;flex-wrap:wrap} .freshbar button{width:100%} }
@media print{ .freshbar{display:none !important} }

/* ---- photographs and identity cards (v2.8) ---- */
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px}
.photocell .shot{aspect-ratio:4/5;border-radius:11px;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);display:grid;place-items:center;margin-bottom:7px}
.photocell .shot img{width:100%;height:100%;object-fit:cover}
.photocell .shot.none span{font-weight:800;color:var(--muted-2);font-size:20px}
.photocell .nm{font-size:12.5px;font-weight:600;line-height:1.3}
.photocell .sm{margin-bottom:6px}

/* A card is 85.6 x 54 mm, the size of a bank card.
   Laid out with inline-block rather than grid: printer engines are years
   behind browsers, and a sheet of cards that only tiles on screen is useless. */
.cardsheet{font-size:0;text-align:center}
.idcard{display:inline-block;vertical-align:top;width:85.6mm;height:54mm;margin:0 3mm 6mm;
  border:1px dashed var(--line);border-radius:3mm;overflow:hidden;background:#fff;
  text-align:left;font-size:2.5mm;page-break-inside:avoid}
.idtop{display:flex;align-items:center;gap:2mm;padding:2mm 3mm;background:var(--grad);color:#fff}
.idtop b{display:block;font-size:2.6mm;line-height:1.15;max-height:6mm;overflow:hidden}
.idtop span{font-size:2.2mm;opacity:.9}
.idlogo{width:8mm;height:8mm;object-fit:contain;background:#fff;border-radius:1.5mm;padding:.5mm;flex:none}
.idbody{padding:2.5mm 3mm;height:36mm}
.idbody .idphoto{float:left;margin-right:3mm}
.idphoto{width:18mm;height:23mm;object-fit:cover;border-radius:1.5mm;border:.3mm solid var(--line);flex:none}
.iddetail{font-size:2.5mm;line-height:1.45;min-width:0}
.iddetail b{display:block;font-size:3.1mm;margin-bottom:1mm;color:var(--navy)}
.iddetail div span{display:inline-block;width:15mm;color:var(--muted)}
.idbody .idtag{display:inline-block;padding:.3mm 1.5mm;border-radius:1mm;background:var(--cyan-soft);color:#04688A;font-size:2.2mm;font-weight:700}
.idfoot{display:flex;justify-content:space-between;padding:1.2mm 3mm;background:var(--paper);clear:both;
  font-size:2.2mm;color:var(--muted);border-top:.3mm solid var(--line)}
@media(max-width:760px){ .cardsheet{grid-template-columns:1fr;justify-content:start} }
@media print{
  .cardsheet{gap:4mm}
  .idcard{border:.3mm dashed #999}
  @page { margin: 8mm; }
}

/* ---- support tickets (v3.0) ---- */
.ticketmsg{border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:10px;background:#fff}
.ticketmsg.support{background:var(--cyan-soft);border-color:rgba(0,168,216,.35)}
.ticketmsg .head{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:5px}
.ticketmsg .head b{color:var(--navy)}
.ticketmsg .head span{color:var(--muted)}
.ticketmsg p{margin:0;font-size:13.5px;line-height:1.55;white-space:pre-line}

/* ---- the language switch (v3.2) ---- */
.langswitch button{font:inherit;font-size:12.5px;font-weight:600;background:none;border:1px solid var(--line);
  color:var(--muted);border-radius:9px;padding:5px 11px;cursor:pointer;white-space:nowrap}
.langswitch button:hover{border-color:var(--cyan);color:var(--cyan)}
.langswitch.signin{display:flex;justify-content:flex-end;margin-bottom:10px}
.side .langswitch button{border-color:rgba(255,255,255,.3);color:#CFEFFA;background:rgba(255,255,255,.06)}
@media print{ .langswitch{display:none !important} }

/* ---- setting a school up (v3.5) ---- */
.bar{height:9px;border-radius:99px;background:var(--line-2);overflow:hidden}
.bar span{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .3s}
.setupstep.done{opacity:.72}
.setupstep.done .stepno{background:var(--sage);color:#fff;border-color:transparent}
.stepno{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;flex:none;
  border:1.5px solid var(--line);font-size:12px;color:var(--muted)}

/* ---- work kept on the phone (v3.7) ---- */
.outbox{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:95;
  max-width:min(560px,94vw);background:var(--navy);color:#fff;padding:11px 16px;border-radius:13px;
  font-size:13.5px;line-height:1.45;box-shadow:0 14px 34px -12px rgba(36,60,84,.7);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s}
.outbox.on{opacity:1;transform:translate(-50%,0)}
.outbox.warn{background:linear-gradient(135deg,#8A5A00,#B07800)}
.outbox.ok{background:linear-gradient(135deg,#1F6B4A,#2E8B5F)}
@media(max-width:760px){ .outbox{bottom:80px} }
@media print{ .outbox{display:none !important} }

/* ---- exam seating (v4.0) ---- */
.seatgrid{width:100%;border-collapse:separate;border-spacing:4px;margin-top:8px;table-layout:fixed}
.seatcell{border:1px solid var(--line);border-radius:6px;padding:5px 6px;height:46px;background:#fff;
  vertical-align:top;overflow:hidden}
.seatcell b{display:block;font-size:10px;color:var(--muted)}
.seatcell span{display:block;font-size:11px;font-weight:600;line-height:1.25;color:var(--navy)}
.seatcell i{display:block;font-size:9.5px;font-style:normal;color:var(--muted)}
@media print{ .seatcell{border-color:#bbb} }

/* ---- putting the app on a phone (v4.3) ---- */
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--cyan);cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;font-weight:600}
.linkish:hover{text-decoration:underline}
.sheet{position:fixed;inset:0;z-index:120;display:grid;place-items:end center;
  background:rgba(20,32,44,.5);opacity:0;transition:opacity .2s}
.sheet.on{opacity:1}
.sheetcard{width:min(460px,100%);background:#fff;border-radius:18px 18px 0 0;padding:18px 18px 16px;
  transform:translateY(16px);transition:transform .2s;max-height:88vh;overflow:auto}
.sheet.on .sheetcard{transform:translateY(0)}
.sheethead{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.sheethead img{width:44px;height:44px;border-radius:11px}
.sheethead b{display:block;font-size:16px;color:var(--navy)}
.sheethead span{font-size:12.5px;color:var(--muted)}
.sheetbody{font-size:13.5px;line-height:1.6;color:var(--ink)}
.sheetbody ol{margin:0 0 10px 18px;padding:0}
.sheetbody li{margin-bottom:7px}
.sheetbody p{margin:0 0 8px}
.sheetnote{color:var(--muted);font-size:12.5px}
.sheetfoot{display:flex;gap:8px;margin-top:14px}
.sheetfoot .btn{flex:1;justify-content:center}
@media(min-width:760px){ .sheet{place-items:center} .sheetcard{border-radius:18px} }

/* ==================================================================
   Themes (v4.5)

   Every colour in the system already comes from a variable, so a theme is
   simply a different set of them. The shapes, spacing and type never change:
   only the colour. Each one keeps dark text on light panels, or the other
   way round in Midnight, so nothing becomes hard to read.
   ================================================================== */

[data-theme="sunrise"]{
  --navy:#7C2D12; --navy-2:#601F0C; --navy-3:#9A3D1C;
  --cyan:#F97316; --cyan-2:#FB923C; --cyan-soft:#FFEDD5;
  --sky:#F97316; --sky-2:#FB923C; --sky-soft:#FFEDD5;
  --pink:#E11D6B; --pink-2:#F4568F; --pink-soft:#FFE4EC;
  --grad:linear-gradient(135deg,#FB923C 0%,#EA580C 100%);
  --grad-warm:linear-gradient(135deg,#E11D6B 0%,#FB7185 100%);
  --grad-play:linear-gradient(135deg,#F97316 0%,#E11D6B 100%);
  --grad-soft:linear-gradient(135deg,#FFEDD5 0%,#FFE4EC 100%);
  --side-grad:linear-gradient(168deg,#9A3D1C 0%,#7C2D12 55%,#521A08 100%);
  --paper:#FFF8F3; --line:#F0DECE; --line-2:#FAEFE6;
  --ink:#3A1B0C; --muted:#8A5F49; --muted-2:#B68B71;
  --shadow:0 1px 2px rgba(124,45,18,.07), 0 12px 28px -16px rgba(124,45,18,.3);
  --shadow-lift:0 14px 34px -14px rgba(124,45,18,.45);
}

[data-theme="forest"]{
  --navy:#14532D; --navy-2:#0C3D20; --navy-3:#1E6B3C;
  --cyan:#0E9F6E; --cyan-2:#31C48D; --cyan-soft:#D8F5E7;
  --sky:#0E9F6E; --sky-2:#31C48D; --sky-soft:#D8F5E7;
  --pink:#CA8A04; --pink-2:#EAB308; --pink-soft:#FEF7CD;
  --grad:linear-gradient(135deg,#31C48D 0%,#0E7A52 100%);
  --grad-warm:linear-gradient(135deg,#CA8A04 0%,#EAB308 100%);
  --grad-play:linear-gradient(135deg,#0E9F6E 0%,#CA8A04 100%);
  --grad-soft:linear-gradient(135deg,#D8F5E7 0%,#FEF7CD 100%);
  --side-grad:linear-gradient(168deg,#1E6B3C 0%,#14532D 55%,#0A3A1E 100%);
  --paper:#F5FAF6; --line:#D9E8DD; --line-2:#EAF4ED;
  --ink:#13291C; --muted:#4F6B58; --muted-2:#7E9B88;
  --shadow:0 1px 2px rgba(20,83,45,.07), 0 12px 28px -16px rgba(20,83,45,.3);
  --shadow-lift:0 14px 34px -14px rgba(20,83,45,.45);
}

[data-theme="violet"]{
  --navy:#3B1E70; --navy-2:#2C1556; --navy-3:#4E2A8E;
  --cyan:#7C3AED; --cyan-2:#A06BF5; --cyan-soft:#EDE4FE;
  --sky:#7C3AED; --sky-2:#A06BF5; --sky-soft:#EDE4FE;
  --pink:#DB2777; --pink-2:#F472B6; --pink-soft:#FCE7F3;
  --grad:linear-gradient(135deg,#A06BF5 0%,#6D28D9 100%);
  --grad-warm:linear-gradient(135deg,#DB2777 0%,#F472B6 100%);
  --grad-play:linear-gradient(135deg,#7C3AED 0%,#DB2777 100%);
  --grad-soft:linear-gradient(135deg,#EDE4FE 0%,#FCE7F3 100%);
  --side-grad:linear-gradient(168deg,#4E2A8E 0%,#3B1E70 55%,#25104A 100%);
  --paper:#FAF7FF; --line:#E4DCF3; --line-2:#F1ECFA;
  --ink:#241338; --muted:#61508A; --muted-2:#9186B4;
  --shadow:0 1px 2px rgba(59,30,112,.07), 0 12px 28px -16px rgba(59,30,112,.3);
  --shadow-lift:0 14px 34px -14px rgba(59,30,112,.45);
}

[data-theme="coral"]{
  --navy:#7F1D3F; --navy-2:#63152F; --navy-3:#9D2B52;
  --cyan:#F43F5E; --cyan-2:#FB7185; --cyan-soft:#FFE4E9;
  --sky:#F43F5E; --sky-2:#FB7185; --sky-soft:#FFE4E9;
  --pink:#8B5CF6; --pink-2:#A78BFA; --pink-soft:#EDE9FE;
  --grad:linear-gradient(135deg,#FB7185 0%,#E11D48 100%);
  --grad-warm:linear-gradient(135deg,#8B5CF6 0%,#A78BFA 100%);
  --grad-play:linear-gradient(135deg,#F43F5E 0%,#8B5CF6 100%);
  --grad-soft:linear-gradient(135deg,#FFE4E9 0%,#EDE9FE 100%);
  --side-grad:linear-gradient(168deg,#9D2B52 0%,#7F1D3F 55%,#560F28 100%);
  --paper:#FFF7F8; --line:#F3DCE1; --line-2:#FBEDF0;
  --ink:#33111D; --muted:#7D5260; --muted-2:#AD8490;
  --shadow:0 1px 2px rgba(127,29,63,.07), 0 12px 28px -16px rgba(127,29,63,.3);
  --shadow-lift:0 14px 34px -14px rgba(127,29,63,.45);
}

/* Midnight: for marking a register in a dark dormitory at ten at night. */
[data-theme="midnight"]{
  --navy:#0B1220; --navy-2:#060B14; --navy-3:#16223A;
  --cyan:#38BDF8; --cyan-2:#7DD3FC; --cyan-soft:#12283C;
  --sky:#38BDF8; --sky-2:#7DD3FC; --sky-soft:#12283C;
  --pink:#F472B6; --pink-2:#F9A8D4; --pink-soft:#361C2C;
  --teal:#2DD4BF; --teal-soft:#123833;
  --grad:linear-gradient(135deg,#38BDF8 0%,#2563EB 100%);
  --grad-warm:linear-gradient(135deg,#F472B6 0%,#C026D3 100%);
  --grad-play:linear-gradient(135deg,#38BDF8 0%,#F472B6 100%);
  --grad-soft:linear-gradient(135deg,#12283C 0%,#361C2C 100%);
  --side-grad:linear-gradient(168deg,#16223A 0%,#0B1220 55%,#05090F 100%);
  --paper:#070C16; --card:#111A2B; --line:#22304A; --line-2:#1A2539;
  --ink:#E6EDF6; --muted:#9CB0C8; --muted-2:#6F86A3;
  --brass:#FBBF24; --brass-soft:#3A2D0C;
  --sage:#34D399; --sage-soft:#0E3328;
  --clay:#FB7185; --clay-soft:#3B1522;
  --plum:#C4B5FD; --plum-soft:#2A2247;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 28px -16px rgba(0,0,0,.8);
  --shadow-lift:0 14px 34px -14px rgba(0,0,0,.9);
}
[data-theme="midnight"] body{background:var(--paper)}
[data-theme="midnight"] .card,
[data-theme="midnight"] .paper{background:var(--card);border-color:var(--line)}
[data-theme="midnight"] .stat{background:var(--card)}
[data-theme="midnight"] input,
[data-theme="midnight"] select,
[data-theme="midnight"] textarea{background:#0D1626;color:var(--ink);border-color:var(--line)}
[data-theme="midnight"] thead th{background:#0D1626;color:var(--muted)}
[data-theme="midnight"] .btn:not(.pri):not(.ok){background:#16223A;color:var(--ink);border-color:var(--line)}
[data-theme="midnight"] .sheetcard{background:var(--card);color:var(--ink)}
[data-theme="midnight"] img.papermark,
[data-theme="midnight"] .schoolmark{background:#fff !important}

/* ---- choosing the colours (v4.5) ---- */
.themegrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:4px 0 2px}
.themeswatch{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:10px;border:1.5px solid var(--line);border-radius:13px;background:var(--card);
  cursor:pointer;font:inherit;text-align:left}
.themeswatch .sw{display:block;width:100%;height:30px;border-radius:8px;margin-bottom:6px}
.themeswatch b{font-size:13px;color:var(--ink)}
.themeswatch i{font-style:normal;font-size:11.5px;color:var(--muted)}
.themeswatch.on{border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}

/* ---- the school profile (v4.5) ---- */
.picgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.piccell{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--card)}
.piccell.cover{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan-soft)}
.piccell img{width:100%;height:110px;object-fit:cover;display:block}
.piccap{padding:7px 9px;font-size:12px;line-height:1.35}
.piccap span{color:var(--muted);display:block}
.piccap b{color:var(--cyan);font-size:11px}
.picacts{display:flex;gap:5px;padding:0 9px 9px}
.picacts .btn{flex:1;justify-content:center}
.logobox{height:140px;border:1px dashed var(--line);border-radius:13px;display:grid;place-items:center;
  background:var(--grad-soft);padding:10px}
.logobox img{max-width:100%;max-height:120px;object-fit:contain}
.logobox span{color:var(--muted);font-size:13px}

/* the school on the sign-in page */
.schoolhero{border-radius:16px;overflow:hidden;margin-bottom:14px;position:relative}
.schoolhero img{width:100%;height:150px;object-fit:cover;display:block}
.schoolhero .cap{position:absolute;inset:auto 0 0 0;padding:22px 14px 10px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(10,20,30,.78) 100%);font-size:13px}

/* ---- a little more life (v4.5) ---- */
.pagehead h2{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="midnight"] .pagehead h2{color:var(--ink);background:none;-webkit-text-fill-color:currentColor}
.stat{position:relative;overflow:hidden}
.stat .v{font-family:var(--slab);letter-spacing:-.02em}
.card header h3{font-family:var(--slab)}
.btn.pri{background:var(--grad);border:0;color:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}
.btn.pri:hover{filter:brightness(1.06)}
.chip.info{background:var(--cyan-soft);color:var(--navy)}
.navitem.on{background:var(--grad);color:#fff}

/* ---- Midnight: anything that hard-codes a light-theme colour (v4.5) ----
   These rules name real colours rather than variables, so the dark theme has
   to answer them one by one. Found by printing the dark screen and looking at
   it: the big numbers, the card headings and the page title were all drawn in
   navy, which on a dark background is black on black. */
[data-theme="midnight"] .card>header{background:linear-gradient(180deg,#16223A,#111A2B);
  border-bottom-color:var(--line)}
[data-theme="midnight"] .card>header h3{color:var(--ink)}
[data-theme="midnight"] .stat .v{color:#7DD3FC}
[data-theme="midnight"] .stat .k,[data-theme="midnight"] .stat .d{color:var(--muted)}
[data-theme="midnight"] .top{background:var(--card);border-bottom-color:var(--line)}
[data-theme="midnight"] .top h1,[data-theme="midnight"] .top strong,
[data-theme="midnight"] .top a{color:var(--ink)}
[data-theme="midnight"] .nm,[data-theme="midnight"] td.nm,
[data-theme="midnight"] .dl dt,[data-theme="midnight"] label{color:var(--ink)}
[data-theme="midnight"] .hint,[data-theme="midnight"] .sm{color:var(--muted)}
[data-theme="midnight"] .tabbar{background:var(--card);border-top-color:var(--line)}
[data-theme="midnight"] .tabbar a{color:var(--muted)}
[data-theme="midnight"] .tabbar a.on{color:var(--cyan)}
[data-theme="midnight"] .empty h4{color:var(--ink)}
[data-theme="midnight"] .chip{background:#16223A;color:var(--ink)}
[data-theme="midnight"] .freshbar,[data-theme="midnight"] .outbox{background:#16223A}

/* ---- searching the menu (v4.6) ---- */
.navsearch{position:relative;display:flex;align-items:center;gap:8px;margin:12px 14px 10px;
  padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);color:#CFEFFA}
.navsearch input{flex:1;background:none;border:0;outline:none;color:#fff;font:inherit;font-size:13.5px;
  padding:0;min-width:0}
.navsearch input::placeholder{color:rgba(207,239,250,.6)}
.navsearch input::-webkit-search-cancel-button{filter:invert(1);opacity:.6}
.navsearch kbd{font:inherit;font-size:11px;padding:1px 6px;border-radius:5px;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.14)}
.navsearch:focus-within{border-color:var(--cyan-2);background:rgba(255,255,255,.14)}
.navsearch:focus-within kbd{display:none}
.navnone{display:none;margin:0 14px 10px;font-size:13px;color:rgba(207,239,250,.75)}
.navnone.on{display:block}
.navitem mark{background:rgba(255,255,255,.22);color:#fff;border-radius:3px;padding:0 1px}
.navitem.hit{outline:1px solid rgba(255,255,255,.25)}
[data-theme="midnight"] .navsearch{background:rgba(255,255,255,.06)}

/* ---- the two small tools under the menu search (v4.7) ---- */
.navtools{display:flex;gap:6px;margin:0 14px 12px}
.navtool{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 8px;border-radius:10px;cursor:pointer;font:inherit;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:#CFEFFA}
.navtool:hover{background:rgba(255,255,255,.14);border-color:var(--cyan-2);color:#fff}
.navtool svg{flex:none}

/* ---- the greeting at the top of the day (v4.7) ---- */
.hero{position:relative;overflow:hidden;border-radius:18px;padding:18px 20px;margin-bottom:16px;
  display:flex;align-items:center;gap:16px;color:#fff;background:var(--grad);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.hero::after{content:'';position:absolute;right:-40px;top:-60px;width:200px;height:200px;border-radius:50%;
  background:rgba(255,255,255,.1)}
.hero::before{content:'';position:absolute;right:40px;bottom:-80px;width:150px;height:150px;border-radius:50%;
  background:rgba(255,255,255,.07)}
.herowords{position:relative;z-index:1;min-width:0;flex:1}
.herowords b{display:block;font-family:var(--slab);font-size:21px;line-height:1.2;letter-spacing:-.01em}
.herowords span{display:block;font-size:13px;opacity:.92;margin-top:3px}
.herowords i{display:block;font-style:normal;font-size:12.5px;opacity:.78;margin-top:5px}
.heromark{position:relative;z-index:1;flex:none;width:54px;height:54px;border-radius:15px;
  background:rgba(255,255,255,.18);display:grid;place-items:center;overflow:hidden;
  border:1px solid rgba(255,255,255,.25)}
.heromark img{width:100%;height:100%;object-fit:contain;background:#fff;padding:4px}
.heromark span{font-family:var(--slab);font-weight:700;font-size:18px}

/* the time of day shifts the colour a little, so the screen feels like the hour */
.hero-morning{background:linear-gradient(135deg,#FDBA74 0%,#F97316 55%,#EA580C 100%)}
.hero-afternoon{background:var(--grad)}
.hero-evening{background:linear-gradient(135deg,#A78BFA 0%,#7C3AED 55%,#4C1D95 100%)}
.hero-night{background:linear-gradient(135deg,#1E3A8A 0%,#172554 60%,#0B1220 100%)}

@media(max-width:760px){
  .hero{padding:15px 16px;border-radius:15px;gap:12px}
  .herowords b{font-size:18px}
  .heromark{width:46px;height:46px;border-radius:13px}
}
@media print{ .hero{display:none} }
.themeswatch{position:relative}
label.themeswatch{user-select:none}
label.themeswatch:has(input:checked){border-color:var(--cyan);box-shadow:0 0 0 3px var(--cyan-soft)}

/* ---- the module launcher (v4.9) ---- */
.launcher{max-width:980px}
.launchsearch{margin:0 0 14px;background:var(--card);border-color:var(--line);color:var(--muted)}
.launchsearch input{color:var(--ink)}
.launchsearch input::placeholder{color:var(--muted-2)}
.launchsearch kbd{background:var(--paper);color:var(--muted);border-color:var(--line)}
.launcher .navnone{margin:0 0 12px;color:var(--muted)}
.launchgrp{margin-bottom:20px}
.launchgrp h5{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);
  margin:0 0 9px;font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.tile{display:block;padding:14px 8px 12px;border-radius:16px;background:var(--card);
  border:1px solid var(--line);text-align:center;font-size:12.5px;font-weight:600;color:var(--ink);
  line-height:1.3;text-decoration:none;position:relative;
  transition:transform .12s,box-shadow .12s,border-color .12s}
.tile > span:last-child{display:block}
.tile:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:var(--shadow-lift)}
.tileicon{display:block;width:44px;height:44px;border-radius:14px;margin:0 auto 8px;
  background:var(--grad);color:#fff;line-height:44px;text-align:center}
.tileicon svg{vertical-align:middle}
.tile.off{opacity:.45;pointer-events:none}
.tile .navdot{position:absolute;top:7px;right:7px;margin:0}
@media(max-width:760px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
  .tile{padding:11px 6px 10px;font-size:11.5px;border-radius:14px}
  .tileicon{width:38px;height:38px;border-radius:12px;line-height:38px;margin-bottom:6px}
}

/* ---- back, home and all modules (v4.9) ---- */
.navkeys{display:flex;gap:5px;flex:none}
.navkey{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);color:var(--muted);text-decoration:none}
.navkey:hover{border-color:var(--cyan);color:var(--cyan)}
.navkey.on{background:var(--grad);border-color:transparent;color:#fff}
#goBack svg{transform:rotate(90deg)}
[data-theme="midnight"] .navkey{background:#16223A;border-color:var(--line);color:var(--ink)}
@media(max-width:760px){ .navkey{width:32px;height:32px} }
@media print{ .navkeys{display:none} }

/* ---- picture icons (v5.0) ----
   Line-art icons take the colour of whatever they sit on. A picture cannot,
   so wherever one sits on a coloured patch the patch is made plain, or the
   picture disappears into it. */
.tileicon.pic{background:var(--paper);border:1px solid var(--line)}
[data-theme="midnight"] .tileicon.pic{background:#16223A;border-color:var(--line)}
.navitem .iconimg{opacity:.95}
.navitem.on .iconimg{opacity:1}
.tileicon .iconimg{width:30px;height:30px}
/* The menu uses drawn icons now, which take its colour. Any picture that
   does slip in is sized to match them, with no chip behind it. */
.navitem .iconimg,.navtool .iconimg{width:17px;height:17px}
@media(max-width:760px){ .tileicon .iconimg{width:22px;height:22px} }

/* ---- the launcher, two levels (v5.1) ---- */
.tiles.big{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.sectiontile i{display:block;font-style:normal;font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}
.othersections{margin-top:24px;padding-top:16px;border-top:1px solid var(--line-2)}
.othersections h5{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);
  margin:0 0 9px;font-weight:700}
@media(max-width:760px){ .tiles.big{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:9px} }

/* ---- the sidebar, and the keys that work beside it (v5.6) ----
   The sidebar is the map of the place; the launcher is for finding one thing
   quickly. Both, not one or the other. */
.shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
@media(max-width:1024px){ .shell{display:block} }
/* on a phone the grid key would sit beside the burger, which opens the same
   list: one of them is enough */
@media(max-width:1024px){ .navkey.nomobile{display:none} }
@media(min-width:1025px){ .burger{display:none !important} }
/* the sidebar slides in on anything narrower, so the burger must be there */
@media(max-width:1024px){ .burger{display:grid !important;place-items:center} }
.topcrest{margin-right:4px}
.topcrest{flex:none;width:34px;height:34px;border-radius:10px;overflow:hidden;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line)}
.topcrest img{width:100%;height:100%;object-fit:contain;padding:2px}
.topcrest b{font-family:var(--slab);font-size:12px;color:var(--navy)}
@media(max-width:760px){ .topcrest{width:30px;height:30px;border-radius:9px} }

/* ---- back and top: one slim bar, not two blobs (v5.9) ---- */
.scrollbar2{position:fixed;left:50%;transform:translate(-50%,14px);bottom:72px;z-index:60;
  display:none;align-items:center;gap:2px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:0 10px 26px -14px rgba(20,30,45,.7);
  opacity:0;transition:opacity .2s,transform .2s}
.scrollbar2.on{opacity:1;transform:translate(-50%,0)}
.scrollbar2 button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--navy);padding:6px 13px;border-radius:999px}
.scrollbar2 button:hover{background:var(--cyan-soft);color:var(--cyan)}
.scrollbar2 .sep{width:1px;height:16px;background:var(--line)}
#goBackDown svg{transform:rotate(90deg)}
#goTop svg{transform:rotate(180deg)}
[data-theme="midnight"] .scrollbar2{background:rgba(22,34,58,.95);border-color:var(--line)}
[data-theme="midnight"] .scrollbar2 button{color:var(--ink)}
@media(max-width:1024px){ .scrollbar2{display:flex} }
@media(min-width:1025px){ .scrollbar2{display:flex;bottom:22px} }
@media print{ .scrollbar2{display:none !important} }

/* ---- schools as cards (v5.7) ---- */
.schoolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px;margin-top:14px}
.schoolcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 14px 13px;
  text-align:center;position:relative;transition:transform .12s,box-shadow .12s,border-color .12s;
  display:block;text-decoration:none}
.schoolcard:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:var(--shadow-lift)}
.schoolcard.off{opacity:.55}
.schoolopen{margin:0}
/* covers the card's face, but stops above the two buttons at the bottom */
.schoolface{position:absolute;inset:0 0 86px 0;width:100%;background:none;border:0;padding:0;
  cursor:pointer;border-radius:18px}
.schoolface:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.schoolcrest{display:block;width:62px;height:62px;margin:0 auto 10px;border-radius:18px;background:var(--grad-soft);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.schoolcrest img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff}
.schoolcrest b{font-family:var(--slab);font-size:20px;color:var(--navy)}
.schoolname{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.schoolwhere{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.schoolnums{text-align:center;margin:11px 0 10px;font-size:11px;color:var(--muted)}
.schoolnums span{display:inline-block;margin:0 7px;vertical-align:middle}
.schoolnums b{display:block;font-family:var(--slab);font-size:16px;color:var(--ink);font-weight:700}
.schoolnums span{text-align:center}
.schoolacts{display:flex;gap:6px}
.schoolacts form{flex:1;margin:0}
.addcard{border-style:dashed;display:flex;flex-direction:column;justify-content:center;align-items:center}
.addcard .schoolcrest.add{background:var(--grad);color:#fff;border-color:transparent;
  display:grid;place-items:center}
.btn.big{padding:11px 18px;font-size:14px;border-radius:13px}
.formfoot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap}
.formfoot .btn{min-width:140px;justify-content:center}
.newschool{max-width:720px}
@media(max-width:760px){
  .schoolgrid{grid-template-columns:1fr 1fr;gap:10px}
  .schoolcrest{width:52px;height:52px;border-radius:15px}
  .schoolname{font-size:13px}
  .formfoot .btn{flex:1}
}

/* ==================================================================
   A livelier skin (v5.8)

   The old look was one accent colour on white cards — the shape every
   business system takes. The logo has three colours in it and people in the
   middle; this uses all three, with more air, rounder shapes and headings
   that look deliberate.

   Nothing structural changes: the same markup, read differently.
   ================================================================== */

/* panels sit on a tinted ground rather than flat grey */
body{background:
  radial-gradient(1200px 520px at 8% -8%, var(--cyan-soft) 0%, rgba(255,255,255,0) 60%),
  radial-gradient(900px 440px at 100% 0%, var(--pink-soft) 0%, rgba(255,255,255,0) 55%),
  var(--paper)}
[data-theme="midnight"] body{background:
  radial-gradient(1100px 500px at 8% -8%, #13283E 0%, rgba(0,0,0,0) 60%),
  radial-gradient(900px 420px at 100% 0%, #2A1730 0%, rgba(0,0,0,0) 55%),
  var(--paper)}

/* cards: rounder, lighter, with a quiet hairline instead of a grey box */
.card{border-radius:20px;border-color:var(--line-2);box-shadow:0 1px 2px rgba(36,60,84,.04),0 18px 34px -26px rgba(36,60,84,.35)}
.card>header{background:transparent;border-bottom:1px solid var(--line-2);padding:15px 18px 12px}
.card>header h3{font-size:15.5px;letter-spacing:-.01em}
.card .body{padding:16px 18px}

/* every card heading gets a small coloured bar, alternating the two accents */
.card>header h3::before{content:'';display:inline-block;width:4px;height:15px;border-radius:4px;
  background:var(--grad);margin-right:9px;vertical-align:-2px}
.card:nth-of-type(even)>header h3::before{background:var(--grad-warm)}

/* statistics: colour the whole tile, not a thin line on top */
.stat{border-radius:18px;padding:15px 16px;border:1px solid var(--line-2);
  background:linear-gradient(160deg,#fff 0%,var(--cyan-soft) 190%)}
.stat .k{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat .v{font-size:30px;line-height:1.05;margin-top:6px;color:var(--navy)}
.stat .d{font-size:11.5px;color:var(--muted);margin-top:4px}
.stat.s-sky{background:linear-gradient(160deg,#fff 0%,var(--cyan-soft) 170%)}
.stat.s-clay{background:linear-gradient(160deg,#fff 0%,var(--clay-soft) 170%)}
.stat.s-sage{background:linear-gradient(160deg,#fff 0%,var(--sage-soft) 170%)}
.stat.s-brass{background:linear-gradient(160deg,#fff 0%,var(--brass-soft) 170%)}
[data-theme="midnight"] .stat{background:linear-gradient(160deg,#16223A 0%,#0F1B2E 100%)}
[data-theme="midnight"] .stat .v{color:#7DD3FC}

/* buttons: rounder, with a little lift */
.btn{border-radius:12px;font-weight:600}
.btn.pri{box-shadow:0 8px 18px -10px var(--cyan)}
.btn.pri:active{transform:translateY(1px)}

/* chips read as labels, not boxes */
.chip{border-radius:999px;padding:3px 10px;font-weight:700;font-size:11px;letter-spacing:.02em}

/* the page heading, with the school's second colour under it */
.pagehead h2{font-size:26px;letter-spacing:-.02em;position:relative;display:inline-block;padding-bottom:5px}
.pagehead h2::after{content:'';position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:3px;
  background:var(--grad-warm)}
.pagehead p{font-size:13.5px}

/* tables: lighter lines, warmer heads */
thead th{background:transparent;border-bottom:1.5px solid var(--line);color:var(--muted);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
tbody tr{border-bottom:1px solid var(--line-2)}
tbody tr:hover{background:var(--cyan-soft)}
[data-theme="midnight"] tbody tr:hover{background:#16223A}

/* the row of things needing attention: the left edge carries the colour */
.nextsteps .fitem{border-left:3px solid transparent;border-radius:0 12px 12px 0}
.nextsteps .fitem:hover{background:var(--cyan-soft)}

/* ---- the things done every day (v5.8) ---- */
.quickrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-bottom:18px}
.quickcard{display:block;padding:15px 14px;border-radius:17px;color:#fff;text-decoration:none;
  position:relative;overflow:hidden;min-height:92px;
  box-shadow:0 12px 24px -16px rgba(20,30,45,.75);transition:transform .14s,box-shadow .14s}
.quickcard:hover{transform:translateY(-3px);box-shadow:0 18px 30px -16px rgba(20,30,45,.8)}
.quickcard::after{content:'';position:absolute;right:-26px;bottom:-34px;width:104px;height:104px;
  border-radius:50%;background:rgba(255,255,255,.14)}
.quickcard .qicon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:rgba(255,255,255,.22);margin-bottom:10px;position:relative;z-index:1}
.quickcard b{display:block;font-size:14px;line-height:1.25;font-weight:700;position:relative;z-index:1}
.q-cyan{background:linear-gradient(140deg,#22C3EE 0%,#0E7BC4 100%)}
.q-pink{background:linear-gradient(140deg,#F27FB4 0%,#D6357F 100%)}
.q-violet{background:linear-gradient(140deg,#A78BFA 0%,#6D28D9 100%)}
.q-green{background:linear-gradient(140deg,#34D399 0%,#0E8A5F 100%)}
.q-amber{background:linear-gradient(140deg,#FBBF24 0%,#D97706 100%)}
.q-indigo{background:linear-gradient(140deg,#60A5FA 0%,#1D4ED8 100%)}
@media(max-width:760px){
  .quickrow{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
  .quickcard{min-height:80px;padding:12px 11px;border-radius:15px}
  .quickcard b{font-size:12.5px}
  .quickcard .qicon{width:32px;height:32px;border-radius:10px;margin-bottom:7px}
}
@media print{ .quickrow{display:none} }

/* ---- one thing at a time (v5.9) ---- */
.nextcard{display:block;padding:20px;border-radius:20px;color:#fff;background:var(--grad);
  text-decoration:none;margin-bottom:16px;position:relative;overflow:hidden;
  box-shadow:0 16px 30px -18px rgba(20,30,45,.8)}
.nextcard::after{content:'';position:absolute;right:-40px;top:-50px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.12)}
.nextlabel{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.22);padding:3px 10px;border-radius:999px;margin-bottom:9px;position:relative;z-index:1}
.nextcard b{display:block;font-family:var(--slab);font-size:21px;line-height:1.2;position:relative;z-index:1}
.nextwhy{display:block;font-size:13px;opacity:.92;margin-top:6px;max-width:52ch;position:relative;z-index:1}
.nextgo{display:inline-block;margin-top:12px;font-weight:700;font-size:13.5px;position:relative;z-index:1}

.guidestep{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-2)}
.guidestep:first-child{border-top:0}
.guidemark{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;border:1.5px solid var(--line);color:var(--muted);background:var(--card)}
.guidewords{flex:1;min-width:0}
.guidewords b{display:block;font-size:13.5px;color:var(--ink)}
.guidewords span{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.is-done{opacity:.6}
.is-done .guidemark{background:var(--sage);border-color:transparent;color:#fff}
.is-ready .guidemark{background:var(--grad);border-color:transparent;color:#fff}
.is-blocked{opacity:.75}
.is-blocked .guidewords span{color:var(--brass)}

/* ---- a page that cannot work yet says so (v5.9) ---- */
.blockednote{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,var(--brass-soft),#fff);border:1px solid var(--brass);
  border-left:4px solid var(--brass);border-radius:16px;padding:14px 16px;margin-bottom:16px}
.blockedwords{flex:1;min-width:220px}
.blockedwords b{display:block;font-size:14.5px;color:var(--navy)}
.blockedwords span{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:3px}
[data-theme="midnight"] .blockednote{background:linear-gradient(135deg,#3A2D0C,#16223A);color:var(--ink)}
[data-theme="midnight"] .blockedwords b{color:var(--ink)}

/* ---- the one next step, on the dashboard (v5.9) ---- */
.nextstrip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  padding:16px 18px;border-radius:18px;margin-bottom:16px;color:#fff;background:var(--grad-play);
  box-shadow:0 14px 28px -18px rgba(20,30,45,.8)}
.nextstripwords{min-width:240px;flex:1}
.nextstrip .nextlabel{background:rgba(255,255,255,.22)}
.nextstrip b{display:block;font-family:var(--slab);font-size:18px;line-height:1.25;margin-top:2px}
.nextstrip .nextwhy{display:block;font-size:12.5px;opacity:.93;margin-top:4px}
.nextstrip .btn.ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.nextstrip .btn.pri{background:#fff;color:var(--navy);box-shadow:none}
@media print{ .nextstrip{display:none} }

/* ---- one question at a time (v6.0) ---- */
.wizwrap{max-width:620px;margin:0 auto}
.wizhead{margin-bottom:18px}
.wiztop{margin-bottom:10px}
.wizcount{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan);background:var(--cyan-soft);padding:3px 10px;border-radius:999px}
.wiztop b{display:block;font-family:var(--slab);font-size:24px;line-height:1.2;margin-top:8px;
  letter-spacing:-.02em;color:var(--ink)}
.wizbar{height:7px;border-radius:99px;background:var(--line-2);overflow:hidden}
.wizbar span{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width .35s}
.wizdots{display:flex;gap:6px;list-style:none;margin:12px 0 0;padding:0;flex-wrap:wrap}
.wizdots li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted-2);
  padding:4px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line-2)}
.wizdots li b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:10px;
  background:var(--line-2);color:var(--muted)}
.wizdots li.is-now{color:var(--ink);border-color:var(--cyan);background:var(--cyan-soft)}
.wizdots li.is-now b{background:var(--grad);color:#fff}
.wizdots li.is-done b{background:var(--sage);color:#fff}
.wizdots li.is-done{color:var(--muted)}

.wizcard{border-radius:22px;padding:22px}
.wizcard .field{margin-bottom:18px}
.wizcard label{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px;display:block}
.wizcard input,.wizcard select,.wizcard textarea{padding:12px 14px;font-size:15px;border-radius:13px}
.wizcard .help{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.45}
.wizfoot{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:22px;flex-wrap:wrap}
.wizfoot .btn{min-width:130px;justify-content:center;padding:11px 18px;border-radius:13px;font-size:14px}
.wizfoot .spacer{flex:1}
.wizreview{border-radius:16px;border:1px solid var(--line-2);overflow:hidden}
.wizreview div{display:flex;justify-content:space-between;gap:14px;padding:11px 14px;font-size:13.5px;
  border-top:1px solid var(--line-2)}
.wizreview div:first-child{border-top:0}
.wizreview dt{color:var(--muted);margin:0}
.wizreview dd{margin:0;font-weight:600;text-align:right;color:var(--ink)}
@media(max-width:760px){
  .wiztop b{font-size:20px}
  .wizdots li span{display:none}
  .wizdots li{padding:4px}
  .wizcard{padding:17px;border-radius:18px}
  .wizfoot .btn{flex:1;min-width:0}
}

/* ---- schools, shown as a shelf rather than a list (v6.0) ---- */
.schoolgrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.schoolcard{padding:0;overflow:hidden;text-align:left}
.schoolcard .schoolbanner{display:block;height:64px;background:var(--grad);position:relative}
.schoolcard.c2 .schoolbanner{background:var(--grad-warm)}
.schoolcard.c3 .schoolbanner{background:var(--grad-play)}
.schoolcard.c4 .schoolbanner{background:linear-gradient(135deg,#34D399,#0E8A5F)}
.schoolcard.c5 .schoolbanner{background:linear-gradient(135deg,#FBBF24,#D97706)}
.schoolcard .schoolbanner::after{content:'';position:absolute;right:-20px;top:-26px;width:96px;height:96px;
  border-radius:50%;background:rgba(255,255,255,.16)}
.schoolcrest{width:58px;height:58px;margin:-33px 0 10px 16px;border-radius:17px;background:#fff;
  border:2px solid #fff;box-shadow:0 6px 14px -8px rgba(20,30,45,.6);position:relative;z-index:1}
.schoolbody{padding:0 16px 14px}
.schoolname{font-size:14.5px}
.schoolnums{text-align:left;margin:10px 0 12px}
.schoolnums span{margin:0 14px 0 0}
.schoolacts{padding:0 14px 14px}
@media(max-width:760px){
  .schoolgrid{grid-template-columns:1fr;gap:10px}
  .schoolcard{display:flex;align-items:center;gap:12px;padding:12px 14px}
  .schoolcard .schoolbanner{display:none}
  .schoolcrest{margin:0;width:48px;height:48px;flex:none}
  .schoolbody{padding:0;flex:1;min-width:0}
  .schoolnums{margin:4px 0 0;font-size:10.5px}
  .schoolacts{padding:0;flex:none;display:block;width:86px}
  .schoolacts form{margin-bottom:5px}
}

/* ==================================================================
   Desktop: fill the page (v6.1)

   The guided forms put every step in a 680-pixel column, which on a wide
   monitor leaves two thirds of the screen empty. On a computer the step
   list moves to the left and the form takes the rest; a phone or tablet is
   left exactly as it was.
   ================================================================== */
@media(min-width:1100px){
  .wz{max-width:none !important}

  /* the steps down the side, the questions beside them */
  .wz-two{display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start}
  .wz-steps-side{position:sticky;top:78px}

  /* a step with short answers uses two columns rather than one long ribbon */
  .wz-panel,.st-panel{width:100%}
  .wz-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .wz-fields .field.wide{grid-column:1 / -1}

  /* the conversation keeps a comfortable measure, centred, not stranded left */
  .wz-chat{max-width:760px;margin:0 auto}
}

/* nothing above 1099px touches a phone or a tablet */

/* ---- the foot of the sign-in card (v5.5.2) ----
   The language switch used to float in the open column beside the card, with
   nothing to line up against. It now sits inside the card with the other two
   small links, where it reads as part of the form. */
.signinfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.langpick{margin:0}
.langpick button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;
  font-weight:600;background:var(--paper);border:1px solid var(--line);color:var(--muted);
  border-radius:999px;padding:6px 13px;cursor:pointer}
.langpick button:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
.signinfoot .linkish{font-size:12.5px}
@media(max-width:560px){
  .signinfoot{justify-content:center;gap:12px}
}

/* ---- the one obvious door to the icons (v5.5.3) ---- */
/* The second accent, deliberately: the page you are on is marked in cyan,
   and this is not a page in the list — it is the way out to all of them. */
.navpinned{display:flex;align-items:center;gap:10px;margin:0 14px 14px;padding:11px 13px;
  border-radius:13px;text-decoration:none;color:#fff;background:var(--grad-warm);
  box-shadow:0 10px 20px -14px rgba(0,0,0,.9)}
.navpinned:hover{filter:brightness(1.07)}
.navpinned span{font-size:13.5px;font-weight:700;flex:1}
.navpinned i{font-style:normal;font-size:11px;opacity:.85}
.navpinned.on{outline:2px solid rgba(255,255,255,.55);outline-offset:1px}
.navpinned svg{flex:none}

/* ==================================================================
   The module tiles, filling the page (v5.5.5)

   They were sized for a phone and left three quarters of a computer screen
   empty. They now grow to fill the row, with the picture on a soft tinted
   chip and the name beside it — a shelf of cards rather than a line of
   stamps. A phone keeps two to a row.
   ================================================================== */
@media(min-width:1100px){
  .launcher{max-width:none}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px}
  .tiles.big{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

  /* Icon on the left, words on the right — laid out with position, not
     flexbox: a flex item that is a block span collapses in some engines and
     the icon simply disappears. Found by printing this very tile. */
  /* Picture on the left, name beside it, a card you read rather than a
     stamp. The tiles grow to fill the row instead of sitting in the corner. */
  .tile{display:flex;align-items:center;gap:15px;text-align:left;
    padding:20px;min-height:96px;border-radius:20px;position:relative}
  .tile > span:last-child{font-size:15px;line-height:1.3;flex:1;min-width:0}
  .tileicon{flex:0 0 auto;width:56px;height:56px;line-height:56px;border-radius:17px;margin:0}
  .tileicon .iconimg{width:34px;height:34px}
  .sectiontile{align-items:flex-start}
  .sectiontile i{display:block;margin-top:4px;font-size:12px}

  /* a quiet arrow, so it is plain the card opens something */
  .tile::after{content:'›';position:absolute;right:16px;top:50%;transform:translateY(-50%);
    font-size:22px;line-height:1;color:var(--muted-2);transition:transform .14s,color .14s}
  .tile:hover::after{color:var(--cyan);transform:translate(3px,-50%)}
}

/* the soft chip reads better than a solid block behind a coloured picture */
.tileicon.pic{background:var(--grad-soft);border:1px solid var(--line-2)}
[data-theme="midnight"] .tileicon.pic{background:#16223A}

@media(max-width:1099px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}
@media(max-width:760px){
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{padding:14px 10px 12px}
  .tileicon{width:42px;height:42px;line-height:42px;border-radius:13px}
  .tileicon .iconimg{width:26px;height:26px}
  .tile > span:last-child{font-size:12.5px}
}

/* ==================================================================
   Tiles are not sidebar rows (v5.5.5)

   The tiles carry the same class as the menu rows so the search can find
   them, and were inheriting the sidebar's colours: pale blue-grey text on a
   white card, turning WHITE on hover — invisible. These rules win over them
   and take their colour from the theme, so every palette stays readable.
   ================================================================== */
.tile.navitem,
a.tile.navitem,
.sectiontile{
  color:var(--ink);
  background:var(--card);
  border:1px solid var(--line-2);
}
.tile.navitem > span:last-child,
.sectiontile > span:nth-child(2){ color:var(--ink) }
.sectiontile i{ color:var(--muted) }

@media(hover:hover){
  .tile.navitem:hover,
  a.tile.navitem:hover,
  .sectiontile:hover{
    background:var(--card);
    color:var(--ink);
    border-color:var(--cyan);
    /* the lift: it rises towards you and the shadow deepens */
    transform:translateY(-4px);
    box-shadow:0 18px 34px -18px rgba(20,30,45,.45), 0 0 0 3px var(--cyan-soft);
  }
  .tile.navitem:hover > span:last-child,
  .sectiontile:hover > span:nth-child(2){ color:var(--cyan) }
  .tile.navitem:hover .tileicon{ transform:scale(1.06) }
}
.tile .tileicon{ transition:transform .14s }

/* dark theme: a white card would be wrong, and so would dark-on-dark text */
[data-theme="midnight"] .tile.navitem,
[data-theme="midnight"] .sectiontile{ background:var(--card);color:var(--ink);border-color:var(--line) }
[data-theme="midnight"] .tile.navitem > span:last-child,
[data-theme="midnight"] .sectiontile > span:nth-child(2){ color:var(--ink) }
@media(hover:hover){
  [data-theme="midnight"] .tile.navitem:hover,
  [data-theme="midnight"] .sectiontile:hover{
    background:#16223A;border-color:var(--cyan);
    box-shadow:0 18px 34px -18px rgba(0,0,0,.9), 0 0 0 3px rgba(56,189,248,.18);
  }
}

/* ==================================================================
   Module screens fill the page (v5.5.6)

   The tiles grew across the row but stopped there, leaving most of the
   screen empty below. Now they fill the height too: the number of columns
   follows the number of pages (6 -> 3 x 2, 8 -> 4 x 2) so the grid is even,
   and each card carries the page's name, a line on what it is for, and
   "Open". A section with only two pages gets cards of a sensible size, not
   two giant slabs, and the other sections sit at the foot of the page.
   On a phone: two to a row, down to the tab bar.
   ================================================================== */
.launcher.fill{display:flex;flex-direction:column;min-height:calc(100dvh - var(--fill-top,230px) - var(--fill-bottom,24px))}
.launcher.fill .launchgrp{flex:1;display:flex;flex-direction:column;margin-bottom:0}
.launcher.fill #searchHits:not([hidden]) ~ *{display:none}
.tiles.filled{flex:1;display:grid;gap:16px;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  grid-auto-rows:minmax(150px,1fr);
  max-height:calc(var(--rows) * 300px + (var(--rows) - 1) * 16px)}
.tiles.filled .tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;
  text-align:left;padding:26px 26px 22px;min-height:0;border-radius:22px;overflow:hidden;isolation:isolate}
/* a soft wash of the theme in the corner, so a tall card is never a blank white box */
.tiles.filled .tile::before{content:"";position:absolute;z-index:-1;right:-30%;bottom:-45%;width:85%;aspect-ratio:1;
  border-radius:50%;background:var(--grad-soft);opacity:.75;transition:transform .25s}
.tiles.filled .tile::after{content:none}
.tiles.filled .tile:hover::before{transform:scale(1.12)}
.tiles.filled .tileicon{width:64px;height:64px;line-height:64px;border-radius:19px;margin:0 0 18px}
.tiles.filled .tileicon .iconimg{width:38px;height:38px}
.tiles.filled .tiletext{display:flex;flex-direction:column;flex:1;width:100%;min-width:0}
.tiles.filled .tiletext b{font-size:18px;line-height:1.25;font-weight:700;color:var(--ink)}
.tiles.filled .tiletext small{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;font-weight:500;color:var(--muted)}
.tiles.filled .tiletext i{display:block;margin-top:8px;font-style:normal;font-size:12px;font-weight:700;color:var(--cyan)}
.tiles.filled .tiletext em{margin-top:auto;padding-top:14px;font-style:normal;font-size:13px;font-weight:700;color:var(--cyan);
  transition:transform .15s}
.tiles.filled .tile:hover .tiletext em{transform:translateX(4px)}
.tiles.filled .tile .navdot{top:16px;right:16px}
.launcher.fill .othersections{margin-top:auto;padding-top:18px}
.launcher.fill .othersections .btn{min-height:38px;padding:0 14px}
[data-theme="midnight"] .tiles.filled .tile::before{opacity:.5}

/* tablet: as many as fit, still filling the height */
@media(max-width:1099px){
  .tiles.filled{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));max-height:none}
  .tiles.filled .tile{padding:20px}
  .tiles.filled .tileicon{width:54px;height:54px;line-height:54px;border-radius:16px;margin-bottom:14px}
}
/* phone and app: two to a row, big enough to tap, the screen filled down to the tab bar */
@media(max-width:760px){
  .tiles.filled{grid-template-columns:repeat(var(--mcols,2),minmax(0,1fr));gap:10px;grid-auto-rows:minmax(132px,1fr)}
  .tiles.filled .tile{padding:16px 14px 14px;border-radius:18px}
  .tiles.filled .tileicon{width:46px;height:46px;line-height:46px;border-radius:14px;margin-bottom:10px}
  .tiles.filled .tileicon .iconimg{width:28px;height:28px}
  .tiles.filled .tiletext b{font-size:14.5px}
  .tiles.filled .tiletext small{font-size:12px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tiles.filled .tiletext em{display:none}
  .tiles.filled .tile::before{width:110%;right:-55%;bottom:-60%}
  .launcher.fill .othersections{padding-top:14px}
}

/* 5.5.7 ------------------------------------------------------------
   Inside a school as Global Education Link: a small "Leave school"
   button in the top bar instead of a banner across every page. */
.leaveschool{flex:none;margin:0 6px}
.leaveschool .btn{gap:6px;white-space:nowrap}
.leaveschool .btn svg{transform:rotate(90deg)}
@media(max-width:760px){
  .leaveschool{margin:0 2px}
  .leaveschool .btn{padding:0;width:36px;height:36px;justify-content:center;border-radius:50%}
  .leaveschool .btn span{display:none}
}
/* All modules: the list of every page is only for search results — keep it hidden until you search */
.launcher.fill .launchgrp[hidden]{display:none}
/* and the same for each page while searching: pages that do not match must disappear */
.launcher [hidden]{display:none!important}

/* 5.5.8 — a school's own logo at the top of the sidebar for its people */
.side-head.schoolhead{padding:14px 16px 12px}
.vendormark.schoolbrand{max-width:200px;max-height:92px;width:auto;height:auto;object-fit:contain}
.side-school.nocrest .crest{gap:0}


/* 5.5.8 — the + beside a school's own dropdown lists */
.optselect{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.optselect > select{flex:1;min-width:0}
.optadd{flex:none;width:44px;padding:0;justify-content:center}
.optnew{flex-basis:100%;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.optnew[hidden]{display:none}
.optnew input{flex:1;min-width:180px}
.optmsg{font-size:12.5px;color:var(--muted)}
/* switching an account off: the reason box */
.offbox,.notebox{position:relative}
.offbox > summary,.notebox > summary{list-style:none;cursor:pointer}
.offbox > summary::-webkit-details-marker,.notebox > summary::-webkit-details-marker{display:none}
.offform,.notebox form{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;min-width:260px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--shadow-lift,0 8px 24px -12px rgba(0,0,0,.3))}
.offform label{font-size:13px;font-weight:600}
.offwhy{color:var(--clay);margin-top:3px}
/* the visitors' book */
.visitphoto{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--grad-soft);
  font-size:12px;font-weight:700;color:var(--muted)}
.visitnote{margin-top:6px;max-width:320px}
/* numbers you can open */
a.stat.drill{display:block;text-decoration:none;color:inherit;position:relative;transition:transform .15s,box-shadow .15s}
a.stat.drill::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--muted-2);transition:transform .15s,color .15s}
a.stat.drill:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift,0 10px 24px -14px rgba(0,0,0,.35))}
a.stat.drill:hover::after{color:var(--cyan);transform:translate(3px,-50%)}
a.stat.drill:focus-visible{outline:3px solid var(--cyan-soft);outline-offset:2px}

/* 5.6.0 — picture icons on the top-bar buttons (Back, Home, All modules, Leave school) */
.navpic{width:22px;height:22px;display:block;object-fit:contain;pointer-events:none}
.navpic.sm{width:16px;height:16px;display:inline-block;vertical-align:middle}
.navkey.pic{background:var(--card)}
.navkey.pic.on{background:var(--cyan-soft);border-color:var(--cyan)}   /* the page you are on: a soft highlight, so the picture still reads */
.burger .navpic{width:22px;height:22px}
.leaveschool .btn .navpic{width:18px;height:18px}
@media(max-width:760px){ .navpic{width:20px;height:20px} }

/* 5.6.1 — top bar: nothing wraps or runs into its neighbour, at any width */
.top{min-width:0}
.top .where{flex:0 1 auto;overflow:hidden}
.top .where h1,.top .where p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me{flex:none;max-width:240px}
.me .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.me .t span{overflow:hidden;text-overflow:ellipsis}
.navkeys,.topcrest,.leaveschool,.burger{flex:none}
@media(max-width:1280px){ .me .t{max-width:130px} .top .search input{width:170px} }
@media(max-width:1024px){ .top{gap:8px} }
/* phones: the school's badge is in the menu already; the page title gets the room */
@media(max-width:480px){
  .topcrest{display:none}
  .navkeys{gap:4px}
  .top{gap:6px}
}

/* 5.6.3 — leave tracker: which weekday, as five little bars */
.weekbars{display:flex;align-items:flex-end;gap:8px;height:46px;margin-top:8px}
.weekbars span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.weekbars i{display:block;width:100%;min-height:3px;border-radius:4px 4px 0 0;background:var(--grad)}
.weekbars b{font-size:10.5px;font-weight:600;color:var(--muted)}

/* 5.6.4 — profile pictures wherever a person appears */
.av{overflow:hidden}
.av.hasphoto{padding:0;background:var(--line-2)}
.av.hasphoto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.av.big{width:96px;height:96px;font-size:30px;flex:none}
.photoedit{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.photopick{cursor:pointer}

/* 5.6.4 — one search for everything, at the top of every page */
.gsearch{position:relative;flex:1 1 300px;max-width:470px;min-width:0}
.gsearch-box{display:flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 12px;border:1.5px solid var(--line);border-radius:22px;
  background:var(--card);transition:border-color .15s,box-shadow .15s}
.gsearch-box:focus-within{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-soft)}
.gsearch-ic{width:22px;height:22px;flex:none}
.gsearch-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:14.5px;color:var(--ink);height:100%;padding:0}
.gsearch-box input::-webkit-search-cancel-button{display:none}
.gscope{display:inline-flex;align-items:center;gap:6px;flex:none;border:0;background:var(--paper);border-radius:16px;padding:4px 9px 4px 5px;
  font-size:12px;font-weight:700;color:var(--muted);cursor:pointer}
.gscope-track{position:relative;width:28px;height:16px;border-radius:9px;background:var(--line);transition:background .15s}
.gscope-knob{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.gscope[aria-checked="true"]{color:var(--cyan);background:var(--cyan-soft)}
.gscope[aria-checked="true"] .gscope-track{background:var(--cyan)}
.gscope[aria-checked="true"] .gscope-knob{transform:translateX(12px)}
.gkbd{flex:none;font:600 10.5px/1 var(--sans);color:var(--muted-2);border:1px solid var(--line);border-radius:6px;padding:3px 5px}
.gsearch-open,.gsearch-close{display:none}
.gresults{position:absolute;top:calc(100% + 8px);left:0;width:max(100%,min(560px,92vw));max-height:min(70vh,560px);overflow-y:auto;z-index:120;
  background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 22px 50px -22px rgba(15,30,50,.45);padding:6px}
.gresults[hidden]{display:none}
.gr-head{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);padding:10px 10px 4px}
.gr-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;text-decoration:none;color:var(--ink)}
.gr-item.on,.gr-item:hover{background:var(--cyan-soft)}
.gr-pic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--grad-soft);color:var(--cyan);overflow:hidden;font-size:12px;font-weight:700}
.gr-pic.person{border-radius:50%;background:var(--grad);color:#fff}
.gr-pic img{width:100%;height:100%;object-fit:cover}
.gr-pic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.gr-text{flex:1;min-width:0;display:flex;flex-direction:column}
.gr-text b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-text small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-text mark{background:#FFF1A8;color:inherit;border-radius:3px;padding:0 1px}
.gr-go{color:var(--muted-2);font-size:18px}
.gr-empty{padding:22px 14px;text-align:center;color:var(--ink);font-size:14px}
.gr-empty small{color:var(--muted)}
.gr-foot{display:flex;gap:16px;justify-content:center;padding:8px 6px 4px;margin-top:4px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--muted-2)}
@media(max-width:1280px){ .gsearch{flex-basis:220px} .gkbd{display:none} }
/* tablets and phones: a search button that opens search full screen */
@media(max-width:1024px){
  .gsearch{flex:none;max-width:none}
  .gsearch-box{display:none}
  .gsearch-open{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);padding:0}
  .gsearch.full{position:fixed;inset:0;z-index:300;background:var(--paper);display:flex;flex-direction:column;
    padding:calc(10px + env(safe-area-inset-top,0px)) 12px 12px}
  .gsearch.full .gsearch-open{display:none}
  .gsearch.full .gsearch-box{display:flex;height:48px;flex:none}
  .gsearch.full .gsearch-close{display:grid;place-items:center;width:36px;height:36px;border:0;background:none;font-size:18px;color:var(--muted);flex:none}
  .gsearch.full .gresults{position:static;width:auto;max-height:none;flex:1;margin-top:10px;box-shadow:none}
  .gsearch.full .gsearch-box input{font-size:16px}
}
html.gsearch-locked{overflow:hidden}

/* 5.6.4 — phones: less scrolling, nothing hidden under the SOS button */
@media(max-width:760px){
  /* number cards two to a row, compact */
  .grid.g4:has(> .stat),.grid.g4:has(> a.stat),.grid.g3:has(> .stat),.grid.g2:has(> .stat){grid-template-columns:1fr 1fr !important;gap:10px}
  .grid:has(> .stat) > .stat{padding:12px 13px;min-height:0}
  .grid:has(> .stat) .stat .k{font-size:10.5px;letter-spacing:.04em}
  .grid:has(> .stat) .stat .v{font-size:24px;margin:4px 0 2px}
  .grid:has(> .stat) .stat .d{font-size:11.5px;line-height:1.35}
  a.stat.drill::after{right:10px;font-size:18px}
  /* the SOS button: smaller, tucked into the corner, and pages leave room for it at the end */
  .sosbtn{right:12px;bottom:calc(74px + env(safe-area-inset-bottom,0px));padding:0;width:52px;height:52px;justify-content:center;flex-direction:column;gap:1px;font-size:10px}
  .sosbtn svg{width:17px;height:17px}
  .content{padding-bottom:150px}
  /* date pickers with ‹ › : the arrows stay small */
  .filters > a.btn.sm{flex:0 0 auto;width:40px;justify-content:center;padding:0}
}
@media(max-width:760px){ .savebar{padding-right:76px} }

/* 5.6.5 — staff check-in */
.ci-h3{font-size:17px;margin:0 0 12px}
.ci-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ci-mode{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;background:var(--card)}
.ci-mode:has(input:checked){border-color:var(--cyan);background:var(--cyan-soft)}
.ci-mode input{margin-top:3px;accent-color:var(--cyan);width:18px;height:18px}
.ci-mode b{display:block;font-size:14.5px}
.ci-mode small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);line-height:1.45}
.checkin .body{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 18px}
.ci-button{position:relative;width:200px;height:200px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 30% 25%,#34d399,#059669);box-shadow:0 18px 40px -16px rgba(5,150,105,.75);display:grid;place-items:center}
.ci-button[disabled]{filter:grayscale(.7);opacity:.6;cursor:not-allowed}
.ci-ring{position:absolute;inset:-10px;border-radius:50%;border:3px solid rgba(16,185,129,.35);animation:ciPulse 2.4s ease-out infinite}
.ci-button.busy .ci-ring{animation-duration:.9s}
.ci-button.done{background:radial-gradient(circle at 30% 25%,#60a5fa,#2563eb)}
@keyframes ciPulse{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.12);opacity:0}}
@media (prefers-reduced-motion:reduce){.ci-ring{animation:none}}
.ci-label{display:flex;flex-direction:column;align-items:center}
.ci-label b{font-size:26px;font-weight:800}
.ci-label small{font-size:12.5px;opacity:.9;margin-top:4px}
.ci-msg{min-height:22px;text-align:center;font-size:14.5px;font-weight:600;max-width:420px}
.ci-msg.ok{color:var(--sage)} .ci-msg.warn{color:#B45309} .ci-msg.bad{color:var(--clay)}
.ci-step{display:flex;gap:14px;align-items:flex-start;max-width:520px}
.ci-step p{color:var(--muted);font-size:13.5px;line-height:1.5}
.ci-num{width:30px;height:30px;flex:none;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700}
.btn.big{min-height:48px;padding:0 22px;font-size:15px}
.checked{display:flex;gap:12px;align-items:center;padding:12px 16px;border-radius:14px;background:var(--sage-soft);width:100%;max-width:420px}
.checked.late{background:var(--brass-soft)}
.checkmark{width:34px;height:34px;border-radius:50%;background:var(--sage);color:#fff;display:grid;place-items:center;font-weight:800}
.checked b{display:block} .checked span span,.checked div span{font-size:12.5px;color:var(--muted)}
.ci-other{text-align:center;margin:0}
.linklike{border:0;background:none;color:var(--cyan);font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.ci-phone{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.ci-phone small{display:block;color:var(--muted);font-size:12px}
.ci-h4{font-size:13px;margin:16px 0 6px;color:var(--muted)}
.ci-try{font-size:13px;padding:6px 0;border-bottom:1px solid var(--line-2)}
.ci-try.refused{color:var(--clay)}
/* practice panel */
.practice{border:1.5px dashed var(--brass);background:linear-gradient(180deg,var(--brass-soft),var(--card) 40%)}
.practice > header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pr-box{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.pr-where{display:flex;flex-wrap:wrap;gap:8px}
.pr-chip{display:inline-flex;cursor:pointer;position:relative}
.pr-chip input{position:absolute;opacity:0;pointer-events:none}
.pr-chip span{padding:8px 12px;border:1.5px solid var(--line);border-radius:20px;font-size:13px;font-weight:600}
.pr-chip input:checked + span{border-color:var(--cyan);background:var(--cyan-soft);color:var(--ink)}
.pr-chip input:focus-visible + span{outline:3px solid var(--cyan-soft)}
/* the search box keeps enough room to read; the page title gives way first */
@media(min-width:1025px){ .gsearch{min-width:250px} }
@media(min-width:1025px) and (max-width:1280px){ .gscope-lbl{display:none} .gscope{padding:4px 6px} }

/* 5.6.7 — school cards on phones: the same rich card as on a computer */
.phoneonly{display:none}
@media(max-width:760px){
  .phoneonly{display:block}
  .nophone{display:none!important}
  .mhead{font-size:17px;margin:18px 2px 10px}
  .schoolgrid{grid-template-columns:1fr;gap:14px}
  .schoolcard{display:block;padding:0;text-align:left;border-radius:20px;box-shadow:0 10px 26px -18px rgba(20,35,60,.45)}
  .schoolcard .schoolbanner{display:block;height:58px}
  .schoolcrest{margin:-31px 0 0 16px;width:58px;height:58px;border-radius:17px}
  .schoolbody{display:block;padding:10px 16px 0}
  .schoolname{font-size:16px;line-height:1.3}
  .schoolwhere{font-size:12.5px;margin-top:3px}
  .schoolnums{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;font-size:11.5px;text-align:left}
  .schoolnums span{display:inline-flex;align-items:baseline;gap:5px;margin:0;padding:6px 11px;border-radius:20px;background:var(--paper);border:1px solid var(--line-2);color:var(--muted)}
  .schoolnums b{display:inline;font-size:15px}
  .schoolnums span.on{background:var(--sage-soft);border-color:transparent;color:var(--sage)}
  .schoolnums span.on b,.schoolnums span.offchip b{font-size:12.5px}
  .schoolnums span.offchip{background:var(--clay-soft);border-color:transparent;color:var(--clay)}
  .schoolacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;width:auto;padding:14px 16px 16px}
  .schoolacts form{margin:0}
  .schoolacts .btn{min-height:42px;font-size:14px;border-radius:12px}
  .schoolface{inset:0 0 72px 0}
  .addcard{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 16px}
  .addcard .schoolcrest{margin:0 0 8px}
}

/* 5.6.7 — phones and tablets: the search bar is a full-width second row of the top bar,
   always there, with suggestions dropping down as you type (as on a computer) */
@media(max-width:1024px){
  .top{height:auto!important;flex-wrap:wrap;row-gap:8px;padding-top:8px;padding-bottom:10px}
  .gsearch,.gsearch.full{order:99;flex:1 0 100%;max-width:none;position:relative;inset:auto;z-index:auto;background:none;padding:0;display:block}
  .gsearch-open,.gsearch.full .gsearch-close,.gsearch-close{display:none!important}
  .gsearch-box,.gsearch.full .gsearch-box{display:flex;height:44px;border-radius:14px;background:var(--paper);border-color:var(--line-2)}
  .gsearch-box:focus-within{background:var(--card)}
  .gsearch-box input{font-size:16px}                 /* 16px: phones do not zoom in */
  .gkbd{display:none}
  .gscope-lbl{display:inline}
  .gresults,.gsearch.full .gresults{position:absolute;top:calc(100% + 6px);left:0;right:0;width:auto;margin:0;flex:none;
    max-height:min(62vh,calc(100dvh - 190px));box-shadow:0 22px 50px -18px rgba(15,30,50,.5);z-index:150}
  .gr-item{padding:11px 10px}
  .gr-foot{display:none}
}
html.gsearch-locked{overflow:visible}


/* 5.6.8 — school cards on a computer: room inside, stats as pills, buttons lined up at the foot */
.schoolgrid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.schoolcard{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;gap:0;border-radius:20px;box-shadow:0 10px 28px -20px rgba(20,35,60,.45);transition:transform .15s,box-shadow .15s,border-color .15s}
.schoolcard:hover{transform:translateY(-3px);box-shadow:0 18px 36px -20px rgba(20,35,60,.5)}
.schoolcard .schoolbanner{height:72px}
.schoolcrest{margin:-36px 0 0 18px;width:64px;height:64px;border-radius:18px}
.schoolcrest b{font-size:21px}
.schoolbody{display:block;flex:1;padding:12px 18px 0}
.schoolname{display:block;font-size:15.5px;line-height:1.3}
.schoolwhere{display:block;font-size:12.5px;margin-top:4px}
.schoolnums{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;font-size:11.5px;text-align:left}
.schoolnums span{display:inline-flex;align-items:baseline;gap:5px;margin:0;padding:6px 11px;border-radius:20px;background:var(--paper);border:1px solid var(--line-2);color:var(--muted)}
.schoolnums b{display:inline;font-size:15px}
.schoolacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;padding:16px 18px 18px;width:auto}
.schoolacts form{margin:0}
.schoolacts .btn{min-height:40px;font-size:14px;border-radius:12px}
.schoolface{inset:0 0 78px 0}
.addcard.schoolcard,.addcard{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 20px;min-height:250px;
  border:2px dashed var(--line);background:transparent;box-shadow:none}
.addcard:hover{border-color:var(--cyan);background:var(--cyan-soft)}
.addcard .schoolcrest{margin:0 0 12px}
.addcard .schoolname{font-size:16px}
.addcard .schoolwhere{max-width:220px}
@media(max-width:760px){ .schoolgrid{grid-template-columns:1fr} .addcard{min-height:0} }
/* 5.6.9 — timetable guide */
.ttflow{margin:10px 12px;padding:12px 14px;border-radius:12px;background:var(--grad-soft);font-size:13px;line-height:1.5}
.plainswitch{display:flex;gap:10px;align-items:flex-start;margin:6px 12px 14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.plainswitch input{width:18px;height:18px;margin-top:2px;accent-color:var(--cyan)}
.plainswitch b{display:block;font-size:13.5px}.plainswitch small{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
/* 5.7.0 — class timetable: step by step or grid */
.ttmodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}
.ttmodes a{display:block;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:var(--ink)}
.ttmodes a b{display:block;font-size:14px}.ttmodes a small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ttmodes a.on{border-color:var(--cyan);background:var(--cyan-soft)}
.ttmodes a.ttmodes-build{border-style:dashed}
.ttrow{display:grid;grid-template-columns:130px 1fr 1fr;gap:12px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line-2)}
.ttrow:last-child{border-bottom:0}
.ttrow .field{margin:0}
.ttrow-p b{display:block;font-size:14px}.ttrow-p small{color:var(--muted);font-size:12px}
.ttclear{margin-top:16px;text-align:right}
@media(max-width:760px){ .ttmodes{grid-template-columns:1fr} .ttrow{grid-template-columns:1fr} }