/* Layout: a pine "timetable board" band holds the brand, account and save; folder-style tabs sit on its lower edge;
   below it, one working surface per tab. Grades are coloured tiles, today's day is lit across every grid. */
:root{
  --bg:#eef2ef;--surface:#ffffff;--surface-2:#f5f8f6;--ink:#142420;--muted:#5b6e68;--line:#dce4e0;--line-strong:#bccac4;
  --pine:#123b35;--pine-2:#1c4d44;--on-pine:#e6efea;--on-pine-muted:#a9c2b9;
  --brass:#d9a23a;--brass-ink:#2a1d00;--accent:#1f7a6b;--accent-soft:#dcefe9;--accent-ink:#ffffff;
  --today:#fff6df;--today-line:#d9a23a;
  --wait:#e5ecfa;--wait-ink:#2a4f8c;--lock:#2f8a4e;--lock-soft:#e2f3e7;
  --bad:#fbe1de;--bad-ink:#b0271d;--warn:#fff0d4;--warn-ink:#8a5a00;--off:#e3e8e6;
  --g1:#fde7df;--g1e:#e0795a;--g2:#fdf1d3;--g2e:#c99a22;--g3:#e5f3dc;--g3e:#5f9a3e;
  --g4:#dcf0f1;--g4e:#2f8d93;--g5:#e5e7fb;--g5e:#5a63c9;--g6:#f4e3f3;--g6e:#a54d9c;
  --shadow:0 12px 32px rgba(18,59,53,.16);
  --f-display:"Noto Kufi Arabic","Readex Pro",Tahoma,sans-serif;
  --f-body:"Readex Pro","Segoe UI",Tahoma,system-ui,sans-serif;
  --r-s:6px;--r-m:10px;--r-l:16px;
  color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c1513;--surface:#141f1c;--surface-2:#192623;--ink:#e1ebe7;--muted:#91a69f;--line:#25352f;--line-strong:#37504a;
  --pine:#0a1f1b;--pine-2:#143530;--on-pine:#e1ece7;--on-pine-muted:#8fb0a5;
  --brass:#e6b455;--brass-ink:#231700;--accent:#53c2ad;--accent-soft:#173a34;--accent-ink:#04201b;
  --today:#2a2414;--today-line:#e6b455;
  --wait:#1b2b46;--wait-ink:#abc5f2;--lock:#5cc480;--lock-soft:#173322;
  --bad:#4a1d1a;--bad-ink:#ffb4ab;--warn:#3a2c0e;--warn-ink:#f3c56b;--off:#1f2d2a;
  --g1:#3b2620;--g1e:#e48b6f;--g2:#382f19;--g2e:#d8ae46;--g3:#21321b;--g3e:#7fb75e;
  --g4:#18302f;--g4e:#4fb3b7;--g5:#23273f;--g5e:#8b93e8;--g6:#35223a;--g6e:#cf7bc5;
  --shadow:0 12px 32px rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1513;--surface:#141f1c;--surface-2:#192623;--ink:#e1ebe7;--muted:#91a69f;--line:#25352f;--line-strong:#37504a;
  --pine:#0a1f1b;--pine-2:#143530;--on-pine:#e1ece7;--on-pine-muted:#8fb0a5;
  --brass:#e6b455;--brass-ink:#231700;--accent:#53c2ad;--accent-soft:#173a34;--accent-ink:#04201b;
  --today:#2a2414;--today-line:#e6b455;
  --wait:#1b2b46;--wait-ink:#abc5f2;--lock:#5cc480;--lock-soft:#173322;
  --bad:#4a1d1a;--bad-ink:#ffb4ab;--warn:#3a2c0e;--warn-ink:#f3c56b;--off:#1f2d2a;
  --g1:#3b2620;--g1e:#e48b6f;--g2:#382f19;--g2e:#d8ae46;--g3:#21321b;--g3e:#7fb75e;
  --g4:#18302f;--g4e:#4fb3b7;--g5:#23273f;--g5e:#8b93e8;--g6:#35223a;--g6e:#cf7bc5;
  --shadow:0 12px 32px rgba(0,0,0,.5);color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.55;font-weight:400}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--pine)}
#app{direction:rtl;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
h1,h2,h3,h4{text-wrap:balance}

/* ---------- layout: menu on the right (RTL start), work area beside it ---------- */
.layout{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.layout>*{min-width:0}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px;color:var(--on-pine);padding-block:max(18px,env(safe-area-inset-top,0px)) 16px;padding-inline:14px;
  padding-right:max(14px,env(safe-area-inset-right,0px));
  background:
    linear-gradient(90deg,transparent calc(100% - 1px),rgba(255,255,255,.05) 0) 0 0/48px 100%,
    linear-gradient(transparent calc(100% - 1px),rgba(255,255,255,.05) 0) 0 0/100% 24px,
    var(--pine);overflow-y:auto;z-index:25}
.brand{display:flex;align-items:center;gap:10px;padding-inline:6px}
.mark{display:grid;grid-template-columns:repeat(3,9px);grid-template-rows:repeat(2,9px);gap:3px;flex:none}
.mark i{border-radius:2px;background:var(--on-pine);opacity:.85}
.mark i:nth-child(2){background:var(--brass);opacity:1}.mark i:nth-child(4),.mark i:nth-child(6){opacity:.4}
.brand h1{font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1.2;margin:0}
.tabs{display:flex;flex-direction:column;gap:2px}
.tab{display:flex;align-items:center;gap:10px;border:0;background:none;padding:10px 12px;font-size:14px;font-weight:500;color:var(--on-pine-muted);border-radius:var(--r-m);text-align:right;width:100%;position:relative}
.tab:hover{color:var(--on-pine);background:rgba(255,255,255,.07)}
.tab[aria-selected="true"]{background:rgba(255,255,255,.12);color:var(--on-pine);font-weight:600}
.tab[aria-selected="true"]::before{content:"";position:absolute;inset-inline-start:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--brass)}
.tab[aria-selected="true"] .ico{stroke:var(--brass)}
.tab .badge{margin-inline-start:auto}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.side-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 6px 0;border-top:1px solid rgba(255,255,255,.12)}
.who{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.who b{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.who small{font-size:11.5px;color:var(--on-pine-muted)}
.side .btn{border-color:rgba(255,255,255,.22);background:transparent;color:var(--on-pine)}
.side .btn:hover{background:rgba(255,255,255,.08)}
.content{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:16px}
.school-line{display:flex;align-items:center;gap:10px;min-width:0}
.school-line b{font-family:var(--f-display);font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-chip{background:var(--brass);color:var(--brass-ink);border-radius:999px;padding:0 9px;font-weight:600;font-size:11.5px;white-space:nowrap}
.actions{display:flex;gap:8px;align-items:center;margin-inline-start:auto;flex-wrap:wrap}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--lock)}
.status.dirty{color:var(--warn-ink)}.status.dirty i{background:var(--brass);box-shadow:0 0 0 3px rgba(217,162,58,.25)}
.status.busy i{background:#6aa8f0}
.btn.save{background:var(--brass);border-color:var(--brass);color:var(--brass-ink);font-weight:600;padding-inline:20px}
.btn.save:hover{filter:brightness(1.06)}
.btn.save:disabled{background:var(--surface);border-color:var(--line-strong);color:var(--muted);filter:none}
body::before{background:var(--pine)}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{position:sticky;top:0;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-block:max(10px,env(safe-area-inset-top,0px)) 0;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));overflow:visible}
  .side-foot{margin:0;margin-inline-start:auto;border:0;padding:0}
  .tabs{flex-direction:row;overflow-x:auto;width:100%;scrollbar-width:none;order:3;gap:2px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{width:auto;white-space:nowrap;padding:9px 12px 11px;border-radius:var(--r-m) var(--r-m) 0 0}
  .tab[aria-selected="true"]{background:var(--bg);color:var(--ink)}
  .tab[aria-selected="true"]::before{display:none}
  .tab[aria-selected="true"] .ico{stroke:var(--accent)}
  .top{top:0;position:relative}
}
/* ---------- controls ---------- */
.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-s);padding:6px 12px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .12s}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--bad-ink);border-color:var(--bad-ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:3px 9px;font-size:12px}
.field{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-s);padding:6px 10px;font-size:13px;min-width:0}
.field:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
textarea.field{width:100%;min-height:140px;font-size:13px;direction:rtl;line-height:1.7}
main{padding-block:18px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px}
.bar .grow{flex:1 1 180px}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--muted);align-items:center}
.sw{display:inline-block;width:13px;height:13px;border-radius:3px;vertical-align:-2px;margin-inline-end:4px;border:1px solid var(--line)}
.banner{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--warn);color:var(--warn-ink);border-radius:var(--r-m);padding:10px 14px;margin-bottom:12px;font-size:13px}
.banner.info{background:var(--accent-soft);color:var(--ink)}
.muted{color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:14px}
.pill{display:inline-block;border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:600}
.pill.ok{background:var(--lock-soft);color:var(--lock)}
.pill.bad{background:var(--bad);color:var(--bad-ink)}
.pill.warn{background:var(--warn);color:var(--warn-ink)}

/* ---------- summary strip ---------- */
.kpis-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;margin-bottom:14px}
.kpi{background:var(--surface);padding:10px 14px;display:flex;flex-direction:column;gap:1px;border:0;text-align:right;font:inherit;color:inherit;min-width:0}
.kpi b{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.2;font-variant-numeric:tabular-nums}
.kpi b small{font-size:13px;color:var(--muted);font-weight:600}
.kpi span{font-size:12px;color:var(--muted)}
.kpi.is-bad b{color:var(--bad-ink)}.kpi.is-bad{box-shadow:inset 0 3px 0 var(--bad-ink)}
.kpi.is-warn b{color:var(--warn-ink)}.kpi.is-warn{box-shadow:inset 0 3px 0 var(--brass)}
.kpi.is-ok b{color:var(--lock)}
button.kpi{cursor:pointer}button.kpi:hover{background:var(--surface-2)}
@media (max-width:720px){.kpis-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis-strip .kpi:first-child{grid-column:1/-1}}

/* ---------- grids ---------- */
.scroll{overflow:auto;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);max-height:calc(100vh - 200px)}
table.grid{border-collapse:separate;border-spacing:0;font-size:12px;font-variant-numeric:tabular-nums}
.grid th,.grid td{border-bottom:1px solid var(--line);padding:0;text-align:center;white-space:nowrap}
.grid thead th{position:sticky;top:0;background:var(--surface-2);z-index:3;font-weight:600;padding:6px 4px;color:var(--muted)}
.grid thead tr:nth-child(2) th{top:33px;font-size:11px}
.grid thead th.day{color:var(--ink);font-size:13px;font-family:var(--f-display);font-weight:600}
.grid thead th.day.today{background:var(--today);box-shadow:inset 0 3px 0 var(--today-line)}
.grid thead th.day small{font-family:var(--f-body);font-size:10.5px;color:var(--warn-ink);font-weight:600}
.grid .nm{position:sticky;right:0;z-index:2;background:var(--surface);text-align:right;padding:4px 12px;min-width:140px;max-width:180px;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:13px;box-shadow:inset -1px 0 0 var(--line-strong)}
.grid thead .nm{z-index:4;background:var(--surface-2)}
.grid .nm small{display:block;font-weight:400;color:var(--muted);font-size:11px;line-height:1.25}
.grid .ds{box-shadow:inset -2px 0 0 var(--line-strong)}
.grid td.c{min-width:60px;height:38px;padding:3px;cursor:pointer;position:relative;user-select:none;background:transparent}
.grid td.c.today{background:var(--today)}
.grid td.c .t{display:flex;align-items:center;justify-content:center;min-height:30px;padding:2px 6px;border-radius:var(--r-s);font-weight:600;font-size:12px;line-height:1.2;background:var(--surface-2);border-inline-start:3px solid var(--line-strong);white-space:nowrap}
.grid td.c:not(:has(.t)):hover{box-shadow:inset 0 0 0 2px var(--accent)}
.grid td.c:hover .t{box-shadow:0 0 0 2px var(--accent)}
td.c.g1 .t{background:var(--g1);border-color:var(--g1e)}td.c.g2 .t{background:var(--g2);border-color:var(--g2e)}td.c.g3 .t{background:var(--g3);border-color:var(--g3e)}
td.c.g4 .t{background:var(--g4);border-color:var(--g4e)}td.c.g5 .t{background:var(--g5);border-color:var(--g5e)}td.c.g6 .t{background:var(--g6);border-color:var(--g6e)}
td.c.w .t{background:transparent;color:var(--wait-ink);font-weight:500;border:1px dashed var(--wait-ink);border-inline-start-width:1px;opacity:.85}
td.c.off{background:repeating-linear-gradient(-45deg,var(--off) 0 4px,transparent 4px 9px)}
td.c.avoid{background-image:radial-gradient(var(--warn-ink) .8px,transparent 1.2px);background-size:7px 7px}
td.c.lock .t{box-shadow:inset 0 0 0 1.5px var(--lock)}
td.c.lock::after{content:"";position:absolute;top:5px;left:5px;width:6px;height:6px;border-radius:50%;background:var(--lock)}
td.c.bad .t{background:var(--bad);color:var(--bad-ink);border-color:var(--bad-ink)}
td.c.viol .t{outline:2px solid var(--brass);outline-offset:-1px}
td.c.empty{background:repeating-linear-gradient(-45deg,var(--warn) 0 3px,transparent 3px 8px)}
td.c.hint-ok{box-shadow:inset 0 0 0 2px var(--lock)}
td.c.hint-bad{opacity:.4}
td.c.dragging{opacity:.35}
.grid td.sum{padding:4px 10px;font-weight:600;background:var(--surface-2);color:var(--muted)}
.grid td.sum.neg{color:var(--bad-ink)}.grid td.sum.pos{color:var(--warn-ink)}
.grid tbody tr:hover .nm{color:var(--accent)}
.grid tbody tr:hover td.sum{color:var(--ink)}
.grid td.tn{min-width:70px;max-width:88px}
.grid td.tn .t{white-space:normal;font-size:11px;font-weight:500}
#agrid td.c{min-width:48px;height:42px}
#agrid td.av.off{background:var(--off);color:var(--bad-ink);font-weight:700}
#agrid td.av.off.bad{background:var(--bad)}
#agrid td.av.avoid{background:var(--warn);color:var(--warn-ink);font-weight:700}
.g1{background:var(--g1)}.g2{background:var(--g2)}.g3{background:var(--g3)}.g4{background:var(--g4)}.g5{background:var(--g5)}.g6{background:var(--g6)}

/* ---------- popover ---------- */
.pop{position:fixed;z-index:50;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-l);box-shadow:var(--shadow);width:min(350px,calc(100vw - 24px));max-height:min(500px,calc(100vh - 24px));overflow:auto;padding:14px;direction:rtl}
.pop h4{margin:0 0 2px;font-size:15px;font-family:var(--f-display);font-weight:600}
.pop .sub{color:var(--muted);font-size:12px;margin-bottom:10px}
.pop .grp{font-size:11.5px;color:var(--muted);margin:12px 0 5px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-s);padding:4px 9px;font-size:12px;line-height:1.3;text-align:center}
.chip:hover{border-color:var(--accent)}
.chip.taken{color:var(--bad-ink);border-style:dashed}
.chip.taken small{display:block;font-size:10px;opacity:.85}
.chip.cur{background:var(--pine);color:var(--on-pine);border-color:var(--pine)}
.chip.w{background:var(--wait);color:var(--wait-ink);border-color:transparent}
.chip.pref{border-color:var(--lock);border-width:2px}
.pop .row{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;border-top:1px solid var(--line);padding-top:10px}

/* ---------- cards & tables ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;min-width:0}
.card h3{margin:0 0 4px;font-size:16px;font-family:var(--f-display);font-weight:600}
.card p{margin:0 0 12px;color:var(--muted);font-size:13px;max-width:70ch}
table.plain{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.plain th,.plain td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
.plain th{font-size:12px;color:var(--muted);font-weight:600;background:var(--surface-2);position:sticky;top:0;z-index:1}
.plain tbody tr:hover td{background:var(--surface-2)}
.plain input.field{width:100%}
.plain input.num{width:64px}
.loadchips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.lc{display:inline-flex;align-items:center;gap:3px;border-radius:var(--r-s);padding:2px 4px 2px 7px;font-size:12px;border:1px solid var(--line)}
.lc input{width:38px;border:0;background:transparent;text-align:center;padding:1px;font-variant-numeric:tabular-nums}
.lc button{border:0;background:none;color:var(--muted);padding:0 2px;font-size:14px;line-height:1}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.checks label{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:var(--r-s);padding:5px 11px;font-size:13px;background:var(--surface);cursor:pointer}
.checks label.on{border-color:var(--bad-ink);background:var(--bad);color:var(--bad-ink)}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--pine);color:var(--on-pine);padding:10px 18px;border-radius:var(--r-m);font-size:13px;z-index:60;box-shadow:var(--shadow);max-width:calc(100vw - 32px);border-inline-start:4px solid var(--brass)}
.kpis{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--muted)}
.kpis b{color:var(--ink);font-variant-numeric:tabular-nums}
.progress{height:6px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;background:var(--brass);width:0;transition:width .2s}
pre.creds{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);padding:10px;margin:8px 0;font-family:inherit;white-space:pre-wrap}

/* ---------- sign-in ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:var(--bg)}
.login-art{background:var(--pine);color:var(--on-pine);display:flex;flex-direction:column;justify-content:center;gap:32px;padding-block:48px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.board{display:grid;grid-template-columns:auto repeat(7,1fr);gap:6px;align-items:center;max-width:460px;width:100%;margin-inline:auto}
.board .bd{font-size:11.5px;color:var(--on-pine-muted);padding-inline-end:8px}
.board i{aspect-ratio:1.5;border-radius:5px;max-width:100%;animation:tile .5s both;animation-delay:var(--d)}
.board i.e{background:rgba(255,255,255,.06)}
.board i.g1{background:var(--g1e)}.board i.g2{background:var(--g2e)}.board i.g3{background:var(--g3e)}.board i.g4{background:var(--g4e)}.board i.g5{background:var(--g5e)}.board i.g6{background:var(--g6e)}
@keyframes tile{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.art-copy{max-width:460px;width:100%;margin-inline:auto}
.art-copy h1{font-family:var(--f-display);font-weight:800;font-size:clamp(30px,4vw,44px);line-height:1.25;margin:0 0 8px}
.art-copy p{margin:0;color:var(--on-pine-muted);font-size:15px;max-width:40ch}
.login-card{align-self:center;justify-self:center;width:min(380px,100%);display:flex;flex-direction:column;gap:14px;margin-block:32px;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.login-brand h2{font-family:var(--f-display);font-weight:800;margin:0;font-size:24px}
.login-brand p{margin:4px 0 0;color:var(--muted);font-size:13px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
.login-card label.row{flex-direction:row;align-items:center;font-weight:400;color:var(--muted)}
.login-card .field{padding:11px 12px;font-size:15px;background:var(--surface)}
.login-card .btn.primary{justify-content:center;padding:11px;font-size:15px;background:var(--pine);border-color:var(--pine);color:var(--on-pine)}
.login-err{color:var(--bad-ink);font-size:13px;min-height:1em}
@media (max-width:820px){
  .login{grid-template-columns:1fr}
  .login-art{padding-block:28px;gap:18px}
  .board{max-width:340px}
  .art-copy h1{font-size:28px}
}

@media (max-width:640px){
  .brand h1{font-size:18px}
  .scroll{max-height:none}
  .grid .nm{min-width:108px}
  .tab span{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.side,.top,.bar,.legend,.kpis-strip{display:none}.layout{display:block}.scroll{max-height:none;border:0}}
@media (max-width:640px){.actions{margin-inline-start:0;width:100%}.status{margin-inline-end:auto}}
.grades{display:flex;flex-direction:column}
.grade-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding-block:10px;border-bottom:1px solid var(--line)}
.grade-row:last-child{border-bottom:0}
.grade-name{display:flex;align-items:center;gap:8px;font-size:13px}
.grade-name .sw{margin:0}
.grade-max{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
.grade-max .field{padding:3px 6px;font-size:12px}
@media (max-width:560px){.grade-row{grid-template-columns:1fr auto}.grade-row .loadchips{grid-column:1/-1;grid-row:2}}
/* activity log */
.tab .badge{font-style:normal;background:var(--brass);color:var(--brass-ink);border-radius:999px;font-size:11px;font-weight:700;padding:0 7px;line-height:18px}
.log{list-style:none;margin:0;padding:0}
.log-day{font-family:var(--f-display);font-weight:600;font-size:13px;color:var(--muted);padding:14px 0 6px;border-bottom:1px solid var(--line)}
.log-day:first-child{padding-top:0}
.log-item{display:grid;grid-template-columns:64px 14px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:start}
.log-item time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.log-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--line-strong)}
.log-item.a-save .log-dot{background:var(--accent)}.log-item.a-fail .log-dot{background:var(--bad-ink)}.log-item.a-acct .log-dot{background:var(--brass)}
.log-tag{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 7px;margin-inline-start:4px}
.log-item.a-fail .log-tag{color:var(--bad-ink);border-color:var(--bad-ink)}
.log-sum{font-size:13px;margin-top:2px}
.log details{margin-top:6px;font-size:12.5px}
.log summary{cursor:pointer;color:var(--accent);font-size:12px}
.log details ul{margin:6px 0 0;padding-inline-start:18px;color:var(--ink);line-height:1.8}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
@media (max-width:1180px){.cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.cards.three{grid-template-columns:1fr}}
.cards.three .grade-row{grid-template-columns:auto minmax(0,1fr) auto}
.grade-name{white-space:nowrap}
.cards.three .grade-max{flex-direction:column;align-items:stretch;gap:2px}
.dayrow{flex-wrap:nowrap}
.dayrow .field.grow{flex:1 1 auto;min-width:0}
.dayrow label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.perm-box{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12.5px}
.checks.perms{gap:5px}
.checks.perms label{padding:3px 9px;font-size:12px}
.checks.perms label.on-ok{border-color:var(--accent);background:var(--accent-soft)}
.perm-row{margin-top:6px;max-width:440px}
/* share as image */
.grid .nm .share{float:left;border:0;background:none;padding:3px;margin:-2px -6px 0 0;border-radius:6px;color:var(--muted);cursor:pointer;line-height:0}
.grid .nm .share svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.grid .nm .share:hover{background:var(--accent-soft);color:var(--accent)}
.shot-modal{position:fixed;inset:0;z-index:70;background:rgba(10,25,22,.55);display:grid;place-items:center;padding-block:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.shot-box{background:var(--surface);border-radius:var(--r-l);box-shadow:var(--shadow);width:min(860px,100%);max-height:100%;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.shot-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.shot-box img{width:100%;height:auto;border-radius:var(--r-m);border:1px solid var(--line)}
.shot-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* top bar joins the sidebar: one pine L-shaped frame around the work area */
.top{background:
    linear-gradient(90deg,transparent calc(100% - 1px),rgba(255,255,255,.05) 0) 0 0/48px 100%,
    linear-gradient(transparent calc(100% - 1px),rgba(255,255,255,.05) 0) 0 0/100% 24px,
    var(--pine);backdrop-filter:none;border-bottom:0;color:var(--on-pine)}
.top-in{padding-block:14px}
.school-line b{color:var(--on-pine)}
.top .status{color:var(--on-pine-muted)}
.top .status i{background:#6fcf97}
.top .status.dirty{color:#ffd88a}
.top .btn{border-color:rgba(255,255,255,.22);background:transparent;color:var(--on-pine)}
.top .btn:hover{background:rgba(255,255,255,.08)}
.top .btn:disabled{opacity:.4}
.top .btn.save{background:var(--brass);border-color:var(--brass);color:var(--brass-ink)}
.top .btn.save:disabled{background:transparent;border-color:rgba(255,255,255,.22);color:var(--on-pine-muted);opacity:1}
.content>main{border-top-right-radius:var(--r-l);background:var(--bg);margin-top:0}
.content{background:var(--pine)}
.content>main{flex:1}
@media (max-width:900px){.content>main{border-radius:0}}
.btn.icon{padding:0;width:38px;height:36px;justify-content:center}
.btn.icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.top .btn.icon.save{width:46px;padding-inline:0}
.top .status.dirty i{background:var(--brass)}
/* fixed frame on wide screens: only the work area scrolls, with its scrollbar space always reserved,
   so switching between long and short tabs never shifts the menu */
@media (min-width:901px){
  html,body{height:100%;overflow:hidden}
  #app{height:100%;min-height:0}
  .layout{height:100%;min-height:0}
  .side{height:100%}
  .content{height:100%;overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:contain}
  .top{top:0}
}
/* control panel, sections, footer icons */
.foot-btns{display:flex;gap:6px}
.side .btn.icon{width:36px;height:34px}
.side .btn.icon.on{background:rgba(255,255,255,.14);border-color:var(--brass)}
.side .btn.icon.on svg{stroke:var(--brass)}
.btn.icon .ico{width:18px;height:18px}
.tab.is-hidden{opacity:.5}
.cards.control{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:start}
ol.sections{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ol.sections li{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
ol.sections li.is-hidden{opacity:.6;background:var(--surface-2)}
.sec-ico{display:grid;place-items:center;color:var(--accent)}
.sec-show{display:flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.sec-move{display:flex;gap:4px}
.btn.icon.sm{width:30px;height:28px}
.btn.icon.sm svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* undo / redo / save: each its own colour */
.top .btn.icon.undo{background:rgba(120,170,255,.16);border-color:rgba(156,195,255,.45);color:#b9d4ff}
.top .btn.icon.redo{background:rgba(111,207,151,.16);border-color:rgba(143,224,176,.45);color:#a9ecc5}
.top .btn.icon.undo:hover{background:rgba(120,170,255,.28)}.top .btn.icon.redo:hover{background:rgba(111,207,151,.28)}
.top .btn.icon.undo:disabled,.top .btn.icon.redo:disabled{opacity:.35}
.top .btn.icon.save{background:var(--brass);border-color:var(--brass);color:var(--brass-ink)}
.top .btn.icon.save:disabled{background:rgba(217,162,58,.12);border-color:rgba(217,162,58,.4);color:#e7c37a;opacity:.6}
/* solid, high-contrast action buttons on the dark bar */
.top .btn.icon{width:42px;height:38px;border-radius:10px;border:0;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.top .btn.icon svg{width:21px;height:21px;stroke-width:2.1}
.top .btn.icon.undo{background:#e6efff;color:#1d4ed8}
.top .btn.icon.redo{background:#efe7ff;color:#6d28d9}
.top .btn.icon.undo:hover{background:#d4e3ff}.top .btn.icon.redo:hover{background:#e3d6ff}
.top .btn.icon.save{background:#f2b843;color:#2a1d00;width:50px}
.top .btn.icon.save:hover{background:#f6c55f}
.top .btn.icon.undo:disabled,.top .btn.icon.redo:disabled{opacity:.45}
.top .btn.icon.save:disabled{background:#f2b843;color:#2a1d00;opacity:.45}
/* settings: classes on the right over two rows; school days and import side by side with equal height; export beneath them */
.cards.three{align-items:stretch;grid-template-areas:"classes days import" "classes export export"}
.set-classes{grid-area:classes}.set-days{grid-area:days}.set-import{grid-area:import}.set-export{grid-area:export;align-self:start}
.set-import{display:flex;flex-direction:column}
.set-import textarea.field{flex:1;min-height:140px}
.set-days,.set-import{align-self:stretch}
.cards.three .grade-row .loadchips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cards.three .grade-row .lc{justify-content:space-between;min-width:0}
.cards.three .grade-row .lc input{width:100%!important;min-width:0;text-align:right}
@media (max-width:1180px){.cards.three{grid-template-areas:"classes classes" "days import" "export export"}}
@media (max-width:760px){.cards.three{grid-template-areas:"classes" "days" "import" "export"}}
.cards.three .grade-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name max" "chips chips";row-gap:8px}
.cards.three .grade-row .grade-name{grid-area:name}
.cards.three .grade-row .grade-max{grid-area:max;flex-direction:row;align-items:center;gap:6px}
.cards.three .grade-row .loadchips{grid-area:chips;grid-column:1/-1;grid-row:auto}
.cards.three .grade-row .lc{padding:4px 6px 4px 8px}
.cards.three .grade-row .lc input{font-size:13px}
/* same size, solid backgrounds even when there is nothing to undo or save */
.top .btn.icon,.top .btn.icon.save{width:42px;height:38px;padding:0}
.top .btn.icon.undo:disabled,.top .btn.icon.redo:disabled,.top .btn.icon.save:disabled{opacity:1;cursor:default}
.top .btn.icon.undo:disabled{background:#e6efff;color:#93a9d6}
.top .btn.icon.redo:disabled{background:#efe7ff;color:#b3a0d8}
.top .btn.icon.save:disabled{background:#f2b843;color:#8a6a2a}
.btn.icon{display:inline-grid;place-items:center;gap:0;line-height:0}
.btn.icon svg{display:block;margin:0}
.today-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:12px}
.today-day{font-family:var(--f-display);font-weight:800;font-size:20px;color:var(--ink)}
.today-date{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.today-sep{width:5px;height:5px;border-radius:50%;background:var(--brass);align-self:center}
/* new colours: redo pink, save orange */
.top .btn.icon.redo{background:#ffe4ef;color:#be185d}
.top .btn.icon.redo:hover{background:#ffd3e4}
.top .btn.icon.redo:disabled{background:#ffe4ef;color:#e3a3bf}
.top .btn.icon.save{background:#ff8a4c;color:#ffffff}
.top .btn.icon.save:hover{background:#ff9a63}
.top .btn.icon.save:disabled{background:#ff8a4c;color:#ffd3bd}
/* header rows line up: brand band and top bar are both 64px, so the first tab starts level with the work area */
.side{padding-top:0;gap:0}
.brand{height:64px;flex:none;padding-top:4px}
.tabs{padding-top:0}
.side-foot{margin-top:auto}
.side .tabs{margin-bottom:16px}
@media (min-width:901px){.top-in{min-height:64px;padding-block:0}}
.school-ico{width:22px;height:22px;flex:none;fill:none;stroke:var(--brass);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.top .btn.icon.save{background:#ffffff;color:inherit}
.top .btn.icon.save:hover{background:#eef4ff}
.top .btn.icon.save img{display:block;width:24px;height:24px}
.top .btn.icon.save:disabled{background:#ffffff}
.top .btn.icon.save:disabled img{opacity:.45;filter:grayscale(.3)}
/* export card reaches the bottom of the classes card */
.set-export{align-self:stretch}
/* first load: the timetable mark lights up tile by tile in the middle of the page */
.boot{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;color:var(--on-pine);z-index:80;
  background:
    linear-gradient(90deg,transparent calc(100% - 1px),rgba(255,255,255,.05) 0) 0 0/48px 100%,
    linear-gradient(transparent calc(100% - 1px),rgba(255,255,255,.05) 0) 0 0/100% 24px,
    var(--pine)}
.boot-mark{display:grid;grid-template-columns:repeat(3,22px);grid-template-rows:repeat(2,22px);gap:7px}
.boot-mark i{border-radius:5px;background:var(--on-pine);opacity:.18;animation:boot 1.2s ease-in-out infinite}
.boot-mark i:nth-child(1){animation-delay:0s}.boot-mark i:nth-child(2){animation-delay:.15s;background:var(--brass)}.boot-mark i:nth-child(3){animation-delay:.3s}
.boot-mark i:nth-child(6){animation-delay:.45s}.boot-mark i:nth-child(5){animation-delay:.6s}.boot-mark i:nth-child(4){animation-delay:.75s}
@keyframes boot{0%,100%{opacity:.18;transform:scale(.86)}40%{opacity:1;transform:none}}
.boot p{margin:0;font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:.01em}
.boot p::after{content:"";display:inline-block;width:1.2em;text-align:start;animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media (prefers-reduced-motion:reduce){.boot-mark i{opacity:.8;animation:none}.boot p::after{content:"…";animation:none}}
/* save: blue floppy on a warm gold tile, the colour opposite blue, so the icon stands out */
.top .btn.icon.save{background:#f7c548}
.top .btn.icon.save:hover{background:#ffd364}
.top .btn.icon.save:disabled{background:#f7c548}
.top .btn.icon.save:disabled img{opacity:.55;filter:none}
/* constraints: the check card ends level with the teacher card */
.rules-row{align-items:stretch}
.rules-side{height:100%}
.rules-check{flex:1}
/* save: solid blue tile with a white floppy */
.top .btn.icon.save{background:#2563eb;color:#fff}
.top .btn.icon.save:hover{background:#1d4ed8}
.top .btn.icon.save svg .fill{fill:#fff;stroke:none}
.top .btn.icon.save svg .cut{fill:#2563eb;stroke:none}
.top .btn.icon.save svg .slot{fill:#fff;stroke:none}
.top .btn.icon.save:disabled{background:#5b84d6}
.top .btn.icon.save:disabled svg .cut{fill:#5b84d6}
.top .btn.icon.save:disabled svg .fill,.top .btn.icon.save:disabled svg .slot{fill:#dbe5fa}
/* the rounded corner where the work area meets the menu stays put while the page scrolls under the bar */
@media (min-width:901px){
  .top::after{content:"";position:absolute;top:100%;right:0;width:var(--r-l);height:var(--r-l);pointer-events:none;
    background:radial-gradient(circle at 0 100%,transparent calc(var(--r-l) - .5px),var(--pine) var(--r-l))}
}
/* undo and save: icons only, no tiles */
.top .btn.icon,.top .btn.icon.undo,.top .btn.icon.save,
.top .btn.icon:disabled,.top .btn.icon.undo:disabled,.top .btn.icon.save:disabled{background:transparent;border:0;box-shadow:none;width:40px;height:40px}
.top .btn.icon svg{width:26px;height:26px}
.top .btn.icon.undo{color:#9cc3ff}
.top .btn.icon.undo:hover{color:#c7dcff;background:transparent}
.top .btn.icon.save svg .fill,.top .btn.icon.save svg .slot{fill:#ffffff}
.top .btn.icon.save svg .cut{fill:var(--pine)}
.top .btn.icon.save:hover{background:transparent}
.top .btn.icon.save:hover svg .fill,.top .btn.icon.save:hover svg .slot{fill:#ffe6a6}
.top .btn.icon:disabled{opacity:.4}
.top .btn.icon.save:disabled svg .fill,.top .btn.icon.save:disabled svg .slot{fill:#ffffff}
.top .btn.icon.save:disabled svg .cut{fill:var(--pine)}
.top .btn.icon.save:not(:disabled) svg{filter:drop-shadow(0 0 6px rgba(247,197,72,.55))}