.measurements-card { margin-bottom: 22px; }
html:not([data-view="overview"]) .measurements-card { display: none; }
.measurements-card .n-row { flex-wrap: wrap; }
.measurement-record { padding: 10px 0 14px; border-bottom: 1px solid #eceee7; }
.measurement-record-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #6f7967; font-size: 12px; }
.measurement-record-heading button { min-height: 42px; min-width: 44px; padding: 8px; font-size: 12px; color: #85634e; }
.measurement-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 7px; }
.measurement-values span { display: block; font-size: 12px; color: #76816c; margin-bottom: 6px; }
.measurement-values strong { display: block; font-size: 21px; font-weight: 550; }
.measurement-values small { font-size: 10px; color: #76816c; font-weight: 400; margin-left: 4px; }
.measurement-add { min-height: 44px; margin-top: 12px; width: 100%; }
.measurement-tools { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 15px; }
.measurement-tools button { min-height: 42px; font-size: 12px; }
.calendar-day { position: relative; }
.calendar-measurement-mark { position: absolute; right: 2px; top: 2px; font-size: 8px; color: #755b98; line-height: 1; }
#measurement-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 22px; }
#measurement-dialog .dialog-heading { position: sticky; top: -22px; padding: 8px 0; background: white; z-index: 1; }
#measurement-dialog .icon-button { font-size: 24px; width: 44px; height: 44px; }
@media (max-width: 360px) {
  .measurement-values { gap: 5px; }
  .measurement-values strong { font-size: 18px; }
  .measurement-values small { display: block; margin: 3px 0 0; }
}