/* ═══════════════════════════════════════════════════════════════════════════
   assets/css/jadhlah-pwa.css — شاشةُ التفعيل و«أجهزتي» (ن١٠ · سبتمبر ٢٠٢٦)
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ كلُّ رمزٍ هنا معرَّفٌ في `tokens.css` — والمتغيّرُ غير المعرَّف **لا
      يرمي شيئاً**: يظهر النصُّ بلا لون. (مصيدةٌ وقعت في `portal.css`.)
   🔑 ولا مكتبةَ ولا CDN — قاعدةُ المشروع، والسابقةُ مقيسة في التذييل العامّ.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════
   ٠) الرموز المحليّة — والورقةُ **مستقلّةٌ عن `tokens.css`**
   ═════════════════════════════════════════════════════════════════════
   🔴 **ولم يكن كذلك — ومقيسٌ في متصفّحٍ حقيقيّ لا مُستنتَج.** كانت
      95 قراءةً خاماً بلا احتياطيّ، فصفحةٌ لا تحمّل `tokens.css`
      تُسقط الخاصيةَ **بصمت**:

        `.jpw-btn.pri` ⇒ خلفيةٌ **شفّافة** ونصٌّ `#17140a` — زرٌّ لا يُرى

      أي **زرُّ الإجراء الأساسيّ نصُّه أسودُ على خلفيةٍ شفّافة** —
      لا يُرى إطلاقاً، ولا خطأَ ولا رسالة. وهو نمط `--gold-light` في
      `portal.css` بعينه، موثَّقٌ في `CLAUDE.md`.

   🔑 **والعلاج خريطةٌ مُنطاقة لا كتلةُ `html { … }` عامّة** — وثلاثةُ
      أسبابٍ مقيسة:
      ١. كتلةٌ عامّة **تُسرّب رموزاً إلى صفحةٍ لم تُعرّفها قطّ**، فعنصرٌ
         فيها يقرأ `var(--txt, #333)` بنيّةِ ثيمٍ فاتح يصير أبيضَ على
         أبيض. **فالمكوّنُ يُصلح نفسَه ويكسر جارَه.**
      ٢. ولا تبعيّةَ ترتيبِ تحميل — الخريطةُ داخل الورقة نفسِها.
      ٣. وهو **الاصطلاحُ المقيسُ في هذا المستودع**: `jadhlah-picker.css`
         (`--k-*`) و`includes/app_shell.php` (`--jg`/`--jbd`) كلاهما
         يفعله، والثاني توثيقُه صريح: «يحمل أنماطَه معه».

   ⚠️ **والقيمُ منقولةٌ من `:root` في `tokens.css` آلياً لا باليد** —
      وسابقةُ `display_name` في ثلاث هجرات موثَّقةٌ في `CLAUDE.md`:
      كُتب فوقها «مقروءةٌ من Migration 015» وكانت من الذاكرة.
   🔑 **و`tokens.css` تبقى المرجع:** `var(--x, <منقول>)` — فحين
      تُحمَّل تفوز هي، وحين تغيب يبقى المكوّنُ كما صُمّم. وتغييرُ
      الهوية فيها **يصل هنا بلا لمس حرف**.
   ═════════════════════════════════════════════════════════════════════ */
.jpw-root, .jpd-box {
  --jp-bad           : var(--bad, #f2555a);
  --jp-bad-bg        : var(--bad-bg, rgba(242,85,90,.12));
  --jp-bad-fg        : var(--bad-fg, #ff8f93);
  --jp-ease          : var(--ease, cubic-bezier(.22,.61,.36,1));
  --jp-font-body     : var(--font-body, 'Thmanyah Sans', 'YearCamel', 'Tajawal', -apple-system, 'Segoe UI', Tahoma, sans-serif);
  --jp-font-display  : var(--font-display, 'Thmanyah Serif Display', 'YearCamel', 'Tajawal', -apple-system, 'Segoe UI', Tahoma, sans-serif);
  --jp-font-num      : var(--font-num, 'YearCamel', 'Tajawal', -apple-system, 'Segoe UI', Tahoma, sans-serif);
  --jp-fs-lg         : var(--fs-lg, 17px);
  --jp-fs-md         : var(--fs-md, 14px);
  --jp-fs-sm         : var(--fs-sm, 13px);
  --jp-fs-xl         : var(--fs-xl, 20px);
  --jp-fs-xs         : var(--fs-xs, 12px);
  --jp-fw-bold       : var(--fw-bold, 700);
  --jp-fw-medium     : var(--fw-medium, 500);
  --jp-gold          : var(--gold, #D4AF37);
  --jp-gold-bright   : var(--gold-bright, #EACB66);
  --jp-gold-dim      : var(--gold-dim, #8f7622);
  --jp-info-bg       : var(--info-bg, rgba(212,175,55,.10));
  --jp-info-fg       : var(--info-fg, #EACB66);
  --jp-line          : var(--line, #2a2a34);
  --jp-ok            : var(--ok, #34c77b);
  --jp-ok-bg         : var(--ok-bg, rgba(52,199,123,.12));
  --jp-ok-fg         : var(--ok-fg, #6fe0a7);
  --jp-r-full        : var(--r-full, 999px);
  --jp-r-lg          : var(--r-lg, 20px);
  --jp-r-sm          : var(--r-sm, 10px);
  --jp-r-xs          : var(--r-xs, 6px);
  --jp-sh-3          : var(--sh-3, 0 12px 40px -12px rgba(0,0,0,.7));
  --jp-surface       : var(--surface, #131318);
  --jp-surface-2     : var(--surface-2, #1a1a21);
  --jp-surface-3     : var(--surface-3, #24242c);
  --jp-t-fast        : var(--t-fast, .16s);
  --jp-txt           : var(--txt, #f4f4f6);
  --jp-txt-2         : var(--txt-2, #adafb8);
  --jp-txt-3         : var(--txt-3, #71717c);
  --jp-warn          : var(--warn, #f97316);
  --jp-warn-bg       : var(--warn-bg, rgba(249,115,22,.12));
  --jp-warn-fg       : var(--warn-fg, #f9a45f);
}


/* ── شاشةُ التفعيل ───────────────────────────────────────────────────────
   ⚠️ **وz-index دون سقف المنتقي (2147483000) بألف** — فالشاشةُ تعلو
      المحتوى ولا تُنازع قائمةً منسدلةً قد تُفتح فوقها في حوارٍ آخر.
      والجولةُ الإرشادية تعلوهما (2147483001) وهي المقصودة أن تعلو. */
.jpw-root {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .68);
  opacity: 0;
  transition: opacity .22s var(--jp-ease);
}
.jpw-root.is-on { opacity: 1; }

.jpw-card {
  width: 100%;
  max-width: 460px;
  background: var(--jp-surface);
  border: 1px solid var(--jp-line);
  border-bottom: 0;
  border-radius: var(--jp-r-lg) var(--jp-r-lg) 0 0;
  box-shadow: var(--jp-sh-3);
  color: var(--jp-txt);
  font-family: var(--jp-font-body);
  padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  position: relative;
  transform: translateY(18px);
  transition: transform .26s var(--jp-ease);
  max-height: 88vh;
  overflow-y: auto;
}
.jpw-root.is-on .jpw-card { transform: none; }

@media (min-width: 620px) {
  .jpw-root { align-items: center; }
  .jpw-card { border-radius: var(--jp-r-lg); border-bottom: 1px solid var(--jp-line); }
}

.jpw-card h2 {
  margin: 0 0 6px;
  font-family: var(--jp-font-display);
  font-size: var(--jp-fs-xl);
  color: var(--jp-gold-bright);
  line-height: 1.4;
}
.jpw-sub { margin: 0 0 16px; font-size: var(--jp-fs-md); line-height: 1.85; color: var(--jp-txt-2); }
.jpw-warn {
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--jp-warn-bg); color: var(--jp-warn-fg);
  border: 1px solid var(--jp-warn); border-radius: var(--jp-r-sm);
  font-size: var(--jp-fs-sm); line-height: 1.7;
}

/* ── الخطوات ────────────────────────────────────────────────────────────
   🔑 **والمنجَزُ يُعلَّم ولا يختفي** — فمن يرى خطوتين من ثلاث يعرف أين
      هو، ومن تختفي خطواتُه يظنّ الشاشةَ تبدّلت تحته. */
.jpw-steps { list-style: none; margin: 0 0 18px; padding: 0; }
.jpw-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 11px 0;
  border-top: 1px solid var(--jp-line);
}
.jpw-steps li:first-child { border-top: 0; }
.jpw-steps b { font-size: var(--jp-fs-md); font-weight: var(--jp-fw-bold); color: var(--jp-txt); }
.jpw-steps em {
  grid-column: 2; font-style: normal;
  font-size: var(--jp-fs-sm); line-height: 1.8; color: var(--jp-txt-3);
}
.jpw-n {
  grid-row: span 2;
  width: 24px; height: 24px; margin-top: 2px;
  border: 1.5px solid var(--jp-line);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--jp-txt-3);
}
.jpw-steps li.ok .jpw-n { border-color: var(--jp-ok); background: var(--jp-ok-bg); color: var(--jp-ok-fg); }
.jpw-steps li.ok b { color: var(--jp-ok-fg); }

/* ── الأزرار ─────────────────────────────────────────────────────────────
   ⚠️ **و٤٨ بكسل ارتفاعاً** — الإصبعُ ليست مؤشّراً، وهذه شاشةُ جوالٍ
      بالتعريف. */
.jpw-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.jpw-btn {
  flex: 1 1 auto;
  appearance: none;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--jp-line);
  background: var(--jp-surface-2);
  color: var(--jp-txt);
  font: inherit;
  font-size: var(--jp-fs-md);
  font-weight: var(--jp-fw-medium);
  border-radius: var(--jp-r-sm);
  cursor: pointer;
  transition: background var(--jp-t-fast) var(--jp-ease);
}
.jpw-btn:hover:not(:disabled) { background: var(--jp-surface-3); }
.jpw-btn:disabled { opacity: .55; cursor: default; }
.jpw-btn.pri {
  background: var(--jp-gold); border-color: var(--jp-gold);
  color: #17140a; font-weight: var(--jp-fw-bold);
}
.jpw-btn.pri:hover:not(:disabled) { background: var(--jp-gold-bright); border-color: var(--jp-gold-bright); }

.jpw-x {
  position: absolute; top: 12px; inset-inline-start: 12px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--jp-txt-3);
  font-size: 22px; line-height: 1; border-radius: var(--jp-r-xs); cursor: pointer;
}
.jpw-x:hover { color: var(--jp-txt); background: var(--jp-surface-3); }

.jpw-note {
  margin: 12px 0 0; min-height: 18px;
  font-size: var(--jp-fs-sm); line-height: 1.7; color: var(--jp-txt-2);
}

/* ── «أجهزتي» داخل لوحة التنبيهات ───────────────────────────────────── */
.jpd-box { margin: 0 0 18px; }
.jpd-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px;
}
.jpd-head h3 {
  margin: 0; font-family: var(--jp-font-display);
  font-size: var(--jp-fs-lg); color: var(--jp-gold-bright);
}
.jpd-state {
  font-size: var(--jp-fs-xs); padding: 3px 10px; border-radius: var(--jp-r-full);
  border: 1px solid var(--jp-line); color: var(--jp-txt-3);
}
.jpd-state.on { border-color: var(--jp-ok); background: var(--jp-ok-bg); color: var(--jp-ok-fg); }
.jpd-state.off { border-color: var(--jp-warn); background: var(--jp-warn-bg); color: var(--jp-warn-fg); }
.jpd-sp { margin-inline-start: auto; }

.jpd-list { list-style: none; margin: 0; padding: 0; }
.jpd-list li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 11px 0; border-top: 1px solid var(--jp-line);
  font-size: var(--jp-fs-sm);
}
.jpd-list li:first-child { border-top: 0; }
.jpd-list b { font-weight: var(--jp-fw-medium); color: var(--jp-txt); }
.jpd-list .t {
  color: var(--jp-txt-3);
  font-family: var(--jp-font-num);
  font-variant-numeric: tabular-nums;
}
.jpd-list .me {
  font-size: var(--jp-fs-xs); padding: 2px 8px; border-radius: var(--jp-r-full);
  background: var(--jp-info-bg); color: var(--jp-info-fg); border: 1px solid var(--jp-gold-dim);
}
.jpd-list .bad { color: var(--jp-bad-fg); }
.jpd-empty { margin: 0; padding: 12px 0; font-size: var(--jp-fs-sm); color: var(--jp-txt-3); }

.jpd-btn {
  appearance: none; min-height: 38px; padding: 8px 14px;
  border: 1px solid var(--jp-line); background: var(--jp-surface-2); color: var(--jp-txt);
  font: inherit; font-size: var(--jp-fs-sm); border-radius: var(--jp-r-sm); cursor: pointer;
}
.jpd-btn:hover:not(:disabled) { background: var(--jp-surface-3); }
.jpd-btn:disabled { opacity: .55; cursor: default; }
.jpd-btn.pri { background: var(--jp-gold); border-color: var(--jp-gold); color: #17140a; font-weight: var(--jp-fw-bold); }
/* حذفُ جهازٍ بعينه — ثانويٌّ بلونه، وفي آخر الصفّ
   ⚠️ **وهنا لا في سمة `style` سطرية** — والصنفُ بلا قاعدة يراه
      `css_check` مستعمَلاً بلا تعريف، وهو محقٌّ: أسلوبٌ يعيش في
      الجافاسكربت لا يُراجَع مع بقيّة الورقة. */
.jpd-x {
  margin-inline-start: auto;
  min-height: 34px;
  padding: 6px 12px;
  color: var(--jp-txt-3);
}
.jpd-x:hover:not(:disabled) { color: var(--jp-bad-fg); border-color: var(--jp-bad); background: var(--jp-bad-bg); }
.jpd-msg { margin: 10px 0 0; min-height: 17px; font-size: var(--jp-fs-sm); color: var(--jp-txt-2); }

@media (prefers-reduced-motion: reduce) {
  .jpw-root, .jpw-card { transition: none; }
  .jpw-card { transform: none; }
}