/* ===== صفحة: المخطّطات — المستعرض ===== */
.pv{
  /* ارتفاعُ المسرح في متغيّرٍ واحد: تقرؤه الصورةُ والبديلُ وملءُ الشاشة
     معاً، فلا ثلاثةُ أرقامٍ تفترق. */
  --pv-h:clamp(320px, 62vh, 680px);
  --iz:1;                            /* مقلوبُ التكبير — تعاكسه النقاط */
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

/* ---------- شريط المخطّطات ---------- */
.pv__tabs{
  display:flex; gap:6px; padding:10px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  border-bottom:1px solid var(--line);
  background:var(--sand-2);
}
.pv__tab{
  flex:0 0 auto;
  padding:9px 17px; border-radius:99px;
  font-size:14.5px; font-weight:500; color:var(--muted);
  border:1px solid transparent;
  transition:background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.pv__tab:hover{color:var(--ink); border-color:var(--line)}
.pv__tab.is-on{background:var(--green); color:var(--paper); border-color:var(--green)}
/* المخطّط الذي لم تصل صورتُه — يُعلَّم ولا يُخفى: الصفحة عن المخطّطات،
   و«قيد التحضير» فيها خبرٌ صادق لا عيب. */
.pv__tab[data-soon]::after{
  content:'قيد التحضير';
  margin-inline-start:7px; padding:1px 7px; border-radius:99px;
  font-size:11px; font-weight:600;
  background:var(--stone); color:var(--gold-2);
}
.pv__tab.is-on[data-soon]::after{background:rgba(243,236,225,.16); color:var(--gold-3)}

/* ---------- المسرح ---------- */
.pv__stage{
  position:relative; height:var(--pv-h);
  display:grid; place-items:center;
  overflow:hidden;
  background:var(--sand-2);
  /* ⚠ تمنع المتصفّح من التقاط السحب تمريراً للصفحة — وبدونها لا يتحرّك
     المخطّط على الهاتف إطلاقاً، تنزلق الصفحة تحته. */
  touch-action:none;
  cursor:grab;
}
.pv__stage.is-drag{cursor:grabbing}
.pv__pan{
  display:grid; place-items:center;
  width:100%; height:100%;
  transform-origin:center center;
  will-change:transform;
}
/* بلا انتقالٍ أثناء السحب، ومعه عند الأزرار — يُضاف من السكربت */
.pv__pan.is-eased{transition:transform .35s var(--ease)}

.pv__item{position:relative; margin:0; line-height:0; max-width:100%; max-height:100%}
.pv__item[hidden]{display:none}
.pv__img{
  max-width:100%; max-height:var(--pv-h);
  width:auto; height:auto;
  border-radius:0;
  user-select:none; -webkit-user-drag:none;
}
/* البديلُ حين لا صورة — لا يرث `width:auto` فينكمش على نصّه */
.pv__item .ph{
  width:min(100%, 620px); height:auto;
  max-height:var(--pv-h);
  border:1px dashed var(--stone); background:transparent;
}

/* ---------- النقاط ---------- */
/* ⚠ `left` و`top` بالنسبة المئوية لا خصائص منطقية: الإحداثيات في
   `spots.json` من اليسار ومن الأعلى كما تكتبها اللوحة، والصورة لا
   تنقلب مع اتّجاه الصفحة. */
.pv__spot{
  position:absolute; z-index:3;
  transform:translate(-50%,-50%) scale(var(--iz));
  transform-origin:center center;
  line-height:2;
}
.pv__dot{
  display:block; width:15px; height:15px; border-radius:50%;
  background:#C6F542;                 /* ليمونيٌّ فاقع — الذهبيُّ يذوب في الرندر */
  box-shadow:0 0 0 3px rgba(19,30,25,.35);
  transition:transform .3s var(--ease);
}
.pv__dot::before{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid #C6F542; opacity:.75;
  animation:pvPulse 2.4s var(--ease) infinite;
}
@keyframes pvPulse{
  0%{transform:scale(.7); opacity:.75}
  70%{transform:scale(2.1); opacity:0}
  100%{opacity:0}
}
.pv__spot:hover .pv__dot,
.pv__spot:focus-visible .pv__dot{transform:scale(1.28)}
.pv__card{
  position:absolute; bottom:calc(100% + 14px); left:50%;
  transform:translate(-50%, 8px);
  width:min(258px, 68vw);
  background:var(--card); color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:0 18px 40px rgba(22,33,26,.2);
  padding:13px 15px;
  font-size:13px; line-height:1.75; color:var(--muted);
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s var(--ease);
  text-align:start;
}
.pv__card b{display:block; font-size:14px; color:var(--green); margin-bottom:2px}
.pv__spot.is-up .pv__card{bottom:auto; top:calc(100% + 14px)}
.pv__spot:hover .pv__card,
.pv__spot:focus-visible .pv__card,
.pv__spot.is-open .pv__card{opacity:1; transform:translate(-50%, 0); pointer-events:auto}

/* ---------- الأدوات ---------- */
.pv__tools{
  position:absolute; inset-block-start:14px; inset-inline-end:14px;
  display:flex; flex-direction:column; gap:6px; z-index:5;
}
.pv__tool{
  width:38px; height:38px; border-radius:10px;
  display:grid; place-items:center;
  background:rgba(250,247,240,.94); color:var(--green);
  border:1px solid var(--line);
  font-size:17px; line-height:1;
  box-shadow:0 4px 14px rgba(22,33,26,.12);
  transition:background .25s, color .25s, transform .25s var(--ease);
}
.pv__tool:hover{background:var(--green); color:var(--paper); transform:translateY(-1px)}
.pv__tool[disabled]{opacity:.4; cursor:default; transform:none}

.pv__hint{
  position:absolute; inset-block-end:12px; inset-inline-start:50%;
  transform:translateX(-50%);
  background:rgba(22,33,26,.78); color:var(--paper);
  padding:6px 15px; border-radius:99px;
  font-size:12.5px; white-space:nowrap; pointer-events:none;
  transition:opacity .5s; z-index:5;
}
.pv__hint.is-gone{opacity:0}

/* ---------- ملء الشاشة ---------- */
.pv:fullscreen{
  --pv-h:calc(100vh - 78px);
  border-radius:0; border:none;
  background:var(--forest);
  display:flex; flex-direction:column;
}
.pv:fullscreen .pv__tabs{background:var(--green-2); border-color:var(--green-line)}
.pv:fullscreen .pv__tab{color:var(--paper-muted)}
.pv:fullscreen .pv__tab:hover{color:var(--paper); border-color:var(--green-line)}
.pv:fullscreen .pv__tab.is-on{background:var(--gold-3); color:var(--on-gold); border-color:var(--gold-3)}
.pv:fullscreen .pv__stage{flex:1; height:auto; background:var(--forest)}

@media (max-width:620px){
  .pv{--pv-h:clamp(280px, 52vh, 460px)}
  .pv__tool{width:34px; height:34px}
  .pv__hint{font-size:11.5px; padding:5px 12px}
}

@media (prefers-reduced-motion: reduce){
  .pv__dot::before{animation:none; opacity:.4; transform:scale(1.8)}
  .pv__pan.is-eased{transition:none}
}