/* #region zone:health.mono.dialogs — dialog แบบกึ่งกลาง ฟอร์มบันทึก และเมนูเพิ่มเติม */
html:root dialog {
  --u-dialog-width: min(calc(100% - 32px), 560px);
}

html:root dialog.is-wide {
  --u-dialog-width: min(calc(100% - 32px), 980px);
}

html:root dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}

html:root .dialog-heading {
  gap: var(--sp-4);
  border: 0;
}

html:root .dialog-heading h2 {
  font-size: var(--health-text-dialog);
  font-weight: 600;
  letter-spacing: -0.035em;
}

html:root .dialog-heading .icon-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--mono-card);
}

html:root .rec-form {
  gap: var(--sp-5);
}

html:root .big-input-wrap {
  padding: 18px;
  border: 0;
  border-radius: var(--u-radius-card);
  background: var(--mono-card);
}

html:root .big-input {
  min-height: 108px;
  border: 0;
  background: transparent;
  --health-text-fluid: clamp(72px, 16vw, 96px);
  font-size: var(--health-text-fluid);
}

html:root .big-input:focus {
  border: 1px solid var(--u-line-strong);
  outline: 2px solid var(--mono-focus);
  outline-offset: 3px;
}

html:root .result-mark {
  background: var(--mono-green);
  color: #000000;
}

html:root .result-mark--warn {
  background: var(--mono-amber);
  color: #000000;
}

html:root #more-sheet {
  inset: 50% auto auto 50%;
  width: min(calc(100% - 32px), 420px);
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%);
}

html:root #more-title:focus {
  outline: none;
}

html:root .more-foot [data-who-open] {
  justify-content: flex-start;
  gap: var(--sp-3);
  padding-inline: var(--sp-3);
  text-align: left;
}

html:root .more-list .nav-item,
html:root .more-foot .nav-btn {
  min-height: 52px;
  border-radius: 16px;
}

@media (max-width: 599px) {
  html:root dialog {
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border-radius: var(--u-radius-dialog);
  }
}
/* #endregion */

/* #region zone:health.mono.form-fields — label และช่องกรอกใช้ขนาดเดียวกันทุก dialog และการตั้งค่า */
html:root .field-label,
html:root dialog label,
html:root dialog legend {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
html:root dialog input:not([type='hidden'], [type='checkbox'], [type='radio'], [type='range']),
html:root dialog .big-input,
html:root dialog select,
html:root dialog .hselect-trigger,
html:root .settings-panel .hselect-trigger {
  height: 48px;
  min-height: 48px;
  padding-block: 0;
  font-size: var(--u-body);
  border: 1px solid var(--u-line-strong);
  border-radius: var(--u-radius-inner);
}
html:root .profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--sp-4);
}
html:root .caregivers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: var(--sp-2) var(--sp-4);
}
html:root .caregivers .check {
  align-items: center;
  margin: 0;
}
html:root .caregivers .check span {
  min-width: 0;
  overflow-wrap: anywhere;
}
html:root .dialog-heading {
  align-items: baseline;
  margin-bottom: 0;
}
html:root .dialog-heading h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
}
html:root .dialog-heading button {
  flex-shrink: 0;
}
html:root .more-foot .nav-btn:not([data-who-open]) {
  min-height: 44px;
  border-radius: 50%;
}
@media (max-width: 600px) {
  html:root .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* #endregion */

/* #region zone:health.bp.presentation — แถบความดันและช่องเลขใช้ชุดกลาง */
.bp-reading-band {
  fill: currentColor;
  opacity: 0.08;
  pointer-events: none;
}
.rec-bp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
html:root .rec-bp-pair .big-input-wrap {
  display: block;
  padding: var(--sp-3);
}
html:root dialog .rec-bp-pair .big-input {
  width: 100%;
  height: 48px;
  min-height: 48px;
  font-size: var(--u-body);
  font-variant-numeric: tabular-nums;
}
.rec-bp-pair .unit {
  display: block;
  text-align: right;
}
/* #endregion */