/* ============================================================================
   wizard8.css — ویزاردِ ساختِ برنامه

   این فایل تنها منبعِ ظاهرِ ویزارد است. پیش از این، ظاهرِ همین صفحه بین هفت
   فایل پخش بود (builder / flow / redesign / coach-studio / studio / wizard7 /
   ui-polish) و هر کدام دیگری را بازنویسی می‌کرد؛ نتیجه‌اش یک صفحه بود که هیچ
   قاعدهٔ واحدی نداشت. کلاس‌های این بازطراحی عمداً نامِ تازه دارند تا هیچ‌کدام
   از آن قاعده‌ها رویشان نیفتد.

   قواعدِ حاکم:
     ① یک نما، بدونِ اسکرولِ صفحه. هر ناحیه‌ای که ذاتاً بلند است داخلِ قابِ
        خودش اسکرول می‌خورد.
     ② یک زبانِ انتخاب برای کلِ ویزارد: قابِ نارنجی + پس‌زمینهٔ روشن + تیک.
        هیچ جای دیگری «انتخاب‌شده» شکلِ دیگری ندارد.
     ③ فضای خالی با بزرگ‌کردنِ هدف‌های کلیک پر می‌شود، نه با متنِ توضیحی.

   فهرست:
     ۱ توکن‌ها و ریست            ۵ مرحلهٔ ۲ — چارچوب
     ۲ اسکلت (سربرگ/بدنه/فوتر)   ۶ مرحلهٔ ۳ — تمرکز و اجرا + کشویِ ضعف
     ۳ عناصرِ مشترک              ۷ مرحلهٔ ۴ — ساختار (فهرست + پیش‌نمایش)
     ۴ مرحلهٔ ۱ — شاگرد          ۸ مرحلهٔ ۵ — تختهٔ هفته و کشیدن
                                 ۹ واکنش‌گرا
   ============================================================================ */

/* ══ ۱ · توکن‌ها و ریست ═══════════════════════════════════════════════════ */
#scrWizard {
    --ink: var(--myo-ink);
    --ink-2: var(--myo-ink-2);
    --muted: var(--myo-ink-muted);
    --line: var(--myo-line);
    --line-2: var(--myo-line-2);
    --paper: var(--myo-paper);
    --wash: var(--myo-surface);
    --wash-2: var(--myo-surface-2);
    /* `navy` این‌جا هم جوهر است نه سطحِ تیره — قاعده‌اش در tokens.css. */
    --navy: var(--myo-ink-2);
    --navy-d: var(--myo-ink);
    --acc: var(--myo-brand);
    --acc-d: var(--myo-brand-ink);
    --acc-w: var(--myo-brand-soft);
    /* `ok` عمداً همان سبزِ برند است — قاعدهٔ «یک سبز، یک معنی».
       `warn` کهربایی است و باید بماند: در پاسِ سبزکردنِ ویزارد، نگاشتِ
       دسته‌ایِ رنگ این دو خط را هم برداشت و هشدار را سبز کرد. هشدار
       هیچ‌وقت هم‌رنگِ تأیید نمی‌شود. */
    --ok: var(--myo-ok);
    --ok-w: var(--myo-ok-soft);
    --warn: var(--myo-warn);
    --warn-w: var(--myo-warn-soft);
    --r-lg: 16px;
    --r-md: 12px;
    --r-sm: 9px;
    --ez: cubic-bezier(.22, 1, .36, 1);

    background: var(--wash-2);
}

.myowz, .myowz *, .myowz *::before, .myowz *::after { box-sizing: border-box; }

/* ── کارتِ ویزارد ─────────────────────────────────────────────────────────
   ویزارد **یک** کارت است، نه یک کارتِ سفید که ریلِ مرحله بالایش و دکمه‌ها
   پایینش روی زمینهٔ خاکستری شناورند. پیش از این سربرگ و فوتر بیرونِ قاب
   بودند و عرضِ کارت هم مرحله‌به‌مرحله بین ۱۱۶۰ و ۱۳۴۰ می‌پرید، و ارتفاعش
   تابعِ محتوا بود (۳۳۱ تا ۶۴۸ پیکسل) — یعنی دکمهٔ «ادامه» در هر مرحله جای
   دیگری می‌ایستاد و چشم باید هر بار دوباره پیدایش می‌کرد.

   حالا: یک قاب با عرض و ارتفاعِ ثابت، سه نوار داخلش (سربرگ · بدنه · فوتر)،
   و دکمه‌ها همیشه دقیقاً یک‌جا. `#scrWizard.on` در myo-ds.css یک ستونِ
   فلکسِ تمام‌صفحه است؛ این‌جا فقط وسط‌چین می‌شود و حاشیهٔ تنفس می‌گیرد. */
#scrWizard.on {
    justify-content: center;
    /* حاشیهٔ عمودی عمداً کم است: کارت وسط‌چین می‌شود و در نمای بلند خودش
       فاصله می‌گیرد؛ جمعِ این دو بالای سربرگ یک نوارِ خالیِ پنجاه‌پیکسلی
       می‌ساخت. */
    padding: clamp(6px, 1.1vh, 14px) clamp(12px, 2.2vw, 30px);
}

#scrWizard .myowz {
    position: relative; /* کشویِ ضعف (inset: 0) باید روی همین کارت بیفتد */
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    width: min(100%, 1340px);
    /* ارتفاعِ هدف، نه ارتفاعِ محتوا. سنگین‌ترین مرحله (ساختار) ۵۹۶ پیکسل
       بدنه می‌خواهد؛ ۸۴۰ = ۱۷۱ سربرگ + ۵۸۴ بدنه + ۸۵ فوتر.

       ۷۸۰ بود و با سربرگِ تازه — که ردیفِ عنوان و پایه‌های شماره را هم دارد —
       بدنه به ۴۸۶ می‌رسید و مرحلهٔ ۲ بیست پیکسل سرریز می‌کرد. شصت پیکسلِ
       اضافه از فضای خالیِ دورِ کارت آمده، نه از بدنه: در ۱۴۴۰×۹۵۰ نمای
       موجود ۹۰۶ پیکسل است.

       عددِ هدف از خودِ نما هم بزرگ‌تر گرفته شده: کارت وسط‌چین است، پس هر
       پیکسلی که کوتاه‌تر از نمای موجود باشد نصف‌نصف بالا و پایینش خالی
       می‌ماند — و همان نوارِ خالی بود که سربرگ را از بالای صفحه دور می‌کرد.
       `max-height: 100%` جلوی بلندترشدن از نما را می‌گیرد.

       `min-height: 0` و `max-height` اجازه می‌دهند در نمایِ کوتاه‌تر جمع شود؛
       سربرگ هم زیرِ `max-height: 810px` یک درجه جمع می‌شود. */
    height: 880px;
    min-height: 0;
    max-height: 100%;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--paper);
    /* سایه از توکنِ مرکزی می‌آید، نه rgbaی خام: `--myo-el-3` در تمِ تیره
       بازتعریف می‌شود و سایهٔ آبیِ دست‌نویس آن‌جا نامرئی می‌شد. */
    box-shadow: var(--myo-el-3);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}

.myowz h2, .myowz h3, .myowz h4, .myowz p, .myowz dl, .myowz dd, .myowz ul, .myowz ol {
    margin: 0;
    padding: 0;
}
.myowz ul, .myowz ol { list-style: none; }
.myowz button { font: inherit; color: inherit; cursor: pointer; }
.myowz input { font: inherit; color: inherit; }
.myowz b, .myowz strong { font-weight: 800; }

/* ══ ۲ · اسکلت ═══════════════════════════════════════════════════════════ */

/* ── سربرگ: نامِ کار، زمینه، و مسیرِ مراحل ────────────────────────────────
   سربرگ دو نوار است: بالا نامِ کاری که مربی در آن ایستاده و راهِ بیرون‌رفتن،
   پایین خودِ مسیر — یک ریلِ افقی با یک مدالیون به‌ازای هر مرحله، پایهٔ شماره
   زیرِ هر مدالیون و نامِ مرحله زیرِ پایه.

   ریلِ پیشین خطِ خط‌چینِ موجدار بود و هر مرحلهٔ طی‌شده یک تیکِ سبز می‌گرفت.
   موج یک *مسیر* را نشان می‌داد ولی نمی‌گفت مربی کجای آن است؛ حالا خودِ ریل
   تا مرحلهٔ جاری آبی می‌شود و همین یک چیز هر دو را می‌گوید. تیک برداشته شد:
   در ویزاردی که فقط با گذشتن از یک مرحله به مرحلهٔ بعد می‌رسد، «انجام شد»
   همان «پشتِ سر است» بود و پنج بار تکرار می‌شد.

   دو عددی که چیدمان رویشان بنا شده از جاوااسکریپت می‌آیند، نه از این فایل:
   `--wz-cols` (تعدادِ مرحله‌ها) و `--wz-fill` (نسبتِ طی‌شدهٔ مسیر). مرحلهٔ
   ششم یک عضوِ تازه در `WZ_STEPS` است و همین؛ این‌جا هیچ عددی عوض نمی‌شود.

   جهت هم هاردکد نیست: مسیر با `inset-inline` نوشته شده، پس در فارسی از راست
   شروع می‌شود و در انگلیسی از چپ، بی یک خطِ اضافه.

   رنگ‌ها از پالتِ مرکزی می‌آیند (`--myo-brand/info/accent`)، پس تمِ تیره
   هم درست می‌خوانَد. نارنجی از ریل برداشته شد: سربرگ باید سفید و آبی باشد
   و نارنجی در اپ رنگِ «هشدار» است، نه رنگِ یک مرحلهٔ عادی. */
.wz-head {
    /* اندازه‌های مسیر یک‌جا. `--wz-lap` هم‌پوشانیِ پایه با مدالیون است: پایه
       باید از زیرِ مدالیون بیرون بزند، نه کنارش بنشیند.

       بلندیِ پایه از هم‌پوشانی حساب می‌شود، نه جدا از آن: چیزی که باید ثابت
       بماند بیست‌وچهار پیکسلِ *دیده‌شونده* است، وگرنه عدد زیرِ مدالیون — و در
       مرحلهٔ جاری زیرِ حلقهٔ ششپیکسلی‌اش — پنهان می‌شود. هر نمای فشرده فقط
       `--wz-lap` را عوض می‌کند. */
    --wz-dot: 54px;
    --wz-lap: 9px;
    --wz-ped: calc(var(--wz-lap) + 24px);
    flex: 0 0 auto;
    padding: 8px clamp(14px, 1.8vw, 26px);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(to bottom, var(--wash), var(--paper));
}

/* ── مسیر ─────────────────────────────────────────────────────────────────
   `overflow: hidden` این‌جا ممنوع است: حلقهٔ ششپیکسلیِ مرحلهٔ جاری و حلقهٔ
   فوکوس هر دو بیرونِ قابِ دکمه‌اند و با آن بریده می‌شوند. */
.wz-steps { position: relative; flex: 0 0 auto; min-width: 0; }

/* پنج ستونِ هم‌عرض. موقعیتِ هر مدالیون از تعدادِ آیتم‌ها درمی‌آید، نه از یک
   عرضِ دست‌نویس. */
.wz-step-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
}

/* ریل زیرِ مدالیون‌ها و پشتِ پایه‌ها می‌گذرد. انتهایش (سمتِ مرحلهٔ آخر) برای
   پرچم باز می‌ماند. */
.wz-rail {
    position: absolute;
    z-index: 0;
    inset-inline: 6px 30px;
    inset-block-start: calc(var(--wz-dot) - 1px);
    height: 8px;
    border-radius: 999px;
    background: var(--wash-2);
}

/* بخشِ طی‌شده. `--wz-fill` نسبتی بینِ صفر و یک است و `renderSteps()` آن را
   از شمارهٔ مرحله می‌سازد. */
.wz-rail > i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: calc(var(--wz-fill, 0) * 100%);
    border-radius: 999px;
    background: var(--myo-brand-icon);
    transition: width .22s var(--ez);
}

/* سرِ مسیر: یک نقطهٔ کوچک و پرچمِ پایان. */
.wz-rail::after {
    content: '';
    position: absolute;
    inset-inline-end: -4px;
    inset-block-start: 50%;
    width: 13px;
    height: 13px;
    margin-block-start: -6.5px;
    border-radius: 50%;
    background: var(--wash-2);
}
.wz-rail > b {
    position: absolute;
    inset-inline-end: -3px;
    inset-block-end: 2px;
    width: 22px;
    height: 26px;
    color: var(--acc);
}
.wz-rail > b svg { display: block; width: 100%; height: 100%; }

.wz-step { min-width: 0; }

.wz-step-b {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    text-align: center;
    transition: color .18s;
}
.wz-step-b:disabled { cursor: default; }
/* حلقهٔ فوکوس دورِ خودِ مدالیون می‌نشیند، نه دورِ ستونِ بلندِ دکمه. */
.wz-step-b:focus-visible { outline: 0; }
.wz-step-b:focus-visible .wz-step-dot { outline: 2px solid var(--acc); outline-offset: 3px; }

/* مدالیون: حلقهٔ سفید بیرون، قرصِ رنگیِ مرحله درون. رنگ از دو متغیرِ
   `--wz-tone-*` می‌آید تا حالت‌های جاری/پشتِ‌سر/ردشده هرکدام یک خط باشند. */
.wz-step-dot {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--wz-dot);
    height: var(--wz-dot);
    border-radius: 50%;
    background: var(--paper);
    color: var(--wz-tone-ic, var(--muted));
    box-shadow: 0 10px 22px rgb(29 92 158 / 12%), 0 2px 5px rgb(15 42 76 / 7%);
    transition: transform .2s var(--ez), box-shadow .2s, color .2s;
}
.wz-step-dot::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--wz-tone-bg, var(--wash-2));
    transition: background .2s;
}
.wz-step-dot > svg {
    position: relative;
    width: calc(var(--wz-dot) * .43);
    height: calc(var(--wz-dot) * .43);
}

.wz-step[data-tone="brand"] { --wz-tone-bg: var(--myo-brand-soft-2); --wz-tone-ic: var(--myo-brand-icon); }
.wz-step[data-tone="info"] { --wz-tone-bg: var(--myo-info-soft-2); --wz-tone-ic: var(--myo-info-icon); }
.wz-step[data-tone="accent"] { --wz-tone-bg: var(--myo-accent-soft-2); --wz-tone-ic: var(--myo-accent-icon); }

/* مرحلهٔ جاری تنها مدالیونِ توپُر است: هشت درصد بزرگ‌تر، آبیِ برند، و با
   حلقهٔ آبیِ روشنِ دورش. «این‌جایی» یک رنگ دارد، هر مرحله‌ای که باشد. */
.wz-step.is-now { --wz-tone-bg: var(--acc); --wz-tone-ic: var(--myo-on-fill); }
.wz-step.is-now .wz-step-dot {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px var(--myo-brand-soft-2), 0 12px 24px rgb(0 119 204 / 22%);
}

/* مرحلهٔ پشتِ سر آبیِ روشن می‌شود — هم‌رنگِ ریلی که تا این‌جا پر شده. */
.wz-step.is-past { --wz-tone-bg: var(--myo-brand-soft-2); --wz-tone-ic: var(--acc); }

/* مرحله‌ای که مربی صراحتاً رد کرده رنگش را از دست می‌دهد: «از این‌جا رد شدی»،
   نه «این‌جا خراب است». */

.wz-step-b:not(:disabled):hover .wz-step-dot { transform: translateY(-2px); }
.wz-step.is-now .wz-step-b:not(:disabled):hover .wz-step-dot { transform: scale(1.08) translateY(-2px); }
.wz-step-b:not(:disabled):hover .wz-step-t { color: var(--acc-d); }

/* پایهٔ شماره: از زیرِ مدالیون بیرون می‌زند و روی ریل می‌نشیند، پس عدد در
   نیمهٔ پایینش می‌ایستد تا مدالیون نصفش نکند. */
.wz-step-n {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: end;
    justify-items: center;
    min-width: min(calc(var(--wz-dot) * 1.24), 100%);
    height: var(--wz-ped);
    margin-block-start: calc(var(--wz-lap) * -1);
    padding: 0 12px 3px;
    border-radius: 11px;
    background: var(--paper);
    box-shadow: 0 6px 14px rgb(30 69 108 / 10%), inset 0 0 0 1px var(--line);
    font-size: 12px;
    line-height: 1;
    color: var(--ink-2);
}
.wz-step.is-now .wz-step-n { color: var(--acc-d); }

.wz-step-t {
    max-width: 100%;
    margin-block-start: 8px;
    overflow: hidden;
    font-size: clamp(12px, .95vw, 13.5px);
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wz-step.is-now .wz-step-t { color: var(--acc-d); font-weight: 800; }

/* زیرِ مرحلهٔ جاری — و فقط زیرِ آن — شمارهٔ مرحله و یک مثلثِ رو به پایین.
   چون همیشه دقیقاً یک مرحله جاری است، بلندیِ سربرگ از این بند نمی‌پرد. */
.wz-step-now {
    position: relative;
    z-index: 3;
    margin-block-start: 2px;
    padding-inline: 4px;
    border-radius: var(--myo-r-sm);
    background: var(--paper);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--muted);
}
.wz-step-now::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin: 3px auto 0;
    border: 4px solid transparent;
    border-top-color: var(--acc);
}
.wz-link.sm { padding: 2px 7px; font-size: 11.5px; }

/* ── بدنه ─────────────────────────────────────────────────────────────────
   دیگر خودش کارت نیست: کارت، `.myowz` است. این‌جا فقط ناحیهٔ محتواست که
   بینِ سربرگ و فوتر باقی می‌ماند. تمامِ قاعده‌های `max-width`/`margin-block`
   که پیش از این عرض و جای کارت را مرحله‌به‌مرحله عوض می‌کردند حذف شدند —
   یک قاب که سرِ جایش می‌ماند، همان چیزی است که «ثابت» یعنی. */
.wz-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.wz-pane { display: none; flex: 1 1 auto; min-width: 0; min-height: 0; }
.wz-pane.is-on { display: flex; }

.wz-pane.is-enter { animation: wzIn .34s var(--ez) both; }
.wz-pane.is-enter.is-back { animation-name: wzInBack; }
@keyframes wzIn     { from { opacity: 0; transform: translateX(-14px); } }
@keyframes wzInBack { from { opacity: 0; transform: translateX(14px); } }

/* قابِ داخلیِ هر مرحله */
.pn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px clamp(16px, 2vw, 26px) 20px;
}

/* ── مرحله‌های سبک، در کارتِ قدِ‌ثابت ─────────────────────────────────────
   کارت دیگر قدش را از محتوا نمی‌گیرد، پس سه مرحلهٔ سبکِ ویزارد (هدف و
   زمان‌بندی، تمرکز و اجرا، هفتهٔ آماده) فضای اضافه دارند. آن فضا نباید
   یک حفرهٔ خالی *زیرِ* آخرین قاب شود: کلِ ستون وسط می‌ایستد و فضا به دو
   حاشیهٔ قرینه تبدیل می‌شود، که چشم آن را «حاشیهٔ کارت» می‌خواند نه «چیزی
   که جا مانده». */
/* `safe` لازم است، نه تزئین: در نمای باریک (زیرِ ۱۱۸۰) همین مرحله‌ها
   سرریز می‌کنند و بدنه اسکرول می‌شود؛ با وسط‌چینیِ ساده، سرریز از *هر دو*
   سر بیرون می‌زند و بالای محتوا با اسکرول هم دیگر در دسترس نیست. */
/* مرحلهٔ ۴ از ۲۰۲۶-۰۹-۲۱ به همین گروه پیوست: تا دیروز یک چیدمانِ دوستونیِ
   قدِ‌کامل بود (فهرست + نقشه) و فضای اضافه نداشت؛ حالا گریدی از کارت است که
   با پنج-شش ساختار قاب را پر نمی‌کند. */
#wzPane1 .pn,
#wzPane3 .pn {
    justify-content: center;
    justify-content: safe center;
}

/* وسطِ هندسی وسطِ چشم نیست: با تقسیمِ مساوی، بالای اولین قاب همان‌قدر خالی
   می‌شود که زیرِ آخرین، و گروهی که صد و چهل پیکسل زیرِ سرِ کارت شناور باشد
   رابطه‌اش با سربرگ را از دست می‌دهد. فضای اضافهٔ پایین حاشیه است؛ فضای
   اضافهٔ بالا حفره. این پدینگِ نامتقارن گروه را بالاتر می‌برد.

   عددِ مرحلهٔ ۲ از ۱۱۰ به ۴۸ آمد، چون سربرگِ مرحله (`.wz-lead`) برداشته شد:
   با آن هشتاد پیکسل کمتر محتوا، همان ۱۱۰ دیگر حاشیه نبود و یک نوارِ خالیِ
   صدوسی‌پیکسلی زیرِ آخرین قاب می‌گذاشت.

   «هفتهٔ شاگرد» هم همین را می‌خواهد، ولی فقط در مسیرِ آماده. در مسیرِ
   اختصاصی تختهٔ ویرایش‌پذیر و نکته‌های بازبینی قاب را پر می‌کنند و همین صد
   و ده پیکسل آخرین جعبه را می‌بُرید و یک نوارِ خالی زیرش می‌گذاشت — پس
   شرطش «تخته ویرایش‌پذیر نباشد» است، نه «مرحله چندم است». */
#wzPane1 .pn { padding-block: 18px 48px; }
#wzPane3 .pn { padding-block: 18px 48px; }
/* بدونِ این، `.pn-body` تمامِ فضای آزاد را می‌بلعد و `justify-content` چیزی
   برای توزیع ندارد — یعنی وسط‌چینیِ بالا بی‌اثر می‌ماند. `0 1 auto` اجازهٔ
   جمع‌شدن را نگه می‌دارد، پس با هشت کارت گرید خودش اسکرول می‌کند.

   مرحلهٔ ۵ در این فهرست نیست: از وقتی ستونِ کناری رفت و تخته خودش ارتفاع
   می‌گیرد، دیگر «مرحلهٔ سبک» نیست و قاب را پر می‌کند. */
/* مرحلهٔ ۵ وسط‌چین نمی‌شود. با ستونِ کناری فضای اضافه‌اش کم بود و وسط‌چینی
   جوابِ درست؛ حالا که تخته تنهاست، وسط‌چینی همان قاعدهٔ بالا را نقض می‌کند:
   حفره می‌رفت *بالای* هفته، بینِ نوارِ کنترل و سربرگ. تخته زیرِ نوارِ خودش
   می‌ماند و فضای اضافه پایین جمع می‌شود — که حاشیه است، نه حفره. */
#wzPane1 .fr,
#wzPane3 .pn-body,
#wzPane4 .fn { flex: 0 1 auto; }

/* همان صد و ده پیکسل در نمای کوتاه یک بدهی است نه حاشیه: در ۱۳۶۶×۷۶۸ بدنه
   ۴۸۵ پیکسل است و محتوای مرحلهٔ ۲ حدودِ ۳۹۳ — پدینگ به‌تنهایی سرریز می‌ساخت.
   قیدش ارتفاعِ نماست، نه عرض؛ عرضِ بزرگ با نمایِ کوتاه هم همین مشکل را دارد. */
@media (max-height: 810px) {
    /* سربرگ اولین چیزی است که در نمای کوتاه یک درجه جمع می‌شود: کارت به
       بلندیِ نما چسبیده و هر پیکسلی که سربرگ بگیرد از بدنه کم می‌شود.
       شمارهٔ زیرِ مدالیونِ جاری می‌رود — همان جمله دو سانتی بالاتر، زیرِ
       عنوان، کامل‌تر نوشته شده — ولی خودِ مسیر دست‌نخورده می‌ماند. */
    .wz-head {
        --wz-dot: 46px;
        --wz-lap: 7px;
        padding-block: 6px 7px;
    }
    .wz-step-now { display: none; }
    .wz-step-t { margin-block-start: 7px; font-size: 12.5px; }

    #wzPane1 .pn,
    #wzPane3 .pn { padding-block: 11px 12px; }

    /* و خودِ مرحلهٔ ۲ هم جمع می‌شود. محتوای طبیعی‌اش ۵۵۳ پیکسل است و بدنه
       در ۱۳۶۶×۷۶۸ فقط ۴۸۵؛ بی این بند، `.fr` فشرده می‌شد و کارت‌ها از قاب
       بیرون می‌زدند. */
    #wzPane1 .fr-q { padding: 11px 13px 12px; }
    #wzPane1 .pgoal { min-height: 88px; }
    #wzPane1 .opt { min-height: 78px; }
    #wzPane1 .opt-num b { font-size: 26px; }
    #wzPane1 .pgoal b { font-size: 15.5px; }
    #wzPane1 .pgoal small { font-size: 12px; }
    #wzPane1 .opt-chip { width: 38px; height: 38px; border-radius: 11px; }
    #wzPane1 .opt-chip svg { width: 19px; height: 19px; }
    .fr-q > h3 { font-size: 15px; margin-bottom: 8px; }
    .fr { gap: 14px; }
    .fr-main { gap: 10px; }
    .fr-side { gap: 13px; padding: 13px; }
    .fr-total { padding-block: 13px 11px; }
    .fr-total b { font-size: 38px; }
    .wkd { height: 46px; }
    .fr-name input { height: 42px; }
}

/* «هفتهٔ شاگرد» سبک‌ترینِ این سه است (۳۳۱ پیکسل محتوا در قابی ۶۳۰ پیکسلی) و
   با وسط‌چینیِ تنها، صدوپنجاه پیکسل هوا بالا و پایینش می‌ماند. ستون‌های روز
   یک کفِ ارتفاع می‌گیرند تا خودِ تخته وزن پیدا کند؛ کشیدنِ کاملشان تا ته قاب
   عمداً انجام نمی‌شود — چیپ‌های عضله در ستونی ۴۵۰پیکسلی معلق می‌شوند. */
#wzPane4 .wb-day,

.pn-head { flex: 0 0 auto; }
.pn-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.2px; color: var(--navy-d); }
.pn-head p { margin-top: 3px; color: var(--muted); font-size: 12.5px; }

/* سربرگی که کنارش ابزار دارد (زبانه‌ها، جست‌وجو) */
.pn-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pn-body::-webkit-scrollbar { width: 8px; }
.pn-body::-webkit-scrollbar-thumb { border: 2px solid var(--paper); border-radius: 8px; background: var(--line-2); }

.pn-sec { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.pn-sec > h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink-2);
}
.pn-sec > h3 > .wz-link { margin-inline-start: auto; }
.pn-note { color: var(--acc-d); font-size: 11px; font-weight: 700; }
.pn-hint { color: var(--muted); font-size: 11.5px; margin-top: -4px; }

.wz-blank {
    padding: 22px;
    border: 1px dashed var(--line-2);
    border-radius: var(--r-md);
    background: var(--wash);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}
.wz-blank.sm { padding: 10px; font-size: 12px; }

/* ── فوتر ────────────────────────────────────────────────────────────────
   نوارِ پاییِن کارت. خطِ پیشرفت دقیقاً روی مرزِ بینِ بدنه و فوتر می‌نشیند و
   تمام‌عرضِ کارت است: خودِ خطِ جداکننده پُر می‌شود، نه یک نوارِ شناورِ جدا. */
.wz-foot {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px clamp(12px, 1.5vw, 20px);
    border-top: 1px solid var(--line);
    background: linear-gradient(to top, var(--wash), var(--paper));
}
.wz-foot::before {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 0;
    height: 3px;
    background: var(--line-2);
}
.wz-foot::after {
    content: '';
    position: absolute;
    inset-block-start: -1px;
    inset-inline-start: 0;
    width: var(--wz-pct, 0%);
    height: 3px;
    background: linear-gradient(to left, var(--acc), var(--myo-brand-ink, var(--acc-d)));
    transition: width .4s var(--ez);
}
html[dir="ltr"] .wz-foot::after { background: linear-gradient(to right, var(--acc), var(--myo-brand-ink, var(--acc-d))); }

/* جملهٔ وضعیت. تا وقتی شاگردی انتخاب نشده یک تذکرِ خاکستری است؛ با انتخاب،
   تیکِ آبی می‌گیرد و نامِ شاگرد را پررنگ می‌کند — تأییدی که چشم بی‌خواندن
   هم می‌گیردش. */
.wz-foot-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 700;
}
.wz-foot-note.is-ok { color: var(--navy); }
.wz-foot-note b { font-weight: 800; color: var(--navy-d); }
.wz-foot-tick {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--myo-on-fill);
    animation: pkTick .3s var(--ez) both;
}
.wz-foot-tick svg { width: 15px; height: 15px; }
@keyframes pkTick { from { opacity: 0; transform: scale(.4); } }
.wz-foot-act { display: flex; align-items: center; gap: 10px; }

/* دکمه‌ها هدفِ کلیک‌اند، نه برچسب. ارتفاعِ ۴۸/۵۶ و متنِ درشت‌تر باعث می‌شود
   «ادامه» از آن‌سرِ اتاق هم پیدا باشد؛ پیش از این هم‌اندازهٔ یک چیپ بود. */
.wz-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    padding: 0 20px;
    border: 1.5px solid var(--line-2);
    border-radius: 13px;
    background: var(--paper);
    color: var(--ink-2);
    font-size: 15px;
    font-weight: 800;
    transition: background .16s, border-color .16s, color .16s, transform .12s, box-shadow .16s;
}
.wz-btn svg { width: 18px; height: 18px; transition: transform .18s var(--ez); }
.wz-btn[hidden] { display: none; }
.wz-btn:focus-visible { outline: 3px solid rgba(2, 43, 58, .35); outline-offset: 2px; }
.wz-btn.is-ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--wash); }
.wz-btn.is-ghost:hover svg { transform: translateX(3px); }

/* یک کنشِ اصلی در هر صفحه، و فقط یکی: بزرگ‌تر، توپُر، با سایهٔ رنگی. */
.wz-btn.is-go {
    height: 56px;
    padding: 0 30px;
    border-color: transparent;
    border-radius: 14px;
    background: var(--acc);
    color: var(--myo-on-fill);
    font-size: 16.5px;
    box-shadow: 0 10px 24px rgba(31, 122, 140, .3);
}
.wz-btn.is-go:hover:not(:disabled) { background: var(--acc-d); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(31, 122, 140, .36); }
.wz-btn.is-go:hover:not(:disabled) .wz-go-arrow { transform: translateX(-4px); }
.wz-btn.is-go:active:not(:disabled) { transform: translateY(0); }
/* حالتِ خاموش پیش از این خاکستریِ توپُر با متنِ سفید بود — متن عملاً ناخوانا.
   حالا خودش می‌گوید «هنوز نه»: زمینهٔ کم‌رنگ، متنِ خاکستریِ خوانا. */
.wz-btn.is-go:disabled {
    border-color: var(--line-2);
    background: var(--paper);
    color: var(--muted);
    box-shadow: none;
    cursor: not-allowed;
}
/* مرحلهٔ آخر: «ساخت برنامه» ثبت است نه ناوبری، پس سبز می‌شود. سایه هم
   رنگِ خودش را می‌گیرد، وگرنه هالهٔ آبی زیرِ دکمهٔ سبز می‌ماند. */
.wz-btn.is-go.is-make {
    background: var(--myo-ok-fill);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.wz-btn.is-go.is-make:hover:not(:disabled) {
    background: var(--myo-ok-ink);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}
/* `.is-make` بعد از `:disabled` می‌آمد و هم‌وزنش بود، پس «ساخت برنامه»ی
   خاموش سبز می‌ماند با متنِ خاکستری — نه خاموش خوانده می‌شد نه روشن. */
.wz-btn.is-go.is-make:disabled { background: var(--paper); box-shadow: none; }
.wz-btn.is-go.is-make:disabled .wz-go-arrow { color: var(--muted); }

/* دایرهٔ سفیدِ فلش. رنگِ خودِ فلش از معنیِ دکمه می‌آید: آبی برای «ادامه»،
   سبز برای «ساخت برنامه» — وگرنه یک فلشِ آبی روی دکمهٔ سبز می‌ماند. */
.wz-go-arrow {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--myo-on-fill);
    color: var(--acc-d);
    transition: transform .18s var(--ez), background .18s;
}
.wz-go-arrow svg { width: 18px; height: 18px; }
.wz-btn.is-go.is-make .wz-go-arrow { color: var(--myo-ok-ink); }
.wz-btn.is-go:disabled .wz-go-arrow { background: var(--wash-2); color: var(--muted); }

.wz-btn.sm { height: 40px; padding: 0 18px; font-size: 13.5px; border-radius: 11px; }

.wz-spin { display: none; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: var(--myo-on-fill); border-radius: 50%; }
.wz-btn.is-loading .wz-spin, .wz-spin.is-on { display: inline-block; animation: wzSpin .7s linear infinite; }
.wz-spin.is-on { border-color: rgba(2, 43, 58, .2); border-top-color: var(--navy); }
@keyframes wzSpin { to { transform: rotate(360deg); } }

.wz-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ══ ۳ · عناصرِ مشترک ═════════════════════════════════════════════════════ */

/* ── چیپِ آیکون ───────────────────────────────────────────────────────────
   مربعِ گردِ کم‌رنگ زیرِ هر آیکونِ معنادار — روی کارتِ شاگرد (`.pk-ico`) و روی
   کارتِ هدفِ دوره (`.opt-chip`). سه دسته و بس: آبی، سبز، نارنجی. */
.pk-ico.is-blue, .opt-chip.is-blue { background: var(--myo-brand-soft-2); color: var(--myo-brand-icon); }
.pk-ico.is-green, .opt-chip.is-green { background: var(--myo-ok-soft-2); color: var(--myo-ok-icon); }
.pk-ico.is-orange, .opt-chip.is-orange { background: var(--myo-warn-soft-2); color: var(--myo-warn-icon); }

.opt-chip { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; }
.opt-chip svg { width: 23px; height: 23px; }

/* ── کاشیِ انتخاب ─────────────────────────────────────────────────────────
   یک الگو برای همهٔ انتخاب‌های تک‌گزینه‌ایِ ویزارد (هدف، مدت، تعداد جلسه).
   حالتِ انتخاب همه‌جا یکی است: قابِ نارنجی، پس‌زمینهٔ روشن، تیکِ گوشه. */
.opts { display: grid; gap: 9px; }
.opts-3 { grid-template-columns: repeat(3, 1fr); }
.opts-5 { grid-template-columns: repeat(5, 1fr); }

.opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 78px;
    padding: 13px 10px;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    text-align: center;
    transition: border-color .16s, background .16s, box-shadow .16s, transform .12s;
}
.opt:hover { border-color: var(--line-2); background: var(--wash); transform: translateY(-1px); }
.opt:focus-visible { outline: 3px solid rgba(2, 43, 58, .3); outline-offset: 2px; }
.opt b { font-size: 15px; font-weight: 800; color: var(--ink); }
.opt small { color: var(--muted); font-size: 12px; }
.opt .opt-ic { width: 23px; height: 23px; color: var(--navy); opacity: .75; }
.opt-num b { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }

.opt::after {
    content: '';
    position: absolute;
    inset-block-start: 9px;
    inset-inline-end: 9px;
    width: 21px;
    height: 21px;
    border: 2px solid var(--line-2);
    border-radius: 50%;
    background: var(--paper);
    transition: background .16s, border-color .16s;
}
.opt.is-on {
    border-color: var(--acc);
    background: var(--acc-w);
    box-shadow: inset 0 0 0 1.5px var(--acc), 0 4px 14px rgba(31, 122, 140, .16);
}
.opt.is-on .opt-ic { color: var(--acc-d); opacity: 1; }
.opt.is-on small { color: var(--acc-d); }
.opt.is-on::after {
    border-color: var(--acc);
    background: var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.opt.is-pop { animation: wzPop .44s var(--ez); }
@keyframes wzPop { 40% { transform: scale(1.035); } }

/* نقطه‌های هفت‌روزه روی کارتِ «جلسه در هفته» — ریتم را پیش از انتخاب نشان می‌دهد */
.daydots { display: flex; gap: 3px; }
.daydots u { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); }
.daydots u.on { background: var(--navy); }
.opt.is-on .daydots u { background: rgba(31, 122, 140, .28); }
.opt.is-on .daydots u.on { background: var(--acc); }

/* ══ ۴ · مرحلهٔ ۱ — شاگرد ═════════════════════════════════════════════════
   سه طراحیِ قبلی این‌جا مردند. اول گریدِ چهارستونه (سیزده چیز به‌ازای هر
   شاگرد، و مربی بینِ دیواری از بَج دنبالِ یک *نام*)، بعد مدلِ «فهرست + پنلِ
   پروفایل» که تا وقتی انتخابی نشده بود چهل درصدِ کارت را سفید نگه می‌داشت،
   و بعد ستونِ ۸۸۰پیکسلیِ ردیف‌های تک‌خطی — که مشکلش برعکس بود: پنج واقعیتِ
   هر شاگرد را با نقطه به هم می‌چسباند و در عمل خوانده نمی‌شدند.

   حالا دو ستونِ کارت، تمام‌عرضِ کارتِ ویزارد:

     · سطرِ اول نام است، با نشانِ محدودیت چسبیده به همان نام (نه پرت‌شده به
       لبهٔ مقابل) و تیکِ انتخاب در لبهٔ دیگر.
     · سطرِ دوم چهار واحدِ یک‌خطی است، هرکدام با آیکونِ رنگیِ خودش. رنگ کارِ
       برچسب را می‌کند: «سطح ۲» به «سطح:» نیاز ندارد.

   جای تیک همیشه رزرو است، پس انتخاب‌کردنِ یک کارت هیچ کارتِ دیگری را تکان
   نمی‌دهد. */
.pk {
    gap: 15px;
    width: 100%;
    padding: 16px clamp(16px, 2vw, 26px) 14px;
}

/* ── سربرگ ────────────────────────────────────────────────────────────────
   یک ردیف برای دو چیز: جست‌وجو و دکمهٔ شاگردِ تازه. عنوانِ مرحله و تصویرش
   (`.wz-lead`) از هر سه مرحلهٔ اولِ ویزارد برداشته شدند — نوارِ مراحل در
   بالای کارت همان را می‌گوید — و نامِ ناحیه روی خودِ `<section>` ماند. */
.pk-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }

.pk-add {
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--acc);
    border-radius: 11px;
    background: var(--paper);
    color: var(--acc-d);
    font-size: 13.5px;
    font-weight: 800;
    transition: background .16s, box-shadow .16s, transform .12s;
}
.pk-add svg { width: 16px; height: 16px; }
.pk-add:hover { background: var(--acc-w); box-shadow: 0 6px 16px rgba(0, 119, 204, .16); transform: translateY(-1px); }
.pk-add:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }

/* ── جست‌وجو ──────────────────────────────────────────────────────────────
   تنها راهِ باریک‌کردنِ فهرست، و بالا کنارِ عنوان می‌نشیند. دو چیپِ صافیِ
   «همه»/«دارای محدودیت» برداشته شدند: نوشتنِ نام همان کار را سریع‌تر می‌کرد،
   و نشانِ محدودیت روی خودِ کارت هست. */
.pk-find {
    flex: 0 1 380px;
    min-width: 180px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 13px;
    border: 1.5px solid var(--line);
    border-radius: 11px;
    background: var(--paper);
    transition: border-color .16s, box-shadow .16s;
}
.pk-find[hidden] { display: none; }
.pk-find:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-w); }
.pk-find > svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--navy); }
.pk-find input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 13.5px;
    font-weight: 650;
    outline: none;
}
.pk-find input::placeholder { color: var(--muted); font-weight: 600; }
.pk-find input::-webkit-search-cancel-button { display: none; }
.pk-clear {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 17px;
    line-height: 1;
}
.pk-clear:hover { background: var(--wash-2); color: var(--ink); }

/* ── گرید ─────────────────────────────────────────────────────────────────
   تنها ناحیهٔ ذاتاً بی‌انتهای ویزارد (تا صد پرونده)؛ قابِ خودش اسکرول می‌خورد
   تا صفحه هیچ‌وقت از نما بیرون نزند. */
.pk-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-end: 4px;
}
.pk-scroll::-webkit-scrollbar { width: 8px; }
.pk-scroll::-webkit-scrollbar-thumb { border: 2px solid var(--paper); border-radius: 8px; background: var(--line-2); }

.pk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }

.pk-card {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 100%;
    min-width: 0;
    padding: 13px 15px 14px;
    border: 1.5px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    text-align: start;
    transition: border-color .15s, background .15s, box-shadow .15s;
    animation: pkIn .28s var(--ez) both;
    animation-delay: calc(min(var(--i, 0), 9) * 24ms);
}
@keyframes pkIn { from { opacity: 0; transform: translateY(6px); } }
.pk-card:hover { border-color: var(--myo-brand-line-strong); box-shadow: 0 4px 14px rgba(0, 119, 204, .10); }
.pk-card:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
/* قابِ انتخاب با سایهٔ درونی ضخیم می‌شود، نه با عوض‌شدنِ `border-width`:
   نیم پیکسل تغییرِ قاب، کلِ محتوای کارت را نیم پیکسل جابه‌جا می‌کرد. */
.pk-card.is-on {
    border-color: var(--acc);
    background: var(--myo-brand-soft);
    box-shadow: inset 0 0 0 1px var(--acc), 0 4px 16px rgba(0, 119, 204, .13);
}
.pk-card.is-idle { background: var(--wash); }

.pk-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pk-name {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--navy-d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pk-card.is-idle .pk-name { color: var(--ink-2); font-weight: 750; }

/* تکهٔ هم‌خوان با جست‌وجو. زردِ پیش‌فرضِ <mark> در این پالت مثلِ یک خطای رنگی
   می‌نشیند؛ هم‌رنگِ همان آبیِ انتخاب می‌شود. */
.pk-hit { background: var(--acc-w); color: var(--acc-d); border-radius: 4px; padding: 0 1px; }

/* «محدودیت» تنها نشانی است که حق دارد کنارِ نام بنشیند: خبری است که پیش از
   کلیک تصمیم را عوض می‌کند، پس همان‌جا کنارِ نام می‌ماند و به لبهٔ مقابل
   پرت نمی‌شود. `order` جایش را عوض می‌کند بی‌آنکه ترتیبِ خواندنِ صفحه‌خوان
   عوض شود — نام اول خوانده می‌شود، همان‌طور که باید. */
.pk-flag {
    order: -1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: var(--warn-w);
    color: var(--warn);
    font-size: 12px;
    font-weight: 800;
}
.pk-flag svg { width: 15px; height: 15px; }
.pk-off {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--wash-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.pk-tick {
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--myo-on-fill);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .18s, transform .2s var(--ez);
}
.pk-tick svg { width: 16px; height: 16px; }
.pk-card.is-on .pk-tick { opacity: 1; transform: none; }

/* چهار واحد، هرکدام با آیکونِ رنگیِ خودش. `flex: 1 1 auto` فضای اضافه را
   یکسان بینشان پخش می‌کند، پس فاصلهٔ آیکون تا جداکننده در هر چهارتا یکی
   است — چیزی که با `flex-basis: 0` (ستون‌های هم‌عرض) از بین می‌رفت. */
.pk-facts { display: flex; align-items: center; min-width: 0; }
.pk-fact { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pk-fact + .pk-fact { border-inline-start: 1px solid var(--line); padding-inline-start: 12px; }
.pk-fact b {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pk-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
}
.pk-ico svg { width: 18px; height: 18px; }

/* ── فهرستِ خالی ──────────────────────────────────────────────────────────
   وسطِ قاب می‌ایستد، نه چسبیده به جست‌وجو با نیم‌صفحه سفیدِ زیرش. وقتی
   جست‌وجو به نتیجه نرسید، همان نامِ تایپ‌شده دمِ دست است تا شاگرد ساخته شود. */
.pk-blank {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 14px;
    min-height: 100%;
    padding: 30px 16px;
    color: var(--muted);
    font-size: 13.5px;
    text-align: center;
}
.pk-blank-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pk-ghost {
    height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 800;
    transition: border-color .16s, color .16s, background .16s;
}
.pk-ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--wash); }
.pk-blank .pk-add { margin-inline-start: 0; height: 40px; font-size: 13px; }

/* ══ ۵ · مرحلهٔ ۲ — هدف و زمان‌بندی ════════════════════════════════════════
   سه سؤال در ستونِ اصلی و یک کارتِ خلاصه در کنارش. کارتِ خلاصه *نتیجهٔ* همان
   سه انتخاب است، نه سؤالِ چهارم: عددِ جلسه، روزهایی که روی تقویم می‌نشینند،
   و نامِ دلخواه.

   فضای خالیِ پایینِ صفحه — که در طراحیِ قبلی ۲۰۰ پیکسل بود — به بزرگ‌ترشدنِ
   خودِ کاشی‌ها می‌رود: هدفِ کلیک بزرگ‌تر، نه متنِ بیشتر. */
.fr {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 272px;
    gap: 16px;
}
.fr-main { display: flex; flex-direction: column; gap: 14px; }

/* ستونِ «طولِ دوره» سه کارت دارد و ستونِ «چند روز در هفته» پنج‌تا. با دو ستونِ
   مساوی، کارت‌های راست یک‌ونیم برابرِ چپ می‌شدند و دو سؤالِ هم‌ارزش هم‌وزن به
   نظر نمی‌رسیدند؛ نسبتِ ۳ به ۵ پهنای خودِ کارت‌ها را برابر می‌کند. */
.fr-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: 16px; }

/* ── قابِ سؤال ────────────────────────────────────────────────────────────
   هر سه سؤالِ این مرحله یک قاب و یک شمارهٔ کوچک دارند. پیش از این «هدف» بی‌قاب
   بود و دو سؤالِ بعدی قاب داشتند؛ چشم آن را سرِ صفحه می‌دید نه یک سؤالِ هم‌ردهٔ
   بقیه. شماره‌ها ترتیبِ خواندن را قطعی می‌کنند: در RTL که دو قاب کنارِ هم‌اند،
   «دوم» و «سوم» بودن از جای قاب معلوم نمی‌شد. */
.fr-q {
    padding: 13px 15px 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--myo-brand-soft);
}
.fr-q > h3 { margin-bottom: 10px; gap: 10px; font-size: 16.5px; color: var(--navy-d); }
.fr-q-n {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--myo-brand-soft-2);
    color: var(--acc-d);
    box-shadow: inset 0 0 0 1px var(--myo-brand-line);
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}
/* جملهٔ پیشنهاد به لبهٔ مقابلِ عنوان می‌رود: کنارِ عنوان می‌چسبید و مثلِ بخشی
   از خودِ سؤال خوانده می‌شد. */
.fr-q > h3 > .pn-note { margin-inline-start: auto; font-size: 13px; font-weight: 700; }

/* کارت‌های این مرحله بلندترند از کاشیِ پیش‌فرضِ ویزارد: هر سه قابِ سؤال تنها
   یک ردیف کارت دارند و ارتفاعِ موجود باید به هدفِ کلیک برسد، نه به حفرهٔ زیرِ
   قاب. (کاشیِ مرحلهٔ ۳ عمداً دست‌نخورده می‌ماند؛ آن‌جا چهار ردیف محتواست.) */
#wzPane1 .opt { min-height: 96px; gap: 6px; }
#wzPane1 .pgoal { min-height: 112px; gap: 7px; padding: 15px 10px; }
#wzPane1 .pgoal b { font-size: 17.5px; }
#wzPane1 .pgoal small { font-size: 13px; }
#wzPane1 .opt-num b { font-size: 32px; }
/* دایرهٔ انتخاب در این مرحله کمی درشت‌تر است: کارت‌ها بزرگ‌ترند و نشانهٔ
   ۲۱پیکسلی رویشان ریز می‌نشست. */
#wzPane1 .opt::after { inset-block-start: 11px; inset-inline-end: 11px; width: 24px; height: 24px; }
#wzPane1 .opt.is-on::after { background-size: 15px; }

/* ── کارتِ خلاصه ───────────────────────────────────────────────────────── */
.fr-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--myo-brand-soft);
}

/* کاشیِ «n جلسه در هفته» — روشن و برندی. قبلاً یک بلوکِ سرمه‌ایِ سیاه بود
   که وسطِ یک مرحلهٔ سفید مثلِ سوراخ دیده می‌شد. بَجِ «n جلسه در یک هفته»ی
   زیرِ عدد هم برداشته شد: همان عدد را با کلمهٔ دیگری دوباره می‌گفت. */
.fr-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 20px 0 17px;
    border: 1px solid var(--myo-brand-line);
    border-radius: var(--r-md);
    background: var(--myo-brand-soft-2);
    color: var(--acc-d);
}
.fr-total b { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; color: var(--acc-d); }
.fr-total span { font-size: 13.5px; font-weight: 700; color: var(--acc-d); }

.fr-week { display: flex; flex-direction: column; gap: 9px; }
.fr-week-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--navy-d);
    font-size: 14.5px;
    font-weight: 800;
}

/* ── نوارِ روزهای هفته ────────────────────────────────────────────────────
   هفت دکمهٔ واقعی با `aria-pressed`. روزِ انتخاب‌شده علاوه بر زمینهٔ آبی یک
   تیکِ ریز هم می‌گیرد: در نواری که هفت خانهٔ هم‌شکل دارد، رنگ به‌تنهایی در
   نگاهِ گذرا و در تمِ تیره قطعی نیست. */
.wkpick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.wkd {
    position: relative;
    display: grid;
    place-items: center;
    height: 54px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--navy);
    font-size: 14px;
    font-weight: 800;
    transition: border-color .16s, background .16s, color .16s;
}
.wkd svg {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-end: 5px;
    width: 9px;
    height: 9px;
    opacity: 0;
    transition: opacity .16s;
}
.wkd:hover { border-color: var(--myo-brand-line-strong); }
.wkd:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.wkd.is-on { border-color: var(--acc); background: var(--acc); color: var(--myo-on-fill); }
.wkd.is-on svg { opacity: 1; }

/* نامِ دلخواه ته کارت می‌ماند و یک خطِ جداکننده از نوارِ روزها جدایش می‌کند:
   بی آن خط، فاصلهٔ بینِ دو بخش مثلِ یک حفره خوانده می‌شود نه مثلِ مرز. */
.fr-name {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}
.fr-name > span { color: var(--navy-d); font-size: 14.5px; font-weight: 800; }
.fr-name em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 600; }
/* پرانتزِ «(اختیاری)» تزئینِ نوشتاری است و در رشتهٔ ترجمه نمی‌نشیند؛ در
   انگلیسی هم همین شکل درست است. */
.fr-name em::before { content: '('; }
.fr-name em::after { content: ')'; }
.fr-name input {
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    font-size: 14px;
    outline: none;
    transition: border-color .16s, box-shadow .16s;
}
.fr-name input:focus { border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-w); }
.fr-name input::placeholder { color: var(--muted); opacity: .8; }

/* ══ ۶ · مرحلهٔ ۳ — تمرکز و اجرا ══════════════════════════════════════════
   چهار تصمیم، و هرکدام به اندازهٔ وزنش جا می‌گیرد:

     ۱ تمرکزِ عضلانی  — کارتِ تمام‌عرض، نُه ناحیه در دو ردیفِ ۵ و ۴
     ۲ ضعفِ ناحیه‌ای   — نوارِ کوتاهِ تمام‌عرض (اختیاری، معمولاً خالی)
     ۳ اجزای جلسه    — گریدِ ۲×۲
     ۴ سیستمِ تمرینی  — سه حالت، و پنلِ روش‌ها فقط در حالتِ دستی

   چیدمانِ قبلی «ضعفِ ناحیه‌ای» را هم‌وزنِ «تمرکزِ عضلانی» می‌کرد و «اجزای
   جلسه» را در ریلی می‌گذاشت که قدِ کلِ ستون بود؛ نتیجه دویست پیکسل سفیدیِ
   زیرِ سیستمِ تمرینی بود. حالا مرحله تا کفِ کارت پُر است.

   هرجا `#scrWizard` آمده عمدی است: فایل‌های قدیمی (`coach-studio.css`،
   `studio.css`) قواعدی مثل `#scrWizard .mtag { min-height: 38px }` دارند که
   با وزنِ ۱٬۱٬۰ بر هر انتخابگرِ بی‌id می‌چربند. بدونِ این پیشوند، این بلوک
   بی‌صدا بی‌اثر می‌ماند. */

/* این مرحله — برخلافِ ۲ و ۵ — محتوایش کلِ قاب را پر می‌کند، پس نه وسط‌چین
   می‌شود و نه آن صد و ده پیکسل حاشیهٔ پایین را می‌خواهد. */
/* آخرین خطِ دفاع برای نمایشگرِ کوتاه‌تر از فرضِ ما (زیرِ ~۸۵۰ پیکسل): محتوا
   داخلِ خودِ پنل می‌لغزد. سرِ کارت و «ادامه» سرِ جایشان می‌مانند.

   کوشیدیم به‌جایش *فهرستِ روش‌ها* را بلغزانیم و نشد: در ۱۳۶۶×۷۶۸ سهمِ آن
   فهرست از قاب به شش پیکسل می‌رسید، یعنی عملاً ناپدید می‌شد. یک لغزشِ کوچکِ
   کلِ صفحه از یک کنترلِ نامرئی بهتر است. */
#wzPane2 .pn {
    justify-content: flex-start;
    padding-block: 9px 10px;
    gap: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#wzPane2 .pn::-webkit-scrollbar { width: 7px; }
#wzPane2 .pn::-webkit-scrollbar-thumb { border-radius: var(--myo-r-sm); background: var(--line-2); }
/* تصویرِ عنوان این‌جا کوتاه‌تر از مرحلهٔ ۱ و ۲ است: آن‌ها یک تصویرِ تزئینیِ
   پُررنگ دارند و این یک آیکونِ خطی — و این مرحله چهار تصمیم دارد، نه سه. */

/* دو ردیفِ دوستونی، با نسبت‌های بستهٔ مرجع: بالا ۶۳/۳۷ و پایین ۳۶/۶۴.
   دو ردیف دو نسبتِ متفاوت دارند، پس یک گریدِ چهارخانه نمی‌شود — هر ردیف
   گریدِ خودش است. */
.fc { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.fc-top { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 63fr) minmax(0, 37fr); gap: 12px; min-height: 0; }
/* ردیفِ پایین: اجزای جلسه در سمتِ شروع و سیستمِ تمرینی در ادامه.
   تصویرِ مرجع ۴۰ به ۶۰ است و این‌جا ۳۶ به ۶۴ — چون فهرستِ این پروژه شانزده
   سیستم دارد و نه دهِ ماکاپ. با ۴۰ به ۶۰، ستونِ چیپ ۱۲۸ پیکسل می‌شد و
   «تمرین صدتکراری» به «تمرین صدتکر…» می‌رسید. «اجزای جلسه» چهار کاشی دارد و
   این چهار درصد را بی‌درد می‌دهد. */
.fc-row { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: 12px; min-height: 0; }

#scrWizard .fc .fr-q { padding: 11px 14px 12px; }
#scrWizard .fc .pn-sec { gap: 6px; }
#scrWizard .fc .fr-q h3 { display: flex; align-items: center; margin-bottom: 0; gap: 9px; font-size: 16px; font-weight: 800; color: var(--navy-d); }
#scrWizard .fc .fr-q-n { width: 24px; height: 24px; font-size: 12px; }
#scrWizard .fc .pn-hint { margin-top: -2px; font-size: 11.5px; line-height: 1.5; }

/* ── گزینهٔ انتخابیِ این مرحله ─────────────────────────────────────────────
   یک جزء برای هر چهار فهرستِ انتخابیِ مرحله: کاشیِ عضله، کارتِ حالتِ سیستم،
   گزینهٔ مودالِ ضعف، و چیپِ روشِ تمرینی. همه یک قاب، یک شعاع، یک حالتِ
   انتخاب و یک دایرهٔ تیک دارند.

   دایره، نه مربع: تا پیش از این این مرحله تنها جایی بود که تیکِ مربع داشت
   (قاعدهٔ «مربع = چندانتخابی») و همان قاعده جای دیگری در ویزارد مصداق
   نداشت — یعنی یک استثنا بود، نه یک قاعده. حالا نشانهٔ انتخاب در کلِ ویزارد
   یک شکل دارد. */
.fo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 10px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 700;
    text-align: start;
    transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}
.fo::before {
    content: '';
    flex: 0 0 auto;
    width: 21px;
    height: 21px;
    border: 2px solid var(--line-2);
    border-radius: 50%;
    background: var(--paper);
    transition: background .16s, border-color .16s;
}
.fo > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo:hover { border-color: var(--myo-brand-line); background: var(--wash); }
.fo:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.fo.is-on {
    border-color: var(--acc);
    background: var(--acc-w);
    color: var(--acc-d);
    box-shadow: inset 0 0 0 1px var(--acc);
}
.fo.is-on::before {
    border-color: var(--acc);
    background: var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
/* ردیفی از `.fo`ها که عرض را برابر بینِ خودشان تقسیم می‌کنند. ردیف است و
   گرید نیست، چون ردیفِ دومِ عضلات چهار کاشی دارد و باید همان عرضِ کاملِ
   ردیفِ پنج‌تایی را پر کند — با گریدِ پنج‌ستونی یک ستون خالی می‌ماند. */
.fo-row { display: flex; gap: 7px; }
.fo-row > * { flex: 1 1 0; min-width: 0; }

/* ── ۱ تمرکزِ عضلانی ──────────────────────────────────────────────────────
   کاشی: تصویرک در سرِ شروع، نام وسطِ فضای باقی‌مانده، دایرهٔ تیک در سرِ
   دیگر. */
.fo-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(52px, auto); align-content: start; gap: 9px; min-height: 0; }
#scrWizard .fo-mus { min-height: 52px; padding: 4px 9px; gap: 9px; }
.fo-mus::before { order: 3; }
.fo-mus b { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 800; text-align: center; }
.fo-ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--myo-brand-soft-2);
    color: var(--myo-brand-icon);
    transition: background .16s, color .16s;
}
.fo-ic svg { width: 30px; height: 30px; }
.fo-mus.is-on .fo-ic { background: var(--myo-paper); color: var(--acc-d); --mi-fill: var(--myo-brand-soft-2); }
/* وقتی سقفِ انتخاب پر است، ناحیه‌های انتخاب‌نشده از دسترس می‌افتند — بی‌آنکه
   ناپدید شوند، چون همان نُه‌تا باید دیده شوند تا مربی بداند چه نبرده. */
.fo-mus[aria-disabled="true"] { opacity: .48; }
.fo-mus[aria-disabled="true"]:hover { border-color: var(--line); background: var(--paper); }

/* قرصِ سقفِ انتخاب، ته سرصفحهٔ پنل. */
.fc-cap {
    margin-inline-start: auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--myo-brand-soft-2);
    color: var(--acc-d);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 800;
}

/* ── ۲ ضعفِ ناحیه‌ای ──────────────────────────────────────────────────────
   ستونِ کنارِ تمرکزِ عضلانی. اختیاری است و در بیشترِ برنامه‌ها خالی می‌ماند،
   پس حالتِ خالی‌اش خودش محتواست: پیکرهٔ بسته، یک جملهٔ وضعیت، و درِ مودال.
   با اولین انتخاب پیکره می‌رود و چیپ‌ها جایش را می‌گیرند. */
.fc-weak-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 0;
}
.fc-weak-empty { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 0; }
.fc-weak-empty b { font-size: 13px; font-weight: 800; color: var(--navy-d); }
.fc-weak-empty small { color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; }
.fc-weak-art { flex: 0 1 auto; width: auto; height: 100%; max-height: 132px; min-height: 0; object-fit: contain; }
.fc-weak.is-set .fc-weak-empty { display: none; }
.fc-weak:not(.is-set) .fc-weak-list { display: none; }
#scrWizard .fc-weak .pn-hint { margin-top: 2px; font-size: 11px; line-height: 1.35; }
.fc-opt {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--wash-2);
    color: var(--muted);
    font-size: 10.5px;
    font-style: normal;
    font-weight: 800;
}
.fc-weak-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-width: 0; }
.fc-weak.is-set { border-color: var(--myo-brand-line); }

.wktag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 5px 4px 10px;
    border-radius: 999px;
    background: var(--myo-brand-soft-2);
    color: var(--acc-d);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.wktag button {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--acc-d);
    transition: background .14s, color .14s;
}
.wktag button svg { width: 11px; height: 11px; }
.wktag button:hover { background: var(--acc); color: var(--myo-on-fill); }
.wktag button:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

.fc-weak-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--acc);
    border-radius: var(--r-md);
    background: var(--paper);
    color: var(--acc-d);
    font-size: 12.5px;
    font-weight: 800;
    transition: background .16s, color .16s;
}
.fc-weak-cta > i { display: grid; place-items: center; }
.fc-weak-cta svg { width: 15px; height: 15px; }
.fc-weak-cta:hover { background: var(--acc); color: var(--myo-on-fill); }
.fc-weak-cta:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── ۳ اجزای جلسه ─────────────────────────────────────────────────────────
   گریدِ ۲×۲ و هر کاشی یک خط: تصویرکِ رنگی در سرِ شروع، نام دقیقاً وسط، و
   کلید در سرِ دیگر. سه ستونِ ثابت‌اند تا نامِ کوتاه و بلند هر دو وسطِ همان
   کاشی بیفتند. زیرنویس ندارد — رنگِ تصویرک معنا دارد (گرم‌کردن نارنجی،
   سردکردن آبی، کاردیو قرمز، سوپرست بنفش) و از پالتِ مرکزی می‌آید. */
.scs { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(64px, auto); align-content: center; gap: 12px; min-height: 0; }
.sc {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    min-height: 64px;
    padding: 6px 12px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--wash);
    /* رنگِ پس‌زمینهٔ کاشی، برای «هالهٔ» حلقهٔ رویی در آیکونِ سوپرست */
    --sc-bg: var(--wash);
    text-align: start;
    transition: border-color .16s, background .16s;
}
.sc:hover { border-color: var(--myo-brand-line); background: var(--paper); --sc-bg: var(--paper); }
.sc:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.sc-ic { display: grid; place-items: center; width: 32px; height: 32px; }
.sc-ic svg { width: 30px; height: 30px; }
.sc > b { min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 800; color: var(--ink); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sc.is-on { border-color: var(--acc); background: var(--acc-w); --sc-bg: var(--acc-w); }
.sc.is-on > b { color: var(--acc-d); }

/* کلید: تنها نشانهٔ وضعیتِ کاشی است، پس از کلیدِ عمومیِ ویزارد کمی درشت‌تر.
   (آن کلیدِ عمومی — `.sw` — با همین بازطراحی حذف شد: تنها مصرف‌کننده‌اش
   همین چهار کاشی بودند.) */
.sc-sw {
    position: relative;
    flex: 0 0 auto;
    justify-self: end;
    width: 42px;
    height: 23px;
    border-radius: 999px;
    background: var(--line-2);
    transition: background .2s;
}
.sc-sw::after {
    content: '';
    position: absolute;
    inset-block-start: 2.5px;
    inset-inline-start: 2.5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--myo-paper);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
    transition: inset-inline-start .2s var(--ez);
}
.sc.is-on .sc-sw { background: var(--acc); }
.sc.is-on .sc-sw::after { inset-inline-start: calc(100% - 20.5px); }

/* رنگِ تصویرکِ اجزای جلسه — همان سه‌تایِ `.opt-chip`، به‌اضافهٔ قرمز و بنفش.
   این‌جا فقط رنگِ خطِ آیکون است و پس‌زمینهٔ چیپ ندارد (تصویر مرجع). */
.sc-ic.is-orange { color: var(--myo-warn-icon); --sc-ic-2: var(--myo-warn-fill); }
.sc-ic.is-blue   { color: var(--myo-brand-icon); }
.sc-ic.is-red    { color: var(--myo-danger-icon); }
.sc-ic.is-purple { color: var(--myo-accent-icon); }

/* ── ۴ سیستمِ تمرینی ──────────────────────────────────────────────────────
   سه حالت، با همان `.fo`: دایره در سرِ شروع و متن وسطِ فضای باقی‌مانده. */
.fc-sys { min-width: 0; }
#scrWizard .fo-mode { min-height: 58px; padding: 5px 12px; }
#scrWizard .fc-sys .fo-row { align-items: stretch; }
.fo-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fo-txt b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.fo-txt small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.fo-mode.is-on .fo-txt b { color: var(--navy-d); }
.fo-mode.is-on .fo-txt small { color: var(--acc-d); }

/* پنلِ روش‌ها. باز و بسته شدنش کوتاه است و `prefers-reduced-motion` را
   احترام می‌گذارد.

   ارتفاعش از محتوا می‌آید: سه ردیفِ چیپ، همیشه. */
.ttp {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    margin-top: 1px;
    padding: 6px 7px 7px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--paper);
    animation: ttpIn .18s var(--ez);
}
.ttp[hidden] { display: none; }
/* شورونِ «باز می‌شود» فقط در نمای گوشی (بندِ ۷۲۰ ته فایل). */
.tt-open-ic { display: none; }
@keyframes ttpIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ttp { animation: none; } }

.ttp-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ttp-h > b { flex: 0 0 auto; color: var(--navy-d); font-size: 12px; font-weight: 900; }
.ttp-i {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--acc-d);
    transition: background .14s;
}
.ttp-i svg { width: 17px; height: 17px; }
.ttp-i:hover { background: var(--acc-w); }
.ttp-i:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

.ttp-find {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 170px;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--wash);
    color: var(--muted);
    transition: border-color .16s, background .16s;
}
.ttp-find:focus-within { border-color: var(--acc); background: var(--paper); }
.ttp-find svg { flex: 0 0 auto; width: 13px; height: 13px; }
.ttp-find input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
}
.ttp-find input:focus { outline: none; }
.ttp-find input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* شانزده سیستمِ فصل ۵ در شش ستون ⇒ همیشه سه ردیف. شمارِ ستون ثابت است، نه
   `auto-fill`: با پهن‌شدنِ کارت یک ستونِ اضافه می‌آمد و نام‌ها بریده می‌شدند.
   هشت ستون (دو ردیف، مثلِ ده‌تایِ ماکاپ) آزموده شد و نشد: «تمرین صدتکراری»
   در ستونِ ۹۴پیکسلی به «تمرین صد…» می‌رسید. */
.tt-chips {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-content: start;
    gap: 3px;
}
@media (max-width: 1300px) { .tt-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tt-none { grid-column: 1 / -1; }
#scrWizard .fo-chip { min-height: 27px; padding: 2px 6px; gap: 5px; font-size: 11px; }
#scrWizard .fo-chip::before { width: 17px; height: 17px; border-width: 1.8px; }
#scrWizard .fo-chip.is-on::before { background-size: 10px; }
/* شمارِ هشدارها کنارِ سرتیترِ بخش، با همان کهربایی. */
.tt-sec .pn-note.is-warn { color: var(--warn); }

/* سیستمی که *ممکن* نیست — در پیکربندی خاموش است. تنها حالتِ قفل.
   کم‌رنگ می‌شود ولی حذف نمی‌شود: مربی باید ببیند چه چیزی هست و چرا نمی‌شود —
   دلیلش در همان خطِ گویای سرِ پنل می‌آید. */
.fo.is-off { opacity: .42; cursor: not-allowed; background: var(--wash); }
.fo.is-off:hover { border-color: var(--line); background: var(--wash); }

/* سیستمی که برای این شاگرد *توصیه* نمی‌شود: انتخاب‌شدنی، با یک نشانِ «!».
   نه کم‌رنگ می‌شود و نه cursor عوض می‌شود — هر دو نشانه‌های «نمی‌توانی»اند و
   این‌جا می‌توانی.

   ── چرا چیپِ *نزده* کهربایی نمی‌شود ────────────────────────────────────
   برای یک شاگردِ تازه‌کار ۱۴ تا از ۱۶ سیستم هشدار دارند؛ با پس‌زمینهٔ
   کهربایی کلِ فهرست یک‌دست می‌شد و هشدار دیگر هیچ چیزی را متمایز نمی‌کرد.
   پس نشانه همان «!»ِ کوچک است، و رنگ برای جایی می‌ماند که واقعاً کم‌شمار
   است: سیستمی که مربی *با وجودِ هشدار* زده. */
.fo.is-warn { border-color: var(--myo-warn-line); }
.fo.is-warn:hover { border-color: var(--myo-warn-line-strong); background: var(--warn-w); }
.fo.is-on.is-warn {
    border-color: var(--warn);
    background: var(--warn-w);
    color: var(--warn);
    box-shadow: inset 0 0 0 1px var(--warn);
}
.fo.is-on.is-warn::before { border-color: var(--warn); background-color: var(--warn); }

/* ── مودالِ ضعفِ ناحیه‌ای ──────────────────────────────────────────────────
   سی‌ودو گزینه که با flex-wrap پشتِ هم می‌آمدند: هر ردیف طولِ خودش را داشت و
   چهار سرتیتر وسطشان گم می‌شد. حالا ریلِ چهار ناحیه در یک ستون است و
   گزینه‌های همان ناحیه در گریدی دوستونی و هم‌اندازه — حداکثر هشت‌تا، پس
   مودال قدِ ثابت دارد. */
.wkm {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--myo-veil);
    -webkit-backdrop-filter: blur(var(--myo-veil-blur));
    backdrop-filter: blur(var(--myo-veil-blur));
    opacity: 0;
    transition: opacity .18s;
}
.wkm.is-open { opacity: 1; }
.wkm[hidden] { display: none; }
.wkm-sheet {
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: 100%;
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: 0 28px 70px rgba(2, 43, 58, .3);
    transform: translateY(10px);
    transition: transform .22s var(--ez);
}
.wkm.is-open .wkm-sheet { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .wkm, .wkm-sheet { transition: none; }
}

.wkm-h {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px 10px;
}
.wkm-h b { display: block; font-size: 17px; font-weight: 800; color: var(--navy-d); }
/* عنوان فقط برای گرفتنِ فوکوسِ ورودیِ پنجره tabindex دارد؛ حلقهٔ فوکوس روی
   یک تیترِ غیرِتعاملی گیج‌کننده است، پس نشان داده نمی‌شود. */
.wkm-h b:focus { outline: none; }
.wkm-h small { color: var(--muted); font-size: 12.5px; }
.wkm-x {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink-2);
    transition: border-color .16s, background .16s;
}
.wkm-x svg { width: 15px; height: 15px; }
.wkm-x:hover { border-color: var(--line-2); background: var(--wash); }
.wkm-x:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* `.myowz p { margin: 0 }` با وزنِ ۰٬۲٬۱ روی هر پاراگرافِ کارت می‌نشیند، پس
   حاشیهٔ این نوار باید هم‌وزن‌تر نوشته شود وگرنه بی‌صدا تمام‌عرض می‌شود. */
.wkm-sheet .wkm-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 12px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: var(--myo-brand-soft);
    color: var(--acc-d);
    font-size: 12px;
    font-weight: 700;
}
.wkm-info svg { flex: 0 0 auto; width: 16px; height: 16px; }

/* `flex: 0 1 auto` و نه `flex: 1`: برگه ارتفاعِ ثابتی ندارد و قدش را از
   محتوا می‌گیرد. با `flex: 1` پایهٔ این ناحیه صفر می‌شد، برگه به قدِ سربرگ و
   فوتر جمع می‌شد و کلِ ستون‌ها از زیرش بیرون می‌زدند — بی‌آنکه چیزی خطا بدهد. */
.wkm-b {
    flex: 0 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 12px;
    padding: 0 18px 14px;
}
.wkrail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: var(--r-md);
    background: var(--myo-brand-soft);
}
.wkrail-b {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1.5px solid transparent;
    border-radius: 11px;
    background: var(--paper);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;
    text-align: start;
    transition: border-color .15s, background .15s, color .15s;
}
.wkrail-ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--myo-brand-soft-2);
    color: var(--myo-brand-icon);
}
.wkrail-ic svg { width: 21px; height: 21px; }
.wkrail-b > span { flex: 1 1 auto; min-width: 0; }
.wkrail-b:hover { border-color: var(--myo-brand-line); }
.wkrail-b.is-on { border-color: var(--acc); color: var(--navy-d); font-weight: 800; }
.wkrail-b:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.wkpane {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.wkpane-h { display: flex; align-items: center; gap: 10px; }
.wkpane-h > b { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 800; color: var(--navy-d); }
.wkpane-n {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--myo-brand-soft-2);
    color: var(--acc-d);
    font-size: 11.5px;
    font-weight: 800;
}
.wkpane-n[hidden] { display: none; }
.wkopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#scrWizard .fo-opt { min-height: 44px; padding: 6px 12px; font-size: 13px; }

.wkm-f {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-top: 1px solid var(--line);
    background: var(--wash);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.wkm-n { flex: 0 0 auto; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.wkm-sum { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.wkm-act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* ── نمای کوتاه ───────────────────────────────────────────────────────────
   قیدِ این مرحله هم — مثلِ مرحلهٔ ۲ — ارتفاعِ نماست نه عرض: در ۱۳۶۶×۷۶۸ بدنه
   ۴۸۵ پیکسل است و محتوای طبیعیِ این مرحله بیشتر. همه‌چیز یک درجه جمع می‌شود
   و هیچ‌چیز حذف نمی‌شود. */
@media (max-height: 810px) {
    #wzPane2 .pn { padding-block: 9px 10px; gap: 6px; }
    .fc, .fc-row { gap: 6px; }
    #scrWizard .fc .fr-q { padding: 6px 11px 7px; }
    #scrWizard .fc .fr-q h3 { font-size: 14px; }
    #scrWizard .fc .pn-hint { font-size: 11px; line-height: 1.35; }
    .fc-mus #focusPicker { gap: 5px; }
    .fo-row { gap: 5px; }
    #scrWizard .fo-mus { min-height: 36px; padding: 3px 5px; }
    .fo-ic { width: 28px; height: 28px; border-radius: 9px; }
    .fo-ic svg { width: 22px; height: 22px; }
    #scrWizard .fo-mode { min-height: 42px; }
    .fo-txt b { font-size: 13px; }
    .fo-txt small { font-size: 11px; }
    .scs { gap: 5px; }
    .sc { padding: 5px 9px 6px; }
    .sc-ic { width: 25px; height: 25px; }
    .sc-ic svg { width: 21px; height: 21px; }
    .sc > b { font-size: 13px; }
    .sc > small { font-size: 10.5px; }
    .ttp { padding: 5px 6px 6px; gap: 4px; }
    #scrWizard .fo-chip { min-height: 25px; }
    .fc-weak-cta { height: 30px; }
}

/* ══ ۷ · مرحلهٔ ۴ — ساختار ════════════════════════════════════════════════
   دو مسیرِ «پیشنهادها» و «خودم می‌چینم» پیش از این روی هم سوار بودند و بنرِ
   مسیرِ دوم وسطِ سربرگ و کارت‌ها می‌نشست. حالا دو زبانه‌اند.

   **۲۲ سپتامبر ۲۰۲۶ — رنگ‌ها از اعدادِ خام به توکن رفتند.** این بخش تنها
   جایی در ویزارد بود که رنگش را هاردکد نوشته بود (`#182230` برای جوهر،
   `#fff` برای کاغذ، `#dce5ee` برای خط، `#0b84d8` برای برند …). در تمِ روشن
   همان مقدارِ توکن‌ها بود و کسی متوجه نمی‌شد؛ در تمِ تیره ولی سربرگِ مرحله
   عملاً نامرئی می‌شد (جوهرِ تیره روی زمینهٔ تیره) و کارت‌های ساختار سفیدِ
   خام می‌ماندند. با گوشی و تمِ سیستمی این حالتِ پیش‌فرضِ خیلی از مربی‌هاست،
   نه یک گوشهٔ نادر. همهٔ سی‌وسه مقدار به همان توکنی رفتند که مقدارِ روشنشان
   از آن می‌آمد، پس تمِ روشن پیکسل‌به‌پیکسل همان است. */
/* ── گریدِ کارت‌ها ─────────────────────────────────────────────────────────
   مرحلهٔ ۴ حالا فقط ساختارهاست و هر کدام یک کارت. چیدمانِ قبلی دو ستون بود —
   فهرستِ باریکِ ۳۳۰پیکسلی، و کنارش نقشهٔ عضله×جلسه — یعنی مقایسهٔ هفت گزینه
   هفت بار کلیک و هفت بار بردنِ نگاه به آن‌طرفِ صفحه بود. حالا همه‌شان کنارِ
   هم‌اند و مقایسه یک نگاهِ عمودی است.

   تعدادِ ستون را خودِ گرید تصمیم نمی‌گیرد، `structureCards()` روی `data-n`
   می‌نویسد: با `auto-fill` سه کارت در عرضِ کامل سه ستونِ باریک می‌شدند و با
   عددِ ثابت، هشت کارت به اسکرول می‌رسید. */
#wzPane3 .pn {
    justify-content: flex-start;
    padding: 20px 32px 18px;
    gap: 24px;
}
#wzPane3 .pn-body { flex: 1 1 auto; overflow-y: auto; }

.st-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-width: 0;
}
.st-page-head h2 {
    min-width: 0;
    color: var(--ink);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}
.st-context {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.st-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 5px 10px 5px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}
.st-context-chip img { width: 32px; height: 32px; flex: 0 0 auto; }

.st-recommendations { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
 /* `direction: rtl` این‌جا بود و در فارسی بی‌اثر (صفحه از قبل راست‌به‌چپ
    است) ولی در انگلیسی کارت را وارونه می‌کرد: «exercises per session 9–7»
    و چیپِ «A Upper». جهت را همان `html[dir]` تعیین می‌کند. */
.st-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 16px;
}

/* ── کارتِ ساختار ─────────────────────────────────────────────────────────
   سه سطر و یک تیک. حالتِ انتخاب‌شده *یک* رنگ دارد و سه‌جور نشان نمی‌دهد:
   قاب آبی می‌شود، زمینه آبیِ کم‌رنگ، و تیک پُر. هر نشانِ چهارم تکرار بود. */
.st-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 1 calc((100% - 32px) / 3);
    min-width: 0;
    height: 152px;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--paper);
    text-align: start;
    transition: border-color .16s, background .16s, box-shadow .16s;
}
.st-grid[data-rows="2"] .st-card,
.st-grid[data-rows="2"] .st-sk-card { height: 180px; }
.st-card:hover { border-color: var(--myo-brand-line); background: var(--wash); }
.st-card:focus-visible { outline: 3px solid var(--myo-brand-soft-2); outline-offset: 2px; }
.st-card.is-on {
    border: 2px solid var(--acc);
    padding: 14px 15px;
    background: var(--acc-w);
    box-shadow: none;
}
.st-card.is-on:hover { background: var(--acc-w); }

.st-card-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.st-card-radio { flex: 0 0 auto; width: 24px; height: 24px; }
.st-card-radio.is-on { display: none; }
.st-card.is-on .st-card-radio.is-off { display: none; }
.st-card.is-on .st-card-radio.is-on { display: block; }

.st-card-t {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 16.5px;
    font-weight: 800;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.st-card-meta { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.st-card-meta > span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.st-card-meta > span + span { padding-inline-start: 16px; border-inline-start: 1px solid var(--line); }
.st-card-meta img { width: 18px; height: 18px; flex: 0 0 auto; }

/* فرکانس یک سطرِ خودش دارد، نه یک سلولِ سومِ ردیفِ متا. دو دلیل: در عرضِ
   ۳۸۵پیکسلیِ کارت (۱۳۶۶) سه سلول به سه‌نقطه می‌رسیدند، و از آن مهم‌تر این
   جمله هم‌وزنِ «۹۶ ست» نیست — تصمیمِ این مرحله را همین عوض می‌کند. */
.st-card-freq {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.st-card-freq img { width: 20px; height: 20px; flex: 0 0 auto; }

/* جلسه‌های یکتا. جداکننده یک نقطهٔ ساخته‌شده با `::after` است نه نویسهٔ `·`:
   فونتِ فارسی آن گلیف را ندارد و کنارِ عدد به رقم می‌چسبد. */
.st-card-d {
    display: grid;
    grid-template-columns: repeat(var(--st-sessions, 1), minmax(0, 1fr));
    gap: 6px 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.st-card-d i {
    min-width: 0;
    overflow: hidden;
    padding: 5px 7px;
    border-radius: 999px;
    background: var(--wash);
    font-style: normal;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ضریبِ تکرارِ یک جلسه («بالاتنه A ×۲»). کم‌رنگ‌تر از خودِ نام است چون نام
   چیزی است که خوانده می‌شود و ضریب فقط شمارش. */
.st-card-d i b { margin-inline-start: 3px; color: var(--muted); font-weight: 800; }

/* تنها نشانِ این گرید. مقیاسِ پنج‌پله‌ای رفت: مربی «مناسب» و «گزینهٔ خوب» را
   از هم تفکیک نمی‌کرد، فقط پیشنهاد را می‌دید یا نمی‌دید. */
.st-fit {
    flex: 0 0 auto;
    margin-inline-start: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ok-w);
    color: var(--ok);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
/* بجِ استثنا. `margin-inline-start: auto` فقط به اولی می‌رسد، وگرنه دو بج
   با فاصلهٔ کشسان از هم جدا می‌افتادند و ردیف شکسته دیده می‌شد. */
.st-fit + .st-fit { margin-inline-start: 5px; }
.st-fit.is-warn { background: var(--warn-w); color: var(--warn); }
.st-fit.is-note { background: var(--wash-2); color: var(--ink-2); }

.st-more {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 7px;
    padding: 5px 10px;
    border: 0;
    background: transparent;
    color: var(--acc);
    font-size: 13.5px;
    font-weight: 800;
}
.st-more:hover { color: var(--acc-d); }
.st-more:focus-visible { outline: 3px solid var(--myo-brand-soft-2); outline-offset: 2px; border-radius: 8px; }
.st-more img { width: 20px; height: 20px; }

.st-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    padding: 24px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    text-align: center;
}
.st-state b { color: var(--ink); font-size: 16px; }
.st-state button { padding: 8px 14px; border: 1px solid var(--acc); border-radius: 9px; background: var(--paper); color: var(--acc); font-weight: 800; }

.st-sk { display: block; overflow: hidden; background: var(--wash-2); position: relative; }
.st-sk::after { content: ''; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, var(--paper), transparent); animation: stShimmer 1.2s infinite; }
.st-sk-title { width: 280px; height: 36px; border-radius: 9px; }
.st-sk-chip { width: 126px; height: 44px; border-radius: 999px; }
.st-sk-card { flex: 0 1 calc((100% - 32px) / 3); height: 152px; border-radius: 14px; }
@keyframes stShimmer { to { transform: translateX(-100%); } }

@media (max-width: 1199px) {
    .st-card, .st-sk-card { flex-basis: calc((100% - 16px) / 2); }
    .st-page-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767px) {
    #wzPane3 .pn { padding: 18px 16px; gap: 18px; }
    .st-page-head { gap: 12px; }
    .st-page-head h2 { font-size: 21px; white-space: normal; }
    .st-context { width: 100%; overflow-x: auto; padding-block-end: 3px; scrollbar-width: thin; }
    .st-context-chip { flex: 0 0 auto; }
    .st-card, .st-sk-card { flex-basis: 100%; }
}

@media (max-height: 810px) and (min-width: 768px) {
    #wzPane3 .pn { padding-block: 12px; gap: 14px; }
    .st-card, .st-sk-card { height: 146px; }
    .st-grid[data-rows="2"] .st-card,
    .st-grid[data-rows="2"] .st-sk-card { height: 174px; }
    .st-recommendations { gap: 10px; }
}

/* ══ ۸ · هفته — مؤلفهٔ مشترکِ مرحلهٔ ۴ و ۵ ═════════════════════════════════════════════
   قلبِ ویزارد. هر جلسه یک ستون است، کنارِ هم، به همان ترتیبی که در هفته
   اجرا می‌شود.

   طراحیِ قبلی کارت‌های روی‌هم بود و بازکردنِ یکی، بقیه را به یک ردیفِ تک‌خطی
   جمع می‌کرد: یعنی دقیقاً وقتی مربی تصمیم می‌گرفت «امروز چه بزنم»، سه جلسهٔ
   دیگر را نمی‌دید. */
/* یک ستون، تمامِ عرض. ستونِ کناریِ ۲۹۰پیکسلی («خلاصهٔ برنامه» و نکته‌ها)
   برداشته شد: تخته میزِ کار است و آن عرض مالِ ستون‌های جلسه بود. */
.fn {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* سقفِ عرض از تعدادِ جلسه می‌آید (`--wb-n` را `renderWeekBoard` می‌نویسد):
       با عرضِ آزاد، هفتهٔ دوروزه دو ستونِ ششصدپیکسلی می‌شد که سه چیپ در آن
       گم بودند. کفِ ۷۲۰ هم لازم است وگرنه نوارِ کنترل در همان حالت دو خط
       می‌شد. هفتهٔ چهار و شش‌روزه به سقف نمی‌رسند و تمامِ عرض را می‌گیرند. */
    width: 100%;
    max-width: max(720px, calc(var(--wb-n, 4) * 330px));
    margin-inline: auto;
    min-width: 0;
}

/* نکته‌های زیرِ تخته — هشدارِ فاصله و نکته‌های بازبینی. هر دو معمولاً هیچ‌اند
   و آن‌وقت کلِ نوار ناپدید می‌شود، نه اینکه یک جعبهٔ خالی جا بگذارد.

   کنارِ هم، نه روی هم: دو جعبهٔ پشتِ‌سرهم صد پیکسل از ارتفاعی می‌خوردند که
   کتابخانهٔ عضلات لازمش داشت و آن را زیرِ خطِ تا می‌بردند. `flex: 1 1 320px`
   یعنی تکی تمامِ عرض را می‌گیرد و دوتایی نصف-نصف می‌شوند. */
.fn-notes { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.fn-notes > * { flex: 1 1 320px; min-width: 0; }
.fn-notes:not(:has(> *:not([hidden]):not(:empty))) { display: none; }
.fn-notes .pflight { display: flex; flex-direction: column; gap: 6px; }
.fn-notes .pflight > h3 {
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 800;
}
.pf-warn p{ overflow-wrap: anywhere; }

/* ── نوارِ کنترلِ مرحلهٔ ۵ ─────────────────────────────────────────────────
   چپ: چیدمان‌ها (سؤال). راست: حالت (کنش). یک خطِ نازک بینشان نیست — فاصله
   کافی است و یک جداکنندهٔ دیگر در صفحه‌ای که همین حالا تخته و ستونِ کناری
   دارد، یک خطِ اضافه است.

   دو گروه عمداً هم‌شکل نیستند: چیدمان‌ها قرصِ توخالی‌اند (یکی‌شان انتخاب است)
   و کنش‌ها دکمهٔ لبه‌دار. اگر هر دو قرص بودند، چشم «ویرایش» را چیدمانِ پنجم
   می‌خواند. */
.wb-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 34px;
}
.wb-bar-act { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }

.wb-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--myo-r-sm);
    background: var(--paper);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color .16s, background .16s, color .16s, box-shadow .16s;
}
.wb-act svg { width: 15px; height: 15px; flex: 0 0 auto; }
.wb-act:hover { border-color: var(--acc); color: var(--acc-d); background: var(--acc-w); }
.wb-act:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* «ویرایش» کنشِ اصلیِ این نوار است و تنها دکمهٔ پُرِ آن. «پایان ویرایش» و
   «بازگشت» هر دو خروج‌اند و باید آرام‌تر از خودِ کار باشند. */
.wb-act.is-edit {
    border-color: var(--acc);
    background: var(--acc);
    color: var(--myo-on-fill);
    box-shadow: var(--myo-el-brand);
}
.wb-act.is-edit:hover { background: var(--myo-brand-hover, var(--acc)); color: var(--myo-on-fill); }
.wb-act.is-done { border-color: var(--ok); color: var(--ok); background: var(--ok-w); }
.wb-act.is-done:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-w); }
.wb-act.is-revert:hover { border-color: var(--navy); color: var(--navy-d); background: var(--wash-2); }
/* فلشِ بازگشت جهت‌دار است و در RTL باید آینه شود، ولی تیک و مداد نه. */
[dir="rtl"] .wb-act.is-revert svg { transform: scaleX(-1); }

/* ── «این هفته ویرایش شد» ────────────────────────────────────────────────
   نه هشدار است و نه تبریک: یک جملهٔ خبری. پس نه نارنجی (که در این اپ یعنی
   «اشکال») و نه سبز — همان لاجوردیِ خنثای اپ، با یک ریلِ نازک در ابتدای
   خط که نشان می‌دهد این جمله به نوارِ بالایش وصل است. */
.wb-edited {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--navy);
    border-radius: var(--myo-r-sm);
    background: var(--wash-2);
    animation: wbEditedIn .22s var(--ez) both;
}
.wb-edited svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--navy); }
.wb-edited b { color: var(--navy-d); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.wb-edited span { color: var(--ink-2); font-size: 12px; min-width: 0; }
@keyframes wbEditedIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── «چیدمان عوض شود؟» ───────────────────────────────────────────────────
   جای همان نوارِ بالا می‌نشیند، نه در یک مودالِ وسطِ صفحه: مربی باید همان
   لحظه هفته‌ای را ببیند که دارد از دستش می‌دهد. */
.wb-ask {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px solid var(--warn);
    border-radius: var(--myo-r-sm);
    background: var(--warn-w);
    animation: wbEditedIn .18s var(--ez) both;
}
.wb-ask b { color: var(--warn); font-size: 12.5px; font-weight: 800; }
.wb-ask > span { color: var(--ink-2); font-size: 12px; }
.wb-ask-act { display: flex; gap: 6px; margin-inline-start: auto; }
.wb-ask-act button {
    height: 28px;
    padding: 0 12px;
    border: 1.5px solid var(--line-2);
    border-radius: var(--myo-r-sm);
    background: var(--paper);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
}
.wb-ask-yes { border-color: var(--warn) !important; background: var(--warn) !important; color: var(--myo-on-fill) !important; }
.wb-ask-no:hover { border-color: var(--navy); color: var(--navy-d); }

/* ── انتخابِ مدلِ چیدمان ─────────────────────────────────────────────────── */
.lm-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.lm-l { color: var(--muted); font-size: 12px; font-weight: 800; margin-inline-end: 4px; }
.lm-opt {
    padding: 6px 13px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-2);
    transition: border-color .16s, background .16s, color .16s;
}
.lm-opt:hover { border-color: var(--line-2); }
.lm-opt.is-on { border-color: var(--acc); background: var(--acc-w); color: var(--acc-d); font-weight: 800; }

/* ── تخته ────────────────────────────────────────────────────────────────
   ستون‌ها هم‌عرض‌اند و همیشه همه‌شان هم‌زمان بازند. */
.wb {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* یک ستون به‌ازای هر جلسه، هم‌عرض. تعداد را `renderWeekBoard()` در
       `--wb-n` می‌گذارد؛ خودِ شبکه این‌جاست، نه روی `style`ِ عنصر — وگرنه
       مرزِ گوشی پایین‌تر نمی‌توانست یک‌ستونه‌اش کند. */
    grid-template-columns: repeat(var(--wb-n, 5), minmax(0, 1fr));
    gap: 7px;
}

/* دو حالت، دو رفتارِ ارتفاع — و این‌بار عمدی:
     • تماشا: کارت‌ها قدِ محتوای خودشان‌اند. کارتِ بلندِ نیمه‌خالی چیزی به مربی
       نمی‌گوید؛ فضای اضافه به حاشیهٔ قرینهٔ کلِ ستون می‌رود (`safe center`).
     • ویرایش: تخته تمامِ سهمش از ارتفاع را می‌گیرد، چون همان فضای خالی
       *هدف* است — جایی که چیپ را رها می‌کنی.

   کفِ ۲۱۰ پیکسل در حالتِ ویرایش اجباری است: بدونِ آن فلکس می‌تواند سهمی کمتر
   از قدِ یک ستون بدهد و چون گرید `overflow` ندارد، کارت‌ها روی جعبهٔ زیرشان
   کشیده می‌شوند. با کف، اگر واقعاً جا نبود همان `.fn` اسکرول می‌کند — که راهِ
   فرارِ طراحی‌شده است، نه دو عنصرِ روی هم. */
.wb { flex: 0 0 auto; align-content: start; }
.wb-day {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    background: var(--wash);
    transition: border-color .16s, background .16s, box-shadow .16s, transform .14s var(--ez);
}

.wb-day-h {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 9px 0;
}
.wb-when {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--myo-brand-soft-2);
    color: var(--acc-d);
    box-shadow: inset 0 0 0 1px var(--myo-brand-line);
    font-size: 10.5px;
    font-weight: 800;
}

.wb-name {
    margin: 6px 9px 0;
    padding: 5px 8px;
    border: 1.5px solid transparent;
    border-radius: 8px;
    /* توکن، نه سفیدِ خام: `rgba(255,255,255,.7)` در تمِ تیره یک جعبهٔ روشن
       می‌ساخت زیرِ متنی که خودش روشن بود، و نامِ جلسه عملاً ناخوانا می‌شد.
       تا دیروز این فیلد فقط در مسیرِ اختصاصی دیده می‌شد؛ حالا هر مربی‌ای که
       «ویرایش» را بزند آن را می‌بیند. */
    background: var(--paper);
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    outline: none;
    min-width: 0;
    transition: border-color .16s, background .16s;
}
.wb-name.is-ro { background: transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wb-mus {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    margin: 7px 9px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* کلاس را JS می‌گذارد، فقط وقتی واقعاً چیزی زیرِ لبه مانده باشد
   (markClippedMuscles). ماسکِ همیشگی، آخرین چیپ را در ستونِ پُرنشده هم محو
   می‌کرد. */
.wb-mus.is-clipped {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
.wb-mus::-webkit-scrollbar { width: 5px; }
.wb-mus::-webkit-scrollbar-thumb { border-radius: var(--myo-r-sm); background: var(--line-2); }

/* چیپِ عضلهٔ تخته — فقط نمایش؛ ویرایش ردیف‌های `.se-mus` را دارد. */
.mus {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1.5px solid transparent;
    border-radius: var(--myo-r-sm);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
}
.mus > span { min-width: 0; overflow-wrap: anywhere; }
.mus.is-ro { background: var(--paper); border-color: var(--line); color: var(--ink-2); }
/* در مسیرِ آماده هم چیپ‌ها همان حرفِ نقشهٔ مرحلهٔ ۴ را می‌زنند: پُر = مستقیم،
   تُهی = درگیر. یک زبان در هر دو مرحله. */
.mus.is-ro.is-primary { border-color: var(--acc); background: var(--acc-w); color: var(--acc-d); font-weight: 800; }
.mus.is-ro.is-secondary { border-style: dashed; color: var(--muted); }
/* نتیجهٔ همین ستون، زیرِ همان عضله‌هایی که عوضش می‌کنند. «۱۰ عضله» همیشه
   نوشته می‌شود چون قابِ بالا اسکرول است و در ستونِ باریک بیش از چهار-پنج چیپ
   را پنهان می‌کند. */
.wb-est {
    margin: 0 9px 9px;
    padding-top: 7px;
    border-top: 1px dashed var(--line);
    color: var(--navy);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.wb-est[hidden] { display: none; }

/* مسیرِ آماده چیزی برای ویرایش ندارد، پس نصفِ پایینِ قاب خالی می‌ماند. همان
   نوارِ «تکرارِ هر عضله»ی مرحلهٔ ساختار این‌جا هم می‌آید: صفحهٔ تأیید باید
   بگوید دقیقاً چه چیزی ساخته می‌شود، نه فقط نامِ جلسه‌ها را. */
/* هفتهٔ شش‌روزه + نوارِ تکرار، در ارتفاعِ ۷۶۸ از قاب بیرون می‌زد. همان
   قاعدهٔ همیشگی: ناحیهٔ ذاتاً بلند قابِ اسکرولِ خودش را می‌گیرد، نه اینکه
   صفحه را بکشد. در ۱۴۴۰×۹۰۰ اصلاً فعال نمی‌شود. */
.myowz.is-compact .fn { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.myowz.is-compact .fn::-webkit-scrollbar { width: 6px; }
.myowz.is-compact .fn::-webkit-scrollbar-thumb { border-radius: var(--myo-r-sm); background: var(--line-2); }

/* تنها قضاوتی که این مرحله می‌کند، و فقط وقتی چیزی برای گفتن هست. سه قابِ
   کهربایِ پشتِ‌سرهم (حالتِ شش‌روزه) سنگین‌ترین چیزِ صفحه می‌شد؛ یک قاب با
   چند سطر همان حرف را آرام‌تر می‌زند. */
.fn-space { flex: 0 0 auto; }
.fn-space:empty { display: none; }
.fn-space-b {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px 13px 10px;
    border: 1px solid var(--warn);
    border-radius: var(--r-md);
    background: var(--warn-w);
    color: var(--warn);
}
.fn-space-h { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.fn-space-h b { font-size: 12.5px; font-weight: 800; }
.fn-space-go {
    margin-inline-start: auto;
    padding: 3px 10px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 11px;
    font-weight: 800;
}
.fn-space-go:hover { background: var(--warn); color: var(--myo-on-fill); }
.fn-space-b p { font-size: 12px; font-weight: 700; }
.fn-space-b p b { font-weight: 800; }
.fn-space-w { margin-top: 2px; font-size: 11px; font-weight: 700; opacity: .8; }

/* ── وضعیتِ مرحله، کنارِ عنوان ─────────────────────────────────────────────
   «آماده هست یا نه» اولین چیزی است که مربی در این مرحله می‌خواهد بداند؛ تا
   پیش از این ته ستونِ کناری بود، پایینِ همهٔ ستون‌ها. */
.fn-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 52%;
    padding: 8px 14px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
}
.fn-status:empty { display: none; }
.fn-status b { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.fn-status span { color: var(--muted); font-size: 12px; }
.fn-status .pf-jump { background: var(--acc-w); color: var(--acc-d); }

.fn-status.is-ok { border-color: var(--ok); background: var(--ok-w); }
.fn-status.is-ok b { color: var(--ok); }
.fn-status.is-ok b::before { content: '✓ '; font-weight: 900; }
.fn-status.is-warn { border-color: var(--warn); background: var(--warn-w); }
.fn-status.is-warn b { color: var(--warn); }
.fn-status.is-err { border-color: var(--myo-danger); background: var(--myo-danger-soft); }
.fn-status.is-err b { color: var(--myo-danger); }
/* «هنوز آماده نیست» نباید سبز باشد: سبز در کلِ این ویزارد یعنی «انجام شد».
   خنثی و سرمه‌ای، بی‌آنکه مثلِ خطا خط‌قرمز بکشد. */
.fn-status.is-wait { border-color: var(--navy); background: var(--wash-2); }
.fn-status.is-wait b { color: var(--navy-d); }
.fn-status.is-busy { border-style: dashed; }

.pf-warn { display: flex; flex-direction: column; gap: 5px; }
.pf-warn p {
    padding: 6px 8px;
    border-radius: var(--myo-r-sm);
    border-inline-start: 3px solid var(--warn);
    background: var(--warn-w);
    color: var(--warn);
    font-size: 11.5px;
    line-height: 1.55;
}
/* وقتی مربی از نشانِ «نکته»ی روی ستون به این‌جا می‌آید، باید بداند کدام
   پاراگراف مالِ همان جلسه است. */
.pf-warn p.is-lit { box-shadow: 0 0 0 2px var(--warn); }
.pf-jump {
    padding: 1px 6px;
    border: 0;
    border-radius: var(--myo-r-sm);
    background: var(--warn-w);
    color: var(--warn);
    font-size: 11px;
    font-weight: 800;
    text-decoration: underline;
}
.pf-state .pf-jump { background: var(--acc-w); color: var(--acc-d); }

/* ══ ۸ب · چینشِ دستی — یک جلسه در هر لحظه ══════════════════════════════════
   ۲۰۲۶-۰۹-۲۵، از روی ماکاپِ شهاب: زبانه‌های جلسه بالا، بانکِ عضلات یک طرف
   (حدودِ یک‌سوم)، فضای جلسه طرفِ دیگر. کارت‌های سفید روی زمینهٔ روشن.

   ۲۰۲۶-۰۹-۲۶، پاسِ فشرده: همان اسکلت، با اندازه‌هایی که از یک جا می‌آیند.
   پنج متغیرِ `--se-*` تمامِ ارتفاع‌ها را می‌دهند و هر پلهٔ ارتفاعِ نما (پایینِ
   همین بخش) فقط همان‌ها را عوض می‌کند — نه تک‌تکِ قاعده‌ها را.
   در ۱۲۸۰×۷۲۰ پیش از این پاس ۱۱۲ پیکسل و با جلسهٔ ۱۳عضله‌ای ۲۲۴ پیکسل
   می‌لغزید.

   ارتفاع: هیچ ناحیه‌ای اسکرولِ خودش را ندارد. اگر روی نمای کوتاه جا نشد،
   کلِ پنل می‌لغزد — همان قاعدهٔ «پنلِ چندبخشی کامل بلغزد، نه یک تکه‌اش». */
#wzPane4 .se {
    --se-ctl: var(--myo-h-md);   /* دکمه‌های سربرگ و جست‌وجو */
    --se-ic: var(--myo-h-sm);    /* دکمه‌های آیکنی */
    --se-tab: 44px;              /* زبانهٔ جلسه */
    --se-chip: 32px;             /* عضلهٔ بانک */
    --se-row: 38px;              /* ردیفِ عضلهٔ جلسه */
    --se-gap: 8px;
    gap: var(--se-gap);
    padding: 10px clamp(14px, 1.8vw, 24px) 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--wash);
}

/* فقط برای صفحه‌خوان: سرتیترِ «عضله‌های این جلسه» ساختارِ صفحه است، ولی روی
   صفحه همان چیزی را می‌گفت که سربرگِ جلسه درست بالایش گفته. */
.se-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── سربرگ ── */
.se-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    min-height: var(--se-ctl);
}
.se-title { flex: 1 1 240px; min-width: 0; }
.se-title h2 { font-size: 17px; font-weight: 800; letter-spacing: -.2px; line-height: 1.3; color: var(--navy-d); }
.se-head-act { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* پیشوندِ `.se` برای وزن است: `.myowz button { font: inherit }` از یک قاعدهٔ
   تک‌کلاسی سنگین‌تر است و قلم، وزن و ارتفاعِ سطرِ دکمه را بی‌صدا به ارث
   می‌برد — «اصلی/کمکی» با قلمِ ردیف نوشته می‌شد نه با قلمِ خودش. */
.se .se-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--se-ctl);
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--myo-r-md);
    background: var(--paper);
    box-shadow: var(--myo-el-1);
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.se-btn svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); transition: color .15s; }
.se-btn:hover:not(:disabled) { border-color: var(--line-2); background: var(--wash); }
.se-btn:hover:not(:disabled) svg { color: var(--ink-2); }
.se-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.se-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
/* پاک‌کردن بی‌قاب است تا هاور: دو دکمهٔ قرمزِ همیشه‌روشن روی یک صفحه،
   چشم را به کاری می‌کشیدند که کمتر از همه انجام می‌شود. خطرش را پرسشِ
   شناور یا «بازگردانی» مهار می‌کند، نه رنگِ جیغ. */
.se-btn.is-danger { border-color: transparent; background: transparent; box-shadow: none; color: var(--myo-danger-ink); }
.se-btn.is-danger svg { color: var(--myo-danger-icon); }
.se-btn.is-danger:hover:not(:disabled) { border-color: var(--myo-danger-line); background: var(--myo-danger-soft); }
.se-btn.is-danger:hover:not(:disabled) svg { color: var(--myo-danger-icon); }
.se-btn.is-danger[aria-expanded="true"] { border-color: var(--myo-danger-line); background: var(--myo-danger-soft); }
.se-btn.is-warn { border-color: var(--myo-warn-line); background: var(--myo-warn-soft); color: var(--myo-warn-ink); box-shadow: none; }
.se-btn.is-warn svg,
.se-btn.is-warn:hover:not(:disabled) svg { color: var(--myo-warn-icon); }
.se-btn.is-warn:hover:not(:disabled) { border-color: var(--myo-warn-line-strong); background: var(--myo-warn-soft-2); }
.se-btn[hidden] { display: none; }
.se-btn.is-sm { height: calc(var(--se-ic) + 2px); padding: 0 10px; font-size: 12px; }
.se-btn.is-sm svg { width: 15px; height: 15px; }

/* «هنوز آماده نیست» فقط وقتی چیزی مانده دیده می‌شود. */
.se-status { display: none; }
.se-status.is-wait,
.se-status.is-err {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    max-width: 440px;
    min-height: var(--se-ctl);
    padding: 4px 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--myo-r-md);
    background: var(--paper);
    font-size: 12px;
    line-height: 1.4;
}
.se-status b { font-weight: 800; color: var(--navy-d); }
.se-status span { color: var(--muted); }
.se-status.is-err { border-color: var(--myo-danger-line); background: var(--myo-danger-soft); }
.se-status.is-err b { color: var(--myo-danger-ink); }

/* ── زبانه‌های جلسه ──
   یک سطر: روز، نام، شمار. ستون‌ها هم‌عرض‌اند تا جا هست؛ وقتی جا نیست، ردیفِ
   بعد — نه کوچک‌شدنِ متن. نامِ بلند در زبانهٔ باریک دو خط می‌شود، بریده نه. */
.se-tabs {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - (var(--se-n, 4) - 1) * 8px) / var(--se-n, 4))), 1fr));
    gap: 8px;
}
.se-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: var(--se-tab);
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: var(--myo-r-lg);
    background: var(--paper);
    box-shadow: var(--myo-el-1);
    text-align: start;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.se-tab:hover:not(.is-on) { border-color: var(--line-2); box-shadow: var(--myo-el-card); }
.se-tab:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.se-tab.is-on {
    border-color: var(--myo-brand-fill);
    background: var(--acc-w);
    box-shadow: inset 0 2px 0 var(--myo-brand-fill), var(--myo-el-card);
}
.se-tab-day {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.se-tab.is-on .se-tab-day { color: var(--acc-d); }
.se-tab-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
}
.se-tab-n {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: var(--myo-r-pill);
    background: var(--wash-2);
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
.se-tab.is-on .se-tab-n { background: var(--myo-brand-soft-2); color: var(--acc-d); }
/* جلسهٔ بی‌عضلهٔ اصلی — همان چیزی که دکمهٔ ساخت را خاموش می‌کند. */
.se-tab.is-bad .se-tab-n { background: var(--myo-danger-soft-2); color: var(--myo-danger-ink); }
.se-tab-warn {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--myo-warn-icon);
}
.se-tab-warn[hidden] { display: none; }
.se-tab.is-flash { animation: seFlash .9s var(--ez); }
@keyframes seFlash {
    0%, 100% { box-shadow: var(--myo-el-1); }
    30% { box-shadow: 0 0 0 3px var(--myo-brand-line-strong), var(--myo-el-card); }
}

/* ── دو ستون ── */
.se-main {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: minmax(290px, 34fr) minmax(0, 66fr);
    align-items: stretch;
    gap: 12px;
}
.se-bank,
.se-ed {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--myo-r-xl);
    background: var(--paper);
    box-shadow: var(--myo-el-card);
}

/* ── بانکِ عضلات ── */
/* عنوان و جست‌وجو یک سطر‌اند: بانک بلندترین ستونِ این صفحه است و هر سطرِ
   اضافه‌اش مستقیماً از «بدونِ اسکرول» کم می‌کند. */
.se-bank { padding: 10px 12px 12px; gap: 8px; transition: border-color .15s, background .15s; }
.se-bank-h { display: flex; align-items: center; gap: 10px; }
.se-bank-h h3 { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--navy-d); }
.se-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--se-ctl);
    padding-inline: 10px;
    border: 1px solid var(--line);
    border-radius: var(--myo-r-md);
    background: var(--wash);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.se-search:hover { border-color: var(--line-2); }
.se-search:focus-within { border-color: var(--acc); background: var(--paper); box-shadow: 0 0 0 3px var(--myo-brand-soft-2); }
.se-search svg { order: 2; width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
.se .se-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    font-size: 12.5px;
    outline: none;
}
.se-search input::placeholder { color: var(--muted); }
.se-search input::-webkit-search-cancel-button { cursor: pointer; }

.se-bank-list { display: flex; flex-direction: column; gap: 8px; }
.se-grp { display: flex; flex-direction: column; gap: 5px; }
/* برچسبِ گروه یک سرخطِ ریز است که خطِ مویی دنبالش می‌آید — نه سطری با
   زیرخطِ تمام‌عرض که یک «جدول» می‌ساخت. */
.se-grp-l {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.3;
}
/* قلمِ فارسی خط‌کرسیِ پایین‌تری دارد: وسطِ جعبه بالای وسطِ حروف می‌افتد. */
.se-grp-l::after { content: ''; flex: 1 1 auto; height: 1px; margin-top: 2px; background: var(--line); }
.se-grp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 5px; }
.se-none { padding: 18px 4px; color: var(--muted); font-size: 12.5px; text-align: center; }

.se-bk {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    min-height: var(--se-chip);
    padding-block: 2px;
    padding-inline: 1px 5px;
    border: 1px solid var(--line);
    border-radius: var(--myo-r-md);
    background: var(--paper);
    color: var(--ink);
    text-align: start;
    cursor: grab;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.se-bk:hover { border-color: var(--myo-brand-line-strong); box-shadow: var(--myo-el-1); }
.se-bk:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.se-bk-n { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.se-bk-ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wash-2);
    color: var(--ink-2);
    transition: background .15s, color .15s;
}
.se-bk-ic svg { width: 13px; height: 13px; }
.se-bk:hover .se-bk-ic { background: var(--myo-brand-soft-2); color: var(--acc-d); }
/* «در این جلسه هست» باید از دور خوانده شود: تیکِ پُرِ آبی، نه تیکِ کم‌رنگ. */
.se-bk.is-in { border-color: var(--myo-brand-line); background: var(--acc-w); }
.se-bk.is-in .se-bk-n { color: var(--acc-d); }
.se-bk.is-in .se-bk-ic,
.se-bk.is-in:hover .se-bk-ic { background: var(--myo-brand-fill); color: var(--myo-on-fill); }
.se-bk .se-grip { width: 12px; height: 22px; }
.se-bk .se-grip svg { width: 12px; height: 12px; }
/* جلسهٔ پُر (۱۳ عضله): عضله‌های بیرونِ جلسه کم‌رنگ‌اند ولی کلیک‌پذیر می‌مانند
   تا بگویند چرا اضافه نمی‌شوند. */
.se-bk.is-off { opacity: .5; cursor: not-allowed; }
.se-bk.is-off:hover { border-color: var(--line); box-shadow: none; }
.se-bk.is-off:hover .se-bk-ic { background: var(--wash-2); color: var(--ink-2); }

/* دستگیره — دیدنی ولی کم‌رنگ؛ روی لمس تنها جایی است که کشیدن را شروع می‌کند. */
.se-grip {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 16px;
    height: 26px;
    color: var(--myo-ink-faint);
    cursor: grab;
    touch-action: none;
    transition: opacity .15s, color .15s;
}
.se-grip svg { width: 14px; height: 14px; }
/* با ماوس کلِ کاشیِ بانک کشیدنی است، پس پانزده دستگیرهٔ همیشه‌پیدا فقط
   نقطه‌چینِ اضافه بودند. با هاور می‌آیند؛ روی لمس همیشه هستند. */
@media (hover: hover) and (pointer: fine) {
    .se-bk .se-grip { opacity: 0; }
    .se-bk:hover .se-grip,
    .se-bk:focus-visible .se-grip { opacity: 1; }
}

/* ── فضای جلسه ── */
.se-ed { overflow: hidden; }
.se-ed-h {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-height: 48px;
    padding: 6px 10px 6px 14px;
    border-bottom: 1px solid var(--line);
}
html[dir="ltr"] .se-ed-h { padding: 6px 14px 6px 10px; }
.se-ed-t { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.se-ed-day { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--acc-d); }
/* جداکننده شکل است نه نویسه: `·` در قلمِ فارسی گلیف ندارد و به رقم می‌چسبید. */
.se-sep { flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
/* نامِ جلسه ویرایش‌پذیر است و قلمِ کوچک این را نمی‌گوید: مدادِ کم‌رنگ کنارش
   می‌گوید. کادر به اندازهٔ نام است (`field-sizing`)، تا مداد کنارِ «پوش»
   بنشیند نه سیصد پیکسل آن‌طرف‌تر. */
.se-ed-namebox { position: relative; display: flex; align-items: center; flex: 0 1 auto; min-width: 0; cursor: text; }
.se .se-ed-name {
    field-sizing: content;
    min-width: 5ch;
    max-width: 300px;
    height: 32px;
    padding-block: 0;
    padding-inline: 7px 28px;
    border: 1px solid transparent;
    border-radius: var(--myo-r-sm);
    background: transparent;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    outline: none;
    text-overflow: ellipsis;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.se-ed-namebox > svg {
    position: absolute;
    inset-inline-end: 8px;
    width: 14px;
    height: 14px;
    color: var(--myo-ink-faint);
    pointer-events: none;
    transition: color .15s;
}
.se-ed-namebox:hover > svg { color: var(--acc-d); }
.se .se-ed-name:hover { border-color: var(--line); background: var(--wash); }
.se .se-ed-name:focus { border-color: var(--acc); background: var(--paper); box-shadow: 0 0 0 3px var(--myo-brand-soft-2); }
.se .se-ed-name:focus + svg { color: var(--acc-d); }
.se-count {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: var(--myo-r-pill);
    background: var(--acc-w);
    color: var(--acc-d);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.6;
    white-space: nowrap;
}
/* سقفِ ۱۳ — همان‌جا که شمار نوشته شده گفته می‌شود، نه فقط در یک توست. */
.se-count.is-full { background: var(--myo-warn-soft); color: var(--myo-warn-ink); }
.se-ed-act { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
/* دو پیکانِ جابه‌جایی یک کنترل‌اند، پس یک قاب دارند. */
.se-mvs {
    display: flex;
    gap: 2px;
    padding: 1px;
    border: 1px solid var(--line);
    border-radius: var(--myo-r-md);
    background: var(--paper);
}

.se-ic {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--se-ic);
    height: var(--se-ic);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    transition: background .15s, color .15s, opacity .15s;
}
.se-ic svg { width: 16px; height: 16px; }
.se-ic:hover:not(:disabled) { background: var(--wash-2); color: var(--ink); }
.se-ic:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.se-ic:disabled { opacity: .3; cursor: default; }
.se-ic.is-x:hover { background: var(--myo-danger-soft-2); color: var(--myo-danger-ink); }
.se-ic[aria-expanded="true"] { background: var(--acc-w); color: var(--acc-d); }
.se-mv { width: calc(var(--se-ic) - 2px); height: calc(var(--se-ic) - 4px); border-radius: calc(var(--myo-r-md) - 2px); }
html[dir="ltr"] .se-mv svg { transform: scaleX(-1); }

.se-ed-b { flex: 1 1 auto; display: flex; flex-direction: column; padding: 8px 10px; }
/* قابِ رهاکردن فقط وقتی دیده می‌شود که کاری با آن هست: خالی، یا هنگامِ
   کشیدن. در حالتِ عادی خط‌چینِ دورِ ردیف‌ها فقط یک قابِ دوم دورِ کارت بود. */
.se-drop {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    padding: 4px;
    border: 1.5px dashed transparent;
    border-radius: var(--myo-r-lg);
    transition: border-color .15s, background .15s;
}
.se-drop.is-empty { justify-content: center; border-color: var(--myo-brand-line); background: var(--wash); }
.se-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); align-content: start; gap: 6px; }
.se-drop-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}
.se-drop-hint svg {
    width: 40px;
    height: 40px;
    padding: 10px;
    border: 1.5px dashed var(--myo-brand-line-strong);
    border-radius: 50%;
    color: var(--acc-d);
}

/* ردیف با زبانِ تخته حرف می‌زند: اصلی «پُر» است (کاغذ + ریلِ آبی)، کمکی
   «تُهی» (خط‌چین، ریلِ خاکستری). ریل `border-inline-start` است نه سایهٔ
   درونی، چون فقط اولی جهت را می‌فهمد. */
.se-mus {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    min-height: var(--se-row);
    padding-block: 2px;
    padding-inline: 1px 3px;
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--myo-brand-line-strong);
    border-radius: var(--myo-r-md);
    background: var(--paper);
    box-shadow: var(--myo-el-1);
    cursor: grab;
    transition: border-color .15s, box-shadow .15s, opacity .15s, background .15s;
}
.se-mus:hover { border-color: var(--line-2); border-inline-start-color: var(--myo-brand-fill); box-shadow: var(--myo-el-card); }
.se-mus-n {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-end: 4px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.25;
    overflow-wrap: break-word;
}
/* نقش یک دکمه است، نه برچسب: کلیک = اصلی ↔ کمکی. */
.se .se-role {
    flex: 0 0 auto;
    height: 22px;
    margin-inline-end: 2px;
    padding: 0 8px;
    border: 1px solid var(--myo-brand-line);
    border-radius: var(--myo-r-pill);
    background: var(--acc-w);
    color: var(--acc-d);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s;
}
.se-role:hover { border-color: var(--myo-brand-line-strong); background: var(--myo-brand-soft-2); }
.se-role:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.se-mus.is-secondary {
    border-style: dashed;
    border-inline-start-style: solid;
    border-inline-start-color: var(--line-2);
    background: var(--wash);
    box-shadow: none;
}
.se-mus.is-secondary:hover { border-inline-start-color: var(--muted); }
.se-mus.is-secondary .se-mus-n { color: var(--ink-2); font-weight: 700; }
.se-mus.is-secondary .se-role { border-style: dashed; border-color: var(--line-2); background: var(--paper); color: var(--muted); }
.se-mus .se-ic { width: calc(var(--se-ic) - 2px); height: calc(var(--se-ic) - 2px); }
.se-mus .se-ic svg { width: 15px; height: 15px; }

/* جای عضلهٔ بعدی: هم‌قدِ یک ردیف، تُهی. */
.se .se-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--se-row);
    padding: 0 10px;
    border: 1.5px dashed var(--line-2);
    border-radius: var(--myo-r-md);
    background: transparent;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    transition: border-color .15s, background .15s, color .15s;
}
.se-add svg { width: 15px; height: 15px; }
.se-add:hover { border-color: var(--myo-brand-line-strong); background: var(--acc-w); color: var(--acc-d); }
.se-add:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

.se-ed-f {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 14px;
    min-height: 34px;
    padding: 6px 14px;
    border-top: 1px solid var(--line);
    background: var(--wash);
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.4;
}
.se-est { display: flex; gap: 10px; color: var(--ink-2); font-weight: 700; }
.se-est span + span::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-inline-end: 10px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}
.se-hint { margin-inline-start: auto; }
.se-ed-f.is-undo { padding-block: 4px; background: var(--myo-brand-soft); }
.se-undo { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--ink); font-size: 12.5px; }
.se-undo b { font-weight: 700; }
.se-undo button {
    margin-inline-start: auto;
    height: 26px;
    padding: 0 12px;
    border: 1px solid var(--myo-brand-line-strong);
    border-radius: var(--myo-r-sm);
    background: var(--paper);
    color: var(--acc-d);
    font-size: 12px;
    font-weight: 800;
}
.se-undo button:hover { background: var(--acc-w); }

/* ── کشیدن ──
   شبح زیرِ نشانگر، و به‌محضِ شروع، *همهٔ* مقصدهای معتبر روشن می‌شوند. جملهٔ
   مقصد فقط روی همانی که زیرِ نشانگر است (`data-hint`، از i18n). */
body.wb-dragging { cursor: grabbing; user-select: none; }
body.wb-dragging * { cursor: grabbing !important; }

.wb-ghost {
    position: fixed;
    z-index: 90;
    margin: 0;
    pointer-events: none;
    opacity: .94;
    transform: translate(50%, -50%) rotate(-1.5deg);
    box-shadow: var(--myo-el-3);
}
html[dir="ltr"] .wb-ghost { transform: translate(-50%, -50%) rotate(1.5deg); }
.wb-ghost .se-grip { opacity: 1; }
.is-dragging { opacity: .35; }

body.wb-drag-pal .se-drop,
body.wb-drag-pal .se-tab,
body.wb-drag-mus .se-tab:not(.is-src) { border-color: var(--myo-brand-fill); border-style: dashed; }
body.wb-drag-pal .se-drop { background: var(--wash); }
body.wb-drag-mus .se-bank { border-color: var(--myo-danger-line-strong); border-style: dashed; }

/* `body.wb-dragging` لازم است، نه تزئین: قاعدهٔ «همهٔ مقصدها خط‌چین» بالاتر
   با `body.wb-drag-*` وزنِ بیشتری داشت و مقصدِ زیرِ نشانگر هرگز توپُر
   نمی‌شد — همان‌که باید از بقیه جدا دیده شود. */
body.wb-dragging .se-drop.is-over { border-style: solid; border-color: var(--myo-brand-fill); background: var(--acc-w); }
body.wb-dragging .se-tab.is-over { border-style: solid; background: var(--acc-w); transform: translateY(-2px); }
body.wb-dragging .se-bank.is-over { border-style: solid; background: var(--myo-danger-soft); }
/* ردیف: «جلوتر از این» — یک خطِ رنگی بیرونِ لبهٔ شروعِ همان ردیف، در فاصلهٔ
   بینِ دو ستون. */
.se-mus.is-over::before {
    content: '';
    position: absolute;
    inset-block: 4px;
    inset-inline-start: -8px;
    width: 3px;
    border-radius: 3px;
    background: var(--myo-brand-fill);
}
.se-drop.is-over,
.se-tab.is-over,
.se-bank.is-over { position: relative; }
.se-drop.is-over::after,
.se-tab.is-over::after,
.se-bank.is-over::after {
    content: attr(data-hint);
    position: absolute;
    inset-inline: 10px;
    bottom: 10px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: var(--myo-r-sm);
    background: var(--myo-brand-fill);
    box-shadow: var(--myo-el-2);
    color: var(--myo-on-fill);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
}
.se-tab.is-over::after { bottom: auto; top: calc(100% + 6px); }
.se-bank.is-over::after { background: var(--myo-danger-fill); color: var(--myo-on-danger); }

/* ── منو و پرسشِ شناور ──
   به `body` چسبیده، پس توکن‌های `#scrWizard` را نمی‌بیند: همه `--myo-*`. */
.se-pop {
    position: fixed;
    z-index: 1200;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-lg);
    background: var(--myo-paper);
    box-shadow: var(--myo-el-3);
    color: var(--myo-ink);
    font-family: var(--myo-font);
    font-size: 13px;
    line-height: 1.45;
    animation: sePop .14s var(--myo-ez, ease-out);
}
@keyframes sePop { from { opacity: 0; transform: translateY(-4px); } }
.se-pop button { font: inherit; color: inherit; cursor: pointer; }

.se-menu { display: flex; flex-direction: column; gap: 4px; width: min(420px, calc(100vw - 16px)); padding: 5px; }
.se-menu-top { display: flex; flex-direction: column; gap: 1px; padding-bottom: 5px; border-bottom: 1px solid var(--myo-line); }
.se-menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 3px; }
.se-menu-sec { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.se-menu-l {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 4px;
    color: var(--myo-ink-muted);
    font-size: 11.5px;
    font-weight: 800;
}
.se-menu-l svg { width: 14px; height: 14px; }
.se-mi {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--myo-h-md);
    padding: 5px 10px;
    border: 0;
    border-radius: var(--myo-r-sm);
    background: transparent;
    text-align: start;
}
.se-mi svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--myo-ink-muted); }
.se-mi:hover:not(:disabled),
.se-mi:focus-visible { background: var(--myo-surface-2); outline: none; }
.se-mi:hover:not(:disabled) svg,
.se-mi:focus-visible svg { color: var(--myo-brand-ink); }
.se-mi:disabled { opacity: .5; cursor: default; }
.se-mi.is-target { flex-wrap: wrap; row-gap: 0; }
.se-mi-day { color: var(--myo-brand-ink); font-size: 12px; font-weight: 800; }
.se-mi-name { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.se-mi small { flex: 1 0 100%; color: var(--myo-ink-muted); font-size: 11px; }

.se-ask { display: flex; flex-direction: column; gap: 6px; width: min(340px, calc(100vw - 16px)); padding: 14px 16px; }
.se-ask b { font-size: 13.5px; font-weight: 800; }
.se-ask > span { color: var(--myo-ink-2); font-size: 12.5px; }
.se-ask-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.se-ask-act button {
    height: var(--myo-h-md);
    padding: 0 14px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-md);
    background: var(--myo-paper);
    font-weight: 700;
}
.se-ask-act .se-ask-yes { border-color: var(--myo-danger-fill); background: var(--myo-danger-fill); color: var(--myo-on-danger); }
.se-ask-act .se-ask-no:hover { background: var(--myo-surface-2); }

.se-notes { display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 16px)); padding: 14px 16px; }
.se-notes > b { font-size: 13.5px; font-weight: 800; }
.se-notes p { padding: 8px 10px; border-radius: var(--myo-r-sm); background: var(--myo-warn-soft); color: var(--myo-ink); font-size: 12.5px; overflow-wrap: anywhere; }
.se-notes .pf-jump {
    margin-inline-end: 6px;
    padding: 1px 8px;
    border: 0;
    border-radius: var(--myo-r-pill);
    background: var(--myo-brand-soft);
    color: var(--myo-brand-ink);
    font-size: 12px;
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    .se-tab.is-flash, .se-pop { animation: none; }
}

/* ── پله‌های ارتفاعِ نما ──
   فقط متغیرها عوض می‌شوند. عددها از سنجه آمده‌اند: جلسهٔ ۱۳عضله‌ایِ
   تمام‌بدن سنگین‌ترین حالت است و کفِ هر پله همان است که آن را جا بدهد. */

/* نمای بلند (مانیتورِ رومیزی): جا هست، پس هدفِ کلیک درشت‌تر و هوای بیشتر. */
@media (min-height: 900px) and (min-width: 861px) {
    #wzPane4 .se { --se-tab: 50px; --se-chip: 36px; --se-row: 42px; --se-gap: 10px; }
    .se-tab-name { font-size: 14px; }
    .se-bk-n { font-size: 13px; }
    .se-mus-n { font-size: 14px; }
}

/* نمای کوتاه (لپ‌تاپِ ۱۳ و ۱۴ اینچی با نوارِ مرورگر). سربرگِ مراحل هم برای
   ویرایشگر جمع می‌شود: این‌جا مربی داخلِ یک کارِ متمرکز است و مسیرِ پنج
   مرحله فقط باید بگوید «کجایی» — مدالیون‌ها می‌مانند، پایه‌ها و نام‌ها
   (جز مرحلهٔ جاری) می‌روند. فقط در حالتِ ویرایش؛ بقیهٔ مراحل دست نمی‌خورند. */
@media (max-height: 860px) and (min-width: 901px) {
    .myowz.is-se-edit .wz-head {
        --wz-dot: 34px;
        --wz-lap: 0px;
        padding-block: 6px 5px;
    }
    .myowz.is-se-edit .wz-rail { inset-block-start: calc(var(--wz-dot) / 2 - 3px); height: 6px; }
    .myowz.is-se-edit .wz-rail > b { width: 18px; height: 21px; }
    .myowz.is-se-edit .wz-step-n,
    .myowz.is-se-edit .wz-step-now { display: none; }
    .myowz.is-se-edit .wz-step.is-now .wz-step-dot { box-shadow: 0 0 0 4px var(--myo-brand-soft-2), 0 6px 14px rgb(0 119 204 / 20%); }
    .myowz.is-se-edit .wz-step-t { margin-block-start: 4px; font-size: 11.5px; }
}
@media (max-height: 720px) and (min-width: 861px) {
    #wzPane4 .se { --se-ctl: 30px; --se-ic: 26px; --se-tab: 38px; --se-chip: 30px; --se-row: 34px; --se-gap: 6px; padding-block: 8px 10px; }
    .se-ed-h { min-height: 42px; padding-block: 4px; }
    .se .se-ed-name { height: 30px; }
    .se-bank { padding-block: 8px 10px; gap: 6px; }
    .se-bank-list { gap: 6px; }
    .se-grp { gap: 4px; }
    .se-grp-list, .se-list { gap: 4px; }
    .se-ed-f { min-height: 30px; padding-block: 4px; }
    .myowz.is-se-edit .wz-step-t { display: none; }
}
/* لپ‌تاپِ ۱۲۸۰×۷۲۰ با نوارِ مرورگر (~۶۱۰). بانک بلندترین ستون است و شش سطرِ
   کاشی دارد؛ همین دو پیکسلِ هر سطر است که جا را باز می‌کند. */
@media (max-height: 640px) and (min-width: 861px) {
    #wzPane4 .se { --se-tab: 36px; --se-chip: 28px; --se-row: 32px; padding-block: 6px 8px; }
    .se-title h2 { font-size: 15.5px; }
    .se-bank { padding-block: 6px 8px; }
    .se-grp-l { font-size: 11px; line-height: 1.2; }
}

/* انگلیسی: واژه‌ها بلندتر و شکستنی نیستند («Hamstrings»، «Secondary»). ردیف
   پهن‌تر می‌شود — دو ستون به‌جای سه — تا نام وسطِ واژه نشکند. */
html[dir="ltr"] .se-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
html[dir="ltr"] .se-bk-n { font-size: 12px; }
html[dir="ltr"] .se-grp-list { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }

/* لمس: همان چیدمان، هدف‌های درشت‌تر. انگشت دقتِ ماوس را ندارد. */
@media (pointer: coarse) {
    #wzPane4 .se { --se-ic: 34px; --se-chip: 40px; --se-row: 46px; }
    .se-mus .se-ic { width: var(--se-ic); height: var(--se-ic); }
    .se-role { height: 28px; }
    .se-grip { width: 22px; height: 36px; }
    .se-bk .se-grip { width: 18px; height: 30px; }
}

/* ── عرض‌های کمتر ──
   زیرِ ۱۱۸۰ بدنهٔ ویزارد خودش می‌لغزد، پس پنل دیگر قابِ اسکرولِ خودش نیست —
   دو اسکرولِ تودرتو همان چیزی است که نباید باشد. */
/* پنل فلکسِ *سطری* است، پس «قدِ محتوا» را باید روی خودِ پنل خواست؛ `flex`
   روی `.se` عرض را بزرگ می‌کرد و صفحه از لبهٔ کارت بیرون می‌زد. */
@media (max-width: 1180px) {
    #wzPane4 .se { overflow: visible; }
    #wzPane4.wz-pane.is-on { min-height: min-content; }
}
/* بانک و فضای جلسه زیرِ هم. فضای جلسه اول می‌آید: همان چیزی است که عوض
   می‌شود، و زبانه‌ها درست بالایش‌اند. */
@media (max-width: 860px) {
    .se-main { grid-template-columns: minmax(0, 1fr); }
    .se-bank { order: 2; }
    .se-drop { min-height: 96px; }
}
@media (max-width: 640px) {
    #wzPane4 .se { gap: 10px; padding: 12px 12px 14px; }
    .se-title h2 { font-size: 16px; }
    .se-head-act { width: 100%; }
    .se-head-act .se-btn { flex: 1 1 0; padding-inline: 10px; }
    .se-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .se-tab { flex-wrap: wrap; row-gap: 2px; padding: 7px 10px; }
    .se-tab-name { flex-basis: 100%; order: 3; }
    .se-tab-n { margin-inline-start: auto; }
    .se-ed-h { padding: 8px 10px; }
    .se-ed-b { padding: 8px; }
    .se-list { grid-template-columns: minmax(0, 1fr); }
    .se .se-ed-name { font-size: 16px; }
    .se-ed-day { font-size: 16px; }
    .se .se-search input { font-size: 16px; }   /* زیرِ ۱۶ iOS خودش زوم می‌کند */
    .se-hint { margin-inline-start: 0; }
    .se-menu-cols { grid-template-columns: minmax(0, 1fr); }
}
/* ══ ۹ · واکنش‌گرا ═══════════════════════════════════════════════════════
   زیرِ ~۱۱۰۰ پیکسل قابِ صفحه اجازهٔ اسکرول می‌گیرد: در نمایِ باریک،
   «همه‌چیز در یک صفحه» دیگر به‌نفعِ خوانایی نیست. */
@media (max-width: 1180px) {
    .fr { grid-template-columns: minmax(0, 1fr); }
    /* دو ستونِ کارتِ شاگرد زیرِ این عرض به یک ستون می‌شوند: کارتی که چهار
       واحدِ اطلاعاتی‌اش زیرِ ۳۰۰ پیکسل جا بگیرد، هر چهارتا را می‌بُرد. */
    .pk-grid { grid-template-columns: minmax(0, 1fr); }
    /* در یک ستون، کارت دو برابر پهن می‌شود و پخشِ یکسانِ فضای اضافه چهار
       واحد را از هم دور می‌اندازد؛ این‌جا به‌اندازهٔ محتوایشان جمع می‌شوند. */
    .pk-fact { flex: 0 1 auto; }
    .pk-fact + .pk-fact { margin-inline-start: 14px; }
    /* کارتِ خلاصهٔ مرحلهٔ ۲ زیرِ سؤال‌ها می‌رود (`.fr` بالاتر یک‌ستونی شد) و
       دیگر لازم نیست نامِ برنامه را ته ستون نگه دارد. */
    .fr-name { margin-top: 0; }
    .fr-total { padding-block: 14px 12px; }
    .fr-total b { font-size: 38px; }
    .wz-step-t { font-size: 12px; }
    .wz-head { --wz-dot: 50px; }
    .fc, .fc-top, .fc-row, .fo-grid, .scs { flex: 0 0 auto; }
    .fc-row { grid-template-columns: minmax(0, 1fr); }
    .fc-weak-art { max-height: 120px; }
    .fr-side { overflow: visible; }
    .wz-body { overflow-y: auto; }
    .wb { min-height: 320px; }
}
/* ── مرحلهٔ ۳ در نمای باریک ───────────────────────────────────────────────
   آستانه از خودِ بستهٔ مرجع می‌آید: تا ۹۶۰ دو ستون، و زیرِ آن تک‌ستونه. در
   ۱۰۲۴ چهار پنل هنوز عرضِ امن دارند (۶۱۵/۳۶۱ و ۳۵۱/۶۲۵) و شکستنشان فقط
   اسکرول اضافه می‌کرد.

   با یک‌ستونی‌شدن، پنل‌ها دیگر نباید ارتفاعِ بدنه را بینِ خودشان تقسیم کنند:
   هرکدام قدِ محتوای خودش می‌ماند و بدنه اسکرول می‌خورد. */
@media (max-width: 960px) {
    .fc-top { grid-template-columns: minmax(0, 1fr); }
    .fo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    /* در نمایِ باریک کارت تمام‌صفحه می‌شود: حاشیه و سایه‌ای که در دسکتاپ
       «کارت» می‌سازند، این‌جا فقط عرضِ مفید را می‌خورند. */
    #scrWizard.on { padding: 0; }
    #scrWizard .myowz {
        width: 100%;
        height: 100%;
        border-inline: 0;
        border-block-start: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .wz-foot { padding-inline: 10px; }
    /* در نمایِ باریک از هر ستون فقط مدالیون و پایه می‌ماند، و نامِ مرحله
       تنها زیرِ مرحلهٔ جاری — پنج نامِ هم‌زمان در ۳۹۰ پیکسل یا روی هم
       می‌افتادند یا هر پنج‌تا به سه حرف بریده می‌شدند. پرچم هم می‌رود:
       ستون‌ها که باریک شوند، جای پرچم را از خودِ مسیر می‌گیرد. */
    .wz-head {
        --wz-dot: 40px;
        --wz-lap: 5px;
        --wz-ped: 28px;
        padding-inline: 10px;
    }
    .wz-step-list { column-gap: 6px; }
    .wz-step-t { display: none; }
    .wz-step.is-now .wz-step-t { display: block; }
    .wz-step-now { display: none; }
    .wz-step-n { min-width: 0; padding-inline: 6px; font-size: 11px; }
    .wz-rail { inset-inline: 0; height: 7px; }
    .wz-rail::after, .wz-rail > b { display: none; }
    .wz-step.is-now .wz-step-dot { box-shadow: 0 0 0 4px var(--myo-brand-soft-2); }
    .opts-4, .opts-5 { grid-template-columns: repeat(2, 1fr); }
    /* دو سؤالِ «طولِ دوره» و «چند روز» زیرِ هم می‌روند؛ کنارِ هم هرکدام سه
       ستونِ ۶۰پیکسلی می‌شدند. */
    .fr-row { grid-template-columns: minmax(0, 1fr); }
    #wzPane1 .opt { min-height: 82px; }
    #wzPane1 .pgoal { min-height: 92px; }
    #wzPane1 .opt-num b { font-size: 26px; }
    .fr-q > h3 { font-size: 14px; }
    .wkd { height: 46px; }
    /* نُه عضله در ردیف‌های پنج و چهارتایی زیرِ ۹۰۰ پیکسل به کاشی‌های
       ۶۰پیکسلی می‌رسند؛ در این عرض هر ردیف می‌شکند و کاشی‌ها دوتا-دوتا
       زیرِ هم می‌آیند. */
    .fo-row { flex-wrap: wrap; }
    .fo-row > * { flex: 1 1 44%; }
    .scs { grid-template-columns: minmax(0, 1fr); }
    .fo-grid { grid-template-columns: minmax(0, 1fr); }
    .wb { grid-template-columns: minmax(0, 1fr); }
    .pn-head-row { align-items: stretch; }
    /* سربرگِ مرحلهٔ اول در یک سطر می‌ماند حتی در ۳۹۰ پیکسل: با رفتنِ عنوانِ
       مرحله فقط دو چیز مانده، و شکستنِ آن دو به دو سطر یک ردیفِ کامل از
       ارتفاعِ فهرست می‌گرفت. جست‌وجو باقیِ سطر را می‌گیرد. چهار واحدِ کارت
       هم به دو ستون می‌شکنند تا هیچ‌کدام بریده نشوند. */
    .pk-top { gap: 10px; }
    .pk-find { flex: 1 1 auto; min-width: 0; }
    .pk-add { height: 36px; padding: 0 12px; font-size: 13px; }
    .pk-facts { flex-wrap: wrap; row-gap: 8px; }
    .pk-fact { flex: 1 1 45%; }
    .pk-fact + .pk-fact { border-inline-start: 0; padding-inline-start: 0; }
}

/* ── موبایل ───────────────────────────────────────────────────────────────
   فوتر از یک ردیف به یک ستون تبدیل می‌شود و کنشِ اصلی تمام‌عرض: در ۳۹۰ پیکسل
   سه چیز در یک ردیف یعنی هر سه بریده. جملهٔ تأیید یک خط می‌ماند و اضافه‌اش
   با «…» جمع می‌شود — کلِ اسمِ شاگرد روی کارتِ انتخاب‌شده هست. */
@media (max-width: 640px) {
    .wz-foot { flex-direction: column; align-items: stretch; gap: 9px; padding: 10px; }
    .wz-foot-note { order: 2; justify-content: center; font-size: 12.5px; }
    .wz-foot-note > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wz-foot-tick { width: 24px; height: 24px; }
    .wz-foot-tick svg { width: 13px; height: 13px; }
    .wz-foot-act { order: 1; }
    .wz-btn.is-go { flex: 1 1 auto; justify-content: center; height: 52px; padding: 0 16px; font-size: 14.5px; }
    .wz-btn.is-go b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wz-go-arrow { width: 32px; height: 32px; }
    .wz-btn.is-ghost { height: 52px; }
    .pk-top { gap: 8px; }
    .pk-add { margin-inline-start: auto; }
    /* سه کارتِ هدف در ۳۹۰ پیکسل سه ستونِ ۱۱۵پیکسلی می‌شدند و «آمادگی جسمانی»
       دو خط می‌شکست؛ تک‌ستونی و کوتاه‌تر. */
    #wzPane1 .opts-3.pgoal-row { grid-template-columns: minmax(0, 1fr); }
    #wzPane1 .pgoal { min-height: 0; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; text-align: start; }
    #wzPane1 .pgoal .opt-chip { width: 40px; height: 40px; }
    #wzPane1 .pgoal b, #wzPane1 .pgoal small { align-self: flex-start; }
}

/* ── گوشی: پنج جایی که «باریک‌تر شدن» کافی نبود ──────────────────────────
   بندِ ۶۴۰ بالا فوتر را ستونی کرد و کارتِ هدف را یک‌ستونه. این‌جا پنج چیزِ
   دیگر است که در ۳۹۰ پیکسل *شکسته* بودند، نه فقط تنگ — هر کدام با
   کرومیومِ واقعی روی ۳۹۰×۸۴۴ دیده شد، نه حدس زده.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* ① فوتر: سه دکمه در یک ردیف جا نمی‌شدند و «ادامه» هفت پیکسل بیرونِ
       قاب می‌ایستاد — یعنی کنشِ اصلیِ مرحله نیمه‌کلیک‌پذیر بود. حالا کنشِ
       اصلی یک ردیفِ کامل برای خودش دارد و دو دکمهٔ فرعی ردیفِ زیرش را
       نصف-نصف می‌کنند. ترتیبِ نشانه‌گذاری (قبلی · رد · ادامه) دست نخورده
       می‌ماند؛ فقط `order` جایش را عوض می‌کند. */
    .wz-foot-act { flex-wrap: wrap; width: 100%; gap: 8px; }
    .wz-foot-act > .wz-btn.is-go { order: -1; flex: 1 0 100%; }
    .wz-foot-act > .wz-btn.is-ghost {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding-inline: 10px;
        /* بی این، «مرحلهٔ قبل» در دکمهٔ ۱۱۰پیکسلی دو خط می‌شد و دکمه از
           ۵۲ به ۷۰ پیکسل قد می‌کشید. */
        white-space: nowrap;
        font-size: 13.5px;
    }

    /* ② سربرگِ مرحلهٔ ساختار: عنوان و سه چیپِ زمینه در یک ردیف بودند و
       چیپِ «۵ روز در هفته» چهل پیکسل بیرونِ لبه می‌افتاد. دو سطر می‌شوند و
       چیپ‌ها می‌پیچند. */
    #wzPane3 .pn { padding-inline: 14px; gap: 14px; }
    .st-page-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .st-page-head h2 { font-size: 20px; white-space: normal; }
    .st-context { flex-wrap: wrap; gap: 6px; }
    .st-context-chip { height: 36px; padding: 4px 8px 4px 12px; gap: 6px; font-size: 12.5px; }
    .st-context-chip img { width: 22px; height: 22px; }

    /* ③ نامِ ساختار: در یک خطِ ۲۹۰پیکسلی به «چهار قسمته به‌علاوهٔ یک فول…»
       می‌رسید — یعنی دقیقاً همان کلمه‌ای که دو گزینه را از هم جدا می‌کند
       بریده می‌شد. دو خط مجاز است؛ کارت‌ها از قبل هم‌قد نیستند. */
    .st-card-t { white-space: normal; overflow: visible; font-size: 15px; line-height: 1.35; }
    .st-more { min-height: 40px; }

    /* ④ تختهٔ هفته: پنج ستونِ کنارِ هم در ۳۹۰ پیکسل یعنی ستونِ ۶۵پیکسلی —
       «سه‌شنبه» به «سر…» می‌رسید و هر چیپِ عضله دو خط می‌شد. روی گوشی هر
       روز یک *ردیف* است: نوارِ روز بالا، عضله‌ها زیرش، و هفته با انگشت
       عمودی خوانده می‌شود، که همان حرکتی است که صفحه از قبل می‌خواهد.

       (کشیدن هم سرِ جایش می‌ماند: `wbPointerMove` هدف را از هندسه پیدا
       می‌کند، نه از شمارهٔ ستون.) */
    .fn { max-width: none; }
    .wb { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .wb-day { flex-direction: column; }
    .wb-day-h { padding: 9px 10px 0; }
    .wb-name { margin: 5px 10px 0; }
    .wb-name.is-ro { white-space: normal; overflow: visible; }
    .wb-mus { margin: 6px 10px 8px; }
    /* در یک ستونِ تمام‌عرض دیگر هیچ چیپی زیرِ لبه نمی‌ماند، پس نه سقفِ
       ارتفاع لازم است نه ماسکِ محوشدگی. */
    .wb-mus { min-height: 0; overflow: visible; }
    .wb-mus.is-clipped::after { display: none; }
    .wb-when { font-size: 12px; padding: 3px 10px; }

    /* ⑤ نوارِ کنترلِ همین مرحله */
    .wb-bar { flex-wrap: wrap; row-gap: 8px; }
    .wb-bar-act { margin-inline-start: 0; width: 100%; }
    .wb-bar-act > .wb-act { flex: 1 1 0; justify-content: center; min-height: 40px; }

    /* ⑥ نامِ مرحلهٔ جاری زیرِ ریل: ستونش یک‌پنجمِ عرض است، پس «هدف و
       زمان‌بندی» به «هدف و زما…» می‌رسید. چون در این نما *فقط* نامِ مرحلهٔ
       جاری دیده می‌شود، هیچ چیزی سرِ راهِ پهن‌شدنش نیست: از جریان درمی‌آید
       و کلِ عرضِ ریل را می‌گیرد. جای خالی‌اش را پدینگِ خودِ ریل نگه می‌دارد،
       وگرنه با درآمدنش سربرگ بیست پیکسل می‌پرید. */
    /* پدینگ روی *فهرست* است نه روی `.wz-steps`: قابِ موقعیتِ این نام
       نزدیک‌ترین نیایِ موقعیت‌دار است و آن `.wz-step-list` است، نه
       `.wz-steps`. با پدینگ روی والدِ اشتباه، نام روی پایهٔ شماره
       می‌افتاد.

       `.myowz` در سلکتور تزیین نیست: `.wz-step-list` یک `<ol>` است و
       ریستِ بالای همین فایل (`.myowz ul, .myowz ol { padding: 0 }`)
       ویژگیِ بالاتری دارد (کلاس + عنصر). بی این پیشوند، پدینگ بی‌صدا صفر
       می‌ماند و نام دوباره روی پایهٔ شماره می‌افتد. */
    .myowz .wz-step-list { padding-block-end: 20px; }
    .wz-step.is-now .wz-step-t {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        max-width: none;
        margin: 0;
        overflow: visible;
        white-space: normal;
        text-align: center;
    }

    /* ⑦ نشانِ «آمادهٔ ساخت» سقفِ ۵۲٪ عرض داشت — عددی که برای کارتِ
       ۱۳۴۰پیکسلی نوشته شده بود؛ در ۳۹۰ پیکسل یعنی ۲۰۰ پیکسل، و «۵ جلسه
       در هفته» وسطش می‌شکست. سربرگِ مرحله از قبل `flex-wrap` دارد، پس
       نشان یک سطرِ کاملِ خودش را می‌گیرد. */
    .fn-status { max-width: none; width: 100%; justify-content: center; }

    /* ⑧ «تغییرِ روزهای هفته» یک لینکِ ۲۹پیکسلی داخلِ هشدارِ فاصله بود. */
    .fn-space-go { min-height: 40px; padding-inline: 12px; }

    /* و خودِ جعبهٔ هشدار `flex: 0 0 auto` دارد (قاعدهٔ محلی‌اش از
       `.fn-notes > *` جلو می‌زند)، پس به‌جای جمع‌شدن، به اندازهٔ متنش پهن
       می‌شد و در ۳۶۰ پیکسل هجده پیکسل از قاب بیرون می‌زد. */
    .fn-space { flex: 1 1 100%; min-width: 0; }

    /* «انتخابِ ضعفِ ناحیه‌ای» در نمای کوتاه به ۳۰ پیکسل جمع می‌شود —
       قاعده‌ای که برای پنجرهٔ کوتاهِ دسکتاپ نوشته شده بود و روی گوشی
       (که *همیشه* کوتاه است) فقط دکمه را از دسترسِ انگشت درمی‌آورد. */
    .fc-weak-cta { height: 42px; }

    /* ⑨ دو زیرنویسِ ۱۰٫۵پیکسلی مرحلهٔ ۳ — «تا ۳ انتخاب» و «اختیاری». در
       این اندازه روی صفحهٔ گوشی خوانده نمی‌شوند. */
    .fc-cap, .fc-opt { font-size: 12px; }
}

/* روی گوشی هر روزِ هفته یک ردیف است (بندِ ④). در همان ردیف، نوارِ روز و
   نامِ جلسه دو *سطرِ* جدا بودند و هر کارت را بیست پیکسل بلندتر می‌کردند؛
   کنارِ هم می‌نشینند. */
@media (max-width: 640px) {
    .wb .wb-day {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 8px;
    }
    /* منطقی، نه فیزیکی: در حالتِ انگلیسی «شروع» سمتِ چپ است و
       `padding: … 10px 0 0` نوارِ روز را به لبهٔ اشتباه می‌چسباند. */
    .wb .wb-day-h { padding: 9px 0 0; padding-inline-start: 10px; }
    .wb .wb-name { margin: 9px 0 0; margin-inline-end: 10px; padding-inline: 0; }
    .wb .wb-mus,
    .wb .wb-est { grid-column: 1 / -1; }
}

/* یادداشت: `touch-action: none` — که بی آن مرورگرِ موبایل به‌جای شروعِ
   کشیدن، *صفحه* را اسکرول می‌کند — فقط روی `.se-grip` است، و روی لمس فقط
   همان دستگیره کشیدن را شروع می‌کند (`wbPointerDown`). بقیهٔ ردیف باید
   صفحه را بلغزاند. */

@media (prefers-reduced-motion: reduce) {
    .myowz *, .myowz *::before, .myowz *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── صفحهٔ خوش‌آمد ────────────────────────────────────────────────────────
   این سه قاعده تنها چیزی بودند که wizard7.css به بیرونِ ویزارد می‌داد؛ با
   حذفِ آن فایل، این‌جا منتقل شدند. */

/* نشانِ «دفعهٔ قبل همین را برداشتید» (features.js) */
.st-fit.st-mem { background: var(--wash-2); color: var(--navy); }
.lm-opt.is-mem::after { content: ' ↺'; opacity: .6; }

/* ══ گروه‌بندیِ دیدنیِ سؤال‌ها در مرحلهٔ «هدف و زمان‌بندی» ═══════════════════
   سه سؤال پیش از این یک نوارِ پیوسته از کارت‌های هم‌شکل بودند و فاصلهٔ بینِ
   دو گروه با فاصلهٔ داخلِ هر گروه فرقی نداشت (نقضِ قاعدهٔ مجاورتِ گشتالت).
   قابِ هر سؤال حالا در .fr-q تعریف شده؛ این‌جا فقط فاصلهٔ بینِ قاب‌ها. */
.fr-row { gap: 22px; }

@media (max-width: 860px) {
    /* روی موبایل دو گروه کنارِ هم نمی‌مانند: با ۴ و ۵ گزینه، هر کدام
       دو ستون می‌شکست و دو سؤال در یک گریدِ درهم حل می‌شد. */
    .fr { grid-template-columns: 1fr; gap: 12px; }
    .fr-row { grid-template-columns: 1fr; gap: 12px; }
    .fr-q { padding: 10px 11px 11px; }
    .fr-main { gap: 11px; }
    .pn-head { margin-bottom: 4px; }
    .pn-sec { gap: 6px; }
    .opts { gap: 6px; }
    .opt { min-height: 54px; padding: 7px 6px; }
    .opt-num > b { font-size: 19px; }
    /* هدف سه کارت دارد، پس در یک ردیف می‌ماند؛ فقط قلم کوچک می‌شود تا
       «آمادگی جسمانی» در ۴۰۰ پیکسل نشکند. */
    .pgoal-row { grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .pgoal .opt-ic { width: 17px; height: 17px; }
    .pgoal b { font-size: 12px; }
    .pgoal small { font-size: 10px; }
    .fr-q-n { width: 16px; height: 16px; font-size: 10px; }

    /* ── قاعدهٔ «بدونِ اسکرول» مالِ دسکتاپ است ────────────────────────
       محتوای این مرحله روی صفحهٔ ۴۰۰×۸۶۰ حدود ۹۷۰px است و فقط ۶۴۰px
       جا هست. فشردنِ آن یعنی برگشتن به همان قلمِ ۹px که تازه بزرگش
       کردیم. پس به‌جای تظاهر، اسکرول را صادقانه و مهارشده می‌کنیم:
       سربرگ و دکمه‌ها سرِ جایشان می‌مانند و فقط بدنه می‌لغزد، با یک
       محوشدگی در لبه که می‌گوید پایین‌تر چیزی هست. */
    .wz-body {
        position: relative;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .wz-pane.is-on { min-height: min-content; }
    .wz-body::after {
        content: '';
        position: sticky;
        bottom: 0;
        display: block;
        height: 22px;
        margin-top: -22px;
        background: linear-gradient(transparent, var(--paper));
        pointer-events: none;
    }

    /* مودالِ ضعف: ریل از ستون به یک ردیفِ زبانهٔ افقی تبدیل می‌شود و
       گزینه‌ها تک‌ستونی، چون در ۴۰۰px دو ستون یعنی برچسبِ بریده. */
    .wkm { padding: 10px; }
    .wkm-b { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 13px 12px; overflow-y: auto; }
    .wkrail { flex-direction: row; gap: 6px; padding: 6px; overflow-x: auto; }
    .wkrail-b { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
    .wkrail-ic { display: none; }
    .wkopts { grid-template-columns: minmax(0, 1fr); }
    /* نوارِ پایینِ مودال و کنشِ اصلی، مثلِ فوترِ ویزارد، ستونی می‌شوند. */
    .wkm-f { flex-wrap: wrap; row-gap: 8px; }
    .wkm-act { flex: 1 1 100%; }
    .wkm-act > .wz-btn { flex: 1 1 0; }

    .fo-row { flex-direction: column; }
    .fo-row > * { flex: 0 0 auto; }
    .tt-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ttp-h { flex-wrap: wrap; row-gap: 6px; }
    .ttp-find { width: 100%; order: 3; }
}

/* ══════════════════════════════════════════════════════════════════════════
   آینه‌کردنِ فلش‌های ویزارد در حالتِ انگلیسی — همان قاعدهٔ `myo-ds.css`.
   این‌جا تکرار می‌شود چون شیتِ ویزارد بعد از آن بار می‌شود و سلکتورهایش
   هم‌وزن‌اند؛ گذاشتنشان آن‌طرف یعنی هر تغییرِ ترتیبِ شیت‌ها این را می‌شکند.

   `.wz-btn` و `.se-mv` هر دو تک‌آیکنی‌اند (فلش تنها محتوای SVGشان است).
   `.pk-tick` و `.st-card-tick` عمداً بیرون‌اند: تیک جهت‌ناپذیر است.
   ══════════════════════════════════════════════════════════════════════════ */
html[dir="ltr"] .wz-btn svg,
html[dir="ltr"] .se-mv svg,
html[dir="ltr"] .fn-space-go svg,
html[dir="ltr"] .pf-jump svg { transform: scaleX(-1); }

/* حرکتِ hover هم جهت دارد: «جلو» در انگلیسی سمتِ راست است. دایرهٔ فلشِ
   «ادامه» خودش آینه نمی‌شود (فقط SVGِ داخلش)، پس جابه‌جاییِ آن جدا نوشته
   می‌شود. */
html[dir="ltr"] .wz-btn.is-go:hover:not(:disabled) .wz-go-arrow { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════
   گوشی: بودجهٔ ارتفاع

   در ۳۹۰×۸۴۴ اندازه گرفته شد، نه حدس زده: تاپ‌بار ۶۴ + سربرگ ۱۰۰ + فوتر
   ۱۶۶ = ۳۳۰ پیکسل پوسته، یعنی **۳۹٪ِ صفحه**. بدنه ۵۱۳ پیکسل می‌ماند، در
   حالی که محتوای مرحلهٔ ۲ به‌تنهایی ۱۱۱۰ پیکسل است — مربی یک پنجرهٔ کوچک
   را روی یک فرمِ بلند می‌لغزاند و هیچ مرحله‌ای را کامل نمی‌بیند.

   قاعدهٔ «یک نما، بی اسکرول» روی دسکتاپ جواب می‌دهد چون آن‌جا ارتفاع هست.
   روی گوشی همان قاعده را فقط با پس‌گرفتنِ پوسته می‌شود نگه داشت:

   ① **سربرگ یک سطر می‌شود** (۱۰۰ → ۴۴). پنج مدالیون روی گوشی تزئین‌اند:
      نامشان از قبل پنهان بود، پس پنج دایرهٔ بی‌نام می‌ماند که هیچ‌کدام
      زدنی هم نیستند جز عقب‌گرد — کاری که دکمهٔ «قبلی»ِ فوتر می‌کند. جایشان
      همان چیزی می‌نشیند که مدالیون‌ها قرار بود بگویند: «مرحلهٔ ۳ از ۵» و
      نامِ مرحله. نوارِ پیشرفت از دست نمی‌رود؛ لبهٔ بالای فوتر از قبل
      همان را می‌کشد (`.wz-foot::after` با `--wz-pct`).

   ② **فوتر یک سطر می‌شود** (۱۶۶ → ۷۲). «قبلی» و «رد کردن» هرکدام یک سطرِ
      کاملِ تمام‌عرض گرفته بودند، هم‌وزنِ کنشِ اصلی. مربعِ ۵۲×۵۲ِ کنارِ
      دکمهٔ اصلی همان کار را می‌کند و ۹۴ پیکسل پس می‌دهد.

   ③ **جملهٔ خلاصه‌ی فوتر روی گوشی نوشته نمی‌شود.** «عضله‌سازی · ۴ هفته ·
      ۵ روز در هفته» بازخوانیِ کارت‌هایی است که همان لحظه روی صفحه
      انتخاب‌شده‌اند. روی دسکتاپ یک سطرِ خالیِ کنارِ دکمه‌هاست و هزینه‌ای
      ندارد؛ روی گوشی یک سطرِ کامل است.

   جمع: بدنه از ۵۱۳ به ~۶۶۳ می‌رسد (+۲۹٪).
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {

    /* ① سربرگ (بازطراحی ۲۵ سپتامبر ۲۰۲۶). نسخهٔ قبل یک سطرِ «نام … مرحلهٔ
       N از ۵» بود: نام و شمارنده دو سرِ خط، بی هیچ نشانه‌ای از *مسیر* — و
       چون `align-items: baseline` بود، متن به لبهٔ بالای سربرگ می‌چسبید.
       حالا سه چیز، خوانا از بالا به پایین:
         مدالیونِ مرحلهٔ جاری (همان آیکنِ ریلِ دسکتاپ)
         «مرحلهٔ N از ۵» ریز بالای نامِ درشتِ مرحله
         نوارِ پنج‌تکه زیرِ همه — تکه‌های طی‌شده پُر
       نوار همان `.wz-rail` است (پُرشدنش از `--wz-fill` می‌آید)؛ فقط به ته
       سربرگ می‌رود و با ماسک پنج تکه می‌شود. پرچم و نقطهٔ سرِ مسیر
       نمی‌آیند. ارتفاع ~۷۰ پیکسل؛ قبلاً ۴۵ + پدینگِ پرت. */
    .wz-head {
        padding: 10px 16px 12px;
        background: var(--paper);
    }
    .wz-steps { display: flex; flex-direction: column; gap: 10px; }
    .wz-steps .wz-rail {
        display: block;
        position: relative;
        order: 2;
        inset: auto;
        height: 5px;
        border-radius: 0;
        background: var(--wash-2);
        /* پنج تکهٔ هم‌عرض با فاصلهٔ ۴ پیکسلی. فاصله در *وسطِ* مرزِ دو کاشی
           است (دو پیکسل از هر طرف)، پس الگو در هر دو جهتِ نوشتن یکی است. */
        -webkit-mask: linear-gradient(90deg, transparent 2px, #000 2px, #000 calc(100% - 2px), transparent 0) 0 0 / calc(100% / var(--wz-cols, 5)) 100% repeat-x;
        mask: linear-gradient(90deg, transparent 2px, #000 2px, #000 calc(100% - 2px), transparent 0) 0 0 / calc(100% / var(--wz-cols, 5)) 100% repeat-x;
    }
    .wz-steps .wz-rail > i { border-radius: 0; }
    .wz-steps .wz-rail::after,
    .wz-steps .wz-rail > b { display: none; }

    .wz-step-list {
        display: flex;
        align-items: center;
        column-gap: 0;
        min-height: 0;
    }
    /* فقط مرحلهٔ جاری می‌ماند. `display: none` روی بقیه، نه `visibility`:
       جا هم نباید بگیرند. */
    .wz-step { display: none; }
    .wz-step.is-now { display: block; flex: 1 1 auto; min-width: 0; }

    .wz-step.is-now .wz-step-b {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "dot now" "dot name";
        align-items: center;
        column-gap: 12px;
        row-gap: 1px;
        text-align: start;
    }
    .wz-step.is-now .wz-step-dot {
        grid-area: dot;
        --wz-dot: 42px;
        transform: none;
        box-shadow: 0 0 0 3px var(--myo-brand-soft-2), 0 6px 14px rgb(0 119 204 / 18%);
    }
    .wz-step.is-now .wz-step-dot::before { inset: 0; }
    .wz-step-n { display: none; }

    /* بندِ ۶۴۰ بالاتر در فایل این نام را از جریان درمی‌آوَرد و ته ریل
       وسط‌چین می‌کند (و ۲۰ پیکسل پدینگ زیرِ فهرست می‌گذارد تا جایش بماند).
       هر دو باید صریح برگردانده شوند. */
    .myowz .wz-step-list { padding-block-end: 0; }
    .wz-step.is-now .wz-step-t {
        grid-area: name;
        position: static;
        inset: auto;
        display: block;
        max-width: none;
        margin: 0;
        overflow: hidden;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.35;
        color: var(--ink);
        text-align: start;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .wz-step.is-now .wz-step-now {
        grid-area: now;
        display: block;
        justify-self: start;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--acc-d);
    }
    .wz-step-now::after { display: none; }

    /* ② فوتر: یک سطر. بندهای ۶۴۰ بالاتر در فایل‌اند، پس این‌جا صریح
       بازنویسی می‌شوند. */
    .wz-foot {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }
    .wz-foot-act {
        flex-wrap: nowrap;
        width: 100%;
        gap: 8px;
    }
    .wz-foot-act > .wz-btn.is-go {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        height: 52px;
    }
    /* «قبلی» و «ادامه» کنارِ هم در یک ردیف، هر دو با متن. با رفتنِ
       «رد کردن» جا هست، پس دکمهٔ برگشت دیگر لازم نیست مربعِ بی‌نام باشد:
       یک‌سوم عرض برای «قبلی»/«انصراف» و باقی برای کنشِ اصلی. */
    .wz-foot-act > .wz-btn.is-ghost {
        flex: 0 1 auto;
        min-width: 0;
        height: 52px;
        padding-inline: 14px;
        justify-content: center;
        gap: 6px;
        font-size: 13.5px;
        white-space: nowrap;
    }
    .wz-foot-act > .wz-btn.is-ghost svg { width: 18px; height: 18px; flex: 0 0 auto; }

    /* ③ جملهٔ خلاصه نوشته نمی‌شود */
    .wz-foot-note { display: none; }

    /* ── ④ سه چیدمانِ خواسته‌شده (۲۳ سپتامبر ۲۰۲۶) ───────────────────
       بندِ ۹۰۰ بالاتر در فایل هر سه را تک‌ستونی/چپ‌چین کرده بود؛ در ۳۹۰
       پیکسل نتیجه‌اش فهرست‌های بلندِ کشیده بود. */

    /* «هدفِ دوره»: سه کارتِ راست‌چین (در انگلیسی چپ‌چین — `start`).
       آیکن در ابتدای سطر، و کنارش عنوان و زیرش توضیح — نه هر سه در یک خط.
       تیکِ انتخاب در انتهای سطر، وسطِ عمودیِ کارت. (۲۳ سپتامبر این کارت‌ها
       به خواستِ همان روز وسط‌چین شده بودند؛ ۲۵ سپتامبر برگشت.) */
    #wzPane1 .pgoal {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        grid-template-areas: "chip title" "chip sub";
        align-items: center;
        justify-items: start;
        column-gap: 14px;
        row-gap: 2px;
        min-height: 74px;
        padding: 12px 14px;
        padding-inline-end: 52px;
        text-align: start;
    }
    #wzPane1 .pgoal .opt-chip { grid-area: chip; width: 44px; height: 44px; }
    #wzPane1 .pgoal b { grid-area: title; align-self: end; font-size: 16px; }
    #wzPane1 .pgoal small { grid-area: sub; align-self: start; font-size: 12.5px; }
    #wzPane1 .pgoal::after { inset-block-start: calc(50% - 12px); inset-inline-end: 16px; }
    /* در ۳۶۰ پیکسل پیشنهادِ کنارِ عنوان («پیشنهادِ متناسب با پروفایلِ علی:
       عضله‌سازی») عنوانِ سؤال را به دو خطِ «هدفِ / دوره» می‌شکست. عنوان
       یک‌تکه می‌ماند و پیشنهاد اگر جا نشد به سطرِ بعد می‌رود. */
    .fr-q > h3 { flex-wrap: wrap; row-gap: 2px; }
    .fr-q > h3 > span:not(.pn-note) { white-space: nowrap; }

    /* «تمرکزِ عضلانی»: دو ستون. نُه عضله در نُه ردیفِ تمام‌عرض، نیمی از
       ارتفاعِ مرحله را می‌گرفت و انتخابِ «تا ۳ تا» را به اسکرول می‌بُرد. */
    .fo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

    /* «اجزای جلسه»: دو ستون. هر کاشی سه ستونِ ثابت دارد (تصویرک، نام،
       کلید) و در نصفِ عرض، سهمِ نام به ~۸۰ پیکسل می‌رسید و «سوپرستِ
       خودکار» سه‌نقطه می‌شد. تصویرک و کلید کمی جمع می‌شوند و نام اجازهٔ
       دو خط می‌گیرد — قدِ کاشی همان ۶۴ می‌ماند، پس هدفِ لمس دست‌نخورده
       است. */
    .scs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .sc { grid-template-columns: 26px minmax(0, 1fr) 36px; gap: 6px; padding-inline: 8px; }
    .sc > b {
        overflow: visible;
        font-size: 12px;
        line-height: 1.25;
        text-overflow: clip;
        white-space: normal;
    }
    /* خودِ SVG از قابش بزرگ‌تر است (۳۰ در ۳۲)، پس با قاب جمع می‌شود
       وگرنه بیرون می‌زند. */
    .sc-ic { width: 26px; height: 26px; }
    .sc-ic svg { width: 24px; height: 24px; }
    /* ۳۶ عرض با همان قلابِ ۱۸پیکسلی و همان `calc(100% - 20.5px)` دقیقاً
       جور در می‌آید (۱۵٫۵ + ۱۸ = ۳۳٫۵ = ۳۶ − ۲٫۵). */
    .sc-sw { width: 36px; }
}

/* ── گوشی: پنلِ «خودم انتخاب می‌کنم» زیرِ همان کارت ──────────────────────
   در دسکتاپ سه حالت کنارِ هم‌اند و پنل زیرِ هر سه — همه در یک نگاه. روی
   گوشی سه حالت زیرِ هم می‌روند و پنل *بعد از سومی* می‌آمد، معمولاً زیرِ
   لبهٔ صفحه: مربی «خودم انتخاب می‌کنم» را می‌زد و چیزی عوض نمی‌شد.

   حالا الگوی آکاردئون: `#ttModes` با `display: contents` کنار می‌رود تا
   سه دکمه و پنل فرزندانِ مستقیمِ ستونِ بخش شوند، و `order` پنل را درست
   زیرِ کارتِ «خودم انتخاب می‌کنم» می‌گذارد. کارت و پنل یک قاب می‌شوند
   (گوشه‌های چسبیده صاف، حاشیهٔ آبیِ مشترک) و شورونِ کارت می‌چرخد.
   `revealTechniquePanel()` هم کارت را به بالای قاب می‌برد. نشانه‌گذاری و
   ترتیبِ Tab دست نخورده‌اند. */
@media (max-width: 720px) {
    .tt-sec #ttModes { display: contents; }
    .tt-sec .tt-mode { flex: 0 0 auto; order: 2; scroll-margin-top: 10px; }
    .tt-sec .tt-mode[data-mode="pick"] { order: 3; }
    .tt-sec #ttPanel { order: 4; }
    .tt-sec .tt-mode[data-mode="none"] { order: 5; }

    .tt-open-ic {
        display: block;
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        margin-inline-start: auto;
        color: var(--muted);
        transition: transform .2s var(--ez), color .2s;
    }
    .tt-mode.is-on .tt-open-ic { transform: rotate(180deg); color: var(--acc); }

    .tt-mode[data-mode="pick"].is-on {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        border-block-end-color: var(--line);
        /* حاشیهٔ ۱٫۵ + سایهٔ درونیِ ۱ = همان ۲٫۵ پیکسلِ کارتِ انتخاب‌شده؛
           فقط لبهٔ پایین، که حالا درزِ کارت و پنل است، نازک می‌ماند. */
        box-shadow: inset 1px 0 0 var(--acc), inset -1px 0 0 var(--acc), inset 0 1px 0 var(--acc);
    }
    .tt-sec #ttPanel {
        margin-top: -8px;
        padding: 10px;
        gap: 8px;
        border: 1.5px solid var(--acc);
        border-top: 0;
        box-shadow: inset 1px 0 0 var(--acc), inset -1px 0 0 var(--acc), inset 0 -1px 0 var(--acc);
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        background: var(--wash);
        animation: ttpOpen .22s var(--ez);
    }
    .ttp-h > b { font-size: 13px; }
}
@keyframes ttpOpen { from { opacity: 0; transform: translateY(-8px); } }