/**
 * measure.css
 * -----------
 * تنسيقات لوحة أداة القياس العائمة (أسفل اليمين). تعتمد على رموز التصميم
 * المعرَّفة في float-controls.css:root (--fc-gap, --fc-accent, --fc-text,
 * --fc-z...) — يُحمَّل هذا الملف بعده في index.html، فهي متاحة له.
 * زرّ التفعيل نفسه (measureToggle) يُعاد فيه استخدام .icon-btn/.fc-glass
 * القائمتين في float-controls.css بلا أي تنسيق إضافي هنا.
 */

.measure-panel {
  position: absolute;
  /* ⚠️ **إصلاح تراكب حقيقي (٢٠٢٦-٠٩-١٨، بلاغ عبدالله).** كانت هذه اللوحة
     بـ``bottom: var(--fc-gap)`` — نفس زاوية زرّ «عن المشروع» (``.corner-link.about``)
     بالضبط، وتُغطّي فوقه زرّ «موقعي» (``.corner-link.locate``، الأعلى منه)
     بالكامل أيضاً بحكم ارتفاعها (أكثر من ١٢٠px عادةً: صفّ الأوضاع + نتيجة +
     صفّ إجراءات + الحشو/الفجوات). الحساب هنا **نفس نمط** الذي يضبط به
     ``.corner-link.locate`` موضعه فوق ``.corner-link.about`` أعلاه في هذا
     الملف تماماً (فجوة + ارتفاع أيقونة + ١٠px)، مُكرَّراً مرّتين ليعلو
     الزرّين المكدَّسين معاً بدل واحد فقط — فتطفو اللوحة فوق كليهما بفجوة
     واضحة، لا فوقهما مباشرة ولا متراكبة معهما. مبنيّ على رموز CSS
     (``--fc-gap``/``--fc-icon-size``) فيتكيّف تلقائياً مع كل نقاط الكسر في
     float-controls.css (الموبايل/الشاشات القصيرة) بلا أي استعلام إضافي هنا.
  */
  bottom: calc(var(--fc-gap) + var(--fc-icon-size) + 10px + var(--fc-icon-size) + var(--fc-gap));
  right: var(--fc-gap); /* فيزيائية عمداً — نفس اتفاقية كل الأدوات العائمة الأخرى (تبقى في زاويتها بصرف النظر عن اتجاه اللغة) */
  z-index: var(--fc-z);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  min-width: 220px;
  max-width: min(300px, 90vw);
  box-sizing: border-box;
}

/* أولوية أعلى من .measure-panel (خاصّية + صنف) لضمان عدم كسر سلوك ``hidden``
   الافتراضي — بلا هذا فإن display:flex أعلاه يغلب display:none الافتراضي
   لعنصر مخفيّ بخاصّية hidden (نفس مستوى التحديد تقريباً، وأنماطنا تسبق أنماط
   المتصفّح الافتراضية في الترتيب). */
.measure-panel[hidden] {
  display: none;
}

.measure-modes {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
}

.measure-modes .seg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--fc-text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.measure-modes .seg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.measure-modes .seg.is-checked {
  background: var(--fc-accent);
  color: #fff;
}

.measure-result {
  min-height: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fc-text);
  text-align: center;
}

.measure-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.measure-action-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: var(--fc-text);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}

.measure-action-btn:hover {
  background: rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

/* الشاشات الصغيرة (نفس حدّ 1100px المُختبَر فعلياً في float-controls.css
   لبقية الأدوات العائمة) — عرض أضيق كي لا يقترب من حافة الشاشة المقابلة. */
@media (max-width: 1100px) {
  .measure-panel {
    min-width: 0;
    width: calc(100vw - (2 * var(--fc-gap)) - 4px);
    max-width: 280px;
  }
}