/* ============================================================================
   myo-app.css — چیدمانِ صفحه‌ها. روی `myo-ds.css` می‌نشیند و فقط چیزی را
   می‌گوید که مالِ *یک* صفحه است؛ هر چیزی که دو صفحه لازمش دارند باید به
   سیستمِ طراحی برود، نه این‌جا.

   صفحه‌ها: خوش‌آمد، میزکار، شاگردها، برنامه‌ها، ساختِ برنامه (لودینگ)،
   به‌علاوهٔ سه سطحِ شناور که به `body` می‌چسبند: پالتِ فرمان، کشوی بانکِ
   حرکات، و پوستر.

   قاعدهٔ رنگ در این فایل: رنگ فقط وقتی مجاز است که *معنا* داشته باشد —
   وضعیتِ برنامه، هشدارِ کیفیت، فازِ جلسه. «تزیین» رنگ نمی‌گیرد.
   ============================================================================ */

/* صفحهٔ خوش‌آمدِ درون‌اپ حذف شد (۱۷ سپتامبر ۲۰۲۶): ورود و ثبت‌نام
   صفحه‌های سایتِ عمومی‌اند و بدونِ نشست main.js به `/login` می‌فرستد. */

/* ══ میزکار ════════════════════════════════════════════════════════════════
   به `dashboard.css` رفت (بازطراحیِ پنجم، ۱۷ سپتامبر ۲۰۲۶). این‌جا هیچ
   قاعده‌ای برای `#scrHome` نمانده؛ اگر چیزی لازم شد، آن‌جا. */

/* ══ شاگردها ═══════════════════════════════════════════════════════════════
   فهرست در سمتِ راست، پروندهٔ شاگردِ انتخاب‌شده در سمتِ چپ. */

.sx-split {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}

.sx-split-list { position: sticky; top: calc(var(--sx-topbar-h) + 20px); }

/* ابزارهای بالای فهرست در یک ستونِ ۳۸۰ پیکسلی جا نمی‌شدند و کلیدِ
   وضعیت از کارت بیرون می‌زد روی پنلِ پرونده. حالا دو سطر است. */
.sx-list-tools {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-bottom: 1px solid var(--myo-line);
}
.sx-list-tools .sx-field { width: 100%; }
.sx-list-tools .sx-seg { display: flex; }
.sx-list-tools .sx-seg button { flex: 1; }

.sx-list-scroll { max-height: min(60vh, 560px); overflow: auto; }

.sx-count-line {
    padding: 9px 18px;
    border-bottom: 1px solid var(--myo-line);
    background: var(--myo-surface);
    font-size: var(--myo-fs-sm);
    color: var(--myo-ink-muted);
}
.sx-count-line b { color: var(--myo-ink); font-variant-numeric: tabular-nums; }

/* پروندهٔ شاگرد */
.sx-profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-bottom: 1px solid var(--myo-line);
}
.sx-profile-head .sx-av { width: 48px; height: 48px; font-size: var(--myo-fs-md); border-radius: var(--myo-r-md); }
.sx-profile-id { flex: 1; min-width: 0; }
.sx-profile-id h2 { font-size: var(--myo-fs-lg); font-weight: 800; color: var(--myo-ink); letter-spacing: -.3px; }
.sx-profile-id span { font-size: var(--myo-fs-base); color: var(--myo-ink-muted); }

.sx-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--myo-line);
}

/* جدولِ مشخصات: دو ستونِ برچسب/مقدار، بی‌جعبه */
.sx-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 24px;
}
.sx-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--myo-line);
}
.sx-facts dt { font-size: var(--myo-fs-sm); color: var(--myo-ink-muted); white-space: nowrap; }
.sx-facts dd { font-size: var(--myo-fs-base); font-weight: 700; color: var(--myo-ink); text-align: end; }

.sx-detail-block { padding: 18px 20px; border-bottom: 1px solid var(--myo-line); }
.sx-detail-block:last-child { border-bottom: 0; }
.sx-detail-block > h3 {
    margin-bottom: 10px;
    font-size: var(--myo-fs-sm);
    font-weight: 700;
    color: var(--myo-ink-faint);
}

.sx-detail-cols { display: grid; grid-template-columns: 1fr 1fr; }
.sx-detail-cols > .sx-detail-block { border-bottom: 0; }
.sx-detail-cols > .sx-detail-block:first-child { border-inline-end: 1px solid var(--myo-line); }

/* محدودیتِ پزشکی: تنها جایی در این صفحه که رنگ می‌گیرد */
.sx-condition {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--myo-r-pill);
    background: var(--myo-warn-soft);
    color: var(--myo-warn);
    font-size: var(--myo-fs-sm);
    font-weight: 600;
}
.sx-condition.is-blocking { background: var(--myo-danger-soft); color: var(--myo-danger); }
/* ══ برنامه‌ها ═════════════════════════════════════════════════════════════
   صفحهٔ «برنامه‌ها» شیتِ خودش را دارد (`plans-list.css`): فهرست دیگر روی
   `sx-row` سوار نیست و سطرش یک گریدِ پنج‌ستونیِ اختصاصی است. آنچه این‌جا
   بود (`sx-plans-tools`, `sx-plan-row/mark/athlete/dpw`, `sx-row-tools`)
   با آن بازطراحی مرد و برداشته شد. `sx-tool` و `sx-pop` ماندند — فهرستِ
   تازه هم از همان‌ها استفاده می‌کند و صفحهٔ شاگردها هم.
   ══════════════════════════════════════════════════════════════════════════ */

.sx-tool {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: var(--myo-r-sm);
    color: var(--myo-ink-disabled);
    transition: background var(--myo-d-1) var(--myo-ez-in), color var(--myo-d-1) var(--myo-ez-in);
}
/* روی لمس، هم در عرضِ کم و هم در گوشیِ چرخیده: سی پیکسل هدفِ انگشت نیست.
   قاعدهٔ خواهرش برای بقیهٔ کنترل‌ها در myo-ds.css است؛ این یکی این‌جاست
   چون خودِ `.sx-tool` این‌جا تعریف شده و این فایل دیرتر بار می‌شود. */
@media (hover: none) and (pointer: coarse) {
    .sx-tool { width: 44px; height: 44px; }
}

.sx-tool svg { width: 15px; height: 15px; }
.sx-tool:hover { background: var(--myo-surface-2); color: var(--myo-ink); }

/* منوی «بیشتر» روی ردیف */
.sx-pop { position: relative; }

.sx-pop-menu {
    position: absolute;
    inset-block-start: calc(100% + 4px);
    inset-inline-end: 0;
    z-index: 20;
    width: 210px;
    padding: 5px;
    background: var(--myo-paper);
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-md);
    box-shadow: var(--myo-el-2);
    display: none;
}
.sx-pop-menu.on { display: block; }
.sx-pop-menu button {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--myo-r-sm);
    color: var(--myo-ink-2);
    font-size: var(--myo-fs-base);
    font-weight: 600;
    text-align: start;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.sx-pop-menu button:hover { background: var(--myo-surface); }
.sx-pop-menu button.is-danger { color: var(--myo-danger); }
.sx-pop-menu button.is-danger:hover { background: var(--myo-danger-soft); }
.sx-pop-menu hr { height: 1px; margin: 4px; border: 0; background: var(--myo-line); }

/* ══ ساختِ برنامه (لودینگ) ═════════════════════════════════════════════════
   حلقهٔ گرادیانی، هالهٔ نورانی و سه نقطهٔ مداری حذف شدند. یک نوارِ پیشرفتِ
   افقی و فهرستِ مراحل — همان اطلاعات، بی‌سر‌و‌صدا. */

#scrLoading.on { display: grid; place-items: center; min-height: calc(100vh - var(--sx-topbar-h)); padding: 40px 24px; }

.sx-loading { width: min(100%, 420px); text-align: center; }

.sx-loading h2 { font-size: var(--myo-fs-lg); font-weight: 800; color: var(--myo-ink); letter-spacing: -.3px; }
.sx-loading p { margin-top: 4px; font-size: var(--myo-fs-base); color: var(--myo-ink-muted); }

.sx-progress {
    position: relative;
    height: 4px;
    margin: 20px 0 6px;
    border-radius: var(--myo-r-pill);
    background: var(--myo-surface-3);
    overflow: hidden;
}
.sx-progress span {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sx-pct, 0%);
    background: var(--myo-brand);
    border-radius: inherit;
    transition: width var(--myo-d-4) var(--myo-ez);
}

.sx-progress-pct {
    font-size: var(--myo-fs-sm);
    font-weight: 700;
    color: var(--myo-brand-ink);
    font-variant-numeric: tabular-nums;
}

.sx-steps { margin-top: 26px; text-align: start; }

.sx-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--myo-line);
    font-size: var(--myo-fs-base);
    color: var(--myo-ink-disabled);
    transition: color var(--myo-d-2) var(--myo-ez-in);
}
.sx-step:last-child { border-bottom: 0; }

.sx-step i {
    flex: none;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border: 1px solid var(--myo-line-2);
    border-radius: 50%;
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    font-style: normal;
    transition: background var(--myo-d-2) var(--myo-ez-in), border-color var(--myo-d-2) var(--myo-ez-in), color var(--myo-d-2) var(--myo-ez-in);
}

.sx-step.is-now { color: var(--myo-ink); font-weight: 700; }
.sx-step.is-now i { border-color: var(--myo-brand); background: var(--myo-brand); color: var(--myo-on-fill); }

.sx-step.is-done { color: var(--myo-ink-muted); }
.sx-step.is-done i { border-color: var(--myo-ok); background: var(--myo-ok); color: var(--myo-on-fill); }

/* فرمِ شاگرد: `.sx-form-grid/.sx-hint/.sx-err/.sx-spin` به myo-ds.css رفتند —
   صفحه‌های ورود و ثبت‌نامِ سایت هم همان‌ها را می‌خواهند. */

.sx-mono {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--myo-r-sm);
    background: var(--myo-surface-2);
    color: var(--myo-ink-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--myo-fs-xs);
    direction: ltr;
    text-align: left;
    line-height: 1.7;
}

/* ══ پالتِ فرمان (Ctrl+K) ══════════════════════════════════════════════════ */

.sx-cmd {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 24px 24px;
    background: var(--myo-veil);
    -webkit-backdrop-filter: blur(var(--myo-veil-blur));
    backdrop-filter: blur(var(--myo-veil-blur));
}
.sx-cmd.on { display: flex; }

.sx-cmd-box {
    width: min(100%, 540px);
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    background: var(--myo-paper);
    border-radius: var(--myo-r-xl);
    box-shadow: var(--myo-el-3);
    overflow: hidden;
}

.sx-cmd-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--myo-line);
    color: var(--myo-ink-faint);
}
.sx-cmd-input svg { width: 17px; height: 17px; }
.sx-cmd-input input {
    flex: 1;
    border: 0;
    outline: 0;
    background: none;
    color: var(--myo-ink);
    font-size: var(--myo-fs-md);
}
.sx-cmd-input input::placeholder { color: var(--myo-ink-disabled); }

.sx-cmd-list { overflow: auto; padding: 6px; }

.sx-cmd-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--myo-r-sm);
    text-align: start;
    color: var(--myo-ink-2);
}
.sx-cmd-item.is-on { background: var(--myo-surface-2); }
.sx-cmd-item b { flex: 1; font-size: var(--myo-fs-base); font-weight: 700; color: var(--myo-ink); }
.sx-cmd-item small { font-size: var(--myo-fs-sm); color: var(--myo-ink-muted); }

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

@media (max-width: 1080px) {
    .sx-split { grid-template-columns: 1fr; }
    .sx-split-list { position: static; }
    .sx-list-scroll { max-height: 420px; }
}

@media (max-width: 760px) {
    .sx-detail-cols { grid-template-columns: 1fr; }
    .sx-detail-cols > .sx-detail-block:first-child {
        border-inline-end: 0;
        border-bottom: 1px solid var(--myo-line);
    }

    /* فهرستِ شاگردان قابِ اسکرولِ خودش را دارد چون در دسکتاپ کنارِ پروندهٔ
       شاگرد می‌نشیند و نباید پنلِ کناری را دنبالِ خودش پایین ببرد. در یک
       ستون آن قاب فقط یک ناحیهٔ اسکرولِ تودرتو می‌شود: انگشت روی فهرست
       می‌لغزد و صفحه تکان نمی‌خورد، تا وقتی فهرست ته بیاید. فهرست همان‌جا
       باز می‌شود و صفحه خودش اسکرول می‌کند. */
    .sx-list-scroll { max-height: none; overflow: visible; }

    /* پالتِ فرمان: `12vh` بالا و `60vh` قد برای نمای دسکتاپ نوشته شده
       بودند. روی گوشی با صفحه‌کلیدِ باز، نمای قابلِ دید نصف می‌شود و
       فهرستِ نتایج کامل زیرِ آن می‌ماند. */
    .sx-cmd { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); align-items: stretch; }
    .sx-cmd-box { max-height: 100%; }
}

/* ══ بازبینیِ ویرایش (مودال) ════════════════════════════════════════════════
   بعد از هر ذخیره، همان قواعدی که برنامه را ساخته بودند دوباره اجرا می‌شوند
   و نتیجه این‌جا گزارش می‌شود. سه دسته: چه چیزی شکست، چه چیزی درست شد، و
   موتور خودش چه چیزی را تنظیم کرد. */

.sx-rev-sec {
    margin: 16px 0 8px;
    font-size: var(--myo-fs-sm);
    font-weight: 700;
    color: var(--myo-ink-faint);
}
.sx-rev-sec:first-child { margin-top: 4px; }

.sx-rev-list {
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-md);
    overflow: hidden;
}

.sx-rev-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--myo-line);
    font-size: var(--myo-fs-base);
    color: var(--myo-ink-2);
    line-height: 1.7;
}
.sx-rev-item:last-child { border-bottom: 0; }

.sx-rev-mark {
    flex: none;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    margin-top: 2px;
    border-radius: 50%;
    font-size: var(--myo-fs-xs);
    font-weight: 700;
}
.sx-rev-item.is-danger .sx-rev-mark { background: var(--myo-danger-soft); color: var(--myo-danger); }
.sx-rev-item.is-ok     .sx-rev-mark { background: var(--myo-ok-soft);     color: var(--myo-ok); }
.sx-rev-item.is-info   .sx-rev-mark { background: var(--myo-info-soft);   color: var(--myo-info); }

.sx-rev-n {
    margin-inline-start: 6px;
    font-size: var(--myo-fs-xs);
    color: var(--myo-ink-faint);
    font-variant-numeric: tabular-nums;
}

/* ── گوشیِ چرخیده ─────────────────────────────────────────────────────────
   نوارِ گزینه (همه/فعال/غیرفعال در شاگردها و بازخوردها) کفِ ۴۰پیکسلی‌اش را
   از `myo-ds.css` در ≤۷۲۰ می‌گیرد؛ در ۸۴۴×۳۹۰ آن بند نمی‌گیرد و دکمه‌ها
   به ۳۰ پیکسل برمی‌گردند. شرط به ارتفاع بسته است تا تبلت بیرون بماند —
   همان قاعدهٔ سه‌تایی که در چهار شیتِ دیگر هم نوشته شده. */
@media (hover: none) and (pointer: coarse) and (max-height: 520px) {
    .sx-seg button { min-height: 40px; }
    .sx-tool { width: 38px; height: 38px; }
}