/* /home — "น้องบอท" look: soft sky ground, white rounded cards, orange accent, Mitr headings over Anuphan body. */
.category-page{
  --mp-bg:#e8f2ff;--mp-card:#ffffff;--mp-soft:#f5f8fd;--mp-soft-2:#eef3fb;
  --mp-ink:#1b2340;--mp-ink-2:#3a4260;--mp-muted:#56607d;--mp-line:#dde3ee;
  --mp-accent:#ff8a3d;--mp-accent-deep:#d96a20;--mp-accent-ink:#b84f0f;--mp-accent-soft:#fff1e6;
  /* Blue stays for /kiosk, which shares these tokens. */
  --mp-blue:#3d5afe;--mp-blue-mark:#3d5afe;--mp-blue-soft:#e6eaff;
  --mp-ok:#146146;--mp-ok-soft:#ddf6ec;--mp-warn:#7a4600;--mp-warn-soft:#fff1d1;--mp-bad:#c2331f;--mp-bad-soft:#ffe1db;
  --mp-k-light:#ffc93c;--mp-k-light-soft:#fff1c2;--mp-k-water:#5b9bf2;--mp-k-water-soft:#dcebff;
  --mp-k-fan:#3ecb96;--mp-k-fan-soft:#d6f5ea;--mp-k-ac:#22b8cf;--mp-k-ac-soft:#d7f5f8;
  --mp-k-other:#98a2b8;--mp-k-other-soft:#eef1f6;
  --mp-cam:#26304f;--mp-cam-ink:#aeb8d6;
  --mp-shadow:0 8px 24px rgba(40,70,140,.08);
  --mp-display:'Mitr','Anuphan',sans-serif;
  /* Standalone pages scroll on the document, unlike the packaged app shell. */
  position:static;min-height:100vh;overflow:visible;background:var(--mp-bg);color:var(--mp-ink);
  font-family:'Anuphan','Noto Sans Thai',sans-serif;font-variant-numeric:tabular-nums;
}
html.dark .category-page{
  --mp-bg:#0f1424;--mp-card:#1a2135;--mp-soft:#222b42;--mp-soft-2:#28324c;
  --mp-ink:#eef2ff;--mp-ink-2:#c9d1e6;--mp-muted:#9aa5c4;--mp-line:#2e3853;
  --mp-accent-ink:#ffa46b;--mp-accent-soft:#3a2616;--mp-blue-mark:#5b73ff;--mp-blue-soft:#232c50;
  --mp-ok:#5fd3a6;--mp-ok-soft:#12372b;--mp-warn:#f2b84b;--mp-warn-soft:#382b11;--mp-bad:#ff8a7a;--mp-bad-soft:#3b1a17;
  --mp-k-light-soft:#3a3212;--mp-k-water-soft:#16304d;--mp-k-fan-soft:#133a30;--mp-k-ac-soft:#103a40;--mp-k-other-soft:#242c3d;
  --mp-cam:#0b0f1c;--mp-shadow:none;
}

/* Match the original home dashboard: shared palette, type, density and shapes. */
.category-page{margin:0;font-size:14px;line-height:1.5}
.category-page *{box-sizing:border-box}
.category-shell{max-width:1640px;margin:0 auto;padding:clamp(10px,2vh,18px);min-height:100%}
.category-page a{color:inherit;text-decoration:none}
.category-header{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:999px;background:var(--mp-card);box-shadow:var(--mp-shadow)}
.category-header .back{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.brand-icon{width:44px;height:44px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--mp-accent);color:white}
.back strong{display:block;font-family:var(--mp-display);font-size:19px;font-weight:600;line-height:1.2}
.back small{display:block;font-size:12.5px;font-weight:500;color:var(--mp-muted);margin-top:3px}
.header-room{font-size:12.5px;color:var(--mp-muted);padding:0 10px}
.category-page button{font:inherit;color:var(--mp-ink);cursor:pointer;border:0;border-radius:999px;padding:10px 16px;background:var(--mp-soft-2);font-size:13px;font-weight:700}
.category-page button:hover{background:var(--mp-accent-soft)}
.category-page button:disabled{opacity:.6;cursor:wait}
.category-page :focus-visible,.category-shortcuts a:focus-visible{outline:3px solid var(--mp-accent,#ff8a3d);outline-offset:3px}
.category-tabs{display:flex;gap:4px;width:fit-content;max-width:100%;padding:4px;margin:16px 0;background:var(--mp-card);border-radius:999px;box-shadow:var(--mp-shadow)}
.category-tabs a{display:flex;align-items:center;justify-content:center;padding:10px 22px;border-radius:999px;font-size:13px;font-weight:700;color:var(--mp-muted)}
.category-tabs a[aria-current]{background:var(--mp-accent);color:var(--mp-ink)}
.category-intro{margin:18px 4px 12px}
.eyebrow{display:none}
.category-intro h1{font-family:var(--mp-display);font-size:24px;font-weight:600;line-height:1.4;margin:0 0 4px}
.category-intro p{font-size:13px;color:var(--mp-muted);margin:0}
.notice{display:table;padding:7px 13px;margin:12px 0;border-radius:999px;background:var(--mp-card);color:var(--mp-muted);font-size:12px}
.notice.error{background:var(--mp-bad-soft);color:var(--mp-bad)}
.measure-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.measure{min-width:0;padding:18px 20px;border:0;border-radius:18px;background:var(--mp-card)}
.measure>span:first-child{font-size:13px;font-weight:700;color:var(--mp-ink)}
.measure strong{display:block;font-family:var(--mp-display);font-size:32px;font-weight:500;line-height:1.3;margin:8px 0 6px}
.measure strong small{font-family:'Anuphan',sans-serif;font-size:12px;font-weight:600;color:var(--mp-muted)}
.measure p{font-size:12px;color:var(--mp-muted);margin:0 0 10px}
.measure.stale{background:var(--mp-warn-soft)}
.measure.out-of-range{background:var(--mp-bad-soft)}
.measure.out-of-range strong{color:var(--mp-bad)}
.utility-stats .measure.sun{background:var(--mp-accent-soft)}
.utility-stats .measure.water{background:var(--mp-k-water-soft)}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--mp-soft-2);color:var(--mp-muted)}
.badge.old{background:var(--mp-card);color:var(--mp-warn)}
.badge.good{background:var(--mp-ok-soft);color:var(--mp-ok)}
.reading-time{display:block;font-size:11px;color:var(--mp-muted);margin-top:6px}
.period-picker{display:flex;gap:4px;align-items:center;justify-content:flex-end;margin:8px 0}
.period-picker>span{font-size:12px;color:var(--mp-muted);margin-right:8px}
.period-picker button{background:var(--mp-card)}
.period-picker button[aria-pressed=true]{background:var(--mp-accent);color:var(--mp-ink)}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.chart-card{min-width:0;padding:18px;border:0;border-radius:26px;background:var(--mp-card);box-shadow:var(--mp-shadow)}
.chart-card h2,.water-entry h2{font-family:var(--mp-display);font-size:17px;font-weight:600;margin:0}
.chart-title{display:flex;align-items:center;justify-content:space-between}
.chart-title>span{color:var(--mp-muted);font-size:12px}
.chart-card svg{width:100%;margin-top:14px}
.chart-card svg text{font:12px 'Anuphan',sans-serif;fill:var(--mp-muted)}
.chart-card svg line{stroke:var(--mp-line)}
.empty-chart{height:215px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:18px;background:var(--mp-soft);margin-top:14px;padding:12px}
.empty-chart>span{font-size:34px;color:var(--mp-muted)}
.empty-chart strong{font-size:13px;font-weight:600;color:var(--mp-ink-2);margin:8px 0}
.empty-chart p{font-size:11px;color:var(--mp-muted);margin:0}
.chart-card summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--mp-accent-ink);padding:8px 0}
.chart-card table{width:100%;border-collapse:collapse;text-align:left;font-size:12px;margin-top:8px}
.chart-card th,.chart-card td{border-bottom:1px solid var(--mp-line);padding:8px}
.footnote{font-size:11.5px;color:var(--mp-muted);line-height:1.7;margin:14px 4px}
.water-entry{display:grid;grid-template-columns:1fr 1.7fr;gap:24px;background:var(--mp-card);padding:20px;border-radius:26px;box-shadow:var(--mp-shadow);margin:18px 0}
.water-entry p{font-size:12px;color:var(--mp-muted)}
.water-entry form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.water-entry label{font-size:12px;font-weight:600;color:var(--mp-ink-2)}
.water-entry input{width:100%;font:inherit;color:var(--mp-ink);background:var(--mp-soft);border:1px solid var(--mp-line);padding:11px 12px;border-radius:14px;margin-top:6px}
.water-entry button{grid-column:1/-1;background:var(--mp-accent);color:var(--mp-ink)}
.water-entry #save-status{grid-column:1/-1;margin:0;color:var(--mp-ok)}
.category-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 10px;font-family:'Anuphan','Noto Sans Thai',sans-serif}
.category-shortcuts a{display:flex;align-items:center;gap:12px;padding:14px 18px;border:0;border-radius:22px;background:var(--mp-card,#fff);color:var(--mp-ink,#1b2340);text-decoration:none;box-shadow:var(--mp-shadow);transition:transform .15s}
.category-shortcuts a:hover{transform:translateY(-2px);background:var(--mp-accent-soft,#fff1e6)}
.category-shortcuts strong{display:block;font:500 17px var(--mp-display,'Mitr',sans-serif)}
.category-shortcuts small{display:block;font-size:12px;color:var(--mp-muted,#56607d);margin-top:3px}
.category-shortcuts b{margin-left:auto;font-size:20px}
.category-icon{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:50%;background:var(--mp-accent-soft,#fff1e6);color:var(--mp-accent-ink,#b84f0f);font-size:26px}
.category-icon.electric{background:var(--mp-accent,#ff8a3d);color:var(--mp-ink,#1b2340)}
@media(max-width:1000px){.water-entry{grid-template-columns:1fr}.measure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-room{display:none}}
@media(max-width:650px){.charts-grid{grid-template-columns:1fr}.category-shortcuts{grid-template-columns:1fr}.category-tabs{width:100%}.category-tabs a{flex:1;padding:10px 8px;font-size:12px}.category-intro h1{font-size:21px}.measure{padding:14px}.measure strong{font-size:27px}.water-entry form{grid-template-columns:1fr}.category-header{gap:4px}.category-header button{padding:10px;font-size:11px}.back strong{font-size:16px}.back small{font-size:11px}.brand-icon{width:38px;height:38px}.category-header .back{gap:8px}}

/* Classroom display bands: independent of backend alert thresholds. */
.weather-page .weather-band-good{--reading-color:#168253;--reading-soft:#e7f7ee;--reading-line:#80cea7}
.weather-page .weather-band-watch{--reading-color:#9a7000;--reading-soft:#fff8d8;--reading-line:#ebc653}
.weather-page .weather-band-high{--reading-color:#c25915;--reading-soft:#fff0e2;--reading-line:#f3a76b}
.weather-page .weather-band-critical{--reading-color:#bf334e;--reading-soft:#ffedf1;--reading-line:#ec8fa2}
.weather-page .weather-band-unlisted,.weather-page .weather-band-unknown{--reading-color:#64748b;--reading-soft:#f1f5f9;--reading-line:#cbd5e1}
.weather-page #readings .measure{border-color:var(--reading-line);background:linear-gradient(145deg,#fff,var(--reading-soft))}
.weather-page #readings .measure>strong,.weather-page #readings .measure>strong small{color:var(--reading-color)}
.weather-page .weather-level{display:block;color:var(--reading-color);font-weight:600;font-size:14px;margin:10px 0}
.weather-page .weather-color-key{display:flex;gap:12px 22px;flex-wrap:wrap;margin:0 0 18px;font-size:14px}
.weather-page .weather-color-key>span{color:var(--reading-color);background:var(--reading-soft);padding:7px 12px;border-radius:99px}

/* Approved weather header; sensor cards retain their existing styles. */
.weather-header-v1 .category-tabs.school-data-nav{display:flex;gap:6px;background:#ffffffa6;border:1px solid #fff;border-radius:13px;padding:5px;width:fit-content;margin:24px 0 28px;box-shadow:none}
.weather-header-v1 .category-tabs.school-data-nav a{padding:11px 22px;color:#6d7f99;border-radius:9px;font-size:13px;font-weight:600;background:transparent;flex:none}
.weather-header-v1 .category-tabs.school-data-nav a[aria-current=page]{background:#fff;color:#234d7d;box-shadow:0 3px 10px #24426b13}
.weather-header-v1 #content>.category-intro{position:relative;padding:0 90px 0 0;margin:0 0 22px;background:none;border:0;border-radius:0;box-shadow:none}
.weather-header-v1 #content>.category-intro>.eyebrow{display:none}
.wh-eyebrow{font-size:10px;letter-spacing:1.5px;color:#6887ac;margin-bottom:9px}
.weather-header-v1 #content>.category-intro h1{font-size:29px;line-height:1.4;margin:0 0 7px;letter-spacing:-.6px;color:#223555}
.weather-header-v1 #content>.category-intro p{margin:0;color:#7e91aa;font-size:13px}
.wh-cloud{position:absolute;right:0;top:12px;height:64px;width:64px;display:grid;place-items:center;background:#ffffffb0;border:1px solid #fff;border-radius:18px;font-size:32px;color:#698db7}
.wh-toolbar{background:#ffffffbf;border:1px solid white;border-radius:13px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 18px}
.wh-source{display:flex;align-items:center;gap:10px;color:#637d9c;font-size:12px;min-width:0}.wh-source strong{font-weight:500}.wh-dot{width:8px;height:8px;background:#94a7bc;border-radius:50%;flex-shrink:0}
.weather-header-v1 #status{display:block;font-size:10px;color:#8da0b9;margin:3px 0 0;padding:0;border:0;border-radius:0;background:transparent;max-width:550px;line-height:1.6}
.wh-sound{flex-shrink:0}.weather-header-v1 .wh-sound .ak-sound-controls{margin:0;gap:8px;justify-content:flex-end}.weather-header-v1 .wh-sound .ak-sound-controls button{font-size:12px;min-height:34px;padding:9px 12px;border-radius:8px}.weather-header-v1 .wh-sound .ak-sound-controls small{font-size:10px;color:#899bb2}
.weather-header-v1 #content>.air-section-title{display:flex;justify-content:space-between;align-items:center;margin:32px 0 0;gap:16px}.weather-header-v1 #content>.air-section-title h2{font-size:18px;margin:0;color:#223555}.weather-header-v1 #content>.air-section-title h2 small{font-size:11px;color:#8497b1;font-weight:400;margin-left:10px}
.weather-header-v1 #content>.air-section-title .weather-color-key{display:flex;gap:16px;font-size:11px;margin:0;flex-wrap:wrap}.weather-header-v1 #content>.air-section-title .weather-color-key>span{padding:0;background:transparent;border-radius:0;font-size:11px}
.wh-note{font-size:11px;color:#879bb5;border-top:1px solid #ffffffa0;padding-top:12px;margin:14px 0 20px}
@media(max-width:800px){.wh-toolbar{display:block}.wh-sound{margin-top:14px}.weather-header-v1 .wh-sound .ak-sound-controls{justify-content:flex-start}.weather-header-v1 #content>.air-section-title{display:block}.weather-header-v1 #content>.air-section-title .weather-color-key{margin-top:12px;gap:12px}}
@media(max-width:650px){.weather-header-v1 .category-tabs.school-data-nav{width:100%;gap:3px}.weather-header-v1 .category-tabs.school-data-nav a{flex:1;padding:10px 7px;text-align:center;font-size:11px}.weather-header-v1 #content>.category-intro{padding:0}.weather-header-v1 #content>.category-intro h1{font-size:24px}.wh-cloud{display:none}.wh-toolbar{padding:15px}}

/* Shared navigation for school-data pages: weather, utilities and overview. */
.category-page .category-tabs.school-data-nav{display:flex;gap:6px;background:#ffffffa6;border:1px solid #fff;border-radius:13px;padding:5px;width:fit-content;max-width:100%;margin:24px 0 28px;box-shadow:none}
.category-page .category-tabs.school-data-nav a{padding:11px 22px;color:#6d7f99;border-radius:9px;font-size:13px;font-weight:600;background:transparent;flex:none;text-decoration:none}
.category-page .category-tabs.school-data-nav a[aria-current=page]{background:#fff;color:#234d7d;box-shadow:0 3px 10px #24426b13}
.category-page .category-tabs.school-data-nav a:hover{background:#ffffffb0;color:#234d7d}
@media(max-width:650px){.category-page .category-tabs.school-data-nav{width:100%;gap:3px}.category-page .category-tabs.school-data-nav a{flex:1;padding:10px 7px;text-align:center;font-size:11px}}