/* ==========================================================================
   ShikshaPulse Parents — app styles
   Reads only tokens.css variables. Organised: reset -> shell -> login ->
   dashboard -> menus -> shared components -> per-screen blocks -> utilities.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;line-height:1.5;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  height:100vh;height:100dvh;
}
h1,h2,h3,h4{font-family:'Baloo 2',sans-serif;letter-spacing:-.01em;text-wrap:balance}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--gold-deep);text-decoration:none}
.hide{display:none!important}
.serif{font-family:'Baloo 2',sans-serif}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Toast ---------- */
#toast{
  position:fixed;left:50%;top:calc(var(--safe-top) + 14px);transform:translate(-50%,-20px);
  z-index:999;max-width:88%;padding:11px 18px;border-radius:999px;font-size:13px;font-weight:600;
  color:#fff;background:var(--brand);box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .25s, transform .25s;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.good{background:var(--present);color:var(--on-status)} #toast.bad{background:var(--absent);color:var(--on-status)}

/* ==========================================================================
   LOGIN
   ========================================================================== */
#loginScreen{
  --login-primary:#123C2C;--login-secondary:#1C5B43;--login-accent:#EFA028;
  --login-on-primary:#FFFFFF;--login-on-accent:#10221B;
  position:fixed;inset:0;display:flex;flex-direction:column;color:var(--on-brand);
  overflow-y:auto;
  padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);
  background:
    radial-gradient(120% 80% at 82% 4%, color-mix(in srgb,var(--login-accent) 30%,transparent), transparent 46%),
    linear-gradient(168deg,var(--login-secondary) 0%, var(--login-primary) 58%,color-mix(in srgb,var(--login-primary) 78%,#000) 100%);
}
.login-brand-background{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;pointer-events:none}
#loginScreen.has-brand-background .login-brand-background{opacity:.18}
#loginScreen .arcs{position:absolute;inset:0;opacity:.5;pointer-events:none}
.login-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 30px;z-index:2}
/* Holds the real brand mark. The artwork carries its own cream card, so the
   wrapper adds only depth — a glass panel behind it would fight the card. */
.login-crest{
  width:76px;height:76px;border-radius:22px;margin-bottom:20px;overflow:hidden;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
}
.login-crest img{display:block;width:100%;height:100%;object-fit:contain}
.login-word{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:34px;line-height:1;letter-spacing:-.015em}
.login-word em{font-style:italic;color:var(--gold-2)}
.login-tag{margin-top:12px;font-size:14px;color:var(--on-brand-soft);font-weight:500;max-width:260px;line-height:1.5}
.school-branded .login-word,.school-branded .login-tag{color:var(--login-on-primary)}
.school-branded .login-tag{opacity:.78}
.login-powered{
  flex:none;z-index:2;text-align:center;padding:14px 20px 18px;
  font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--login-on-primary);opacity:.72;
}
.login-card{
  z-index:2;margin:0 14px 14px;background:var(--card);color:var(--ink);
  border-radius:28px;padding:26px 22px 20px;box-shadow:0 -8px 40px -18px rgba(0,0,0,.45);
}
.login-card h2{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:22px;margin-bottom:3px}
.login-card .sub{font-size:13px;color:var(--ink-soft);margin-bottom:20px}
.field{margin-bottom:14px}
.login-brand-status{min-height:15px;margin:-8px 0 4px;font-size:10.5px;color:var(--ink-faint)}
.login-brand-status.ready{color:var(--ink);font-weight:700}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
.inp{
  display:flex;align-items:center;gap:10px;background:var(--card-2);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 14px;height:50px;transition:.18s;
}
.inp:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-tint)}
.inp svg{width:18px;height:18px;fill:none;stroke:var(--ink-faint);stroke-width:2;flex:0 0 auto}
.inp input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;font-weight:600}
.inp input::placeholder{color:var(--ink-faint);font-weight:500}
.inp .eye{margin-left:auto;color:var(--ink-faint);cursor:pointer;display:flex}
.btn-primary{
  width:100%;height:52px;margin-top:6px;border:0;border-radius:var(--r-sm);cursor:pointer;
  font-weight:700;font-size:15.5px;color:var(--login-on-accent,var(--brand-deep));
  background:linear-gradient(140deg,color-mix(in srgb,var(--login-accent,var(--gold)) 82%,#fff),var(--login-accent,var(--gold)));
  box-shadow:0 12px 26px -10px rgba(239,160,40,.7);
  display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s, opacity .2s;
}
.btn-primary:active{transform:scale(.98)} .btn-primary:disabled{opacity:.6}
/* Inside the app the primary button sits on the approved burnt-orange accent;
   its label must use the on-accent colour (white / dark in dark mode), never the
   brand teal, which was unreadable on orange. The login screen keeps its own. */
#appShell .btn-primary{color:var(--on-accent);background:var(--gold);box-shadow:none}
.btn-primary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4}
.pay-upi{padding:0 14px 14px;margin-bottom:14px}.pay-upi .chd{padding-left:0;padding-right:0}
.pay-provider{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:13px;font-weight:700}.pay-provider select{min-height:42px;max-width:190px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);padding:0 32px 0 11px;font:inherit}
.pay-head-row{min-height:54px;display:flex;align-items:center;gap:11px;border-top:1px solid var(--line-soft);cursor:pointer}
.pay-head-row input{width:20px;height:20px;accent-color:var(--brand);flex:none}
.pay-head-row span{min-width:0;flex:1}.pay-head-row b,.pay-head-row small{display:block}
.pay-head-row b{font-size:13px}.pay-head-row small{font-size:10.5px;color:var(--ink-faint);margin-top:1px}
.pay-head-row strong{font-size:13px;color:var(--ink);white-space:nowrap}
.pay-total{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0 2px;color:var(--ink-soft)}
.pay-total b{font-size:18px;color:var(--ink)}.pay-state{margin:12px 0 0}.pay-open{display:inline-block;margin-top:8px;font-weight:800}
.parent-test-login{
  width:100%;min-height:50px;margin-top:11px;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--card-2);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;gap:11px;text-align:left;transition:border-color .18s,background .18s,transform .12s;
}
.parent-test-login[hidden]{display:none}
.parent-test-login:hover{border-color:#D8CFBD;background:#F8F3E8}
.parent-test-login:active{transform:scale(.985)}
.parent-test-login:focus-visible{outline:3px solid var(--gold-tint);outline-offset:2px}
.ptl-icon{width:32px;height:32px;border-radius:10px;background:var(--gold-tint);color:var(--gold-deep);display:grid;place-items:center;flex:none}
.ptl-icon svg,.ptl-go{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ptl-copy{display:block;min-width:0;flex:1}.ptl-copy b{display:block;font-size:12.5px}.ptl-copy small{display:block;margin-top:1px;font-size:10.5px;font-weight:500;color:var(--ink-faint)}
.ptl-go{flex:none;color:var(--ink-faint);transition:transform .18s}.parent-test-login[aria-expanded="true"] .ptl-go{transform:rotate(180deg)}
.demo-family-panel{margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card-2)}
.demo-family-panel[hidden]{display:none}
.demo-family-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:12px}
.demo-family-head span{font-size:10px;color:var(--ink-faint)}
.demo-family-search{height:42px;padding:0 11px;border:1px solid var(--line);border-radius:12px;background:var(--card);display:flex;align-items:center;gap:8px}
.demo-family-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint)}
.demo-family-search svg{width:17px;height:17px;fill:none;stroke:var(--ink-faint);stroke-width:2}
.demo-family-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:12.5px;font-weight:600}
.demo-family-list{max-height:236px;margin-top:9px;overflow:auto;display:grid;gap:7px;overscroll-behavior:contain}
.demo-family{width:100%;min-height:54px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}
.demo-family:hover{border-color:#D8CFBD}.demo-family:active{transform:scale(.99)}.demo-family:disabled{opacity:.58}
.demo-family-mark{width:34px;height:34px;border-radius:11px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;flex:none;font-size:10px;font-weight:800}
.demo-family-copy{min-width:0;flex:1}.demo-family-copy b{display:block;font-size:12px}.demo-family-copy small{display:block;margin-top:2px;color:var(--ink-faint);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-family-go{width:16px;height:16px;fill:none;stroke:var(--ink-faint);stroke-width:2;flex:none}
.demo-family-empty,.demo-family-status{padding:10px 4px;text-align:center;color:var(--ink-faint);font-size:11px}.demo-family-status:empty{display:none}
.login-err{min-height:18px;margin-top:12px;text-align:center;font-size:13px;font-weight:600;color:var(--absent)}
.login-foot{margin-top:8px;text-align:center;font-size:12.5px;color:var(--ink-faint)}
.login-foot a{font-weight:700}
.recovery-entry{display:block;margin:4px auto 0}
.recovery-view[hidden],#parentSignInView[hidden]{display:none}
.recovery-back{min-height:44px;margin:-8px 0 4px;padding:6px 0;border:0;background:none;color:var(--gold-deep);font-weight:800;cursor:pointer}
.recovery-view h2{margin-top:0}.recovery-view .sub{margin-bottom:18px}
.recovery-message{min-height:20px;margin-top:10px;color:var(--absent);font-size:12.5px;font-weight:700;line-height:1.45}
.recovery-message.good{color:var(--present)}
.recovery-options{display:grid;gap:9px;margin:4px 0 14px}
.recovery-option{display:flex;align-items:flex-start;gap:10px;min-height:56px;padding:11px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--card-2);cursor:pointer}
.recovery-option:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint)}
.recovery-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--gold-deep)}
.recovery-option span{min-width:0}.recovery-option b,.recovery-option small{display:block}.recovery-option b{font-size:12.5px}.recovery-option small{margin-top:3px;color:var(--ink-faint);font-size:11px}
.recovery-note{margin:0 0 14px;padding:11px 12px;border-radius:var(--r-sm);background:var(--gold-tint);color:var(--ink-soft);font-size:12px;line-height:1.5}
.recovery-actions{display:flex;align-items:center;gap:10px;margin-top:4px}.recovery-actions .btn-primary{margin:0;flex:1}.recovery-actions .text-link{flex:none}
.recovery-code-input{letter-spacing:.28em;text-align:center;font-size:19px}
.recovery-countdown{margin:-4px 0 12px;color:var(--ink-faint);font-size:11.5px;text-align:center}
.recovery-success{text-align:center;padding:12px 2px 4px}.recovery-success-mark{width:54px;height:54px;margin:0 auto 13px;border-radius:18px;display:grid;place-items:center;background:var(--present-soft);color:var(--present);font-size:25px;font-weight:800}.recovery-success p{margin:5px 0 16px;color:var(--ink-soft);font-size:13px;line-height:1.5}

/* ==========================================================================
   APP SHELL
   ========================================================================== */
#appShell{display:none;flex-direction:column;height:100vh;height:100dvh}
#appShell.on{display:flex}

.appheader{
  flex:0 0 auto;background:linear-gradient(150deg,var(--brand-2),var(--brand));
  color:var(--on-brand);padding-top:var(--safe-top);position:relative;z-index:20;
}
.appheader .row{display:flex;align-items:center;gap:12px;padding:11px 16px 16px}
.avatar{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-weight:800;font-size:15px;color:var(--on-accent);overflow:hidden;
  background:linear-gradient(150deg,var(--gold-2),var(--gold));
  box-shadow:0 0 0 2.5px var(--brand), 0 0 0 4.5px rgba(246,185,77,.5);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.who{flex:1;min-width:0;cursor:pointer;border:0;background:none;padding:0;text-align:left;color:inherit}
.who:disabled{opacity:1;cursor:default}
.who .nm{display:flex;align-items:center;gap:6px;font-weight:700;font-size:16.5px}
.who .nm svg{width:15px;height:15px;fill:none;stroke:var(--on-brand-soft);stroke-width:2.4;transition:transform .2s}
.who.open .nm svg{transform:rotate(180deg)}
.who .mt{display:block;font-size:12.5px;color:var(--on-brand-soft);font-weight:500;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbtn{width:48px;height:48px;border-radius:14px;flex:0 0 auto;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);display:grid;place-items:center;cursor:pointer;position:relative}
.hbtn svg{width:24px;height:24px;fill:none;stroke:var(--on-brand);stroke-width:2}
.hbtn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--gold-2);border:2px solid var(--brand)}

/* child switcher dropdown */
.switcher{position:absolute;top:100%;left:12px;right:12px;background:var(--card);color:var(--ink);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;z-index:30;border:1px solid var(--line-soft)}
.switcher .si{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;width:100%;border:0;background:var(--card);color:var(--ink);text-align:left}
.switcher .si+.si{border-top:1px solid var(--line-soft)}
.switcher .si:active{background:var(--card-2)}
.switcher .si .a2{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;
  color:var(--on-accent);background:linear-gradient(150deg,var(--gold-2),var(--gold));overflow:hidden;flex:0 0 auto}
.switcher .si .a2 img{width:100%;height:100%;object-fit:cover}
.switcher .si b{font-weight:700;font-size:14px;display:block}
.switcher .si span{font-size:12px;color:var(--ink-faint)}
.switcher .si.sel{background:var(--gold-tint)}

.content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.content::-webkit-scrollbar{display:none} .content{scrollbar-width:none}
.pad{padding:16px}

.bnav{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--nav);border-top:1px solid var(--line);
  padding:8px 4px calc(14px + var(--safe-bottom))}
.bnav .nt{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink-faint);
  min-height:58px;justify-content:center;cursor:pointer;position:relative;border:0;background:none;padding:0}
.bnav .nt svg{position:relative;z-index:1;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.bnav .nt>span:last-child{position:relative;z-index:1;font-size:13px;font-weight:800}
#appShell.student .bnav .nt[data-parent-only]{display:none}
#appShell.student .bnav{grid-template-columns:repeat(2,minmax(0,1fr))}
.bnav .nt.on{color:var(--gold-deep)}
.bnav .nt .pill{position:absolute;z-index:0;top:5px;width:64px;height:34px;border-radius:17px;background:transparent;padding:0}
.bnav .nt.on .pill{background:var(--gold-tint)}
.bnav .nt .ndot{position:absolute;top:-1px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--absent)}
.bnav .nt .nav-badge{position:absolute;z-index:2;top:3px;right:calc(50% - 29px);min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--gold);color:var(--on-accent);font-size:11px;font-weight:800;line-height:20px;text-align:center}

/* animated view entrance */
.view{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.greet{padding:20px 18px 4px}
.greet h1{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:25px;line-height:1.1}
.greet .date{font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-top:5px}
.greet .date b{color:var(--present);font-weight:700}

.today{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);
  border:1px solid var(--line-soft);display:flex;align-items:center;gap:18px}
.ring{position:relative;width:88px;height:88px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg)}
.ring .rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .rc b{font-family:'Baloo 2',sans-serif;font-size:22px;font-weight:700;line-height:1}
.ring .rc span{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-top:2px}
.today .ti{flex:1;min-width:0}
.status-pill{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;font-weight:700;font-size:12.5px}
.status-pill .pip{width:7px;height:7px;border-radius:50%;background:currentColor}
.sp-present{background:var(--present-tint);color:var(--present)}
.sp-absent{background:var(--absent-tint);color:var(--absent)}
.sp-late{background:var(--gold-tint);color:var(--gold-deep)}
.sp-none{background:var(--card-2);color:var(--ink-faint)}
.today .ti h3{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:18px;margin-top:10px}
.today .ti p{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.4}

.sec{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 11px}
.sec h4{font-size:13px;font-weight:700;color:var(--ink)}
.sec a{font-size:12px;font-weight:700;color:var(--gold-deep);cursor:pointer}

/* One action row, naming the single most urgent thing and the verb that
   clears it. home.js renders nothing at all when nothing is outstanding, so a
   quiet week shows no row rather than an empty one. */
.act{display:flex;align-items:center;gap:11px;min-height:56px;margin-top:11px;padding:11px 13px;border-radius:var(--r);
  background:var(--gold-tint);border:1px solid var(--gold);cursor:pointer;transition:transform .12s}
.act:active{transform:scale(.99)}
.act-t{flex:1;font-size:12.5px;color:var(--ink-soft);font-weight:600;line-height:1.35}
.act-t b{color:var(--gold-deep);font-weight:800;font-variant-numeric:tabular-nums}
.act-b{flex:none;min-height:48px;display:inline-flex;align-items:center;font-size:12px;font-weight:800;padding:8px 18px;border-radius:999px;
  color:var(--on-accent);background:var(--gold)}

/* The destination grid — every screen in the app, four to a row. The artwork
   is a PNG that carries its own colour, so the tile stays neutral: giving it a
   tint as well would put two colours behind one icon. minmax(0,1fr) rather
   than 1fr because an aspect-ratio child will otherwise refuse to shrink and
   the row spills out of the phone. */
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tcell{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;
  padding:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tcell:active .tico{transform:scale(.95)}
.tico{width:100%;aspect-ratio:1/.92;border-radius:15px;display:grid;place-items:center;position:relative;
  background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);transition:transform .12s}
.tico img{display:block;width:30px;height:30px}
.tlab{font-size:10px;font-weight:700;text-align:center;line-height:1.25;color:var(--ink)}
/* The badge sits proud of the tile. Its ring is --paper, the colour behind the
   grid, so it stays legible whatever the artwork puts in that corner. */
.tb{position:absolute;top:-6px;right:-5px;font-style:normal;font-size:9px;font-weight:800;
  padding:2px 6px;border-radius:999px;white-space:nowrap;border:2px solid var(--paper);
  font-variant-numeric:tabular-nums;line-height:1.35}
.tb.due{background:var(--absent);color:var(--on-status)}
.tb.warn{background:var(--gold);color:var(--on-accent)}

.mini{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.per{display:flex;align-items:center;gap:13px;padding:13px 15px}
.per+.per{border-top:1px solid var(--line-soft)}
.per .tm{font-size:11px;font-weight:700;color:var(--ink-faint);width:52px;flex:0 0 auto;font-variant-numeric:tabular-nums;line-height:1.3}
.per .bar{width:3px;align-self:stretch;border-radius:3px;background:var(--gold);flex:0 0 auto}
.per .bar.q{background:var(--line)}
.per .pn{font-weight:700;font-size:14px}
.per .pt{font-size:11.5px;color:var(--ink-soft);margin-top:1px}
.per.now{background:var(--gold-tint)}
.per .liveflag{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.05em;color:var(--gold-deep);
  background:var(--card);padding:3px 8px;border-radius:999px;border:1px solid var(--gold)}

.ann{background:var(--card);border:1px solid var(--line-soft);border-left:4px solid var(--gold);
  border-radius:var(--r-sm);padding:14px 15px;display:flex;gap:12px;align-items:flex-start}
.ann.holiday{border-left-color:var(--absent)} .ann.exam{border-left-color:var(--warn)} .ann.ptm{border-left-color:#9C27B0}
.ann .abadge{width:48px;height:48px;border-radius:12px;background:var(--gold-tint);display:grid;place-items:center;flex:0 0 auto}
.ann .abadge svg{width:24px;height:24px;fill:none;stroke:var(--gold-deep);stroke-width:2}
.ann .at{font-weight:700;font-size:13.5px}
.ann .ad{font-size:12px;color:var(--ink-soft);margin-top:3px;line-height:1.45}
.ann .aw{font-size:11px;color:var(--ink-faint);font-weight:600;margin-top:6px}

.feed{display:flex;flex-direction:column;gap:9px}
.fi{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 13px;cursor:pointer}
.fi .fic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.fi .fic svg{width:24px;height:24px;fill:none;stroke-width:2}
.fi .ft{flex:1;min-width:0} .fi .ft b{font-weight:700;font-size:13.5px;display:block} .fi .ft span{font-size:11.5px;color:var(--ink-soft)}
.fi .fw{font-size:11px;color:var(--ink-faint);font-weight:600;flex:0 0 auto}

/* ==========================================================================
   SECTION HEADER (back + title) — used by interior screens
   ========================================================================== */
.sechead{display:flex;align-items:center;gap:12px;padding:14px 16px;position:sticky;top:0;z-index:10;
  background:var(--paper);border-bottom:1px solid var(--line-soft)}
.sechead .back{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.sechead .back svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2}
.sechead h2{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:19px;flex:1;min-width:0}
.sechead .hdr-gear{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.sechead .hdr-gear svg{width:24px;height:24px;fill:none;stroke:var(--ink-soft);stroke-width:2}

/* notifications inbox rows */
.alert-row{display:flex;gap:13px;align-items:flex-start;background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:13px 14px;margin-bottom:10px}
.al-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.al-ic svg{width:20px;height:20px;fill:none;stroke-width:2}
.al-tx{flex:1;min-width:0}
.al-t{font-weight:700;font-size:14px}
.al-b{font-size:12.5px;color:var(--ink-soft);margin-top:3px;line-height:1.45}
.al-w{font-size:11px;color:var(--ink-faint);font-weight:600;margin-top:6px}

.signout{width:100%;margin-top:22px;height:50px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--card);color:var(--absent);font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.signout svg{width:18px;height:18px;fill:none;stroke:var(--absent);stroke-width:2}

/* ==========================================================================
   SHARED CARDS / PILLS / LIST
   ========================================================================== */
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:12px}
.card .chd{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line-soft)}
.card .chd h4{font-size:14px;font-weight:700}
.card .cbd{padding:14px 16px}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.pill.good{background:var(--present-tint);color:var(--present)}
.pill.bad{background:var(--absent-tint);color:var(--absent)}
.pill.warn{background:var(--gold-tint);color:var(--gold-deep)}
.pill.info{background:var(--info-tint);color:var(--info)}
.pill.muted{background:var(--line);color:var(--ink-faint)}
/* A required document the school is still waiting on: drawn once, gently,
   so the checklist reads as informative rather than alarming. */
.pill.pulse{animation:pillpulse 2.4s ease-out 3}
@keyframes pillpulse{0%,100%{transform:scale(1)}8%{transform:scale(1.07)}16%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.pill.pulse{animation:none}}
.req-dot{color:var(--absent);font-weight:800;margin-left:3px}
.doc-file{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11.5px;color:var(--ink-faint)}
.doc-file svg{width:13px;height:13px}
/* The send button sits beside the status pill, quiet enough that the checklist
   still reads as information rather than as a form. */
.doc-send{min-height:48px;display:inline-flex;align-items:center;margin-left:8px;padding:4px 12px;border:1px solid var(--gold);border-radius:999px;
  background:transparent;color:var(--gold-deep);font-size:11.5px;font-weight:700;cursor:pointer}
.doc-send:active{background:var(--gold-tint)}
/* Taking back a leave request the school has not answered yet. Quiet until it
   is armed, because withdrawing is a second thought, not the main action. */
.lv-act{display:flex;justify-content:flex-end;margin-top:10px}
.lv-withdraw{min-height:48px;display:inline-flex;align-items:center;padding:5px 13px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink-faint);font-size:11.5px;font-weight:700;cursor:pointer}
.lv-withdraw.armed{border-color:var(--absent);color:var(--absent);background:var(--absent-tint)}
.lv-withdraw:disabled{opacity:.5}
.cp-note{margin:-2px 0 14px;font-size:12px;line-height:1.45;color:var(--ink-faint)}
/* A reminder from the school, sitting with the balance it is about. */
.fee-remind{margin:0 0 12px;padding:12px 14px;border-radius:14px;
  background:var(--gold-tint);border:1px solid var(--gold)}
.fee-remind .fr-h{font-size:13px;font-weight:700;color:var(--gold-deep);margin-bottom:4px}
.fee-remind .fr-b{font-size:13px;line-height:1.5;color:var(--ink-soft)}
.fee-remind .fr-w{margin-top:6px;font-size:11.5px;color:var(--ink-faint)}
/* Payment slips: a year at a time, each receipt downloadable. */
.rc-tot{font-size:12px;font-weight:600;color:var(--present)}
.rc-dl{min-height:48px;display:inline-flex;align-items:center;margin-top:4px;padding:3px 10px;border:1px solid var(--gold);border-radius:999px;
  background:transparent;color:var(--gold-deep);font-size:11px;font-weight:700;cursor:pointer}
.rc-dl:active{background:var(--gold-tint)}
.rc-dl:disabled{opacity:.55}
.rc-open{cursor:pointer;-webkit-tap-highlight-color:transparent}
.rc-open:active{background:var(--card-2)}
.rc-open .rc-dl{display:inline-flex}
/* The document viewer: a receipt or statement, full screen, inside the app. */
body.dv-open{overflow:hidden}
.dv{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:#E7E3D8;
  animation:dvIn .18s ease-out}
@keyframes dvIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.dv-bar{display:flex;align-items:center;gap:8px;padding:calc(var(--safe-top) + 8px) 10px 8px;
  background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-sm)}
.dv-back{width:40px;height:40px;flex:0 0 40px;border:0;border-radius:12px;background:rgba(255,255,255,.1);
  color:var(--on-brand);font-size:28px;line-height:1;cursor:pointer}
.dv-title{flex:1;min-width:0;display:flex;flex-direction:column}
.dv-title b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-title span{font-size:11.5px;color:var(--on-brand-soft)}
.dv-act{height:34px;padding:0 13px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  background:transparent;color:var(--on-brand);font-size:12.5px;font-weight:700;cursor:pointer}
.dv-act:active{background:rgba(255,255,255,.12)}
.dv-pages{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px 12px calc(var(--safe-bottom) + 20px);
  display:flex;flex-direction:column;align-items:center;gap:12px}
.dv-pages canvas{display:block;max-width:100%;height:auto;background:#fff;border-radius:4px;
  box-shadow:0 4px 18px -8px rgba(0,0,0,.35)}
.dv-msg{margin:40px 16px;padding:18px;border-radius:14px;background:var(--card);color:var(--ink);
  display:flex;flex-direction:column;gap:8px;text-align:center;font-size:13.5px;line-height:1.45}
.dv-msg span{color:var(--ink-soft)}
.dv-msg .btn{margin-top:6px;padding:10px 14px;border:0;border-radius:12px;background:var(--brand);
  color:var(--on-brand);font-weight:700;cursor:pointer}
.rc-year{padding:12px 14px;border-top:1px solid var(--line-soft)}
.rc-stmt{width:100%;padding:10px 12px;border:1px solid var(--present);border-radius:12px;
  background:var(--present-tint);color:var(--present);font-size:13px;font-weight:700;cursor:pointer}
.rc-stmt:disabled{opacity:.55}
.rc-why{margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--ink-faint);text-align:center}
.rv[data-row]{display:flex;align-items:center;justify-content:flex-end;gap:2px;flex-wrap:wrap}
.up-note{display:flex;gap:9px;align-items:flex-start;margin:0 0 14px;padding:11px 13px;border-radius:12px;
  background:var(--line);color:var(--ink-faint);font-size:12.5px;line-height:1.45}
.up-note.open{background:var(--present-tint);color:var(--present)}
.up-note svg{width:15px;height:15px;flex:0 0 15px;margin-top:1px}
/* A closed day: visibly not-a-school-day, without competing with present or
   absent for attention. */
.cal .cd.holiday{background:var(--gold-tint);color:var(--gold-deep);font-weight:700}
.row-line{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.row-line:last-child{border-bottom:none}
.row-line .rk{font-size:12px;color:var(--ink-faint);width:120px;flex:0 0 auto}
.row-line .rv{font-size:14px;font-weight:600}

/* filter pills row */
.filters{display:flex;gap:8px;padding:12px 16px 4px;overflow-x:auto}
.filters::-webkit-scrollbar{display:none} .filters{scrollbar-width:none}
.fpill{min-height:48px;display:inline-flex;align-items:center;padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;
  background:var(--card);color:var(--ink-soft);border:1px solid var(--line);flex:0 0 auto}
.fpill.on{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}

/* ==========================================================================
   ATTENDANCE
   ========================================================================== */
.monthnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.monthnav button{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;cursor:pointer}
.monthnav button svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2}
.monthnav .ml{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:17px}
.att-sum{display:flex;gap:9px;margin-bottom:14px}
.att-sum .box{flex:1;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 8px;text-align:center}
.att-sum .box .n{font-family:'Baloo 2',sans-serif;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.att-sum .box .l{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-top:2px}
.att-sum .box.p .n{color:var(--present)} .att-sum .box.a .n{color:var(--absent)} .att-sum .box.l .n{color:var(--gold-deep)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.cal .ch{font-size:10px;font-weight:700;text-align:center;color:var(--ink-faint);padding:2px 0}
.cal .cd{aspect-ratio:1;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;background:var(--card-2);color:var(--ink-soft)}
.cal .cd.present{background:var(--present-tint);color:var(--present)}
.cal .cd.absent{background:var(--absent-tint);color:var(--absent)}
.cal .cd.late{background:var(--gold-tint);color:var(--gold-deep)}
.cal .cd.empty{background:transparent}
.cal .cd.today{outline:2px solid var(--gold);outline-offset:-2px}

/* ==========================================================================
   HOMEWORK / DIARY / ANNOUNCEMENT FEED
   ========================================================================== */
.hw{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.hw .top{display:flex;align-items:center;gap:11px;padding:13px 15px}
.hw .top .bdg{width:36px;height:36px;border-radius:10px;background:var(--info-tint);display:grid;place-items:center;flex:0 0 auto}
.hw .top .bdg svg{width:19px;height:19px;fill:none;stroke:var(--info);stroke-width:2}
.hw .top .ty{font-size:12.5px;font-weight:700;color:var(--info)}
.hw .top .dt{font-size:11px;color:var(--ink-faint)}
.hw .body{padding:0 15px 14px}
.hw .subj{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--info);margin-bottom:4px}
.hw .desc{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.hw .atts{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.hw .att{display:flex;align-items:center;gap:6px;padding:7px 11px;background:var(--card-2);border:1px solid var(--line);
  border-radius:10px;font-size:11.5px;font-weight:600;cursor:pointer}
.hw .att svg{width:14px;height:14px;fill:none;stroke:var(--ink-faint);stroke-width:2}

/* ==========================================================================
   RESULTS
   ========================================================================== */
.exam{border-radius:var(--r);overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow-sm)}
.exam .eh{background:linear-gradient(150deg,var(--brand-2),var(--brand));color:var(--on-brand);
  padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.exam .eh h4{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px}
.exam .eh .sub{font-size:11.5px;color:var(--on-brand-soft);margin-top:2px}
.exam .eh .pct{font-family:'Baloo 2',sans-serif;font-size:24px;font-weight:700;line-height:1}
.exam .eh .grd{font-size:11.5px;color:var(--gold-2);font-weight:700;text-align:right}
.exam .mh{display:flex;padding:9px 16px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-faint);background:var(--card-2);border-bottom:1px solid var(--line-soft)}
.exam .mr{display:flex;padding:11px 16px;align-items:center;font-size:13.5px;background:var(--card);border-bottom:1px solid var(--line-soft)}
.exam .mr:last-child{border-bottom:none}
.exam .ms{flex:1;font-weight:600} .exam .sc{width:74px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.exam .gr{width:44px;text-align:center;font-weight:800;color:var(--gold-deep)}

/* ==========================================================================
   FEES
   ========================================================================== */
.fee-hero{background:linear-gradient(150deg,var(--brand-2),var(--brand));color:var(--on-brand);
  border-radius:var(--r-lg);padding:22px;margin-bottom:14px}
.fee-hero .fl{font-size:12px;color:var(--on-brand-soft);font-weight:600}
.fee-hero .ft{font-family:'Baloo 2',sans-serif;font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.fee-hero .fm{display:flex;gap:18px;margin-top:12px;font-size:12px;color:var(--on-brand-soft)}
.fee-hero .fm b{color:var(--on-brand);font-weight:700}
.pay-btn{width:100%;height:50px;margin:2px 0 14px;border:0;border-radius:var(--r-sm);cursor:pointer;font-weight:700;font-size:15px;
  color:var(--on-accent);background:linear-gradient(140deg,var(--gold-2),var(--gold));box-shadow:0 12px 26px -12px rgba(239,160,40,.7)}
.fee-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.fee-row:last-child{border-bottom:none}
.fee-row>div:first-child{flex:1;min-width:0}
.fee-row .fn{font-weight:600;font-size:13.5px} .fee-row .fsub{font-size:11.5px;color:var(--ink-faint)}
.fee-row .fa{font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto;white-space:nowrap}

/* ==========================================================================
   TRANSPORT
   ========================================================================== */
.trans-hero{background:linear-gradient(150deg,#155e49,#1f7a5c);color:#fff;border-radius:var(--r-lg);padding:20px;margin-bottom:14px}
.trans-hero h3{font-family:'Baloo 2',sans-serif;font-size:20px;font-weight:700}
.trans-hero p{font-size:13px;opacity:.85;margin-top:2px}
.stops{position:relative;padding-left:22px}
.stops::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line)}
.stop{position:relative;padding:9px 0 9px 14px}
.stop::before{content:'';position:absolute;left:-20px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--card)}
.stop.mine::before{background:var(--present);width:14px;height:14px;left:-22px;top:12px}
.stop .sn{font-weight:700;font-size:13.5px} .stop .stime{font-size:12px;color:var(--ink-faint)}

/* ==========================================================================
   MESSAGES
   ========================================================================== */
.msgs{display:flex;flex-direction:column;gap:8px;padding:16px;padding-bottom:84px}
.bubble{max-width:82%;padding:11px 14px;border-radius:16px;font-size:13.5px;line-height:1.45}
.bubble.out{background:var(--brand);color:var(--on-brand);margin-left:auto;border-bottom-right-radius:5px}
.bubble.in{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px}
.bubble .bt{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;opacity:.78;margin-top:5px}
.bubble.out .bt{justify-content:flex-end}.msg-state{font-weight:800;white-space:nowrap}.msg-state.seen{color:var(--gold-2)}
.compose{position:sticky;bottom:0;display:flex;gap:9px;padding:10px 14px calc(10px + var(--safe-bottom));
  background:var(--card);border-top:1px solid var(--line);z-index:5}
.compose input{flex:1;height:48px;border:1.5px solid var(--line);border-radius:999px;padding:0 16px;background:var(--card-2);outline:none;font-size:16px;font-weight:500}
.compose input:focus{border-color:var(--gold)}
.compose button{width:48px;height:48px;border-radius:50%;border:0;background:linear-gradient(140deg,var(--gold-2),var(--gold));
  display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.compose button svg{width:24px;height:24px;fill:var(--on-accent)}

/* ==========================================================================
   PROFILE
   ========================================================================== */
.prof-hero{text-align:center;padding:24px 16px 20px}
.prof-photo{width:84px;height:84px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;
  font-family:'Baloo 2',sans-serif;font-size:30px;font-weight:700;color:var(--on-accent);overflow:hidden;
  background:linear-gradient(150deg,var(--gold-2),var(--gold));box-shadow:0 0 0 4px var(--gold-tint)}
.prof-photo img{width:100%;height:100%;object-fit:cover}
.prof-name{font-family:'Baloo 2',sans-serif;font-size:22px;font-weight:700}
.prof-class{font-size:13px;color:var(--ink-soft);margin-top:2px}

/* ==========================================================================
   FORMS (leave, change pin)
   ========================================================================== */
.form-card{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);padding:16px;box-shadow:var(--shadow-sm)}
.fg{margin-bottom:15px} .fg:last-child{margin-bottom:0}
.fg label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:7px}
.fg input,.fg select,.fg textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--card-2);outline:none;font-size:14.5px;font-weight:600}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-tint)}
.fg textarea{min-height:88px;resize:vertical;font-weight:500}

/* ==========================================================================
   EVENTS (calendar)
   ========================================================================== */
.event{background:var(--card);border:1px solid var(--line-soft);border-left:4px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 15px;margin-bottom:10px}
.event.holiday{border-left-color:var(--absent)} .event.exam{border-left-color:var(--warn)}
.event.sport{border-left-color:var(--info)} .event.ptm{border-left-color:#9C27B0}
.event .ety{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep)}
.event .etitle{font-weight:700;font-size:14px;margin-top:3px}
.event .edate{font-size:12px;color:var(--ink-faint);margin-top:2px}
.event .edesc{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.45}

/* ==========================================================================
   TOGGLE (notification prefs)
   ========================================================================== */
.pref{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--card);
  border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:14px 15px;margin-bottom:10px}
.pref .pl{font-weight:700;font-size:14px} .pref .pd{font-size:12px;color:var(--ink-faint);margin-top:2px}
.tgl{position:relative;width:46px;height:26px;flex:0 0 auto;cursor:pointer}
.tgl input{opacity:0;width:0;height:0}
.tgl .tr{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.2s}
.tgl .tk{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tgl input:checked+.tr{background:var(--present)} .tgl input:checked+.tr+.tk{left:23px}

/* ==========================================================================
   STATES
   ========================================================================== */
.loading{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 20px;color:var(--ink-faint)}
.spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:48px 24px;color:var(--ink-faint)}
.empty .eic{width:56px;height:56px;border-radius:18px;background:var(--card);border:1px solid var(--line-soft);
  display:grid;place-items:center;margin:0 auto 14px}
.empty .eic svg{width:26px;height:26px;fill:none;stroke:var(--ink-faint);stroke-width:1.8}
.empty p{font-size:14px;font-weight:600;color:var(--ink-soft)}
.empty span{font-size:12.5px;display:block;margin-top:4px}
.info-note{background:var(--info-tint);color:var(--info);border-radius:var(--r-sm);padding:12px 14px;font-size:12.5px;font-weight:600;margin-bottom:14px;line-height:1.45}
.info-note b{color:inherit}

/* ==========================================================================
   STUDENT MODE
   ========================================================================== */
.stu-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;background:var(--gold);color:var(--on-accent);vertical-align:middle}
/* subtle marigold underline on the header while in Student Mode */
#appShell.student .appheader{box-shadow:inset 0 -3px 0 var(--gold)}

.student-cta{width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  border:1px solid var(--gold);border-radius:var(--r-lg);padding:16px;margin-bottom:20px;
  background:linear-gradient(135deg,var(--gold-tint),var(--card));color:var(--ink)}
.student-cta:active{transform:scale(.99)}
.student-cta .sc-ic{width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--gold);color:var(--on-accent)}
.student-cta .sc-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.student-cta .sc-tx{flex:1;min-width:0}
.student-cta .sc-tx b{display:block;font-size:14.5px;font-weight:700}
.student-cta .sc-tx span{font-size:12px;color:var(--ink-soft);line-height:1.4;display:block;margin-top:2px}
.student-cta .sc-go{flex:0 0 auto;color:var(--gold-deep);transform:scaleX(-1)}
.student-cta .sc-go svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4}

/* ==========================================================================
   MODAL (parent-PIN unlock)
   ========================================================================== */
.modal-ov{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(8,20,15,.55);backdrop-filter:blur(3px);animation:ovin .2s ease both}
@keyframes ovin{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:320px;background:var(--card);border-radius:var(--r-lg);padding:24px 22px;text-align:center;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);animation:modin .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes modin{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.modal .modal-ic{width:52px;height:52px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;
  background:var(--gold-tint)}
.modal .modal-ic svg{width:26px;height:26px;fill:none;stroke:var(--gold-deep);stroke-width:2}
.modal h3{font-family:'Baloo 2',sans-serif;font-size:19px;font-weight:700}
.modal p{font-size:13px;color:var(--ink-soft);margin-top:4px;line-height:1.45}
.modal input{width:100%;margin-top:16px;height:50px;text-align:center;letter-spacing:.3em;font-size:18px;font-weight:700;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--card-2);outline:none}
.modal input:focus{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-tint)}
.modal-err{min-height:16px;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--absent)}
.modal-actions{display:flex;gap:10px;margin-top:8px}
.modal-btn{flex:1;height:46px;border:0;border-radius:var(--r-sm);cursor:pointer;font-weight:700;font-size:14px;
  color:var(--on-accent);background:linear-gradient(140deg,var(--gold-2),var(--gold))}
.modal-btn:disabled{opacity:.6}
.modal-btn.ghost{background:var(--card-2);color:var(--ink-soft);border:1.5px solid var(--line)}

/* Shared recovery and accessible controls stay within the existing Parent theme. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.error-state{padding:16px;margin-bottom:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
.error-state p{font-size:14px;line-height:1.5;margin-bottom:10px}
.retry-btn{min-height:44px;padding:8px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card-2);color:var(--ink);font-weight:700;cursor:pointer}
.form-error{color:var(--absent);font-size:14px;line-height:1.5;margin:8px 0}
.form-error:empty{display:none}
.text-link{min-height:44px;border:0;background:none;padding:6px 0;color:var(--gold-deep);font-size:13px;font-weight:700;cursor:pointer}
button.act{width:100%;text-align:left;font-family:inherit;cursor:pointer}
.ann-link{width:100%;text-align:left;color:inherit;font-family:inherit;cursor:pointer}
.ann-link .at,.ann-link .ad,.ann-link .aw{display:block}
.inp button.eye{min-width:44px;min-height:44px;align-items:center;justify-content:center;border:0;background:none;padding:0}
.tgl input:focus-visible+.tr{outline:3px solid var(--gold-deep);outline-offset:3px}
.tgl input:disabled+.tr{opacity:.6}
.modal{max-height:calc(100dvh - 48px);overflow-y:auto}
.msg-heading{font-size:15px;margin-bottom:10px}
.msg-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-bottom:14px;border:0;border-radius:14px;background:var(--gold);color:var(--on-accent);font-size:15px;font-weight:800;cursor:pointer}
.msg-new svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.msg-chooser{margin-bottom:14px}
.msg-chooser.hide{display:none}
.msg-chooser-note{color:var(--ink-soft);font-size:14px;line-height:1.5;margin:4px 2px}
.msg-teacher{display:flex;flex-direction:column;gap:3px;width:100%;min-height:48px;padding:11px 14px;margin-bottom:8px;text-align:left;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);cursor:pointer}
.msg-teacher b{font-size:15px}
.msg-teacher span{font-size:12px;color:var(--ink-soft)}
.msg-empty-thread{padding:12px 2px;color:var(--ink-soft);font-size:14px;line-height:1.5}
.msg-thread{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;min-height:48px;padding:12px;text-align:left;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);margin-bottom:8px;cursor:pointer}
.msg-thread.selected{border-color:var(--gold-deep);background:var(--gold-tint)}
.msg-thread span{font-size:12px;color:var(--ink-soft)}
.msg-author{display:block;font-size:12px;margin-bottom:5px}
.msg-composer{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);z-index:5}
.msg-composer>label{display:block;padding:12px 14px 0;font-weight:700;font-size:14px}
.msg-composer>.form-error{margin:8px 14px}
.msg-delivery{margin:8px 14px;font-size:13px;color:var(--ink-soft)}
.msg-delivery:empty{display:none}
.msg-composer .compose{position:static;border:0}
.compose input{min-width:0}
.msgs{padding-bottom:16px}
#appShell:has(.msg-composer input:focus) .bnav{display:none}
.content:has(.msg-composer){scroll-padding-bottom:calc(112px + var(--safe-bottom))}

/* ---- My child's teachers ---- */
.teacher-list{display:flex;flex-direction:column;gap:10px}
.teacher-card{min-height:82px;padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--card);display:flex;align-items:center;gap:12px}
.teacher-avatar{width:48px;height:48px;flex:none;border-radius:16px;background:var(--present-tint);color:var(--present);display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-size:17px;font-weight:800}
.teacher-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}.teacher-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.teacher-name strong{font-size:15.5px;line-height:1.25}.teacher-copy>span{color:var(--ink-soft);font-size:13px;line-height:1.35}
.teacher-badge{padding:3px 7px;border-radius:999px;background:var(--present-tint);color:var(--present);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.teacher-message{min-width:82px;min-height:48px;padding:0 13px;border:1.5px solid var(--gold);border-radius:14px;background:transparent;color:var(--gold-deep);font-size:14px;font-weight:800;cursor:pointer}

.profile-settings{padding-bottom:0}
.appearance-help{margin:0 0 12px;color:var(--ink-soft);font-size:14px;line-height:1.45}
.appearance-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.appearance-options button{min-width:0;min-height:64px;padding:8px 5px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--card-2);color:var(--ink-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font:700 12px/1.2 inherit;cursor:pointer}
.appearance-options button.selected{border-color:var(--gold-deep);background:var(--gold-tint);color:var(--ink)}
.appearance-options button:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px}
.theme-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   APPROVED HOME + MORE (2026-10-08)
   ========================================================================== */
#appShell.top-level .appheader{display:none}
.home-screen{min-height:100%;background:var(--paper)}
.home-hero{display:flex;flex-direction:column;gap:18px;padding:calc(18px + var(--safe-top)) 16px 60px;background:var(--brand);color:var(--on-brand);border-radius:0 0 32px 32px}
.home-school-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.home-school{display:flex;align-items:center;gap:10px;min-width:0;color:var(--on-brand-soft);font-size:15px;font-weight:700}
.home-school>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-school-logo{width:36px;height:36px;flex:none;border-radius:10px;background:var(--on-brand);overflow:hidden;display:grid;place-items:center}
.home-school-logo img{width:100%;height:100%;object-fit:contain}
.home-bell{position:relative;width:48px;height:48px;flex:none;border:1px solid var(--brand-line);border-radius:50%;background:transparent;color:var(--on-brand);display:grid;place-items:center;cursor:pointer}
.home-bell svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-notification-dot{position:absolute;top:8px;right:8px;width:11px;height:11px;border:2px solid var(--brand);border-radius:50%;background:var(--gold-2)}
.home-child-row{display:flex;align-items:center;gap:14px}
.home-child-photo{width:56px;height:56px;flex:none;border:3px solid var(--brand-line);border-radius:50%;background:var(--avatar);color:var(--brand);overflow:hidden;display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-size:23px;font-weight:800}
.home-child-photo img,.home-chip-photo img{width:100%;height:100%;object-fit:cover}
.home-child-copy{min-width:0;flex:1}
.home-child-copy h1{font-size:26px;font-weight:800;line-height:1.08;color:var(--on-brand)}
.home-child-copy p{margin-top:3px;color:var(--on-brand-soft);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-student-label{display:inline-flex;margin-top:7px;padding:3px 9px;border-radius:999px;background:var(--gold-2);color:#1F1206;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.home-children{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.home-children::-webkit-scrollbar{display:none}
.home-child-chip{min-height:48px;padding:0 14px 0 6px;border:1px solid var(--brand-line);border-radius:999px;background:transparent;color:var(--on-brand);display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.home-child-chip.selected{border-color:var(--on-brand);background:var(--on-brand);color:var(--brand);font-weight:800}
.home-chip-photo{width:34px;height:34px;flex:none;border-radius:50%;background:var(--brand-2);overflow:hidden;display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-weight:800}
.home-child-chip.selected .home-chip-photo{background:var(--avatar)}

.home-stack{display:flex;flex-direction:column;gap:18px;margin-top:-40px;padding:0 16px 24px}
.home-stack>div:empty{display:none}
.home-card{width:100%;margin:0;padding:18px;border:1px solid var(--line);border-radius:24px;background:var(--card);color:var(--ink);text-align:left}
.home-overlap{box-shadow:var(--shadow);border-color:transparent}
.home-card-state{min-height:92px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-soft);font-size:14px;font-weight:700}
.home-spinner{width:22px;height:22px;border:3px solid var(--track);border-top-color:var(--gold);border-radius:50%;animation:spin .75s linear infinite}
.home-card-error h2{font-size:19px;font-weight:700}
.home-card-error p{margin-top:3px;color:var(--ink-soft);font-size:14px;line-height:1.4}
.home-card-error button{min-height:48px;margin-top:10px;padding:0 18px;border:1.5px solid var(--gold);border-radius:14px;background:transparent;color:var(--gold-deep);font-weight:800;cursor:pointer}

.home-attendance{display:flex;align-items:center;gap:16px}
.home-ring{position:relative;width:72px;height:72px;flex:none;display:block}
.home-ring svg{width:72px;height:72px;transform:rotate(-90deg)}
.home-ring circle{fill:none;stroke-width:7}
.home-ring .ring-track{stroke:var(--track)}
.home-ring .ring-value{stroke:var(--present);stroke-linecap:round}
.home-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-size:18px;font-weight:800}
.home-attendance-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.today-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 8px;border-radius:999px;font-size:14px;font-weight:800}
.today-pill svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.today-pill.present{background:var(--present-tint);color:var(--present)}
.today-pill.absent{background:var(--absent-tint);color:var(--absent)}
.today-pill.late{background:var(--gold-tint);color:var(--gold-deep)}
.today-pill.none{background:var(--track);color:var(--ink-soft)}
.home-attendance-copy strong{font-size:17px;font-weight:800;line-height:1.25}
.home-attendance-copy>span:last-child{color:var(--ink-soft);font-size:14px}

.home-birthday{min-height:92px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line));border-radius:24px;background:linear-gradient(135deg,var(--gold-tint),var(--card));display:flex;align-items:center;gap:14px}
.home-birthday-icon{width:54px;height:54px;flex:none;border-radius:18px;background:var(--gold);display:grid;place-items:center;font-size:27px}
.home-birthday>span:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}.home-birthday small{color:var(--gold-deep);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.home-birthday strong{font-family:'Baloo 2',sans-serif;font-size:21px;line-height:1.2}

.home-now{display:flex;flex-direction:column;gap:14px}
.home-now-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.home-now-current{min-width:0}
.home-eyebrow{display:block;color:var(--ink-soft);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.home-now h2{font-size:24px;font-weight:700;line-height:1.15}
.home-now-current p{margin-top:2px;color:var(--ink-soft);font-size:15px}
.home-now-next{max-width:36%;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.home-now-next strong{font-size:16px;font-weight:800;line-height:1.25}
.home-now-next>span:last-child{color:var(--ink-soft);font-size:13px}
.home-periods{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.home-periods>span{height:10px;border-radius:5px;background:var(--track);overflow:hidden}
.home-periods i{display:block;height:100%;border-radius:inherit;background:var(--present)}
.home-periods i.current{background:var(--gold-2)}
.home-day-times{display:flex;justify-content:space-between;gap:8px;color:var(--ink-soft);font-size:13px;font-weight:600}
.home-tomorrow{min-height:88px;border:1px solid var(--line);font:inherit;display:flex;align-items:center;gap:13px;cursor:pointer}.home-tomorrow-icon{width:50px;height:50px;flex:none;border-radius:16px;background:var(--info-tint);color:var(--info);display:grid;place-items:center}
.home-tomorrow-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.home-tomorrow>span:last-child{min-width:0;display:flex;flex-direction:column;gap:3px}.home-tomorrow small{color:var(--ink-soft);font-size:12px}.home-tomorrow strong{font-family:'Baloo 2',sans-serif;font-size:18px;line-height:1.25}

.home-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.home-quick-tile{position:relative;min-width:0;min-height:100px;padding:14px 4px 12px;border:1px solid var(--line);border-radius:20px;background:var(--card);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.home-tile-icon,.more-tile-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
.home-tile-icon svg,.more-tile-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-tile-label,.more-tile-label{font-size:14px;font-weight:800;line-height:1.2;text-align:center}
.tone-blue .home-tile-icon,.tone-blue .more-tile-icon{background:var(--info-tint);color:var(--info)}
.tone-green .home-tile-icon,.tone-green .more-tile-icon{background:var(--present-tint);color:var(--present)}
.tone-purple .home-tile-icon,.tone-purple .more-tile-icon{background:var(--purple-tint);color:var(--purple)}
.tone-orange .home-tile-icon,.tone-orange .more-tile-icon{background:var(--gold-tint);color:var(--gold-deep)}
.home-badge,.more-badge{position:absolute;top:8px;right:8px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--gold);color:var(--on-accent);font-size:12px;font-weight:800;line-height:22px;text-align:center}

.home-card-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:6px}
.home-card-heading h2{font-size:21px;font-weight:700}
.home-needs{padding:6px 18px}
.home-needs .home-card-heading{justify-content:flex-start;padding:12px 0 6px}
.home-needs .home-card-heading>span{min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--gold);color:var(--on-accent);font-size:13px;font-weight:800;line-height:24px;text-align:center}
.home-need-row{min-height:74px;display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.home-need-row:first-of-type{border-top:0}
.home-need-row>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.home-need-row strong{font-size:16px;font-weight:800;line-height:1.25}
.home-need-row span{color:var(--ink-soft);font-size:14px;line-height:1.35}
.home-need-row button{min-width:80px;min-height:48px;padding:0 16px;border:1.5px solid var(--gold);border-radius:14px;background:transparent;color:var(--gold-deep);font-size:15px;font-weight:800;cursor:pointer}
.home-need-row button.primary{background:var(--gold);color:var(--on-accent)}
.home-need-status{padding:12px 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:13px;line-height:1.4}
.home-need-status.error{color:var(--absent)}.home-need-status button{min-height:48px;margin-left:4px;padding:0 12px;border:0;background:transparent;color:var(--gold-deep);font:inherit;font-weight:800;cursor:pointer}

.home-coming{padding:6px 18px 10px}.home-event-row{width:100%;min-height:68px;padding:10px 0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer}
.home-event-row:first-of-type{border-top:0}.home-event-date{width:48px;height:48px;flex:none;border-radius:14px;background:var(--gold-tint);color:var(--gold-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.home-event-date b{font-family:'Baloo 2',sans-serif;font-size:18px}.home-event-date small{font-size:10px;font-weight:800;text-transform:uppercase}
.home-event-row>span:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}.home-event-row>span:last-child small{color:var(--ink-soft);font-size:12px;font-weight:700}.home-event-row strong{font-size:15.5px;line-height:1.3}

.home-homework{padding:6px 18px 10px}
.home-see-all{min-height:48px;padding:0;border:0;background:transparent;color:var(--info);font-size:14px;font-weight:800;cursor:pointer}
.home-homework-row{width:100%;min-height:70px;padding:12px 0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--ink);display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer}
.home-homework-row:nth-of-type(2){border-top:0}
.home-subject-mark{width:46px;height:46px;flex:none;border-radius:14px;background:var(--info-tint);color:var(--info);display:grid;place-items:center;font-size:13px;font-weight:800}
.home-homework-row:nth-of-type(3) .home-subject-mark{background:var(--gold-tint);color:var(--gold-deep)}
.home-homework-row>span:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.home-homework-row strong{font-size:16px;font-weight:700;line-height:1.3}
.home-homework-row small{color:var(--ink-soft);font-size:14px}
.home-card-empty{padding:14px 0 8px;display:flex;flex-direction:column;gap:2px}
.home-card-empty strong{font-size:16px}.home-card-empty span{color:var(--ink-soft);font-size:14px}

.home-award{width:100%;min-height:92px;padding:18px;border:0;border-radius:24px;background:var(--gold-tint);color:var(--ink);display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer}
.home-award-icon{width:56px;height:56px;flex:none;border-radius:18px;background:var(--gold);color:var(--on-accent);display:grid;place-items:center}
.home-award-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-award-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.home-award-copy small,.home-update small{color:var(--gold-deep);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.home-award-copy strong{font-size:17px;font-weight:800;line-height:1.25}
.home-chevron{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.home-update{min-height:92px;display:flex;align-items:flex-start;gap:14px;border:1px solid var(--line);font:inherit;cursor:pointer}
.home-update-icon{width:48px;height:48px;flex:none;border-radius:14px;background:var(--info-tint);color:var(--info);display:grid;place-items:center}
.home-update-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-update>span:last-child{min-width:0;display:flex;flex-direction:column;gap:4px}
.home-update small{color:var(--info)}
.home-update strong{font-size:16px;font-weight:800;line-height:1.3}
.home-update>span:last-child>span{color:var(--ink-soft);font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.more-screen{display:flex;flex-direction:column;gap:20px;min-height:100%;padding:calc(22px + var(--safe-top)) 16px 24px;background:var(--paper)}
.more-screen>h1{padding:0 4px;font-size:30px;font-weight:800}
.appearance-card{padding:16px;border:1px solid var(--line);border-radius:24px;background:var(--card);display:flex;flex-direction:column;gap:12px}
.appearance-card h2{font-family:'Nunito',sans-serif;font-size:16px;font-weight:800;letter-spacing:0}
.appearance-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;border-radius:16px;background:var(--track)}
.appearance-options button{min-width:0;min-height:48px;padding:0 4px;border:0;border-radius:12px;background:transparent;color:var(--ink-soft);display:grid;place-items:center;font-size:14px;font-weight:800;line-height:1.2;cursor:pointer}
.appearance-options button.selected{border:0;background:var(--card);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.appearance-options button:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px}
.more-count-state:empty{display:none}
.more-count-state{margin:-10px 4px;color:var(--ink-soft);font-size:12px;line-height:1.4}
#moreGroups{display:flex;flex-direction:column;gap:20px}
.more-group{display:flex;flex-direction:column;gap:10px}
.more-group h2{padding:0 4px;color:var(--ink-soft);font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.more-tile{position:relative;min-width:0;min-height:100px;padding:14px 4px 12px;border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.more-student-card{width:100%;min-height:82px;padding:16px;border:0;border-radius:24px;background:var(--gold-tint);color:var(--ink);display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer}
.more-student-icon{width:50px;height:50px;flex:none;border-radius:16px;background:var(--gold);color:var(--on-accent);display:grid;place-items:center}
.more-student-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.more-student-card>span:last-child{min-width:0;display:flex;flex-direction:column;gap:2px}
.more-student-card strong{font-size:16px;font-weight:800}
.more-student-card small{color:var(--ink-soft);font-size:14px;line-height:1.35}
.more-signout{width:100%;min-height:52px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--absent);font-size:15px;font-weight:800;cursor:pointer}

/* Narrow phones (≈360–384px): a 14px tile label such as "Attendance" overflows
   the 4-up quick tiles, so drop to 12px and tighten the gutter. 390px+ keeps
   the full-size label. */
@media (max-width:384px){
  .home-stack{padding-left:12px;padding-right:12px}.home-hero{padding-left:12px;padding-right:12px}
  .home-quick{gap:7px}.home-quick-tile{padding-left:2px;padding-right:2px}.home-tile-label{font-size:12px}
  .home-attendance{gap:11px}.home-attendance-copy strong{font-size:15px}
  .more-screen{padding-left:12px;padding-right:12px}.more-grid{gap:7px}.more-tile-label{font-size:12px}
}

/* ---- Fees: progress, fee card, statement link ---- */
.fee-hero-bar{height:8px;margin-top:14px;border-radius:4px;background:rgba(255,255,255,.22);overflow:hidden}
.fee-hero-bar span{display:block;height:100%;border-radius:4px;background:var(--gold-2)}
.fee-sec{margin-top:18px}
.fee-card .chd{gap:10px}
.fee-card-sum{font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.fee-item{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.fee-item:last-child{border-bottom:none}
.fee-item-main{flex:1;min-width:0}
.fee-item .fn{font-weight:700;font-size:14px;line-height:1.3}
.fee-item .fsub{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.fee-item-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.fee-item-bal{font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink)}
.pay-head-row small{font-size:12px}
.fee-statement-link{width:100%;min-height:64px;display:flex;align-items:center;gap:12px;padding:12px 16px;margin:0 0 12px;
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--card);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.fee-statement-link span:first-child{flex:1;min-width:0}
.fee-statement-link b,.fee-statement-link small{display:block}
.fee-statement-link b{font-size:14px}
.fee-statement-link small{font-size:12px;color:var(--ink-soft);margin-top:2px}
.fee-statement-link span:last-child{font-size:22px;color:var(--ink-faint)}

/* ---- Homework: sections, due badges, subject filter, load more ---- */
.hw .top .hw-head{flex:1;min-width:0}
.hw .top .hw-head .subj{margin:0}
.hw .top .dt{font-size:12px;color:var(--ink-soft);margin-top:1px}
.hw-due{flex:0 0 auto;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap;background:var(--line);color:var(--ink-soft)}
.hw-due.today{background:var(--gold);color:var(--on-accent)}
.hw-due.soon{background:var(--gold-tint);color:var(--gold-deep)}
.hw-due.later{background:var(--info-tint);color:var(--info)}
.hw-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.hw .hw-title + .desc{margin-top:4px}
.hw .desc{font-size:14px}
.hw-sec{margin-top:18px}
.hw-sec:first-child{margin-top:6px}
.hw-count{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--line);color:var(--ink-soft);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.hw-more{width:100%;min-height:50px;margin:4px 0 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
#hwFilters[hidden]{display:none}

/* ---- Attendance legend; half days were drawn as unmarked days ---- */
.cal .cd.half_day{background:var(--gold-tint);color:var(--gold-deep)}
.cal .cd.on-leave{background:var(--leave-tint);color:var(--leave);font-weight:800}
.cal-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:14px;font-size:12.5px;color:var(--ink-soft);font-weight:600}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.cal-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.cal-legend .present{background:var(--present-tint);box-shadow:inset 0 0 0 1.5px var(--present)}
.cal-legend .absent{background:var(--absent-tint);box-shadow:inset 0 0 0 1.5px var(--absent)}
.cal-legend .late{background:var(--gold-tint);box-shadow:inset 0 0 0 1.5px var(--gold-deep)}
.cal-legend .on-leave{background:var(--leave-tint);box-shadow:inset 0 0 0 1.5px var(--leave)}
.cal-legend .holiday{background:var(--gold-tint);box-shadow:inset 0 0 0 1.5px var(--gold-2)}
.att-leave-warning{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink-soft);font-size:13px;line-height:1.4}.att-leave-warning button{min-height:48px;padding:0 10px;border:0;background:transparent;color:var(--gold-deep);font:inherit;font-weight:800;cursor:pointer}

/* ---- Results extras, calendar month headings ---- */
.res-total{margin-top:4px;color:var(--on-brand)!important;font-weight:700}
.res-change-row{padding:8px 16px;background:var(--card);border-bottom:1px solid var(--line-soft)}
.res-change{font-size:12.5px;font-weight:700}
.res-change.up{color:var(--present)} .res-change.down{color:var(--absent)}
.cal-month{margin-top:18px}
.cal-month:first-child{margin-top:4px}
/* Late and school-closed days used the same gold, so a parent could not tell
   them apart; closed days are a quiet grey instead. */
.cal .cd.holiday{background:var(--line);color:var(--ink-faint);font-weight:700}
.cal-legend .holiday{background:var(--line);box-shadow:inset 0 0 0 1.5px var(--ink-faint)}
.cal .cd.blank{background:transparent}