/* css/base.css · ฐานของระบบออกแบบ (lane U1 · 4-design/app-redesign/DESIGN-TOKENS.md §1–§5 · §8)
   สีทั้งหมดเป็นตัวแปรจาก /static/themes.css (สร้างจาก ui-themes.yaml) · ไม่มีสีเขียนตรง (TestAppCSSUsesTokensOnly ตรวจทุกไฟล์ CSS)
   ลำดับโหลด: themes.css → app.css (ชิ้นส่วนเดิม) → base.css → shell.css → help.css → screens-core.css → screens-modules.css
   ค่าที่ไม่ใช่สี (มุมโค้ง · ฟอนต์ · ขนาดโครง) อยู่ที่ :root ของไฟล์นี้ */

:root {
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  /* ฟอนต์ที่ฝัง (internal/platform/webfont · @font-face อยู่ใน themes.css) · ตัวสำรองของเครื่องมาทีหลัง */
  --font-sans: "Anuphan", "Noto Sans Thai", "Leelawadee UI", "Thonburi", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Anuphan", ui-monospace, "SF Mono", Menlo, monospace;
  --font-wordmark: "IBM Plex Sans", "Anuphan", system-ui, sans-serif;
  /* โครงหน้า */
  --sb-w: 248px;
  --sb-w-rail: 64px;
  --top-h: 56px;
  --ctl-h: 36px;
  --ctl-h-sm: 30px;
  --ctl-h-lg: 44px;
  font-family: var(--font-sans);
}

/* ── ฐาน ── */
html { -webkit-text-size-adjust: 100%; }
body { font: 400 14px/1.6 var(--font-sans); font-feature-settings: "tnum"; background: var(--bg); color: var(--ink); }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.45; font-weight: 600; } /* สระบน + วรรณยุกต์ซ้อนไม่ชนบรรทัดบน (DESIGN-TOKENS §1.3) */
h1 { font-size: 22px; letter-spacing: -.003em; }
:lang(th) h1 { letter-spacing: 0; }
.mono, code, kbd { font-family: var(--font-mono); }
.mono { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.vh, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* วงโฟกัส (DESIGN-TOKENS §8): ทุกชิ้น · สี --ring (≥ 3:1 บนทุกพื้น · contrast_test) */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
main:focus, main:focus-visible { outline: none; }

/* ── ไอคอน (web/static/icons.svg · {{icon "…"}}) · เส้น 24 · stroke 1.75 · ปลายมน ── */
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico.s14 { width: 14px; height: 14px; }
.ico.s16 { width: 16px; height: 16px; }
.ico.s20 { width: 20px; height: 20px; }
.ico.s24 { width: 24px; height: 24px; }
.ico.g { width: 9px; height: 9px; fill: currentColor; stroke: none; }

kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; font: 500 12px/1 var(--font-mono); color: var(--muted); background: var(--surf); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm); white-space: nowrap; }

/* ── ปุ่ม (สูง 36 · sm 30 · lg 44 · มุม 8) ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ctl-h); padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--input); background: var(--surf); color: var(--ink2); font: 500 13.5px/1.3 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--surf2); color: var(--ink); }
.btn-primary, .btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.btn-primary:hover, .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--fg); }
.btn.ghost:hover { background: var(--sel); }
.btn.sm { min-height: var(--ctl-h-sm); padding: 0 10px; font-size: 12.5px; gap: 6px; }
.btn.lg { min-height: var(--ctl-h-lg); padding: 0 18px; font-size: 15px; border-radius: 10px; }
.btn.danger { color: var(--p1-fg); border-color: var(--p1-fg); }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }

.iconbtn { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--ink2); cursor: pointer; position: relative; flex: none; text-decoration: none; padding: 0; }
.iconbtn:hover { background: var(--surf2); color: var(--ink); }
.helpbtn { border-color: var(--input); font: 600 15px/1 var(--font-sans); color: var(--fg); }
.helpbtn:hover, .helpbtn[aria-expanded="true"] { background: var(--soft); border-color: var(--brand); color: var(--fg); }
/* ตัวเลขแจ้งเตือนบนวงพื้น (ขาว/เข้มบน --p1 · on_p1 ≥ 4.5:1) */
.dotn { position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; margin: 0; padding: 0 4px; border-radius: var(--r-pill); background: var(--p1); color: var(--on-p1); font: 600 12px/18px var(--font-mono); text-align: center; box-shadow: 0 0 0 2px var(--surf); }
.dotn:empty { display: none; }

/* กลุ่มปุ่มสลับ (ไทย|EN · ☀|☾) */
.toggle { display: inline-flex; align-items: stretch; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--surf2); min-height: 34px; margin: 0; flex: none; }
.toggle button, .toggle a { display: inline-grid; place-items: center; min-width: 34px; min-height: 28px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 500 12.5px/1 var(--font-sans); cursor: pointer; text-decoration: none; }
.toggle button:hover, .toggle a:hover { color: var(--ink); }
.toggle [aria-pressed="true"], .toggle [aria-current="true"] { background: var(--surf); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }

/* ตัวนับ (pill · mono) */
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); font: 500 12px/1 var(--font-mono); background: var(--surf2); color: var(--ink2); }
.count:empty { display: none; }
.count.alert { background: var(--p1-bg); color: var(--p1-fg); }

.av { width: 28px; height: 28px; border-radius: 50%; background: var(--soft); color: var(--fg); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; flex: none; line-height: 1; }

/* การ์ด (มุม 12 · เงา 1) */
.card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 14px 16px; }

/* ══════════ แบรนด์: lockup = สัญลักษณ์ + [wordmark / by + สัญลักษณ์ผู้พัฒนา + ชื่อ] (DESIGN-TOKENS §5) ══════════
   สีโลโก้มาจาก token --logo-ink/--logo-green · --ai-ink/--ai-blue (สีน้ำเงินอยู่ในสัญลักษณ์เท่านั้น) · ไม่มี style attribute ใน SVG */
.bm-ink { fill: var(--logo-ink); }
.bm-acc { fill: var(--logo-green); }
.vm-ink { fill: var(--ai-ink); }
.vm-acc { fill: var(--ai-blue); }
.lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); min-width: 0; }
.lockup .mk { width: 21px; height: 32px; flex: none; }
.lockup .tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* wordmark/byline เป็นส่วนของโลโก้ (logotype · WCAG 1.4.3 ยกเว้น) · byline ≤ 0.65 เท่าของ wordmark (brand.yaml) */
.wm { font: 600 15px/1 var(--font-wordmark); letter-spacing: .2em; color: var(--logo-ink); margin-right: -.2em; white-space: nowrap; }
.by { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; line-height: 1; color: var(--muted); white-space: nowrap; }
.by .am { width: 13px; height: 10px; flex: none; }
.by b { font: 600 9.5px/1 var(--font-wordmark); letter-spacing: .12em; color: var(--ink2); }
.by .bw { font-family: var(--font-sans); font-weight: 400; }
/* ขนาด: sm (แถบบน ledger · ท้าย kiosk/พอร์ทัล) · md (หัวหน้าต่างเกี่ยวกับระบบ) · xl (หน้า login) */
.lockup-sm { gap: 8px; }
.lockup-sm .mk { width: 17px; height: 26px; }
.lockup-sm .wm { font-size: 13px; }
.lockup-sm .tx { gap: 2px; }
.lockup-md .mk { width: 32px; height: 50px; }
.lockup-md .wm { font-size: 24px; }
.lockup-md .tx { gap: 6px; }
.lockup-md .by { font-size: 12px; gap: 6px; }
.lockup-md .by .am { width: 16px; height: 12px; }
.lockup-md .by b { font-size: 11px; }
.lockup-xl { gap: 22px; }
.lockup-xl .mk { width: 58px; height: 90px; }
.lockup-xl .wm { font-size: 44px; }
.lockup-xl .tx { gap: 12px; }
.lockup-xl .by { font-size: 14px; gap: 8px; }
.lockup-xl .by .am { width: 23px; height: 17px; }
.lockup-xl .by b { font-size: 13px; }
.lockup-mark { gap: 0; }

/* โลโก้เต็มผู้พัฒนา: สว่าง/มืดตามโหมด (system = ตามเครื่อง) */
.vl { display: inline-flex; flex: none; }
.vl img { display: block; width: auto; height: 48px; }
.vl-dark { display: none; }
[data-mode="dark"] .vl-light { display: none; }
[data-mode="dark"] .vl-dark { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  [data-mode="system"] .vl-light { display: none; }
  [data-mode="system"] .vl-dark { display: inline-flex; }
}

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

/* ดอกจันของช่องบังคับอยู่บรรทัดเดียวกับชื่อช่องในทุกฟอร์ม (M5-TESTER UX-1 · แก้ที่เดียว):
   ป้ายที่เป็น grid (.form · .inline-form · .cs-act-form …) เคยวาง "ชื่อช่อง" กับ <span class="req"> เป็นสองแถว →
   แถวแรก = ชื่อช่อง + * · ลูกอื่น (ช่องกรอก · คำอธิบาย · ข้อความผิดพลาด) เต็มแถวถัดไป · ป้ายแบบ flex/inline ไม่ได้รับผล */
label:has(> .req) { grid-template-columns: minmax(0, max-content) 1fr; column-gap: .3em; }
label:has(> .req) > :not(.req) { grid-column: 1 / -1; }
label:has(> .req) > .req { justify-self: start; }