/* ----------  MaxRepTracker Measurements  ---------- */

/* Card */
.mrt-measurements-card {
    position: relative;
    background: var(--mrt-bg, #fff);
    border: none;
    border-radius: var(--mrt-radius, 18px);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    padding: 18px;
    margin: 16px 0;
    animation: mrt-m-fadein 0.25s ease;
}

.mrt-m-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

/* Section-header style shared by dashboard cards (timer-stats / orm headers):
   12px bold uppercase, 0.05em spacing, 10px gap, 20px blue accent icon.
   font-family: inherit escapes the theme's display font on h3. */
.mrt-m-title h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.mrt-m-title h3 svg {
    flex-shrink: 0;
    color: #0082fc;
}

.mrt-m-title h3 span {
    color: inherit;
}

.mrt-m-sub {
    margin: 3px 0 0;
    font-size: 0.75rem;
    color: var(--mrt-text-muted, #a0aec0);
}

/* Buttons */
.mrt-m-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--mrt-border, #cbd5e0);
    border-radius: var(--mrt-radius-full, 100px);
    background: var(--mrt-bg, #fff);
    color: var(--mrt-text-primary, #2d3748);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--mrt-transition, all 0.3s ease);
}

.mrt-m-btn:hover {
    border-color: var(--mrt-primary, #4f33ff);
    color: var(--mrt-primary, #4f33ff);
}

.mrt-m-btn-primary {
    background: var(--mrt-primary, #4f33ff);
    border-color: var(--mrt-primary, #4f33ff);
    color: #fff;
}

.mrt-m-btn-primary:hover {
    background: var(--mrt-primary-hover, #3b1fe0);
    border-color: var(--mrt-primary-hover, #3b1fe0);
    color: #fff;
}

.mrt-m-empty-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px dashed var(--mrt-border, #cbd5e0);
    border-radius: var(--mrt-radius-sm, 8px);
    font-size: 0.8rem;
    color: var(--mrt-text-secondary, #718096);
    text-align: center;
}

/* ----------  Body map  ---------- */

.mrt-m-map {
    position: relative;
    width: min(100%, 250px);
    aspect-ratio: 160 / 400;
    margin: 16px auto 6px;
}

.mrt-m-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.mrt-m-figure {
    color: var(--mrt-text-muted, #a0aec0);
    opacity: 0.55;
}

.mrt-m-figure ellipse,
.mrt-m-figure path {
    fill: none;
}

/* Height brackets (crown + ground line on the mirror axis) — rendered only when
   the profile has a height, revealed while its chip pulses (is-linked). Ticks
   only: a rule would thread the five centre dots and the torso washes. */
.mrt-m-heightline {
    color: var(--mrt-text-muted, #a0aec0);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.mrt-m-heightline.is-linked {
    opacity: 1;
}

.mrt-m-heightline-tick {
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0.7;
}

.mrt-m-heightline.is-linked .mrt-m-heightline-tick {
    stroke: var(--mrt-primary, #4f33ff);
    stroke-width: 1.5;
    opacity: 1;
}

/* Height value tag — HTML overlay (not SVG text) so it renders in the same
   pipeline as the pills: root-relative rem sizing, subpixel antialiasing. */
.mrt-m-height-tag {
    position: absolute;
    left: 50%;
    top: 0.75%;
    transform: translate(-50%, -50%);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--mrt-text-primary, #2d3748);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.mrt-m-height-tag.is-linked {
    opacity: 1;
    color: var(--mrt-primary, #4f33ff);
}

.mrt-m-region {
    fill: transparent;
    stroke: none;
}

.mrt-m-region.has-data {
    fill: var(--mrt-text-muted, #a0aec0);
    fill-opacity: 0.06;
}

.mrt-m-region.is-attention {
    fill: #d97706;
    fill-opacity: 0.22;
}

.mrt-m-leader {
    stroke: var(--mrt-border, #cbd5e0);
    stroke-width: 1;
}

.mrt-m-leader.no-data {
    stroke-dasharray: 3 3;
    opacity: 0.7;
}

.mrt-m-leader.is-attention {
    stroke: #d97706;
    stroke-dasharray: none;
    opacity: 1;
}

.mrt-m-dot.has-data {
    fill: var(--mrt-primary, #4f33ff);
}

.mrt-m-dot.no-data {
    fill: var(--mrt-border, #cbd5e0);
}

.mrt-m-dot.is-attention {
    fill: #d97706;
}

/* Skeletal sites (wrist, knee) — structure, never attention. */
.mrt-m-dot.is-skeletal {
    fill: #64748b;
}

.mrt-m-region.is-skeletal.has-data {
    fill: #64748b;
    fill-opacity: 0.07;
}

.mrt-m-hotspot.is-skeletal {
    border-color: #94a3b8;
    color: #475569;
}

.mrt-m-leader.is-skeletal {
    stroke: #cbd5e0;
}

/* Hotspot pills */
.mrt-m-pills {
    position: absolute;
    inset: 0;
}

.mrt-m-hotspot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border: 1px solid var(--mrt-border, #cbd5e0);
    border-radius: var(--mrt-radius-full, 100px);
    background: var(--mrt-bg, #fff);
    color: var(--mrt-text-primary, #2d3748);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.mrt-m-hotspot::after {
    content: "";
    position: absolute;
    inset: -10px;
}

.mrt-m-hotspot:hover,
.mrt-m-hotspot:focus-visible {
    border-color: var(--mrt-primary, #4f33ff);
    color: var(--mrt-primary, #4f33ff);
}

.mrt-m-hotspot.no-data {
    border-style: dashed;
    color: var(--mrt-text-muted, #a0aec0);
    box-shadow: none;
}

.mrt-m-hotspot.is-attention {
    border-color: #d97706;
    color: #b45309;
}

.mrt-m-pill-value {
    font-variant-numeric: tabular-nums;
}

.mrt-m-pill-delta {
    font-size: 0.6rem;
    color: var(--mrt-text-muted, #a0aec0);
}

.mrt-m-hotspot.is-attention .mrt-m-pill-delta {
    color: #b45309;
}

.mrt-m-hotspot.is-changed {
    animation: mrt-m-pulse 0.6s ease;
}

/* Health flags (waist risk) — rose, mirroring the elevated chip color.
   The dot renders as a ring (not a fill) so the cue survives color-blindness. */
.mrt-m-region.is-health {
    fill: #dc3545;
    fill-opacity: 0.26;
}

.mrt-m-dot.is-health {
    fill: none;
    stroke: #dc3545;
    stroke-width: 1.8;
}

.mrt-m-leader.is-health {
    stroke: #dc3545;
    stroke-dasharray: none;
    opacity: 1;
}

.mrt-m-hotspot.is-health {
    border-color: #dc3545;
    color: #b02a37;
}

.mrt-m-hotspot.is-health .mrt-m-pill-delta {
    color: #b02a37;
}

/* Legend */
.mrt-m-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 0;
    font-size: 0.72rem;
    color: var(--mrt-text-muted, #a0aec0);
}

/* Each dot + label wraps as one unit: the longer health label would otherwise
   leave its ring dangling at the end of the previous line at 360px. */
.mrt-m-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.mrt-m-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d97706;
    flex-shrink: 0;
}

.mrt-m-legend-dot--health {
    background: transparent;
    box-shadow: inset 0 0 0 2.5px #dc3545;
}

.mrt-m-legend-sep {
    opacity: 0.5;
}

/* Insights */
.mrt-m-insights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 4px;
}

.mrt-m-insight {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--mrt-border-light, #e2e8f0);
    border-radius: var(--mrt-radius-full, 100px);
    font-size: 0.72rem;
}

/* Insight chips are buttons (tap highlights the linked regions).
   NOTE: never use the `font` shorthand here — button.mrt-m-insight (0,1,1)
   would beat .mrt-m-insight (0,1,0) and wipe its font-size (the oversized-chips bug). */
button.mrt-m-insight {
    font-family: inherit;
    line-height: inherit;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.mrt-m-insight:focus-visible {
    outline: 2px solid var(--mrt-primary, #4f33ff);
    outline-offset: 2px;
}

.mrt-m-insight-label {
    color: var(--mrt-text-muted, #a0aec0);
}

.mrt-m-insight strong {
    color: var(--mrt-text-primary, #2d3748);
    font-weight: 700;
}

.mrt-m-insight strong small {
    font-weight: 400;
    color: var(--mrt-text-muted, #a0aec0);
}

.mrt-m-insight.is-healthy {
    border-color: rgba(40, 167, 69, 0.4);
}

.mrt-m-insight.is-healthy strong {
    color: var(--mrt-success, #28a745);
}

.mrt-m-insight.is-elevated {
    border-color: rgba(220, 53, 69, 0.4);
}

.mrt-m-insight.is-elevated strong {
    color: var(--mrt-danger, #dc3545);
}

/* Golden-ratio chips tint amber when their target is missed, mirroring the flagged regions. */
.mrt-m-insight.is-missed {
    border-color: rgba(217, 119, 6, 0.4);
}

.mrt-m-insight.is-missed strong {
    color: #b45309;
}

/* Structure chip (Frame) shares the skeletal slate. */
.mrt-m-insight--frame {
    border-color: rgba(100, 116, 139, 0.4);
}

.mrt-m-insight--frame strong {
    color: #475569;
}

/* ----------  Form  ---------- */

.mrt-m-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--mrt-border-light, #e2e8f0);
}

.mrt-m-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mrt-m-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mrt-m-field-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mrt-text-secondary, #718096);
}

.mrt-m-input-wrap {
    position: relative;
}

.mrt-m-input-wrap input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 34px 8px 10px;
    border: 1px solid var(--mrt-border, #cbd5e0);
    border-radius: var(--mrt-radius-sm, 8px);
    background: var(--mrt-bg, #fff);
    color: var(--mrt-text-primary, #2d3748);
    font-size: 0.85rem;
}

/* Specificity (0,3,1) deliberately beats the theme's generic
   input:not([type=submit]):not([type=radio]) padding (0,2,1) — otherwise the
   reserved right space is lost and typed text collides with the unit suffix.
   Only padding/appearance here: theming stays with the rules above (and the
   dark-mode block), which this selector would otherwise outrank.
   Covers the history edit dialog too. */
:is(.mrt-measurements-card, .mrt-m-hist-dialog) .mrt-m-input-wrap input[type="number"] {
    padding: 8px 34px 8px 10px;
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Steppers intentionally removed: fields are blank by design (blank = keep
   current value), so the native arrows would write the min value instead of
   adjusting the stored one. Mobile used the virtual keypad anyway. */
:is(.mrt-measurements-card, .mrt-m-hist-dialog) .mrt-m-input-wrap input[type="number"]::-webkit-outer-spin-button,
:is(.mrt-measurements-card, .mrt-m-hist-dialog) .mrt-m-input-wrap input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mrt-m-input-wrap input:focus {
    outline: none;
    border-color: var(--mrt-primary, #4f33ff);
    box-shadow: 0 0 0 3px rgba(79, 51, 255, 0.15);
}

.mrt-m-suffix {
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--mrt-text-muted, #a0aec0);
    pointer-events: none;
}

.mrt-m-form-hint {
    margin: 10px 0 0;
    font-size: 0.72rem;
    color: var(--mrt-text-muted, #a0aec0);
}

.mrt-m-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ----------  Profile switch card  ---------- */

.mrt-m-switch-content {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mrt-m-switch-content[hidden] {
    display: none;
}

.mrt-m-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.mrt-m-switch-row-label {
    font-size: 0.85rem;
    color: var(--mrt-text-secondary, #718096);
}

.mrt-m-switch-subhead {
    margin: 14px 0 2px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mrt-text-muted, #a0aec0);
}

.mrt-m-switch-control {
    display: flex;
    align-items: center;
}

.mrt-m-unit-toggle {
    display: inline-flex;
    border: 1px solid var(--mrt-border, #cbd5e0);
    border-radius: var(--mrt-radius-full, 100px);
    overflow: hidden;
}

.mrt-m-unit-toggle button {
    padding: 5px 14px;
    border: none;
    background: transparent;
    color: var(--mrt-text-secondary, #718096);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--mrt-transition, all 0.3s ease);
}

.mrt-m-unit-toggle button.active {
    background: var(--mrt-primary, #4f33ff);
    color: #fff;
}

/* Reminder cadence select: `.mrt-select` supplies the colors (light + the dark
   plugin's opaque bg/option rules — translucent backgrounds wash out the native
   popup). Only the compact row sizing is overridden here. */
.mrt-m-reminder-select,
.mrt-m-bf-method-select {
    width: auto;
    min-height: 0;
    padding: 5px 8px;
    font-size: 0.75rem;
    border-radius: var(--mrt-radius-sm, 8px);
    cursor: pointer;
}

/* Navy body-fat note: full-width hint row inside the two-column form grid. */
.mrt-m-bf-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.7rem;
    color: var(--mrt-text-muted, #a0aec0);
}

/* Computed body fat (Navy) is read-only but posts nothing meaningful —
   the server recomputes it from tape. */
.mrt-m-input-wrap input[readonly] {
    opacity: 0.75;
    cursor: default;
}

/* Due emphasis for the card sub-line and the switch meta. Sets its own color so
   the muted parent / dark-mode rules can't wash it out; the word "Due" is the
   non-color cue. */
.mrt-m-due {
    color: var(--mrt-primary, #4f33ff);
    font-weight: 600;
}

.mrt-m-switch-meta {
    margin: 8px 0 0;
    font-size: 0.72rem;
    color: var(--mrt-text-muted, #a0aec0);
}

.mrt-m-switch-lock {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--mrt-text-secondary, #718096);
}

.mrt-m-switch-lock a {
    color: var(--mrt-primary, #4f33ff);
    font-weight: 600;
    text-decoration: none;
}

.mrt-m-switch-lock a:hover {
    text-decoration: underline;
}

/* ----------  Dark mode  ---------- */

html.maxreptracker-dark-mode-enabled .mrt-measurements-card {
    background: var(--maxreptracker-dark-bg, #1b1c23);
    color: var(--maxreptracker-dark-text, #f3f1e4);
    box-shadow: none;
}

/* Excluded subtree: the wildcard colors heading *descendants* with the text
   color, so visible heading text must be text-colored too (not heading-colored). */
html.maxreptracker-dark-mode-enabled .mrt-m-title h3 {
    color: var(--maxreptracker-dark-text, #f3f1e4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-title h3 svg {
    color: var(--maxreptracker-dark-text, #f3f1e4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-sub,
html.maxreptracker-dark-mode-enabled .mrt-m-legend {
    color: rgba(243, 241, 228, 0.55);
}

html.maxreptracker-dark-mode-enabled .mrt-m-legend-dot {
    background: #fbbf24;
}

html.maxreptracker-dark-mode-enabled .mrt-m-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--maxreptracker-dark-text, #f3f1e4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-btn:hover {
    border-color: var(--mrt-primary, #4f33ff);
    color: #fff;
}

html.maxreptracker-dark-mode-enabled .mrt-m-btn-primary {
    background: var(--mrt-primary, #4f33ff);
    border-color: var(--mrt-primary, #4f33ff);
    color: #fff;
}

html.maxreptracker-dark-mode-enabled .mrt-m-btn-primary:hover {
    background: var(--mrt-primary-hover, #3b1fe0);
    border-color: var(--mrt-primary-hover, #3b1fe0);
}

html.maxreptracker-dark-mode-enabled .mrt-m-empty-note {
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(243, 241, 228, 0.6);
}

html.maxreptracker-dark-mode-enabled .mrt-m-canvas {
    background: transparent;
}

html.maxreptracker-dark-mode-enabled .mrt-m-figure {
    color: rgba(243, 241, 228, 0.35);
}

html.maxreptracker-dark-mode-enabled .mrt-m-heightline {
    color: rgba(243, 241, 228, 0.5);
}

html.maxreptracker-dark-mode-enabled .mrt-m-height-tag {
    color: var(--maxreptracker-dark-text, #f3f1e4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-height-tag.is-linked {
    color: var(--mrt-primary, #4f33ff);
}

html.maxreptracker-dark-mode-enabled .mrt-m-region.has-data {
    fill: rgba(243, 241, 228, 0.06);
}

html.maxreptracker-dark-mode-enabled .mrt-m-region.is-attention {
    fill: #fbbf24;
    fill-opacity: 0.25;
}

html.maxreptracker-dark-mode-enabled .mrt-m-dot.is-attention {
    fill: #fbbf24;
}

html.maxreptracker-dark-mode-enabled .mrt-m-dot.is-skeletal {
    fill: #94a3b8;
}

html.maxreptracker-dark-mode-enabled .mrt-m-region.is-skeletal.has-data {
    fill: #94a3b8;
    fill-opacity: 0.08;
}

html.maxreptracker-dark-mode-enabled .mrt-m-region.is-skeletal.is-linked {
    fill: var(--mrt-primary, #4f33ff);
}

html.maxreptracker-dark-mode-enabled .mrt-m-hotspot.is-skeletal {
    border-color: #64748b;
    color: #cbd5e1;
}

html.maxreptracker-dark-mode-enabled .mrt-m-leader.is-skeletal {
    stroke: rgba(148, 163, 184, 0.4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-leader {
    stroke: rgba(243, 241, 228, 0.16);
}

html.maxreptracker-dark-mode-enabled .mrt-m-leader.is-attention {
    stroke: #fbbf24;
}

html.maxreptracker-dark-mode-enabled .mrt-m-dot.has-data {
    fill: #8b7bff;
}

html.maxreptracker-dark-mode-enabled .mrt-m-dot.no-data {
    fill: rgba(243, 241, 228, 0.25);
}

html.maxreptracker-dark-mode-enabled .mrt-m-hotspot {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--maxreptracker-dark-text, #f3f1e4);
    box-shadow: none;
}

html.maxreptracker-dark-mode-enabled .mrt-m-hotspot:hover,
html.maxreptracker-dark-mode-enabled .mrt-m-hotspot:focus-visible {
    border-color: var(--mrt-primary, #4f33ff);
    color: #fff;
}

html.maxreptracker-dark-mode-enabled .mrt-m-hotspot.no-data {
    color: rgba(243, 241, 228, 0.45);
}

html.maxreptracker-dark-mode-enabled .mrt-m-hotspot.is-attention {
    border-color: #fbbf24;
    color: #fbbf24;
}

html.maxreptracker-dark-mode-enabled .mrt-m-pill-delta {
    color: rgba(243, 241, 228, 0.5);
}

html.maxreptracker-dark-mode-enabled .mrt-m-hotspot.is-attention .mrt-m-pill-delta {
    color: #fbbf24;
}

html.maxreptracker-dark-mode-enabled .mrt-m-region.is-health {
    fill: #f87171;
    fill-opacity: 0.30;
}

html.maxreptracker-dark-mode-enabled .mrt-m-dot.is-health {
    fill: none;
    stroke: #f87171;
    stroke-width: 1.8;
}

html.maxreptracker-dark-mode-enabled .mrt-m-leader.is-health {
    stroke: #f87171;
    stroke-dasharray: none;
    opacity: 1;
}

html.maxreptracker-dark-mode-enabled .mrt-m-hotspot.is-health {
    border-color: #f87171;
    color: #fca5a5;
}

html.maxreptracker-dark-mode-enabled .mrt-m-hotspot.is-health .mrt-m-pill-delta {
    color: #fca5a5;
}

html.maxreptracker-dark-mode-enabled .mrt-m-legend-dot--health {
    background: transparent;
    box-shadow: inset 0 0 0 2.5px #f87171;
}

/* Chip-tap highlight must beat the dark washes (0,3,1 ties, later wins;
   skeletal needs its own tie-breaker) so the flash is purple in both modes. */
html.maxreptracker-dark-mode-enabled .mrt-m-region.is-linked {
    fill: var(--mrt-primary, #4f33ff);
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight {
    border-color: rgba(255, 255, 255, 0.12);
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight-label,
html.maxreptracker-dark-mode-enabled .mrt-m-insight strong small {
    color: rgba(243, 241, 228, 0.55);
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight strong {
    color: var(--maxreptracker-dark-text, #f3f1e4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight.is-healthy {
    border-color: rgba(74, 222, 128, 0.4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight.is-healthy strong {
    color: #4ade80;
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight.is-elevated {
    border-color: rgba(248, 113, 113, 0.4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight.is-elevated strong {
    color: #f87171;
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight.is-missed {
    border-color: rgba(251, 191, 36, 0.4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight.is-missed strong {
    color: #fbbf24;
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight--frame {
    border-color: rgba(148, 163, 184, 0.4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-insight--frame strong {
    color: #cbd5e1;
}

html.maxreptracker-dark-mode-enabled .mrt-m-form {
    border-top-color: rgba(255, 255, 255, 0.1);
}

html.maxreptracker-dark-mode-enabled .mrt-m-field-label,
html.maxreptracker-dark-mode-enabled .mrt-m-form-hint,
html.maxreptracker-dark-mode-enabled .mrt-m-suffix {
    color: rgba(243, 241, 228, 0.5);
}

html.maxreptracker-dark-mode-enabled .mrt-m-input-wrap input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--maxreptracker-dark-text, #f3f1e4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-input-wrap input::placeholder {
    color: rgba(243, 241, 228, 0.35);
}

/* Switch card dark mode must mirror the other toggle cards, which the dark
   wildcard themes with these variables. The card is in the wildcard's exclusion
   list, so without these rules the legacy module (_26-profile-extras.css) wins
   with older hardcoded colors. !important + extra specificity beats that module. */
html.maxreptracker-dark-mode-enabled .mrt-m-switch-card.mrt-toggle-card {
    background: var(--maxreptracker-dark-bg, #1b1c23) !important;
}

html.maxreptracker-dark-mode-enabled .mrt-m-switch-card .mrt-m-header-left h4 {
    color: var(--maxreptracker-dark-heading, var(--maxreptracker-dark-text, #f3f1e4)) !important;
}

html.maxreptracker-dark-mode-enabled .mrt-m-switch-card .mrt-m-header-left p {
    color: var(--maxreptracker-dark-text, #f3f1e4) !important;
}

html.maxreptracker-dark-mode-enabled .mrt-m-switch-card .mrt-m-slider {
    background-color: var(--maxreptracker-dark-bg, #1b1c23) !important;
    border-color: var(--maxreptracker-dark-border, #333333) !important;
}

/* The wildcard colors every non-heading descendant of a heading with the text
   color (title <span> and <svg> icon); this subtree is excluded, so copy it. */
html.maxreptracker-dark-mode-enabled .mrt-m-switch-card .mrt-m-header-left h4 :is(span, svg) {
    color: var(--maxreptracker-dark-text, #f3f1e4) !important;
}

html.maxreptracker-dark-mode-enabled .mrt-m-switch-content {
    border-top-color: rgba(255, 255, 255, 0.1);
}

html.maxreptracker-dark-mode-enabled .mrt-m-switch-row-label {
    color: var(--maxreptracker-dark-text, #f3f1e4);
}

html.maxreptracker-dark-mode-enabled .mrt-m-switch-subhead {
    color: rgba(243, 241, 228, 0.55);
}

html.maxreptracker-dark-mode-enabled .mrt-m-switch-meta {
    color: rgba(243, 241, 228, 0.45);
}

html.maxreptracker-dark-mode-enabled .mrt-m-switch-lock {
    color: rgba(243, 241, 228, 0.7);
}

html.maxreptracker-dark-mode-enabled .mrt-m-switch-lock a {
    color: #a99cff;
}

html.maxreptracker-dark-mode-enabled .mrt-m-unit-toggle {
    border-color: rgba(255, 255, 255, 0.16);
}

html.maxreptracker-dark-mode-enabled .mrt-m-unit-toggle button {
    color: rgba(243, 241, 228, 0.7);
}

html.maxreptracker-dark-mode-enabled .mrt-m-unit-toggle button.active {
    background: var(--mrt-primary, #4f33ff);
    color: #fff;
}

/* ----------  Animations  ---------- */

@keyframes mrt-m-pulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    40% { transform: translate(-50%, -50%) scale(1.18); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes mrt-m-region-pulse {
    0% { fill-opacity: 0; }
    40% { fill-opacity: 0.4; }
    100% { fill-opacity: 0; }
}

.mrt-m-region.is-changed {
    fill: var(--mrt-primary, #4f33ff);
    animation: mrt-m-region-pulse 0.6s ease;
}

/* Chip-tap highlight: same pulse, separate class so save flashes never interfere. */
.mrt-m-region.is-linked {
    fill: var(--mrt-primary, #4f33ff);
    animation: mrt-m-region-pulse 0.6s ease;
}

/* Skeletal wash (0,3,0) would otherwise beat .is-linked — keep the flash purple everywhere. */
.mrt-m-region.is-skeletal.is-linked {
    fill: var(--mrt-primary, #4f33ff);
}

@keyframes mrt-m-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 450px) {
    .mrt-m-map {
        width: min(100%, 225px);
    }

    .mrt-m-hotspot {
        font-size: 0.64rem;
        padding: 3px 7px;
    }

    .mrt-m-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mrt-measurements-card,
    .mrt-m-hotspot.is-changed,
    .mrt-m-region.is-changed,
    .mrt-m-region.is-linked {
        animation: none;
    }
    .mrt-m-heightline {
        transition: none;
    }
    .mrt-m-height-tag {
        transition: none;
    }
}