/*!
 * ============================================================================
 *  منظر — شیوه‌نامهٔ ظاهریِ کتابخانهٔ نقشهٔ لغزان.
 * ----------------------------------------------------------------------------
 *  این پرونده نمای بصریِ همهٔ اجزای منظر را تعریف می‌کند: بومِ نقشه، کاشی‌ها،
 *  نشان‌ها، پنجره‌های اطلاعات، برچسب‌های راهنما، اشکالِ برداری و ابزارها
 *  (بزرگ‌نمایی، اعتبار، مقیاس و گزینشِ لایه). همهٔ نام‌های کلاس با پیشوندِ «mz-»
 *  ویژهٔ منظر است تا با شیوه‌نامهٔ میزبان برخورد نکند.
 *
 *  نویسنده: آرمین رستگار / Author: Armin Rastegar
 *
 *  © ۲۰۱۶–۲۰۲۶ شرکت نازرو — کلیه حقوق محفوظ است.
 *  © 2016–2026 Nazru Co. — All rights reserved.
 *  منتشرشده تحت پروانهٔ MIT.
 * ============================================================================
 */

/* بومِ اصلیِ نقشه */
.mz-naghshe {
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  /* رنگِ زمینهٔ بوم = رنگِ خشکیِ «اطلسِ زندهٔ رصد» (ایوُری). هر شکافِ گذرا هنگامِ
     بارگذاریِ کاشی با خودِ نقشه هم‌رنگ می‌شود و دیگر به‌صورتِ شکافِ تیره دیده نمی‌شود. */
  background: #f7f3e7;
  font-family: "Vazirmatn", "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.mz-naghshe.mz-dast-basteh { cursor: grabbing; }

/* دامنه‌ها (لایه‌های روی‌هم‌نشستهٔ نقشه) */
.mz-daman { position: absolute; inset: 0; }
.mz-daman-neshanha,
.mz-daman-roo { pointer-events: none; }
.mz-boom { pointer-events: none; overflow: visible; }
.mz-boom .mz-bardari { pointer-events: auto; cursor: pointer; }

/* کاشی‌ها */
.mz-kashi {
  position: absolute;
  /* یک پیکسل هم‌پوشانی (۲۵۷ به‌جای ۲۵۶) تا درزِ زیرپیکسلیِ میانِ کاشی‌های مجاور
     پر شود و خطِ باریکِ شکاف دیده نشود. کاشی‌ها روی شبکهٔ ۲۵۶ جای می‌گیرند. */
  width: 257px; height: 257px;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  opacity: 0;
  /* محوِ کوتاه‌ترِ ورود (۰٫۰۸ ثانیه) تا زمینه هنگامِ بارگذاری کمتر از میانِ کاشی‌ها بدرخشد. */
  transition: opacity .08s linear;
}
.mz-kashi.mz-kashi-amadeh { opacity: 1; }
/* جایگزینِ کاشیِ پدر (z-1، برش‌خورده) به‌جایِ حفرهٔ سیاه هنگامِ شکستِ کاشیِ اصلی —
   کمی محوتر/کم‌اشباع‌تر تا از کاشیِ درست (وقتی کنارِ هم دیده شوند) بازشناخته
   شود، بی‌آنکه به چشم بزند. رجوع به LayeKashi.prototype._khataKashi در manzar.js. */
.mz-kashi.mz-kashi-khali { filter: saturate(0.75) brightness(1.02); }
/* پیش‌نمایشِ کاشیِ کُند: برشِ نیایِ کَش‌شده که تا رسیدنِ کاشیِ اصلی زیرِ آن
   می‌نشیند (رجوع به LayeKashi.prototype._neshandanPishnamayeshNiya در manzar.js).
   کمی محوتر از کاشیِ درست، تا «هنوز در حالِ آمدن» بودنش خوانده شود بی‌آنکه به
   چشم بزند — و بی‌نهایت بهتر از مربعِ خالیِ چند-ثانیه‌ایِ پیشین. رویدادِ اشاره‌گر
   نمی‌گیرد (ارثِ .mz-kashi) پس کششِ نقشه دست‌نخورده است. */
.mz-kashi.mz-kashi-pishnamayesh { filter: saturate(0.7) brightness(1.03); }

/* گوشه‌های چهارگانه برای ابزارها */
.mz-goosheh { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 8px; }
.mz-goosheh-balaChap  { top: 10px; left: 10px; }
.mz-goosheh-balaRast  { top: 10px; right: 10px; align-items: flex-end; }
.mz-goosheh-paainChap { bottom: 10px; left: 10px; }
.mz-goosheh-paainRast { bottom: 0; right: 0; align-items: flex-end; }

/* پوستهٔ مشترکِ ابزارها */
.mz-abzar {
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.3);
  border-radius: 6px;
}

/* ابزارِ بزرگ‌نمایی */
.mz-abzar-zoom { display: flex; flex-direction: column; overflow: hidden; }
.mz-dokme {
  width: 32px; height: 32px; border: 0; background: #fff; color: #222;
  font-size: 20px; line-height: 1; cursor: pointer; display: block; padding: 0;
}
.mz-dokme:hover { background: #f0f3f5; }
.mz-abzar-zoom .mz-dokme:first-child { border-bottom: 1px solid #dde3e8; }

/* ابزارِ اعتبار — نامِ داده، پرچمِ فلسطین، © نامِ کتابخانه */
.mz-abzar-etebar {
  background: rgba(255,255,255,.85);
  font-size: 11px; color: #333;
  padding: 2px 6px; border-radius: 4px 0 0 0;
  box-shadow: none;
  display: flex; align-items: center; gap: 5px;
  direction: ltr;
}
.mz-etebar-dadeh { color: #444; }
.mz-barand { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.mz-barand .mz-copy { color: #555; }
.mz-barand-naam { color: #0e8f86; font-weight: 700; text-decoration: none; }
.mz-barand-naam:hover { text-decoration: underline; }
.mz-parcham { display: inline-block; vertical-align: middle; border-radius: 1px; box-shadow: 0 0 0 .5px rgba(0,0,0,.15); }

/* ابزارِ مقیاس */
.mz-abzar-meghyas { background: none; box-shadow: none; }
.mz-meghyas-mile {
  border: 2px solid #333; border-top: none;
  background: rgba(255,255,255,.55);
  color: #222; font-size: 10px; line-height: 1.6;
  text-align: center; padding: 0 4px; white-space: nowrap;
}

/* ابزارِ گزینشِ لایه (سادهٔ فهرستی) */
.mz-abzar-layeGozin { padding: 8px 10px; font-size: 12px; min-width: 120px; }
.mz-layeGozin-radif { display: flex; align-items: center; gap: 4px; padding: 2px 0; cursor: pointer; }
.mz-layeGozin-marz { border-top: 1px solid #e2e7ea; margin: 6px 0; }

/* ابزارِ «لایه‌ها» — دکمه/تابلویِ جمع‌شونده با لغزندهٔ شفافیت */
.mz-abzar-layeha { overflow: hidden; }
.mz-layeha-neshan {
  width: 34px; height: 34px; border: 0; background: #fff; color: #0e8f86;
  cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0;
}
.mz-layeha-neshan:hover { background: #f0f3f5; }
.mz-abzar-layeha.mz-layeha-jam .mz-layeha-neshan { display: flex; }
.mz-abzar-layeha.mz-layeha-jam .mz-layeha-tablo { display: none; }
.mz-abzar-layeha.mz-layeha-jam.mz-layeha-baz .mz-layeha-neshan { display: none; }
.mz-abzar-layeha.mz-layeha-jam.mz-layeha-baz .mz-layeha-tablo { display: block; }
.mz-layeha-tablo { padding: 9px 11px; font-size: 12px; min-width: 168px; }
.mz-layeha-radif { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.mz-layeha-barchasb { display: flex; align-items: center; gap: 5px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.mz-layeha-naam { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-layeha-lang { flex: 0 0 46px; width: 46px; height: 3px; cursor: pointer; accent-color: #0e8f86; }
.mz-layeha-marz { border-top: 1px solid #e2e7ea; margin: 7px 0; }

/* پوششِ تصویرِ ثابت روی کران */
.mz-pushtesh-tasvir { position: absolute; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* نشان — نیای مشترک */
.mz-neshan { position: absolute; pointer-events: auto; }
.mz-neshan.mz-neshan-keshidani { cursor: move; }
.mz-neshan-tasvir { position: absolute; }

/* نشانِ پیش‌فرضِ سنجاقی */
.mz-sanjagh-jaa { transform: translate(-50%, -100%); cursor: pointer; }
.mz-sanjagh {
  display: block; width: 18px; height: 18px;
  border-radius: 50% 50% 50% 0;
  background: var(--mz-rang, #0e8f86);
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* پنجرهٔ اطلاعات */
.mz-panjere {
  position: absolute; z-index: 10;
  transform: translate(-50%, -100%);
  background: #fff; border-radius: 10px;
  box-shadow: 0 2px 14px rgba(0,0,0,.25);
  min-width: 80px; pointer-events: auto;
}
.mz-panjere-badaneh { padding: 11px 28px 11px 13px; font-size: 13px; color: #1b2733; line-height: 1.55; }
.mz-panjere-nok {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-top: 8px solid #fff; filter: drop-shadow(0 2px 1px rgba(0,0,0,.12));
}
.mz-panjere-bastan {
  position: absolute; top: 4px; right: 6px; border: 0; background: none;
  font-size: 17px; line-height: 1; color: #8a97a3; cursor: pointer; padding: 0;
}
.mz-panjere-bastan:hover { color: #3a4753; }

/* برچسبِ راهنما */
.mz-namak {
  position: absolute; z-index: 9; pointer-events: none;
  background: #fff; color: #1b2733;
  font-size: 12px; padding: 3px 8px; border-radius: 5px;
  box-shadow: 0 1px 6px rgba(0,0,0,.2); white-space: nowrap;
  /* برچسب‌ها جهتِ خود را از محتوا می‌گیرند (فارسی ⇐ راست‌به‌چپ، لاتین ⇒ چپ‌به‌راست)
     تا نامِ فارسیِ روی نقشه وارونه نشود — رفعِ وارونگیِ برچسب‌های دوجهتی. */
  unicode-bidi: plaintext;
}
.mz-namak-bala { transform: translate(-50%, -100%); }
.mz-namak-paain { transform: translate(-50%, 0); }
.mz-namak-rast { transform: translate(0, -50%); }

/* برچسبِ قاره/منطقه — لایهٔ پوششیِ manzar-regions.js (بی رِندرِ کاشی).
   خطِ انگلیسی بالا، خطِ فارسی پایین، با گذارِ نرمِ اپاسیتی بینِ بازه‌های زوم.

   حروف‌نگاری (بازنگریِ ۲۰۲۶-۰۸-۱۲): رنگِ زردِ پیشین (#f4c968/#ffd98a) برداشته
   شد؛ به گفتهٔ مالک «حسِ چیزی را می‌داد که به این نقشه تعلق ندارد و به زور
   افزوده شده». جایش یک دوگانهٔ خنثایِ «مرکب/کاغذ» نشست — همان چیزی که اطلسِ
   واقعی می‌کند: مرکبِ گرافیتیِ ملایم روی هالهٔ نرمِ کاغذی، نه پرکنندهٔ درخشان.
   پایه‌نقشهٔ این نمایشگر تک‌سبک و روشن است (کاشیِ رصد/OSM-carto — رجوع به
   map.html)، پس قطبیتِ درست همین است: مرکبِ تیره + هالهٔ روشن. کرهٔ رصد
   (BordersLabels.ts) رویِ تصویرِ ماهواره‌ایِ بیشتر-تیره همین دوگانه را وارونه
   می‌گذارد (مرکبِ کاغذی + هالهٔ گرافیتی) — یک پالت، دو بسترِ متفاوت.

   هالهٔ چندلایه (نه سایهٔ تکِ سخت) کاری می‌کند که متن هم روی سبزِ روشنِ خشکی و
   هم روی آبیِ دریا و هم روی کاشیِ تیره‌تر خوانا بماند. */
.mz-mantaghe {
  position: absolute; pointer-events: none; z-index: 3;
  transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap;
  color: #2b333c;                       /* مرکبِ گرافیتی — نه سیاهِ خام، نه رنگی */
  text-shadow:
    0 0 2px rgba(255, 255, 255, .95),
    0 0 5px rgba(255, 255, 255, .85),
    0 0 11px rgba(255, 255, 255, .55),
    0 1px 1px rgba(255, 255, 255, .9);  /* هالهٔ نرمِ کاغذی، بی لبهٔ سخت */
  transition: opacity .35s ease;
}
.mz-mantaghe-en, .mz-mantaghe-fa { display: block; line-height: 1.32; }
.mz-mantaghe-fa {
  /* فارسیِ راست‌به‌چپ در کنارِ لاتینِ چپ‌به‌راست وارونه نمی‌شود */
  unicode-bidi: plaintext;
  direction: rtl;
  /* حیاتی: فاصله‌گذاریِ حروف خطِ فارسی را می‌شکند — خطِ اتصالِ نستعلیق/نسخ باز
     می‌شود و واژه «تکه‌تکه» دیده می‌شود. فاصله‌گذاری فقط برایِ لاتین است. */
  letter-spacing: normal;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* پشتهٔ قلم: وزیرمتن اگر بود، وگرنه نویسه‌های عربیِ نوتو (رویِ اندروید/لینوکس
   موجودند) و در نهایت قلمِ سامانه. پیش‌تر تنها 'Vazirmatn', system-ui نوشته شده
   بود در حالی که هیچ ‎@font-face‎ای در پروژه نیست، پس عملاً همیشه به قلمِ
   سامانه می‌افتاد و شکلِ فارسی از دستگاهی به دستگاهِ دیگر فرق می‌کرد. */
.mz-mantaghe-en, .mz-mantaghe-fa {
  font-family: 'Vazirmatn', 'Noto Naskh Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
}

/* سطحِ ۱ — قاره‌ها: درشت‌تر و با فاصله‌گذاریِ باز (شیوهٔ اطلس برایِ نامِ قاره) */
.mz-mantaghe-ghareh { opacity: .96; }
.mz-mantaghe-ghareh .mz-mantaghe-en {
  font-size: 19px; font-weight: 500;      /* وزنِ سبک‌تر: آرام، نه فریاد */
  text-transform: uppercase; letter-spacing: .26em;
  text-indent: .26em;                     /* جبرانِ فاصلهٔ آویزانِ حرفِ آخر */
}
.mz-mantaghe-ghareh .mz-mantaghe-fa {
  font-size: 15px; font-weight: 600; margin-top: 2px;
}

/* سطحِ ۲ — مناطق: کوچک‌تر و فشرده‌تر از قاره‌ها */
.mz-mantaghe-mantaghe { opacity: .92; }
.mz-mantaghe-mantaghe .mz-mantaghe-en {
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-indent: .1em;
}
.mz-mantaghe-mantaghe .mz-mantaghe-fa {
  font-size: 12px; font-weight: 600; margin-top: 1px;
}
/* برجسته (غربِ آسیا / شمالِ آفریقا) — با وزن و اندازه، نه با رنگِ دیگر:
   رنگِ متفاوت همان چیزی بود که برچسب را «افزوده‌شده» نشان می‌داد. */
.mz-mantaghe-barjaste { opacity: 1; }
.mz-mantaghe-barjaste .mz-mantaghe-en { font-size: 14px; font-weight: 700; }
.mz-mantaghe-barjaste .mz-mantaghe-fa { font-size: 13px; font-weight: 700; }

/* سطحِ ۳ — آبراه‌ها و آب‌های نام‌دار (خلیج فارس، آبراه داریوش).
   قراردادِ اطلس: نامِ آب مورّب نوشته می‌شود، نه مثلِ خشکی — خواننده بی‌درنگ
   می‌داند این نامِ آب است.

   قطبیتِ رنگ اینجا وارونهٔ قاره/منطقه است و این نکته‌ای فنی است نه سلیقه‌ای:
   برچسبِ قاره روی خشکیِ روشنِ کاشی می‌نشیند، پس مرکبِ گرافیتی + هالهٔ کاغذی
   می‌گیرد؛ ولی برچسبِ آب همیشه روی دریای سُرمه‌ایِ تیرهٔ همان کاشی می‌نشیند، پس
   با همان مرکبِ تیره کم‌کنتراست می‌شد. مرکبِ کاغذی + هالهٔ سُرمه‌ای — دقیقاً
   همان کاری که کرهٔ رصد با مرکبِ آبیِ ‎#bfe0ff‎ می‌کند
   (BordersLabels.buildRegionLabels). یک پالت، سه بستر. */
.mz-mantaghe-abrah {
  opacity: .97;
  color: #dff0ff;
  text-shadow:
    0 0 2px rgba(6, 22, 40, .95),
    0 0 6px rgba(6, 22, 40, .85),
    0 0 12px rgba(6, 22, 40, .6),
    0 1px 1px rgba(6, 22, 40, .9);
}
.mz-mantaghe-abrah .mz-mantaghe-en {
  font-size: 12.5px; font-weight: 600; font-style: italic; letter-spacing: .08em; text-indent: .08em;
}
.mz-mantaghe-abrah .mz-mantaghe-fa {
  font-size: 12px; font-weight: 600; font-style: italic; margin-top: 1px;
}
.mz-namak-chap { transform: translate(-100%, -50%); }

/* ==========================================================================
   لایهٔ نتیجهٔ عاملِ GIS (manzar-gis.js) — کادرِ خلاصه/اخطار و پنجرهٔ عارضه.
   خودِ هندسه در manzar-gis.js با صفتِ SVG رنگ می‌گیرد (سبک از قراردادِ سرور
   می‌آید: render_hint.style)، پس اینجا تنها بخشِ متنی/رابطی شیوه می‌گیرد.
   مسیرهایِ SVG عمداً pointer-events نمی‌گیرند: برخوردِ کلیک در جاوااسکریپت
   انجام می‌شود تا خطِ باریک هم هدفِ کلیکِ سخاوتمند داشته باشد.
   ========================================================================== */
.mz-gis-khalase {
  max-width: min(360px, 82vw);
  background: rgba(255, 255, 255, .95);
  color: #1b2733;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 12.5px; line-height: 1.6;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
  pointer-events: auto;
  max-height: 42vh; overflow: auto;
}
.mz-gis-soal { font-weight: 700; font-size: 12px; color: #5b6b7a; margin-bottom: 3px; }
.mz-gis-matn { font-weight: 600; }
.mz-gis-yaddasht {
  margin-top: 6px; padding: 5px 7px; border-radius: 7px;
  background: #eef4fb; color: #24506f; font-size: 11.5px;
}
.mz-gis-ekhtar {
  margin-top: 6px; padding: 5px 7px; border-radius: 7px; font-size: 11.5px;
  border-right: 3px solid #b9c4cf; background: #f2f5f8; color: #33404d;
}
.mz-gis-ekhtar-warning { border-right-color: #e8a13c; background: #fdf4e6; color: #6b4a13; }
.mz-gis-ekhtar-error   { border-right-color: #e8453c; background: #fdecea; color: #7a1f19; }
.mz-gis-manba { margin-top: 6px; font-size: 11px; color: #6d7c8a; }

/* پنجرهٔ اطلاعاتِ یک عارضه */
.mz-panjere-gis .mz-panjere-badaneh { padding: 10px 13px 10px 28px; }
.mz-gis-panjere { max-height: 46vh; overflow: auto; }
.mz-gis-titr { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; }
.mz-gis-naghsh {
  display: inline-block; font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; color: #fff; background: #e8453c;
}
.mz-gis-naghsh-context { background: #7f8c8d; }
.mz-gis-naghsh-alarm   { background: #ff2d00; }
.mz-gis-naghsh-route   { background: #2d9cdb; }
.mz-gis-laye {
  display: inline-block; margin-inline-start: 5px; font-size: 10.5px;
  padding: 1px 7px; border-radius: 999px; background: #eef1f4; color: #4a5866;
}
.mz-gis-jadval { margin-top: 7px; border-top: 1px solid #eceff2; }
.mz-gis-radif {
  display: flex; gap: 8px; justify-content: space-between;
  padding: 3px 0; border-bottom: 1px solid #f4f6f8; font-size: 12px;
}
.mz-gis-kelid { color: #6d7c8a; flex: 0 0 auto; }
.mz-gis-meghdar { color: #1b2733; text-align: left; word-break: break-word; }
.mz-gis-tohi { padding: 4px 0; color: #8a97a3; font-size: 12px; }