/* Layout: civic form tool — top bar with four rooms, a stepper for the school instrument, sticky action bar; dashboard tables scroll inside their own box */
:root{
  --paper:#F4F6F3; --surface:#FFFFFF; --sunk:#E9EDE8; --line:#D3DAD3;
  --ink:#15241F; --ink2:#4B5B55; --ink3:#7A8882;
  --indigo:#23477A; --indigo-soft:#E3EAF4; --saffron:#B97A12; --saffron-soft:#FBF0DA;
  --ok:#1F7A4D; --ok-soft:#DDF1E5; --warn:#9A6A00; --warn-soft:#FFF1CC; --bad:#B23A2E; --bad-soft:#F9E0DC;
  --input:#FFFFFF; --input-edit:#FFFBEA;
  --f-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#101815; --surface:#17211D; --sunk:#1E2A25; --line:#2E3D37;
  --ink:#E7EEEA; --ink2:#AAB8B2; --ink3:#7F8F88;
  --indigo:#8FB1E6; --indigo-soft:#1D2B40; --saffron:#E4AE4E; --saffron-soft:#3A2D14;
  --ok:#6FD19E; --ok-soft:#173527; --warn:#E8C25A; --warn-soft:#3A3013; --bad:#F08F84; --bad-soft:#3D1F1B;
  --input:#121B17; --input-edit:#2A2614; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#101815; --surface:#17211D; --sunk:#1E2A25; --line:#2E3D37;
  --ink:#E7EEEA; --ink2:#AAB8B2; --ink3:#7F8F88;
  --indigo:#8FB1E6; --indigo-soft:#1D2B40; --saffron:#E4AE4E; --saffron-soft:#3A2D14;
  --ok:#6FD19E; --ok-soft:#173527; --warn:#E8C25A; --warn-soft:#3A3013; --bad:#F08F84; --bad-soft:#3D1F1B;
  --input:#121B17; --input-edit:#2A2614; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0}
h2{font-size:1.35rem;font-weight:800;letter-spacing:-.01em}
h3{font-size:1.02rem;font-weight:700}
.num,td.n,.mono{font-family:var(--f-num);font-variant-numeric:tabular-nums}
a{color:var(--indigo)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;min-width:0}
.mark{width:34px;height:34px;border-radius:7px;background:var(--indigo);color:var(--surface);display:grid;place-items:center;font:800 13px var(--f-display);letter-spacing:.02em;flex:none}
.brand b{display:block;font:800 15px/1.2 var(--f-display)}
.brand small{display:block;color:var(--ink3);font-size:12px}
nav.rooms{display:flex;gap:4px;flex-wrap:wrap}
nav.rooms a{text-decoration:none;border:0;background:transparent;padding:8px 12px;border-radius:7px;font-weight:600;color:var(--ink2);cursor:pointer}
nav.rooms a[aria-current="page"]{background:var(--indigo-soft);color:var(--indigo)}
nav.rooms a:hover{background:var(--sunk)}

main{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:22px 120px;display:grid;gap:18px}
.notice{padding:12px 14px;border-radius:var(--r);background:var(--saffron-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--saffron) 35%,transparent);font-size:14px}
.notice.info{background:var(--indigo-soft);border-color:color-mix(in srgb,var(--indigo) 30%,transparent)}
.notice.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.lead{color:var(--ink2);max-width:72ch;margin:6px 0 0}
.eyebrow{font:600 11px var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.panel>h3{margin-bottom:10px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 18px}
.field{display:grid;gap:4px;min-width:0}
.field label{font-size:13px;font-weight:600;color:var(--ink2)}
.field .hint{font-size:12px;color:var(--ink3)}
input[type=text],input[type=number],select,textarea{width:100%;background:var(--input);border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-height:38px}
input[type=number]{font-family:var(--f-num);text-align:right}
input:focus,select:focus{border-color:var(--indigo);background:var(--input-edit)}
.req::after{content:" *";color:var(--bad)}

.steps{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.steps button{flex:none;display:flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px 6px 6px;cursor:pointer;color:var(--ink2);font-weight:600;font-size:13px}
.steps button .c{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--sunk);font:700 12px var(--f-num)}
.steps button[aria-current="true"]{border-color:var(--indigo);color:var(--indigo)}
.steps button[aria-current="true"] .c{background:var(--indigo);color:var(--surface)}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}
thead th{position:sticky;top:0;background:var(--sunk);font-size:12px;font-weight:700;color:var(--ink2);white-space:nowrap}
th.grp{background:var(--indigo-soft);color:var(--indigo);text-align:left;font-size:12.5px;letter-spacing:.02em}
td.n{text-align:right;white-space:nowrap}
td input[type=number]{min-width:92px;padding:6px 8px;min-height:34px}
td input.sm{min-width:64px}
td input[type=text]{min-width:90px;padding:6px 8px;min-height:34px}
td .lbl{min-width:220px;max-width:340px}
td .sub{font-size:12px;color:var(--ink3)}
tr.tot td{font-weight:700;background:var(--sunk)}
.src{background:color-mix(in srgb,var(--indigo-soft) 45%,transparent)}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:6px 12px;cursor:pointer;font-weight:600;font-size:13px;color:var(--ink2)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--indigo);color:var(--surface)}
.kep{display:grid;grid-template-columns:52px 1fr auto;gap:6px 14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.kep:last-child{border-bottom:0}
.kep .code{font:600 13px var(--f-num);color:var(--indigo)}
.kep .ref{font-size:12px;color:var(--ink3);margin-top:2px}
@media (max-width:640px){.kep{grid-template-columns:40px 1fr}.kep .seg{grid-column:2}}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.mute{background:var(--sunk);color:var(--ink2)}
.pill.ind{background:var(--indigo-soft);color:var(--indigo)}

.kv{display:grid;grid-template-columns:1fr auto;gap:0;border-top:1px solid var(--line)}
.kv>div{padding:8px 0;border-bottom:1px solid var(--line)}
.kv>div:nth-child(even){text-align:right;font-family:var(--f-num);font-variant-numeric:tabular-nums;padding-left:12px}
.kv .strong{font-weight:700}
.status-big{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:16px;border-radius:var(--r);border:1px solid var(--line);background:var(--sunk)}
.status-big .s{font:800 1.25rem var(--f-display)}
.crit{display:grid;gap:8px}
.crit>div{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.bar-in{max-width:1180px;margin:0 auto;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px 16px;border-radius:7px;font-weight:700;cursor:pointer;min-height:40px}
.btn:hover{background:var(--sunk)}
.btn.primary{background:var(--indigo);border-color:var(--indigo);color:var(--surface)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.accent{background:var(--saffron);border-color:var(--saffron);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:6px 11px;min-height:32px;font-size:13px}
.savestate{font-size:13px;color:var(--ink3)}

.rooms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.room{display:grid;gap:8px;text-align:left;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.room:hover{border-color:var(--indigo)}
.room .tag{font:600 12px var(--f-num);color:var(--saffron)}
.room p{margin:0;color:var(--ink2);font-size:14px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.stat .v{font:700 1.5rem var(--f-num);font-variant-numeric:tabular-nums}
.stat .k{font-size:12.5px;color:var(--ink2)}

details.grp{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
details.grp>summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;gap:12px;font-weight:700}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary .num{font-weight:600;color:var(--ink2)}
details.grp[open]>summary{border-bottom:1px solid var(--line)}
.pitem{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pitem:last-child{border-bottom:0}
.pitem .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.pitem .head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.pitem .kat{font:700 11px var(--f-num);padding:2px 7px;border-radius:5px;background:var(--sunk);color:var(--ink2)}
.pitem .kat.A{background:var(--bad-soft);color:var(--bad)}
.pitem .kat.B{background:var(--indigo-soft);color:var(--indigo)}
.pitem .flag{color:var(--bad);font-weight:700;font-size:12.5px}
.pitem small{color:var(--ink3);font-size:12px}
.list{display:grid;gap:8px}
.list .it{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copy code{font:13px var(--f-num);background:var(--sunk);padding:6px 9px;border-radius:6px;word-break:break-all}
.muted{color:var(--ink3)}
.errs{margin:6px 0 0;padding-left:18px}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;z-index:40;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:no-preference){.toast{animation:up .18s ease-out}@keyframes up{from{transform:translate(-50%,8px);opacity:.4}}}

a.room{color:inherit;text-decoration:none}
.foot{max-width:1180px;margin:0 auto;padding:0 16px 110px;color:var(--ink3);font-size:12.5px}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:18px;text-align:center;color:var(--ink2)}
.drop.on{border-color:var(--indigo);background:var(--indigo-soft)}