/* ==========================================================================
   أدوات الفحص | Diagnostics page
   بتبني على متغيّرات style.css — نفس الثيم ونفس الأزرار، بدون تكرار.
   Builds on the tokens in style.css: same theme, same buttons, no duplication.
   ========================================================================== */

.tools-body { background: var(--bg); min-height: 100vh; }

/* ---------- الشريط العلوي | top bar ---------- */
.tbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.tbar__in {
  max-width: 900px; margin: 0 auto; padding: 12px 18px;
  display: flex; align-items: center; gap: 14px;
}
.tbar__mid { flex: 1; display: grid; gap: 2px; min-width: 0; }
/* `h1` جنب `strong`: العنوان صار `h1` لأسباب فهرسة، والشكل هو هو. */
.tbar__mid strong,
.tbar__mid h1 { font-size: .98rem; margin: 0; font-weight: 700; }
.tbar__mid span  { font-size: .78rem; color: var(--text-dim); }

.tools { max-width: 900px; margin: 0 auto; padding: 20px 18px 70px; display: grid; gap: 14px; }

.tools__top { display: grid; gap: 12px; }
.tfield { display: grid; gap: 6px; max-width: 260px; }
.tfield span { font-size: .82rem; color: var(--text-soft); }
.tfield input {
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: .95rem;
}
.tfield input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.tools__hint { font-size: .82rem; color: var(--text-dim); line-height: 1.75; }

/* ---------- بطاقة أداة | one tool ----------
   اسمها `tcard` مش `card`: `.card` محجوزة بـstyle.css لبطاقات الخدمات
   وفيها padding وحركة رفع عند المرور — كانت بتلبس الأدوات شكل غلط.
   Named `tcard`, not `card`: style.css already owns `.card` for the service
   cards, padding and hover-lift included. */
.tcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.tool__head {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 15px 16px; background: none; border: 0;
  color: var(--text); font: inherit; font-size: .95rem; font-weight: 600;
  text-align: start; cursor: pointer;
}
.tool__head:hover { background: var(--surface-2); }
.tool__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--slate); }
.tool[data-st="ok"]   .tool__dot { background: var(--green); }
.tool[data-st="warn"] .tool__dot { background: var(--amber); }
.tool[data-st="bad"]  .tool__dot { background: var(--red); }
.tool__name { flex: 1; }
.tool__st   { font-size: .8rem; font-weight: 400; color: var(--text-dim); }
.tool__chev { width: 22px; text-align: center; color: var(--text-dim); font-size: 1.1rem; }
.tool.is-open { border-color: var(--border-strong); }
.tool__body { padding: 4px 16px 16px; display: grid; gap: 12px; }
/* `display: grid` بيغلب `[hidden]` لأن الكلاس أقوى — لازم نقولها صراحة
   A class beats the `[hidden]` attribute, so display:none has to be restated. */
.tool__body[hidden], .cam[hidden], .rec[hidden], .kb__extra[hidden], .tmsg[hidden] { display: none; }

.tnote { font-size: .84rem; color: var(--text-soft); line-height: 1.8; }
.tnote b { color: var(--text); }
.tmsg {
  font-size: .85rem; line-height: 1.7; padding: 11px 13px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--red) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
}
.trow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ---------- النتيجة | verdict ---------- */
.verdict {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 4px; padding-top: 13px; border-top: 1px dashed var(--border-strong);
}
.verdict__lbl { font-size: .84rem; color: var(--text-soft); }
.vseg { display: flex; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.vseg button {
  border: 0; background: none; color: var(--text-soft);
  font: inherit; font-size: .82rem; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.vseg button.is-on { background: var(--bg-soft); color: var(--text); font-weight: 600; }
.vseg button[data-v="ok"].is-on   { color: var(--green); }
.vseg button[data-v="warn"].is-on { color: var(--amber); }
.vseg button[data-v="bad"].is-on  { color: var(--red); }
.vnote {
  flex: 1; min-width: 190px;
  padding: 9px 13px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: .85rem;
}
.vnote:focus { outline: none; border-color: var(--brand); }

/* ---------- فحص الشاشة | screen test ---------- */
.stest { position: fixed; inset: 0; z-index: 999; cursor: pointer; }
.stest[hidden] { display: none; }
.stest__hud {
  position: absolute; inset-inline-start: 50%; top: 22px; transform: translateX(-50%);
  display: grid; gap: 3px; text-align: center; pointer-events: none;
  color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); font-size: .9rem;
}
.stest__hint { font-size: .74rem; opacity: .82; }
.stest--onlight .stest__hud, .stest--onlight .stest__x { color: #111; text-shadow: none; }
.stest__x {
  position: absolute; inset-inline-end: 16px; top: 16px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0, 0, 0, .28); border: 0; color: #fff; font-size: 1.1rem; cursor: pointer;
}

/* ---------- الكيبورد | keyboard ---------- */
.kb { display: grid; gap: 4px; direction: ltr; outline: none; }
.kb__row { display: flex; gap: 4px; }
.k {
  display: grid; place-items: center;
  min-width: 0; padding: 9px 2px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .68rem; color: var(--text-soft);
  overflow: hidden; white-space: nowrap;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.k.is-hit {
  background: color-mix(in srgb, var(--green) 26%, transparent);
  border-color: var(--green); color: var(--text);
}
.k.is-down { background: var(--green); color: #04220f; border-color: var(--green); }
.kb__count { flex: 1; font-size: .84rem; color: var(--text-soft); }
.kb__extra { font-size: .8rem; color: var(--text-dim); direction: ltr; text-align: start; }

/* ---------- لوحة اللمس | touchpad ---------- */
/* مفتاح نوع الجهاز */
/* `.tool__body` جريد، فالمفتاح بيتمدّد لكل العرض بدون `justify-self`
   The body is a grid, so without this the switch stretches edge to edge. */
.tp-mode { display: flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: var(--surface-2); justify-self: start; }
.tp-mode button {
  border: 0; background: none; color: var(--text-soft);
  font: inherit; font-size: .8rem; padding: 7px 16px; border-radius: 999px; cursor: pointer;
}
.tp-mode button.is-on { background: var(--bg-soft); color: var(--text); font-weight: 600; }

/* مربّع مش شريط عريض: المساحة العريضة القصيرة بتخفي التقطيع بالحركة
   العمودية، والدايرة اللي بترسمها بتطلع بيضاوية فما بتقدر تحكم عليها.
   Square, not a wide strip: a short wide box hides vertical stutter and turns
   the circle you draw into an ellipse, which tells you nothing. */
.pad {
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 1 / 1;
  margin-inline: auto; border-radius: var(--r);
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  overflow: hidden; touch-action: none; cursor: crosshair;
}
.pad__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.pad__tip {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-dim); font-size: .82rem; pointer-events: none;
  transition: opacity .25s var(--ease);
}
.pad.is-drawn .pad__tip { opacity: 0; }
.tgs { display: flex; flex-wrap: wrap; gap: 7px; }
.tg {
  padding: 7px 13px; border-radius: 999px; font-size: .8rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.tg.is-on {
  background: color-mix(in srgb, var(--green) 22%, transparent);
  border-color: var(--green); color: var(--text);
}
.tg.is-on::before { content: "✓ "; color: var(--green); }

/* ---------- الكاميرا والمايك | camera + mic ---------- */
.cam {
  width: 100%; max-height: 320px; border-radius: var(--r);
  background: var(--bg-soft); border: 1px solid var(--border);
  object-fit: contain; transform: scaleX(-1);
}
.cam:not(.is-on) { display: none; }
.meter { height: 15px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.meter i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--green), var(--amber) 78%, var(--red));
  transition: width .06s linear;
}
.meter__n { font-size: .82rem; color: var(--text-dim); direction: ltr; text-align: start; }
.rec { width: 100%; }

/* ---------- الملخّص | summary ---------- */
.sumcard { padding: 16px; display: grid; gap: 12px; }
.sumcard h2 { font-size: .98rem; }
.sum {
  margin: 0; padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--bg-soft); border: 1px solid var(--border);
  font: inherit; font-size: .87rem; line-height: 1.95;
  white-space: pre-wrap; word-break: break-word;
}
.sum__btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* الصفحة مفتوحة للزبون كمان، فخانة الرمز مطويّة — بتنفتح بضغطة الفني
   أو لحالها لو الرمز جاي بالرابط.
   Customers see this page too, so the code field stays folded away. */
.staff-link {
  justify-self: start;
  background: none; border: 0; padding: 4px 0;
  color: var(--text-dim); font: inherit; font-size: .78rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.staff-link:hover { color: var(--text-soft); }
.staff-link[hidden] { display: none; }
#staffBox { display: grid; gap: 10px; }
#staffBox[hidden] { display: none; }
.send { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.tfield--code { max-width: 150px; }
.tfield--code input {
  direction: ltr; text-align: center; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 700;
}
.tmsg--ok {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
}

@media (max-width: 560px) {
  .k { font-size: .58rem; padding: 8px 1px; }
  .kb, .kb__row { gap: 3px; }
}

/* ---------- السماعات | speakers ---------- */
/* `direction: ltr` مقصود: يسار الشاشة = سمّاعة اليسار. بدونه الصفحة
   العربية بتقلب الصفّ فبتصير سمّاعة اليسار على يمين الشاشة، والفني بيختبر
   الجهة الغلط وهو مطمئن.
   Deliberate: screen-left must mean the left speaker. Without it the Arabic
   page flips the row and you test the wrong side without noticing. */
.spk { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; direction: ltr; }
.trow--spk { direction: ltr; justify-content: center; }
.spk__s {
  padding: 26px 10px; border-radius: var(--r); text-align: center;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); font-size: .85rem; font-weight: 600;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.spk__s.is-on {
  background: color-mix(in srgb, var(--green) 24%, transparent);
  border-color: var(--green); color: var(--text);
}

/* ---------- الواي فاي | Wi-Fi ---------- */
.wf { display: grid; gap: 1px; background: var(--border); border-radius: var(--r-sm); overflow: hidden; }
.wf__r {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 14px; background: var(--surface-2); font-size: .86rem;
}
.wf__r b { font-variant-numeric: tabular-nums; direction: ltr; }
.wf--ok  { color: var(--green); }
.wf--bad { color: var(--red); }

/* الملخّص جريد، فـ`[hidden]` لحاله ما بيكفي لإخفائه
   The card is a grid, so the attribute alone will not hide it. */
.sumcard[hidden] { display: none; }

/* تنبيه «هاي نتايج سابقة» — أصفر مش أحمر: مش خطأ، بس لازم تنتبه
   Amber, not red: nothing is broken, but you must not mistake it for fresh. */
.resumed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  color: var(--amber); font-size: .82rem; line-height: 1.6;
}
.resumed span { flex: 1; min-width: 190px; }
.resumed button {
  border: 1px solid currentColor; background: none; color: inherit;
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.resumed button:hover { background: var(--amber); color: #221803; }

/* ---------- تواصل معنا | contact ---------- */
.help {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 16px 18px;
}
.help__txt { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.help__txt strong { font-size: .95rem; }
.help__txt span { font-size: .8rem; color: var(--text-dim); }
.help__btns { display: flex; flex-wrap: wrap; gap: 8px; }
/* تدرّج إنستغرام الحقيقي — الزر بينعرف قبل ما تقرا اسمه
   Instagram's own gradient: the button is recognised before it is read. */
.btn--ig {
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  color: #fff; border: 0;
}
.btn--ig:hover { box-shadow: 0 14px 30px -14px rgba(220, 39, 67, .8); }

/* عدد الكبسات: أصفر لكبستين، أحمر لتلاتة فأكثر. الأخضر ضل «كبسة وحدة =
   سليم» عشان الفحص القديم ما ينقلب معناه على اللي متعوّد عليه. */
.k.is-x2 {
  background: color-mix(in srgb, var(--amber) 30%, transparent);
  border-color: var(--amber); color: var(--text);
}
.k.is-x3 {
  background: color-mix(in srgb, var(--red) 32%, transparent);
  border-color: var(--red); color: var(--text);
}
/* الرقم بزاوية الزر — الزر ضيّق فما بينفع جنب الحرف */
.k { position: relative; }
.k__n {
  position: absolute; top: 1px; inset-inline-end: 3px;
  font-size: .58rem; font-weight: 800; line-height: 1;
  opacity: .95;
}
.k.is-x2 .k__n { color: var(--amber); }
.k.is-x3 .k__n { color: var(--red); }
.k.is-down .k__n { color: inherit; }

.kb__legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 8px; font-size: .74rem; color: var(--text-dim);
}
.kb__legend span { display: inline-flex; align-items: center; gap: 6px; }
.kb__sw { width: 11px; height: 11px; border-radius: 3px; border: 1px solid; flex: none; }
.kb__sw--1 { background: color-mix(in srgb, var(--green) 26%, transparent); border-color: var(--green); }
.kb__sw--2 { background: color-mix(in srgb, var(--amber) 30%, transparent); border-color: var(--amber); }
.kb__sw--3 { background: color-mix(in srgb, var(--red)   32%, transparent); border-color: var(--red); }

.kb__warn {
  margin-top: 9px; padding: 10px 13px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  color: var(--amber); font-size: .8rem; line-height: 1.6;
}