:root{--bg:#f6f2eb;--card:#fff;--ink:#1c1417;--mut:#5d5256;--ac:#8f2a3c;--ac2:#9a4a00;--ln:#1c14171f;--fg:#fff;--ok:#14532d;--okb:#22c55e26;--bad:#7f1d1d;--badb:#ef444426;--wn:#78350f;--wnb:#f59e0b2e;box-sizing:border-box}
@media(prefers-color-scheme:dark){:root{--bg:#0d0f1a;--card:#161a2b;--ink:#f4f1ea;--mut:#aeb4c8;--ac:#f0c36b;--ac2:#f2819a;--ln:#ffffff24;--fg:#1a1208;--ok:#6ee7a0;--bad:#ff9a9a;--wn:#fcd34d}}
*{box-sizing:border-box}
:root{color-scheme:light dark}[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body::before{content:"";position:fixed;inset:-20vmax;z-index:-1;background:radial-gradient(40vmax 40vmax at 10% 0,color-mix(in srgb,var(--ac2) 22%,transparent),transparent),radial-gradient(40vmax 40vmax at 100% 100%,color-mix(in srgb,var(--ac) 18%,transparent),transparent);animation:dr 24s ease-in-out infinite alternate}
@keyframes dr{to{transform:translate(4vmax,3vmax) scale(1.1)}}
h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}h2{font-family:Georgia,serif;font-size:clamp(24px,6vw,30px)}
a{color:var(--ac)}
header{display:flex;align-items:center;gap:10px;padding:10px 16px;position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--ln)}
header b{flex:1;font-family:Georgia,serif;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#hu{font-size:13px;color:var(--mut);max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header button,.btn{background:var(--card);color:var(--ink);border:1px solid var(--ln);padding:10px 16px;min-height:44px;border-radius:99px;cursor:pointer;font:inherit;text-decoration:none;display:inline-flex;align-items:center}
main{flex:1;width:100%;max-width:1000px;margin:0 auto;padding:22px 16px 50px}.doc{max-width:720px}.doc h3{margin-top:22px}
footer{text-align:center;font-size:13px;color:var(--mut);padding:18px 16px}
.logo{width:40px;height:40px;border-radius:50%;background:#fff;object-fit:cover;box-shadow:0 0 0 2px var(--ac)}
.logo.hero{display:block;width:104px;height:104px;margin:0 auto 12px;animation:fl 4s ease-in-out infinite}@keyframes fl{50%{transform:translateY(-6px)}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--ln);border-radius:20px;padding:20px;box-shadow:0 8px 28px #0000001a;animation:up .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--dl,0s) - var(--el,0ms));transition:transform .25s,border-color .25s,box-shadow .25s}
.grid>*:nth-child(2){--dl:.06s}.grid>*:nth-child(3){--dl:.12s}.grid>*:nth-child(4){--dl:.18s}.grid>*:nth-child(n+5){--dl:.24s}
/* Live updates redraw the page; after the first moments, cards appear still instead of sliding in again (see anim() in app.js). */
.still .card{animation:none}
.tile{cursor:pointer;position:relative;overflow:hidden}.tile:hover{transform:translateY(-5px);border-color:var(--ac);box-shadow:0 14px 34px color-mix(in srgb,var(--ac) 18%,#0000001a)}.tile:active{transform:scale(.97)}
.tile h3{font-size:19px}.tile p{margin:6px 0 0;color:var(--mut);font-size:14px}.big{font-size:34px}
.crumb{font-size:14px;color:var(--mut);margin-bottom:12px}.crumb a{cursor:pointer;font-weight:600;padding:6px 0;display:inline-block}
.bar{height:10px;background:var(--ln);border-radius:99px;overflow:hidden;margin:12px 0 8px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2));border-radius:99px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.seg{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}.seg span{min-width:40px;font-size:12px;font-weight:600;text-align:center;padding:8px 0;border-radius:10px;background:var(--ln);color:var(--mut)}
.seg .done{background:color-mix(in srgb,var(--ac) 25%,var(--card));color:var(--ink)}.seg .on{background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--fg)}
@media(max-width:520px){.roles{grid-template-columns:1fr!important}}
label{display:block;font-size:14px;color:var(--mut)}
input,select,textarea{width:100%;min-height:46px;padding:12px 14px;border:1px solid var(--ln);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px;margin:6px 0}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,.tile:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
button.p{background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--fg);border:0;padding:12px 22px;min-height:46px;border-radius:12px;cursor:pointer;font:inherit;font-weight:600;transition:transform .15s}button.p:active{transform:scale(.96)}button.p:disabled{opacity:.6}
button.g{background:transparent;border:1px solid var(--ln);color:var(--ink);padding:10px 14px;min-height:44px;border-radius:10px;cursor:pointer;font:inherit}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.roles .tile{text-align:center}
.pill{display:inline-block;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:600;background:var(--ln)}
.P{background:var(--okb);color:var(--ok)}.X{background:var(--ln);color:var(--ink)}.sf{background:transparent;border:1px dashed var(--mut);color:var(--ink)}.A{background:var(--badb);color:var(--bad)}.E{background:var(--wnb);color:var(--wn)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}.sp{justify-content:space-between}
details{border:1px solid var(--ln);border-radius:16px;margin:12px 0;background:var(--card)}summary{padding:16px;cursor:pointer;font-weight:600;color:var(--ac);min-height:48px}details>div{padding:0 16px 16px}
.sat{border-top:1px solid var(--ln);padding:14px 0}.mut{color:var(--mut);font-size:14px}.cm{border-left:3px solid var(--ac);padding:6px 14px;margin:10px 0;background:var(--ln);border-radius:0 12px 12px 0;overflow-wrap:anywhere}
.stat{font-family:Georgia,serif;font-size:30px;font-weight:700;color:var(--ac)}
.err{color:var(--bad);font-size:14px;min-height:20px}.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
progress{width:100%;height:8px}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}

header .brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none}header .bt{display:flex;flex-direction:column;min-width:0;line-height:1.2}header .bt b{flex:none}header small{font-size:12px;color:var(--mut)}
a.tile{display:block;color:inherit;text-decoration:none}.pc{padding-bottom:16px}.ov{position:absolute;inset:0;z-index:1;border-radius:20px}.ov:focus-visible{outline:3px solid var(--ac);outline-offset:2px}
.del{position:relative;z-index:2;margin-top:10px}
.crumb a{padding:8px 2px;min-height:32px;text-decoration:none}.crumb a:hover{text-decoration:underline}
details.wk{margin:8px 0;border-radius:12px;background:transparent;animation:none}details.wk>summary{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink);font-weight:600;padding:12px 14px}details.wk>summary::marker{color:var(--ac)}details.wk>div{padding:0 14px 14px}
.pills{display:flex;gap:6px;flex-wrap:wrap}
select:disabled,input:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:480px){#hu{display:none}header b{font-size:16px}header button{padding:10px 12px}}@media(max-width:360px){header b{font-size:14.5px}}
.badge{position:absolute;top:14px;right:14px;min-width:28px;height:28px;padding:0 8px;border-radius:99px;background:var(--ac);color:var(--fg);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.rd{background:var(--wnb);color:var(--wn);margin-top:8px}.pj{background:color-mix(in srgb,var(--ac) 18%,transparent);color:var(--ink)}
.note{max-width:480px;margin:24px auto;text-align:center}.note h2{margin:8px 0}
.ri,.hr{border-top:1px solid var(--ln);padding:12px 0;overflow-wrap:anywhere}.ri:first-of-type,.hr:first-child{border-top:0}.hr .mut{font-size:13px}
details.res{margin:12px 0 4px}.tile.sel{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}
h2.sec{margin:28px 0 6px}.list{padding:6px 20px}.pre{white-space:pre-line}.rr{border-top:1px solid var(--ln);padding:10px 0}.rr:first-child{border-top:0}.rr select{flex:1;min-width:130px;margin:4px 0}
.ck{display:flex;align-items:center;gap:8px;margin:6px 0;color:var(--ink)}.ck input{width:22px;min-height:22px;margin:0}
h3.gh{margin:28px 0 -4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.bar.warn i{background:linear-gradient(90deg,var(--ac2),var(--bad))}
.nh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}button.sm{padding:6px 12px;min-height:36px;font-size:14px;color:var(--mut)}
.lk{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:6px 0}.lk a{padding:4px 0}
.lr input{flex:1;min-width:150px;margin:2px 0}.lr input[type=url]{flex:2}
.fr{border-top:1px solid var(--ln);padding:10px 0;overflow-wrap:anywhere}.fr:first-child{border-top:0}
details.sp{margin:8px 0}details.sp>summary{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;color:var(--ink)}.sn{font-weight:600}
.mini{grid-column:1/-1;height:6px;background:var(--ln);border-radius:99px;overflow:hidden}.mini i{display:block;height:100%;background:linear-gradient(90deg,var(--ac),var(--ac2))}
details.rot{margin:12px 0 0;border-radius:12px;background:transparent;animation:none}.gd{border-top:1px solid var(--ln);margin-top:14px;padding-top:12px}.gd p{margin:6px 0}
.tw{background:color-mix(in srgb,var(--ac) 18%,transparent);color:var(--ink);font-size:12px;padding:2px 10px;margin-left:4px}
button:disabled{opacity:.55;cursor:not-allowed}
/* Attendance and Lesson Plans pages (one week, everyone) */
.wc,.wg .card{animation:none}
.wc{text-align:center}.wc .row{justify-content:center}
.wn{display:flex;align-items:center;gap:8px}button.g.nb{width:44px;flex:none;font-size:22px;padding:0}.wl{flex:1;text-align:center;font-family:Georgia,serif;font-size:17px}
.ar{border-top:1px solid var(--ln);padding:12px 0;overflow-wrap:anywhere}.ar:first-child{border-top:0}.an a{font-weight:600}.lp{margin-top:4px}
/* Selected attendance mark (profile and Attendance pages): button.g otherwise overrides the mark colours. */
button.g.P{background:var(--okb);color:var(--ok)}button.g.A{background:var(--badb);color:var(--bad)}button.g.E{background:var(--wnb);color:var(--wn)}button.g.X{background:var(--ln);color:var(--ink)}button.g[aria-pressed="true"]{border-color:currentColor;font-weight:700}
.mk{flex-wrap:nowrap}.ar .mk button{flex:1 1 0;min-width:0;padding:10px 4px;font-size:14px}
/* iPhone tip on the sign-in page */
.ih{display:flex;align-items:center;gap:8px;max-width:440px;margin:24px auto 0;padding:4px 4px 4px 16px;background:var(--card);color:var(--ink);border:1px solid var(--ac);border-radius:16px;font-size:14px}
.ih span{flex:1}.ih svg{vertical-align:-3px;color:var(--ac)}.ih button{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
/* Profile stat cards: both attendance percentages in one card; long rotation names (Kindergarten) shrink to fit */
.grid>.card{container-type:inline-size}.stat.long{font-size:clamp(19px,12.5cqi,30px);line-height:1.5}
.duo{display:flex;gap:12px}.duo>div{flex:1;min-width:0}.duo .mut{line-height:1.3}
/* One month at a time (Lesson Plans, Spiritual Notebook) */
.mc{animation:none;padding:16px}.ctr{text-align:center;justify-content:center}.mc>.mut.ctr{margin:6px 0 4px}
/* Spiritual Notebook: month rings, week dots, and the four check circles */
.rings,.sls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.rings{margin:14px 0 8px}.sls{margin-top:6px}
.rg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;font-size:15px}.rg .mut{font-size:12px;line-height:1.25}
.rc{position:relative;width:64px;height:64px;display:grid;place-items:center;font-size:24px}.rc svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rc circle{fill:none;stroke:var(--ln);stroke-width:6}.rc .rf{stroke:var(--ac);stroke-linecap:round;transition:stroke-dasharray .8s}
.dots{display:flex;gap:5px}.dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ln)}.dots i.on{background:var(--ac);border-color:var(--ac)}
.sl{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;background:none;border:0;border-radius:14px;color:var(--ink);font:inherit;font-size:13px;line-height:1.25;text-align:center}
button.sl{cursor:pointer;min-height:44px}button.sl:active .si{transform:scale(.92)}
.si{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:26px;border:2px dashed color-mix(in srgb,var(--mut) 55%,transparent);transition:transform .15s,background .2s}
.sl:not(.on) .si{filter:grayscale(1);opacity:.55}.sl:not(.on)>span:last-child{color:var(--mut)}.sl.on>span:last-child{font-weight:600}
.sl.on .si{border:2px solid transparent;background:linear-gradient(color-mix(in srgb,var(--ac) 14%,var(--card)),color-mix(in srgb,var(--ac) 14%,var(--card))) padding-box,linear-gradient(135deg,var(--ac),var(--ac2)) border-box;box-shadow:0 4px 14px color-mix(in srgb,var(--ac) 28%,transparent)}
.sl.on .si::after{content:"✓";position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--fg);font-size:12px;font-weight:700;display:grid;place-items:center;border:2px solid var(--card)}
@media(max-width:380px){.si{width:50px;height:50px;font-size:22px}.rc{width:56px;height:56px;font-size:21px}}
.duo+.mut{margin-top:6px}
/* Ticking a Spiritual Notebook circle: a short pop (only the circle just tapped; --pd continues it if the page redraws). */
.sl.pop .si{animation:pop .45s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--pd,0ms)}.sl.pop .si::after{animation:pop .45s .08s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{0%{transform:scale(.8)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
/* Section tabs on long pages: sticky under the header, one row that scrolls sideways on phones. --hh = header height (set in app.js). */
.jn{position:sticky;top:var(--hh,64px);z-index:4;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px -16px 0;padding:8px 16px;
background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--ln);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.jn::-webkit-scrollbar{display:none}
.jn button{flex:none;min-height:40px;padding:8px 16px;border-radius:99px;border:1px solid var(--ln);background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.jn button:hover{border-color:var(--ac)}.jn button:active{transform:scale(.95)}
.jn button.on{background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--fg);border-color:transparent;box-shadow:0 4px 14px color-mix(in srgb,var(--ac) 30%,transparent)}
@media(min-width:1032px){.jn{top:calc(var(--hh,64px) + 8px);margin:14px 0 0;border:1px solid var(--ln);border-radius:16px;-webkit-mask-image:none;mask-image:none}}
[data-sec]{scroll-margin-top:calc(var(--hh,64px) + 72px)}
/* Loading spinner: centred while a page or the sign-in check is on its way (still turns, slower, with reduced motion). */
.ld{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:45vh;color:var(--mut);font-weight:600;animation:fi .3s ease .15s both}
.spn{display:inline-block;width:44px;height:44px;border-radius:50%;border:4px solid var(--ln);border-top-color:var(--ac);border-right-color:var(--ac2);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}@keyframes fi{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.spn{animation:sp 2s linear infinite!important}}
.tile[aria-busy=true]{pointer-events:none;opacity:.85}