.rf-measurements-add { width: 100%; }
.rf-measurements-latest,
.rf-measurements-body-card,
.rf-measurements-chart-card {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid #dfe5f4;
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--rf-shadow);
}
.rf-measurements-body-card .rf-section-heading { margin-top: 0; }
.rf-body-progress-layout { display: grid; grid-template-columns: minmax(190px, .82fr) minmax(0, 1.45fr); gap: 18px; align-items: center; }
.rf-body-progress-figure { text-align: center; }
.rf-body-progress-figure small { display: block; margin-top: 8px; color: var(--rf-muted); font-size: 9px; line-height: 1.7; }
.rf-body-progress-map { display: grid; min-height: 280px; place-items: center; padding: 8px 20px; border: 1px solid #e2e7e4; border-radius: 18px; background: #f7f9f8; }
.rf-body-anatomy-svg { display: block; width: min(100%, 150px); height: 280px; overflow: visible; filter: drop-shadow(0 8px 10px rgba(26, 48, 36, .08)); }
.rf-body-anatomy-part { fill: #76859a; stroke: #fff; stroke-linejoin: round; stroke-width: .3; transition: fill .18s ease, opacity .18s ease; }
.rf-body-anatomy-part.is-muted { fill: #e5ebe8; }
.rf-body-anatomy-part.is-down { fill: #c0362c; cursor: pointer; }
.rf-body-anatomy-part.is-up { fill: #168a52; cursor: pointer; }
.rf-body-anatomy-part.is-current { fill: #9aabc5; cursor: pointer; }
.rf-body-anatomy-part.is-steady { fill: #76859a; cursor: pointer; }
.rf-body-anatomy-part:not(.is-muted):hover { opacity: .78; }
.rf-body-progress-map-fallback { color: var(--rf-muted); font-size: 11px; }
.rf-body-progress-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 11px; margin-top: 10px; color: #59665f; font-size: 9px; }
.rf-body-progress-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rf-body-progress-legend i { width: 9px; height: 9px; border-radius: 3px; background: #76859a; }
.rf-body-progress-legend .is-down i { background: #c0362c; }
.rf-body-progress-legend .is-up i { background: #168a52; }
.rf-body-progress-legend .is-steady i { background: #76859a; }
.rf-body-progress-legend .is-current i { background: #9aabc5; }
.rf-body-progress-more-needed { margin: 10px 0 0; color: var(--rf-muted); font-size: 10px; line-height: 1.8; }
.rf-body-progress-metrics { display: grid; gap: 8px; }
.rf-body-progress-metric { width: 100%; padding: 11px 12px; border: 1px solid #dfe5f4; border-right: 8px solid #76859a; border-radius: 13px; background: #f8faff; color: var(--rf-ink); cursor: pointer; text-align: right; }
.rf-body-progress-metric.is-down { border-right-color: #c0362c; }
.rf-body-progress-metric.is-up { border-right-color: #168a52; }
.rf-body-progress-metric.is-steady { border-right-color: #76859a; }
.rf-body-progress-metric.is-current { border-right-color: #9aabc5; }
.rf-body-progress-metric span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rf-body-progress-metric strong { font-size: 11px; }
.rf-body-progress-metric b { color: #294d9b; font-size: 10px; }
.rf-body-progress-metric small { display: block; margin-top: 5px; color: var(--rf-muted); font-size: 9px; line-height: 1.6; }
.rf-measurements-latest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rf-measurements-latest-head small { display: block; margin-bottom: 5px; color: var(--rf-muted); font-size: 10px; }
.rf-measurements-latest-head strong { font-size: 16px; }
.rf-measurements-latest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.rf-measurements-latest-grid > div,
.rf-measurements-height-card { min-width: 0; padding: 12px; border: 0; border-radius: 14px; background: #f4f7ff; text-align: right; }
.rf-measurements-height-card { position: relative; cursor: pointer; }
.rf-measurements-height-card em { position: absolute; top: 10px; left: 10px; color: #3158ad; font-size: 9px; font-style: normal; }
.rf-measurements-latest-grid small { display: block; margin-bottom: 5px; color: #64718c; font-size: 9px; }
.rf-measurements-latest-grid strong { display: block; overflow: hidden; color: #294d9b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.rf-measurements-trend { margin: 13px 0 0; padding: 10px 12px; border-radius: 12px; background: #f4f6f5; color: var(--rf-muted); font-size: 11px; }
.rf-measurements-trend.is-down { background: #fff0ef; color: #a72b23; }
.rf-measurements-trend.is-up { background: #eaf8f0; color: #106b3e; }
.rf-measurements-trend.is-steady { background: #f1f3f5; color: #606a73; }
.rf-measurements-latest-note { margin: 12px 0 0; color: var(--rf-muted); font-size: 11px; line-height: 1.8; }
.rf-measurements-chart-card .rf-section-heading { margin-top: 0; }
.rf-measurements-metric-tabs { display: flex; gap: 7px; margin: 0 0 12px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none; }
.rf-measurements-metric-tabs::-webkit-scrollbar { display: none; }
.rf-measurements-metric-tabs button { flex: 0 0 auto; min-height: 34px; padding: 6px 11px; border: 1px solid var(--rf-border); border-radius: 999px; background: #fff; color: var(--rf-muted); cursor: pointer; font-size: 10px; }
.rf-measurements-metric-tabs button.is-active { border-color: #3158ad; background: #eaf0ff; color: #294d9b; font-weight: 700; }
.rf-measurements-chart { min-height: 180px; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, #fbfcff, #f4f7ff); }
.rf-measurements-chart svg { display: block; width: 100%; height: auto; min-height: 180px; }
.rf-measurements-grid-line { stroke: #dfe5f0; stroke-width: 1; stroke-dasharray: 5 6; }
.rf-measurements-axis-label,
.rf-measurements-date-label { fill: #71809b; font-family: Tahoma, Arial, sans-serif; font-size: 10px; }
.rf-measurements-line { fill: none; stroke: #3158ad; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.rf-measurements-point { fill: #fff; stroke: #3158ad; stroke-width: 4; }
.rf-measurements-history > .rf-section-heading { margin-bottom: 12px; }
.rf-measurements-history [data-measurements-list] { display: grid; gap: 10px; }
.rf-measurement-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px; border: 1px solid var(--rf-border); border-radius: 17px; background: #fff; color: var(--rf-ink); cursor: pointer; text-align: right; }
.rf-measurement-row > span { min-width: 0; }
.rf-measurement-row strong { display: block; margin-bottom: 6px; font-size: 13px; }
.rf-measurement-row small { display: block; overflow: hidden; color: var(--rf-muted); font-size: 10px; line-height: 1.8; text-overflow: ellipsis; }
.rf-measurement-summary { white-space: normal; }
.rf-measurement-value { display: inline-flex; align-items: center; gap: 4px; }
.rf-measurement-direction { display: inline-grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; font-size: 11px; line-height: 1; }
.rf-measurement-direction.is-up { background: #eaf8f0; color: #106b3e; }
.rf-measurement-direction.is-down { background: #fff0ef; color: #a72b23; }
.rf-measurement-direction.is-steady { background: #f1f3f5; color: #606a73; }
.rf-measurement-row em { display: block; overflow: hidden; margin-top: 5px; color: #7e6b3d; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.rf-measurement-row > b { flex: 0 0 auto; color: #9ba6a0; font-size: 24px; }
.rf-measurements-empty { display: grid; min-height: 180px; margin: 0; place-items: center; padding: 20px; color: var(--rf-muted); font-size: 11px; text-align: center; }
.rf-measurements-empty-card { padding: 26px 18px; border: 1px dashed #cfd8d3; border-radius: 18px; background: #fff; text-align: center; }
.rf-measurements-empty-card span { display: grid; width: 50px; height: 50px; margin: 0 auto 12px; place-items: center; border-radius: 16px; background: #eaf0ff; color: #3158ad; font-size: 25px; }
.rf-measurements-empty-card strong { display: block; margin-bottom: 7px; }
.rf-measurements-empty-card p { margin: 0; color: var(--rf-muted); font-size: 11px; }
.rf-measurements-note { margin: 18px 2px 0; padding: 12px 14px; border-radius: 13px; background: #f1f4f2; color: var(--rf-muted); font-size: 10px; line-height: 1.9; }
.rf-measurements-dialog-head h2 { margin: 5px 0 8px; font-size: 21px; }
.rf-measurements-dialog-head p { margin: 0 0 18px; color: var(--rf-muted); font-size: 11px; line-height: 1.8; }
.rf-measurements-form { display: grid; gap: 13px; }
.rf-measurements-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rf-measurements-form label { display: grid; gap: 6px; min-width: 0; color: #3f4a44; font-size: 10px; font-weight: 700; }
.rf-measurements-form input,
.rf-measurements-form textarea,
.rf-measurements-form select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--rf-border); border-radius: 13px; outline: 0; background: #fff; color: var(--rf-ink); }
.rf-measurements-form input:focus,
.rf-measurements-form textarea:focus,
.rf-measurements-form select:focus { border-color: #6684c5; box-shadow: 0 0 0 3px rgba(49, 88, 173, .09); }
.rf-measurements-form textarea { resize: vertical; font: inherit; line-height: 1.8; }
.rf-measurements-date-selects { display: grid; grid-template-columns: .75fr 1.2fr 1fr; gap: 8px; }
.rf-measurements-date-error { color: var(--rf-danger); font-size: 9px; }
.rf-measurements-remove { min-height: 43px; border: 1px solid #efc5c1; border-radius: 13px; background: #fff8f7; color: var(--rf-danger); cursor: pointer; font-weight: 700; }
.rf-measurements-remove:disabled { opacity: .55; cursor: not-allowed; }
.rf-measurements-submit { width: 100%; }

@media (min-width: 720px) {
    .rf-measurements-latest-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
    .rf-measurements-form-grid { grid-template-columns: 1fr; }
    .rf-body-progress-layout { grid-template-columns: 1fr; }
    .rf-body-progress-map { min-height: 250px; }
    .rf-body-anatomy-svg { height: 250px; }
}

/* 0.22.0 dark theme adapters. */
.rf-measurements-latest,
.rf-measurements-body-card,
.rf-measurements-chart-card,
.rf-measurement-row,
.rf-measurements-empty-card { border-color: var(--rf-border); background: var(--rf-surface); color: var(--rf-ink); box-shadow: var(--rf-shadow); }
.rf-body-progress-map { border-color: var(--rf-border); background: var(--rf-surface-soft); }
.rf-body-anatomy-svg { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .26)); }
.rf-body-anatomy-part { fill: #7e8995; stroke: var(--rf-surface-soft); }
.rf-body-anatomy-part.is-muted { fill: #2d343c; }
.rf-body-anatomy-part.is-down { fill: var(--rf-danger); }
.rf-body-anatomy-part.is-up { fill: var(--rf-success); }
.rf-body-anatomy-part.is-current { fill: var(--rf-info); }
.rf-body-anatomy-part.is-steady { fill: #7e8995; }
.rf-body-progress-legend { color: var(--rf-ink-soft); }
.rf-body-progress-legend i,
.rf-body-progress-legend .is-steady i { background: #7e8995; }
.rf-body-progress-legend .is-down i { background: var(--rf-danger); }
.rf-body-progress-legend .is-up i { background: var(--rf-success); }
.rf-body-progress-legend .is-current i { background: var(--rf-info); }
.rf-body-progress-metric { border-color: var(--rf-border); background: var(--rf-surface-raised); color: var(--rf-ink); }
.rf-body-progress-metric.is-down { border-right-color: var(--rf-danger); }
.rf-body-progress-metric.is-up { border-right-color: var(--rf-success); }
.rf-body-progress-metric.is-current { border-right-color: var(--rf-info); }
.rf-body-progress-metric.is-steady { border-right-color: #7e8995; }
.rf-body-progress-metric b { color: var(--rf-info); }
.rf-measurements-latest-grid > div,
.rf-measurements-height-card { background: var(--rf-info-soft); }
.rf-measurements-height-card em,
.rf-measurements-latest-grid strong { color: #9ec2ff; }
.rf-measurements-latest-grid small { color: #92a3bd; }
.rf-measurements-trend { background: var(--rf-surface-interactive); }
.rf-measurements-trend.is-down { background: var(--rf-danger-soft); color: #ff9ca3; }
.rf-measurements-trend.is-up { background: var(--rf-success-soft); color: #82dfb5; }
.rf-measurements-trend.is-steady { background: var(--rf-surface-interactive); color: var(--rf-muted); }
.rf-measurements-metric-tabs button { border-color: var(--rf-border); background: var(--rf-surface-raised); color: var(--rf-muted); }
.rf-measurements-metric-tabs button.is-active { border-color: var(--rf-info-border); background: var(--rf-info-soft); color: #a9c7ff; }
.rf-measurements-chart { border: 1px solid var(--rf-border); background: linear-gradient(180deg, var(--rf-surface-raised), var(--rf-surface-soft)); }
.rf-measurements-grid-line { stroke: var(--rf-border-strong); }
.rf-measurements-axis-label,
.rf-measurements-date-label { fill: #8997ac; }
.rf-measurements-line { stroke: var(--rf-info); }
.rf-measurements-point { fill: var(--rf-surface); stroke: var(--rf-info); }
.rf-measurement-direction.is-up { background: var(--rf-success-soft); color: var(--rf-success); }
.rf-measurement-direction.is-down { background: var(--rf-danger-soft); color: var(--rf-danger); }
.rf-measurement-direction.is-steady { background: var(--rf-surface-interactive); color: var(--rf-muted); }
.rf-measurement-row em { color: #d3b873; }
.rf-measurement-row > b { color: var(--rf-muted-low); }
.rf-measurements-empty-card { border-style: dashed; box-shadow: none; }
.rf-measurements-empty-card span { border: 1px solid var(--rf-info-border); background: var(--rf-info-soft); color: var(--rf-info); }
.rf-measurements-note { border: 1px solid var(--rf-border); background: var(--rf-surface-soft); }
.rf-measurements-form label { color: var(--rf-ink-soft); }
.rf-measurements-form input,
.rf-measurements-form textarea,
.rf-measurements-form select { border-color: var(--rf-border); background: var(--rf-surface); color: var(--rf-ink); }
.rf-measurements-form input:focus,
.rf-measurements-form textarea:focus,
.rf-measurements-form select:focus { border-color: var(--rf-info); box-shadow: 0 0 0 3px rgba(114, 167, 255, .12); }
.rf-measurements-remove { border-color: var(--rf-danger-border); background: var(--rf-danger-soft); color: var(--rf-danger); }

@media (hover: hover) and (pointer: fine) {
    .rf-body-progress-metric:hover,
    .rf-measurement-row:hover { border-color: var(--rf-info-border); background: color-mix(in srgb, var(--rf-info) 5%, var(--rf-surface)); }
}