/* ch-053b — «چالش عملی» در صفحهٔ آزمون (exams/exam/…)
   ۱) تب «معرفی»: زیربخش «چالش عملی» به همان شکل بقیهٔ زیربخش‌ها (sec-h pd-sub + ردیف نام + یک بند + دکمهٔ کوچک)؛
   ۲) تب «چالش عملی»: یک مسیر عمودی از «قبولی در آزمون» تا «قبولی نهایی»؛ هر چالش وسط مسیر و مرحله‌هایش روی همان خط؛
   ۳) ردیف مشخصات هیرو در موبایل.
   ch-054b: کنار شمارهٔ هر مرحله نشانهٔ نوع آن (خطی، کم‌رنگ، بدون زمینه) و «هدف یادگیری» به شکل برچسب + متن.
   طراحی باز: بدون کادر و جدول. تنها رنگ تازه، رنگ خودِ تست‌کاو چالش است (--accent / --accent-ink / --accent-soft آن سایت)؛
   زرد سایت فقط برای نشان «قبولی نهایی». همهٔ قاعده‌ها زیر .sk-mkt-pd‌اند تا بر صفرکردن عمومی (.sk-body p/h3) غلبه کنند. */
.sk-mkt-pd{--chl:#5e6aa6;--chl-ink:#4a558e;--chl-tint:#eff1f8;--chl-line:#d6dbee;--chl-ic:#9aa4d2;--exj-x:18px;--exj-g:62px}
[data-theme="dark"] .sk-mkt-pd{--chl:#a3acd8;--chl-ink:#c3c9e8;--chl-tint:rgba(163,172,216,.1);--chl-line:rgba(163,172,216,.32);--chl-ic:#8d97c7}

/* ── ۱) تب «معرفی» ── */
.sk-mkt-pd .exi-about{margin:0}
.sk-mkt-pd .exi-about__name{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:14.5px;font-weight:700;line-height:1.8;color:var(--sk-ink,#15171a)}
.sk-mkt-pd .exi-about__ic{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--chl)}
.sk-mkt-pd .exi-about__ic svg{width:22px;height:22px}
.sk-mkt-pd .exi-about__p{margin:4px 0 0;font-size:14.5px;line-height:2.15;color:var(--sk-ink-soft,#4f5560);max-width:74ch}
.sk-mkt-pd .exi-about__go{display:inline-flex;align-items:center;gap:9px;margin-top:12px;padding:7px 16px;border-radius:999px;border:1px solid var(--sk-line,#ecebe6);
  background:var(--sk-surface,#fff);color:var(--sk-ink,#15171a);font-size:12.5px;font-weight:800;line-height:1.6;text-decoration:none;transition:border-color .15s,color .15s}
.sk-mkt-pd .exi-about__go::after{content:"";flex:none;width:5px;height:5px;border-left:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg)}
.sk-mkt-pd .exi-about__go:hover{border-color:var(--chl);color:var(--chl-ink)}
.sk-mkt-pd .exi-about__go:focus-visible{outline:2px solid var(--chl);outline-offset:2px}

/* ── ۲) تب «چالش عملی»: مسیر ── */
.sk-mkt-pd .exi .exi-sub{max-width:700px}
.sk-mkt-pd .exj{list-style:none;margin:32px 0 0;padding:0}
.sk-mkt-pd .exj-node{position:relative;padding-inline-start:var(--exj-g);padding-bottom:40px}
.sk-mkt-pd .exj-node:last-child{padding-bottom:4px}
/* خط مسیر: از مرکز نشانهٔ هر گره تا مرکز نشانهٔ گرهٔ بعد؛ بخشِ داخل چالش به رنگ چالش */
.sk-mkt-pd .exj-node:not(:last-child)::after{content:"";position:absolute;inset-inline-start:calc(var(--exj-x) - 1px);top:18px;bottom:-18px;width:2px;border-radius:2px;
  background:var(--sk-line-strong,#dedcd4)}
.sk-mkt-pd .exj-chl:not(:last-child)::after{background:var(--chl-line)}
.sk-mkt-pd .exj-mk{position:absolute;z-index:1;top:0;inset-inline-start:calc(var(--exj-x) - 18px);width:36px;height:36px;border-radius:50%;box-sizing:border-box;
  display:grid;place-items:center;background:var(--sk-surface,#fff);color:var(--sk-ink-soft,#5b6472);border:2px solid var(--sk-line-strong,#dedcd4);
  box-shadow:0 0 0 5px var(--sk-surface,#fff)}
.sk-mkt-pd .exj-mk svg{width:18px;height:18px}
.sk-mkt-pd .exj-chl>.exj-mk{top:-4px;inset-inline-start:calc(var(--exj-x) - 22px);width:44px;height:44px;background:var(--chl);border-color:var(--chl);color:#fff}
.sk-mkt-pd .exj-chl>.exj-mk svg{width:22px;height:22px}
[data-theme="dark"] .sk-mkt-pd .exj-chl>.exj-mk{color:#15171a}
.sk-mkt-pd .exj-end>.exj-mk{background:var(--sk-amber,#ffc218);border-color:var(--sk-amber,#ffc218);color:#15171a}
/* تیترها: سطر اول هم‌تراز مرکز نشانه (۱۸px) */
.sk-mkt-pd .exj-t{margin:0;padding-top:calc(18px - .8em);font-size:16px;font-weight:800;line-height:1.6;color:var(--sk-ink,#15171a)}
.sk-mkt-pd .exj-t--chl{font-size:20px}
.sk-mkt-pd .exj-t--chl small{margin-inline-start:12px;font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--sk-ink-faint,#8b9098);white-space:nowrap}
.sk-mkt-pd .exj-p{margin:4px 0 0;font-size:13.5px;line-height:2;color:var(--sk-ink-soft,#5b6472);max-width:66ch}
.sk-mkt-pd .exj-lead{margin:8px 0 0;font-size:15px;line-height:2;color:var(--sk-ink,#15171a);max-width:64ch}
/* مشخصات چالش: یک ردیف نشانه و متن */
.sk-mkt-pd .exj-meta{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13.5px;line-height:1.8;color:var(--sk-ink-soft,#5b6472)}
.sk-mkt-pd .exj-meta li{display:inline-flex;align-items:center;gap:7px}
.sk-mkt-pd .exj-meta svg{flex:none;width:17px;height:17px;color:var(--sk-ink-faint,#8b9098)}
/* شرط همین آزمون: تنها سطح رنگی تب */
.sk-mkt-pd .exj-deal{margin:20px 0 0;max-width:640px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px;padding:15px 22px;border-radius:14px;
  background:var(--chl-tint)}
.sk-mkt-pd .exj-deal>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.sk-mkt-pd .exj-deal dt{font-size:12px;font-weight:700;line-height:1.8;color:var(--chl-ink)}
.sk-mkt-pd .exj-deal dd{margin:0;font-size:14.5px;font-weight:800;line-height:1.8;color:var(--sk-ink,#15171a)}
.sk-mkt-pd .exj-prose{margin:22px 0 0;font-size:14.5px;line-height:2.15;color:var(--sk-ink-soft,#4f5560);max-width:70ch;overflow-wrap:anywhere}
.sk-mkt-pd .exj-prose.is-clamped{max-height:12.9em;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.sk-mkt-pd .exi-more{display:inline-flex;margin-top:6px;padding:2px 0;border:0;background:none;font:inherit;font-size:13px;font-weight:800;color:var(--chl-ink);cursor:pointer}
.sk-mkt-pd .exi-more:hover{text-decoration:underline;text-underline-offset:4px}
.sk-mkt-pd .exi-more:focus-visible{outline:2px solid var(--chl);outline-offset:2px;border-radius:4px}
/* هدف یادگیری: برچسب کوچک به رنگ چالش و متن به رنگ متن اصلی (مثل «شرط این آزمون»، بدون زمینه) */
.sk-mkt-pd .exj-goal{margin:18px 0 0;max-width:70ch;display:flex;flex-direction:column}
.sk-mkt-pd .exj-goal__l{font-size:12px;font-weight:700;line-height:1.8;color:var(--chl-ink)}
.sk-mkt-pd .exj-goal__t{font-size:14.5px;font-weight:600;line-height:2;color:var(--sk-ink,#15171a)}
/* مرحله‌ها: هر مرحله یک ایستگاه روی خط مسیر؛ شماره روی خط، نشانهٔ نوع مرحله (کم‌رنگ، بدون زمینه) و بعد عنوان و نوع */
.sk-mkt-pd .exj-steps-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:28px 0 4px;line-height:1.8}
.sk-mkt-pd .exj-steps-h b{font-size:14.5px;font-weight:800;color:var(--sk-ink,#15171a)}
.sk-mkt-pd .exj-steps-h span{font-size:12.5px;color:var(--sk-ink-faint,#8b9098)}
.sk-mkt-pd .exj-steps{list-style:none;margin:0;padding:0}
.sk-mkt-pd .exj-steps li{position:relative;display:flex;align-items:flex-start;column-gap:9px;padding:7px 0}
.sk-mkt-pd .exj-sn{position:absolute;z-index:1;top:7px;inset-inline-start:calc(var(--exj-x) - var(--exj-g) - 13px);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;line-height:1;color:var(--chl-ink);
  background:linear-gradient(var(--chl-tint),var(--chl-tint)),var(--sk-surface,#fff);box-shadow:0 0 0 4px var(--sk-surface,#fff)}
.sk-mkt-pd .exj-steps li.is-defense .exj-sn{box-sizing:border-box;background:var(--sk-surface,#fff);border:1.5px dashed var(--chl)}
.sk-mkt-pd .exj-si{flex:none;width:26px;height:26px;margin-inline-start:-21px;display:grid;place-items:center;color:var(--chl-ic)}
.sk-mkt-pd .exj-si svg{width:20px;height:20px}
.sk-mkt-pd .exj-sb{flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
.sk-mkt-pd .exj-st{min-width:0;font-size:14.5px;font-weight:600;line-height:26px;color:var(--sk-ink,#15171a)}
.sk-mkt-pd .exj-sk{font-size:12.5px;line-height:26px;color:var(--sk-ink-faint,#8b9098)}

/* ── ۳) هیرو: در موبایل ردیف مشخصات یک‌خطی است؛ با چالش، «زبان» (که در باکس خرید هم هست) جا را به چالش می‌دهد ── */
@media (max-width:640px){
  .sk-mkt-pd.pd-v8 .meta.cine-meta-row.has-chl .m.m-lang{display:none!important}
}
@media (max-width:360px){
  .cine-meta-row .m-chl__w{display:none}
}

@media (max-width:640px){
  .sk-mkt-pd{--exj-x:15px;--exj-g:46px}
  .sk-mkt-pd .exj{margin-top:24px}
  .sk-mkt-pd .exj-node{padding-bottom:32px}
  .sk-mkt-pd .exj-node:not(:last-child)::after{top:15px;bottom:-15px}
  .sk-mkt-pd .exj-mk{inset-inline-start:calc(var(--exj-x) - 15px);width:30px;height:30px;box-shadow:0 0 0 4px var(--sk-surface,#fff)}
  .sk-mkt-pd .exj-mk svg{width:16px;height:16px}
  .sk-mkt-pd .exj-chl>.exj-mk{top:-3px;inset-inline-start:calc(var(--exj-x) - 18px);width:36px;height:36px}
  .sk-mkt-pd .exj-chl>.exj-mk svg{width:19px;height:19px}
  .sk-mkt-pd .exj-t{padding-top:calc(15px - .8em);font-size:15.5px}
  .sk-mkt-pd .exj-t--chl{font-size:17.5px}
  .sk-mkt-pd .exj-t--chl small{display:block;margin:2px 0 0}
  .sk-mkt-pd .exj-lead{font-size:14.5px}
  .sk-mkt-pd .exj-meta{gap:6px 18px;font-size:13px}
  /* شرط آزمون در موبایل: فهرست «عنوان … مقدار» */
  .sk-mkt-pd .exj-deal{grid-template-columns:minmax(0,1fr);gap:0;padding:4px 16px}
  .sk-mkt-pd .exj-deal>div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0}
  .sk-mkt-pd .exj-deal>div+div{border-top:1px solid var(--chl-line)}
  .sk-mkt-pd .exj-deal dd{font-size:14px;text-align:end}
  .sk-mkt-pd .exj-steps li{padding:6px 0;column-gap:8px}
  .sk-mkt-pd .exj-sn{top:6px;inset-inline-start:calc(var(--exj-x) - var(--exj-g) - 12px);width:24px;height:24px;font-size:11.5px}
  .sk-mkt-pd .exj-si{width:24px;height:24px;margin-inline-start:-13px}
  .sk-mkt-pd .exj-si svg{width:18px;height:18px}
  .sk-mkt-pd .exj-st{font-size:14px;line-height:24px}
  .sk-mkt-pd .exj-sk{flex-basis:100%;line-height:1.6;margin-top:-2px}
}
/* بدون تک‌واژهٔ تنها در سطر آخر (مرورگرهایی که پشتیبانی نمی‌کنند همان شکست معمولی را دارند) */
.sk-mkt-pd .exi-about__p,.sk-mkt-pd .exi .exi-sub,.sk-mkt-pd .exj-p,.sk-mkt-pd .exj-lead,.sk-mkt-pd .exj-goal__t{text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.sk-mkt-pd .exi-about__go{transition:none}}