/* ============================================================================
   dashboard.css — میزکارِ مربی (`#scrHome`)، بازطراحیِ پنجم، ۱۷ سپتامبر ۲۰۲۶.

   این بار از یک ماکاپِ مرجع (`reference-dashboard.png`، بستهٔ
   SITLAB-Coach-Dashboard-Assets-v1) پیاده شده، نه از صفر. وزنِ بصری از بالا
   به پایین کم می‌شود:

     ① سرصفحهٔ خوشامد + سه عدد
     ② دو کارتِ بزرگِ اقدام: برنامهٔ تمرینی، برنامهٔ غذایی — بیشترین وزن
     ③ ردیفِ مدیریت: دسترسیِ سریع ۵ ستون، پروفایل ۳.۵، شاگردها ۳.۵
     ④ پایین: برنامه‌های اخیر ۸ ستون، وضعیت + فعالیت ۴ ستون

   قواعدِ این فایل:
   - فقط `#scrHome` را می‌پوشاند. پیشوندِ کلاس‌ها `hm-` است. هر چیزی که
     صفحهٔ دومی لازمش شد به `myo-ds.css` می‌رود، نه این‌جا.
   - رنگ از توکن‌های `tokens.css` می‌آید. تنها استثنا خانوادهٔ **مرجانی**
     است که در پالتِ تولیدی نیست و فقط این صفحه لازمش دارد (کارتِ غذایی،
     وضعیتِ «نیازمندِ بازبینی» در نمودار). زیرِ `--hm-*` تعریف شده و برای
     دارک‌مود دو مقدار دارد. سفید روی `#ff7a59` فقط ۳:۱ است، پس پُرِ دکمه
     یک پلهٔ تیره‌تر (`--hm-coral-fill`) است و `#ff7a59` فقط تزیین و نمودار.
   - تصاویرِ سه‌بعدی متن ندارند و `pointer-events: none` دارند؛ همهٔ متن‌ها
     HTMLِ واقعی‌اند.
   - مختصاتِ گرادیان‌های افقی فیزیکی‌اند و برای LTR زیرِ `html[dir="ltr"]`
     وارونه می‌شوند؛ چیدمان با خواصِ منطقی نوشته شده و خودش برمی‌گردد.
   ============================================================================ */

#scrHome {
    --hm-coral:        #ff7a59;
    --hm-coral-fill:   #d64a1f;   /* سفید رویش ۴.۷:۱ */
    --hm-coral-ink:    #a83a12;
    --hm-coral-soft:   #fff0e9;
    --hm-coral-line:   #ffd4c4;
    --hm-cream:        #fff8f1;
    --hm-peach:        #ffe6d5;
    --hm-purple:       var(--myo-accent-icon);
    --hm-purple-soft:  var(--myo-accent-soft);
    --hm-gap:          16px;
    --hm-gap-sm:       12px;

    /* قدِ نمایشیِ کارت‌های اقدام. پیش‌تر ۳۰/۲۴/۲۲ در سه مدیا-کوئری تکرار
       می‌شد و بینِ پله‌ها می‌پرید؛ حالا یک منحنیِ پیوسته است. */
    --hm-fs-display:   clamp(22px, 1.2vw + 12.8px, 30px);

    /* دو کارتِ اقدام از همین سه شیر رنگ می‌گیرند تا شدتشان در روشن و تیره
       جدا تنظیم شود. در تیره `--myo-brand-200` به‌تنهایی یک آبیِ سیر است و
       کارت را از یک سطحِ ملایم به یک بلوکِ پررنگ تبدیل می‌کرد. */
    --hm-w-strong:     color-mix(in srgb, var(--myo-brand-200) 70%, var(--myo-brand-50));
    --hm-w-mid:        var(--myo-brand-50);
    --hm-w-glow:       color-mix(in srgb, var(--myo-brand-fill) 22%, transparent);
    --hm-n-strong:     var(--hm-peach);
    --hm-n-mid:        var(--hm-cream);
    --hm-n-glow:       color-mix(in srgb, var(--hm-coral) 18%, transparent);

    /* سایهٔ زیرِ تصویرهای سه‌بعدی: سرمه‌ایِ کم‌جان برای کاغذِ روشن. */
    --hm-art-shadow:   0 12px 22px rgba(15, 42, 67, .14);
    --hm-art-shadow-sm:0 8px 16px rgba(15, 42, 67, .10);
}
html[data-theme="dark"] #scrHome {
    --hm-coral:        #ff936f;
    --hm-coral-fill:   #ff8a66;   /* متنِ تیره رویش (`--myo-on-fill`) */
    --hm-coral-ink:    #ffb094;
    --hm-coral-soft:   #3b2820;
    --hm-coral-line:   #5a3a2c;
    --hm-cream:        #2a2420;
    --hm-peach:        #3a2c24;
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #scrHome {
        --hm-coral:        #ff936f;
        --hm-coral-fill:   #ff8a66;
        --hm-coral-ink:    #ffb094;
        --hm-coral-soft:   #3b2820;
        --hm-coral-line:   #5a3a2c;
        --hm-cream:        #2a2420;
        --hm-peach:        #3a2c24;
    }
}
/* شدتِ کارت‌های اقدام و سایهٔ تصویرها در تمِ تیره جدا تنظیم می‌شود. */
html[data-theme="dark"] #scrHome {
    --hm-w-strong:     color-mix(in srgb, var(--myo-brand-200) 42%, var(--myo-paper));
    --hm-w-mid:        color-mix(in srgb, var(--myo-brand-50) 55%, var(--myo-paper));
    --hm-w-glow:       color-mix(in srgb, var(--myo-brand-fill) 11%, transparent);
    --hm-n-strong:     color-mix(in srgb, var(--hm-peach) 62%, var(--myo-paper));
    --hm-n-mid:        color-mix(in srgb, var(--hm-cream) 55%, var(--myo-paper));
    --hm-n-glow:       color-mix(in srgb, var(--hm-coral) 9%, transparent);
    --hm-art-shadow:   0 14px 26px rgba(0, 0, 0, .46);
    --hm-art-shadow-sm:0 10px 18px rgba(0, 0, 0, .40);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #scrHome {
        --hm-w-strong:     color-mix(in srgb, var(--myo-brand-200) 42%, var(--myo-paper));
        --hm-w-mid:        color-mix(in srgb, var(--myo-brand-50) 55%, var(--myo-paper));
        --hm-w-glow:       color-mix(in srgb, var(--myo-brand-fill) 11%, transparent);
        --hm-n-strong:     color-mix(in srgb, var(--hm-peach) 62%, var(--myo-paper));
        --hm-n-mid:        color-mix(in srgb, var(--hm-cream) 55%, var(--myo-paper));
        --hm-n-glow:       color-mix(in srgb, var(--hm-coral) 9%, transparent);
        --hm-art-shadow:   0 14px 26px rgba(0, 0, 0, .46);
        --hm-art-shadow-sm:0 10px 18px rgba(0, 0, 0, .40);
    }
}

/* قابِ صفحه: ۱۵۸۴ به‌جای ۱۱۸۰ِ بقیهٔ صفحه‌ها — ماکاپ برای همین عرض کشیده شده. */
.sx-page.is-dash {
    width: min(100%, 1584px);
    padding: 16px 16px 56px;
    display: grid;
    gap: var(--hm-gap);
}

/* ── سطحِ مشترکِ کارت‌های این صفحه ───────────────────────────────────────
   شعاعِ ۲۰–۲۴، خطِ مویی، سایهٔ نرم. `--myo-el-card` همان دولایهٔ کم‌جانِ
   سیستم است. */
.hm-card {
    position: relative;
    background: var(--myo-paper);
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-2xl);
    box-shadow: var(--myo-el-card);
}

/* ══ ① سرصفحهٔ خوشامد ═══════════════════════════════════════════════════ */
.hm-hero {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 118px;
    padding: 22px 28px;
    border-radius: var(--myo-r-3xl);
    background: linear-gradient(90deg, var(--myo-paper) 0%, color-mix(in srgb, var(--myo-brand-50) 70%, var(--myo-paper)) 100%);
}
html[dir="ltr"] .hm-hero {
    background: linear-gradient(270deg, var(--myo-paper) 0%, color-mix(in srgb, var(--myo-brand-50) 70%, var(--myo-paper)) 100%);
}

/* موجِ خیلی کم‌رنگ پشتِ متن. فایلِ SVG رنگِ خودش را دارد (آبیِ روشن)، پس
   در تمِ تیره فقط کم‌رنگ‌تر می‌شود — روی زمینهٔ تیره همان آبیِ روشن یک
   هالهٔ ملایم است، نه یک لکه. */
/* موج تمامِ عرضِ سرصفحه را می‌گیرد: پیش‌تر ۶۲٪ بود و خطِ SVG درست وسطِ
   کارت قطع می‌شد — یک لبهٔ عمودیِ دیدنی. حالا دو سرش با ماسک محو می‌شود،
   پس نه بریدگی دارد و نه از پشتِ اعداد و متن رد می‌شود. ماسک قرینه است و
   برای RTL و LTR یکی کار می‌کند. کشیدنِ SVG (`100% 100%`) به‌جای حفظِ نسبت
   لازم است: با نسبتِ اصلی، در عرضِ ۱۵۵۰ موج ۲۹۰ پیکسل بلند می‌شد و فقط
   یک نوارِ صافِ ته‌اش دیده می‌شد. */
.hm-hero::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 78px;
    background: url("../images/dashboard/header-wave.svg") no-repeat bottom center / 100% 100%;
    opacity: .9;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 17%, #000 83%, transparent 100%);
    pointer-events: none;
}
html[data-theme="dark"] .hm-hero::before { opacity: .2; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .hm-hero::before { opacity: .2; } }

.hm-hero-txt { position: relative; min-width: 0; }
.hm-hero-txt h1 {
    font-size: var(--myo-fs-3xl);
    font-weight: 800;
    color: var(--myo-ink);
    letter-spacing: -.8px;
    line-height: 1.25;
}
.hm-hero-txt h1 .hm-wave { display: inline-block; margin-inline-start: 6px; }
.hm-hero-txt p {
    margin-top: 6px;
    font-size: var(--myo-fs-md);
    color: var(--myo-ink-muted);
}

/* سه عدد. هر کدام دکمه‌اند (عددِ بی‌مقصد تزیین است) و با خطِ مویی از هم
   جدا می‌شوند — نه با سه جعبه.

   هر عدد یک ستونِ وسط‌چین است: آیکن، عدد، برچسب — روی گوشی و دسکتاپ یک
   شکل. پیش‌تر آیکن کنارِ عدد بود و متن راست‌چین، و خطِ جداکننده
   `border-inline-start`ِ خودِ دکمه بود؛ دکمه گوشهٔ گرد دارد (برای
   هاورش)، پس خط در دو سرش خم می‌شد و یک «پرانتز» می‌ساخت. حالا خط یک
   شبه‌عنصرِ صاف است که از بالا و پایین فاصله می‌گیرد. */
.hm-stats { position: relative; display: flex; align-items: stretch; flex: none; }
.hm-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 116px;
    padding: 6px 20px;
    border-radius: var(--myo-r-lg);
    text-align: center;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.hm-stat + .hm-stat::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: 16px;
    width: 1px;
    background: var(--myo-line);
    pointer-events: none;
}
.hm-stat:hover { background: color-mix(in srgb, var(--myo-brand-icon) 9%, transparent); }
.hm-stat:hover::before, .hm-stat:hover + .hm-stat::before { opacity: 0; }
.hm-stat:focus-visible { outline: 0; box-shadow: var(--myo-ring); }
.hm-stat-ic {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 12%, var(--myo-paper));
    color: var(--c);
}
.hm-stat-ic svg { width: 19px; height: 19px; }
.hm-stat-ic + span { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hm-stat b {
    display: block;
    font-size: var(--myo-fs-2xl);
    font-weight: 800;
    color: var(--myo-ink);
    letter-spacing: -.6px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.hm-stat b + span { display: block; margin-top: 3px; font-size: var(--myo-fs-sm); color: var(--myo-ink-muted); white-space: nowrap; }
.hm-stat.is-review   { --c: var(--hm-coral); }
.hm-stat.is-plans    { --c: var(--myo-brand-icon); }
.hm-stat.is-athletes { --c: var(--myo-ok-icon); }
.hm-stat.is-review b { color: var(--hm-coral-ink); }

/* ══ ② دو اقدامِ اصلی ═══════════════════════════════════════════════════ */
.hm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hm-gap);
}

.hm-act {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: 256px;
    padding: 28px 32px;
    border-radius: var(--myo-r-3xl);
    text-align: start;
    transition: transform var(--myo-d-2) var(--myo-ez-in), box-shadow var(--myo-d-2) var(--myo-ez-in);
}
/* بلند شدن و نشانگرِ دست فقط برای کارتی که واقعاً جایی می‌رود. کارتِ غذایی
   پیش‌تر هم بلند می‌شد و هم تصویرش تکان می‌خورد، در حالی که کلیکش هیچ
   کاری نمی‌کرد — یک وعدهٔ دروغ. */
.hm-act.is-workout { cursor: pointer; }
.hm-act.is-workout:hover { transform: translateY(-2px); box-shadow: var(--myo-el-2); }
.hm-act.is-workout:hover .hm-act-img img { transform: translateY(-3px); }
.hm-act.is-workout:focus-within { box-shadow: var(--myo-el-2), var(--myo-ring); }

/* آبی: از سطحِ روشن سمتِ متن به آبیِ پررنگ‌تر سمتِ تصویر. متن تیره است
   (نه سفید روی آبی) — همان چیزی که ماکاپ نشان می‌دهد و خواناتر است. */
.hm-act.is-workout {
    border-color: var(--myo-brand-line);
    background:
        radial-gradient(60% 90% at 12% 50%, var(--hm-w-glow) 0, transparent 70%),
        linear-gradient(90deg, var(--hm-w-strong) 0%, var(--hm-w-mid) 55%, var(--myo-paper) 100%);
}
html[dir="ltr"] .hm-act.is-workout {
    background:
        radial-gradient(60% 90% at 88% 50%, var(--hm-w-glow) 0, transparent 70%),
        linear-gradient(270deg, var(--hm-w-strong) 0%, var(--hm-w-mid) 55%, var(--myo-paper) 100%);
}

/* غذایی: کرم → هلویی → مرجانیِ خیلی نرم. */
.hm-act.is-nutrition {
    border-color: var(--hm-coral-line);
    background:
        radial-gradient(60% 90% at 12% 50%, var(--hm-n-glow) 0, transparent 70%),
        linear-gradient(90deg, var(--hm-n-strong) 0%, var(--hm-n-mid) 55%, var(--myo-paper) 100%);
}
html[dir="ltr"] .hm-act.is-nutrition {
    background:
        radial-gradient(60% 90% at 88% 50%, var(--hm-n-glow) 0, transparent 70%),
        linear-gradient(270deg, var(--hm-n-strong) 0%, var(--hm-n-mid) 55%, var(--myo-paper) 100%);
}

/* ستونِ متن یک گرید با چهار سطرِ ثابت است: ابرو، عنوان، شرح (کشسان) و
   دکمه. با این کار دو کارتِ کنارِ هم حتی وقتی طولِ متنشان فرق دارد هم‌تراز
   می‌مانند — در انگلیسی عنوانِ یکی دو خطی می‌شد و دکمه‌ها ۲۳ پیکسل از هم
   می‌افتادند. سطرِ کشسان شرح را بالا نگه می‌دارد و دکمه را ته می‌چسباند. */
.hm-act-txt {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    align-content: stretch;
}
/* ابرو ارتفاعِ ثابت دارد چون نشانِ «به‌زودی» فقط در یکی از دو کارت هست. */
.hm-act-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    margin-bottom: 10px;
    font-size: var(--myo-fs-sm);
    font-weight: 600;
    color: var(--c);
}
.hm-act.is-workout   { --c: var(--myo-brand-ink); }
.hm-act.is-nutrition { --c: var(--hm-coral-ink); }
.hm-act h2 {
    font-size: var(--hm-fs-display);
    font-weight: 800;
    color: var(--myo-ink);
    letter-spacing: -.8px;
    line-height: 1.3;
    text-wrap: balance;
}
.hm-act p {
    margin-top: 8px;
    max-width: 34ch;
    font-size: var(--myo-fs-md);
    color: var(--myo-ink-2);
    line-height: 1.8;
    text-wrap: pretty;
}
.hm-act .sx-btn { align-self: end; justify-self: start; margin-top: 20px; height: 44px; padding-inline: 20px; font-size: var(--myo-fs-md); border-radius: var(--myo-r-lg); }
.hm-act .sx-btn svg { width: 16px; height: 16px; }

/* دکمهٔ مرجانی: نقشِ محلی. ساختارش همان `.sx-btn` است، فقط رنگ. */
.sx-btn.is-coral {
    border-color: var(--hm-coral-fill);
    background: var(--hm-coral-fill);
    color: var(--myo-on-fill);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--hm-coral-fill) 28%, transparent);
}
.sx-btn.is-coral:hover { border-color: var(--hm-coral-ink); background: var(--hm-coral-ink); color: var(--myo-on-fill); }
/* غیرفعال: به‌جای شفافیتِ عمومیِ `.sx-btn[disabled]` (که متن را به ۴.۳:۱
   می‌رساند) یک سطحِ نرم با متنِ پلهٔ ink — هم «خاموش» خوانده می‌شود، هم
   خوانا می‌ماند. */
.sx-btn.is-coral[disabled], .sx-btn.is-coral.is-disabled {
    opacity: 1;
    box-shadow: none;
    border-color: var(--hm-coral-line);
    background: var(--hm-coral-soft);
    color: var(--hm-coral-ink);
    cursor: not-allowed;
}

/* دو تصویر جعبهٔ یکسان دارند (۳۴۲×۲۲۸) ولی خودِ طرحِ غذایی بومش را لبه تا
   لبه پر می‌کند و طرحِ تمرینی حاشیهٔ سفید دارد؛ نتیجه این بود که کارتِ
   غذایی سنگین‌تر دیده می‌شد. `--hm-art` اندازهٔ نوری را برابر می‌کند. */
.hm-act-img {
    --hm-art: 1;
    position: relative;
    z-index: 0;
    align-self: center;
    min-height: 200px;
    display: grid;
    place-items: center;
    transform: scale(var(--hm-art));
    pointer-events: none;
}
.hm-act.is-nutrition .hm-act-img { --hm-art: .93; }
.hm-act-img img {
    width: 100%;
    max-height: 250px;
    height: auto;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(var(--hm-art-shadow));
    transition: transform var(--myo-d-3) var(--myo-ez);
}

/* «به‌زودی»: ویژگیِ غذایی هنوز موتور ندارد. دکمه غیرفعال است و نشانِ کوچک
   کنارِ عنوان می‌گوید چرا — نه یک لینکِ مرده. */
.hm-soon {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 22px;
    padding-inline: 9px;
    border-radius: var(--myo-r-pill);
    border: 1px solid var(--hm-coral-line);
    background: var(--hm-coral-soft);
    color: var(--hm-coral-ink);
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    letter-spacing: 0;
}

/* ══ ③ ردیفِ مدیریت ════════════════════════════════════════════════════ */
.hm-mgmt {
    display: grid;
    grid-template-columns: 5fr 3.5fr 3.5fr;
    gap: var(--hm-gap);
}

/* سه کارتِ این ردیف هم‌خانواده‌اند، پس باید یک ریتمِ عمودی داشته باشند:
   عنوان‌ها روی یک خط و لینک‌ها روی یک خط. پیش‌تر `align-items: center` بود
   و چون محتوای هر کارت قدِ متفاوتی داشت، سه عنوان روی ۵۳۵/۵۴۵/۵۵۴ می‌نشست
   و دو لینک ۹ پیکسل از هم می‌افتاد. حالا ستونِ متن یک گریدِ سه‌سطری است:
   سربرگ بالا، فاصلهٔ کشسان وسط، لینک ته. */
.hm-mg {
    overflow: hidden;
    display: grid;
    /* ستونِ متن کف دارد، ستونِ تصویر سقف: بلندترین عنوان («مدیریت پیج و
       پروفایل» ۱۴۷، «Athlete management» ۱۵۰) به‌علاوهٔ آیکن ۴۶ و فاصلهٔ ۱۲
       می‌شود ۲۰۸. با درصدِ ثابت، بینِ ۱۲۰۰ تا ۱۴۰۰ کم می‌آورد و عنوان دو
       خطی می‌شد؛ آن‌وقت سطرِ زیرِ عنوان در دو کارتِ ردیف از تراز می‌افتاد.
       حالا تصویر کوچک می‌شود، نه عنوان که می‌شکند. */
    grid-template-columns: minmax(212px, 1fr) minmax(0, 37%);
    align-items: stretch;
    min-height: 150px;
    padding: 18px 22px 20px;
}
.hm-mg-txt {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
}
.hm-mg-head { display: flex; align-items: center; gap: 12px; }
.hm-mg-ic {
    flex: none;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--myo-r-lg);
    background: color-mix(in srgb, var(--c) 12%, var(--myo-paper));
    color: var(--c);
}
.hm-mg-ic svg { width: 22px; height: 22px; }
.hm-mg.is-students { --c: var(--myo-ok-icon); }
.hm-mg.is-profile  { --c: var(--hm-purple); }
.hm-mg h2 { font-size: var(--myo-fs-lg); font-weight: 800; color: var(--myo-ink); line-height: 1.4; }
.hm-mg-val { display: block; margin-top: 3px; font-size: var(--myo-fs-base); color: var(--myo-ink-muted); }
.hm-mg-val b { color: var(--myo-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.hm-bar {
    position: relative;
    align-self: center;
    width: 100%;
    height: 6px;
    margin-block: 12px;
    border-radius: var(--myo-r-pill);
    background: var(--myo-surface-2);
    overflow: hidden;
}
/* نوار رنگِ همان کارت را می‌گیرد، نه سبزِ عمومی: «۸۰٪ تکمیل» پیشرفت است نه
   موفقیت، و دو رنگِ لهجه در یک کارتِ کوچک کارت را دوپاره می‌کرد. */
.hm-bar i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--w, 0%);
    border-radius: inherit;
    background: var(--c, var(--myo-ok-icon));
    transition: width var(--myo-d-4) var(--myo-ez);
}

.hm-link {
    display: inline-flex;
    align-self: end;
    justify-self: start;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    padding: 4px 2px;
    border-radius: var(--myo-r-sm);
    color: var(--myo-brand-ink);
    font-size: var(--myo-fs-base);
    font-weight: 700;
    cursor: pointer;
}
.hm-link svg { width: 14px; height: 14px; transition: transform var(--myo-d-2) var(--myo-ez); }
.hm-link:hover svg { transform: translateX(-3px); }
html[dir="ltr"] .hm-link svg { transform: scaleX(-1); }
html[dir="ltr"] .hm-link:hover svg { transform: scaleX(-1) translateX(-3px); }
.hm-link:focus-visible { outline: 0; box-shadow: var(--myo-ring); }

.hm-mg-img {
    --hm-art: 1;
    display: grid;
    place-items: center;
    align-self: center;
    transform: scale(var(--hm-art));
    pointer-events: none;
}
.hm-mg-img img {
    width: 100%;
    max-height: 120px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    opacity: .88;
    filter: drop-shadow(var(--hm-art-shadow-sm));
}
/* طرحِ شاگردان بومش را پرتر می‌کند، پس یک پله کوچک‌تر تا کنارِ طرحِ پروفایل
   هم‌اندازه دیده شود. شفافیتِ هر دو یکی است. */
.hm-mg.is-students .hm-mg-img { --hm-art: .94; }

/* دسترسیِ سریع: سه کاشیِ قابل‌کلیک. */
/* `line-height` صریح است تا عنوانِ این کارت با عنوانِ دو کارتِ دیگرِ ردیف
   (که ۱.۴ دارند) روی یک خط بنشیند. */
.hm-quick { display: grid; grid-template-rows: auto 1fr; padding: 18px 22px 20px; }
.hm-quick h2 { font-size: var(--myo-fs-lg); font-weight: 800; line-height: 1.4; color: var(--myo-ink); margin-bottom: 14px; }
.hm-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hm-gap-sm); align-items: stretch; }
/* کاشی دو سطر است، نه یک ردیفِ افقی: در عرضِ ۱۸۸ پیکسل، آیکن و برچسب و
   نشان و فلش کنارِ هم برای برچسب حدودِ ۴۰ پیکسل باقی می‌گذاشتند و
   «برنامه‌های غذایی» را وسطِ واژه می‌شکستند. حالا سطرِ بالا آیکن است و
   سطرِ پایین برچسب و فلش؛ نشان مطلق است و از عرضِ برچسب نمی‌خورد. پس هر
   سه کاشی یک شکل‌اند و برچسب تا ۱۲۸۰ هم یک‌خطی می‌ماند. */
.hm-q {
    --c: var(--myo-brand-icon);
    position: relative;
    display: grid;
    grid-template-areas:
        "ic  ic"
        "txt chev";
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 8px;
    min-height: 74px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--myo-r-xl);
    background: color-mix(in srgb, var(--c) 7%, var(--myo-paper));
    text-align: start;
    cursor: pointer;
    transition: transform var(--myo-d-2) var(--myo-ez-in), border-color var(--myo-d-2) var(--myo-ez-in), background var(--myo-d-2) var(--myo-ez-in);
}
.hm-q:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 11%, var(--myo-paper)); }
.hm-q:focus-visible { outline: 0; box-shadow: var(--myo-ring); }
.hm-q.is-add   { --c: var(--myo-ok-icon); }
.hm-q.is-plans { --c: var(--myo-brand-icon); }
.hm-q.is-meals { --c: var(--hm-coral); }
.hm-q-ic {
    grid-area: ic;
    justify-self: start;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) 16%, var(--myo-paper));
    color: var(--c);
}
.hm-q-ic svg { width: 20px; height: 20px; }
/* سه کاشی باید یک آناتومی داشته باشند: آیکن، برچسب، نشان، فلش. پیش‌تر
   `flex-wrap` نشان را به سطرِ دوم می‌انداخت، پس برچسبِ هر کاشی در ارتفاعِ
   دیگری می‌نشست (۶۰۹/۵۸۷/۵۹۶) و سه کاشیِ هم‌اندازه سه‌جور دیده می‌شدند.
   حالا نشان همیشه کنارِ برچسب است و بلوکِ متن در کاشی وسط‌چین می‌ماند؛
   برچسب اگر لازم شد خودش دو خط می‌شود. */
/* برچسب از بالای سطرِ دوم شروع می‌شود، پس چه یک‌خطی باشد چه دوخطی، هر سه
   کاشی برچسبشان روی یک خط می‌نشیند. */
.hm-q-txt { grid-area: txt; min-width: 0; align-self: start; }
/* جعبهٔ برچسب همیشه دو خط است، چه متن یک‌خطی باشد چه دوخطی: سه کاشیِ
   هم‌اندازه باید سه بلوکِ هم‌اندازه داشته باشند، وگرنه در فارسی و انگلیسی
   هر کدام یک‌جور دیده می‌شوند. متنِ یک‌خطی داخلِ همین جعبه وسط می‌نشیند. */
.hm-q b {
    display: block;
    min-width: 0;
    font-size: var(--myo-fs-base);
    font-weight: 700;
    color: var(--myo-ink);
    line-height: 1.45;
}
/* متنِ نشان پلهٔ `-ink` می‌گیرد نه `--c` (پلهٔ آیکن): «۵۰» با پلهٔ ۵۰۰ روی
   کاغذ ۳.۴:۱ بود. قرص و آیکن همان `--c` می‌مانند. */
.hm-q-badge {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 14px;
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 22px;
    padding-inline: 7px;
    border-radius: var(--myo-r-pill);
    border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
    background: var(--myo-paper);
    color: var(--myo-brand-ink);
    font-size: var(--myo-fs-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.hm-q.is-add   .hm-q-badge { color: var(--myo-ok-ink); }
.hm-q.is-meals .hm-q-badge { color: var(--hm-coral-ink); }
.hm-q > svg { grid-area: chev; justify-self: end; align-self: end; width: 14px; height: 14px; color: var(--myo-ink-faint); transition: transform var(--myo-d-2) var(--myo-ez); }
.hm-q:hover > svg { transform: translateX(-3px); color: var(--c); }
html[dir="ltr"] .hm-q > svg { transform: scaleX(-1); }
html[dir="ltr"] .hm-q:hover > svg { transform: scaleX(-1) translateX(-3px); }
.hm-q.is-soon { cursor: default; }
.hm-q.is-soon:hover { transform: none; border-color: transparent; background: color-mix(in srgb, var(--c) 7%, var(--myo-paper)); }
.hm-q.is-soon .hm-q-badge { background: var(--hm-coral-soft); border-color: var(--hm-coral-line); font-weight: 700; }

/* ══ ④ پایین ═══════════════════════════════════════════════════════════ */
/* `align-items: start` ته صفحه را دندانه‌دار می‌کرد: ستونِ چپ ۷۶ پیکسل
   بلندتر از ستونِ راست تمام می‌شد. حالا هر دو ستون کشیده می‌شوند و
   کارتِ «فعالیت امروز» فاصلهٔ اضافه را می‌بلعد. */
.hm-bottom {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: var(--hm-gap);
    align-items: stretch;
}
.hm-side { display: grid; grid-template-rows: auto 1fr; gap: var(--hm-gap); }

.hm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 12px;
}
.hm-card-head h2 { font-size: var(--myo-fs-lg); font-weight: 800; color: var(--myo-ink); }
.hm-card-head .hm-link { margin-top: 0; }
.hm-card-body { padding: 0 22px 20px; }

/* ── برنامه‌های اخیر: سه ردیف، بی‌جدول ────────────────────────────────── */
.hm-recent { display: grid; gap: 4px; }
.hm-rc-head, .hm-rc {
    display: grid;
    grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 120px 118px 36px;
    align-items: center;
    gap: 14px;
}
.hm-rc-head {
    padding: 8px 14px;
    border-radius: var(--myo-r-md);
    background: var(--myo-surface);
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    color: var(--myo-ink-faint);
    letter-spacing: .02em;
}
.hm-rc {
    padding: 10px 14px;
    border-radius: var(--myo-r-lg);
    border-bottom: 1px solid var(--myo-line);
    cursor: pointer;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.hm-rc:last-child { border-bottom: 0; }
.hm-rc:hover { background: var(--myo-brand-soft); }
.hm-rc:focus-visible { outline: 0; box-shadow: var(--myo-ring); }

.hm-rc-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hm-av {
    position: relative;
    flex: none;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c, var(--myo-brand-icon)) 14%, var(--myo-paper));
    color: var(--c, var(--myo-brand-ink));
    font-size: var(--myo-fs-md);
    font-weight: 800;
}
.hm-av img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
/* نقطهٔ وضعیتِ شاگرد روی گوشهٔ آواتار: سبز فعال، خاکستری غیرفعال. */
.hm-av::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid var(--myo-paper);
    background: var(--myo-ink-disabled);
}
.hm-av.is-active::after { background: var(--myo-ok-icon); }
.hm-av.is-none::after { display: none; }
.hm-rc-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--myo-fs-md);
    font-weight: 700;
    color: var(--myo-ink);
    text-align: start;
    border-bottom: 1px solid transparent;
}
button.hm-rc-name:hover { color: var(--myo-brand-ink); border-bottom-color: var(--myo-brand); }
.hm-rc-plan { min-width: 0; }
.hm-rc-plan b { display: block; font-size: var(--myo-fs-md); font-weight: 700; color: var(--myo-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-rc-plan span { display: block; margin-top: 2px; font-size: var(--myo-fs-sm); color: var(--myo-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-rc-when { font-size: var(--myo-fs-sm); color: var(--myo-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-rc-more { display: grid; justify-items: end; }

/* قرصِ وضعیت. سبز/آبی/مرجانی — قاعدهٔ ماکاپ. `is-draft` عمداً آبیِ برند
   است نه خنثی، برخلافِ `.sx-badge` در بقیهٔ اپ. */
/* `justify-self` لازم است: قرص مستقیماً خانهٔ گرید است و بدونِ آن تا تهِ
   ستونِ ۱۲۰ پیکسلی کش می‌آمد و به‌جای یک قرص، یک نوار دیده می‌شد. */
.hm-pill {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding-inline: 11px;
    border-radius: var(--myo-r-pill);
    background: var(--myo-surface-2);
    color: var(--myo-ink-muted);
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    white-space: nowrap;
}
.hm-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hm-pill.is-active { background: var(--myo-ok-soft);    color: var(--myo-ok); }
.hm-pill.is-draft  { background: var(--myo-brand-soft-2); color: var(--myo-brand-ink); }
.hm-pill.is-review { background: var(--hm-coral-soft);  color: var(--hm-coral-ink); }
.hm-pill.is-active i { background: var(--myo-ok-icon); }
.hm-pill.is-draft  i { background: var(--myo-brand-icon); }
.hm-pill.is-review i { background: var(--hm-coral); }

.hm-empty { padding: 26px 8px; text-align: center; }
.hm-empty .sx-empty { padding: 0; }

/* ── وضعیتِ برنامه‌ها: دونات ─────────────────────────────────────────── */
.hm-mix { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 16px; align-items: center; }
.hm-legend { display: grid; gap: 10px; }
.hm-legend-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; font-size: var(--myo-fs-base); }
.hm-legend-row i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.hm-legend-row span { color: var(--myo-ink-2); }
.hm-legend-row b { color: var(--myo-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
/* سطرِ صفر کم‌رنگ می‌شود ولی نه با شفافیت: `opacity: .45` متن را به حدودِ
   ۲.۸:۱ می‌برد. پلهٔ `ink-faint` هم کم‌رنگ است هم خوانا. */
.hm-legend-row.is-zero i { opacity: .45; }
.hm-legend-row.is-zero span,
.hm-legend-row.is-zero b { color: var(--myo-ink-faint); }

.hm-donut {
    position: relative;
    width: 132px; height: 132px;
    border-radius: 50%;
    background: var(--pie, conic-gradient(var(--myo-surface-2) 0 100%));
}
/* حلقه: یک دایرهٔ کاغذی وسط. ضخامتِ حلقه ۱۸ پیکسل. */
.hm-donut::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: var(--myo-paper);
}
.hm-donut-c {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
}
.hm-donut-c b { display: block; font-size: var(--myo-fs-2xl); font-weight: 800; color: var(--myo-ink); letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-donut-c span { display: block; font-size: var(--myo-fs-xs); color: var(--myo-ink-muted); }

/* ── نزدیکِ تمدید ─────────────────────────────────────────────────────
   همان زبانِ «فعالیتِ امروز»: ردیفِ کلیک‌شدنی با یک نوارِ رنگی که پله را
   می‌گوید (آبی: هنوز وقت هست، نارنجی: هفتهٔ آخر، قرمز: گذشته). رنگ از
   `--c` می‌آید که home.js می‌گذارد.

   آواتار `is-none` می‌گیرد: نقطهٔ گوشه‌اش وضعیتِ *شاگرد* را ادعا می‌کند و
   این کارت دربارهٔ وضعیتِ شاگرد چیزی نمی‌داند. */
.hm-av-sm { width: 30px; height: 30px; font-size: var(--myo-fs-sm); }
.hm-rn-list { display: grid; gap: 8px; }
.hm-rn-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--myo-r-md);
    border-inline-start: 3px solid var(--c, var(--myo-brand-icon));
    background: var(--myo-surface);
    text-align: start;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.hm-rn-row:hover { background: var(--myo-surface-2); }
.hm-rn-row:focus-visible { outline: 0; box-shadow: var(--myo-ring); }
.hm-rn-who { min-width: 0; display: grid; }
.hm-rn-who b {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--myo-fs-sm); font-weight: 700; color: var(--myo-ink);
}
.hm-rn-who span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--myo-fs-xs); color: var(--myo-ink-faint);
}
.hm-rn-when { display: grid; justify-items: end; text-align: end; }
.hm-rn-when b { font-size: var(--myo-fs-xs); font-weight: 800; color: var(--tc, var(--myo-brand-ink)); white-space: nowrap; }
.hm-rn-when time { font-size: var(--myo-fs-xs); color: var(--myo-ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── فعالیتِ امروز ───────────────────────────────────────────────────── */
.hm-card-head .hm-flash { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--myo-r-md); background: var(--myo-brand-soft); color: var(--myo-brand-icon); }
.hm-card-head .hm-flash svg { width: 16px; height: 16px; }
.hm-act-list { display: grid; gap: 10px; }
.hm-act-row {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-radius: var(--myo-r-md);
    text-align: start;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.hm-act-row:hover { background: var(--myo-surface); }
.hm-act-row:focus-visible { outline: 0; box-shadow: var(--myo-ring); }
.hm-act-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--myo-brand-icon)); }
.hm-act-row span { font-size: var(--myo-fs-base); color: var(--myo-ink-2); line-height: 1.6; }
.hm-act-row time { font-size: var(--myo-fs-sm); color: var(--myo-ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-act-note { margin: 0 0 8px; font-size: var(--myo-fs-sm); color: var(--myo-ink-faint); }
.hm-blank { font-size: var(--myo-fs-sm); color: var(--myo-ink-faint); line-height: 1.8; }

/* ══ واکنش‌گرایی ═══════════════════════════════════════════════════════ */

/* ۷۶۸–۱۱۹۹: اقدام‌ها دو ستون می‌مانند؛ ردیفِ مدیریت دو ردیف؛ پایین ۷/۵. */
@media (max-width: 1199px) {
    .hm-hero { padding: 20px 22px; }
    .hm-stat { min-width: 100px; padding-inline: 12px; }
    .hm-stat-ic { width: 36px; height: 36px; }
    .hm-act { padding: 22px 22px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .hm-act-img img { max-height: 200px; }
    .hm-mgmt { grid-template-columns: 1fr 1fr; }
    .hm-mgmt > .hm-quick { grid-column: 1 / -1; }
    /* جدولِ برنامه‌های اخیر پنج ستون دارد و در ۷/۱۲ِ عرضِ زیرِ ۱۲۰۰ کم
       می‌آورد: ستونِ «عنوان برنامه» به ۴۰ پیکسل می‌رسید و سرستون‌ها روی هم
       می‌افتادند. پس این‌جا جدول تمامِ عرض را می‌گیرد و دو کارتِ کناری
       زیرش کنارِ هم می‌نشینند. */
    .hm-bottom { grid-template-columns: 1fr; }
    .hm-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .hm-rc-head, .hm-rc { grid-template-columns: minmax(130px, 1fr) minmax(0, 1.6fr) 110px 100px 32px; gap: 10px; }
}

/* زیرِ ۷۶۸: یک ستون. تصویرِ اقدام زیرِ متن (بیشینه ۱۸۰). ردیف‌های
   برنامه کارت می‌شوند. */
@media (max-width: 767px) {
    .sx-page.is-dash { padding: 12px 12px 48px; gap: 12px; }
    .hm-hero { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
    .hm-hero::before { display: none; }
    .hm-hero-txt h1 { font-size: var(--myo-fs-2xl); }
    .hm-hero-txt { text-align: center; }
    .hm-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 12px;
        border-top: 1px solid var(--myo-line);
    }
    .hm-stat { min-width: 0; gap: 6px; padding: 8px 4px; }
    .hm-stat + .hm-stat::before { inset-block: 10px; }
    .hm-stat-ic { width: 38px; height: 38px; }
    .hm-stat b { font-size: var(--myo-fs-xl); }
    .hm-stat b + span { white-space: normal; line-height: 1.4; }
    .hm-actions { grid-template-columns: 1fr; }
    .hm-act { grid-template-columns: 1fr; padding: 0; min-height: 0; }
    .hm-mgmt { grid-template-columns: 1fr; }
    .hm-quick-grid { grid-template-columns: 1fr; }
    /* در یک ستون عرض کم نیست، پس کاشی به همان ردیفِ افقی برمی‌گردد و نشان
       دوباره در جریانِ گرید می‌نشیند. */
    .hm-q {
        grid-template-areas: "ic txt badge chev";
        grid-template-columns: auto 1fr auto auto;
        min-height: 60px;
    }
    .hm-q-badge { position: static; grid-area: badge; }
    /* در یک سطر، `start`/`end`ِ نسخهٔ دو-سطری باید برداشته شود. */
    .hm-q-txt, .hm-q > svg { align-self: center; }
    .hm-mg { grid-template-columns: 1fr 34%; padding: 16px; min-height: 0; }
    .hm-mg-img img { max-height: 90px; }
    .hm-side { grid-template-columns: 1fr; }
    .hm-card-head { padding: 16px 16px 10px; }
    .hm-card-body { padding: 0 16px 16px; }
    .hm-rc-head { display: none; }
    .hm-rc {
        grid-template-columns: minmax(0, 1fr) 32px;
        grid-template-areas: "who more" "plan plan" "meta meta";
        gap: 8px 10px;
        padding: 12px;
        border: 1px solid var(--myo-line);
        border-radius: var(--myo-r-xl);
        margin-bottom: 8px;
    }
    .hm-rc:last-child { border-bottom: 1px solid var(--myo-line); }
    .hm-rc-who { grid-area: who; }
    .hm-rc-plan { grid-area: plan; }
    .hm-rc-more { grid-area: more; }
    .hm-rc .hm-pill { grid-area: meta; justify-self: start; }
    .hm-rc-when { grid-area: meta; justify-self: end; align-self: center; }
    .hm-mix { grid-template-columns: minmax(0, 1fr) 112px; }
    .hm-donut { width: 112px; height: 112px; }
    .hm-donut::before { inset: 15px; }

    /* ── هدف‌های لمسِ میزکار ──────────────────────────────────────────
       سه لینکِ «همه را ببین» در سرِ کارت‌ها، نامِ شاگرد در ردیفِ برنامهٔ
       اخیر، و منوی سه‌نقطه‌اش. هر سه زیرِ ۳۰ پیکسل ارتفاع داشتند — یعنی
       روی گوشی نیمی از زدن‌ها به جای خالیِ کنارشان می‌خورد. */
    .hm-link { min-height: 40px; padding-inline: 10px; margin-inline-end: -10px; }
    .hm-rc-name { min-height: 36px; }
    .hm-rc-more .sx-tool { width: 38px; height: 38px; }

    /* عنوانِ برنامه در «برنامه‌های اخیر» و در «وضعیتِ برنامه‌ها» هر دو
       یک‌خطی بودند و «برنامهٔ افزایش حجم | تفکیکی چهارروزه | ۴ روز…» به
       سه‌نقطه می‌رسید. دو خط: در کارتِ تمام‌عرضِ گوشی جا هست. */
    .hm-rc-plan b,
    .hm-rc-plan span,
    .hm-rn-who b,
    .hm-rn-who span {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* سه عدد در یک ردیفِ ۳۹۰پیکسلی: «نیازمند بازبینی» دو خط می‌شود، پس
       `nowrap`ِ قاعدهٔ عمومی باید برداشته شود — که بالاتر شده — ولی
       هم‌ترازیِ سه ستون هم باید از بالا باشد وگرنه دو عددِ کوتاه وسط
       می‌افتند. */
    .hm-stats { align-items: stretch; }
    .hm-stat { justify-content: flex-start; }
}

/* ══ گوشی: دو کارتِ اقدام ═══════════════════════════════════════════════════
   دو کارت یک شکل‌اند: تصویر بالا، زیرش ستونِ وسط‌چینِ ابرو / عنوان / شرح،
   و دکمهٔ تمام‌عرض ته کارت — جایی که شست می‌رسد.

   پیش‌تر (۲۳ سپتامبر) کارتِ غذایی روی گوشی به یک نوارِ یک‌سطری جمع شده
   بود تا جا بگیرد. شهاب خواست برگردد: «به‌زودی» خبرِ یک محصول است و
   نواری که هم‌وزنِ ردیف‌های «دسترسی سریع» است آن را گم می‌کرد. پس کارت
   کامل است، فقط تصویرش کمی کوتاه‌تر از تمرین (کنشِ اصلی همان است) و
   دکمه‌اش غیرفعال با نشانِ «به‌زودی» کنارِ ابرو.

   پس‌زمینه عمودی می‌شود: گرادیانِ افقیِ دسکتاپ برای کارتی است که متن و
   تصویر *کنارِ* هم دارند؛ این‌جا رنگِ پررنگ پشتِ تصویر (بالا) است و به
   سطحِ روشن زیرِ متن می‌رسد. */
@media (max-width: 767px) {
    .hm-act { display: flex; flex-direction: column; text-align: center; }
    .hm-act.is-workout, html[dir="ltr"] .hm-act.is-workout {
        background: linear-gradient(180deg, var(--hm-w-strong) 0%, var(--hm-w-mid) 48%, var(--myo-paper) 100%);
    }
    .hm-act.is-nutrition, html[dir="ltr"] .hm-act.is-nutrition {
        background: linear-gradient(180deg, var(--hm-n-strong) 0%, var(--hm-n-mid) 48%, var(--myo-paper) 100%);
    }

    .hm-act-img {
        order: -1;
        min-height: 0;
        padding: 18px 24px 0;
        transform: none;
    }
    .hm-act-img img { width: auto; max-width: 100%; max-height: 150px; }
    .hm-act.is-nutrition .hm-act-img img { max-height: 136px; }

    .hm-act-txt {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 14px 18px 18px;
    }
    .hm-act-eyebrow { justify-content: center; flex-wrap: wrap; min-height: 0; margin-bottom: 6px; }
    .hm-act h2 { font-size: var(--myo-fs-2xl); line-height: 1.35; }
    .hm-act p { max-width: 38ch; margin-top: 6px; font-size: var(--myo-fs-base); line-height: 1.75; text-wrap: balance; }
    .hm-act .sx-btn {
        align-self: stretch;
        justify-content: center;
        gap: 8px;
        height: 48px;
        margin-top: 16px;
    }
    /* شورون ته دکمه را به لبه می‌برد و متن را از وسط می‌اندازد. */
    .hm-act .sx-btn .hm-chev { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-act, .hm-q, .hm-stat, .hm-link svg, .hm-q > svg, .hm-act-img img, .hm-bar i { transition: none; }
    .hm-act.is-workout:hover, .hm-q:hover { transform: none; }
    /* مقیاسِ طرح حفظ می‌شود؛ فقط بلند شدنِ زیرِ نشانگر می‌رود. */
    .hm-act.is-workout:hover .hm-act-img img { transform: none; }
    .hm-link:hover svg, .hm-q:hover > svg { transform: none; }
    html[dir="ltr"] .hm-link:hover svg, html[dir="ltr"] .hm-q:hover > svg { transform: scaleX(-1); }
}

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

   شرط سه‌تایی است و عمداً: `pointer: coarse` یعنی انگشت، و `max-height`
   یعنی گوشی — تبلت در حالتِ افقی دست‌کم ۷۶۸ پیکسل قد دارد و از این بند
   بیرون می‌ماند. (بندِ بی‌قیدِ ارتفاع، بودجهٔ ارتفاعِ تبلت را می‌شکند —
   همان دلیلی که بندِ `myo-ds.css` کوچک نگه داشته شده.)

   فقط کفِ هدفِ لمس این‌جاست، نه چیدمان: در ۸۴۴ پیکسلِ عرض، ستون‌ها باید
   همان ستون‌های عریض بمانند.
   ───────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) and (max-height: 520px) {
    .hm-link { min-height: 40px; padding-inline: 10px; }
    .hm-rc-name { min-height: 36px; }
    .hm-rc-more .sx-tool { width: 38px; height: 38px; }
}