/* ============================================================
   MMC Share — CSS ล้วน ไม่มีขั้น build
   พอร์ตจาก src/app/globals.css ซึ่งเดิมพึ่ง Tailwind

   ที่มาของดีไซน์: tactile-analytics-interface-DESIGN.md
   ธีมมืดเป็นค่าเริ่มต้น ธีมสว่างสลับด้วย data-theme="light" บน <html>

   หลักที่ยึดทั้งไฟล์:
   1. ลำดับความสำคัญมาจาก "ขนาดกับสี" ไม่ใช่จากการใส่กรอบทุกอย่าง
      ถ้าทุกกล่องมีกรอบเท่ากันหมด สายตาจะไม่รู้ว่าควรอ่านอะไรก่อน
   2. ระยะห่างมาจากบันไดค่าเดียว (4/8/12/16/24/32/48) ห้ามใส่ตัวเลขมั่ว
   3. ทุกอย่างที่กดได้ต้องมีสถานะ hover และ focus ที่มองเห็น
      นี่คือสิ่งที่แยก "เว็บแอป" ออกจาก "หน้าเอกสารที่มีปุ่ม"

   ❗ ของเดิมเขียน utility ของ Tailwind ปนอยู่ในมาร์กอัป (flex, mb-4, text-sm ...)
     ที่นี่ไม่มี Tailwind แล้ว จึงต้องมีคลาสความหมายของตัวเองให้ครบ
     ห้ามเติม utility ทีละตัวตามที่ขาด ไม่งั้นจะได้ Tailwind เวอร์ชันเขียนมือ
     ที่แย่กว่าเดิม — ให้ตั้งชื่อตามบทบาทของสิ่งนั้นบนหน้าจอแทน
   ============================================================ */

:root {
  color-scheme: dark;

  --color-bg: #060b18;
  --color-bg-raised: #0b1224;
  --color-primary: #3b82f6;
  --color-accent: #eab393;
  --color-text-primary: #f2f5fa;
  --color-text-secondary: #98a1b3;
  --color-text-faint: #6b7488;

  --color-ok: #34d399;
  --color-warn: #fbbf24;
  --color-danger: #f87171;

  /* ฟอนต์ที่ระบบใช้ ตามที่เจ้าของระบบกำหนด — ห้ามเพิ่มตัวอื่น
       ไทย     IBM Plex Sans Thai Looped
       อังกฤษ  Inter          เนื้อความและหัวข้อ
               JetBrains Mono ตัวเลข ชื่อไฟล์ ป้ายเทคนิค

     ❗ ห้ามวางฟอนต์ไทยไว้หน้าสุด ไม่งั้นตัวละตินจะไม่ได้ใช้ Inter
       ไฟล์ฟอนต์แยก subset ด้วย unicode-range อยู่แล้ว (ดู fonts.css)
       เบราว์เซอร์จึงหยิบ Inter ให้อักษรละติน และตกมาที่ IBM Plex เฉพาะอักษรไทย
       โดยไม่ต้องแยกคลาสตามภาษา

     ❗ ตัว mono ต้องมีฟอนต์ไทยต่อท้าย — JetBrains Mono ไม่มี glyph ไทยเลย
       ชื่อไฟล์ภาษาไทยจะตกไปใช้ฟอนต์ของเครื่องผู้ใช้ทันทีถ้าไม่ระบุไว้ */
  --font-sans: "Inter", "IBM Plex Sans Thai Looped", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Sans Thai Looped", ui-monospace, monospace;

  /* ❗ ใหญ่กว่าค่ามาตรฐาน (14/12) โดยตั้งใจ — อักษรไทยมีวรรณยุกต์และสระซ้อนบน-ล่าง
     จึงต้องการขนาดมากกว่าอักษรละตินเพื่อให้อ่านสบายเท่ากัน */
  --text-base: 15px;
  --text-sm: 14px;
  --text-xs: 12.5px;
  --text-label: 14px;
  --text-description: 12px;
  --text-meta: 12px;
  --text-status: 13px;
  --text-button: 14px;

  /* บันไดระยะห่าง — ทุกค่าในไฟล์นี้ต้องมาจากที่นี่ */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --radius-card: 12px;
  --radius-control: 8px;
  --radius-pill: 9999px;

  --panel-bg: rgb(255 255 255 / 0.025);
  --panel-border: rgb(148 163 184 / 0.14);
  --nested-bg: rgb(2 6 23 / 0.5);
  --nested-border: rgb(148 163 184 / 0.12);
  --hover-bg: rgb(255 255 255 / 0.04);
  --divider: rgb(148 163 184 / 0.1);
  --logo-ink: #f2f5fa;
  --focus-ring: rgb(59 130 246 / 0.55);
}

/* ธีมสว่าง — ทับเฉพาะค่าสี ไม่แตะโครงสร้าง
   ❗ เฉดสถานะต้องเข้มกว่าธีมมืด เพราะถูกใช้เป็นสีตัวอักษรบนพื้นขาว
     เฉดสดใสของธีมมืดจะได้ contrast ต่ำกว่า 3:1 */
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f6f7f9;
  --color-bg-raised: #ffffff;
  --color-primary: #2563eb;
  --color-accent: #a75c33;
  --color-text-primary: #0f172a;
  --color-text-secondary: #55607a;
  --color-text-faint: #7c8598;

  --color-ok: #047857;
  --color-warn: #b45309;
  --color-danger: #b91c1c;

  --panel-bg: #ffffff;
  --panel-border: rgb(15 23 42 / 0.09);
  /* ต้องเข้มกว่า --panel-bg เสมอ เพื่อให้พื้นผิวซ้อนดู "จม" ลงไปเหมือนธีมมืด */
  --nested-bg: rgb(15 23 42 / 0.035);
  --nested-border: rgb(15 23 42 / 0.08);
  --hover-bg: rgb(15 23 42 / 0.03);
  --divider: rgb(15 23 42 / 0.07);
  --logo-ink: #2f386f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* input/textarea มีความกว้างขั้นต่ำในตัวที่ width:100% ทับไม่ได้
   บนจอแคบมันจะดันคอนเทนเนอร์จนหน้าเลื่อนแนวนอน — บังคับให้ยุบได้ */
input,
textarea,
select,
button {
  min-width: 0;
  font: inherit;
  color: inherit;
}

/* ❗ ทุกอย่างที่โฟกัสได้ต้องเห็นวงโฟกัส ไม่มีข้อยกเว้น
     :focus-visible แสดงเฉพาะตอนใช้คีย์บอร์ด จึงไม่รบกวนคนที่ใช้เมาส์
     การลบวงโฟกัสทิ้งคือการตัดคนที่ใช้คีย์บอร์ดออกจากระบบทั้งระบบ */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

a {
  color: inherit;
}

/* ============================================================
   โครงหน้า
   ============================================================ */

.shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* หัวเว็บติดบนเสมอ — ในเครื่องมือที่ต้องเลื่อนดูรายการยาว ๆ การต้องเลื่อนกลับ
   ขึ้นไปสุดเพื่อเปลี่ยนเมนู คือสิ่งที่ทำให้หน้าเว็บรู้สึกเป็น "เอกสาร" ไม่ใช่ "แอป" */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(12px);
}

.site-header__inner {
  margin: 0 auto;
  display: flex;
  max-width: 1180px;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
}

.site-header__inner--wide {
  max-width: 1320px;
  gap: var(--s5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  /* โลโก้เป็นลิงก์กลับหน้าแรกในหน้าของพนักงาน — ต้องไม่หน้าตาเหมือนลิงก์ในเนื้อหา */
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.brand__name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.brand__org {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

@media (max-width: 720px) {
  .brand__org {
    display: none;
  }
}

/* ไฟล์ mask มีแต่ช่อง alpha — สีจริงมาจาก background-color ตรงนี้ */
.logo-mark {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: var(--logo-ink);
  -webkit-mask: url("/mmc-logo.png") center / contain no-repeat;
  mask: url("/mmc-logo.png") center / contain no-repeat;
}

.main {
  display: flex;
  flex: 1;
  justify-content: center;
  padding: var(--s7) var(--s5);
}

.main--wide {
  padding: var(--s6) var(--s5) var(--s7);
}

/* หน้าที่มีของอยู่ไม่กี่บรรทัด (ตอนนี้คือหน้าเข้าสู่ระบบ) — จัดไว้กลางจอแนวตั้ง
   ไม่ใช่ลอยติดขอบบนโดยมีที่ว่างค้างอยู่ครึ่งจอข้างล่าง

   ❗ ต้องเป็นคลาสแยก ห้ามใส่ align-items ลงใน .main เอง — โครงเดียวกันนี้ใช้กับ
     หน้าของผู้รับภายนอกทุกหน้า ซึ่งเนื้อหายาวกว่าและควรเริ่มจากขอบบนตามเดิม

   ❗ ได้ผลเพราะ .shell สูงอย่างน้อยเต็มจอ และ .main เป็น flex:1 ในนั้น
     ตัว .main จึงมีความสูงเหลือให้กระจายจริง ไม่ใช่สูงเท่าเนื้อหา */
.main--center {
  /* ระยะบนล่างเก็บไว้ในตัวแปรตัวเดียว เพราะมีอีกสองที่ในไฟล์นี้ที่ต้องอ้างถึงมัน
     — ที่ไหนก็ตามที่ .main ถูกตั้งระยะใหม่ ที่นั่นต้องคืนค่าให้สมมาตรด้วย */
  --main-center-pad: var(--s5);
  align-items: center;
  padding-top: var(--main-center-pad);
  padding-bottom: var(--main-center-pad);
}

/* จัดกลางแนวนอนด้วย ไม่ใช่แค่วางกล่องไว้กลางจอแล้วข้างในยังชิดซ้าย
   ❗ .prose มี max-width เป็น ch อยู่ ถ้าไม่ตั้ง margin ซ้ายขวาเป็น auto
     ตัวหนังสือจะกึ่งกลางแต่ "กล่อง" ยังชิดซ้าย ผลคือย่อหน้าเบี้ยวไปทางซ้าย
     ทั้งที่บรรทัดในนั้นดูกลางดี ซึ่งมองไม่ออกจนกว่าข้อความจะยาวพอให้ตัดบรรทัด */
.main--center .main__col { text-align: center; }
.main--center .prose { margin-inline: auto; }

@media (min-width: 768px) {
  .main {
    padding: 72px var(--s5);
  }
  .main--wide {
    padding: var(--s6) var(--s7) var(--s7);
  }
  /* 72px บนล่างของ .main คือสิ่งที่ตรึงเนื้อหาไว้ขอบบน ต้องคืนค่าตรงนี้ด้วย
     ไม่งั้นจัดกลางแล้วยังเห็นเบี้ยวขึ้นบนอยู่ดีเมื่อจอสูงไม่มาก */
  .main--center {
    --main-center-pad: var(--s6);
    /* ❗ ต้องประกาศ padding ซ้ำตรงนี้ ไม่ใช่เปลี่ยนแค่ตัวแปร — .main ในบล็อกเดียวกัน
         ใช้ shorthand ซึ่งมาทีหลังกฎพื้นฐานของเรา ถ้าไม่ประกาศซ้ำ 72px ของมันจะชนะ */
    padding-top: var(--main-center-pad);
    padding-bottom: var(--main-center-pad);
  }
}

.main__col {
  width: 100%;
  max-width: 540px;
}

.main__col--wide {
  max-width: 1320px;
}

/* ============================================================
   ตัวหนังสือ
   ============================================================ */

/* หัวข้อประจำหน้า — ทุกหน้าต้องใช้คลาสนี้ ห้ามเขียนขนาดเองรายหน้า
   ❗ เดิมมี 5 สูตรต่างกันเพราะแต่ละหน้าเขียนแยกกัน */
.h-page {
  font-size: clamp(24px, 2.6vw, 28px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.share-detail-head {
  display: grid;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.share-detail-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
}

.share-detail-head__title {
  display: grid;
  gap: var(--s2);
  min-width: 0;
}

.share-detail-head__title .h-page {
  overflow-wrap: anywhere;
}

.share-detail-head__status {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 0 0 auto;
  padding-bottom: 2px;
}

.share-section-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  font-size: var(--text-base);
  line-height: 1.4;
  font-weight: 600;
}

.share-section-title span {
  display: inline-grid;
  place-items: center;
  min-width: var(--s5);
  padding: 0 var(--s2);
  border-radius: var(--radius-pill);
  background: var(--nested-bg);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.guide-list {
  margin: 0 0 var(--s6);
  padding-left: 1.4rem;
}

.guide-list li {
  margin-bottom: var(--s3);
  line-height: 1.7;
}

.guide-page {
  --guide-surface: var(--color-bg-raised);
  --guide-border: var(--panel-border);
  color: var(--color-text-primary);
}

.guide-hero {
  padding: var(--s6) 0 var(--s5);
  border-bottom: 1px solid var(--divider);
  background: linear-gradient(180deg, rgb(37 99 235 / 0.12), transparent);
}

.guide-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s4);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill);
  background: rgb(59 130 246 / 0.14);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.guide-hero__badge span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}

.guide-hero__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
}

.guide-hero .h-page span {
  color: var(--color-primary);
}

.guide-hero__intro {
  max-width: 680px;
  margin: var(--s3) 0 0;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.guide-print {
  flex: 0 0 auto;
}

.guide-alert {
  display: flex;
  gap: var(--s3);
  max-width: 760px;
  margin-top: var(--s5);
  padding: var(--s4);
  border-left: 4px solid var(--color-warn);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: rgb(251 191 36 / 0.1);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.guide-alert strong:first-child {
  color: var(--color-warn);
  white-space: nowrap;
}

.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--divider);
}

.guide-nav a {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
}

.guide-nav a:hover,
.guide-nav a:focus-visible {
  color: var(--color-primary);
}

.guide-content {
  display: grid;
  gap: var(--s7);
  padding: var(--s7) 0;
}

.guide-section {
  scroll-margin-top: var(--s5);
}

.guide-section__heading {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.guide-section__heading > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  background: rgb(59 130 246 / 0.14);
  color: var(--color-primary);
  font-weight: 700;
}

.guide-section__heading h2 {
  margin: 0;
  font-size: 1.35rem;
}

.guide-card-grid {
  display: grid;
  gap: var(--s4);
}

.guide-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-card,
.guide-panel,
.guide-faq details {
  border: 1px solid var(--guide-border);
  border-radius: var(--radius-card);
  background: var(--guide-surface);
}

.guide-card {
  padding: var(--s5);
}

.guide-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s4);
  border-radius: var(--radius-control);
  font-size: 1.3rem;
  font-weight: 700;
}

.guide-card__icon--blue { background: rgb(59 130 246 / 0.14); color: #60a5fa; }
.guide-card__icon--amber { background: rgb(245 158 11 / 0.14); color: #fbbf24; }
.guide-card__icon--green { background: rgb(16 185 129 / 0.14); color: #34d399; }
.guide-card__icon--indigo { background: rgb(99 102 241 / 0.14); color: #818cf8; }
.guide-card__icon--red { background: rgb(239 68 68 / 0.14); color: #f87171; }
.guide-card__icon--teal { background: rgb(20 184 166 / 0.14); color: #2dd4bf; }

.guide-card h3,
.guide-notice b,
.guide-steps b {
  display: block;
  margin: 0 0 var(--s2);
  font-size: var(--text-base);
  font-weight: 650;
}

.guide-card p,
.guide-notice p,
.guide-steps span,
.guide-faq p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.guide-panel {
  padding: var(--s5);
}

.guide-notice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.guide-notice {
  padding: var(--s4);
  border: 1px solid;
  border-radius: var(--radius-card);
}

.guide-notice--ok { border-color: rgb(52 211 153 / 0.3); background: rgb(52 211 153 / 0.08); }
.guide-notice--warning { border-color: rgb(251 191 36 / 0.3); background: rgb(251 191 36 / 0.08); }

.guide-panel__title {
  margin: var(--s6) 0 var(--s5);
  font-size: var(--text-base);
}

.guide-steps {
  display: grid;
  gap: var(--s5);
  margin: 0;
  padding: 0 0 0 var(--s6);
  border-left: 1px solid var(--divider);
  list-style: none;
}

.guide-steps li {
  position: relative;
}

.guide-steps li::before {
  position: absolute;
  left: calc(-1 * var(--s6) - 12px);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  content: counter(list-item);
  font-size: var(--text-xs);
  font-weight: 700;
}

.guide-faq {
  display: grid;
  gap: var(--s3);
}

.guide-faq details {
  padding: var(--s4) var(--s5);
}

.guide-faq summary {
  cursor: pointer;
  font-weight: 650;
}

.guide-faq p {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--divider);
}

.guide-footer {
  padding: var(--s5) 0;
  border-top: 1px solid var(--divider);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  text-align: center;
}

@media (max-width: 800px) {
  .guide-hero__head,
  .guide-notice-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .guide-card-grid--three,
  .guide-card-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .guide-card-grid--three,
  .guide-card-grid--two {
    grid-template-columns: 1fr;
  }

  .guide-alert {
    display: grid;
  }

  .guide-nav {
    gap: var(--s2) var(--s3);
  }
}

@media print {
  .guide-nav,
  .guide-print {
    display: none;
  }

  .guide-content {
    gap: var(--s5);
    padding-top: var(--s5);
  }

  .guide-card,
  .guide-panel,
  .guide-faq details {
    break-inside: avoid;
    box-shadow: none;
  }
}

.guide-page {
  width: 100%;
}

.guide-hero {
  padding: 0 0 var(--s6);
}

.guide-eyebrow {
  display: inline-block;
  margin: 0 0 var(--s3);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill);
  background: var(--nested-bg);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.guide-lead {
  max-width: 680px;
  margin: var(--s3) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
}

.guide-alert,
.guide-callout {
  display: flex;
  gap: var(--s3);
  max-width: 720px;
  margin: var(--s5) 0 0;
  padding: var(--s4);
  text-align: left;
  border-left: 4px solid var(--color-warning);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--nested-bg);
}

.guide-alert span,
.guide-callout p {
  margin: 0;
}

.guide-section {
  padding: var(--s6) 0 0;
  scroll-margin-top: var(--s6);
}

.guide-heading {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s5);
  font-size: var(--text-base);
  font-weight: 600;
}

.guide-heading span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--nested-bg);
  color: var(--color-primary);
  font-size: var(--text-sm);
}

.guide-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

.guide-cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-card {
  padding: var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.guide-card h3 {
  margin: 0 0 var(--s2);
  font-size: var(--text-base);
}

.guide-card p,
.guide-steps p,
.guide-note,
.guide-faq p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.guide-steps {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding-left: 1.5rem;
}

.guide-steps li {
  padding-left: var(--s2);
}

.guide-steps strong {
  font-size: var(--text-base);
}

.guide-note {
  margin: var(--s4) 0 0;
}

.guide-faq {
  margin-bottom: var(--s3);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.guide-faq summary {
  cursor: pointer;
  font-weight: 600;
}

.guide-faq p {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .guide-cards,
  .guide-cards--two {
    grid-template-columns: 1fr;
  }
}

.guide-hero {
  padding: var(--s6) 0 var(--s7);
  text-align: center;
  border-bottom: 1px solid var(--divider);
  background: linear-gradient(180deg, rgb(37 99 235 / 0.12), transparent);
}

.guide-eyebrow {
  position: relative;
  padding-left: var(--s4);
  background: rgb(59 130 246 / 0.14);
}

.guide-eyebrow::before {
  position: absolute;
  left: var(--s2);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  content: "";
}

.guide-hero .h-page span {
  color: var(--color-primary);
}

.guide-lead {
  max-width: 680px;
  margin-inline: auto;
  line-height: 1.7;
}

.guide-alert {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 760px;
  min-height: 128px;
  margin-inline: auto;
  border: 2px solid var(--color-danger, #dc2626);
  border-left-width: 2px;
  border-radius: var(--radius-card);
  background: var(--guide-surface, var(--color-bg-raised));
  color: var(--color-danger, #b91c1c);
  box-shadow: 0 4px 16px rgb(2 6 23 / 0.08);
  text-align: center;
}

.guide-alert__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0 auto var(--s2);
  border-radius: 50%;
  background: rgb(220 38 38 / 0.14);
  color: var(--color-danger, #b91c1c);
  font-weight: 700;
}

.guide-alert strong:first-child {
  color: var(--color-danger, #b91c1c);
  font-weight: 700;
}

.guide-alert p {
  margin: var(--s1) 0 0;
  color: var(--color-danger, #b91c1c);
  font-weight: 600;
}

.guide-section {
  padding-top: var(--s7);
}

.guide-heading {
  font-size: 1.35rem;
  line-height: 1.4;
}

.guide-heading span {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-control);
  background: rgb(59 130 246 / 0.14);
}

.guide-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

.guide-card {
  padding: var(--s5);
  border-color: var(--panel-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-raised);
  box-shadow: 0 4px 16px rgb(2 6 23 / 0.06);
}

.guide-card:hover {
  border-color: var(--color-primary);
}

.guide-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--s4);
  border-radius: var(--radius-control);
  font-size: 1.25rem;
  font-weight: 700;
}

.guide-card__icon--blue { background: rgb(59 130 246 / 0.14); color: #60a5fa; }
.guide-card__icon--amber { background: rgb(245 158 11 / 0.14); color: #fbbf24; }
.guide-card__icon--green { background: rgb(16 185 129 / 0.14); color: #34d399; }
.guide-card__icon--indigo { background: rgb(99 102 241 / 0.14); color: #818cf8; }
.guide-card__icon--red { background: rgb(239 68 68 / 0.14); color: #f87171; }
.guide-card__icon--teal { background: rgb(20 184 166 / 0.14); color: #2dd4bf; }

.guide-card p,
.guide-steps p,
.guide-faq p {
  font-size: var(--text-sm);
  line-height: 1.7;
}

.guide-panel {
  padding: var(--s5);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-raised);
}

.guide-notices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}

.guide-callout {
  max-width: none;
  margin: 0;
  border: 1px solid;
  border-left-width: 1px;
  border-radius: var(--radius-card);
  box-shadow: none;
}

.guide-callout > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 700;
}

.guide-callout--ok {
  border-color: rgb(52 211 153 / 0.3);
  background: rgb(52 211 153 / 0.08);
}

.guide-callout--ok > span {
  background: rgb(52 211 153 / 0.16);
  color: var(--color-ok);
}

.guide-callout--warning {
  border-color: rgb(251 191 36 / 0.3);
  background: rgb(251 191 36 / 0.08);
}

.guide-callout--warning > span {
  background: rgb(251 191 36 / 0.16);
  color: var(--color-warn);
}

.guide-panel__title {
  margin: var(--s6) 0 var(--s5);
  font-size: var(--text-base);
}

.guide-steps--timeline {
  gap: var(--s5);
  padding-left: var(--s6);
  border-left: 1px solid var(--divider);
  list-style: none;
}

.guide-steps--timeline li {
  position: relative;
  padding-left: 0;
}

.guide-steps--timeline li::before {
  position: absolute;
  left: calc(-1 * var(--s6) - 12px);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  content: counter(list-item);
  font-size: var(--text-xs);
  font-weight: 700;
}

.guide-faq {
  margin-bottom: var(--s3);
  border-color: var(--panel-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-raised);
}

.guide-faq p {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top-color: var(--divider);
}

.guide-footer {
  margin-top: var(--s7);
  padding: var(--s5) 0;
  border-top: 1px solid var(--divider);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  text-align: center;
}

@media (max-width: 800px) {
  .guide-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-notices {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .guide-cards,
  .guide-cards--two {
    grid-template-columns: 1fr;
  }

  .guide-alert {
    display: flex;
  }
}

.share-link--primary {
  padding-bottom: var(--s5);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--divider);
}

.share-recipients-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s4);
}

.share-recipients-panel__title {
  min-width: 0;
}

.share-recipients-panel .row-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
}

.share-recipients-panel .row-item > :first-child {
  min-width: 0;
  flex-basis: 100%;
}

/* หัวข้อของกล่อง — เล็กและเงียบ หน้าที่คือบอกว่ากล่องนี้คืออะไร ไม่ใช่แย่งสายตา
   ❗ เดิมเป็น mono ตัวใหญ่ letter-spacing กว้างตาม design source แต่
     text-transform: uppercase ไม่มีผลกับภาษาไทยเลย เหลือแค่ mono ที่อ่านยาก */
.label {
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 0;
}

.description {
  font-size: var(--text-description);
  font-weight: 400;
  line-height: 1.5;
}

.meta {
  font-size: var(--text-meta);
  font-weight: 400;
}

.status {
  font-size: var(--text-status);
  font-weight: 500;
}

.page-empty-title {
  font-size: 20px;
  font-weight: 500;
}

.user-identity {
  font-size: 24px;
}

.page-subtitle {
  margin-top: 0;
}

.panel--danger {
  border-color: rgb(248 113 113 / 0.45);
}

.panel--warning {
  border-color: rgb(234 179 147 / 0.35);
}

.panel--danger-strong {
  border-color: rgb(248 113 113 / 0.4);
}

.btn-danger-soft {
  border-color: rgb(248 113 113 / 0.4);
}

.label-nowrap {
  display: flex;
  align-items: center;
  gap: var(--s2);
  white-space: nowrap;
}

.warning-copy {
  max-width: 52ch;
}

.admin-page--standard-text {
  font-size: var(--text-base);
}

.admin-page--centered {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.admin-page--wide {
  max-width: 1320px;
}

.admin-page--centered .panel-narrow {
  max-width: none;
}

.admin-page--standard-text .label,
.admin-page--standard-text .meta,
.admin-page--standard-text .description,
.admin-page--standard-text .status,
.admin-page--standard-text .field-label,
.admin-page--standard-text .field {
  font-size: var(--text-base);
}

.mail-result-list {
  margin: 0;
  padding-left: 18px;
}

.mail-result-reason {
  display: block;
}

.status-message {
  margin: 0;
}

.maintenance-done {
  margin: 0 0 var(--s2);
}

.maintenance-value {
  margin: 4px 0;
}

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

.copy-row__field {
  flex: 1;
  min-width: 0;
}

.copy-row__button {
  flex-shrink: 0;
}

.copy-row__footnote {
  margin: var(--s3) 0 0;
}

.upload-file-name {
  flex: 1;
}

.upload-file-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.upload-result-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 var(--s2);
}

.upload-result-warning {
  margin: 0 0 var(--s4);
}

.upload-result-back {
  margin-top: 24px;
}

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

.inline-start {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
}

.modal__actions {
  gap: var(--s2);
}

.form-narrow {
  max-width: 42ch;
}

.panel-narrow {
  max-width: 620px;
}

.truncate-block {
  display: block;
}

.text-pre {
  white-space: pre-wrap;
}

.removed {
  text-decoration: line-through;
}

.no-margin {
  margin: 0;
}

.min-zero {
  min-width: 0;
}

.flex-fill {
  flex: 1;
}

.panel-nested--compact {
  padding: var(--s3);
}

.field-checkbox {
  margin-top: var(--s1);
}

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.drop-hint {
  margin-top: 0;
}

.description-inline {
  display: block;
  margin-top: var(--s1);
}

.form-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}

.form-check input {
  margin-top: var(--s1);
}

.empty-hint {
  max-width: 52ch;
  margin: 0 0 var(--s5);
}

.share-note {
  max-width: 60ch;
  margin: 0;
}

.scan-file {
  margin-top: var(--s3);
}

.meter progress {
  display: block;
  width: 100%;
  height: 12px;
  accent-color: var(--color-primary);
}

.muted { color: var(--color-text-secondary); }
.faint { color: var(--color-text-faint); }

.prose {
  max-width: 46ch;
  line-height: 1.7;
  color: var(--color-text-secondary);
}

.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.btn { font-size: var(--text-button); }
.signin-version { font-size: 10px; }
.text-danger { color: var(--color-danger); }
.text-warn { color: var(--color-warn); }
.text-ok { color: var(--color-ok); }
.text-accent { color: var(--color-accent); }
.mono { font-family: var(--font-mono); }

/* ตัวเลขล้วน — tabular-nums ทำให้หลักตรงกันเมื่อเรียงเป็นรายการ */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   พื้นผิว
   ============================================================ */

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  padding: var(--s5);
}

.panel-nested {
  background: var(--nested-bg);
  border: 1px solid var(--nested-border);
  border-radius: var(--radius-control);
}

/* ============================================================
   ปุ่ม
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  border-radius: var(--radius-control);
  padding: 9px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    transform 80ms ease;
}

/* กดแล้วยุบนิดเดียว — สัญญาณว่า "รับคำสั่งแล้ว" ที่ไม่ต้องรอเซิร์ฟเวอร์ตอบ */
.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled) { background: #2f74e8; border-color: #2f74e8; }
:root[data-theme="light"] .btn-primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }

.btn-ghost {
  background: transparent;
  border-color: var(--panel-border);
  color: var(--color-text-primary);
}

.btn-ghost:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: rgb(148 163 184 / 0.3);
}

.btn-block { width: 100%; }

/* ปุ่ม "เข้าสู่ระบบด้วย Microsoft" — ตามแนวทางแบรนด์ของ Microsoft identity platform
   (learn.microsoft.com/entra/identity-platform/howto-add-branding-in-apps)

   ค่าทุกตัวถอดมาจากไฟล์ต้นฉบับที่ Microsoft แจกเอง (ms-symbollockup_signin_light.svg
   และ _dark.svg ขนาด 215x41) ไม่ได้กะเอาจากรูป:
     สูง 41px · โลโก้ 19x19 เริ่มที่ 12px จากขอบใน · ตัวอักษร 15px
     ธีมสว่าง  พื้น #ffffff  ขอบ #8c8c8c  ตัวอักษร #5e5e5e
     ธีมมืด    พื้น #2f2f2f  ไม่มีขอบ     ตัวอักษร #ffffff

   ❗ จงใจไม่ใช้ตัวแปรสีของธีมเราเลยสักตัว และไม่มีมุมโค้ง — ปุ่มนี้ไม่ใช่ปุ่มของเรา
     มันคือเครื่องหมายว่า "ตัวตนอยู่ที่ Microsoft" ถ้าแต่งให้กลมกลืนกับหน้าเว็บเรา
     มันก็เลิกทำหน้าที่นั้น และผิดแนวทางที่ Microsoft เขียนไว้ไปพร้อมกัน

   ❗ ห้ามแตะโลโก้ — เอกสารเขียนไว้ตรง ๆ ว่า DON'T alter the Microsoft logo
     ตัว svg ในหน้า signin.php คัดมาทั้งก้อนจากไฟล์ทางการ ห้ามแก้สีหรือสัดส่วน */
.btn-ms {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 41px;
  /* ซ้าย 12px ให้ตรงกับตำแหน่งโลโก้ในไฟล์ต้นฉบับเป๊ะ ขวา 20px ตามที่ต้นฉบับเว้นไว้ */
  padding: 0 20px 0 12px;
  border: 1px solid #8c8c8c;
  border-radius: 0;
  background: #ffffff;
  color: #5e5e5e;
  /* Segoe UI มาก่อนเพื่อให้อักษรละตินออกมาเหมือนของ Microsoft ส่วนภาษาไทยที่ Segoe UI
     ไม่มีจะตกมาที่ฟอนต์ของเราเองตามปกติ */
  font-family: "Segoe UI", var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* ❗ สองบรรทัดนี้เป็นค่าที่เราตั้งเอง ไม่ได้มาจากไฟล์ของ Microsoft
     เอกสารกับไฟล์ svg ไม่ได้บอกสีตอนชี้หรือตอนกดไว้เลย ที่เลือกมาคือสีเทาที่เข้มขึ้น
     ทีละขั้นจากพื้นปุ่ม พอให้รู้ว่ากดได้ โดยไม่แตะสีหลักสามค่าที่เอกสารกำหนด */
.btn-ms:hover { background: #f3f3f3; }
.btn-ms:active { background: #ededed; }

/* ❗ กล่องโลโก้ต้องกว้าง 21px คงที่ ไม่ใช่ปล่อยให้ flex บีบ
     ไฟล์ทางการมีขอบใส 1px รอบสี่เหลี่ยม 19x19 อยู่ในตัว ระยะ 12px ข้างบนจึงพอดี */
.btn-ms__logo {
  display: block;
  width: 21px;
  height: 21px;
  flex: none;
}

:root[data-theme="dark"] .btn-ms {
  background: #2f2f2f;
  border-color: transparent;
  color: #ffffff;
}

:root[data-theme="dark"] .btn-ms:hover { background: #3d3d3d; }
:root[data-theme="dark"] .btn-ms:active { background: #4a4a4a; }


/* ปุ่มที่เป็นข้อความล้วน — ใช้ในแถวรายการที่มีปุ่มหลายตัวติดกัน
   ถ้าใช้ปุ่มเต็มรูปแบบตรงนั้น แถวจะกลายเป็นแถบปุ่มจนอ่านชื่อไฟล์ไม่ออก */
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color 140ms ease;
}

.btn-link:hover:not(:disabled) { color: var(--color-text-primary); }
.btn-link:disabled { opacity: 0.45; cursor: not-allowed; }

.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 32px;
  padding: 4px;
  border-radius: var(--radius-control);
  text-decoration: none;
  font-size: 20px;
  color: var(--color-text-secondary);
}

.icon-action:hover,
.icon-action:focus-visible {
  color: var(--color-text-primary);
  background: var(--nested-bg);
}

.icon-action.text-danger {
  color: var(--color-danger);
}

.icon-action__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ปุ่มสลับธีมรูปหลอดไฟ — พื้นที่กดต้องใหญ่กว่าตัวไอคอน
   ❗ ไอคอน 18px ล้วน ๆ เล็กเกินกว่าจะกดถูกบนมือถือ (แนะนำกันที่ ~40px)
     จึงให้ตัวลิงก์เป็นวงกลม 32px แล้ววางไอคอนไว้กลาง */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--color-text-secondary);
  transition: color 140ms ease, background-color 140ms ease;
}

/* ❗ ไม่มี token ชื่อ surface-hover ในระบบนี้ — ผสมสีเอาจากพื้นที่ยกขึ้น
     เพื่อให้ใช้ได้ทั้งธีมสว่างและธีมมืดโดยไม่ต้องนิยามสีเพิ่มสองที่ */
.theme-toggle:hover {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-bg-raised) 70%, var(--color-text-primary) 8%);
}
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* รัศมีรอบหลอดจางกว่าตัวหลอด เพื่อให้รูปทรงหลอดยังอ่านออกในขนาดเล็ก */
.theme-toggle__rays { opacity: 0.65; }

/* ============================================================
   ช่องกรอก
   ============================================================ */

.field {
  width: 100%;
  padding: 9px var(--s3);
  font-size: var(--text-sm);
  background: var(--nested-bg);
  border: 1px solid var(--nested-border);
  border-radius: var(--radius-control);
  outline: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.field:hover:not(:disabled) { border-color: rgb(148 163 184 / 0.22); }

.field:focus {
  border-color: var(--color-primary);
  background: var(--color-bg-raised);
}

.field:disabled { opacity: 0.55; cursor: not-allowed; }

.field-lg {
  padding: var(--s3) var(--s4);
  font-size: 16px;
}

/* ช่องกรอกรหัส OTP — เว้นระยะให้เห็นเป็นตัว ๆ ไม่ใช่ก้อนเดียว */
.field-otp {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.45em;
  /* letter-spacing ดันตัวอักษรไปทางขวา — ชดเชยให้กลับมาอยู่กลางจริง */
  text-indent: 0.45em;
}

.field-label {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--text-sm);
  font-weight: 500;
}

textarea.field {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  resize: vertical;
  line-height: 1.6;
}

select.field {
  /* หน้าตาเริ่มต้นของ select ต่างกันมากในแต่ละเบราว์เซอร์ — บังคับให้เหมือนช่องอื่น
     แล้ววาดลูกศรเอง ไม่งั้นแถบตัวกรองจะดูเป็นของคนละชุด */
  appearance: none;
  padding-right: var(--s6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
}

/* ============================================================
   ป้ายสถานะ
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  border-radius: var(--radius-pill);
  border: 1px solid var(--panel-border);
  padding: 2px var(--s2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.pill--ok { border-color: rgb(52 211 153 / 0.35); color: var(--color-ok); background: rgb(52 211 153 / 0.07); }
.pill--warn { border-color: rgb(251 191 36 / 0.35); color: var(--color-warn); background: rgb(251 191 36 / 0.07); }
.pill--danger { border-color: rgb(248 113 113 / 0.35); color: var(--color-danger); background: rgb(248 113 113 / 0.07); }

/* ============================================================
   ปุ่มเปลี่ยนภาษา
   ============================================================ */

.locale-switch {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--panel-border);
}

.locale-switch a {
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text-faint);
  transition: color 140ms ease, background-color 140ms ease;
}

.locale-switch a:hover { color: var(--color-text-primary); }

.locale-switch a[aria-current="true"] {
  background: var(--color-primary);
  color: #ffffff;
}

/* ============================================================
   เมนูหลักและแถบผู้ใช้
   ============================================================ */

.mainnav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
}

.mainnav a {
  padding: 6px var(--s3);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: background-color 140ms ease, color 140ms ease;
}

.mainnav a:hover {
  color: var(--color-text-primary);
  background: var(--hover-bg);
}

.mainnav a[aria-current="page"] {
  color: var(--color-text-primary);
  background: var(--hover-bg);
  font-weight: 500;
}

/* เมนูบนซ่อนบนจอแคบ — แทนที่ด้วยแถบล่าง .tabbar ไม่ได้ตัดทางเข้าทิ้ง

   ❗ ตัวเลขนี้ต้องเท่ากับบล็อกของ .tabbar ท้ายไฟล์เสมอ ถ้าที่นี่กว้างกว่า
     จะมีช่วงความกว้างที่เมนูบนถูกซ่อนไปแล้วแต่แถบล่างยังไม่โผล่ — ไปไหนไม่ได้เลย */
@media (max-width: 1024px) {
  .mainnav { display: none; }
}


.usermenu {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-shrink: 0;
}

.usermenu form { margin: 0; }

.usermenu__who {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

@media (max-width: 720px) {
  .usermenu__who { display: none; }
}

/* ============================================================
   หัวหน้าเพจ
   ============================================================ */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: var(--s6);
}

/* ============================================================
   การ์ดตัวเลขสรุป
   ============================================================ */

.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s5);
}

@media (min-width: 900px) {
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* การ์ดสรุปเตี้ยกว่ากล่องเนื้อหา — มันมีข้อมูลแค่สองบรรทัด
   การให้ padding เท่ากับกล่องที่มีรายการยาว ๆ ทำให้หน้าดูโหวงและต้องเลื่อนเกินจำเป็น */
.metrics .panel { padding: var(--s4); }

/* ❗ ต้องไม่ใหญ่กว่าหัวข้อหน้าที่จอแคบสุด ไม่งั้นตัวเลขบนการ์ดจะเด่นกว่าชื่อหน้า
   ลำดับความสำคัญกลับหัว */
.metric-value {
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin: var(--s2) 0 0;
  letter-spacing: -0.01em;
}

.metric-value--ok { color: var(--color-ok); }
.metric-value--warn { color: var(--color-warn); }
.metric-value--primary { color: var(--color-primary); }

/* Admin dashboard: keep the overview scannable without changing the shared panel language. */
.admin-dashboard {
  display: grid;
  gap: var(--s5);
}

.admin-dashboard__head {
  margin-bottom: var(--s2);
}

.admin-dashboard__head .page-subtitle {
  margin-bottom: 0;
}

.admin-dashboard__hero,
.admin-dashboard__section {
  margin-bottom: 0;
}

.admin-dashboard__hero .panel {
  min-height: 112px;
}

.admin-dashboard__section {
  padding: var(--s5);
}

.admin-dashboard__section > .h-section,
.admin-dashboard__section > .label {
  margin-top: 0;
}

.admin-dashboard__bandwidth {
  margin: 0;
}

.admin-dashboard__bandwidth .panel {
  min-height: 104px;
}

.admin-dashboard__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

.admin-dashboard__split .panel {
  min-width: 0;
  margin: 0;
}

.admin-dashboard__maintenance {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s5);
}

.admin-dashboard__maintenance .description {
  margin-bottom: 0;
}

.admin-dashboard__maintenance .btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.admin-dashboard__maintenance .panel-nested {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .admin-dashboard { gap: var(--s4); }
  .admin-dashboard__section { padding: var(--s4); }
  .admin-dashboard__split { grid-template-columns: 1fr; gap: var(--s4); }
  .admin-dashboard__maintenance {
    display: block;
  }
  .admin-dashboard__maintenance .btn {
    margin-top: var(--s4);
  }
}

/* ============================================================
   รายการแชร์
   ============================================================ */

.share-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--s4) var(--s5);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.share-card:hover {
  border-color: rgb(148 163 184 / 0.3);
  background: var(--hover-bg);
}

.share-card + .share-card { margin-top: var(--s2); }

.share-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.share-card__stats {
  display: flex;
  flex-shrink: 0;
  gap: var(--s5);
  margin: 0;
}

.share-card__stats > div { text-align: right; }

.share-card__stats dd {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   แถวข้อมูล — ใช้แทนตาราง เพราะต้องยุบลงจอมือถือได้
   ============================================================ */

.rows > * {
  border-bottom: 1px solid var(--divider);
  padding: var(--s3) 0;
}

.rows > *:first-child { padding-top: 0; }
.rows > *:last-child { border-bottom: 0; padding-bottom: 0; }

.file-table {
  width: 100%;
  overflow-x: auto;
}

.file-table__head,
.file-table__row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(75px, .6fr) minmax(84px, .6fr) minmax(130px, auto);
  align-items: center;
  gap: var(--s3);
  min-width: 650px;
}

.file-table__head {
  padding: 0 var(--s3) var(--s2);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.file-table__row {
  position: relative;
  padding: var(--s3);
  border-top: 1px solid var(--divider);
}

.file-table__name,
.file-table__stats,
.file-table__actions {
  min-width: 0;
}

.file-table__name {
  display: grid;
  gap: var(--s1);
}

.file-table__filename {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
}

.file-table__mobile-label { display: none; }

.file-table__stats {
  display: grid;
  gap: 3px;
}

.file-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  flex-wrap: wrap;
}

.file-table__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.file-table__link [data-result] {
  flex-basis: 100%;
  min-width: 220px;
}

/* กลุ่มลิงก์/ปุ่มท้ายแถวของหน้าแอดมิน — เคยเป็น inline style ซ้ำกัน 6 ที่ */
.row-actions {
  display: flex;
  align-items: center;
  gap: var(--s4);
  /* ❗ ห้ามใส่ flex-shrink: 0 กลับเข้ามา
       ของเดิมใส่ไว้เพื่อไม่ให้ปุ่มถูกบีบบนจอกว้าง แต่บนจอ 390px มันดันแถวให้กว้าง
       เกินจอไป 83px แล้วทั้งหน้าเลื่อนซ้ายขวาได้ — ปุ่ม "ลบไฟล์" หลุดออกนอกจอ
       จนกดไม่ได้ ให้มันขึ้นบรรทัดใหม่แทน อ่านง่ายกว่าและไม่มีอะไรหาย */
  flex-wrap: wrap;
}

.row-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  min-height: 26px;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.audit-log-list {
  display: grid;
  gap: 0;
}

.audit-log {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--divider);
}

.audit-log:first-child { padding-top: 0; }
.audit-log:last-child { padding-bottom: 0; border-bottom: 0; }

.audit-log__main {
  display: grid;
  gap: var(--s2);
  min-width: 0;
}

.audit-log__heading,
.audit-log__meta,
.audit-log__details,
.audit-log__file {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}

.audit-log__heading {
  justify-content: space-between;
  gap: var(--s4);
}

.audit-log__event {
  color: var(--color-text);
  font-size: var(--text-base);
}

.audit-log__badge {
  display: inline-flex;
  margin-left: var(--s2);
  padding: 2px 7px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  vertical-align: middle;
}

.audit-log__time,
.audit-log__meta,
.audit-log__details,
.audit-log__deleted {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.audit-log__file {
  color: var(--color-text);
  font-size: var(--text-base);
}

.audit-log__label {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.audit-log__details {
  gap: var(--s2) var(--s4);
  color: var(--color-text-secondary);
}

.audit-log__actions {
  flex: 0 0 auto;
}

.audit-log__share {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--divider);
  border-radius: var(--radius-control);
  color: var(--color-primary);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.audit-log__share:hover { background: var(--hover-bg); }

/* ============================================================
   หน้ารายละเอียด
   ============================================================ */

.detail-grid {
  display: grid;
  gap: var(--s4);
  /* grid item มี min-width:auto โดยปริยาย เนื้อหายาว ๆ (อีเมล/ชื่อไฟล์) จะดันจนล้นจอแคบ */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* ❗ 1025 ไม่ใช่ 1024 — ที่ 1024 พอดีหน้าเว็บยังอยู่ในโหมดมือถือ (ดูบล็อกท้ายไฟล์)
     ถ้าใช้ 1024 ทั้งสองบล็อกจะติดพร้อมกันที่ความกว้างนั้น ได้คอลัมน์ข้าง 360px
     บนหน้าที่ตั้งใจให้เป็นคอลัมน์เดียว */
@media (min-width: 1025px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) 360px; }
}

@media (max-width: 1024px) {
  .detail-grid > :last-child { order: -1; }
}

.stack-4 > * + * { margin-top: var(--s4); }

/* ❗ [hidden] ต้องชนะเสมอ ไม่ว่าคลาสไหนจะตั้ง display ไว้ก็ตาม
     กฎ [hidden] { display: none } ของเบราว์เซอร์เจาะจงเท่ากับ .actions หรือ .rows
     แต่เป็นสไตล์ของเบราว์เซอร์ ซึ่งแพ้สไตล์ของผู้เขียนเสมอเมื่อเจาะจงเท่ากัน
     ผลคือของที่โค้ดสั่งซ่อนไว้กลับโผล่ออกมา — ปุ่ม "เริ่มอัปโหลด" แสดงตั้งแต่ยังไม่ได้
     เลือกไฟล์สักไฟล์ กดแล้วก็ไม่มีอะไรเกิดขึ้น เพราะฝั่ง JS ถือว่ามันยังไม่ควรมีอยู่ */
[hidden] { display: none !important; }

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

.actions-center { justify-content: center; }
.actions-center .btn {
  min-width: 112px;
}

.admin-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  background: var(--nested-bg);
}

.admin-subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 13px;
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.admin-subnav__link:hover,
.admin-subnav__link:focus-visible {
  background: var(--hover-bg);
  color: var(--color-text-primary);
}

.admin-subnav__link.is-active {
  background: var(--color-primary);
  color: #fff;
}

#share-actions .actions-center {
  gap: var(--s3);
  margin-top: var(--s2);
}

#share-actions .field-label {
  font-size: 13px;
}

#share-actions textarea.field {
  font-size: 13px;
}

#share-actions .divider-top {
  padding-top: var(--s5);
  margin-top: var(--s6);
}

#share-actions .share-link--primary { margin-bottom: var(--s5); }

#share-actions .share-link .btn,
#share-actions > .divider-top > .share-action-btn {
  min-height: 42px;
}

#share-actions .share-action-btn--revoke + .share-action-btn--delete {
  margin-top: var(--s3);
}

.scan-progress { width:100%; min-width:0; }
.scan-progress__label { display:flex; justify-content:space-between; gap:12px; margin-bottom:6px; font-size:13px; }
.scan-progress progress { display:block; width:100%; max-width:100%; height:14px; accent-color:var(--primary); }

.divider-top {
  border-top: 1px solid var(--divider);
  padding-top: var(--s4);
  margin-top: var(--s5);
}

/* ============================================================
   กล่องกลางจอ
   ============================================================ */

/* ใช้ <dialog> ของเบราว์เซอร์เอง ไม่ประกอบขึ้นใหม่จาก div
   ได้ focus trap, ปิดด้วย Esc และ ::backdrop มาให้ฟรี */
dialog.modal {
  margin: auto;
  width: min(92vw, 420px);
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-card);
  background: var(--color-bg-raised);
  color: var(--color-text-primary);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6);
}

:root[data-theme="light"] dialog.modal {
  box-shadow: 0 24px 60px -24px rgb(15 23 42 / 0.28);
}

dialog.modal::backdrop {
  background: rgb(2 6 23 / 0.6);
  backdrop-filter: blur(2px);
}

.upload-progress-modal {
  width: min(92vw, 360px);
  text-align: center;
}

.upload-progress-ring {
  --progress: 0%;
  width: 112px;
  height: 112px;
  margin: 0 auto var(--s4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--color-primary) var(--progress), rgb(148 163 184 / 0.2) 0);
  position: relative;
  font-size: 20px;
  font-weight: 600;
}

.upload-progress-ring--p-0 { --progress: 0%; }
.upload-progress-ring--p-10 { --progress: 10%; }
.upload-progress-ring--p-20 { --progress: 20%; }
.upload-progress-ring--p-30 { --progress: 30%; }
.upload-progress-ring--p-40 { --progress: 40%; }
.upload-progress-ring--p-50 { --progress: 50%; }
.upload-progress-ring--p-60 { --progress: 60%; }
.upload-progress-ring--p-70 { --progress: 70%; }
.upload-progress-ring--p-80 { --progress: 80%; }
.upload-progress-ring--p-90 { --progress: 90%; }
.upload-progress-ring--p-100 { --progress: 100%; }

.upload-progress-ring--scanning {
  background: conic-gradient(#c2185b var(--progress), rgb(148 163 184 / 0.2) 0);
}

.upload-progress-ring--indeterminate {
  background: conic-gradient(#c2185b 25%, rgb(148 163 184 / 0.2) 0);
}

.upload-progress-ring--queued {
  background: conic-gradient(#c2185b 25%, rgb(148 163 184 / 0.2) 0);
}

.upload-progress-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--color-bg-raised);
}

.upload-progress-ring span {
  position: relative;
  z-index: 1;
}

.upload-progress-name {
  overflow-wrap: anywhere;
  margin: 0 0 var(--s2);
}

.upload-progress-count {
  margin: 0 0 var(--s2);
}

.upload-progress-modal[open] .upload-progress-ring {
  animation: upload-progress-pulse 1.8s ease-in-out infinite;
}

.upload-progress-modal[open] .upload-progress-ring--queued {
  animation: upload-progress-queue 1.4s linear infinite;
}

@keyframes upload-progress-pulse {
  50% { transform: scale(1.03); }
}

@keyframes upload-progress-queue {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .upload-progress-modal[open] .upload-progress-ring {
    animation: none;
  }
}

.modal__body { padding: var(--s5); }

.modal__title {
  margin: 0 0 var(--s2);
  font-size: 16px;
  font-weight: 600;
}

.modal__title--danger { color: var(--color-danger); }

.modal__actions {
  margin-top: var(--s5);
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
}

.modal__actions--centered {
  justify-content: center;
}

.modal__actions--centered .btn {
  min-width: 128px;
}

.share-file-delete-actions {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s3);
}

.share-file-delete-actions .btn {
  justify-content: center;
}

.file-delete-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  padding: 0;
  border-radius: var(--radius-control);
  color: var(--color-danger);
  background: transparent;
  cursor: pointer;
  line-height: 1;
}

.file-delete-icon:hover,
.file-delete-icon:focus-visible {
  color: var(--color-danger-strong, #b42318);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  outline: 2px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
  outline-offset: 1px;
}

.file-action-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid var(--nested-border);
  border-radius: var(--radius-control);
  background: var(--nested-bg);
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
}

.file-action-icon::before {
  content: none;
}

.file-action-icon .material-symbols-outlined,
.file-delete-icon .material-symbols-outlined {
  font-size: 20px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.file-action-icon:hover,
.file-action-icon:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-bg-raised);
  outline: 2px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  outline-offset: 1px;
}

.file-action-icon--revoke {
  color: var(--color-danger);
}

.file-action-icon--download {
  color: var(--color-accent);
}

.share-action-btn {
  border-color: transparent;
  font-weight: 600;
}

.share-action-btn--edit {
  background: #eef8f2;
  border-color: #c7e6d2;
  color: #2f6f4e;
}

.share-action-btn--edit:hover:not(:disabled) {
  background: #e0f2e7;
  border-color: #a9d6b9;
}

.share-action-btn--copy {
  background: #e8f2ff;
  border-color: #c9def8;
  color: #24558f;
}

.share-action-btn--copy:hover:not(:disabled) {
  background: #dcecff;
  border-color: #accbf2;
}

.share-action-btn--revoke {
  background: #fff0ed;
  border-color: #f4c8c0;
  color: #a34b42;
}

.share-action-btn--revoke:hover:not(:disabled) {
  background: #ffe4df;
  border-color: #edaaa0;
}

.share-action-btn--delete {
  background: #f5efff;
  border-color: #d9c9f0;
  color: #704f94;
}

.share-action-btn--delete:hover:not(:disabled) {
  background: #ede2ff;
  border-color: #c6afe6;
}

:root[data-theme="dark"] .share-action-btn--edit {
  background: rgb(134 239 172 / 0.14);
  border-color: rgb(134 239 172 / 0.35);
  color: #bbf7d0;
}

:root[data-theme="dark"] .share-action-btn--edit:hover:not(:disabled) {
  background: rgb(134 239 172 / 0.22);
}

:root[data-theme="dark"] .share-action-btn--copy {
  background: rgb(147 197 253 / 0.14);
  border-color: rgb(147 197 253 / 0.35);
  color: #bfdbfe;
}

:root[data-theme="dark"] .share-action-btn--copy:hover:not(:disabled) {
  background: rgb(147 197 253 / 0.22);
}

:root[data-theme="dark"] .share-action-btn--revoke {
  background: rgb(252 165 165 / 0.14);
  border-color: rgb(252 165 165 / 0.35);
  color: #fecaca;
}

:root[data-theme="dark"] .share-action-btn--revoke:hover:not(:disabled) {
  background: rgb(252 165 165 / 0.22);
}

:root[data-theme="dark"] .share-action-btn--delete {
  background: rgb(196 181 253 / 0.14);
  border-color: rgb(196 181 253 / 0.35);
  color: #ddd6fe;
}

:root[data-theme="dark"] .share-action-btn--delete:hover:not(:disabled) {
  background: rgb(196 181 253 / 0.22);
}

/* รายชื่ออีเมลในกล่องยืนยัน — ที่อยู่ยาวต้องตัดบรรทัดได้ ไม่ใช่ดันกล่องให้กว้างเกินจอ */
.mail-list {
  margin: var(--s3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-primary);
  word-break: break-all;
}

.mail-list--failed { color: var(--color-warn); }

/* ============================================================
   หน้าอัปโหลด
   ============================================================ */

.dropzone {
  border: 1px dashed rgb(148 163 184 / 0.3);
  border-radius: var(--radius-card);
  padding: var(--s6) var(--s5);
  text-align: center;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.dropzone--over {
  border-color: var(--color-primary);
  background: rgb(59 130 246 / 0.06);
}

/* ============================================================
   ตัวกรองของหน้าแอดมิน
   ============================================================ */

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

.filters .field {
  width: auto;
  flex: 0 1 auto;
}

.filters input[type="search"] { flex: 1 1 200px; }

/* ============================================================
   แถบวัดพื้นที่
   ============================================================ */

.meter {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--nested-bg);
  border: 1px solid var(--nested-border);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 400ms ease;
}

.meter__fill--warn { background: var(--color-warn); }

/* ============================================================
   ฟอร์มสองคอลัมน์
   ============================================================ */

.form-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid__full { grid-column: 1 / -1; }
}

/* ============================================================
   รายการไฟล์ของผู้รับภายนอก
   ============================================================ */

.file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
}

.file-row + .file-row { margin-top: var(--s2); }

.file-row__meta { min-width: 0; }

/* ชื่อไฟล์เป็น "ป้ายเทคนิค" — ใช้ mono ตามที่เจ้าของระบบกำหนด
   ช่วยให้แยกอักขระที่หน้าตาคล้ายกันออกจากกันได้ (l กับ 1, O กับ 0)
   ซึ่งสำคัญกับชื่อไฟล์ที่ผู้รับต้องเทียบกับที่ตกลงกันไว้ */
.file-row__name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   ระยะห่าง — มาจากบันไดค่าเดียวเท่านั้น
   ============================================================ */

.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s5); }
.mt-8 { margin-top: var(--s6); }
.mt-10 { margin-top: var(--s7); }

.mb-2 { margin-top: 0; margin-bottom: var(--s2); }
.mb-3 { margin-top: 0; margin-bottom: var(--s3); }
.mb-4 { margin-top: 0; margin-bottom: var(--s4); }
.mb-5 { margin-top: 0; margin-bottom: var(--s5); }
.mb-8 { margin-top: 0; margin-bottom: var(--s6); }
.mb-10 { margin-top: 0; margin-bottom: var(--s7); }

.stack > * + * { margin-top: var(--s3); }

/* ============================================================
   ❗ ทุกกฎของจอแคบต้องอยู่ท้ายไฟล์เสมอ ห้ามย้ายขึ้นไปไว้ใกล้กฎที่มันเขียนทับ
     ตัวเลือกส่วนใหญ่ที่นี่เจาะจงเท่ากับกฎพื้นฐาน (.row-item, .actions, .main)
     เมื่อเจาะจงเท่ากัน CSS ให้ "ตัวที่อยู่ล่างกว่า" ชนะ ถ้าบล็อกนี้ไปอยู่บน
     กฎพื้นฐาน กฎมือถือจะไม่มีผลเลย โดยที่ไฟล์ยังถูกต้องทุกอย่างและหาไม่เจอ
     (เจอมาแล้วสองครั้ง: แถวของหน้าแอดมินไม่ยอมวางเป็นสองชั้น และแถวลิงก์
      บนหน้า /admin ไม่ยอมถูกซ่อน)
   ============================================================ */

/* ============================================================
   แถบเมนูล่าง — โผล่เฉพาะจอแคบ คือเมนูเดียวที่เหลือเมื่อติดตั้งเป็นแอป
   ============================================================ */

/* ❗ ทั้งสามอย่างต้องถูกซ่อนไว้ที่นี่ ซึ่งเป็นกฎพื้นฐานนอกบล็อกจอแคบ
     markup ของแถบล่าง ลิ้นชัก และฉากหลัง อยู่ในทุกหน้าที่ล็อกอินแล้ว ไม่ได้ใส่เฉพาะจอแคบ
     สไตล์ทั้งหมดของมันอยู่ในบล็อก max-width ข้างล่าง ถ้าไม่ซ่อนไว้ตรงนี้ก่อน
     บนจอกว้างมันจะโผล่มาเป็นเนื้อหาดิบท้ายหน้า — ชื่อผู้ใช้ลอย ๆ รายการลิงก์เปล่า
     และไอคอน SVG ที่ไม่มีใครกำหนดขนาดให้ จึงพองเต็มความกว้างจอ

     เคยพลาดมาแล้วเมื่อ 7 ก.ย. 2026 ตอนย้ายมาใช้ลิ้นชักแบบ mmc-doc — ใส่ .tabbar ไว้
     แต่ลืม .drawer กับ .menu-backdrop แล้วตรวจที่ 1280px โดยดูแค่ว่า .tabbar หายไปหรือยัง
     ซึ่งมันหายจริง ของที่โผล่คือลิ้นชักที่ไม่เคยถูกตรวจ */
.tabbar,
.drawer,
.menu-backdrop { display: none; }

/* ❗ 1024px ไม่ใช่ 980px เพราะแท็บเล็ตแนวตั้งกว้างได้ถึง 1024 พอดี (iPad Pro 12.9")
     ถ้าตัดที่ 980 เครื่องนั้นเครื่องเดียวจะได้หน้าตาแบบจอคอมพิวเตอร์
     ส่วนแท็บเล็ตรุ่นอื่นได้แบบมือถือ ทั้งที่ผู้ใช้มองว่าเป็นอุปกรณ์ชนิดเดียวกัน */
@media (max-width: 1024px) {
  :root { --tabbar-h: 56px; }

  /* ❗ หัวเว็บถูกซ่อนทั้งแถบบนจอแคบ ไม่ใช่ย้ายไปไว้ที่อื่น
       ของที่เคยอยู่ในนั้น (ปุ่มธีม สลับภาษา ออกจากระบบ) ถูกยุบเข้าแถบล่างหมดแล้ว
       เหลือไว้แค่โลโก้กับชื่อผู้ใช้ซึ่งไม่ใช่ของที่กดได้ — สองแถบซ้อนกันที่ก้นจอ
       กินความสูงไป 105px จากจอ 660px โดยที่ครึ่งหนึ่งเป็นของประดับ */
  .site-header--app { display: none; }

  /* ❗ position: fixed ผูกกับ viewport ไม่ใช่กับหน้า แถบจึงอยู่ที่เดิมเสมอ
       ไม่ว่าหน้าจะยาวแค่ไหนหรือเลื่อนไปถึงไหน ห้ามเปลี่ยนเป็น sticky หรือ absolute
       — sticky จะหลุดขึ้นไปกับเนื้อหาเมื่อถึงท้ายหน้า และ absolute จะไปอยู่ท้ายเอกสาร */
  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: flex;
    align-items: stretch;
    /* ❗ ความสูงต้องคงที่ ไม่ปล่อยให้เนื้อหากำหนด เพราะแถบเครื่องมือถูกวางไว้
         "เหนือแถบนี้พอดี" ด้วยค่าเดียวกัน ถ้าความสูงเปลี่ยนตามเนื้อหาเมื่อไหร่
         สองแถบจะเหลื่อมกันทันที */
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    background: var(--color-bg-raised);
    border-top: 1px solid var(--divider);
  }

  /* เบลอพื้นหลังให้เนื้อหาที่เลื่อนผ่านใต้แถบดูจมลงไป — ไม่รองรับก็แค่ทึบตามปกติ */
  @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    .tabbar {
      background: color-mix(in srgb, var(--color-bg-raised) 88%, transparent);
      -webkit-backdrop-filter: blur(16px) saturate(150%);
      backdrop-filter: blur(16px) saturate(150%);
    }
  }

  /* ❗ ต้องเป็นลูกโดยตรงเท่านั้น ไม่ใช่ลูกหลานทั้งหมด
       ในแผ่นเมนูมีลิงก์อยู่อีกหลายอัน (รายการเมนู และปุ่ม TH/EN) ถ้าใช้ .tabbar a
       ลิงก์พวกนั้นจะได้ flex-direction: column กับ min-height: 48px ไปด้วย
       ปุ่มภาษาจะบวมสูงเท่าแท็บแล้วดันเลย์เอาต์ทั้งแถวเสียรูป */
  .tabbar > a {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* พื้นที่กดสูงอย่างน้อย 48px ตามขนาดนิ้วจริง ไม่ใช่ตามขนาดที่ตาเห็น */
    min-height: 48px;
    padding: 6px 2px;
    text-decoration: none;
    color: var(--color-text-faint);
    transition: color 160ms ease;
  }

  .tabbar__mark {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tabbar__icon {
    width: 22px;
    height: 22px;
  }

  .tabbar__label {
    max-width: 100%;
    font-size: 10.5px;
    line-height: 1.15;
    letter-spacing: 0.1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ❗ บอกว่าอยู่หน้าไหนด้วย "สี" อย่างเดียว ไม่ใส่กรอบหรือพื้นหลังทับ
       กรอบทึบหลังไอคอนบนธีมมืดกลายเป็นกล่องสี่เหลี่ยมหนัก ๆ ที่ดึงสายตาไปจากเนื้อหา
       ขีดบาง ๆ ด้านบนให้สัญญาณเดียวกันโดยแทบไม่กินพื้นที่ */
  .tabbar > a[aria-current="page"] {
    color: var(--color-primary);
  }

  .tabbar > a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    width: 18px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--color-primary);
  }

  .tabbar > a[aria-current="page"] .tabbar__label {
    font-weight: 500;
  }

  /* ปุ่มเปิดลิ้นชักกับปุ่มออกจากระบบต้องหน้าตาเหมือนแท็บอื่นทุกอย่าง */
  .tabbar__open,
  .tabbar__signout { flex: 1 1 0; min-width: 0; display: flex; }

  .tabbar__open,
  .tabbar__signout > button {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 48px;
    padding: 6px 2px;
    border: 0;
    background: none;
    font: inherit;
    color: var(--color-text-faint);
    cursor: pointer;
  }

  .tabbar__open.is-active,
  .menu-toggle:checked ~ .tabbar .tabbar__open { color: var(--color-primary); }

  /* บนมือถือไม่มี hover จริง — ให้สัญญาณตอนนิ้วแตะแทน */
  .tabbar > a:active,
  .tabbar__open:active,
  .tabbar__signout > button:active { opacity: 0.55; }

  /* ============================================================
     ลิ้นชักเมนู — คัดลอกท่ามาจาก mmc-doc: checkbox คุมการเปิด/ปิด ไม่มี JS
     ============================================================ */

  .drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    width: min(17rem, 82vw);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--color-bg-raised);
    border-right: 1px solid var(--divider);
    /* ❗ ซ่อนด้วยการเลื่อนออกนอกจอ ไม่ใช่ display: none
         เพื่อให้มีจังหวะเลื่อนเข้า/ออกจริง และ transform เปลี่ยนค่าได้ */
    transform: translateX(-100%);
    transition: transform 240ms ease;
  }

  .menu-toggle:checked ~ .drawer { transform: none; }

  .menu-backdrop { display: none; }

  .menu-toggle:checked ~ .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgb(6 11 24 / 0.45);
  }

  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    flex: none;
    padding: var(--s4);
    border-bottom: 1px solid var(--divider);
  }

  .drawer__who { display: grid; gap: 2px; min-width: 0; }

  .drawer__name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .drawer__role {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-faint);
  }

  .drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-control);
    color: var(--color-text-secondary);
    cursor: pointer;
  }

  .drawer__close:active { background: var(--hover-bg); }
  .drawer__close .icon { width: 18px; height: 18px; }

  .drawer__nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s3);
    display: grid;
    gap: var(--s3);
    align-content: start;
  }

  .drawer__group { display: grid; gap: 2px; }

  .drawer__group--split {
    padding-top: var(--s3);
    border-top: 1px solid var(--divider);
  }

  .drawer__link {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 10px 12px;
    border-radius: var(--radius-control);
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--color-text-secondary);
  }

  /* ❗ พื้นอ่อนแทนบล็อกสีทึบ — บล็อกเข้มหนึ่งอันในเมนูสั้น ๆ ดึงสายตาออกจาก
       เนื้อหาซึ่งเป็นสิ่งที่ผู้ใช้เข้ามาดูจริง ๆ (เหตุผลเดียวกับใน mmc-doc) */
  .drawer__link.is-active {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    font-weight: 500;
  }

  .drawer__link:active { background: var(--hover-bg); }

  .drawer__link--control { cursor: default; }
  .drawer__link--control:active { background: none; }
  .drawer__link--control > span { margin-right: auto; }
  .drawer__link--control .locale-switch { flex: none; }

  .drawer__icon { width: 19px; height: 19px; flex: none; }

  /* กันไม่ให้เนื้อหาท้ายหน้าถูกสองแถบล่างทับ (แถบเมนู + แถบเครื่องมือ) */
  .main { padding-bottom: calc(var(--tabbar-h) + var(--s5) + env(safe-area-inset-bottom)); }

  /* ❗ แต่หน้าที่จัดกลางจอไม่มีแถบล่างให้หลบ — มันคือหน้าก่อนเข้าสู่ระบบ
       ถ้าปล่อยให้กินระยะนั้นไปด้วย ข้างล่างจะหนากว่าข้างบน 56px แล้วสิ่งที่
       "จัดกลาง" ไว้จะลอยสูงกว่ากลางจอจริงอย่างเห็นได้ ทั้งที่ CSS เขียนว่า center */
  .main--center { padding-bottom: var(--main-center-pad); }

  /* ------------------------------------------------------------
     ❗ กฎด้านล่างนี้อยู่ตรงนี้เพราะมันขึ้นกับ "มีแถบล่างกับลิ้นชักแล้ว"
       ไม่ใช่ขึ้นกับว่าจอแคบแค่ไหน ทุกอันคือการเก็บของซ้ำออก — ปลายทางเดียวกัน
       ปรากฏสองที่ในหน้าเดียว เมื่อไหร่ที่บล็อกนี้ขยับ กฎพวกนี้ต้องขยับตาม
       (เดิมอยู่ในบล็อก 560px ทำให้แท็บเล็ตเห็นทั้งแถบล่างและของซ้ำพร้อมกัน)
     ------------------------------------------------------------ */

  /* ❗ ซ่อนเฉพาะคำบรรยายที่เป็นคำอธิบายหน้า ไม่ใช่ทุก .muted ใต้หัวข้อ
       หน้ารายละเอียดผู้ใช้เอาช่องเดียวกันนี้ไปแสดง "ชื่อคน" ซึ่งเป็นข้อมูลจริง
       ถ้าซ่อนด้วยตัวเลือกกว้าง ๆ อย่าง .h-page + .muted ชื่อคนจะหายไปด้วย */
  .page-sub { display: none; }

  .admin-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .admin-subnav__link {
    flex: 0 0 auto;
  }

  /* ❗ ปุ่มหลักของหน้าอยู่กลางเมื่อไม่มีเมนูบน ไม่ใช่ชิดซ้าย
       บนจอกว้างปุ่มอยู่ใต้คอลัมน์ที่มีความกว้างจำกัด การชิดซ้ายจึงดูเป็นระเบียบ
       แต่ที่นี่การ์ดกว้างเต็มจอ ปุ่มเล็ก ๆ ที่มุมซ้ายล่างดูเหมือนหลงมา

     ❗ ต้องมี width: fit-content คู่กับ display: flex เสมอ
       .btn เป็น inline-flex อยู่ พอเปลี่ยนเป็น flex มันจะกลายเป็นบล็อกที่กว้างเต็มบรรทัด
       แล้ว margin auto จะไม่มีที่ให้เฉลี่ย ปุ่มจะยืดเต็มความกว้างแทนที่จะอยู่กลาง */
  .page-action {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }

  /* ❗ ปุ่มมุมขวาบนของหัวหน้าถูกซ่อน — มันคือปุ่มเดียวกับที่อยู่ในการ์ด
       "ยังไม่มีการแชร์" และเป็นแท็บ "สร้าง" บนแถบล่างอีกที ปุ่มเดียวกันสามที่ในจอเดียว
       บนจอกว้างยังต้องมี เพราะที่นั่นไม่มีแถบล่าง */
  .page-head__action { display: none; }
}

/* ============================================================
   จอแคบ — ตัดของที่ไม่จำเป็นออกให้เหลือแต่เนื้อหา
   ============================================================ */

@media (max-width: 560px) {
  /* ชื่อแบรนด์หลีกทางให้ปุ่มที่กดได้จริง ไม่งั้นหัวเว็บกว้างเกินจอแล้วเลื่อนซ้ายขวาได้ */
  .brand__name { display: none; }
  .usermenu { gap: var(--s3); }

  .site-header__inner { padding: var(--s2) var(--s4); }

  /* ระยะขอบแบบจอใหญ่กินพื้นที่อ่านไปมากบนจอแคบ ลดลงให้เนื้อหาได้ความกว้างคืน */
  .main,
  .main--wide { padding: var(--s5) var(--s4); }
  /* ❗ ตรงนี้เขียนค่าตรง ๆ ไม่ได้ใช้ --main-center-pad เหมือนอีกสองที่
       เพราะเป็น shorthand ที่ต้องตั้งซ้ายขวาใหม่ด้วย ค่าที่ได้บังเอิญเท่ากับตัวแปร
       (var(--s5) ทั้งคู่) ถ้าวันหนึ่งเปลี่ยนค่าในตัวแปร บล็อกนี้จะไม่ขยับตาม */
  .main--center { padding: var(--s5) var(--s4); }

  .panel { padding: var(--s4); }

  /* หัวข้อหน้าใหญ่เกินไปเมื่อความกว้างเหลือ 390px */
  .h-page { font-size: 24px; }

  .share-detail-head__row {
    display: grid;
    align-items: start;
    gap: var(--s3);
  }

  .share-detail-head__status {
    flex-wrap: wrap;
  }

  .share-recipients-panel__head {
    display: grid;
    gap: var(--s3);
  }

  /* ❗ แถวของหน้าแอดมินต้องวางเป็นสองชั้นบนจอแคบ ไม่ใช่ชื่อไฟล์กับปุ่มอยู่บรรทัดเดียวกัน
       ชื่อไฟล์ภาษาไทยยาว ๆ กับปุ่มสามปุ่มไม่มีทางอยู่ร่วมกันได้ใน 390px */
  .row-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
  }

  .share-recipients-panel .row-item { align-items: flex-start; }

  .row-actions {
    width: 100%;
    gap: var(--s3);
  }

  .file-table__head { display: none; }

  .file-table__row {
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
    gap: var(--s2) var(--s3);
    padding-inline: 0;
  }

  .file-table__name { grid-column: 1 / -1; }
  .file-table__filename { white-space: normal; overflow-wrap: anywhere; }
  .file-table__mobile-label { display: inline; font-weight: 400; color: var(--color-text-secondary); }
  .file-table__size { grid-column: 1; grid-row: 2; }
  .file-table__stats { grid-column: 1; grid-row: 3; display: flex; align-items: center; gap: var(--s2); }
  .file-table__stats .meta { margin-left: var(--s1); }
  .file-table__stats .meta::before { content: '· '; }
  .file-table__actions {
    grid-column: 2;
    grid-row: 2 / 4;
    justify-content: flex-end;
  }

  .file-table__link {
    grid-column: 1 / -1;
  }

  .audit-log {
    display: grid;
    gap: var(--s3);
  }

  .audit-log__actions {
    padding-top: var(--s2);
  }

  .audit-log__share {
    width: 100%;
    justify-content: center;
  }
}