/* =========================================================================
   نظام التصميم — مأخوذ من الهوية المرجعية لقوى.

   ثابت على الوضع الفاتح عمداً (`color-scheme: light`): الهوية مبنية على
   خلفية فاتحة ولون كحلي غامق، وقلبها تلقائياً على أجهزة الوضع الداكن
   يُنتج شاشة سوداء لا تشبه المنصة في شيء.

   الشريط العلوي الوردي غير قابل للإخفاء من أي صفحة: صفحة تحاكي بنكاً أو
   جهة حكومية بلا إعلان صريح أنها محاكاة هي صفحة تصلح للاحتيال.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  color-scheme: light;

  /* الهوية */
  --brand: #204D88;          /* أزرق قوى، مأخوذ من الشعار */
  --brand-soft: #2C6BA8;
  --brand-tint: #EAF1F9;
  --ink: #12314D;            /* كحلي العناوين */
  --ink-mid: #4A8BC9;        /* أزرق نصف العنوان الثاني */
  --body: #33414F;
  --muted: #6E7C8A;
  --faint: #9AA6B2;

  /* الأسطح */
  --bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-2: #F3F6FA;
  --line: #E5EAF0;
  --line-strong: #D3DDE7;
  --dash: #C3D2E0;

  /* الحالات */
  --ok: #16A46B;      --ok-bg: #E9F8F0;   --ok-line: #A9E3C6;
  --bad: #C0332B;     --bad-bg: #FDECEB;  --bad-line: #F2B7B2;
  --warn: #A56A00;    --warn-bg: #FFF6E5; --warn-line: #EFD09B;
  --off: #74828F;     --off-bg: #EEF2F6;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(18, 49, 77, .05);
  --shadow: 0 2px 4px rgba(18, 49, 77, .04), 0 12px 32px -16px rgba(18, 49, 77, .18);

  --sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --display: "Tajawal", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* هويات البوابتين: نفس البنية، لون مختلف */
/* الألوان مستخرَجة من ملفَي الشعارين، لا مقدَّرة بالعين */
body[data-brand="anb"]   { --brand: #0874CC; --brand-soft: #0874CC; --brand-tint: #E7F2FC; --ink: #075A9E; }
body[data-brand="alrajhi"] { --brand: #221AFB; --brand-soft: #221AFB; --brand-tint: #EAE9FE; --ink: #1811C4; }
body[data-brand="riyad"] { --brand: #382E7F; --brand-soft: #008E7F; --brand-tint: #E9F6F4; --ink: #382E7F; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  direction: rtl;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-soft); }

/* --- شريط «بيئة تجريبية» ------------------------------------------------ */
.demo-ribbon {
  background: #FCE7EA;
  color: #98241D;
  border-bottom: 1px solid #F4CBD1;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  padding: 8px 18px;
}
.demo-ribbon span { color: #B8544E; font-weight: 500; }

/* --- الترويسة ----------------------------------------------------------- */
.site-head { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head .inner {
  max-width: 1180px; margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; gap: 20px;
}
.site-head .logo { height: 52px; width: auto; display: block; }
.site-head .logo.bank { height: 40px; }
.head-note { font-size: 11.5px; color: var(--faint); border-inline-start: 1px solid var(--line);
             padding-inline-start: 14px; line-height: 1.45; }
.wordmark { font-family: var(--display); font-size: 23px; font-weight: 800; color: var(--brand); line-height: 1.2; }
.wordmark small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; color: var(--faint); }

.pill {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--body);
  background: var(--surface);
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.site-head nav { margin-inline-start: auto; display: flex; gap: 22px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 760px) { .site-head nav, .pill { display: none; } }

/* --- التخطيط ------------------------------------------------------------ */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px 90px; }
.wrap.narrow { max-width: 780px; }
@media (max-width: 620px) { .wrap { padding-inline: 18px; } }

/* --- البطل -------------------------------------------------------------- */
.hero { padding: 62px 0 46px; }
.hero.center { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; color: var(--brand-soft); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5.6vw, 66px);
  font-weight: 800; line-height: 1.18; letter-spacing: -.02em;
  color: var(--ink); margin: 0 0 20px;
}
.hero h1 em { font-style: normal; color: var(--ink-mid); }
.hero p { margin: 0; max-width: 620px; color: var(--muted); font-size: 16px; }
.hero.center p { margin-inline: auto; }
@media (max-width: 620px) { .hero { padding: 38px 0 30px; } }

/* --- البطاقات ----------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.card > .body { padding: 26px 30px 30px; }
.card > .head {
  display: flex; align-items: flex-end; gap: 20px;
  padding: 24px 30px 20px; border-bottom: 1px solid var(--line);
}
.card > .head .t { flex: 1; }
.card > .head .k { font-size: 13.5px; font-weight: 600; color: var(--brand-soft); margin-bottom: 2px; }
.card > .head h2 { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; }
.card > .head p { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 620px) { .card > .head, .card > .body { padding-inline: 20px; } }

.section-title { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 14px; }
.section-title + .sub { margin-top: -10px; }
.sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }

/* --- مؤشّر الخطوات ------------------------------------------------------ */
.stepdots { display: flex; align-items: center; gap: 10px; flex: none; }
.stepdots b { font-size: 13px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.stepdots b.on { color: var(--brand); }
.stepdots i { width: 32px; height: 1.5px; background: var(--line-strong); display: block; }
@media (max-width: 620px) { .stepdots { display: none; } }

/* --- الحقول ------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field > label,
.label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.label.dot { display: flex; align-items: center; gap: 8px; }
.label.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.help { font-size: 12.5px; color: var(--faint); margin-top: 6px; line-height: 1.6; }

input[type=text], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
input::placeholder { color: #AFBAC5; }
input[readonly] { background: var(--surface-2); color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 780px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.split-ref { display: grid; grid-template-columns: 104px 1fr; gap: 12px; }
.split-ref input { text-align: center; letter-spacing: .1em; font-weight: 600; }

.checkline { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--body); }
.checkline input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--brand); flex: none; }

/* --- منطقة الرفع -------------------------------------------------------- */
.drop {
  position: relative; display: block; text-align: center;
  border: 1.5px dashed var(--dash); border-radius: var(--radius-sm);
  padding: 30px 20px; cursor: pointer; background: var(--surface);
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.hot { border-color: var(--brand); background: var(--brand-tint); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .icon {
  width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%;
  border: 1.5px solid var(--brand-soft); color: var(--brand-soft);
  display: grid; place-items: center; font-size: 19px; line-height: 1;
}
.drop .t { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.drop .s { font-size: 12.5px; color: var(--faint); margin-top: 4px; }
.drop.filled { border-style: solid; border-color: var(--ok); background: var(--ok-bg); }
.drop.filled .icon { border-color: var(--ok); color: var(--ok); }

/* --- الاختيار بين مسارين ------------------------------------------------ */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
@media (max-width: 780px) { .choice { grid-template-columns: 1fr; } }
.choice button {
  text-align: start; background: var(--surface); color: inherit;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 18px 20px; cursor: pointer; font: inherit; display: block; width: 100%;
  transition: border-color .15s, background .15s;
}
.choice button:hover { border-color: var(--brand-soft); }
.choice button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); }
.choice .t { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.choice .s { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* --- الطلبات الجاهزة ---------------------------------------------------- */
.req-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 780px) { .req-list { grid-template-columns: 1fr; } }
.req {
  display: block; width: 100%; text-align: start; font: inherit; color: inherit;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 15px 17px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.req:hover { border-color: var(--brand-soft); }
.req[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); }
.req .top { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.req .name { font-weight: 700; font-size: 14.5px; color: var(--ink); flex: 1; }
.req .ref { font-size: 11.5px; color: var(--faint); }
.req .why { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* --- الأزرار ------------------------------------------------------------ */
button, .btn {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: 13px 30px; background: var(--brand); color: #fff;
  text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; gap: 9px; transition: filter .15s, opacity .15s;
}
button:hover:not(:disabled), .btn:hover { filter: brightness(1.1); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost, .btn.ghost { background: var(--surface); color: var(--brand); border-color: var(--line-strong); }
button.ghost:hover, .btn.ghost:hover { filter: none; border-color: var(--brand); }
button.wide { width: 100%; }
.btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btnrow.end { justify-content: flex-start; }
.btnrow .spacer { margin-inline-start: auto; }

/* --- كابتشا صورية ------------------------------------------------------- */
.captcha {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid #D3D3D3; background: #F9F9F9; border-radius: 4px;
  padding: 13px 16px; max-width: 330px; box-shadow: 0 0 4px rgba(0,0,0,.07);
}
.captcha input { width: 26px; height: 26px; accent-color: #1A73E8; flex: none; margin: 0; }
.captcha .lbl { font-size: 14px; color: #222; flex: 1; }
.captcha .mark { text-align: center; color: #9AA0A6; font-size: 9px; line-height: 1.25; }
.captcha .mark b { display: block; font-size: 15px; color: #4285F4; }

/* --- الرقاقات والتنبيهات ------------------------------------------------ */
.chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.chip.pass { background: var(--ok-bg); color: var(--ok); }
.chip.fail { background: var(--bad-bg); color: var(--bad); }
.chip.review { background: var(--warn-bg); color: var(--warn); }
.chip.skipped, .chip.info { background: var(--off-bg); color: var(--off); }

.notice { border-radius: var(--radius-sm); padding: 13px 16px; font-size: 14px; border: 1px solid; margin-bottom: 16px; }
.notice.ok { background: var(--ok-bg); border-color: var(--ok-line); color: #0D6B47; }
.notice.err { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.notice.info { background: var(--brand-tint); border-color: #C3D8EE; color: var(--brand); }

/* --- جدول مفتاح/قيمة ---------------------------------------------------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 11px 22px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13.5px; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.faint { color: var(--faint); font-size: 13px; }
.hidden { display: none !important; }

/* --- شريط التقدّم وقائمة المراحل ---------------------------------------- */
.progress { height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 22px; }
.progress i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width .35s ease; }

.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ""; position: absolute; inset-inline-start: 8px; top: 12px; bottom: 12px; width: 2px; background: var(--line); }
.stage { position: relative; padding: 0 34px 16px 0; }
.stage .dot {
  position: absolute; inset-inline-start: 2px; top: 5px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--surface); border: 2.5px solid var(--line); z-index: 1;
}
.stage.running .dot { border-color: var(--brand); animation: pulse 1.1s ease-in-out infinite; }
.stage.pass .dot { border-color: var(--ok); background: var(--ok); }
.stage.fail .dot { border-color: var(--bad); background: var(--bad); }
.stage.review .dot { border-color: var(--warn); background: var(--warn); }
.stage.skipped .dot { border-color: var(--line-strong); background: var(--surface-2); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent); } }

.stage .row { display: flex; align-items: baseline; gap: 12px; }
.stage .title { font-size: 14.5px; font-weight: 600; color: var(--ink); flex: 1; }
.stage.skipped .title { color: var(--muted); font-weight: 500; }
.stage .time { font-size: 11.5px; color: var(--faint); direction: ltr; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stage .detail { font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.7; }
.stage.fail .detail { color: var(--bad); }

/* --- القرار ------------------------------------------------------------- */
.verdict { border-radius: var(--radius); border: 1.5px solid; padding: 26px 30px; margin-bottom: 22px; }
.verdict .label { font-size: 13px; font-weight: 600; opacity: .85; }
.verdict .value { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1.2; margin: 4px 0 8px; }
.verdict .why { font-size: 15px; color: var(--body); }
.verdict.APPROVED { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.verdict.REJECTED { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.verdict.MANUAL_REVIEW { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }

.rule { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 17px; margin-bottom: 10px; }
.rule .head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.rule .head .t { font-weight: 650; font-size: 14.5px; color: var(--ink); flex: 1; }
.rule .d { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.rule.FAIL { border-color: var(--bad-line); background: var(--bad-bg); }
.rule.REVIEW { border-color: var(--warn-line); background: var(--warn-bg); }
/* الرقاقة داخل بطاقة ملوّنة: خلفيتها من لون البطاقة نفسها فتختفي كرقاقة.
   تُقلب إلى أبيض لتبقى مقروءة ككتلة حالة لا كنصّ سائب. */
.rule.FAIL .chip.fail, .rule.REVIEW .chip.review { background: var(--surface); }

/* --- التذييل ------------------------------------------------------------ */
.site-foot {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 26px 28px; text-align: center; color: var(--faint); font-size: 13px;
}

/* =========================================================================
   قائمة منسدلة للاختيارات الجاهزة

   حلّت محلّ شبكة البطاقات: أربع بطاقات مفتوحة دائماً تشغل نصف الشاشة
   لخيارٍ يُختار مرّة واحدة. المنسدلة تعطي المعلومة نفسها عند الطلب فقط.
   ========================================================================= */
.picker { position: relative; margin-bottom: 20px; }

.picker > .toggle {
  width: 100%; text-align: start; font: inherit; color: inherit;
  background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 14px 18px; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.picker > .toggle:hover { border-color: var(--brand-soft); }
.picker[data-open="true"] > .toggle {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
.picker .cur { flex: 1; min-width: 0; }
.picker .cur .n { font-weight: 650; font-size: 15px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker .cur .m { font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker .caret { flex: none; color: var(--muted); font-size: 12px; transition: transform .18s; }
.picker[data-open="true"] .caret { transform: rotate(180deg); }

.picker > .menu {
  position: absolute; inset-inline: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  max-height: 340px; overflow-y: auto; padding: 6px;
}
.picker:not([data-open="true"]) > .menu { display: none; }

.picker .opt {
  display: block; width: 100%; text-align: start; font: inherit; color: inherit;
  background: transparent; border: 0; border-radius: 8px;
  padding: 11px 13px; cursor: pointer;
}
.picker .opt:hover { background: var(--surface-2); }
.picker .opt[aria-selected="true"] { background: var(--brand-tint); }
.picker .opt .top { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.picker .opt .name { font-weight: 650; font-size: 14px; color: var(--ink); flex: 1; }
.picker .opt .ref { font-size: 11.5px; color: var(--faint); }
.picker .opt .why { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* =========================================================================
   شاشة المعالجة: قرص واحد في المنتصف

   الشكل السابق كان قائمة تنمو نحو الأسفل، فتهرب الصفحة من عين المشاهد كلما
   انتهت مرحلة. القرص يبقى في مكانه، ويتغيّر النص حوله وحده — فلا حركة إلا
   حيث ينظر. القائمة التفصيلية تظهر بعد الانتهاء لا أثناءه.
   ========================================================================= */
.runner { display: grid; place-items: center; padding: 34px 20px 26px; text-align: center; }

.dial { position: relative; width: 168px; height: 168px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle { fill: none; stroke-linecap: round; }
.dial .track { stroke: var(--line); stroke-width: 6; }
.dial .prog {
  stroke: var(--brand); stroke-width: 6;
  stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
  transition: stroke-dashoffset .5s cubic-bezier(.4, 0, .2, 1);
}
.dial .spin {
  stroke: var(--brand-soft); stroke-width: 6; opacity: .5;
  stroke-dasharray: 42 285; transform-origin: 50% 50%;
  animation: dial-spin 1.15s linear infinite;
}
.dial.done .spin { display: none; }
@keyframes dial-spin { to { transform: rotate(360deg); } }

.dial .mid {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 2px;
}
.dial .mid b { font-family: var(--display); font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1; }
.dial .mid span { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; direction: ltr; }

.runner .now { font-family: var(--display); font-size: 19px; font-weight: 700;
  color: var(--ink); margin-top: 26px; min-height: 28px; }
.runner .say { font-size: 14px; color: var(--muted); margin-top: 6px;
  max-width: 560px; min-height: 44px; line-height: 1.7; }
.runner .el { font-size: 12px; color: var(--faint); margin-top: 10px;
  direction: ltr; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .dial .spin { animation: none; } }

/* --- حلقة صغيرة لكل مرحلة في القائمة التفصيلية -------------------------- */
.stage .ring { position: absolute; inset-inline-start: 0; top: 2px; width: 20px; height: 20px; z-index: 1; }
.stage .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.stage .ring circle { fill: var(--surface); stroke-width: 2.5; }
.stage .ring .r-track { stroke: var(--line); }
.stage .ring .r-arc { stroke: var(--line); stroke-dasharray: 50.3; stroke-dashoffset: 0; stroke-linecap: round; }
.stage.running .ring .r-arc { stroke: var(--brand); stroke-dasharray: 14 40;
  transform-origin: 50% 50%; animation: dial-spin 1s linear infinite; }
.stage.pass .ring .r-arc { stroke: var(--ok); }
.stage.fail .ring .r-arc { stroke: var(--bad); }
.stage.review .ring .r-arc { stroke: var(--warn); }
.stage.skipped .ring .r-arc { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.stage .ring .tick { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; }
.stage.pass .ring .tick { color: var(--ok); }
.stage.fail .ring .tick { color: var(--bad); }
.stage.review .ring .tick { color: var(--warn); }
.stage.skipped .ring .tick { color: var(--faint); }

.stage { padding-inline-end: 34px; }
.steps::before { inset-inline-start: 10px; }

/* --- مخرجات المرحلة القابلة للطيّ --------------------------------------- */
.stage .out {
  margin-top: 8px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px; color: var(--body);
  direction: ltr; text-align: left; overflow-x: auto; white-space: pre-wrap;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; line-height: 1.6;
}
.stage details { margin-top: 6px; }
.stage summary { cursor: pointer; font-size: 12.5px; color: var(--brand-soft); }
.stage summary::marker { color: var(--faint); }