/* KMEG Team: the look. Tokens are DESIGN-SYSTEM.md section 1.2 exactly (one KMEG colour for both schools). */
:root{
  --kims-blue:#4285F4; --kims-red:#DB4437; --kims-yellow:#F4B400;
  --kk-blue:#016DB5; --kk-clay:#8F5A3C; --kk-olive:#8E9A52;
  --text:#1F2A44; --text-muted:#5F6368; --mark:#80868B;
  --bg:#F5F7FA; --card:#FFFFFF; --panel:#EEF2F7; --border:#E4E9F0;
  --accent:#4285F4; --accent-bg:#E8F0FE; --accent-fg:#1967D2;
  --ontime-bg:#E6F4EA; --ontime-fg:#137333; --ontime-border:#188038;
  --late-bg:#FEF7E0;   --late-fg:#8A5300;   --late-border:#B26A00;
  --absent-bg:#FCE8E6; --absent-fg:#C5221F; --absent-border:#C5221F;
  --tag-kims:#4285F4; --tag-kk:#8E9A52;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 -2px 12px rgba(0,0,0,.06);
  --shadow-pop:0 8px 24px rgba(31,42,68,.16);
  --scrim:rgba(31,42,68,.35);
  --on-dark:#FFFFFF; --on-dark-muted:#CDD5E1; --on-dark-label:#C7D7F8; --on-dark-stamp:#AAB5C8; --glass:rgba(255,255,255,.12);
  --ui:'Outfit','Noto Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fig:'DM Mono','Noto Sans Thai',ui-monospace,monospace;
  --top:64px; --bar:64px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip;overscroll-behavior-x:none;background:var(--bg)}
body{font:400 15px/1.45 var(--ui);color:var(--text);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent-fg);outline-offset:2px}
.m{font-family:var(--fig);font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
svg.i{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.s{width:18px;height:18px}

/* splash (Loading component) */
#splash{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:opacity .2s}
#splash img{width:72px;height:72px;border-radius:16px}
#splash p{margin:0;font:700 17px var(--ui)}
.dots{display:flex;gap:8px}
.dots span{width:8px;height:8px;border-radius:999px;animation:pulse 1s infinite ease-in-out}
.dots span:nth-child(1){background:var(--kims-blue)}
.dots span:nth-child(2){background:var(--kims-red);animation-delay:.15s}
.dots span:nth-child(3){background:var(--kims-yellow);animation-delay:.3s}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
#splash.gone{opacity:0;pointer-events:none}

/* page column */
.col{max-width:480px;margin:0 auto;padding:0 16px}

/* app header */
header.top{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--border);padding-top:var(--safe-t)}
.appbar{height:var(--top);display:flex;align-items:center;gap:12px;max-width:480px;margin:0 auto;padding:0 8px 0 16px}
.appbar .tile{width:36px;height:36px;border-radius:12px;flex:none}
.appbar .back{width:44px;height:44px;margin-left:-12px;border:0;background:transparent;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.appbar .back:active{background:var(--panel)}
.who{flex:1;min-width:0;display:flex;flex-direction:column}
.who .nm{font:700 17px/1.2 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .ctx{font:500 13px/1.3 var(--ui);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avbtn{width:44px;height:44px;border:0;background:transparent;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:none}
.avi{width:36px;height:36px;border-radius:999px;background:var(--accent-bg);color:var(--accent-fg);font:600 16px var(--ui);display:flex;align-items:center;justify-content:center}
.avi.big{width:44px;height:44px}
.acct{position:absolute;right:8px;top:calc(var(--top) + var(--safe-t) - 4px);width:min(320px,calc(100vw - 16px));background:var(--card);border-radius:16px;box-shadow:var(--shadow-pop);padding:8px 0;z-index:40}
.acct-who{display:flex;gap:12px;align-items:center;padding:8px 16px 12px;border-bottom:1px solid var(--border);margin-bottom:4px}
.acct-nm{font:600 16px var(--ui)}
.acct-sub{font:500 13px var(--ui);color:var(--text-muted)}
.acct-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;border:0;background:transparent;padding:0 16px;text-align:left;font:500 15px var(--ui)}
.acct-item svg{color:var(--mark)}
.acct-item:active{background:var(--panel)}
.acct-item .note{margin-left:auto;font:500 13px var(--ui);color:var(--text-muted)}

/* test bar (one test switch) */
.testbar{display:flex;align-items:center;gap:8px;background:var(--late-bg);color:var(--late-fg);font:500 13px var(--ui);padding:8px 16px;border-radius:12px;margin:8px 16px 0;max-width:448px}
@media (min-width:480px){.testbar{margin:8px auto 0}}
.testbar button{margin-left:auto;border:0;background:transparent;color:var(--late-fg);font:600 14px var(--ui);min-height:44px;padding:0 8px}

/* main */
#view{padding:16px 0 calc(var(--bar) + var(--safe-b) + 32px)}
.ptitle{font:700 24px/1.2 var(--ui);margin:0 0 4px}
.pdate{font:500 13px var(--ui);color:var(--text-muted);margin:0 0 4px}
.sec{display:flex;align-items:center;gap:8px;margin:24px 0 8px}
.sec h2{font:700 15px var(--ui);margin:0;flex:0 1 auto}
.sec .ct{font:500 12px var(--fig);background:var(--panel);border-radius:999px;padding:2px 8px}
.sec .lnk{margin-left:auto;border:0;background:transparent;color:var(--accent-fg);font:600 14px var(--ui);min-height:44px;padding:0 4px}

/* cards and rows */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);padding:16px;margin-bottom:12px}
.list{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);overflow:hidden;margin-bottom:12px}
.row{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 16px;border:0;background:transparent;text-align:left;border-top:1px solid var(--border)}
.row:first-child{border-top:0}
button.row:active,a.row:active{background:var(--panel)}
a.row{color:inherit;text-decoration:none}
.row .ini{width:40px;height:40px;border-radius:999px;background:var(--accent-bg);color:var(--accent-fg);font:600 15px var(--ui);display:flex;align-items:center;justify-content:center;flex:none}
.row .ic{width:40px;height:40px;border-radius:12px;background:var(--panel);color:var(--text-muted);display:flex;align-items:center;justify-content:center;flex:none}
.row .tx{flex:1;min-width:0}
.row .t1{display:block;font:600 16px/1.3 var(--ui);overflow:hidden;text-overflow:ellipsis}
.row .t2{display:block;font:500 13px/1.35 var(--ui);color:var(--text-muted);margin-top:2px}
.row .t3{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.row .go{color:var(--mark);flex:none}

/* tags */
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 12px;border-radius:999px;font:600 12px var(--ui);background:var(--panel);color:var(--text-muted);white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor}
.tag.green{background:var(--ontime-bg);color:var(--ontime-fg)}
.tag.amber{background:var(--late-bg);color:var(--late-fg)}
.tag.red{background:var(--absent-bg);color:var(--absent-fg)}
.tag.blue{background:var(--accent-bg);color:var(--accent-fg)}
.tag.school{background:var(--panel);color:var(--text)}
.tag.school::before{border-radius:2px;width:8px;height:8px}
.tag.school.kims::before{background:var(--tag-kims)}
.tag.school.kk::before{background:var(--tag-kk)}

/* search */
.srch{position:relative;margin:8px 0 12px}
.srch svg{position:absolute;left:14px;top:14px;color:var(--mark)}
.srch input{width:100%;height:52px;border:1px solid var(--mark);border-radius:12px;background:var(--card);padding:0 48px 0 46px;font:400 16px var(--ui)}
.srch input:focus{outline:2px solid var(--accent-fg);outline-offset:0;border-color:var(--accent-fg)}
.srch input::-webkit-search-cancel-button,.srch input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.srch .clr{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;background:transparent;border-radius:12px;color:var(--mark);display:flex;align-items:center;justify-content:center}

/* school switch */
.seg{display:flex;background:var(--panel);border-radius:12px;padding:4px;gap:4px;margin:8px 0}
.seg button{flex:1;height:44px;border:0;border-radius:10px;background:transparent;font:500 14px var(--ui);color:var(--text-muted)}
.seg button[aria-pressed=true]{background:var(--card);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)}

/* chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);font:500 14px var(--ui);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;flex:none}
.chip[aria-pressed=true]{background:var(--accent-bg);color:var(--accent-fg);font-weight:600;border-color:var(--accent-bg)}
.chip .m{font-size:13px}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.tilebtn{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-md);padding:12px;text-align:left;min-height:76px;display:flex;flex-direction:column;justify-content:space-between}
.tilebtn .n{font:500 24px/1 var(--fig);color:var(--text-muted)}
.tilebtn .l{font:500 12px/1.3 var(--ui);color:var(--text-muted)}
.tilebtn.on .n{color:var(--text)}
.tilebtn.red .n{color:var(--absent-fg)}
.tilebtn.amber .n{color:var(--late-fg)}
.tilebtn:active{background:var(--panel)}

/* buttons */
.btn{height:52px;padding:0 24px;border-radius:12px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-sm);font:600 16px var(--ui);display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--text);text-decoration:none}
.btn.pri{background:var(--accent-fg);border-color:var(--accent-fg);color:var(--on-dark)}
.btn.wide{width:100%}
.btn.main{height:56px;width:100%}
.btn.sm{height:44px;font-size:14px;padding:0 16px}
.btn:active{filter:brightness(.94)}
.btn[disabled]{background:var(--panel);border-color:var(--panel);color:var(--text-muted);box-shadow:none}
.btn.danger{color:var(--absent-fg)}

/* fields */
.fld{margin:12px 0}
.fld label{display:block;font:600 13px var(--ui);color:var(--text-muted);margin-bottom:8px}
.fld input{width:100%;height:52px;border:1px solid var(--mark);border-radius:12px;background:var(--card);padding:0 16px;font:400 16px var(--ui)}
.fld input:focus{outline:2px solid var(--accent-fg);outline-offset:0;border-color:var(--accent-fg)}
.fld .err{color:var(--absent-fg);font:500 13px var(--ui);margin-top:8px}

/* banners */
.ban{display:flex;gap:8px;align-items:flex-start;border-radius:12px;padding:12px;font:500 13px/1.4 var(--ui);margin:8px 0;background:var(--accent-bg);color:var(--accent-fg)}
.ban.amber{background:var(--late-bg);color:var(--late-fg)}
.ban.red{background:var(--absent-bg);color:var(--absent-fg)}
.ban.green{background:var(--ontime-bg);color:var(--ontime-fg)}
.ban svg{flex:none}
.ban button{margin-left:auto;border:0;background:transparent;color:inherit;font:600 14px var(--ui);min-height:44px;padding:0 8px;margin-top:-12px;margin-bottom:-12px}

/* empty state */
.empty{text-align:center;padding:32px 16px}
.empty .disc{width:56px;height:56px;border-radius:999px;background:var(--panel);color:var(--mark);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.empty .e1{font:600 16px var(--ui);margin:0 0 4px}
.empty .e2{font:400 14px var(--ui);color:var(--text-muted);margin:0 0 16px}

/* bottom bar */
nav.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--border);box-shadow:var(--shadow-lg);padding-bottom:var(--safe-b);display:flex;justify-content:center}
nav.bar button{flex:1;max-width:128px;height:var(--bar);border:0;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:500 12px var(--ui);color:var(--text-muted);position:relative}
nav.bar button[aria-current=page]{color:var(--accent-fg);font-weight:600}
nav.bar button[aria-current=page]::before{content:"";position:absolute;top:0;left:50%;width:24px;height:3px;margin-left:-12px;border-radius:0 0 3px 3px;background:var(--accent)}
nav.bar .nmr{display:flex;align-items:center;gap:4px}
nav.bar .cnt{font:500 12px var(--fig);background:var(--accent-bg);color:var(--accent-fg);border-radius:999px;padding:0 6px;line-height:18px}

/* the old screens, inside KMEG Team */
#frames{position:fixed;left:0;right:0;top:calc(var(--top) + var(--safe-t) + 1px);bottom:calc(var(--bar) + var(--safe-b));z-index:10;background:var(--bg)}
#frames iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
#frames .fwait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);font:500 13px var(--ui);pointer-events:none}
body.nobar nav.bar{display:none}
body.nobar #frames{bottom:0}

/* Updating pill and the message */
#pill{position:fixed;top:calc(var(--top) + var(--safe-t) + 8px);left:50%;transform:translateX(-50%);z-index:35;background:var(--card);color:var(--text-muted);border:1px solid var(--border);box-shadow:var(--shadow-md);border-radius:999px;padding:4px 16px;font:500 13px var(--ui)}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + var(--safe-b) + 16px);z-index:60;width:min(448px,calc(100% - 32px));background:var(--text);color:var(--card);border-radius:16px;box-shadow:var(--shadow-pop);padding:12px 16px;font:500 14px var(--ui);display:flex;align-items:center;gap:8px}
#toast button{margin-left:auto;border:0;background:transparent;color:var(--card);font:600 14px var(--ui);min-height:44px;padding:0 8px}

/* sheet (pop-up and question sheet) */
#scrim{position:fixed;inset:0;background:var(--scrim);z-index:70}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;background:var(--card);border-radius:16px 16px 0 0;box-shadow:var(--shadow-pop);max-height:88vh;overflow:auto;padding:8px 16px calc(16px + var(--safe-b));max-width:480px;margin:0 auto}
.sheet .grab{width:36px;height:4px;border-radius:999px;background:var(--border);margin:4px auto 8px}
.sheet .sh{display:flex;align-items:center;gap:8px}
.sheet h3{font:700 20px var(--ui);margin:4px 0;flex:1}
.sheet .x{width:44px;height:44px;border:0;background:transparent;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}
.sheet p{font:400 15px var(--ui);color:var(--text-muted);margin:4px 0 16px}
.sheet .acts{display:flex;gap:12px;margin-top:16px}
.sheet .acts .btn{flex:1}
@media (min-width:600px){.sheet{bottom:auto;top:50%;transform:translateY(-50%);border-radius:16px}}

/* sign-in */
.gate{max-width:400px;margin:0 auto;padding:48px 16px 32px}
.gate .tile{width:72px;height:72px;border-radius:16px;display:block;margin:0 auto 16px}
.gate h1{font:700 24px var(--ui);text-align:center;margin:0 0 4px}
.gate .sub{text-align:center;color:var(--text-muted);margin:0 0 24px}
.names{display:grid;gap:8px}
.names button{height:56px;border-radius:12px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-sm);font:600 16px var(--ui);display:flex;align-items:center;gap:12px;padding:0 16px;text-align:left}
.names button:active{background:var(--panel)}

/* health */
.hrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);font:500 14px var(--ui)}
.hrow:first-child{border-top:0}
.hrow .v{color:var(--text-muted);text-align:right}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* review 26 Oct 2026 (Tier 2) */
.tag.m,.pdate.m,.t2 .m{font-family:var(--fig);font-weight:500}
.tag.id::before{display:none}
.list .row:focus-visible{outline-offset:-2px}
.btn.danger-solid{background:var(--absent-fg);border-color:var(--absent-fg);color:var(--on-dark)}
.contacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ptitle:focus{outline:none}