/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram (บันไดด่าน = แผนภาพเส้นทางน้ำ) · tone: utilitarian
 * theme: custom (tuned) · vibe: "เขียวองค์กร ครีมสะอาด อ่านง่าย ใจเย็น" · anchor hue: 157 (CI #055c37)
 * paper: oklch(97.4% 0.011 110) · accent: oklch(41.9% 0.097 157.4) · display: Bai Jamjuree 700 · body: Noto Sans Thai 400
 * axes: light / geometric-sans / chromatic-other · nav: N9 edge-aligned · footer: Ft2 inline · enrichment: none
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * สี ฟอนต์ ระยะ อยู่ใน tokens.css ทั้งหมด — ไฟล์นี้อ้างตัวแปรเท่านั้น
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
}
@media (prefers-color-scheme: dark) { body:not(.is-brand) { font-weight: 350; } } /* หน้าแบรนด์สว่างอย่างเดียว */
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0; }
a { color: var(--color-brand); }
button, input, select { font: inherit; color: inherit; }
.sprite { position: absolute; }
.ic {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---- ปุ่ม: 8 สถานะ ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 44px; padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-ink);
  font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out);
}
.btn-primary { background: var(--color-brand-fill); border-color: var(--color-brand-fill); color: var(--color-brand-ink); }
.btn-icon { width: 44px; padding: 0; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--color-ink-2); }
.btn-danger { color: var(--tone-critical-ink); }
@media (hover: hover) {
  .btn:hover { background: var(--color-paper-2); }
  .btn-primary:hover { background: var(--color-brand-fill-hover); }
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-busy="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[aria-busy="true"] .ic { animation: spin 900ms linear infinite; }
.btn.is-done { color: var(--tone-ok-ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- แถบบน (N9: ชื่อระบบซ้าย · สถานะ · ปุ่มขวา) ---- */
.bar {
  position: sticky; top: 0; z-index: var(--z-bar);
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-2xs) var(--page-gutter);
  padding-top: max(var(--space-2xs), env(safe-area-inset-top));
  background: var(--color-paper);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 44px;
  color: var(--color-brand); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
  white-space: nowrap;
  margin-inline-end: auto;
}
.wordmark .mark { width: 1.6rem; height: 1.6rem; }
.bar-status {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-width: 0;
  font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2);
}
.bar-status .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* จอแคบมาก: สถานะดูได้จากแถบภาพรวมใต้หัวเว็บแทน */
.bar-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (min-width: 26rem) { .bar-status { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } }
.dot {
  width: 0.65rem; height: 0.65rem; flex: none; border-radius: 50%;
  background: var(--tone-dot, var(--tone-off-dot));
}
.bar-actions { display: flex; gap: var(--space-2xs); }
.bar .lbl { display: none; }
.bar .btn { width: 44px; padding: 0; }
@media (min-width: 40rem) {
  .bar .lbl { display: inline; }
  .bar .btn { width: auto; padding: 0 var(--space-sm); }
}

/* ---- มุมขวาบน: บัญชีผู้ใช้ (หน้าพนักงาน/ผู้ดูแล · shared.js mountAccount) ----
 * จอกว้าง: ปุ่มตามสิทธิ์ · ชื่อ · ออกจากระบบ เรียงในแถบ · จอแคบ: รวมเป็นเมนูใต้ปุ่มรูปคน */
.acct { display: flex; align-items: center; gap: var(--space-2xs); flex: none; }
.acct .acct-wide { display: none; }
.acct-name {
  max-width: 14rem; padding-inline-start: var(--space-xs); border-inline-start: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs); line-height: 2.2; color: var(--color-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-out {
  align-items: center; gap: var(--space-3xs); min-height: 44px; padding-inline: var(--space-2xs);
  color: var(--color-ink-2); text-decoration: none; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
@media (hover: hover) { .acct-out:hover { text-decoration: underline; } }
@media (min-width: 64rem) {
  .acct .acct-wide { display: inline-flex; }
  .acct .acct-name { display: block; }
  .acct .acct-menu { display: none; }
}
/* หน้าโครงการมีช่องเลือกโครงการบนแถบ: ปุ่มตามสิทธิ์เหลือแค่ไอคอนจนจอกว้างพอ ช่องเลือกจะได้ไม่ถูกบีบ */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .bar.has-picker .acct .btn.acct-wide { width: 44px; padding: 0; }
  .bar.has-picker .acct .btn.acct-wide span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.acct-menu { position: relative; }
.acct-menu > summary { list-style: none; }
.acct-menu > summary::-webkit-details-marker { display: none; }
.acct-pop {
  position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-2xs)); z-index: calc(var(--z-bar) + 1);
  width: max-content; min-width: 14rem; max-width: calc(100vw - 2 * var(--page-gutter));
  display: grid; padding: var(--space-2xs);
  background: var(--color-surface); color: var(--color-ink);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input);
  box-shadow: 0 12px 28px var(--color-shadow);
}
.acct-who {
  display: grid; padding: var(--space-2xs) var(--space-xs) var(--space-xs); margin-bottom: var(--space-3xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.acct-who b { font-weight: 600; overflow-wrap: anywhere; }
.acct-who span { font-size: var(--text-xs); color: var(--color-muted); }
.acct-pop a {
  display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-xs);
  border-radius: var(--radius-input); color: var(--color-ink); text-decoration: none; white-space: nowrap;
}
.acct-pop a .ic { color: var(--color-brand); }
@media (hover: hover) { .acct-pop a:hover { background: var(--color-paper-2); } }
.acct-pop a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.acct-pop .acct-pop-out { margin-top: var(--space-3xs); border-top: var(--rule-hair) solid var(--color-rule); border-radius: 0 0 var(--radius-input) var(--radius-input); }

/* ---- โทนสถานะ (ใช้ร่วมกันทุกที่: แถบสถานะ ป้าย จุด แถบเตือน) ---- */
[data-tone="ok"]       { --tone-dot: var(--tone-ok-dot);       --tone-bg: var(--tone-ok-bg);       --tone-ink: var(--tone-ok-ink); }
[data-tone="watch"]    { --tone-dot: var(--tone-watch-dot);    --tone-bg: var(--tone-watch-bg);    --tone-ink: var(--tone-watch-ink); }
[data-tone="prepare"]  { --tone-dot: var(--tone-prepare-dot);  --tone-bg: var(--tone-prepare-bg);  --tone-ink: var(--tone-prepare-ink); }
[data-tone="critical"] { --tone-dot: var(--tone-critical-dot); --tone-bg: var(--tone-critical-bg); --tone-ink: var(--tone-critical-ink); }
[data-tone="off"]      { --tone-dot: var(--tone-off-dot);      --tone-bg: var(--tone-off-bg);      --tone-ink: var(--tone-off-ink); }

/* ---- หน้า ---- */
.page {
  max-width: 76rem; margin: 0 auto;
  padding: var(--space-md) var(--page-gutter) var(--space-xl);
  display: grid; gap: var(--space-md);
}
.stamp { font-size: var(--text-xs); color: var(--color-muted); }
.help { font-size: var(--text-xs); color: var(--color-muted); font-weight: 400; }
.empty { color: var(--color-muted); padding: var(--space-lg) 0; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: absolute; z-index: calc(var(--z-bar) + 1); inset-inline-start: var(--space-sm); top: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-input);
  background: var(--color-brand-fill); color: var(--color-brand-ink); font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }
.page:focus { outline: none; }

/* ---- ช่องเลือกโครงการบนแถบหัว (หน้าโครงการ) — เปลี่ยนโครงการได้โดยไม่ต้องเลื่อนขึ้นไปหน้ารวม ---- */
.bar.has-picker .wordmark { margin-inline-end: 0; }
.bar.has-picker .wm-txt { display: none; }
/* จอแคบมาก + มีเมนูบัญชี (หน้าพนักงาน): เหลือแค่โลโก้ ไม่ให้ปุ่มด้านขวาตกขอบ */
@media (max-width: 23.99rem) { .bar:has(.acct:not([hidden])) .wm-txt { display: none; } }
/* หน้าผู้ดูแล: ปุ่มในแถบ 2 ปุ่ม + เมนูบัญชี — จอไม่ถึง 480px ซ่อนชื่อระบบ (เหลือโลโก้ + ป้ายผู้ดูแล) ไม่ให้ปุ่มเพิ่มโครงการ/เมนูบัญชีหลุดขอบจอ */
@media (max-width: 29.99rem) { .bar:has(.bar-actions):has(.acct:not([hidden])) .wm-txt { display: none; } }
@media (min-width: 48rem) { .bar.has-picker .wm-txt { display: inline; } }
.picker {
  position: relative; flex: 1 1 auto; min-width: 0; max-width: 34rem; margin-inline-end: auto;
  display: flex; align-items: center;
  min-height: 44px; padding-inline: var(--space-sm) 0;
  border-radius: var(--radius-pill); background: var(--tone-bg); color: var(--tone-ink);
}
.picker .dot { position: absolute; inset-inline-start: var(--space-sm); pointer-events: none; }
.picker::after {
  content: ""; position: absolute; inset-inline-end: var(--space-sm); top: 50%;
  width: 0.5rem; height: 0.5rem; margin-top: -0.35rem;
  border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); pointer-events: none;
}
.picker select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-width: 0; min-height: 44px;
  padding: 0 calc(var(--space-sm) + var(--space-md)) 0 calc(var(--space-sm) + 0.65rem + var(--space-2xs));
  margin-inline-start: calc(-1 * var(--space-sm));
  border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit;
  font-family: var(--font-display); font-weight: 700; cursor: pointer;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.picker select option, .picker select optgroup { color: var(--color-ink); background: var(--color-surface); font-family: var(--font-body); }
@media (hover: hover) { .picker:hover { filter: brightness(0.97); } }
.picker:has(select:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.picker select:focus-visible { outline: none; }
body.is-solo .bar .picker { display: none; }

/* ---- หน้ารวม: การ์ดโครงการละใบ จัดกลุ่มตามความเร่งด่วน ---- */
.groups { display: grid; gap: var(--space-lg); }
.group { display: grid; gap: var(--space-xs); }
.group-title { font-size: var(--text-md); display: flex; align-items: baseline; gap: var(--space-2xs); }
.count { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
/* เขื่อนใหญ่ปล่อยน้ำ — แถบบนสุดของหน้ารวม */
.dams { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.dams .help { margin: 0; }
.dams-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}
.dam {
  display: grid; align-content: start; gap: 0.15rem; min-width: 0;
  padding: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-surface);
}
.dam[data-tone="prepare"] { border-color: var(--tone-dot); }
.dam-name { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); overflow-wrap: anywhere; }
.dam-q { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--color-ink); }
.dam-sub { font-size: var(--text-xs); color: var(--color-muted); }
.dam[data-tone="prepare"] .dam-extra { color: var(--tone-ink); font-weight: 600; }
.dam[data-tone="off"] .dam-q { color: var(--color-muted); }

/* ---- หน้าโครงการ ---- */
.detail { display: grid; gap: var(--space-md); }

/* ---- การ์ดโครงการ: กรอบเดียว ไม่ซ้อน ---- */
.projects { display: grid; gap: var(--space-lg); }
.proj {
  display: grid; gap: var(--space-md);
  padding: var(--space-md) var(--space-sm);
  background: var(--color-surface);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  scroll-margin-top: calc(var(--space-xl) + var(--space-lg));
}
@media (min-width: 40rem) { .proj { padding: var(--space-md); } }
.proj-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 62rem) {
  .proj-grid { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: var(--space-xl); }
}

/* ฝั่งคำตอบ: ตอนนี้ต้องทำอะไร */
.verdict { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.verdict > * { max-width: 65ch; }
.stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-xs);
  padding: var(--space-sm);
  border-radius: var(--radius-card);
  background: var(--tone-bg); color: var(--tone-ink);
}
.stage .dot { width: 0.9rem; height: 0.9rem; margin-top: var(--space-2xs); }
.stage-label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.25; }
.stage-sub { font-size: var(--text-xs); margin-top: var(--space-3xs); }
.stage-days {
  grid-column: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs);
  margin-top: var(--space-2xs);
}
.stage-days b { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.stage-days span { font-size: var(--text-xs); }

.block-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; margin-bottom: var(--space-2xs); }
.trigger-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3xs) var(--space-2xs); }
.trigger-gap {
  font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--tone-ink, var(--color-ink));
}
/* ฝนและน้ำบนถนนใกล้โครงการ (หน้าพนักงาน) */
.local .block-title { display: flex; align-items: center; gap: var(--space-2xs); }
.local .block-title .ic { color: var(--color-brand); }
.local-head { font-weight: 600; color: var(--color-ink-2); }
.local[data-tone] .local-head { color: var(--tone-ink); }
.local-src { margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-muted); }
.local-src b { color: var(--tone-off-ink); }
.local-mm {
  margin: var(--space-xs) 0 0; display: grid; gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.25rem), 1fr));
}
.local-mm div { padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-input); background: var(--color-mint, var(--color-paper-2)); }
.local-mm dt { font-size: var(--text-xs); color: var(--color-muted); }
.local-mm dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink-2); }
.local-mm .is-key { background: var(--tone-bg); }
.local-mm .is-key dt, .local-mm .is-key dd { color: var(--tone-ink); }
.block-sub { margin-top: var(--space-sm); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.local-road { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.local-road li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2xs); font-size: var(--text-xs); }
.local-road .dot { align-self: center; }
.local-road small { display: block; color: var(--color-muted); }
.local-road a { color: inherit; }
.local-road b { font-weight: 600; white-space: nowrap; color: var(--tone-ink); }
.local .help { margin-top: var(--space-xs); }

/* ฝนคาดการณ์ 7 วัน (กรมอุตุฯ) — ช่องรายวัน ร้อยละของพื้นที่ที่มีฝน · 60% ขึ้นไปเป็นสีเหลือง */
.fc .block-title { display: flex; align-items: center; gap: var(--space-2xs); }
.fc .block-title .ic { color: var(--color-brand); }
.fc-days { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: var(--space-2xs); grid-template-columns: repeat(auto-fill, minmax(min(100%, 5.2rem), 1fr)); }
.fc-days li { display: grid; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-input); background: var(--color-mint, var(--color-paper-2)); font-size: var(--text-xs); color: var(--color-ink-2); }
.fc-days li[data-tone] { background: var(--tone-bg); color: var(--tone-ink); }
.fc-days b { font-weight: 600; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.fc-days span, .fc-days small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-days small { font-size: 0.68rem; color: var(--color-muted); }
.fc-days li[data-tone] small { color: var(--tone-ink); }
.fc-pct { display: block; height: 4px; margin: 2px 0; border-radius: var(--radius-pill); background: var(--color-surface); overflow: hidden; }
.fc-pct > i { display: block; height: 100%; border-radius: inherit; background: var(--color-water); }
.fc-days li[data-tone] .fc-pct > i { background: var(--tone-dot); }
.fc .help { margin-top: var(--space-xs); }
.c-pill .ic { width: 1em; height: 1em; }

.meter { height: 6px; margin-top: var(--space-2xs); border-radius: var(--radius-pill); background: var(--color-rule-2); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--tone-dot, var(--color-muted)); }

/* ตารางระดับ — แถวละจุด ไม่ใช้ <table> จึงไม่ล้นจอมือถือ */
.levels { margin: 0; }
.lv, .levels-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 3.75rem 5.5rem;
  gap: var(--space-2xs); align-items: baseline;
}
.levels-head {
  padding-bottom: var(--space-3xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xs); color: var(--color-muted);
}
.levels-head span { text-align: end; }
.lv { padding: var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.lv dt { min-width: 0; }
.lv dt small { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.lv dd {
  margin: 0; text-align: end; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums;
}
.lv.is-water dt, .lv.is-water dd { color: var(--color-brand); }
.lv dt small.warn-note { color: var(--tone-prepare-ink); }
.lv dt small.ok-note { color: var(--tone-ok-ink); }
.tag-owner { border-color: var(--tone-dot); color: var(--tone-ink); background: var(--tone-bg); }
.todo .checknow {
  padding: var(--space-xs) var(--space-sm); margin-bottom: var(--space-2xs);
  border-radius: var(--radius-input); background: var(--tone-prepare-bg); color: var(--tone-prepare-ink);
  font-weight: 600;
}
.lv.is-key dt, .lv.is-key dd { font-weight: 700; }
.lv .flooded { color: var(--tone-critical-ink); }
.lv.is-event dt, .lv.is-event dd { color: var(--color-ink-2); }
.lv.is-event dt::before { content: "◆ "; color: var(--tone-prepare-dot); font-size: 0.7em; vertical-align: 0.15em; }
.lv .gatelink:active, .linkbtn:active { opacity: 0.7; }
.linkbtn { font-size: var(--text-xs); }
.levels-note { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-2xs); }
.refnote { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-2); }
.refnote summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; color: var(--color-brand); font-weight: 600; }
.refnote p { margin-top: var(--space-3xs); }
.levels-more { margin-top: var(--space-2xs); }

/* น้ำอยู่ตรงไหน — ภาพตัดขวาง + ข้อความสั้น */
.lv-wrap { display: grid; grid-template-columns: 9.75rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
/* จอแคบมาก: ภาพตัดขวางอยู่บน ข้อความอยู่ล่าง */
@media (max-width: 22.5rem) { .lv-wrap { grid-template-columns: minmax(0, 1fr); } .gauge { max-width: 11rem; } }
.lv-text { min-width: 0; }
.lv-key {
  font-family: var(--font-display); font-size: var(--text-md); font-weight: 700; line-height: 1.3;
  color: var(--color-ink); overflow-wrap: anywhere;
}
.lv-key.is-bad, .lv-sub.is-bad { color: var(--tone-critical-ink); }
.lv-sub { margin-top: var(--space-3xs); font-weight: 600; color: var(--color-ink-2); }
.lv-sub.is-peak { font-size: var(--text-xs); font-weight: 400; color: var(--tone-prepare-ink); }
.lv-src { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); overflow-wrap: anywhere; }
.lv-src.is-warn { color: var(--tone-prepare-ink); font-weight: 600; }

.gauge { display: grid; grid-template-columns: 2.1rem 1.75rem minmax(0, 1fr); grid-template-rows: 8.5rem auto; column-gap: 0.35rem; }
.gauge-nums { position: relative; font-size: var(--text-xs); line-height: 1.1; font-variant-numeric: tabular-nums; }
.gauge-nums span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; color: var(--color-muted); }
.gauge-nums .is-water { color: var(--color-water-ink); font-weight: 600; }
.gauge-nums .is-floor { color: var(--color-ink); font-weight: 700; }
.gauge-nums .is-peak { color: var(--tone-prepare-ink); }
.gauge-unit { grid-column: 1 / -1; margin-top: var(--space-3xs); font-size: 0.7rem; color: var(--color-muted); }
.gauge-box {
  position: relative; overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule); border-top: 0; border-radius: 0 0 var(--radius-input) var(--radius-input);
  background: var(--color-paper-2);
}
.gauge-water {
  position: absolute; inset-inline: 0; bottom: 0;
  background: var(--color-water-soft); border-top: 2px solid var(--color-water);
}
.gauge-line { position: absolute; inset-inline: 0; height: 0; border-top: 2px solid var(--color-ink); }
.gauge-line.is-road { border-top-color: var(--color-muted); }
.gauge-line.is-peak { border-top: 2px dotted var(--tone-prepare-dot); }
.gauge-labels { position: relative; font-size: var(--text-xs); line-height: 1.1; }
.gauge-labels span { position: absolute; left: 0; transform: translateY(50%); white-space: nowrap; color: var(--color-ink-2); }
.gauge-labels .is-water { color: var(--color-water-ink); font-weight: 600; }
.gauge-labels .is-floor { color: var(--color-ink); font-weight: 700; }
.gauge-labels .is-road { color: var(--color-muted); }
.gauge-labels .is-peak { color: var(--tone-prepare-ink); }
.levels-block.is-stale .gauge { opacity: 0.45; }

/* เคยเกิดอะไรขึ้นที่นี่ */
.events dl { margin: 0; display: grid; gap: var(--space-2xs); }
.ev { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: var(--space-2xs); }
.ev dt { font-weight: 600; font-size: var(--text-xs); color: var(--color-ink-2); padding-top: 0.1em; }
.ev dd { margin: 0; }
.ev.is-over dd { color: var(--tone-prepare-ink); }
.events .help { margin-top: var(--space-2xs); }

.todo p, .todo li { font-size: var(--text-base); }
.todo ol { margin: 0; padding-inline-start: var(--space-md); display: grid; gap: var(--space-2xs); }
.todo .when { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.todo .next { margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-2); }

.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.notes li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs);
  font-size: var(--text-xs); color: var(--tone-prepare-ink);
}
.notes .ic { margin-top: calc((1lh - 1.15em) / 2); }

.proj-actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }

.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-brand); font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.2em;
}

/* ---- ฝั่งแผนภาพ: บันไดด่าน ---- */
.route { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.zone { display: grid; gap: var(--space-xs); min-width: 0; }
.zone-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs); }
.zone-head h2 { font-size: var(--text-md); }
.zone-path { font-size: var(--text-xs); color: var(--color-muted); }

.ladder { list-style: none; margin: 0; padding: 0; }
/* มือถือก่อน: ป้ายสถานะอยู่ใต้ชื่อด่าน ให้ชื่อได้ความกว้างเต็ม · จอกว้างขึ้นย้ายไปชิดขวา */
.rung {
  position: relative;
  display: grid; grid-template-columns: 2.9rem 1rem minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-2xs); align-items: start;
  padding: var(--space-2xs) var(--space-3xs);
  border-radius: var(--radius-input);
}
.rung-lead, .rung-rail { grid-row: 1 / span 2; }
.rung > .pill { grid-column: 3; grid-row: 2; justify-self: start; }
@media (min-width: 30rem) {
  .rung { grid-template-columns: 3.6rem 1rem minmax(0, 1fr) auto; }
  .rung-lead, .rung-rail { grid-row: auto; }
  .rung > .pill { grid-column: auto; grid-row: auto; }
}
@media (min-width: 40rem) {
  .rung { grid-template-columns: 4.75rem 1.25rem minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-xs); padding-inline: var(--space-2xs); }
}
.rung-lead {
  text-align: end; white-space: pre-line; line-height: 1.3;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs);
  color: var(--color-muted); font-variant-numeric: tabular-nums;
}
.rung-lead small { display: block; font-weight: 400; font-size: inherit; }
.rung-rail { position: relative; display: flex; justify-content: center; height: 100%; }
.rung-rail::before {
  content: ""; position: absolute; top: 0; bottom: calc(-1 * var(--space-2xs)); width: 2px;
  background: var(--color-rule);
}
.rung:first-child .rung-rail::before { top: calc(1lh / 2); }
.rung:last-child .rung-rail::before { bottom: auto; height: calc(1lh / 2); }
.rung-knob {
  position: relative; z-index: 1;
  width: 0.9rem; height: 0.9rem; margin-top: calc((1lh - 0.9rem) / 2); border-radius: 50%;
  border: 2px solid var(--tone-dot); background: var(--color-surface);
}
.rung[data-state="watch"] .rung-knob,
.rung[data-state="breached"] .rung-knob { background: var(--tone-dot); }
.rung[data-state="offline"] .rung-knob,
.rung[data-state="unset"] .rung-knob { border-style: dashed; }
.rung.is-frontier .rung-knob { box-shadow: 0 0 0 4px var(--tone-bg); }
.rung.is-deadline { background: var(--color-brand-soft); }
.rung.is-stale { opacity: 0.6; }
.rung.is-site .rung-knob { border-radius: 3px; }

.rung-body { min-width: 0; display: grid; gap: var(--space-3xs); }
.rung-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-2xs); }
.gatelink {
  background: none; border: 0; padding: 0; text-align: start; cursor: pointer;
  font-weight: 600; color: var(--color-ink);
  text-decoration: underline dotted; text-decoration-color: var(--color-muted);
  text-underline-offset: 0.25em;
}
@media (hover: hover) { .gatelink:hover { color: var(--color-brand); text-decoration-color: currentColor; } }
.tag {
  display: inline-flex; align-items: center;
  padding: 0 var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.6; color: var(--color-muted); white-space: normal; text-wrap: balance;
}
.tag-deadline { border-color: var(--color-brand); color: var(--color-brand); }
.tag-far { border-color: var(--tone-prepare-dot); color: var(--tone-prepare-ink); }
.rung.is-secondary .gatelink { font-weight: 400; color: var(--color-muted); }
.rung.is-secondary .rung-knob { width: 0.65rem; height: 0.65rem; margin-top: calc((1lh - 0.65rem) / 2); border-style: dashed; }

.rung-detail summary {
  cursor: pointer; font-size: var(--text-xs); color: var(--color-ink-2);
  font-variant-numeric: tabular-nums;
}
.rung-detail summary .rise { color: var(--tone-prepare-ink); font-weight: 600; }
.rung-detail p { margin-top: var(--space-3xs); font-size: var(--text-xs); color: var(--color-ink-2); }
.rung-detail p + p { color: var(--color-muted); }
.rung .meter { max-width: 15rem; margin-top: var(--space-3xs); height: 4px; }
.rung-site-text { font-size: var(--text-xs); color: var(--color-muted); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding: 0 var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--tone-bg); color: var(--tone-ink);
  font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.pill::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tone-dot); }
.pill.is-side { background: transparent; border: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); }

.ladder-note { font-size: var(--text-xs); color: var(--color-muted); }
.zone .notes { margin-top: var(--space-2xs); }

/* ---- ประวัติการแจ้งเตือน ---- */
.history { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-xs); }
.history summary {
  display: flex; align-items: center; gap: var(--space-2xs); min-height: 44px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md);
}
.history .count { font-size: var(--text-xs); color: var(--color-muted); font-family: var(--font-body); font-weight: 600; }
.alerts { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-sm); max-height: 30rem; overflow-y: auto; }
.al { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3xs) var(--space-xs); }
.al .dot { margin-top: calc((1lh - 0.65rem) / 2); }
.al-title { font-weight: 600; }
.al-detail, .al-time { font-size: var(--text-xs); color: var(--color-muted); }
.al-time { font-variant-numeric: tabular-nums; }

/* ---- ท้ายหน้า (Ft2) ---- */
.foot {
  max-width: 76rem; margin: 0 auto;
  padding: var(--space-md) var(--page-gutter) max(var(--space-lg), env(safe-area-inset-bottom));
  border-top: var(--rule-hair) solid var(--color-rule);
  display: grid; gap: var(--space-2xs);
  font-size: var(--text-xs); color: var(--color-muted);
}
.foot .bad { color: var(--tone-critical-ink); font-weight: 600; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-md); }
.foot-links { display: inline-flex; flex-wrap: wrap; gap: 0 var(--space-md); }
.foot-admin { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted); white-space: nowrap; }
@media (hover: hover) { .foot-admin:hover { color: var(--color-brand); } }
.auto { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; width: fit-content; cursor: pointer; }
.auto input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-brand-fill); }

/* ---- หน้าผู้ดูแล ---- */
.wm-role {
  padding: 0 var(--space-2xs); border-radius: var(--radius-pill);
  background: var(--color-brand-soft); color: var(--color-brand);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
}
a.btn { text-decoration: none; }
.adm-head { display: grid; gap: var(--space-3xs); }
.adm-head h1 { font-size: var(--text-lg); }
.adm-section { display: grid; gap: var(--space-xs); }
.adm-section h2 { font-size: var(--text-md); display: flex; align-items: baseline; gap: var(--space-2xs); }
.adm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.adm-row {
  display: grid; gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-surface);
}
.adm-main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2xs) var(--space-xs); align-items: start; }
.adm-main > .dot { margin-top: calc((1lh - 0.65rem) / 2); }
.adm-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
@media (min-width: 52rem) {
  .adm-main { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .adm-main > .dot { margin-top: 0; }
  .adm-actions { grid-column: auto; justify-content: flex-end; }
}
.adm-name { overflow-wrap: anywhere; }
.adm-name b { font-family: var(--font-display); font-size: var(--text-md); }
.adm-name span { color: var(--color-ink-2); }
.adm-meta { font-size: var(--text-xs); color: var(--color-muted); }
.adm-meta .pill { margin-inline-end: var(--space-3xs); }
.adm-site { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-2xs); }
.adm-site summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.facts { margin: var(--space-2xs) 0 0; display: grid; gap: var(--space-2xs); }
.facts div { display: grid; gap: var(--space-3xs) var(--space-sm); }
@media (min-width: 40rem) { .facts div { grid-template-columns: 12rem minmax(0, 1fr); } }
.facts dt { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.facts dd { margin: 0; font-size: var(--text-xs); color: var(--color-ink); overflow-wrap: anywhere; }

/* ---- แจ้งเตือนลอย (เฉพาะเมื่อทำไม่สำเร็จ) ---- */
.toast {
  position: fixed; z-index: var(--z-toast);
  inset-inline: var(--page-gutter); bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  max-width: 34rem; margin-inline: auto;
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-input);
  background: var(--color-ink); color: var(--color-paper);
  font-size: var(--text-xs);
}

/* ---- หน้าต่าง (ฟอร์ม / แผนที่) ---- */
.sheet {
  position: fixed; inset: 0; margin: auto;
  width: min(46rem, calc(100% - var(--space-sm)));
  height: fit-content; max-height: min(92dvh, 60rem);
  padding: 0; overflow: auto;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-surface); color: var(--color-ink);
}
.sheet-wide { width: min(72rem, calc(100% - var(--space-sm))); }
.sheet::backdrop { background: var(--color-backdrop); }
/* หน้าต่างเปิดอยู่: ปิดได้ด้วยปุ่มปิดเท่านั้น (คลิกนอกหน้าต่างไม่ปิด) · หน้าหลังไม่เลื่อนตามล้อเมาส์ · กันหน้ากระตุกตอนแถบเลื่อนหาย */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
.sheet { overscroll-behavior: contain; }
.sheet-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md);
  background: var(--color-surface); border-bottom: var(--rule-hair) solid var(--color-rule-2);
}
.sheet-head h2 { font-size: var(--text-md); padding-top: var(--space-2xs); }
.sheet-body { padding: var(--space-md); display: grid; gap: var(--space-md); }
.routemap { height: min(64dvh, 40rem); }
.map-legend { padding: var(--space-xs) var(--space-md) var(--space-sm); }

/* ---- กราฟระดับน้ำย้อนหลัง ---- */
.chartbtn {
  display: inline-flex; align-items: center; gap: 0.2rem; min-height: 28px;
  padding: 0 var(--space-2xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-brand); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer;
}
.chartbtn .ic, .lv-links .ic { width: 0.95rem; height: 0.95rem; }
@media (hover: hover) { .chartbtn:hover { border-color: var(--color-brand); } }
.chartbtn:active { transform: translateY(1px); }
.chartbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lv-links { margin-top: var(--space-2xs); }
.lv-links .linkbtn { display: inline-flex; align-items: center; gap: 0.3rem; }
.chart-body { padding: var(--space-sm) var(--space-md) var(--space-md); display: grid; gap: var(--space-xs); }
.seg { display: inline-flex; justify-self: start; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); overflow: hidden; }
.seg button {
  min-height: 36px; padding: 0 var(--space-sm); border: 0; background: transparent; color: var(--color-ink-2);
  font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; white-space: nowrap;
}
.seg button + button { border-left: var(--rule-hair) solid var(--color-rule); }
.seg button[aria-pressed="true"] { background: var(--color-brand-fill); color: var(--color-brand-ink); }
.seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.chart { min-height: 240px; min-width: 0; }
.chart-empty { padding: var(--space-lg) 0; text-align: center; color: var(--color-muted); }
.chart-svg { display: block; max-width: 100%; height: auto; touch-action: pan-y; font-family: var(--font-body); user-select: none; }
.chart-svg .grid { stroke: var(--color-rule-2); stroke-width: 1; }
.chart-svg .axis { fill: var(--color-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-svg .area { fill: var(--color-water-soft); opacity: 0.55; }
.chart-svg .line-gap { stroke: var(--color-water); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.7; }
.chart-svg .line { fill: none; stroke: var(--color-water); stroke-width: 2; stroke-linejoin: round; }
.chart-svg .last { fill: var(--color-water); stroke: var(--color-surface); stroke-width: 1.5; }
.chart-svg .ref { stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart-svg .ref.is-floor { stroke-dasharray: none; }
.chart-svg .ref-tag { font-size: 11px; font-weight: 600; paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; }
.chart-svg .ref.is-watch { stroke: var(--tone-watch-dot); }
.chart-svg .ref.is-breach { stroke: var(--tone-critical-dot); }
.chart-svg .ref.is-bank { stroke: var(--color-muted); }
.chart-svg .ref.is-road { stroke: var(--color-ink-2); }
.chart-svg .ref.is-floor { stroke: var(--color-ink); }
.chart-svg .ref-tag.is-watch { fill: var(--tone-watch-ink); }
.chart-svg .ref-tag.is-breach { fill: var(--tone-critical-ink); }
.chart-svg .ref-tag.is-bank { fill: var(--color-muted); }
.chart-svg .ref-tag.is-road { fill: var(--color-ink-2); }
.chart-svg .ref-tag.is-floor { fill: var(--color-ink); }
.chart-svg .hit { fill: transparent; cursor: crosshair; }
.chart-svg .cursor line { stroke: var(--color-ink-2); stroke-width: 1; }
.chart-svg .cursor circle { fill: var(--color-water); stroke: var(--color-surface); stroke-width: 2; }
.chart-svg .cursor text { fill: var(--color-ink); font-size: 12px; font-weight: 600; paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; }

/* ---- ฟอร์ม ---- */
.ff { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.field { display: grid; gap: var(--space-3xs); align-content: start; font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.field-wide { grid-column: 1 / -1; }
.field input, .field select {
  min-height: 44px; padding: 0 var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input);
  background: var(--color-paper); color: var(--color-ink);
  font-size: var(--text-base); font-weight: 400;
  outline: 2px solid transparent; outline-offset: 1px;
}
@media (hover: hover) { .field input:hover, .field select:hover { background: var(--color-paper-2); } }
.field input:focus-visible, .field select:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid="true"] { border-color: var(--tone-critical-dot); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.zonehint.is-ok { color: var(--tone-ok-ink); }
.zonehint.is-warn { color: var(--tone-prepare-ink); }
fieldset {
  margin: 0; padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card);
  display: grid; gap: var(--space-sm);
}
legend { padding: 0 var(--space-2xs); font-family: var(--font-display); font-weight: 700; }
.groundnow:empty { display: none; }
.groundnow { display: grid; gap: var(--space-3xs); }
.groundnow .chk { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 44px; color: var(--color-ink-2); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.form-msg { min-height: 1lh; font-size: var(--text-xs); color: var(--tone-critical-ink); }
.form-msg.is-busy { color: var(--color-muted); }

/* ---- แผนที่ ---- */
.leaflet-container { font-family: var(--font-body); background: var(--color-paper-2); }
.gate-tip { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; padding: 0 var(--space-2xs); }
.proj-pin { color: var(--color-brand); }
.proj-pin svg { width: 28px; height: 28px; fill: var(--color-surface); stroke: currentColor; stroke-width: 2.2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---- เข้าสู่ระบบของพนักงาน ---- */
/* ---- หน้าเข้าสู่ระบบของพนักงาน — แบบเดียวกับระบบอื่นของบริษัท (PEACE PMS) ----
 * จอกว้าง: ซ้ายเขียวไล่เฉด + โลโก้ + ชื่อระบบ · ขวาพื้นเทาอ่อน กล่องเลือกวิธีเข้าสู่ระบบ
 * จอแคบ: แถบแบรนด์ย่อเหลือโลโก้กับชื่อระบบอยู่บน กล่องเข้าสู่ระบบต่อด้านล่าง
 * ใช้ทั้ง /login และ /login/key (รหัสผู้ดูแล) */
body.is-login { background: var(--login-bg); }
.login { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
@media (min-width: 56rem) { .login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; } }

.login-brand {
  display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: var(--space-md);
  padding: var(--space-lg) var(--page-gutter) var(--space-sm);
  background:
    radial-gradient(90% 60% at 72% 18%, var(--login-glow), transparent 70%),
    linear-gradient(135deg, var(--login-from), var(--login-mid) 55%, var(--login-to));
  color: var(--color-on-brand); text-align: center;
}
@media (min-width: 56rem) { .login-brand { padding: var(--space-xl) var(--space-lg) var(--space-md); } }
.login-brand-in { align-self: center; display: grid; justify-items: center; gap: var(--space-2xs); max-width: 36rem; }
.login-logo { width: clamp(64px, 8vw, 104px); height: auto; margin-bottom: var(--space-2xs); }
.login-sys { font-size: clamp(1.9rem, 1rem + 2.2vw, 2.9rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.login-sys-en { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--color-on-brand-2); }
.login-rule { width: 4.5rem; height: 0; margin: var(--space-sm) 0; border: 0; border-top: var(--rule-hair) solid var(--color-on-brand-2); opacity: 0.6; }
.login-th { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); font-weight: 700; }
.login-desc { max-width: 34ch; color: var(--color-on-brand-2); }
.login-copy { font-size: 0.75rem; color: var(--color-on-brand-2); }
/* จอแคบ: ย่อแถบแบรนด์ ไม่ให้ดันกล่องเข้าสู่ระบบลงไปไกล */
@media (max-width: 55.99rem) {
  .login-rule, .login-th, .login-desc, .login-copy { display: none; }
}

.login-panel { display: grid; place-items: start center; padding: var(--space-lg) var(--page-gutter) var(--space-xl); }
@media (min-width: 56rem) { .login-panel { place-items: center; padding-block: var(--space-xl); } }
.login-panel-in { width: min(100%, 31rem); display: grid; gap: var(--space-2xs); }
.login-panel h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.7rem); font-weight: 800; line-height: 1.2; color: var(--login-title); }
.login-sub { margin-bottom: var(--space-md); color: var(--color-ink-2); }
.login-box { display: grid; gap: var(--space-sm); padding: var(--space-sm) clamp(var(--space-sm), 4vw, var(--space-md)) var(--space-md); border-radius: 12px; background: var(--login-box); }
.login-tab {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  padding: var(--space-2xs) 0 var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule);
  font-weight: 700; color: var(--login-title);
}
.login-tab .ic { width: 1.25em; height: 1.25em; }
.login-ms {
  display: flex; align-items: center; justify-content: center; gap: var(--space-xs);
  width: 100%; min-height: 56px; padding: 0 var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule); border-radius: 10px;
  background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 2px var(--color-shadow);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .login-ms:hover { border-color: var(--color-brand); background: var(--color-mint-2); } }
.login-ms:active { transform: translateY(1px); }
.login-ms:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.login-ms:disabled { opacity: 0.6; cursor: progress; transform: none; }
.login-ms span { white-space: nowrap; font-size: clamp(0.9rem, 0.75rem + 0.8vw, 1rem); }
.ms-logo { width: 1.25rem; height: 1.25rem; flex: none; }
.ms-r { fill: var(--color-ms-red); } .ms-g { fill: var(--color-ms-green); } .ms-b { fill: var(--color-ms-blue); } .ms-y { fill: var(--color-ms-yellow); }
.login-note { text-align: center; font-size: 0.75rem; color: var(--color-ink-2); }
.login-status { text-align: center; font-size: var(--text-xs); color: var(--color-muted); }
.login-status:empty { display: none; }
.login-err { text-align: center; font-size: var(--text-xs); font-weight: 600; color: var(--tone-critical-ink); }
.login-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--space-md); margin-top: var(--space-xs); font-size: var(--text-xs); }
.login-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-brand); }
/* รหัสผู้ดูแล (/login/key) */
.login-field { display: grid; gap: var(--space-3xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.login-field input {
  min-height: 48px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: 10px;
  background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: var(--text-base); font-weight: 400;
}
.login-field input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.login-submit {
  min-height: 52px; border: 0; border-radius: 10px; background: var(--color-brand-fill); color: var(--color-brand-ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .login-submit:hover { background: var(--color-brand-fill-hover); } }
.login-submit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---- กำหนดสิทธิ์ ---- */
.role-legend { margin: 0; display: grid; gap: var(--space-2xs); }
.role-legend div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-2xs); }
.role-legend dt { font-weight: 700; }
.role-legend dd { margin: 0; color: var(--color-ink-2); font-size: var(--text-xs); padding-top: 0.15em; }
@media (max-width: 30rem) { .role-legend div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.role-field { min-width: 12rem; }

/* =====================================================================
 * หน้าลูกค้า (/) และหน้าพนักงาน (/staff) — หน้าตาแบบเว็บบริษัท (peaceandliving.co.th)
 * แถบหัวเรื่องเขียว CI ขอบล่างเป็นคลื่นขาว · หัวข้อกลางหน้าสีเทา · การ์ดขาวเงานุ่มมุมโค้งทแยง (มุมเล็ก 4px + มุมใหญ่ 40px)
 * พื้นมินต์สำหรับกล่องรอง · ปุ่มเส้นเขียวมุมเล็กพร้อมลูกศร · ท้ายหน้าเขียวเต็มความกว้าง · Noto Sans Thai ทั้งหน้า
 * สีทั้งหมดมาจาก tokens.css (body.is-brand)
 * ===================================================================== */
.is-brand .bar { background: var(--color-brand-fill); border-bottom: 0; color: var(--color-on-brand); }
.is-brand .wordmark { color: var(--color-on-brand); }
.is-brand .bar .btn { background: transparent; border-color: var(--color-on-brand-2); color: var(--color-on-brand); border-radius: var(--radius-sm); }
@media (hover: hover) { .is-brand .bar .btn:hover { background: var(--color-brand-fill-hover); } }
.is-brand .picker { border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); }
.is-brand .page { padding-top: var(--space-sm); gap: var(--space-xl); }
.is-brand .btn { border-radius: var(--radius-sm); }

/* แถบหัวเรื่อง */
.c-hero {
  position: relative;
  padding: var(--space-lg) var(--page-gutter) calc(var(--space-xl) + clamp(2rem, 5vw, 4.5rem));
  background: var(--color-brand-fill); color: var(--color-on-brand);
}
.c-hero-in { max-width: 76rem; margin: 0 auto; display: grid; gap: var(--space-xs); justify-items: start; }
.c-kicker { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--color-on-brand-2); }
.c-title {
  font-size: clamp(1.8rem, 1.25rem + 2.4vw, 2.9rem); font-weight: 700; line-height: 1.25;
  color: var(--color-on-brand); max-width: 22ch;
}
.c-lead { max-width: 46ch; color: var(--color-on-brand-2); }
.c-pills, .c-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.c-pill {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 30px;
  padding: 0 var(--space-xs); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--tone-ink); font-size: var(--text-xs); font-weight: 600;
}
.c-chips a {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 40px;
  padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-on-brand-2); border-radius: var(--radius-sm);
  color: var(--color-on-brand); text-decoration: none; font-size: var(--text-xs); font-weight: 600; white-space: nowrap;
}
.c-chips a span { color: var(--color-on-brand-2); font-weight: 400; }
@media (hover: hover) { .c-chips a:hover { background: var(--color-brand-fill-hover); } }
.c-stamp { font-size: var(--text-xs); color: var(--color-on-brand-2); }
/* อัปเดตล่าสุดล้ม / ข้อมูลเก่า: ป้ายบนแถบหัวเรื่อง ให้รู้ว่ากำลังดูข้อมูลเมื่อไร */
.c-alert {
  display: inline-flex; align-items: flex-start; gap: var(--space-2xs); max-width: 60ch;
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm);
  background: var(--tone-prepare-bg); color: var(--tone-prepare-ink); font-size: var(--text-xs); font-weight: 600;
}
.c-alert .ic { flex: none; margin-top: 0.2em; }
.c-back {
  display: inline-flex; align-items: center; gap: var(--space-3xs); min-height: 40px;
  color: var(--color-on-brand); text-decoration: none; font-size: var(--text-xs); font-weight: 600;
}
.c-wave { position: absolute; inset: auto 0 -1px; width: 100%; height: clamp(2rem, 5vw, 4.5rem); fill: var(--color-paper); }

/* หัวข้อกลางหน้า */
.c-head { display: grid; justify-items: center; gap: var(--space-3xs); text-align: center; margin-bottom: var(--space-md); }
.c-h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 600; color: var(--color-ink-2); }
.c-h2-sub { font-size: var(--text-xs); color: var(--color-muted); }
.c-group { scroll-margin-top: 5rem; }
.is-brand .groups { gap: var(--space-xl); }

/* น้ำระบายจากเขื่อน: กล่องมินต์มุมโค้งทแยง */
.is-brand .dams {
  margin: 0 0 var(--space-xl); padding: var(--space-lg) var(--space-sm);
  background: var(--color-mint); border-radius: var(--radius-sm) var(--radius-curve) var(--radius-sm) var(--radius-curve);
}
@media (min-width: 40rem) { .is-brand .dams { padding: var(--space-lg) var(--space-md); } }
.is-brand .dams .group-title { flex-direction: column; align-items: center; gap: var(--space-3xs); text-align: center; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 600; color: var(--color-ink-2); }
.is-brand .dams .help { text-align: center; max-width: 70ch; justify-self: center; }
.is-brand .dam { border: 0; border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 20px; box-shadow: 0 6px 18px var(--color-shadow); }
.is-brand .dam[data-tone="prepare"] { box-shadow: 0 0 0 2px var(--tone-dot), 0 6px 18px var(--color-shadow); }
.is-brand .dam-q { color: var(--color-brand); font-weight: 600; }

/* การ์ดโครงการ */
.c-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-md);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}
.c-card {
  position: relative; display: grid; grid-template-rows: auto 1fr; height: 100%;
  color: var(--color-ink); text-decoration: none; background: var(--color-surface);
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-curve);
  box-shadow: 0 10px 28px var(--color-shadow); overflow: hidden;
  transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .c-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px var(--color-shadow); } }
.c-card:active { transform: translateY(0); }
.c-card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.c-card-top { position: relative; display: block; height: 7rem; background: var(--tone-bg); }
.c-card-waves { position: absolute; inset: 0.75rem 0 1.5rem; width: 100%; height: auto; fill: none; stroke: var(--tone-dot); stroke-width: 2; stroke-linecap: round; opacity: 0.6; }
.c-tag {
  position: absolute; top: var(--space-xs); left: var(--space-xs);
  padding: 0.1rem var(--space-2xs); border-radius: 2px;
  background: var(--tone-ink); color: var(--color-on-brand); font-size: var(--text-xs); font-weight: 600;
}
.c-card-body {
  position: relative; display: grid; align-content: start; gap: var(--space-3xs);
  margin-top: -1.75rem; padding: var(--space-md) var(--space-md) var(--space-md);
  background: var(--color-surface); border-top-right-radius: var(--radius-curve);
}
.c-card-name { font-size: var(--text-md); font-weight: 600; line-height: 1.35; color: var(--color-ink-2); overflow-wrap: anywhere; }
.c-card-area { font-size: var(--text-xs); color: var(--color-muted); }
.c-rows { display: grid; gap: var(--space-3xs); margin-block: var(--space-xs) var(--space-2xs); }
.c-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-ink-2); }
.c-row .ic { color: var(--color-brand); }
.c-row b { color: var(--color-brand); font-weight: 600; white-space: nowrap; }
.c-row b.is-bad { color: var(--tone-critical-ink); }
.c-card-k { font-size: var(--text-xs); color: var(--color-muted); }
.c-card-v { font-size: var(--text-lg); font-weight: 600; line-height: 1.2; color: var(--color-brand); }
.c-est { display: inline-block; padding: 0 var(--space-3xs); border-radius: 2px; background: var(--color-mint); color: var(--color-ink-2); font-size: 0.7rem; }
/* หน้าพนักงาน: รหัสโครงการเหนือชื่อ (ตำแหน่งเดียวกับชื่อแบรนด์บนการ์ดของเว็บบริษัท) */
.c-card-code { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--color-brand); }

/* หน้าโครงการ (ลูกค้าและพนักงาน) */
.is-brand .c-proj { padding: 0; background: none; border: 0; }
.c-panel-k { font-size: var(--text-xs); font-weight: 600; color: var(--tone-ink); }
.is-brand .c-statuscard { border-radius: var(--radius-sm) var(--radius-curve) var(--radius-sm) var(--radius-sm); }
.is-brand .levels-block {
  padding: var(--space-md) var(--space-sm); background: var(--color-surface);
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-curve); box-shadow: 0 10px 28px var(--color-shadow);
}
@media (min-width: 40rem) { .is-brand .levels-block { padding: var(--space-md); } }
.is-brand .route {
  padding: var(--space-md) var(--space-sm); background: var(--color-mint);
  border-radius: var(--radius-curve) var(--radius-sm) var(--radius-curve) var(--radius-sm);
}
@media (min-width: 40rem) { .is-brand .route { padding: var(--space-md); } }
.is-brand .zone h2 { font-weight: 600; color: var(--color-ink-2); }
.c-btn-line { border-color: var(--color-brand); background: transparent; color: var(--color-brand); }
@media (hover: hover) { .c-btn-line:hover { background: var(--color-mint); } }

/* หน้าโครงการของพนักงาน: งานของทีมเป็นการ์ดขาวเงานุ่มแบบเดียวกับกล่อง "น้ำอยู่ตรงไหน" · ข้อควรระวังเป็นกล่องสีเตือน */
.is-brand .verdict > .trigger,
.is-brand .verdict > .local,
.is-brand .verdict > .fc,
.is-brand .verdict > .todo,
.is-brand .verdict > .events {
  padding: var(--space-md) var(--space-sm); background: var(--color-surface);
  border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) var(--radius-curve); box-shadow: 0 10px 28px var(--color-shadow);
}
@media (min-width: 40rem) { .is-brand .verdict > :is(.trigger, .local, .fc, .todo, .events) { padding: var(--space-md); } }
.is-brand .verdict > .local[data-tone] { box-shadow: 0 0 0 2px var(--tone-dot), 0 10px 28px var(--color-shadow); }
.is-brand .verdict > .notes {
  padding: var(--space-sm); background: var(--tone-prepare-bg);
  border-radius: var(--radius-sm) var(--radius-curve) var(--radius-sm) var(--radius-sm);
}
.is-brand .todo .checknow { border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 20px; }

/* หน้าพนักงาน: สถานะด่วนสุดบนแถบเขียว · ประวัติการแจ้งเตือนเป็นกล่องมินต์ */
.is-brand .bar-status { color: var(--color-on-brand); }
@media (min-width: 26rem) {
  .is-brand .bar-status { min-height: 30px; padding: 0 var(--space-xs); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--tone-ink); }
}
.is-brand .history {
  border-top: 0; padding: var(--space-2xs) var(--space-sm) var(--space-sm); background: var(--color-mint);
  border-radius: var(--radius-curve) var(--radius-sm) var(--radius-curve) var(--radius-sm);
}
@media (min-width: 40rem) { .is-brand .history { padding-inline: var(--space-md); } }
.is-brand .history summary { font-weight: 600; color: var(--color-ink-2); }
.is-brand .alerts { padding-inline-end: var(--space-2xs); }

/* ท้ายหน้าเขียวเต็มความกว้าง */
.is-brand .foot {
  max-width: none; margin: var(--space-lg) 0 0;
  padding: var(--space-lg) max(var(--page-gutter), calc((100% - 76rem) / 2 + var(--page-gutter))) max(var(--space-lg), env(safe-area-inset-bottom));
  border-top: 0; border-radius: var(--radius-curve) 0 0 0;
  background: var(--color-brand-fill); color: var(--color-on-brand-2);
}
.is-brand .foot .bad { color: var(--color-on-brand); }
.is-brand .auto { color: var(--color-on-brand); }
.is-brand .auto input { accent-color: var(--color-on-brand); }
.is-brand .foot-admin { color: var(--color-on-brand); }
/* มุมขวาบนบนแถบเขียว */
.is-brand .acct-name { color: var(--color-on-brand-2); border-color: var(--color-on-brand-2); }
.is-brand .acct-out { color: var(--color-on-brand); }
.is-brand .acct-pop { border: 0; border-radius: var(--radius-sm) var(--radius-sm) var(--radius-sm) 20px; }
.is-brand .acct-pop a { border-radius: var(--radius-sm); }
@media (hover: hover) { .is-brand .foot-admin:hover { color: var(--color-on-brand); text-decoration: underline; } }