/* ecd-app/public/style.css
   ดีไซน์ซิสเต็มของแอปบันทึกพัฒนาการเด็กปฐมวัย สพป.ลำพูน เขต 2
   มาจาก แบบ/06-ดีไซน์ซิสเต็ม.md — ห้ามใส่ค่าสีดิบนอกบล็อก :root
   (ทั้งเลขฐานสิบหกและค่าโปร่งแสง ยกเว้นสามค่าที่แบบ/06 ข้อ 7 อนุญาตไว้ตรง ๆ)
   ทุกที่ต้องอ้าง var(--...) เท่านั้น (แบบ/06 ข้อ 3 · เกณฑ์ตรวจรับข้อ 2) */

:root{
  /* ---- พื้นและตัวอักษร (ยกจากเว็บประกันทั้งชุด) ---- */
  --bg:#ffffff;
  --bg-soft:#f5f5f7;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --line:#e3e3e6;

  /* ---- สีหลักของเขต ---- */
  --accent:#0066cc;
  --accent-hover:#0a5ad6;
  --accent-soft:#e8f1fc;
  --accent-soft-hover:#d7e8fb;

  /* ---- ระดับคุณภาพ (เคาะข้อ 1) ---- */
  --lv3:#11724a;  --lv3-soft:#e7f6ee;   /* 3 ดี          เขียว */
  --lv2:#0a4f9e;  --lv2-soft:#e8f1fc;   /* 2 พอใช้        น้ำเงิน */
  --lv1:#9a6500;  --lv1-soft:#fff4e0;   /* 1 ควรส่งเสริม  เหลืองอำพัน */
  --lv0:#6a6a6f;  --lv0-soft:#f0f0f2;   /* ยังไม่ให้คะแนน  เทา */

  /* ---- ด้านพัฒนาการ 4 ด้าน (เคาะข้อ 2) ---- */
  --d1:#0e7c86;   --d1-ink:#0e6b74;  --d1-soft:#e0f0f2;   /* เขียวน้ำทะเล */
  --d2:#c2662a;   --d2-ink:#a35714;  --d2-soft:#fdeede;   /* ส้มดินเผา */
  --d3:#7a4fb0;   --d3-ink:#6b3fa0;  --d3-soft:#f0eaf8;   /* ม่วง */
  --d4:#4a57c9;   --d4-ink:#3f4bb8;  --d4-soft:#eaecfb;   /* คราม */

  /* ---- แถบสถานะ ---- */
  --warn:#8a6400;   --warn-soft:#fff8e6;  --warn-line:#f2e2b8;
  --danger:#a33b37; --danger-soft:#fdecec; --danger-line:#f5d5d5;
  --ok:#11724a;     --ok-soft:#e7f6ee;

  /* ---- มุมโค้ง ---- */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:980px;

  /* ---- เงา ---- */
  --sh-1:0 1px 3px rgba(0,0,0,.06);
  --sh-2:0 12px 30px rgba(0,0,0,.07);
  --sh-sheet:0 -8px 30px rgba(0,0,0,.10);

  /* ---- ระยะห่าง ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px;

  /* ---- ขนาดตัวอักษร (ฐานมือถือ) ---- */
  --fs-xs:12.5px; --fs-sm:14px; --fs-body:16px;
  --fs-h3:17px; --fs-h2:20px; --fs-h1:24px; --fs-hero:28px;

  /* ---- โครง ---- */
  --maxw:1080px;
  --tabbar-h:56px;
  --header-h:52px;
}

@font-face{
  font-family:'Anuphan';
  src:url('vendor/fonts/Anuphan-thai.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:'Anuphan';
  src:url('vendor/fonts/Anuphan-latin.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  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;
}
@font-face{
  font-family:'Anuphan';
  src:url('vendor/fonts/Anuphan-latin-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

body{
  font-family:'Anuphan',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:var(--fs-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}

/* ---- รีเซ็ตพื้นฐาน ---- */
*, *::before, *::after{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
/* hidden ต้องชนะทุกกฎที่ตั้ง display เอง — .chip .note-danger และคลาสอื่นที่ประกาศ display
   จะซ่อนไม่ลงถ้าไม่มีบรรทัดนี้ เพราะกฎของเราชนะกฎ [hidden] ของเบราว์เซอร์เสมอ */
[hidden]{ display:none !important; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s4); }

h1, h2, h3{ margin:0 0 var(--s3); font-weight:600; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); letter-spacing:-0.02em; }
h3{ font-size:var(--fs-h3); }
.num-lg{ font-size:var(--fs-hero); font-weight:700; letter-spacing:-0.03em; line-height:1; }

/* ════════════════════════════════════════════════════════════════
   แบบ/06 ข้อ 5 — สีระดับคุณภาพ
   ════════════════════════════════════════════════════════════════ */

/* 5.1 ปุ่มระดับ 3/2/1 */
.lv-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s1); min-height:46px; padding:var(--s2) var(--s3);
  background:var(--bg); color:var(--ink-soft); border:1.5px solid var(--line);
  border-radius:var(--r-md); font-family:inherit; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.lv-btn .lv-num{ font-size:var(--fs-h2); font-weight:700; letter-spacing:-0.02em; }
/* คำไทยใต้ตัวเลขต้องเห็นทุกขนาดจอ — วัดแล้วคำที่ยาวที่สุด "ควรส่งเสริม" กว้าง 59px
   ส่วนปุ่มบนจอ 375px กว้างปุ่มละ 106px จึงใส่ได้สบาย (สถาปนิกเคาะ 2 ก.ย. 2569) */
.lv-btn .lv-lab{ font-size:var(--fs-xs); font-weight:500; }
.lv-btn.on-3{ background:var(--lv3); color:var(--bg); border-color:transparent; }
.lv-btn.on-2{ background:var(--lv2); color:var(--bg); border-color:transparent; }
.lv-btn.on-1{ background:var(--lv1); color:var(--bg); border-color:transparent; }

/* 5.2 ป้ายระดับ */
.pill-lv3, .pill-lv2, .pill-lv1, .pill-lv0{
  display:inline-flex; align-items:center; padding:var(--s1) var(--s3);
  border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:500;
}
.pill-lv3{ background:var(--lv3-soft); color:var(--lv3); }
.pill-lv2{ background:var(--lv2-soft); color:var(--lv2); }
.pill-lv1{ background:var(--lv1-soft); color:var(--lv1); }
.pill-lv0{ background:var(--lv0-soft); color:var(--lv0); }

/* ════════════════════════════════════════════════════════════════
   แบบ/06 ข้อ 7 — ชิ้นส่วนหน้าจอ
   ════════════════════════════════════════════════════════════════ */

/* 7.1 ปุ่ม */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:46px; padding:0 var(--s6); border:none; border-radius:var(--r-pill);
  font-family:inherit; font-size:var(--fs-body); font-weight:500; cursor:pointer;
  transition:transform .2s, background .2s, color .2s, filter .2s;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); filter:brightness(.96); }
.btn-main{ background:var(--accent); color:var(--bg); }
.btn-main:hover{ background:var(--accent-hover); }
.btn-sub{ background:transparent; color:var(--accent); }
.btn-sub:hover{ background:var(--accent-soft); }
.btn-quiet{ background:var(--bg-soft); color:var(--ink-soft); }
.btn-danger{ background:var(--danger-soft); color:var(--danger); }

/* 7.2 การ์ด */
.card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5) var(--s6);
}
.card.clickable{ cursor:pointer; transition:transform .2s, box-shadow .2s; }
.card.clickable:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }

/* 7.3 แถบปุ่มด้านล่าง */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; height:var(--tabbar-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(0,0,0,.06);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar .tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; color:var(--ink-soft); text-decoration:none; font-size:11px;
}
.tabbar .tab svg{ width:22px; height:22px; }
.tabbar .tab.on{ color:var(--accent); font-weight:500; position:relative; }
.tabbar .tab.on::after{
  content:''; position:absolute; bottom:2px; width:18px; height:2px;
  background:var(--accent); border-radius:var(--r-pill);
}
.tabbar-space{ padding-bottom:calc(var(--tabbar-h) + var(--s7)); }

/* จอกว้างตั้งแต่ 900px — ย้ายแถบเมนูขึ้นบนสุด แล้วให้หัวหน้าจอลงมาเกาะ "ใต้" แถบเมนู
   ห้ามให้แถบเมนูกับหัวหน้าจออยู่ที่ top:0 พร้อมกัน แถบเมนูจะบังหัวหน้าจอจนมิด
     ทำให้ชื่อโรงเรียน ตัวเลือกห้องเรียน และปีการศึกษาหายไปทั้งแถบ
     (สถาปนิกตรวจพบและแก้ 2 ก.ย. 2569 · เติม แบบ/06 ข้อ 12 ที่เขียนไม่ครบ) */
@media (min-width:900px){
  body.has-tabbar{ padding-top:var(--header-h); }
  .tabbar{ top:0; bottom:auto; left:0; right:0; height:var(--header-h);
            border-top:none; border-bottom:1px solid var(--line);
            padding-bottom:0; justify-content:center; gap:var(--s2); }
  .tabbar .tab{ flex:0 0 auto; flex-direction:row; font-size:var(--fs-sm);
                gap:var(--s2); padding:0 var(--s4); }
  .apphead{ top:var(--header-h); }
  .tabbar-space{ padding-bottom:var(--s7); }
}

/* 7.4 หัวหน้าจอ */
.apphead{
  position:sticky; top:0; z-index:40; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:0 var(--s4);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.apphead .apphead-logo{ height:26px; width:auto; }

/* 7.5 แถบเตือน */
.note-warn, .note-danger, .note-ok{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4); border-radius:var(--r-md); font-size:var(--fs-sm);
}
.note-warn{ background:var(--warn-soft); border:1px solid var(--warn-line); color:var(--warn); }
.note-danger{ background:var(--danger-soft); border:1px solid var(--danger-line); color:var(--danger); }
.note-ok{ background:var(--ok-soft); color:var(--ok); }

/* 7.6 แผ่นบันทึกด้านล่าง */
.sheet-bg{
  position:fixed; inset:0; z-index:90;
  background:rgba(29,29,31,.44);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:91; max-height:88vh;
  overflow-y:auto; background:var(--bg);
  border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--sh-sheet);
  padding:var(--s3) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom));
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.sheet-grip{
  width:36px; height:4px; margin:0 auto var(--s4);
  background:var(--line); border-radius:var(--r-pill);
}

/* 7.7 การ์ดเด็ก */
.kid-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); }
@media (min-width:560px){ .kid-grid{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:768px){ .kid-grid{ grid-template-columns:repeat(5,1fr); } }
@media (min-width:900px){ .kid-grid{ grid-template-columns:repeat(6,1fr); } }

.kid-card{
  position:relative; background:var(--bg); border:1.5px solid var(--line);
  border-radius:var(--r-md); padding:var(--s3); text-align:center;
}
.kid-card.unrecorded{ border-color:var(--accent); }
.kid-card .kid-nick{ font-weight:600; font-size:16px; }
.kid-card .kid-name{ font-size:12.5px; color:var(--ink-soft); }
/* ตัวนับบันทึก — เป็นบรรทัดของตัวเองใต้ชื่อ ไม่ลอยทับชื่อเล่นอีกต่อไป
   สถาปนิกแก้ 5 ก.ย. 2569 ตอนตรวจรับ T09 · ของเดิมใช้ position:absolute มุมขวาบน
   วัดจริงแล้วทับ .kid-nick 59 x 12 พิกเซล "ทุกความกว้างจอ" ไม่ใช่เฉพาะจอแคบ
   เกิดทั้งหน้า #/บันทึก และหน้า #/เด็ก เพราะใช้คลาสชุดเดียวกัน */
.kid-card .kid-count{
  display:block; margin-top:var(--s2);
  font-size:var(--fs-xs); color:var(--ink-soft);
}

/* 7.8 สถานะว่าง */
.empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--s4); padding:var(--s8) var(--s4);
}
.empty svg{ width:44px; height:44px; color:var(--line); }
.empty p{ margin:0; color:var(--ink-soft); font-size:15px; }

/* ════════════════════════════════════════════════════════════════
   แบบ/06 ข้อ 6 — สีประจำด้านพัฒนาการ
   บล็อกนี้ต้องอยู่ "หลัง" ชิ้นส่วนข้อ 7 เสมอ ห้ามย้ายขึ้นไปข้างบน
     เพราะเป็นตัวปรับแต่งที่ต้องเขียนทับค่าเริ่มต้นของ .card ได้
     ตอนอยู่ข้างบน .card{border:...} ลบแถบสีซ้ายทิ้งทั้งเส้น (แก้ 2 ก.ย. 2569)
   ห้ามเขียนเงื่อนไขว่าด้านชื่อนี้แล้วใช้สีนี้ — สีมาจาก cur_domains.color_key เสมอ
   ข้อ 6.2.1 — ตัวทึบใช้เป็นกราฟิกเท่านั้น ตัวอักษรต้องใช้ตัว -ink
   ════════════════════════════════════════════════════════════════ */

/* สี่คลาสนี้ทำหน้าที่เดียว คือบอกว่า "ด้านนี้ใช้สีชุดไหน"
   ไม่ระบายอะไรเอง เพื่อไม่ให้ใส่ที่การ์ดแล้วตัวหนังสือทั้งใบเปลี่ยนสีตาม */
.dom-teal{   --dom:var(--d1); --dom-ink:var(--d1-ink); --dom-soft:var(--d1-soft); }
.dom-clay{   --dom:var(--d2); --dom-ink:var(--d2-ink); --dom-soft:var(--d2-soft); }
.dom-plum{   --dom:var(--d3); --dom-ink:var(--d3-ink); --dom-soft:var(--d3-soft); }
.dom-indigo{ --dom:var(--d4); --dom-ink:var(--d4-ink); --dom-soft:var(--d4-soft); }

/* ตัวอักษรสีด้าน — ใช้ตัว -ink เสมอตามข้อ 6.2.1 (เกณฑ์ 4.5:1) */
.dom-ink{ color:var(--dom-ink); }

/* พื้นอ่อนของด้าน — ปุ่มเลือกด้านตอนเลือกอยู่ ข้อ 6.2 บอกว่าใช้พื้น soft ไม่ใช่พื้นทึบ */
.dom-fill{ background:var(--dom-soft); color:var(--dom-ink); }

/* จุดกลมหน้าชื่อด้าน — ตัวทึบ เกณฑ์กราฟิก 3:1 */
.dom-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--dom); }

/* แถบสีซ้าย 4px ของการ์ดบันทึกประจำวัน (ข้อ 6.2 ข้อแรก)
   ใช้ ::before แบบ .tcard::before ของเว็บประกัน ไม่ใช้ border-left
   เพราะ border แบบย่อของ .card จะลบทั้งความหนาและสีทิ้ง */
.dom-bar{ position:relative; padding-left:var(--s6); }
.dom-bar::before{
  content:''; position:absolute; left:var(--s2); top:var(--s3); bottom:var(--s3);
  width:4px; border-radius:var(--r-pill); background:var(--dom);
}

/* แท่งกราฟในหน้าสรุป — ตัวทึบเช่นกัน */
.dom-fill-solid{ background:var(--dom); }

/* ════════════════════════════════════════════════════════════════
   วงโฟกัสของแป้นพิมพ์ — ใช้โทเคนเดิม ไม่ได้เพิ่มสีใหม่
   ครูบางคนใช้แป้นพิมพ์ภายนอกกับแท็บเล็ต ต้องเห็นว่าตอนนี้อยู่ที่ปุ่มไหน
   ════════════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ════════════════════════════════════════════════════════════════
   แบบ/06 ข้อ 12 — ห้ามเลื่อนแนวนอน
   ════════════════════════════════════════════════════════════════ */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ════════════════════════════════════════════════════════════════
   T07 — ช่องกรอกฟอร์มและกล่องเข้าระบบ (ใบสั่งงาน T07 ข้อ 4.8)
   ชื่อคลาสชุดนี้เป็นสัญญา ห้ามเปลี่ยน ห้ามเพิ่ม ห้ามลด เหมือนคลาส 28 ตัวของ แบบ/06
   ════════════════════════════════════════════════════════════════ */

/* ช่องกรอก */
.field{ margin-bottom:var(--s4); }
.field-lab{ display:block; font-size:var(--fs-sm); font-weight:500; margin-bottom:var(--s1); }
.field input{
  width:100%; min-height:44px; padding:0 var(--s3);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--bg);
}
.field input:focus{ outline:none; border-color:var(--accent); }
.field-hint{ margin:var(--s1) 0 0; font-size:var(--fs-xs); color:var(--ink-soft); }
.field-err{
  margin:var(--s1) 0 0; font-size:var(--fs-xs); color:var(--danger); font-weight:500;
}
.field.bad input{ border-color:var(--danger-line); }

/* กล่องเข้าระบบ */
.auth{
  max-width:420px; margin:var(--s8) auto; padding:0 var(--s4);
  display:flex; flex-direction:column; gap:var(--s3);
}
/* ความสูงนี้ผูกกับ แบบ/06 ข้อ 9 ซึ่งสั่งไว้ว่าหน้าล็อกอินแสดงโลโก้สูง 120px
   (ไฟล์ต้นทาง 256px เตรียมมาเพื่อขนาดนี้บนจอความละเอียดสองเท่า)
   ใบสั่งงาน T07 ข้อ 4.8 เคยเขียน 64px ซึ่งขัดกับแบบ แก้ให้ตรงกันแล้ว 2 ก.ย. 2569
   สคริปต์ 05 อ่านตัวเลขจาก แบบ/06 มาเทียบกับบรรทัดนี้ทุกครั้งที่รัน */
.auth-logo{ height:120px; width:auto; margin:0 auto var(--s2); display:block; }

/* ปุ่มกำลังทำงาน */
.btn.busy{ opacity:.6; pointer-events:none; }

/* ปุ่มที่กดไม่ได้ — แบบ/06 ข้อ 7.10 (เพิ่ม 5 ก.ย. 2569)
   ก่อนหน้านี้ทั้งไฟล์ไม่มีกฎ :disabled เลยสักบรรทัด ปุ่ม "บันทึก" ในแผ่นบันทึกซึ่งกดไม่ได้
   จนกว่าจะเลือกด้านและพิมพ์ข้อความ จึงทึบเต็มสีน้ำเงินและชี้แล้วเป็นรูปมือ เหมือนปุ่มปกติทุกอย่าง
   ครูกดแล้วไม่มีอะไรเกิดขึ้นโดยไม่มีคำอธิบาย (สถาปนิกวัดได้ opacity 1 · cursor pointer)
   ไม่ได้สื่อความหมายด้วยสีอย่างเดียว — แอตทริบิวต์ disabled เป็นข้อมูลที่โปรแกรมอ่านหน้าจออ่านออกเอง */
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ข้อความรอง — บรรทัดใต้หัวข้อ คำอธิบายประกอบ
   แบบ/06 ข้อ 9 สั่งไว้ว่าบรรทัดรองใต้ชื่อบนหน้าล็อกอินเป็น "ตัวเล็กสี --ink-soft"
   T07 ใช้คลาสนี้ใน 4 หน้าแต่ไม่เคยประกาศไว้ ข้อความจึงออกมาสีเดียวกับตัวปกติ
   ไม่ได้เพิ่มสีใหม่ ใช้โทเคนเดิมทั้งสองค่า (สถาปนิกเพิ่ม 2 ก.ย. 2569) */
.muted{ color:var(--ink-soft); font-size:var(--fs-sm); }

/* ════════════════════════════════════════════════════════════════
   T08 — หัวหน้าจอ ห้องเรียน และรายชื่อเด็ก (ใบสั่งงาน T08 ข้อ 5.8)
   ชื่อคลาสชุดนี้เป็นสัญญา ห้ามเปลี่ยน ห้ามเพิ่ม ห้ามลด
   ════════════════════════════════════════════════════════════════ */

.apphead-school{
  font-weight:600; font-size:var(--fs-sm); max-width:34%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.apphead-year{ font-size:var(--fs-xs); color:var(--ink-soft); white-space:nowrap; }

/* จอแคบมากให้ตัดโลโก้ทิ้งก่อน เพราะเป็นเครื่องประดับ
   ส่วนชื่อโรงเรียน ห้องเรียน และปีการศึกษา เป็นข้อมูลที่ แบบ/05 ข้อ 4.2 สั่งให้มี */
@media (max-width:399px){ .apphead-logo{ display:none; } }

.pick{
  min-height:44px; max-width:100%; padding:0 var(--s3);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink);
  font-family:inherit; font-size:16px;
}
.pick:focus{ outline:none; border-color:var(--accent); }
.field .pick{ width:100%; }
.apphead .pick{ font-size:var(--fs-sm); }

.chip{
  display:inline-block; padding:2px var(--s2); border-radius:var(--r-pill);
  font-size:var(--fs-xs); background:var(--bg-soft); color:var(--ink-soft);
}
.chip-warn{ background:var(--warn-soft); color:var(--warn); }

.kid-sub{ font-size:var(--fs-xs); color:var(--ink-soft); }

.row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }

.bar{
  position:sticky; bottom:var(--tabbar-h); z-index:30;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:var(--s3) 0;
  background:var(--bg); border-top:1px solid var(--line);
}
@media (min-width:900px){ .bar{ bottom:0; } }

.paste{
  width:100%; min-height:180px; padding:var(--s3); line-height:1.5; resize:vertical;
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--bg);
}
.paste:focus{ outline:none; border-color:var(--accent); }

.tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.tbl th, .tbl td{
  padding:var(--s2); border-bottom:1px solid var(--line);
  text-align:left; vertical-align:middle;
}
.tbl th{ font-weight:600; font-size:var(--fs-xs); color:var(--ink-soft); white-space:nowrap; }
.tbl input, .tbl select{
  width:100%; min-height:44px; padding:0 var(--s2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--bg);
}
.tbl-warn td{ background:var(--warn-soft); }
.tbl-dup td{ background:var(--danger-soft); }

/* ════════════════════════════════════════════════════════════════
   T09 — บันทึกประจำวัน (ใบสั่งงาน T09 ข้อ 5.5)
   ชื่อคลาสชุดนี้เป็นสัญญา ห้ามเปลี่ยน ห้ามเพิ่ม ห้ามลด
   ════════════════════════════════════════════════════════════════ */

.sum{ display:flex; flex-wrap:wrap; gap:var(--s3); padding:var(--s3) 0; }
.sum-item{
  flex:1 1 150px; min-height:44px;
  display:flex; align-items:baseline; gap:var(--s2);
  padding:var(--s3); text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg-soft); color:var(--ink);
  font-family:inherit; font-size:var(--fs-sm); line-height:1.4;
}
.sum-num{ font-size:var(--fs-h3); font-weight:700; color:var(--accent); }

.datenav{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:var(--s2); padding:var(--s2) 0;
}
.datenav-day{ min-width:11em; text-align:center; font-weight:600; }

/* ปุ่มวันถัดไปใช้ไอคอน ย้อนกลับ ตัวเดิมกลับด้าน เพื่อให้ลูกศรทั้งระบบเป็นชุดเดียวกัน */
.datenav .btn.rtl svg{ transform:scaleX(-1); }

.dom-btn{
  min-height:44px; padding:0 var(--s3);
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--bg); color:var(--ink);
  font-family:inherit; font-size:var(--fs-sm); cursor:pointer;
}
.dom-btn.on{
  border-width:3px; border-color:var(--dom);
  background:var(--dom-soft); color:var(--dom-ink); font-weight:600;
}

.note-input{
  width:100%; min-height:96px; padding:var(--s3); line-height:1.5; resize:vertical;
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:inherit; font-size:16px; color:var(--ink); background:var(--bg);
}
.note-input:focus{ outline:none; border-color:var(--accent); }

.mic{
  min-width:44px; min-height:44px; padding:0 var(--s3);
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink-soft);
  font-family:inherit; font-size:var(--fs-sm); cursor:pointer;
}
.mic.on{
  border-color:var(--accent); color:var(--accent);
  animation:mic-pulse 1.1s ease-in-out infinite;
}
@keyframes mic-pulse{ 50%{ transform:scale(1.08); } }

.loglist{ display:flex; flex-direction:column; }
.logitem{
  display:flex; align-items:flex-start; flex-wrap:wrap; gap:var(--s2);
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
}
.logitem-note{ flex:1 1 60%; min-width:0; overflow-wrap:anywhere; }
.logitem-who{ font-size:var(--fs-xs); color:var(--ink-soft); }

/* ════════════════════════════════════════════════════════════════
   T10 — หน่วยการเรียนรู้ (ใบสั่งงาน T10 ข้อ 5.5)
   ชื่อคลาสชุดนี้เป็นสัญญา ห้ามเปลี่ยน ห้ามเพิ่ม ห้ามลด
   สำคัญ  ห้ามใช้ชื่อ .tab กับแท็บของหน้านี้ .tab เป็นของแถบเมนูล่าง
   ════════════════════════════════════════════════════════════════ */

.tabsel{
  display:flex; gap:var(--s2);
  border-bottom:1px solid var(--line); margin-bottom:var(--s4);
}
.tabsel-btn{
  min-height:44px; padding:0 var(--s4);
  border:none; border-bottom:3px solid transparent; background:none;
  color:var(--ink-soft); font-family:inherit; font-size:var(--fs-body);
  cursor:pointer;
}
.tabsel-btn.on{
  color:var(--accent); border-bottom-color:var(--accent); font-weight:700;
}

.unit-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3);
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
}
.unit-meta{
  flex:1 1 100%; margin-top:var(--s1);
  font-size:var(--fs-xs); color:var(--ink-soft);
}

.tree{ border-top:1px solid var(--line); }
.tree-tog{
  width:100%; min-height:44px;
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) 0; border:none; border-bottom:1px solid var(--line);
  background:none; color:var(--ink);
  font-family:inherit; font-size:var(--fs-body); text-align:left; cursor:pointer;
}
.tree-lab{ flex:1 1 auto; }
.tree-kids{
  margin-left:var(--s2); padding-left:var(--s4);
  border-left:2px solid var(--line);
}
.tree-item{
  display:flex; align-items:flex-start; gap:var(--s3);
  min-height:44px; padding:var(--s2) 0; line-height:1.5; cursor:pointer;
}
.tree-item input{
  width:22px; height:22px; margin-top:3px; flex:none;
  accent-color:var(--accent);
}

.pickbar{
  position:sticky; bottom:var(--tabbar-h); z-index:5;
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3);
  padding:var(--s3); margin-top:var(--s4);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg-soft); box-shadow:var(--sh-2);
}
.pickbar-num{ font-size:var(--fs-h3); font-weight:700; color:var(--accent); }

/* ════════════════════════════════════════════════════════════════
   T11 — หน้าประเมิน (ใบสั่งงาน T11 ข้อ 5.5)
   ชื่อคลาสชุดนี้เป็นสัญญา ห้ามเปลี่ยน ห้ามเพิ่ม ห้ามลด
   สำคัญ  ปุ่มระดับ 3/2/1 ใช้ .lv-btn ของ แบบ/06 ข้อ 5.1 ที่มีอยู่แล้ว ห้ามสร้างใหม่
   สำคัญ  ห้ามใช้สีของระดับกับพื้นหลังบล็อกใหญ่ ใช้ได้แค่ปุ่มกับป้าย (แบบ/06 ข้อ 5.3)
   ════════════════════════════════════════════════════════════════ */

.assbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3);
  padding-bottom:var(--s3); border-bottom:1px solid var(--line);
}
.assave{
  flex:1 1 100%; min-height:1.4em;
  font-size:var(--fs-xs); color:var(--ink-soft);
}

.step-dot{
  display:inline-block; width:9px; height:9px; margin-right:var(--s1);
  border:1.5px solid var(--line); border-radius:50%; background:var(--bg);
}
.step-dot.on{ background:var(--accent); border-color:var(--accent); }

.itemhead{
  padding:var(--s4) 0 var(--s3);
  border-bottom:1px solid var(--line);
}

.rub{
  width:100%; min-height:44px;
  display:flex; align-items:center; gap:var(--s2);
  padding:var(--s2) 0; border:none; background:none;
  color:var(--accent); font-family:inherit; font-size:var(--fs-sm);
  text-align:left; cursor:pointer;
}
.rub-body{
  padding:var(--s3); margin-bottom:var(--s3);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg-soft);
}
.rub-lv{
  display:flex; align-items:flex-start; gap:var(--s3);
  padding:var(--s2) 0; font-size:var(--fs-sm); line-height:1.6;
}

.asschild{
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
}
.asslv{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2);
  margin-top:var(--s2);
}
.asslog{
  margin:var(--s2) 0 0; padding-left:var(--s3);
  /* --dom ตั้งโดยคลาส .dom-teal .dom-clay .dom-plum .dom-indigo · ไม่มีก็ใช้เส้นสีกลาง */
  border-left:2px solid var(--dom, var(--line));
  font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.6;
}

.chip-ok{ background:var(--ok-soft); color:var(--ok); }

/* ════════════════════════════════════════════════════════════════
   T13 — หน้ารายงาน (ใบสั่งงาน T13 ข้อ 2.1)
   สำคัญ  ห้ามใช้สีแดงกับผลของเด็ก แถบความครบใช้สีส้ม --warn เท่านั้น
          และมีตัวเลขกำกับเสมอ ห้ามสื่อความหมายด้วยสีอย่างเดียว
          (CLAUDE.md ข้อ 18 ข้อ 19 · แบบ/06 ข้อ 5.3)
   ════════════════════════════════════════════════════════════════ */

.rep-row{
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4);
  margin-bottom:var(--s4);
}
.rep-field{ flex:1 1 200px; min-width:180px; margin:0; }

/* แถบความครบ — ตัวเลขอยู่บนแถบเสมอ อ่านออกแม้พิมพ์ขาวดำหรือตาบอดสี */
.rep-bar{
  position:relative; overflow:hidden;
  min-height:44px; display:flex; align-items:center;
  padding:var(--s3) var(--s4); margin-bottom:var(--s5);
  border:1px solid var(--warn-line); border-radius:var(--r-md);
  background:var(--warn-soft);
}
.rep-bar-fill{
  position:absolute; left:0; top:0; bottom:0;
  background:var(--warn); opacity:.22;
}
.rep-bar-text{
  position:relative; font-size:var(--fs-sm); font-weight:600; color:var(--ink);
}

.rep-card{ margin-bottom:var(--s5); }
.rep-card h2{ font-size:var(--fs-h3); margin:0 0 var(--s2); }
.rep-card p{ margin:0 0 var(--s3); }

.rep-actions{
  display:flex; flex-wrap:wrap; gap:var(--s3);
  margin-top:var(--s4);
}

.rep-ta{
  width:100%; min-height:72px; padding:var(--s3);
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink);
  font:inherit; font-size:var(--fs-body); line-height:1.6;
  resize:vertical;
}
.rep-ta:focus{ outline:2px solid var(--accent); outline-offset:1px; }

/* ข้อความอ่านอย่างเดียวของบทบาทเขตและแอดมิน — ช่องพิมพ์ไม่ถูกสร้างขึ้นมาเลย */
.rep-read{
  padding:var(--s2) var(--s3); margin:0 0 var(--s3);
  border-left:2px solid var(--line);
  font-size:var(--fs-sm); line-height:1.6; white-space:pre-wrap;
}

/* แถบยืนยันและแถบผลลัพธ์ในการ์ด — ใช้สไตล์ .note-* เดิม เพิ่มแค่ระยะห่าง */
.rep-confirm, .rep-err, .rep-ok{ margin-top:var(--s3); }

/* แถบ "ข้อความนี้ระบบร่างให้" (T14 ขั้นที่ 4 · แบบ/07 ข้อ 7.3)
   อยู่บนหน้าจอเท่านั้น ห้ามติดไปในไฟล์ PDF หรือ Excel จึงเป็นชิ้นส่วนแยกจากช่องข้อความเสมอ */
.rep-draft{ margin-top:var(--s3); }

/* ════════════════════════════════════════════════════════════════
   T14 — หน้า #/น้ำหนักส่วนสูง (คำนำหน้า gro-)
   ════════════════════════════════════════════════════════════════ */

.gro-page h1{ margin-top:var(--s6); }
.gro-sub{ margin:0 0 var(--s4); }

.gro-head{
  display:flex; flex-wrap:wrap; gap:var(--s4);
  align-items:flex-end; margin-bottom:var(--s4);
}
.gro-field{ flex:1 1 160px; min-width:140px; margin:0; }

.gro-date{
  width:100%; min-height:46px; padding:0 var(--s3);
  border:1.5px solid var(--line); border-radius:var(--r-md);
  background:var(--bg); color:var(--ink);
  font-family:inherit; font-size:var(--fs-body);
}
.gro-date:focus{ outline:none; border-color:var(--accent); }

/* ตารางทั้งห้องลงมา (แบบ/07 ข้อ 8.4) — จอแคบให้เลื่อนตารางในกรอบของตัวเอง
   ห้ามให้ทั้งหน้าเลื่อนแนวนอน */
.gro-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-lg);
  margin-bottom:var(--s4);
}
.gro-table{
  width:100%; border-collapse:collapse;
  font-size:var(--fs-sm);
}
.gro-table th, .gro-table td{
  padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line);
  text-align:left; vertical-align:middle;
  white-space:nowrap;
}
.gro-table thead th{
  position:sticky; top:0; z-index:1;
  background:var(--bg-soft); color:var(--ink-soft);
  font-weight:500; font-size:var(--fs-xs);
}
.gro-table tbody tr:last-child th,
.gro-table tbody tr:last-child td{ border-bottom:none; }

.gro-seq{ width:56px; color:var(--ink-soft); }
.gro-name{ font-weight:500; white-space:normal; min-width:150px; }

.gro-num{
  width:88px; min-height:44px; padding:0 var(--s2);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--ink);
  font-family:inherit; font-size:var(--fs-body); text-align:right;
}
.gro-num:focus{ outline:none; border-color:var(--accent); }
.gro-pick{ min-width:132px; }

/* ค่าที่บทบาทเขตเห็น — ช่องกรอกไม่ถูกสร้างขึ้นมาเลย ไม่ใช่สร้างแล้วปิดการใช้งาน */
.gro-read{ color:var(--ink-soft); }

.gro-actions{
  display:flex; flex-wrap:wrap; gap:var(--s3);
  margin-top:var(--s4); margin-bottom:var(--s3);
}
.gro-warn, .gro-bad{ margin-bottom:var(--s3); }

/* ════════════════════════════════════════════════════════════════
   T14 — หน้า #/ภาพรวมเขต (คำนำหน้า ovw-)
   หน้านี้อ่านอย่างเดียวทั้งหน้า จึงไม่มีคลาสของช่องกรอกเลยแม้แต่ตัวเดียว
   ════════════════════════════════════════════════════════════════ */

.ovw-page h1{ margin-top:var(--s6); }
.ovw-h{ margin:var(--s6) 0 var(--s3); font-size:var(--fs-h3); }
.ovw-card{ margin-bottom:var(--s4); }
.ovw-lead{ margin:0 0 var(--s2); font-size:var(--fs-h3); font-weight:600; }
.ovw-note{ margin:0; }

/* การ์ดหลักสูตร — เรียงต่อกันได้ไม่จำกัดจำนวน ถ้าวันหนึ่งมีหลักสูตรที่สาม */
.ovw-curs{ display:flex; flex-wrap:wrap; gap:var(--s4); }
.ovw-cur{ flex:1 1 320px; }
.ovw-cur-lab{ margin:0 0 var(--s3); color:var(--accent); }

.ovw-boxes{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.ovw-box{
  flex:1 1 120px; display:flex; flex-direction:column; gap:var(--s1);
  padding:var(--s3); border-radius:var(--r-sm); background:var(--bg-soft);
}
.ovw-num{ font-size:var(--fs-h2); font-weight:700; line-height:1.2; }
.ovw-lab{ font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.35; }

/* จอแคบให้ตารางเลื่อนในกรอบของตัวเอง ห้ามให้ทั้งหน้าเลื่อนแนวนอน */
.ovw-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-lg);
  margin-bottom:var(--s4);
}
.ovw-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.ovw-table th, .ovw-table td{
  padding:var(--s2) var(--s3); border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top;
}
.ovw-table thead th{
  background:var(--bg-soft); color:var(--ink-soft);
  font-weight:500; font-size:var(--fs-xs); white-space:nowrap;
}
.ovw-table tbody tr:last-child th,
.ovw-table tbody tr:last-child td{ border-bottom:none; }

/* แถวคั่นชื่อเครือข่าย — ทำให้ตาราง 78 แถวอ่านออกโดยไม่ต้องมีช่องค้นหา */
.ovw-netrow th{
  background:var(--accent-soft); color:var(--accent);
  font-weight:600; font-size:var(--fs-xs);
}
.ovw-netname{ font-weight:600; white-space:nowrap; }
.ovw-schoolname{ font-weight:500; min-width:210px; }
.ovw-day{ white-space:nowrap; }

.ovw-cells{ display:flex; flex-direction:column; gap:var(--s1); min-width:230px; }
.ovw-cell{ display:flex; align-items:baseline; gap:var(--s2); white-space:nowrap; }

/* รายชื่อยาวได้ถึงเจ็ดสิบกว่าแห่ง — แบ่งเป็นคอลัมน์ตามความกว้างที่มี
   เพื่อไม่ให้ผู้ใช้ต้องเลื่อนผ่านรายการนี้นานกว่าจะถึงตารางรายโรงเรียน
   ใช้ columns ของ CSS ล้วน ไม่ต้องมีปุ่มหรือช่องค้นหาเพิ่มในหน้าที่อ่านอย่างเดียว */
.ovw-list{ margin:var(--s3) 0 0; padding-left:var(--s5); columns:250px; }
.ovw-list li{ margin-bottom:var(--s1); break-inside:avoid; }

/* ════════════════════════════════════════════════════════════════
   T14 — หน้า #/ความเป็นส่วนตัว (คำนำหน้า pri-)
   เอกสารอ่านล้วน เปิดได้โดยไม่ต้องล็อกอิน จึงคุมความกว้างบรรทัดให้อ่านสบายเป็นหลัก
   ════════════════════════════════════════════════════════════════ */

.pri-page{ padding-top:var(--s6); }
.pri-doc{ max-width:38em; }
.pri-h1{ font-size:var(--fs-h2); margin-bottom:var(--s2); }
.pri-org{ margin:0 0 var(--s6); color:var(--ink-soft); }
.pri-h2{ font-size:var(--fs-h3); margin:var(--s6) 0 var(--s2); }
.pri-p{ margin:0 0 var(--s3); }
.pri-list{ margin:0 0 var(--s3); padding-left:var(--s5); }
.pri-list li{ margin-bottom:var(--s1); }
.pri-date{
  margin:var(--s7) 0 0; padding-top:var(--s4);
  border-top:1px solid var(--line); color:var(--ink-soft); font-size:var(--fs-sm);
}
.pri-back{ display:inline-block; margin:var(--s6) 0 var(--s8); }

/* ลิงก์ประกาศที่ท้ายหน้าเข้าระบบ — เล็กและเงียบ ไม่แย่งสายตาจากปุ่มเข้าสู่ระบบ */
.pri-link{ display:block; margin-top:var(--s4); font-size:var(--fs-sm); text-align:center; }

/* ════════════════════════════════════════════════════════════════
   แบบ/06 ข้อ 10 — การเคลื่อนไหว
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}