/* #region zone:health.mono.pages — หน้า login บันทึก ออกกำลังกาย คลิป ผู้ช่วย เอกสาร ยา ตั้งค่า และ dialog */
html:root .auth {
  min-height: calc(100dvh - 60px);
  padding: var(--sp-6);
  place-items: center;
}
html:root .auth-card {
  width: min(100%, 480px);
  padding: 36px;
  border: 0;
  border-radius: 32px;
  background: var(--mono-card);
  box-shadow: none;
}
html:root .auth-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
html:root .auth-card h1 {
  --health-auth-title-type: 38px;
  font-size: var(--health-auth-title-type);
  font-weight: 600;
  letter-spacing: -0.04em;
}
html:root .auth-card :where(input, .hselect-trigger) {
  background: var(--mono-bg);
}

html:root .reveal {
  min-height: 36px;
  background: transparent;
}

html:root :where(.card, .panel-body, .rcard, .empty-state, .callout, .note-card) {
  border-color: transparent;
  box-shadow: none;
}

html:root .page > .card,
html:root .panel-body,
html:root .rcard,
html:root .empty-state,
html:root .callout,
html:root .note-card {
  border-radius: 32px;
  background: var(--mono-card);
}

html:root .page > .card,
html:root .panel-body,
html:root .empty-state {
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
}

html:root :where(#record, #exercise, #clips, #assist, #docs, #medicine, #settings) {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

html:root :where(#record, #exercise, #clips, #assist, #docs, #medicine, #settings) .page-head {
  margin-bottom: var(--sp-2);
}

html:root .entries,
html:root .meds,
html:root .plain-list,
html:root .speakers {
  border: 0;
  border-radius: var(--u-radius-card);
  background: var(--mono-card);
}

html:root :where(.entry, .med, .speaker, .profile-row) {
  min-height: 64px;
  border-color: var(--mono-faint);
}

html:root .entry-value {
  font-size: var(--u-text-2xl);
}

html:root .entry-mark,
html:root .rcard-mark,
html:root .empty-mark,
html:root .med-mark {
  border: 0;
  border-radius: 50%;
  background: var(--mono-bg);
  color: var(--mono-ink);
}

html:root .section-head {
  align-items: flex-end;
}

html:root .levels,
html:root .settings-tabs {
  padding: var(--sp-1);
  gap: var(--sp-2);
  border: 0;
  border-radius: var(--u-radius-pill);
  background: var(--mono-card);
}

html:root :where(.set-tab, .level) {
  min-height: 44px;
  border: 0;
  border-radius: var(--u-radius-pill);
  background: transparent;
  color: var(--mono-muted);
}

html:root :where(.set-tab[aria-selected='true'], .level[aria-current='step']) {
  background: var(--mono-ink);
  color: var(--mono-bg);
}

html:root .grid--pairs {
  gap: 14px;
}

html:root .move {
  padding: 26px;
  border: 0;
  border-radius: 32px;
  background: var(--mono-card);
  box-shadow: none;
}

html:root .move .badge,
html:root .badge,
html:root .tag,
html:root .soon,
html:root .stock {
  border: 0;
  border-radius: var(--u-radius-pill);
  background: var(--mono-card-2);
  color: var(--mono-ink);
}

html:root .move-actions {
  gap: 10px;
}

html:root .clip-grid,
html:root .doc-grid {
  gap: 14px;
}

html:root .clip,
html:root .doc-card {
  overflow: hidden;
  border: 0;
  border-radius: 32px;
  background: var(--mono-card);
  box-shadow: none;
}

html:root .clip-play {
  border: 0;
  background: var(--mono-ink);
  color: var(--mono-bg);
}

html:root .filter-chip,
html:root .chip,
html:root .check-chip span {
  min-height: 44px;
  border: 1px solid var(--mono-faint);
  border-radius: var(--u-radius-pill);
  background: transparent;
  color: var(--mono-ink);
}

html:root
  :is(.filter-chip[aria-pressed='true'], .chip[aria-checked='true'], .check-chip input:checked + span) {
  border-color: var(--mono-ink);
  background: var(--mono-ink);
  color: var(--mono-bg);
}

html:root .assist-shell,
html:root .chat-log,
html:root .bubble {
  border: 0;
  box-shadow: none;
}

html:root .assist-shell,
html:root .chat-log {
  border-radius: 32px;
  background: var(--mono-card);
}

html:root .bubble {
  border-radius: 22px;
}

html:root .bubble--bot {
  background: var(--mono-bg);
}

html:root .bubble--me {
  background: var(--mono-ink);
  color: var(--mono-bg);
}

html:root .chat-compose {
  gap: 10px;
  border: 0;
  border-radius: var(--u-radius-pill);
  background: var(--mono-bg);
}

html:root #assist .composer {
  align-items: stretch;
  gap: 10px;
}

html:root .chat-input {
  min-height: calc(3em + 28px);
  padding: 14px var(--sp-5);
  border-radius: 26px;
  resize: none;
}

html:root #assist .composer > button {
  min-height: 52px;
  align-self: stretch;
  padding: 0 var(--sp-6);
}

html:root #assist .research-row,
html:root #assist .callout--quiet {
  margin: 0;
  padding: 0;
  background: transparent;
}

html:root #research-open {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--mono-faint);
  background: transparent;
  color: var(--mono-ink);
}

html:root #research-open:hover {
  background: var(--mono-bg);
}

html:root .settings-shell {
  gap: 18px;
}

html:root .settings-tabs {
  align-self: flex-start;
  padding: 6px;
  gap: var(--sp-2);
  border-radius: var(--u-radius-card);
}

html:root .settings-tabs .set-tab {
  justify-content: flex-start;
  min-height: 44px;
  padding: 0 var(--sp-4);
  background: transparent;
  color: var(--mono-ink);
}

html:root .settings-tabs .set-tab:hover {
  background: var(--mono-bg);
}

html:root .settings-tabs .set-tab[aria-selected='true'] {
  background: var(--mono-ink);
  color: var(--mono-bg);
}

html:root .settings-body,
html:root .rcards {
  gap: 14px;
}

html:root .settings-panel,
html:root .rcard {
  border: 0;
  box-shadow: none;
}

html:root .rcard {
  padding: 22px;
}

html:root .rcard-fields,
html:root .profile-grid {
  align-content: start;
  gap: var(--sp-4);
}

html:root .rcard-foot {
  gap: 10px;
  border-color: var(--mono-faint);
}

html:root .hselect-trigger[aria-expanded='true'] {
  border: 2px solid var(--mono-ink);
}

html:root .hselect-option:is(:hover, .is-active) {
  background: var(--mono-card);
}

html:root .data-table {
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--mono-card);
}

html:root .data-table :where(th, td) {
  border-color: var(--mono-faint);
}

/* ระดับออกกำลังกาย: สี่ช่องกว้างเท่ากัน สูงเท่ากัน */
html:root .levels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-1);
  background: var(--mono-bg);
}

html:root .level {
  min-height: 56px;
  border: 0;
  box-shadow: none;
  font-size: var(--u-text-xl);
}

html:root .level small {
  font-size: var(--u-text-xs);
  font-weight: 500;
}

/* ปุ่มรองในการ์ดท่าออกกำลังกายต้องมีเส้นขอบ ไม่กลืนกับพื้นการ์ด */
html:root .move-actions button {
  flex: 1 1 140px;
  min-height: 48px;
}

html:root .move-actions button:not(.primary) {
  border: 1px solid var(--mono-faint);
  background: transparent;
}

html:root .move-actions button:not(.primary):hover {
  background: var(--mono-card-2);
}

/* วันเตือน: ชุดปุ่มเลือกวันและวันที่ใช้รูปแบบเดียวกับแท็บ ปุ่มสูงเท่ากัน */
html:root .presets {
  flex-wrap: nowrap;
  padding: var(--sp-1);
  gap: var(--sp-2);
  border-radius: var(--u-radius-pill);
  background: var(--mono-bg);
}

html:root .presets button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--u-radius-pill);
  background: transparent;
  color: var(--mono-muted);
  font-weight: 500;
  white-space: nowrap;
}

html:root .presets button[aria-pressed='true'] {
  background: var(--mono-ink);
  color: var(--mono-bg);
  font-weight: 600;
}

html:root .days {
  gap: var(--sp-2);
}

html:root .day span {
  min-height: 44px;
  border: 1px solid var(--mono-faint);
  border-radius: var(--u-radius-pill);
  background: transparent;
  color: var(--mono-ink);
}

html:root .day input:checked + span {
  border-color: var(--mono-ink);
  background: var(--mono-ink);
  color: var(--mono-bg);
  font-weight: 600;
}

html:root .day input:focus-visible + span {
  outline: 2px solid var(--mono-ink);
  outline-offset: 3px;
}

@media (max-width: 599px) {
  html:root .page-title {
    font-size: 36px;
  }

  html:root .page > .card,
  html:root .panel-body,
  html:root .rcard,
  html:root .empty-state,
  html:root .move,
  html:root .clip,
  html:root .doc-card {
    border-radius: var(--u-radius-card);
  }

  html:root .auth {
    padding: var(--sp-4) 0;
  }

  html:root .auth-card {
    padding: var(--sp-6) var(--sp-5);
    border-radius: var(--u-radius-dialog);
  }

  html:root .settings-shell {
    display: block;
  }

  html:root .settings-tabs {
    width: 100%;
    margin-bottom: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  html:root .set-tab {
    flex: 0 0 auto;
  }
}

/* ปุ่มคะแนน 0-10: กว้างอย่างน้อย 44px แล้วขึ้นบรรทัดใหม่เอง ไม่ล้นกล่องบนจอแคบ */
html:root .chips {
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
}

/* ตัวเลือกเวลา: ชั่วโมงและนาทีต้องอ่านได้ครบแม้จอแคบ */
html:root .timepick .hselect {
  flex: 1 1 76px;
  min-width: 76px;
}

html:root .timepick .hselect-trigger {
  gap: var(--sp-1);
  padding-inline: 10px;
}
/* #endregion */