/*! SaiTaMo Shell — header / footer / theme toggle ที่ทุกเว็บในเครือใช้ร่วมกัน
    ต้นฉบับอยู่ที่ repo saitamo-assets/shell/ เท่านั้น — อย่าแก้ไฟล์นี้ในแต่ละเว็บโดยตรง
    แก้ที่ต้นฉบับแล้วรัน: node shell/sync-shell.mjs  (มันจะก๊อปไปทุกเว็บและอัปเดต header/footer ให้เอง)

    ทุก class ขึ้นต้นด้วย stm- และ token ขึ้นต้นด้วย --stm- เพื่อไม่ชนกับ CSS ของแต่ละเครื่องมือ */

/* ---------- Design tokens ---------- */
:root {
  /* brand (ตาม SaiTaMo Brand Kit: Navy + Classic Gold + Sky) */
  --stm-navy: #0A192F;
  --stm-navy-2: #12335A;
  --stm-gold: #D4AF37;
  --stm-sky: #38BDF8;

  /* typography */
  --stm-font: "IBM Plex Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --stm-font-display: "Anton", "IBM Plex Sans Thai", sans-serif;

  /* spacing (4px base) + radius */
  --stm-s1: 4px; --stm-s2: 8px; --stm-s3: 12px; --stm-s4: 16px; --stm-s5: 24px; --stm-s6: 32px; --stm-s7: 48px;
  --stm-r-tag: 4px; --stm-r-btn: 8px; --stm-r-card: 12px; --stm-r-pill: 999px;
  --stm-max: 1200px;
  --stm-header-h: 64px;

  /* light (ค่าเริ่มต้น) */
  --stm-bg: #F8FAFC;
  --stm-surface: #FFFFFF;
  --stm-surface-2: #F1F5F9;
  --stm-border: #E2E8F0;
  --stm-text: #0F172A;
  --stm-muted: #475569;
  --stm-accent: #8A6A12;      /* ทองเข้ม — ผ่าน WCAG AA บนพื้นขาว */
  --stm-focus: #1E3A8A;
  --stm-success: #15803D; --stm-warning: #B45309; --stm-error: #B91C1C;
  --stm-shadow: 0 1px 2px rgba(15, 23, 42, .06);

  /* ===== ชุดสีปุ่ม/สีเน้นกลาง — ทุกเครื่องมือผูกตัวแปรของตัวเองเข้ากับชุดนี้ ===== */
  /* ปุ่มหลัก (CTA): ทอง + ตัวอักษร Navy — เหมือนกันทั้งสองธีม (contrast 9:1) */
  --stm-primary: #D4AF37;
  --stm-primary-hover: #E2C04F;
  --stm-on-primary: #0A192F;
  /* สีเน้นการใช้งาน: แท็บ/ชิปที่เลือก ลิงก์ กรอบที่เลือก แถบความคืบหน้า */
  --stm-link: #1E3A8A;        /* Navy — 10:1 บนพื้นขาว */
  --stm-on-link: #FFFFFF;     /* ตัวอักษรบนพื้น --stm-link */
  --stm-link-soft: #E0F2FE;   /* พื้นอ่อนของสิ่งที่ถูกเลือก */
  --stm-link-ink: #1E3A8A;    /* ตัวอักษรบน --stm-link-soft */
  /* ตัวอักษรเน้นสีทอง (หัวข้อสำคัญ/ตัวเลขเด่น) */
  --stm-gold-text: #8A6A12;
  --stm-on-gold-text: #FFFFFF;
}
:root[data-theme="dark"] {
  --stm-link: #38BDF8;        /* Sky — 9:1 บนพื้น Navy */
  --stm-on-link: #0B0F19;
  --stm-link-soft: #0C2A40;
  --stm-link-ink: #7DD3FC;
  --stm-gold-text: #D4AF37;
  --stm-on-gold-text: #0A192F;
  --stm-bg: #0B0F19;
  --stm-surface: #0F172A;
  --stm-surface-2: #1E293B;
  --stm-border: #1E293B;
  --stm-text: #E2E8F0;
  --stm-muted: #94A3B8;
  --stm-accent: #D4AF37;
  --stm-focus: #38BDF8;
  --stm-success: #4ADE80; --stm-warning: #FBBF24; --stm-error: #F87171;
  --stm-shadow: 0 1px 0 rgba(0, 0, 0, .4);
}

/* ---------- Header ---------- */
.stm-header {
  position: relative; z-index: 50;
  background: var(--stm-surface);
  border-bottom: 1px solid var(--stm-border);
  box-shadow: var(--stm-shadow);
  color: var(--stm-text);
  font-family: var(--stm-font);
  -webkit-font-smoothing: antialiased;
}
.stm-header *, .stm-footer * { box-sizing: border-box; }
.stm-header__in {
  max-width: var(--stm-max); margin: 0 auto;
  min-height: var(--stm-header-h);
  padding: var(--stm-s2) var(--stm-s4);
  display: flex; align-items: center; gap: var(--stm-s3);
}
@media (min-width: 768px) { .stm-header__in { padding-inline: var(--stm-s5); gap: var(--stm-s4); } }

/* โลโก้ + breadcrumb  "SaiTaMo / ชื่อเครื่องมือ" */
.stm-crumbs { display: flex; align-items: center; gap: var(--stm-s2); min-width: 0; margin-right: auto; }
.stm-logo {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: var(--stm-text); text-decoration: none; border-radius: var(--stm-r-btn);
}
.stm-logo__mark {
  width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 20%, var(--stm-navy-2), var(--stm-navy));
  border: 2px solid var(--stm-gold);
}
.stm-logo__mark img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; }
.stm-logo__word {
  font-family: var(--stm-font-display); font-weight: 400; font-size: 22px; line-height: 1;
  letter-spacing: .02em; white-space: nowrap;
}
.stm-logo__word b { font-weight: inherit; color: var(--stm-accent); }
.stm-crumbs__sep { color: var(--stm-muted); font-size: 20px; font-weight: 300; line-height: 1; flex: none; }
.stm-crumbs__cur {
  color: var(--stm-text); text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  border-radius: var(--stm-r-tag);
}
.stm-crumbs__cur:hover, .stm-logo:hover .stm-logo__word { color: var(--stm-accent); }

/* ช่องเสริมของแต่ละเว็บ (เมนู, badge, สถานะ, ช่องค้นหา) */
.stm-header__slot { display: flex; align-items: center; gap: var(--stm-s2); min-width: 0; }
.stm-header__slot:empty { display: none; }

/* ปุ่มธีม — แสดง "โหมดปัจจุบัน" (ไอคอน + ข้อความ) สลับด้วย CSS ล้วน ไม่กะพริบ */
.stm-theme, .stm-pill, .stm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  height: 40px; padding: 0 var(--stm-s3);
  border-radius: var(--stm-r-btn); border: 1px solid var(--stm-border);
  background: var(--stm-surface-2); color: var(--stm-text);
  font: 600 14px/1 var(--stm-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.stm-theme:hover, .stm-pill:hover, .stm-btn:hover { border-color: var(--stm-accent); }
.stm-theme:active, .stm-btn:active { transform: translateY(1px); }
.stm-theme svg { width: 18px; height: 18px; flex: none; }
.stm-theme .stm-i-sun, .stm-theme .stm-tx-light { display: none; }
:root[data-theme="light"] .stm-theme .stm-i-sun,
:root[data-theme="light"] .stm-theme .stm-tx-light { display: inline; }
:root[data-theme="light"] .stm-theme .stm-i-moon,
:root[data-theme="light"] .stm-theme .stm-tx-dark { display: none; }

/* ปุ่มหลัก (เช่น "เริ่มใช้งาน" ในหน้าโฮม) */
.stm-btn--primary { background: var(--stm-primary); border-color: var(--stm-primary); color: var(--stm-on-primary); }
.stm-btn--primary:hover { background: var(--stm-primary-hover); border-color: var(--stm-primary-hover); }

/* badge / สถานะเล็ก ๆ */
.stm-pill { cursor: default; font-weight: 500; font-size: 13px; color: var(--stm-muted); }
button.stm-pill { cursor: pointer; }
.stm-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stm-success); flex: none; }

/* ลิงก์เมนูในหัว (หน้าโฮม) */
.stm-nav { display: flex; align-items: center; gap: var(--stm-s1); }
.stm-link {
  color: var(--stm-muted); text-decoration: none; font: 600 14px/1 var(--stm-font);
  padding: 10px var(--stm-s2); border-radius: var(--stm-r-btn);
}
.stm-link:hover { color: var(--stm-text); background: var(--stm-surface-2); }

/* focus ที่มองเห็นชัดทั้งสองธีม */
.stm-header a:focus-visible, .stm-header button:focus-visible,
.stm-footer a:focus-visible { outline: 2px solid var(--stm-focus); outline-offset: 2px; }

/* มือถือ: ซ่อนข้อความในปุ่ม/badge เหลือแต่ไอคอน */
@media (max-width: 640px) {
  .stm-theme { width: 40px; padding: 0; }
  .stm-theme .stm-tx-dark, .stm-theme .stm-tx-light,
  :root[data-theme="light"] .stm-theme .stm-tx-light { display: none; }
  .stm-hide-sm { display: none !important; }
  .stm-logo__word { font-size: 20px; }
  .stm-header__in { gap: var(--stm-s2); }
  .stm-crumbs { gap: 6px; }
  .stm-crumbs__cur { font-size: 15px; }
}
@media (max-width: 359px) {
  .stm-crumbs--sub .stm-logo__word { display: none; }  /* จอเล็กมาก: เหลือโลโก้วงกลม + ชื่อเครื่องมือ */
}

/* ---------- Footer ---------- */
.stm-footer {
  margin-top: var(--stm-s7);
  background: var(--stm-surface);
  border-top: 1px solid var(--stm-border);
  color: var(--stm-muted);
  font: 400 14px/1.7 var(--stm-font);
}
.stm-footer__in {
  max-width: var(--stm-max); margin: 0 auto;
  /* เว้นล่างไว้ให้ปุ่มสลับแอป (มาสคอตลอยมุมขวาล่าง 56px) ไม่บังข้อความ */
  padding: var(--stm-s5) var(--stm-s4) calc(88px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) { .stm-footer__in { padding-inline: var(--stm-s5); } }
.stm-footer a { color: var(--stm-text); text-decoration: underline; text-decoration-color: var(--stm-border); text-underline-offset: 3px; }
.stm-footer a:hover { color: var(--stm-accent); text-decoration-color: currentColor; }
.stm-footer__note { margin-bottom: var(--stm-s4); }
.stm-footer__note:empty { display: none; }
.stm-footer__note p { margin: 0 0 var(--stm-s2); }
.stm-footer__note p:last-child { margin-bottom: 0; }
.stm-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--stm-s3) var(--stm-s5);
  padding-top: var(--stm-s4); border-top: 1px solid var(--stm-border);
}
.stm-footer__note:empty + .stm-footer__bar { padding-top: 0; border-top: 0; }
.stm-footer__brand {
  display: inline-flex; align-items: center; gap: var(--stm-s2);
  font: 400 18px/1 var(--stm-font-display); letter-spacing: .02em; text-decoration: none !important;
}
.stm-footer__brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 8%;
  background: var(--stm-navy); border: 1.5px solid var(--stm-gold); }
.stm-footer__apps { display: flex; flex-wrap: wrap; gap: var(--stm-s1) var(--stm-s3); flex: 1 1 320px; }
.stm-footer__apps a { text-decoration: none; color: var(--stm-muted); font-weight: 500; }
.stm-footer__apps a:hover { color: var(--stm-accent); }
.stm-footer__apps a[aria-current="page"] { color: var(--stm-text); font-weight: 700; }
.stm-footer__meta { margin: 0; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .stm-theme, .stm-pill, .stm-btn { transition: none; }
}
@media print { .stm-header, .stm-footer { display: none; } }