/* ============================================================================================
   MoveRight design system — foundation (v1, 2026-09-17)

   OPT-IN AND SCOPED. Every rule in this file sits under the `.mr` class. Linking the stylesheet
   changes nothing on a page until an element (normally <body>) carries class="mr". Screens are
   moved over one at a time; until then the live pages keep their own inline styles untouched.
   test_design_system.py fails if any selector here is not scoped.

   LIGHT BY DESIGN. There is deliberately no prefers-color-scheme block: the approved direction is
   white / very light. Existing dark-mode behaviour on individual screens is left alone until those
   screens are rebuilt.

   Fonts: DM Sans (English) and Heebo (Hebrew), loaded by mr_theme.head_links(). DM Sans has no
   Hebrew glyphs, so Hebrew characters fall through to Heebo automatically; Hebrew pages
   (lang="he" / dir="rtl") put Heebo first so both scripts match.

   Layout uses logical properties (margin-inline, padding-inline-start…) so the same rules work
   in Hebrew right-to-left.

   Breakpoints (mobile first): 480px · 768px · 1024px · 1280px
   ============================================================================================ */

/* ---------- 1. Tokens ---------- */
.mr {
  /* brand */
  --mr-navy: #003588;
  --mr-brand-blue: #0F73FE;
  --mr-action: #0A63DE;
  --mr-action-hover: #0854BF;
  /* neutrals */
  --mr-text: #10233F;
  --mr-text-2: #64748B;
  --mr-text-3: #94A3B8;
  --mr-white: #FFFFFF;
  --mr-bg: #F7F9FC;
  --mr-blue-tint: #F2F7FF;
  --mr-border: #E3EAF3;
  /* warm accent — sparingly */
  --mr-sand: #F3C78D;
  --mr-warm-tint: #FFF7EB;
  --mr-warm-text: #8A5A12;
  /* semantic */
  --mr-success: #16835D;
  --mr-success-tint: #EAF7F1;
  --mr-amber: #B97916;
  --mr-amber-tint: #FFF4DE;
  --mr-error: #C94A4A;
  --mr-error-tint: #FCEDED;
  /* badge text on the tints above — same hues, darkened just enough for 4.5:1 (v1.1) */
  --mr-success-text: #147956;
  --mr-error-text: #B54343;
  /* third-party action colour, kept recognisable but accessible with white text */
  --mr-whatsapp: #1A8D4A;
  --mr-whatsapp-hover: #157A3F;

  /* typography */
  --mr-font: "DM Sans", "Heebo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mr-fs-display: 48px;
  --mr-fs-h1: 36px;
  --mr-fs-h2: 28px;
  --mr-fs-h3: 22px;
  --mr-fs-lead: 18px;
  --mr-fs-body: 16px;
  --mr-fs-small: 14px;
  --mr-fs-caption: 13px;

  /* spacing — 4px base */
  --mr-s1: 4px;
  --mr-s2: 8px;
  --mr-s3: 12px;
  --mr-s4: 16px;
  --mr-s5: 24px;
  --mr-s6: 32px;
  --mr-s7: 48px;
  --mr-s8: 64px;

  /* radius */
  --mr-r-control: 10px;
  --mr-r-card: 14px;
  --mr-r-sheet: 20px;
  --mr-r-badge: 6px;
  --mr-r-round: 999px;

  /* elevation — restrained */
  --mr-shadow-1: 0 1px 2px rgba(16, 35, 63, .05), 0 2px 8px rgba(16, 35, 63, .04);
  --mr-shadow-2: 0 10px 30px rgba(16, 35, 63, .12), 0 2px 6px rgba(16, 35, 63, .06);
  /* v1.1: a solid ring with a white gap (5.45:1 on white, and still visible on blue buttons);
     the earlier soft 32% halo was only 1.55:1 */
  --mr-focus: 0 0 0 2px var(--mr-white), 0 0 0 4px var(--mr-action);

  --mr-control-h: 48px;
  --mr-control-h-sm: 40px;

  font-family: var(--mr-font);
  font-size: var(--mr-fs-body);
  line-height: 1.5;
  color: var(--mr-text);
  background: var(--mr-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mr:lang(he),
.mr [lang="he"],
.mr[dir="rtl"],
.mr [dir="rtl"] {
  --mr-font: "Heebo", "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-family: var(--mr-font);
}
.mr *,
.mr *::before,
.mr *::after { box-sizing: border-box; }
.mr img { max-width: 100%; display: block; }
.mr a { color: var(--mr-action); text-underline-offset: 3px; }
.mr a:hover { color: var(--mr-action-hover); }
.mr :focus-visible { outline: none; box-shadow: var(--mr-focus); }

/* ---------- 2. Typography ---------- */
.mr .mr-display,
.mr .mr-h1,
.mr .mr-h2,
.mr .mr-h3 { margin: 0; color: var(--mr-navy); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.mr .mr-display { font-size: var(--mr-fs-display); line-height: 1.05; }
.mr .mr-h1 { font-size: var(--mr-fs-h1); line-height: 1.12; }
.mr .mr-h2 { font-size: var(--mr-fs-h2); line-height: 1.18; }
.mr .mr-h3 { font-size: var(--mr-fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.mr .mr-lead { font-size: var(--mr-fs-lead); line-height: 1.55; color: var(--mr-text-2); margin: 0; }
.mr .mr-body { font-size: var(--mr-fs-body); margin: 0; }
.mr .mr-small { font-size: var(--mr-fs-small); }
.mr .mr-caption { font-size: var(--mr-fs-caption); color: var(--mr-text-2); }
.mr .mr-eyebrow { font-size: var(--mr-fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mr-text-2); }
.mr .mr-muted { color: var(--mr-text-2); }
.mr .mr-faint { color: var(--mr-text-3); }
.mr .mr-num { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  .mr { --mr-fs-display: 36px; --mr-fs-h1: 30px; --mr-fs-h2: 24px; --mr-fs-h3: 20px; }
}

/* ---------- 3. Layout helpers ---------- */
.mr .mr-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--mr-s5); }
@media (max-width: 479px) { .mr .mr-container { padding-inline: var(--mr-s4); } }
.mr .mr-stack { display: flex; flex-direction: column; gap: var(--mr-s4); }
.mr .mr-row { display: flex; align-items: center; gap: var(--mr-s3); flex-wrap: wrap; }
.mr .mr-divider { height: 1px; background: var(--mr-border); border: 0; margin: var(--mr-s5) 0; }
.mr .mr-surface { background: var(--mr-white); }

/* ---------- 4. Icons ---------- */
.mr .mr-icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -4px;
}
.mr .mr-icon--sm { width: 16px; height: 16px; vertical-align: -3px; }
.mr .mr-icon--lg { width: 24px; height: 24px; }
.mr .mr-icon--xl { width: 32px; height: 32px; stroke-width: 1.5; }
.mr .mr-icon--fill { fill: currentColor; }
.mr:dir(rtl) .mr-icon--flip,
.mr [dir="rtl"] .mr-icon--flip { transform: scaleX(-1); }

/* ---------- 5. Buttons ---------- */
.mr .mr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mr-s2);
  height: var(--mr-control-h); padding-inline: 20px;
  border: 1px solid transparent; border-radius: var(--mr-r-control);
  font: 600 var(--mr-fs-body)/1 var(--mr-font); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.mr .mr-btn--primary { background: var(--mr-action); color: var(--mr-white); }
.mr .mr-btn--primary:hover { background: var(--mr-action-hover); color: var(--mr-white); }
/* Navy is kept for trust/service moments (hands-on help, headings), not for general actions. */
.mr .mr-btn--secondary { background: var(--mr-white); color: var(--mr-text); border-color: var(--mr-border); }
.mr .mr-btn--secondary:hover { border-color: var(--mr-action); color: var(--mr-action); background: var(--mr-blue-tint); }
.mr .mr-btn--tertiary { background: transparent; color: var(--mr-action); padding-inline: var(--mr-s2); }
.mr .mr-btn--tertiary:hover { color: var(--mr-action-hover); text-decoration: underline; }
.mr .mr-btn--navy { background: var(--mr-navy); color: var(--mr-white); }
.mr .mr-btn--navy:hover { background: #002A6B; color: var(--mr-white); }
.mr .mr-btn--whatsapp { background: var(--mr-whatsapp); color: var(--mr-white); }
.mr .mr-btn--whatsapp:hover { background: var(--mr-whatsapp-hover); color: var(--mr-white); }
.mr .mr-btn--sm { height: var(--mr-control-h-sm); padding-inline: 14px; font-size: var(--mr-fs-small); }
.mr .mr-btn--block { width: 100%; }
.mr .mr-btn--icon { width: var(--mr-control-h-sm); height: var(--mr-control-h-sm); padding: 0; background: var(--mr-white); color: var(--mr-text); border-color: var(--mr-border); }
.mr .mr-btn--icon:hover { color: var(--mr-action); border-color: var(--mr-action); }
.mr .mr-btn--float { box-shadow: var(--mr-shadow-1); border-color: transparent; }
.mr .mr-btn[disabled],
.mr .mr-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ---------- 6. Inputs ---------- */
.mr .mr-field { display: flex; flex-direction: column; gap: 6px; }
.mr .mr-label { font-size: var(--mr-fs-small); font-weight: 600; color: var(--mr-text); }
.mr .mr-hint { font-size: var(--mr-fs-caption); color: var(--mr-text-2); }
.mr .mr-input {
  width: 100%; height: var(--mr-control-h); padding-inline: 14px;
  background: var(--mr-white); color: var(--mr-text);
  border: 1px solid var(--mr-border); border-radius: var(--mr-r-control);
  font: 400 var(--mr-fs-body) var(--mr-font);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mr .mr-input::placeholder { color: var(--mr-text-2); }
.mr .mr-input:hover { border-color: #C9D5E4; }
.mr .mr-input:focus { outline: none; border-color: var(--mr-action); box-shadow: var(--mr-focus); }
.mr .mr-input[aria-invalid="true"] { border-color: var(--mr-error); }
.mr .mr-error-text { font-size: var(--mr-fs-caption); color: var(--mr-error); }
.mr .mr-search { position: relative; display: flex; align-items: center; }
.mr .mr-search .mr-input { padding-inline-start: 44px; height: 52px; border-radius: var(--mr-r-control); box-shadow: var(--mr-shadow-1); border-color: transparent; }
.mr .mr-search .mr-input:focus { border-color: var(--mr-action); }
.mr .mr-search > .mr-icon { position: absolute; inset-inline-start: 14px; color: var(--mr-text-2); pointer-events: none; }
.mr .mr-range { display: flex; align-items: center; gap: var(--mr-s2); }
.mr .mr-range > .mr-input { flex: 1; min-width: 0; }

/* ---------- 7. Filter chips (not pills — control radius) ---------- */
.mr .mr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--mr-control-h-sm); padding-inline: 14px;
  background: var(--mr-white); color: var(--mr-text);
  border: 1px solid var(--mr-border); border-radius: var(--mr-r-control);
  font: 500 var(--mr-fs-small)/1 var(--mr-font); cursor: pointer; white-space: nowrap;
}
.mr .mr-chip:hover { border-color: #C9D5E4; }
.mr .mr-chip.is-on,
.mr .mr-chip[aria-pressed="true"] { background: var(--mr-blue-tint); border-color: var(--mr-action); color: var(--mr-navy); }
.mr .mr-chip .mr-chip-count { min-width: 20px; height: 20px; padding-inline: 6px; border-radius: var(--mr-r-badge); background: var(--mr-action); color: var(--mr-white); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mr .mr-chip-row { display: flex; gap: var(--mr-s2); overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.mr .mr-chip-row::-webkit-scrollbar { display: none; }

/* ---------- 8. Status badges (one or two per card, never a row of them) ----------
   Listing states only. Hands-on help (human service) is NOT a listing status and never uses these —
   it has its own panel (.mr-panel-warm). */
.mr .mr-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding-inline: 8px; border-radius: var(--mr-r-badge);
  font: 600 var(--mr-fs-caption)/1 var(--mr-font); white-space: nowrap;
  background: var(--mr-bg); color: var(--mr-text-2);
}
.mr .mr-badge--new { background: var(--mr-blue-tint); color: var(--mr-action); }
.mr .mr-badge--ready { background: var(--mr-success-tint); color: var(--mr-success-text); }
.mr .mr-badge--pending { background: var(--mr-amber-tint); color: var(--mr-warm-text); }
.mr .mr-badge--error { background: var(--mr-error-tint); color: var(--mr-error-text); }
.mr .mr-badge .mr-icon { width: 14px; height: 14px; vertical-align: 0; }

/* ---------- 9. Metadata line (source, lister, freshness) — plain text, not badges ---------- */
.mr .mr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--mr-fs-small); color: var(--mr-text-2); }
.mr .mr-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.mr .mr-meta .mr-icon { width: 15px; height: 15px; vertical-align: 0; color: var(--mr-text-3); }
.mr .mr-meta .is-strong { color: var(--mr-text); font-weight: 600; }
.mr .mr-source { font-weight: 600; color: var(--mr-text); }
/* on apartment cards the supporting line is lighter still: plain text, no icons */
.mr .mr-listing .mr-meta { font-size: var(--mr-fs-caption); gap: 2px 8px; }

/* ---------- 10. Cards ---------- */
.mr .mr-card { background: var(--mr-white); border: 1px solid var(--mr-border); border-radius: var(--mr-r-card); box-shadow: var(--mr-shadow-1); }
.mr .mr-card--flat { box-shadow: none; }
.mr .mr-card-pad { padding: var(--mr-s5); }

/* Apartment card. Hierarchy: photo → price → address → rooms/size → supporting info → action. */
.mr .mr-listing { display: flex; flex-direction: column; overflow: hidden; }
.mr .mr-listing-photo { position: relative; aspect-ratio: 4 / 3; background: var(--mr-bg); }
.mr .mr-listing-photo img { width: 100%; height: 100%; object-fit: cover; }
.mr .mr-listing-photo .mr-listing-save { position: absolute; top: var(--mr-s3); inset-inline-end: var(--mr-s3); }
.mr .mr-listing-photo .mr-listing-flag { position: absolute; top: var(--mr-s3); inset-inline-start: var(--mr-s3); }
.mr .mr-listing-photo .mr-listing-count { position: absolute; bottom: var(--mr-s3); inset-inline-end: var(--mr-s3); height: 24px; padding-inline: 8px; border-radius: var(--mr-r-badge); background: rgba(16, 35, 63, .72); color: var(--mr-white); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.mr .mr-listing-body { padding: var(--mr-s4) var(--mr-s4) var(--mr-s4); display: flex; flex-direction: column; gap: 6px; }
.mr .mr-price { font-size: 26px; font-weight: 700; color: var(--mr-navy); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mr .mr-price small { font-size: var(--mr-fs-small); font-weight: 500; color: var(--mr-text-2); letter-spacing: 0; }
.mr .mr-address { font-size: 17px; font-weight: 500; color: var(--mr-text); line-height: 1.3; }
.mr .mr-specs { display: flex; gap: var(--mr-s4); font-size: 15px; color: var(--mr-text-2); }
.mr .mr-specs > span { display: inline-flex; align-items: center; gap: 6px; }
.mr .mr-specs .mr-icon { width: 17px; height: 17px; vertical-align: 0; }
.mr .mr-listing-foot { margin-top: var(--mr-s2); padding-top: var(--mr-s3); border-top: 1px solid var(--mr-border); display: flex; align-items: center; justify-content: space-between; gap: var(--mr-s3); }
/* horizontal variant for list views on wider screens */
@media (min-width: 768px) {
  .mr .mr-listing--row { flex-direction: row; }
  .mr .mr-listing--row .mr-listing-photo { width: 260px; flex: none; aspect-ratio: auto; min-height: 196px; }
  .mr .mr-listing--row .mr-listing-photo img { position: absolute; inset: 0; }
  .mr .mr-listing--row .mr-listing-body { flex: 1; padding: var(--mr-s5); }
}

/* Warm, human-service panel — the one place sand appears in quantity */
.mr .mr-panel-warm { background: var(--mr-warm-tint); border-radius: var(--mr-r-card); padding: var(--mr-s5); display: flex; gap: var(--mr-s4); align-items: flex-start; }
.mr .mr-panel-warm .mr-panel-mark { width: 48px; height: 48px; border-radius: 50%; background: var(--mr-sand); color: var(--mr-navy); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Notice / inline alert */
.mr .mr-notice { display: flex; gap: var(--mr-s3); align-items: flex-start; padding: var(--mr-s3) var(--mr-s4); border-radius: var(--mr-r-control); background: var(--mr-blue-tint); color: var(--mr-text); font-size: var(--mr-fs-small); }
.mr .mr-notice--success { background: var(--mr-success-tint); }
.mr .mr-notice--amber { background: var(--mr-amber-tint); }
.mr .mr-notice .mr-icon { color: var(--mr-action); }
.mr .mr-notice--success .mr-icon { color: var(--mr-success); }
.mr .mr-notice--amber .mr-icon { color: var(--mr-amber); }

/* ---------- 11. Navigation ---------- */
.mr .mr-topbar { height: 72px; background: var(--mr-white); border-bottom: 1px solid var(--mr-border); display: flex; align-items: center; }
.mr .mr-topbar .mr-container { display: flex; align-items: center; gap: var(--mr-s5); }
.mr .mr-brand { display: inline-flex; align-items: center; gap: var(--mr-s2); text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.mr .mr-brand .mr-brand-a { color: var(--mr-navy); }
.mr .mr-brand .mr-brand-b { color: var(--mr-brand-blue); }
.mr .mr-brand img { height: 36px; width: auto; }
.mr .mr-nav { display: flex; gap: var(--mr-s1); margin-inline-start: var(--mr-s4); }
.mr .mr-nav a { height: 72px; display: inline-flex; align-items: center; padding-inline: var(--mr-s3); color: var(--mr-text-2); font-weight: 500; font-size: 15px; text-decoration: none; border-bottom: 2px solid transparent; }
.mr .mr-nav a:hover { color: var(--mr-navy); }
.mr .mr-nav a[aria-current="page"] { color: var(--mr-navy); border-bottom-color: var(--mr-action); }
.mr .mr-topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--mr-s3); }
.mr .mr-lang { display: inline-flex; gap: 2px; }
.mr .mr-lang button { background: none; border: 0; padding: 6px 8px; border-radius: var(--mr-r-badge); font: 600 var(--mr-fs-small) var(--mr-font); color: var(--mr-text-3); cursor: pointer; }
.mr .mr-lang button[aria-pressed="true"] { color: var(--mr-navy); background: var(--mr-blue-tint); }
/* compact language switch for small screens: one button showing the other language */
.mr .mr-langbtn { display: inline-flex; align-items: center; gap: 6px; height: var(--mr-control-h-sm); padding-inline: 10px; border: 0; background: none; border-radius: var(--mr-r-control); font: 600 var(--mr-fs-small) var(--mr-font); color: var(--mr-text); cursor: pointer; }
.mr .mr-langbtn:hover { background: var(--mr-blue-tint); }
.mr .mr-langbtn .mr-icon { width: 18px; height: 18px; color: var(--mr-text-2); }
@media (max-width: 767px) { .mr .mr-nav { display: none; } .mr .mr-topbar { height: 60px; } }

/* underline tabs (For You · Map · Saved · Viewings) */
.mr .mr-tabs { display: flex; gap: var(--mr-s5); border-bottom: 1px solid var(--mr-border); }
.mr .mr-tabs a,
.mr .mr-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--mr-s3) 0; font: 500 15px var(--mr-font); color: var(--mr-text-2); cursor: pointer; text-decoration: none; margin-bottom: -1px; }
.mr .mr-tabs [aria-selected="true"],
.mr .mr-tabs [aria-current="page"] { color: var(--mr-navy); border-bottom-color: var(--mr-action); font-weight: 600; }

/* mobile bottom navigation */
.mr .mr-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); height: 64px; background: var(--mr-white); border-top: 1px solid var(--mr-border); padding-bottom: env(safe-area-inset-bottom); }
.mr .mr-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--mr-text-3); font-size: 11.5px; font-weight: 500; text-decoration: none; }
.mr .mr-tabbar a[aria-current="page"] { color: var(--mr-action); font-weight: 600; }
.mr .mr-tabbar .mr-icon { width: 22px; height: 22px; }
.mr .mr-tabbar--fixed { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; }

/* ---------- 12. Map markers (concepts; Leaflet logic untouched — these are only looks) ----------
   BLUE-ONLY hierarchy on the public map: white price tags, blue for selected/new/clusters.
   No navy here — navy is reserved for trust/service moments. */
.mr .mr-pin {
  position: relative; display: inline-flex; align-items: center; height: 30px; padding-inline: 10px;
  background: var(--mr-white); color: var(--mr-text); border: 1px solid var(--mr-border);
  border-radius: 8px; box-shadow: var(--mr-shadow-1);
  font: 700 13.5px/1 var(--mr-font); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mr .mr-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 9px; height: 9px; background: inherit; border-right: 1px solid var(--mr-border); border-bottom: 1px solid var(--mr-border); transform: translateX(-50%) rotate(45deg); }
.mr .mr-pin.is-active { background: var(--mr-action); color: var(--mr-white); border-color: var(--mr-action); }
.mr .mr-pin.is-active::after { border-color: var(--mr-action); }
.mr .mr-pin.is-seen { color: var(--mr-text-2); }
.mr .mr-pin .mr-pin-new { width: 7px; height: 7px; border-radius: 50%; background: var(--mr-brand-blue); margin-inline-end: 6px; }
.mr .mr-pin--dot { width: 16px; height: 16px; padding: 0; border-radius: 50%; background: var(--mr-action); border: 3px solid var(--mr-white); }
.mr .mr-pin--dot::after { display: none; }
.mr .mr-cluster { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mr-brand-blue); color: var(--mr-white); font: 700 19px/1 var(--mr-font); box-shadow: 0 0 0 5px rgba(15, 115, 254, .18), var(--mr-shadow-1); }
/* v1.1: 19px bold is "large text" (3:1), so white on brand blue (4.28:1) passes without changing the blue */
.mr .mr-cluster--lg { width: 56px; height: 56px; font-size: 19px; background: var(--mr-action); box-shadow: 0 0 0 7px rgba(10, 99, 222, .16), var(--mr-shadow-1); }
.mr .mr-area--selected { fill: var(--mr-brand-blue); fill-opacity: .18; stroke: var(--mr-action); stroke-width: 2; }
.mr .mr-area--idle { fill: var(--mr-brand-blue); fill-opacity: .03; stroke: #A9C4EA; stroke-width: 1; }

/* ---------- 13. Utilities ---------- */
.mr .mr-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .mr *, .mr *::before, .mr *::after { transition: none !important; animation: none !important; }
}