/* niems.css — ชุดหน้าตากลางของ NIEMS-LC แบบ D2 (0.5.0) : token + ส่วนประกอบพื้นฐาน
   ใช้: <body class="ui"> + <link rel="stylesheet" href="assets/ui/niems.css?v=…"> (หน้าในโฟลเดอร์ย่อยใช้ ../assets/…)
   class ขึ้นต้น ui- (หน้าเดิมใช้ nm- — ไม่ชนกัน) · ฟอนต์ Noto Sans Thai Variable (OFL · fonts/OFL.txt) อยู่ในเครื่องเราเอง ไม่โหลดจากภายนอก
   ตรวจด้วย deploy/frontend/check_ui_kit.sh (token · class · คอนทราสต์) */
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62.5% 100%;
  src:url(fonts/noto-sans-thai-thai-wght-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62.5% 100%;
  src:url(fonts/noto-sans-thai-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ui-indigo:#2A3890;--ui-indigo-deep:#18215F;--ui-sky:#2D8FCE;--ui-yellow:#E6E146;
  --ui-canvas:#FAFBF8;--ui-surface:#FFFFFF;--ui-pale:#EEF3FF;--ui-soft:#F3F5F8;--ui-line:#DCE1E8;
  --ui-text:#192645;--ui-muted:#596478;
  --ui-ok:#1E7A46;--ui-ok-bg:#E5F4EA;--ui-wait:#8A5A00;--ui-wait-bg:#FDF3D7;
  --ui-bad:#B42318;--ui-bad-bg:#FDE8E7;--ui-info:#1C5F8F;--ui-info-bg:#E3F0FA;
  --ui-font:"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui-r1:12px;--ui-r2:20px;--ui-r3:28px;
  --ui-header-h:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--ui-header-h) + 12px)}
body.ui{margin:0;background:var(--ui-canvas);color:var(--ui-text);font:400 1.0625rem/1.75 var(--ui-font);overflow-wrap:break-word}
.ui img,.ui svg{max-width:100%}
.ui a{color:inherit}
.ui h1,.ui h2,.ui h3{line-height:1.25}
.ui :focus-visible{outline:3px solid var(--ui-sky);outline-offset:3px;border-radius:6px}
.ui [hidden]{display:none!important}
.ui-wrap{width:min(1200px,100% - 32px);margin-inline:auto}
.ui-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{all:unset!important;white-space:nowrap!important}   /* คำที่ห้ามตัดกลางคำ เช่น "ใบรับรอง" — frontend/home/src/ui/keep.ts (0.6.5) · ตัวห่อล้วน: ไม่รับ style ของ selector แบบลูกหลาน (เช่น .steps span ทำให้เป็น block · ตัวเล็ก · สีเทา — 0.6.6) */
.ui-skip{position:absolute;left:16px;top:-80px;z-index:2000;padding:10px 16px;border-radius:var(--ui-r1);background:var(--ui-indigo);color:#fff;font-weight:700;text-decoration:none}
.ui-skip:focus{top:12px}

/* ปุ่ม: หลัก (indigo) · เหลือง (งานหลักบนพื้นเข้ม) · เส้น (งานรอง) */
.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 22px;border:1.5px solid var(--ui-indigo);border-radius:999px;background:var(--ui-indigo);color:#fff;font:700 1rem/1.3 var(--ui-font);text-decoration:none;cursor:pointer}
.ui-btn:hover{background:var(--ui-indigo-deep);border-color:var(--ui-indigo-deep)}
.ui-btn--yellow{background:var(--ui-yellow);border-color:var(--ui-yellow);color:var(--ui-text)}
.ui-btn--yellow:hover{background:#D7D23C;border-color:#D7D23C}
.ui-btn--line{background:var(--ui-surface);border-color:var(--ui-line);color:var(--ui-indigo)}
.ui-btn--line:hover{background:var(--ui-surface);border-color:var(--ui-indigo)}
.ui-btn[disabled],.ui-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
/* ปุ่มและลิงก์ข้ามเนื้อหาที่เป็น <a> ต้องชนะ .ui a{color:inherit} ข้างบน — ไม่งั้นตัวอักษรสีเข้มบนพื้นน้ำเงิน (ผู้ใช้ 21 ต.ค.: "เริ่มยื่นคำขอ สีกลืนกัน") */
.ui .ui-btn,.ui .ui-skip{color:#fff}
.ui .ui-btn--yellow{color:var(--ui-text)}
.ui .ui-btn--line{color:var(--ui-indigo)}

/* ช่องกรอก */
.ui-field{display:grid;gap:6px}
.ui-label{font-weight:600;font-size:.95rem}
.ui-input{width:100%;min-height:46px;padding:10px 14px;border:1.5px solid var(--ui-line);border-radius:var(--ui-r1);background:var(--ui-surface);color:var(--ui-text);font:inherit;font-size:1rem}
.ui-input:focus{border-color:var(--ui-indigo);outline:none;box-shadow:0 0 0 3px rgba(45,143,206,.35)}
.ui-input[aria-invalid="true"]{border-color:var(--ui-bad)}
select.ui-input{width:auto;max-width:100%;padding-right:36px}
.ui-hint{margin:0;color:var(--ui-muted);font-size:.88rem}

/* chip กดเลือก (aria-pressed) */
.ui-chip{min-height:40px;padding:8px 15px;border:1.5px solid var(--ui-line);border-radius:999px;background:var(--ui-surface);color:var(--ui-text);font:600 .9rem/1.2 var(--ui-font);cursor:pointer}
.ui-chip[aria-pressed="true"]{background:var(--ui-indigo);border-color:var(--ui-indigo);color:#fff}

/* กล่องข้อความแจ้ง + ป้ายสถานะ */
.ui-note{margin:0;padding:12px 16px;border:1px solid var(--ui-line);border-radius:var(--ui-r1);background:var(--ui-surface)}
.ui-note--ok{border-color:transparent;background:var(--ui-ok-bg);color:var(--ui-ok)}
.ui-note--wait{border-color:transparent;background:var(--ui-wait-bg);color:var(--ui-wait)}
.ui-note--bad{border-color:transparent;background:var(--ui-bad-bg);color:var(--ui-bad)}
.ui-note--info{border-color:transparent;background:var(--ui-info-bg);color:var(--ui-info)}
.ui-note a{font-weight:700}
.ui-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:var(--ui-soft);color:var(--ui-muted);font-weight:700;font-size:.88rem}
.ui-pill--ok{background:var(--ui-ok-bg);color:var(--ui-ok)}
.ui-pill--wait{background:var(--ui-wait-bg);color:var(--ui-wait)}
.ui-pill--bad{background:var(--ui-bad-bg);color:var(--ui-bad)}
.ui-pill--info{background:var(--ui-info-bg);color:var(--ui-info)}

/* หัวเว็บ: โลโก้ + เมนู + เข้าสู่ระบบศูนย์ + 1669 · จอ ≤1000px เมนูพับ (frontend/home/src/ui/menu.ts) */
.ui-header{position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--ui-line);background:rgba(250,251,248,.96)}
@supports (backdrop-filter:blur(8px)){.ui-header{backdrop-filter:blur(10px)}}
.ui-header .ui-wrap{position:relative;display:flex;align-items:center;gap:12px;min-height:var(--ui-header-h)}
.ui-brand{display:flex;align-items:center;gap:11px;min-width:0;margin-right:auto;text-decoration:none}
.ui-brand img{flex:none;width:40px;height:40px;border-radius:50%;background:#fff}
.ui-brand b{display:block;color:var(--ui-indigo);font-stretch:90%;line-height:1.25;white-space:nowrap}
.ui-brand b span{color:var(--ui-text);font-weight:500}
.ui-brand small{display:block;color:var(--ui-muted);font-size:.72rem;line-height:1.3}
.ui-nav{display:flex;gap:2px}
.ui-nav a{padding:8px 12px;border-radius:999px;font-size:.95rem;white-space:nowrap;text-decoration:none}
.ui-nav a:hover{background:rgba(42,56,144,.07)}
.ui-hlink,.ui-hcall{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;font-weight:700;font-size:.95rem;white-space:nowrap;text-decoration:none}
.ui-hlink{border:1.5px solid currentColor;color:var(--ui-indigo)}
.ui-hcall{background:var(--ui-yellow);color:var(--ui-text)}
.ui-menu-btn{display:none;min-height:44px;padding:8px 14px;border:1.5px solid var(--ui-line);border-radius:999px;background:var(--ui-surface);color:var(--ui-text);font:600 .95rem/1 var(--ui-font);cursor:pointer}
@media (max-width:1000px){
  .ui-menu-btn{display:inline-flex;align-items:center}
  .ui-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px 16px 16px;border-bottom:1px solid var(--ui-line);background:var(--ui-canvas)}
  .ui-nav[data-open]{display:flex}
  .ui-nav a{padding:12px;border-radius:var(--ui-r1)}
}
@media (max-width:560px){.ui-hlink{display:none}.ui-brand small{display:none}}

/* ท้ายเว็บ */
.ui-footer{margin-top:64px;padding:48px 0 32px;background:var(--ui-indigo);color:#DCE6F7}
.ui-footer a{color:#fff}
.ui-footer h2{margin:0 0 10px;color:#fff;font-size:1rem}
.ui-footer ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.ui-footer p{margin:0 0 8px}
.ui-footer .big{display:inline-block;color:var(--ui-yellow);font-weight:900;font-stretch:62.5%;font-size:4rem;line-height:1;text-decoration:none}
.ui-footer .foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.4fr;gap:28px}
.ui-footer .copy{margin:32px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);font-size:.85rem}
@media (max-width:900px){.ui-footer .foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ui-footer .foot-grid{grid-template-columns:1fr}}

/* หน้าต่างรายละเอียด (<dialog>) — ปุ่มปิดอยู่ใน <form method="dialog"> ปิดได้โดยไม่ต้องใช้สคริปต์ */
.ui-dialog{width:min(720px,calc(100% - 32px));max-height:min(86vh,900px);padding:0;border:0;border-radius:var(--ui-r2);background:var(--ui-surface);color:var(--ui-text);box-shadow:0 24px 60px rgba(24,33,95,.28)}
.ui-dialog::backdrop{background:rgba(24,33,95,.45)}
.ui-dialog-body{max-height:inherit;padding:24px 28px;overflow:auto}
/* ทางสำรองของเบราว์เซอร์ที่ไม่มี showModal (frontend/home/src/ui/polyfills.ts) */
dialog:not([open]){display:none}
.ui-dialog--shim[open]{display:block;position:fixed;left:50%;top:50%;z-index:3001;transform:translate(-50%,-50%)}
.ui-dialog-backdrop{position:fixed;left:0;top:0;right:0;bottom:0;z-index:3000;background:rgba(24,33,95,.45)}
.ui-dialog-x{float:right;width:40px;height:40px;margin:-8px -12px 0 12px;border:0;border-radius:50%;background:var(--ui-soft);color:var(--ui-text);font-size:1.3rem;cursor:pointer}

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