/* atheer-wizard.css — معالج ربط القنوات
 * ════════════════════════════════════════════════════════════════════════════
 * أنماط مكوّن جديد (`at-wiz`) — لا يُعدّل شيئًا قائمًا ولا يُخفي عنصرًا.
 * القياسات من سلّم Vireo: space 4·8·12·16·20·24 · radius xs8 sm12 md14 xl24.
 * ════════════════════════════════════════════════════════════════════════════ */

.at-wiz { padding: 0; overflow: hidden; }

/* ── شريط الخطوات ────────────────────────────────────────────────────────
 * الخطّ الواصل يُرسم خلف النقاط بـ`::before` على الحاوي — لا عنصر لكلّ فجوة.
 * والحالة تُقرأ بالشكل قبل اللون: ✓ للمنجَز، ورقمٌ ممتلئ للحاليّ، وباهتٌ للقادم. */
.at-wiz__steps {
  display: flex;
  gap: 6px;
  padding: 20px 24px;
  border-block-end: 1px solid var(--at-border, #cfd7e6);
  background: var(--at-surface-2, #f0f3f9);
  overflow-x: auto;
}
/* 🔴 `flex: 1 1 0` مع `nowrap` **يعصر** التسمية فتُقصّ («الد» · «التوج»)،
 * وهو عين «القوائم غير متناسقة الأبعاد». الخطوة تُقاس بمحتواها، والحاوي
 * ينساب أفقيًّا إن ضاق — تسميةٌ كاملة تنساب خيرٌ من تسمية مبتورة تتّسع. */
.at-wiz__step {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  font-size: 13px; white-space: nowrap;
  color: var(--at-text-muted, #535e74);
}
/* فاصل بصريّ بين الخطوات — يحلّ محلّ التمدّد في إظهار التسلسل */
.at-wiz__step + .at-wiz__step::before {
  content: ""; inline-size: 18px; block-size: 1px; flex: 0 0 auto;
  background: var(--at-border, #cfd7e6); margin-inline-end: 8px;
}

.at-wiz__step-dot {
  inline-size: 26px; block-size: 26px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;                       /* النقطة دائرة — عرفٌ في كلّ معالج */
  font-size: 12px; font-weight: 700;
  background: var(--at-surface-3, #e2e8f0);
  color: var(--at-text-muted, #535e74);
  border: 1px solid var(--at-border, #cfd7e6);
}
.at-wiz__step[data-state="current"] { color: var(--at-text-primary, #151b27); font-weight: 600; }
.at-wiz__step[data-state="current"] .at-wiz__step-dot {
  background: var(--at-accent, #2a5fcc); color: #fff; border-color: var(--at-accent, #2a5fcc);
}
.at-wiz__step[data-state="done"] { color: var(--at-success, #1f6a3d); }
.at-wiz__step[data-state="done"] .at-wiz__step-dot {
  background: var(--at-success-bg, #e7f4ec); color: var(--at-success, #1f6a3d);
  border-color: var(--at-success, #1f6a3d);
}

/* ── الجسم والتذييل ──────────────────────────────────────────────────────*/
.at-wiz__body   { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.at-wiz__footer {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 24px;
  border-block-start: 1px solid var(--at-border, #cfd7e6);
  background: var(--at-surface-2, #f0f3f9);
}
.at-wiz__lead { margin: 0; font-size: 13.5px; color: var(--at-text-secondary, #3a4456); line-height: 1.6; max-inline-size: 72ch; }
.at-wiz__hint { font-size: 12px; color: var(--at-text-muted, #535e74); line-height: 1.5; }

/* ── اختيار المنصّة ──────────────────────────────────────────────────────
 * البطاقة تحمل ما يجب إحضاره **قبل** الدخول — لا بعد ثلاث خطوات. */
.at-wiz__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.at-wiz__pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px; text-align: start; cursor: pointer;
  background: var(--at-surface-1, #fff);
  border: 1px solid var(--at-border, #cfd7e6);
  border-radius: var(--at-radius-md, 14px);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.at-wiz__pick:hover { border-color: var(--at-accent, #2a5fcc); transform: translateY(-1px); }
.at-wiz__pick[data-selected="true"] {
  border-color: var(--at-accent, #2a5fcc);
  box-shadow: 0 0 0 2px var(--at-accent-soft-bg, #e7edfb);
}
.at-wiz__pick-mark  { display: inline-flex; }
.at-wiz__pick-name  { font-weight: 600; font-size: 14px; color: var(--at-text-primary, #151b27); }
.at-wiz__pick-needs { font-size: 12px; color: var(--at-text-muted, #535e74); line-height: 1.5; }

/* ── الحقول ──────────────────────────────────────────────────────────────*/
.at-wiz__fields {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.at-wiz__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.at-wiz__field .field__label { font-size: 12px; font-weight: 500; color: var(--at-text-secondary, #3a4456); }
.at-wiz__field textarea.field__input { min-block-size: 84px; resize: vertical; }
.at-wiz__copyrow { display: flex; gap: 8px; align-items: center; }
.at-wiz__copyrow .field__input { flex: 1 1 auto; min-width: 0; }

/* ── لافتة المصيدة ───────────────────────────────────────────────────────
 * ليست تحذير خطأ بل معرفة ميدانيّة تمنع ساعات ضائعة — فنبرتها «معلومة». */
.at-wiz__trap {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--at-text-secondary, #3a4456);
  background: var(--at-info-bg, #e6effa);
  border: 1px solid var(--at-info, #245e9f);
  border-radius: var(--at-radius-sm, 12px);
}
.at-wiz__trap .icon { color: var(--at-info, #245e9f); flex: 0 0 auto; }

/* ── نتيجة الفحص ─────────────────────────────────────────────────────────*/
.at-wiz__verify { display: flex; flex-direction: column; gap: 10px; }
.at-wiz__result {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--at-radius-sm, 12px);
  border: 1px solid var(--at-border, #cfd7e6);
  background: var(--at-surface-2, #f0f3f9);
}
.at-wiz__result[data-ok="true"]  { border-color: var(--at-success, #1f6a3d); background: var(--at-success-bg, #e7f4ec); }
.at-wiz__result[data-ok="false"] { border-color: var(--at-danger,  #a6372a); background: var(--at-danger-bg,  #fbe9e6); }
.at-wiz__result-detail { font-size: 13px; color: var(--at-text-secondary, #3a4456); }

@media (max-width: 720px) {
  .at-wiz__steps  { padding: 14px 16px; }
  .at-wiz__body   { padding: 16px; }
  .at-wiz__footer { padding: 12px 16px; }
  .at-wiz__step-label { display: none; }     /* النقاط تكفي في الضيّق */
}

/* رقاقة أيقونة المنصّة — بديل الشعار الرسميّ (انظر تعليق الصفحة) */
.at-wiz__pick-mark {
  inline-size: 38px; block-size: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--at-radius-sm, 12px);
  background: var(--at-surface-2, #f0f3f9);
  color: var(--at-text-muted, #535e74);
}
.at-wiz__pick-mark[data-tone="success"] { background: var(--at-success-bg, #e7f4ec); color: var(--at-success, #1f6a3d); }
.at-wiz__pick-mark[data-tone="danger"]  { background: var(--at-danger-bg,  #fbe9e6); color: var(--at-danger,  #a6372a); }
.at-wiz__pick-mark[data-tone="info"]    { background: var(--at-info-bg,    #e6effa); color: var(--at-info,    #245e9f); }


/* ── دليل الخطوة الخارجيّة وشريط الرحلة ───────────────────────────────────
 * مطويّ افتراضيًّا: من يعرف الطريق لا يُزحَم، ومن لا يعرفه يجده. */
.at-wiz__guide {
  border: 1px solid var(--at-border, #cfd7e6);
  border-radius: var(--at-radius-sm, 12px);
  background: var(--at-surface-1, #fff);
  overflow: hidden;
}
.at-wiz__guide > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  color: var(--at-text-primary, #151b27);
  background: var(--at-surface-2, #f0f3f9);
  list-style: none;
}
.at-wiz__guide > summary::-webkit-details-marker { display: none; }
.at-wiz__guide > summary::after {
  content: "▾"; margin-inline-start: auto;
  color: var(--at-text-muted, #535e74);
  transition: transform 150ms ease;
}
.at-wiz__guide[open] > summary::after { transform: rotate(180deg); }
.at-wiz__guide-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.at-wiz__journey { inline-size: 100%; block-size: auto; max-block-size: 120px; }

/* العقدة النشطة تنبض نبضًا خفيفًا — لفتُ نظر لا استعراض */
@keyframes at-wiz-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.at-wiz__journey-node--active circle { animation: at-wiz-pulse 1.8s ease-in-out infinite; }
/* ⚠️ إتاحة: من يطلب تقليل الحركة لا يُفرَض عليه نبض */
@media (prefers-reduced-motion: reduce) {
  .at-wiz__journey-node--active circle { animation: none; stroke-width: 3; }
  .at-wiz__guide > summary::after { transition: none; }
}

.at-wiz__guide-list {
  margin: 0; padding-inline-start: 20px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--at-text-secondary, #3a4456);
}
/* الخطوة الخارجيّة تُعلَّم بلون التحذير — تمييزٌ ثانٍ غير الخطّ المتقطّع */
.at-wiz__guide-list li[data-out="true"] b { color: var(--at-warning, #7e5509); }
.at-wiz__guide-list li[data-out="true"]::marker { color: var(--at-warning, #7e5509); }

/* كتلة الاشتراك الآليّ — تُفصل بخطّ عن نتيجة الفحص فوقها */
.at-wiz__subwrap {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding-block-start: 12px;
  border-block-start: 1px dashed var(--at-border, #cfd7e6);
}


/* ── المكوّن المشترك `AtheerJourney` ──────────────────────────────────────
 * ⚠️ أصناف مستقلّة عن `at-wiz__*`: الشريط استُخرج ليخدم أيّ إعداد مطوّل، فلا
 * يصحّ أن يبقى معلَّقًا بأسماء المعالج. والقواعد أدناه تكرار مقصود لتلك
 * الموجودة أعلاه — الأصل هنا، وتلك تبقى لصفحة القنوات حتّى تُهاجَر. */
.at-journey { inline-size: 100%; block-size: auto; max-block-size: 120px; }
@keyframes at-journey-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.at-journey__node--active circle { animation: at-journey-pulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .at-journey__node--active circle { animation: none; stroke-width: 3; }
}

.at-journey-guide {
  border: 1px solid var(--at-border, #cfd7e6);
  border-radius: var(--at-radius-sm, 12px);
  background: var(--at-surface-1, #fff);
  overflow: hidden;
}
.at-journey-guide > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600;
  color: var(--at-text-primary, #151b27);
  background: var(--at-surface-2, #f0f3f9);
}
.at-journey-guide > summary::-webkit-details-marker { display: none; }
.at-journey-guide > summary::after {
  content: "▾"; margin-inline-start: auto; color: var(--at-text-muted, #535e74);
  transition: transform 150ms ease;
}
.at-journey-guide[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .at-journey-guide > summary::after { transition: none; } }
.at-journey-guide__body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.at-journey-guide__list {
  margin: 0; padding-inline-start: 20px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; line-height: 1.6; color: var(--at-text-secondary, #3a4456);
}
.at-journey-guide__list li[data-out="true"] b,
.at-journey-guide__list li[data-out="true"]::marker { color: var(--at-warning, #7e5509); }
.at-journey-guide__note { font-size: 12px; color: var(--at-text-muted, #535e74); line-height: 1.5; }


/* ── معاينة النطاق أثناء الكتابة ──────────────────────────────────────────
 * المعرّف قرارٌ لا يُتراجَع عنه (يصير نطاق الكيان)، فيُعرض أثره **مبنيًّا أمام
 * العين وهو يُكتب** — لا حقلًا تقنيًّا يُملأ ثمّ يُكتشف أثره بعد شهر. */
.at-wiz__domain {
  margin-block-start: 6px;
  font-family: var(--ax-mono, ui-monospace, monospace);
  font-size: 13px; direction: ltr; text-align: start;
}
.at-wiz__domain-host {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--at-radius-xs, 8px);
  border: 1px dashed var(--at-border, #cfd7e6);
  background: var(--at-surface-2, #f0f3f9);
  color: var(--at-text-muted, #535e74);
}
.at-wiz__domain-host[data-ok="true"] {
  border-style: solid;
  border-color: var(--at-success, #1f6a3d);
  background: var(--at-success-bg, #e7f4ec);
  color: var(--at-success, #1f6a3d);
}