/* ชั้นร่วมของทุกหน้า — โหลดหลัง CSS ของหน้าเพื่อให้ทับได้
   รูปทรง: วงกลม Raven ฟุ้ง ๆ หลังหน้า (มาจากวงสีวันเกิดของเจ้าของ) · เงาสองชั้นจาก tokens.css
   การเคลื่อนไหว: การ์ดลอยขึ้นตอนเปิดหน้า (ไล่ทีละใบ) · กดแล้วยุบ · ทุกอย่างลดลงเมื่อเปิด reduced motion */

html { background: var(--ac-color-bg); }
body { background: transparent; }

/* วงกลมสองวงอยู่นิ่งหลังเนื้อหา — ขอบฟุ้งแบบวงสีที่มีเงา ไม่ใช่ลวดลายซ้ำ */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
body::before {
  width: 340px;
  height: 340px;
  top: -150px;
  right: -110px;
  background: radial-gradient(circle closest-side, rgba(114, 116, 114, .16), rgba(114, 116, 114, .07) 55%, transparent);
}
body::after {
  width: 240px;
  height: 240px;
  bottom: -120px;
  left: -90px;
  background: radial-gradient(circle closest-side, rgba(114, 116, 114, .11), rgba(114, 116, 114, .04) 55%, transparent);
}

::selection { background: #D6D7D6; color: var(--ac-color-ink); }
html { caret-color: var(--ac-color-accent); scrollbar-color: var(--ac-color-ink-3) transparent; accent-color: var(--ac-color-accent); }

/* ---- การ์ดลอยขึ้นตอนเปิดหน้า ---- */
@keyframes ac-rise {
  from { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
.page > .card,
.page > .stats,
.page > .segmented,
.page > .header,
.page > section,
.page > .list,
.page > .grid {
  animation: ac-rise var(--ac-dur-enter) var(--ac-ease-out) both;
}
/* ไล่ทีละชิ้น เพดาน 6 ชิ้นแรก ที่เหลือมาพร้อมกัน — ไม่ให้รอนาน */
.page > :nth-child(2) { animation-delay: 50ms; }
.page > :nth-child(3) { animation-delay: 100ms; }
.page > :nth-child(4) { animation-delay: 150ms; }
.page > :nth-child(5) { animation-delay: 200ms; }
.page > :nth-child(n + 6) { animation-delay: 250ms; }

/* ---- กดแล้วยุบ ---- */
button,
a.card,
.chip,
.pill,
.segment,
.date-chip,
.month-option,
.toggle-card {
  transition: transform var(--ac-dur-press) var(--ac-ease-out), box-shadow var(--ac-dur-state) var(--ac-ease-out),
    background-color var(--ac-dur-state) var(--ac-ease-out), color var(--ac-dur-state) var(--ac-ease-out), filter var(--ac-dur-state);
}
button:not(:disabled):active,
a.card:active,
.chip:active {
  transform: scale(.97);
}
.row[data-clickable] { border-radius: var(--ac-radius-control); transition: background-color var(--ac-dur-state) var(--ac-ease-out); }
.row[data-clickable]:active { background: var(--ac-color-surface-2); transform: none; }

/* ปุ่มหลัก: พื้น Raven ตัวอักษรขาว + เงาสองชั้น */
.btn-primary,
.btn-save,
.fab {
  background: var(--ac-color-accent-strong);
  color: var(--ac-color-on-accent);
}
.btn-primary { box-shadow: 0 1px 2px rgba(31, 33, 32, .10), 0 6px 16px rgba(114, 116, 114, .32); }
.fab { box-shadow: var(--ac-shadow-fab); }

@media (hover: hover) {
  .btn-primary:hover,
  .btn-save:hover,
  .fab:hover { filter: brightness(1.08); }
  .card:has(> .row[data-clickable]) .row[data-clickable]:hover { background: var(--ac-color-surface-2); }
}

:focus-visible { outline: 2px solid var(--ac-color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  /* ไม่มีการเลื่อนหรือย่อขยาย แต่ยังจางเข้าและเปลี่ยนสีให้เห็นว่ากดแล้ว */
  @keyframes ac-rise { from { opacity: 0; } to { opacity: 1; } }
  .page > * { animation-duration: 200ms !important; animation-delay: 0ms !important; }
  button:not(:disabled):active,
  a.card:active,
  .chip:active { transform: none; }
}