/* theme-toggle.css — ปุ่มสลับโหมดสว่าง/มืด ใช้ร่วมกันทุกหน้า
   ต้องโหลด theme.css ก่อนเสมอ เพราะใช้โทเคน --ci-* */

.theme-btn{width:40px;height:40px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--ci-line-2);border-radius:var(--ci-r-pill);
  color:var(--ci-ink-2);padding:0}
.theme-btn:hover{background:var(--ci-brand-050);color:var(--ci-brand-700);
  border-color:var(--ci-brand-200)}
.theme-btn:focus-visible{outline:none;box-shadow:var(--ci-ring)}
.theme-btn svg{width:21px;height:21px}

/* ไอคอนเป็น SVG ชิ้นเดียวที่แปลงร่างระหว่างดวงอาทิตย์กับดวงจันทร์
   ดวงจันทร์เกิดจากการเลื่อนวงกลมสีดำใน mask เข้ามาบังวงกลมหลักจนเหลือเสี้ยว
   จึงไม่ต้องสลับ path และเคลื่อนไหวต่อเนื่องได้ */
.sm{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.sm .core{fill:currentColor;transition:r .45s cubic-bezier(.4,0,.2,1)}
.sm .mask-c{transition:cx .5s cubic-bezier(.4,0,.2,1),cy .5s cubic-bezier(.4,0,.2,1)}
.sm .rays{stroke:currentColor;stroke-width:1.9;stroke-linecap:round;transform-origin:center;
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .35s}

/* ค่าตั้งต้นคือดวงอาทิตย์ แล้วเขียนทับด้วยสถานะโหมดมืด
   โครงสร้างเดียวกับที่ theme.css ใช้กับโทเคน ไม่ซ้อน :not() หลายชั้น */
.sm{transform:none}
.sm .core{r:5}
.sm .mask-c{cx:26;cy:-4}
.sm .rays{transform:none;opacity:1}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .sm{transform:rotate(-32deg)}
  :root:not([data-theme="light"]) .sm .core{r:9}
  :root:not([data-theme="light"]) .sm .mask-c{cx:16;cy:6}
  :root:not([data-theme="light"]) .sm .rays{transform:scale(.35);opacity:0}
}
:root[data-theme="dark"] .sm{transform:rotate(-32deg)}
:root[data-theme="dark"] .sm .core{r:9}
:root[data-theme="dark"] .sm .mask-c{cx:16;cy:6}
:root[data-theme="dark"] .sm .rays{transform:scale(.35);opacity:0}

/* ไล่สีตอนสลับธีม เปิดใช้หลังเฟรมแรกเท่านั้น (ดู theme-toggle.js)
   ถ้าเปิดไว้ตั้งแต่แรก ตอนโหลดหน้าจะเห็นสีค่อย ๆ ไล่เข้าที่ซึ่งดูเหมือนหน้าเสีย */
.theme-anim, .theme-anim *{
  transition:background-color .32s ease, color .32s ease, border-color .32s ease, fill .32s ease}
@media (prefers-reduced-motion: reduce){
  .sm, .sm *, .theme-anim, .theme-anim *{transition:none !important}
}