/* ============================================================================
   نقشهٔ هم‌ترازِ MIRR (public/js/mirrContour.js) — استایلِ اختصاصی و محدود به .fsmc
   • توکن‌ها (--mc-*) همه روی :root کامل تعریف شده‌اند و در حالتِ تیره بازتعریف می‌شوند:
       ۱) :root[data-theme="dark"]  ۲) @media (prefers-color-scheme: dark) روی :root بدونِ data-theme روشن/رنگی
     (برنامه تمِ تیره را فقط با data-theme="dark" می‌گیرد و از تنظیمِ سیستم‌عامل پیروی نمی‌کند؛ تمِ پیش‌فرضِ «teal»
     هیچ data-theme ندارد. پس مدیا‌کوئری عمداً فقط برای data-theme="auto|system" است تا روی صفحهٔ روشنِ
     کاربری که سیستمش تیره است، پالتِ تیره ننشیند.)
   • بوم با CSS رنگ نمی‌گیرد؛ افزونه توکن‌ها را با getComputedStyle می‌خواند و روی تغییرِ تم دوباره می‌کشد.
   • بدونِ بارگذاری از شبکه؛ فایل بعد از styles.css در index.html لینک شود.
   ============================================================================ */
:root {
  --mc-ramp-0: #E7F3F4;        /* مقدارِ کم */
  --mc-ramp-1: #6FB9BE;
  --mc-ramp-2: #0F5F73;        /* مقدارِ زیاد */
  --mc-hatch: #64748B;         /* هاشورِ ناحیهٔ محاسبه‌نشده و حلقهٔ گرهٔ نامعتبر */
  --mc-invalid-bg: #EEF1F5;
  --mc-line: #16202E;          /* خطوطِ معمولیِ هم‌تراز */
  --mc-ref: #C2410C;           /* خطِ شاخصِ کاربر */
  --mc-halo: #FFFFFF;
  --mc-label-bg: #FFFFFF;
  --mc-label-ink: #16202E;
  --mc-node: #16202E;          /* گرهٔ واقعیِ محاسبه‌شده */
  --mc-marker: #C0392B;        /* وضعِ فعلی */
  --mc-axis-ink: #6B7787;
  --mc-tip-bg: #FFFFFF;
  --mc-tip-ink: #16202E;
  --mc-tip-line: #D4DBE5;
  --mc-tip-muted: #6B7787;
  --mc-tip-bad: #9A2D22;
  --mc-focus: #0B7C82;
  --mc-frame: #E4E9F0;
  --mc-shadow: 0 6px 18px rgba(22, 32, 46, .16);
}
:root[data-theme="dark"] {
  --mc-ramp-0: #12303A;
  --mc-ramp-1: #2F8A94;
  --mc-ramp-2: #A8E6EA;
  --mc-hatch: #9AA9BB;
  --mc-invalid-bg: #1E2C3C;
  --mc-line: #E8EDF3;
  --mc-ref: #FDBA74;
  --mc-halo: #0E1520;
  --mc-label-bg: #182432;
  --mc-label-ink: #E8EDF3;
  --mc-node: #E8EDF3;
  --mc-marker: #FF8A7A;
  --mc-axis-ink: #8A99AB;
  --mc-tip-bg: #1C2A3A;
  --mc-tip-ink: #E8EDF3;
  --mc-tip-line: #33465C;
  --mc-tip-muted: #8A99AB;
  --mc-tip-bad: #FFA59A;
  --mc-focus: #43C7CD;
  --mc-frame: #28374A;
  --mc-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"],
  :root[data-theme="system"] {
    --mc-ramp-0: #12303A; --mc-ramp-1: #2F8A94; --mc-ramp-2: #A8E6EA;
    --mc-hatch: #9AA9BB; --mc-invalid-bg: #1E2C3C; --mc-line: #E8EDF3; --mc-ref: #FDBA74;
    --mc-halo: #0E1520; --mc-label-bg: #182432; --mc-label-ink: #E8EDF3; --mc-node: #E8EDF3;
    --mc-marker: #FF8A7A; --mc-axis-ink: #8A99AB;
    --mc-tip-bg: #1C2A3A; --mc-tip-ink: #E8EDF3; --mc-tip-line: #33465C; --mc-tip-muted: #8A99AB; --mc-tip-bad: #FFA59A;
    --mc-focus: #43C7CD; --mc-frame: #28374A; --mc-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  }
}

/* ---------- ظرف ---------- */
.fsmc { margin-top: 22px; min-width: 0; max-width: 100%; }
.fsmc-title { margin: 0 0 6px; font-size: 1rem; }
.fsmc-help, .fsmc-note, .fsmc-marker, .fsmc-footer { margin: 6px 0; overflow-wrap: anywhere; }
.fsmc-note:empty { display: none; }
.fsmc-warn, .fsmc-msg { margin: 8px 0; }

/* ---------- کنترل‌ها ---------- */
.fsmc-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 10px 0 6px; }
.fsmc-field { display: grid; gap: 5px; flex: 1 1 150px; min-width: 0; font-size: .85rem; }
.fsmc-field input { width: 100%; min-width: 0; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.fsmc-field input[aria-invalid="true"] { border-color: var(--bad, #C0392B); }
.fsmc-controls input:focus-visible,
.fsmc-controls .btn:focus-visible,
.fsmc summary:focus-visible { outline: 2px solid var(--mc-focus); outline-offset: 2px; }

/* ---------- صحنهٔ نمودار (LTR حتی در صفحهٔ RTL) ---------- */
.fsmc-stage { position: relative; direction: ltr; min-width: 0; max-width: 100%; margin-top: 8px; }
.fsmc-canvas { position: relative; height: 460px; min-width: 0; max-width: 100%; border: 1px solid var(--mc-frame); border-radius: 8px; overflow: hidden; }
.fsmc-canvas canvas { display: block; width: 100% !important; touch-action: pan-y; }
.fsmc-canvas canvas:focus-visible { outline: 2px solid var(--mc-focus); outline-offset: -2px; }

/* ---------- راهنمای شناور ---------- */
.fsmc-tip {
  position: absolute; z-index: 5; left: 0; top: 0; max-width: min(300px, calc(100% - 8px)); box-sizing: border-box;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--mc-tip-line);
  background: var(--mc-tip-bg); color: var(--mc-tip-ink); box-shadow: var(--mc-shadow);
  font-size: .8rem; line-height: 1.6; pointer-events: none; font-variant-numeric: tabular-nums;
}
.fsmc-tip[hidden] { display: none; }
.fsmc-tip-row { display: flex; justify-content: space-between; gap: 12px; }
.fsmc-tip-row span { color: var(--mc-tip-muted); }
.fsmc-tip-row strong { font-weight: 700; text-align: end; }
.fsmc-tip-sub { color: var(--mc-tip-muted); font-size: .74rem; margin-bottom: 2px; }
.fsmc-tip-sep { height: 1px; background: var(--mc-tip-line); margin: 6px 0; }
.fsmc-tip-bad { color: var(--mc-tip-bad); font-weight: 600; }

/* ---------- راهنمای رنگ ---------- */
.fsmc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 10px 0; font-size: .78rem; color: var(--mc-axis-ink); }
.fsmc-lg { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.fsmc-lg-rng { font-variant-numeric: tabular-nums; }
.fsmc-bar { display: inline-block; width: 110px; max-width: 40vw; height: 12px; border-radius: 3px; border: 1px solid var(--mc-frame); }
.fsmc-sw { display: inline-block; flex: none; box-sizing: border-box; }
.fsmc-sw-hatch { width: 18px; height: 12px; border: 1px solid var(--mc-hatch); border-radius: 2px; }
.fsmc-sw-dot { width: 7px; height: 7px; border-radius: 50%; }
.fsmc-sw-ring { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--mc-hatch); }
.fsmc-sw-line { width: 20px; height: 1px; }
.fsmc-sw-ref { width: 20px; height: 3px; border-radius: 2px; }

/* ---------- جدولِ دسترس‌پذیر زیرِ نقشه ---------- */
.fsmc-table { margin-top: 12px; min-width: 0; max-width: 100%; }
.fsmc-table details > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.fsmc-table .table-wrap { max-width: 100%; overflow-x: auto; }
.fsmc-table table { font-variant-numeric: tabular-nums; }
.fsmc-table td, .fsmc-table th { font-variant-numeric: tabular-nums; }

/* ---------- موبایل (۳۹۰px): بدونِ اسکرولِ افقیِ صفحه ---------- */
@media (max-width: 560px) {
  .fsmc-canvas { height: 340px; }
  .fsmc-controls { gap: 10px; }
  .fsmc-field { flex: 1 1 100%; }
  .fsmc-legend { gap: 6px 12px; }
  .fsmc-tip { font-size: .76rem; padding: 6px 8px; max-width: min(240px, calc(100% - 8px)); }
}

/* ---------- حرکتِ کاهش‌یافته ---------- */
@media (prefers-reduced-motion: reduce) {
  .fsmc, .fsmc * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- چاپ ---------- */
@media print {
  .fsmc-controls, .fsmc-tip { display: none !important; }
  .fsmc-canvas { height: 380px; break-inside: avoid; border-color: #999; }
}