/* ============================================================================
   myo-ds.css — سیستمِ طراحیِ اپ. پوسته، تایپوگرافی، دکمه، ورودی، کارت،
   ردیف، جدول، نشان، مودال، کشو، توست.

   پیش از این، دوازده شیتِ تاریخی هم‌زمان بار می‌شدند و هر کدام نسخهٔ خودش
   از «دکمه» و «کارت» را داشت. این فایل جایشان را گرفت.

   سه قاعده که نباید شکسته شوند:

   ۱. هر کلاسِ این‌جا پیشوندِ `sx-` دارد. `wizard8.css` صد و هفتاد و سه نامِ
      کوتاه و عمومی را از قبل صاحب است (`.ex`, `.opt`, `.fn`, `.pn`, `.mus`)؛
      بدونِ پیشوند، ویزارد و صفحه‌های تازه بی‌صدا به هم می‌ریزند.

   ۲. هیچ رنگ، اندازه، شعاع یا سایه‌ای این‌جا ساخته نمی‌شود — همه از
      `tokens.css` می‌آید. اگر توکنی کم بود، آن‌جا اضافه‌اش کن، نه این‌جا.

   ۳. سطح در حالتِ عادی سایه ندارد؛ فقط یک خطِ مویی. سایه نشانهٔ «شناور
      بودن» است و به مودال، کشو، منو و توست می‌رسد — نه به کارتِ داخلِ صفحه.
      «خلوت» یعنی همین.
   ============================================================================ */

/* ══ قلم ═══════════════════════════════════════════════════════════════════
   اعلان‌های `@font-face` این‌جا نیستند — در `tokens.css`اند، چون آن شیت
   اول بار می‌شود و تنها منبعِ حقیقتِ قلم و رنگ است. دو جا اعلامشان کردن
   یعنی هشت درخواستِ اضافه و دو نسخه که باید هم‌زمان نگه داشته شوند.

   **درسی که نباید گم شود** (از ممیّزیِ ۱۶ سپتامبر): این شش اعلان یک بار
   با حذفِ `redesign.css` بی‌صدا رفتند و اپ به Tahoma افتاد، بی‌آنکه
   ممیّزیِ کرومیوم بفهمد — چون اسکریپتِ استخراج قاعده‌ها را با
   `querySelector(rule.selectorText)` می‌سنجید و هر قاعده‌ای که
   `selectorText` نداشت رد می‌شد. `@font-face` انتخابگر ندارد. «کدام قاعده
   به این DOM می‌رسد» برای at-ruleها سؤالِ درستی نیست؛ `@font-face`،
   `@keyframes` و `@property` را باید جدا شمرد.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ ریست ══════════════════════════════════════════════════════════════════ */

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

html { -webkit-text-size-adjust: 100%; }

/* زمینهٔ صفحه کرمِ داده‌شده است (`--myo-canvas`)، نه سفید و نه سطحِ نرم.
   کارتِ سفید روی کرم بدونِ هیچ سایه‌ای «بالا» دیده می‌شود — همان چیزی که
   طراحیِ فلت لازم دارد و تا حالا با خطِ مویی فقط تقریبش را داشتیم. */
body {
    margin: 0;
    background: var(--myo-canvas);
    color: var(--myo-ink);
    font-family: var(--myo-font);
    font-size: var(--myo-fs-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

/* `hidden` یک قرارداد HTML است و باید بر هر `display`ی بچربد. بدونِ این،
   هر کلاسِ چیدمانی (grid/flex) بی‌صدا آن را می‌خورَد. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex: none; }
img { max-width: 100%; }

/* ══ متنی که باید لاتین بماند ══════════════════════════════════════════════
   قلمِ اپ نسخهٔ FaNum است: ارقامِ لاتین را با شکلِ فارسی می‌کشد. برای عدد،
   تاریخ و شمارهٔ موبایل همین را می‌خواهیم — یکدست می‌شود. ولی برای چیزی
   که کاربر باید *عیناً* بخواند یا بسنجد (توکنِ API، شناسه، کد) فاجعه است:
   `332|NThFLhix9Qk2` می‌شود `۳۳۲|NThFLhix۹Qk۲` و دیگر نمی‌شود با آنچه
   کپی کرده مقایسه‌اش کرد.

   این کلاس قلم را به تک‌عرضِ سیستم می‌برد که FaNum نیست، پس ارقام لاتین
   می‌مانند. روی هر فیلد یا متنی بگذارش که محتوایش کد است، نه زبان. */
.sx-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--myo-fs-sm);
    letter-spacing: .2px;
}

/* عدد همیشه هم‌عرض: ستونِ اعداد نباید موقعِ تغییر بلرزد */ .sx-stat-n{ font-variant-numeric: tabular-nums; }

/* حلقهٔ فوکوس: یکی، برای همه‌چیز */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--myo-brand);
    outline-offset: 2px;
    border-radius: var(--myo-r-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══ پوستهٔ اپ ═════════════════════════════════════════════════════════════
   تاپ‌بار چسبان است و صفحه زیرش اسکرول می‌کند. `.screen` هم‌زمان چند تا در
   DOM هست و فقط آنکه `.on` دارد دیده می‌شود — این قرارداد از قبل بود و
   `main.js` رویش حساب می‌کند. */

.sx-main { padding-top: var(--sx-topbar-h); }

.screen { display: none; }
.screen.on { display: block; animation: sx-fade var(--myo-d-2) var(--myo-ez); }

@keyframes sx-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ── هوای صفحه ───────────────────────────────────────────────────────────
   این‌جا یک تابشِ برندی از بالای هر صفحه می‌آمد (`.screen::before`، دو کانونِ
   نور در دو سرِ بالا). ۱۸ سپتامبر ۲۰۲۶ برداشته شد: روی صفحه‌هایی که سرصفحهٔ
   کاغذی دارند — شاگردها و فهرستِ برنامه‌ها — همان هاله در گوشهٔ بالا-راست
   روی هم می‌افتاد و به‌جای «هوا»، لکه‌ای شبیهِ سایه دیده می‌شد. زمینه حالا
   همان `--myo-canvas`ِ تخت است.

   `position: relative; isolation: isolate` سرِ جایش ماند: دیگر لایه‌ای با
   `z-index: -1` ندارد، ولی همچنان قابِ برانباشتِ هر صفحه است و برداشتنش
   z-indexهای داخلِ صفحه‌ها را جابه‌جا می‌کند. */
.screen:not(#scrWizard) {
    position: relative;
    isolation: isolate;
}

/* ── استثنای ویزارد ──────────────────────────────────────────────────────
   صفحه‌های بازطراحی‌شده در جریانِ عادیِ سند اسکرول می‌شوند. ویزارد نمی‌تواند:
   قاعدهٔ اولش این است که هر مرحله بدونِ اسکرول در یک صفحه جا شود، و برای این
   کار به یک قابِ با ارتفاعِ قطعی نیاز دارد تا `.wz-body` بتواند خودش را
   کوچک کند.

   پیش از این، `.screen` در `flow.css` برای *همهٔ* صفحه‌ها
   `position:absolute; inset:0; display:flex; overflow:hidden` بود — یعنی هیچ
   صفحه‌ای نمی‌توانست بلندتر از یک نما باشد. آن قاعده با حذفِ `flow.css` رفت و
   این‌جا فقط برای ویزارد برمی‌گردد. اگر این را برداری، دکمهٔ «ادامه» از پایینِ
   نما بیرون می‌افتد. */
#scrWizard.on {
    position: fixed;
    inset-block: var(--sx-topbar-h) 0;
    inset-inline: 0;
    /* همان دلیلِ `dvh`ِ مودال: `position: fixed` روی iOS به نمای بزرگ
       بسته می‌شود، پس فوترِ ویزارد — «ادامه» — زیرِ نوارِ آدرس گم می‌شد.
       ارتفاعِ صریح این را می‌بندد. */
    height: calc(100dvh - var(--sx-topbar-h));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: none;
}

/* قابِ محتوا: یک عرضِ بیشینه برای کلِ اپ، و یک حاشیهٔ کناری ثابت */
.sx-page {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: 28px 24px 72px;
}

.sx-page.is-wide { width: min(100%, 1440px); }

/* ══ تاپ‌بار ═══════════════════════════════════════════════════════════════
   ۶۴px (ماکاپِ مرجعِ میزکار، ۱۷ سپتامبر ۲۰۲۶؛ پیش از آن ۵۲)، تخت،
   بی‌سایه. سه ناحیه با مرزِ روشن:
     راست  — هویت و مقصدها (کجا می‌شود رفت)
     وسط   — خالی، عمداً؛ همان «فضا»یی که خواسته شده
     چپ    — ابزار و هویتِ کاربر (جست‌وجو، اقدامِ اصلی، اتصال، حساب)

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

:root { --sx-topbar-h: 64px; }

.sx-topbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 60;
    height: var(--sx-topbar-h);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-inline: 20px;
    background: var(--myo-paper);
    border-bottom: 1px solid var(--myo-line);
}

.sx-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: var(--myo-fs-lg);
    color: var(--myo-ink);
    letter-spacing: -.3px;
    padding-inline-end: 14px;
}

.sx-logo b { font-weight: 800; }

/* نشان: صاعقه روی قرصِ برند — `icons/bolt.svg`ِ بستهٔ مرجع، با رنگِ توکن. */
.sx-logo-mark {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--myo-brand);
    color: var(--myo-on-fill);
}
.sx-logo-mark svg { width: 16px; height: 16px; }

/* ناوبری: قرصِ کوچک. آیکن رنگِ خودش را در حالتِ فعال می‌گیرد. */
.sx-nav { display: flex; align-items: center; gap: 2px; }

.sx-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 13px;
    border-radius: var(--myo-r-md);
    color: var(--myo-ink-muted);
    font-size: var(--myo-fs-base);
    font-weight: 600;
    transition: color var(--myo-d-1) var(--myo-ez-in), background var(--myo-d-1) var(--myo-ez-in);
}

.sx-nav-item svg { width: 16px; height: 16px; color: var(--myo-ink-faint); transition: color var(--myo-d-1) var(--myo-ez-in); }
.sx-nav-item:hover { color: var(--myo-ink); background: var(--myo-surface); }
.sx-nav-item:hover svg { color: var(--myo-ink-muted); }

.sx-nav-item.is-active {
    color: var(--myo-brand-ink);
    background: var(--myo-brand-soft);
    font-weight: 700;
}
.sx-nav-item.is-active svg { color: var(--myo-brand-vivid); }

.sx-topbar-spacer { flex: 1; }

/* جداکنندهٔ ابزار از هویت — یک خطِ مویی، نه یک جعبه */
.sx-topbar-sep {
    width: 1px;
    height: 20px;
    margin-inline: 4px;
    background: var(--myo-line);
}

/* حالتِ پیش از ورود: تاپ‌بار به یک نشان تقلیل پیدا می‌کند. کلاس را
   `showScreen()` روی body می‌گذارد. */
.sx-anon .sx-nav,
.sx-anon .sx-conn,
.sx-anon .sx-user { display: none; }

.sx-kbd {
    font-family: inherit;
    font-size: var(--myo-fs-xs);
    color: var(--myo-ink-faint);
    background: var(--myo-paper);
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-sm);
    padding: 1px 5px;
}

/* منوی کاربر */
.sx-user { position: relative; }

.sx-user-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding-inline: 4px 8px;
    border-radius: var(--myo-r-lg);
    color: var(--myo-ink);
    font-size: var(--myo-fs-base);
    font-weight: 700;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.sx-user-btn:hover { background: var(--myo-surface); }
.sx-user-btn:focus-visible { outline: 0; box-shadow: var(--myo-ring); }
.sx-user-btn .sx-user-caret { width: 12px; height: 12px; color: var(--myo-ink-faint); }

/* آواتار: تصویرِ واقعی یا حرفِ اول روی قرصِ نرمِ برند. */
.sx-user-av {
    flex: none;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--myo-brand-soft-2);
    color: var(--myo-brand-ink);
    font-size: var(--myo-fs-md);
    font-weight: 800;
}
.sx-user-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sx-user-id { display: grid; gap: 1px; text-align: start; line-height: 1.3; }
.sx-user-name { display: block; font-size: var(--myo-fs-base); font-weight: 700; color: var(--myo-ink); white-space: nowrap; }

.sx-user-drop {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 5;
    width: 218px;
    padding: 5px;
    background: var(--myo-paper);
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-lg);
    box-shadow: var(--myo-el-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--myo-d-1) var(--myo-ez-in), transform var(--myo-d-1) var(--myo-ez-in), visibility var(--myo-d-1);
}
/* `on` است نه `open`: در این سیستم دیده‌شدنِ هر لایهٔ شناور (پرده، مودال،
   کشو، منو، توست، پالت) را `on` می‌گوید و حالتِ انتخابِ یک کنترلِ درونِ صفحه
   (زبانه، ردیف، کلیدِ بخش‌بندی‌شده) را `is-on`. منوی کاربر تنها جایی بود که
   املای سومی داشت. */
.sx-user.on .sx-user-drop { opacity: 1; visibility: visible; transform: none; }

.sx-user-head { padding: 7px 9px 9px; }
.sx-user-head b { display: block; font-size: var(--myo-fs-base); color: var(--myo-ink); }
.sx-user-head span { font-size: var(--myo-fs-sm); color: var(--myo-ink-muted); }

.sx-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    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-menu-item svg { width: 15px; height: 15px; flex: none; color: var(--myo-ink-faint); }
.sx-menu-item > span:not(.sx-menu-val) { flex: 1; min-width: 0; }
/* مقدارِ فعلیِ یک ردیفِ تنظیمات، ته‌چسبِ ردیف. `b` است یا `span` — هر دو. */
.sx-menu-item:hover .sx-menu-val { color: var(--myo-ink-muted); }
.sx-menu-item:hover { background: var(--myo-surface); }
.sx-menu-item:hover svg { color: var(--myo-brand-vivid); }
.sx-menu-item.is-danger { color: var(--myo-danger); }
.sx-menu-item.is-danger svg { color: var(--myo-danger); }
.sx-menu-item.is-danger:hover { background: var(--myo-danger-soft); }
.sx-menu-item.is-danger:hover svg { color: var(--myo-danger); }

.sx-menu-sep { height: 1px; margin: 4px 4px; background: var(--myo-line); }

/* نشانگرِ اتصال: یک نقطه، بی‌جعبه */
/* ══ کلیدِ تم ══════════════════════════════════════════════════════════════
   سه حالت، سه آیکن، و فقط یکی‌شان دیده می‌شود. کدام‌یکی را `data-theme` روی
   `html` تعیین می‌کند — نه کلاسی روی خودِ دکمه — تا اسکریپتِ سرِ صفحه که
   پیش از هر CSSای اجرا می‌شود، همان لحظه آیکنِ درست را هم بگذارد. */
.sx-theme {
    display: grid;
    place-items: center;
    width: var(--myo-h-md);
    height: var(--myo-h-md);
    border: 1px solid transparent;
    border-radius: var(--myo-r-md);
    background: transparent;
    color: var(--myo-ink-muted);
    cursor: pointer;
    transition: color var(--myo-d-1) var(--myo-ez-in), background var(--myo-d-1) var(--myo-ez-in);
}
.sx-theme:hover { background: var(--myo-surface-2); color: var(--myo-ink); }
.sx-theme:focus-visible { outline: none; box-shadow: var(--myo-ring); }
.sx-theme svg { width: 17px; height: 17px; }

/* پیش‌فرض «سیستم» است، پس وقتی هیچ `data-theme`ای نیست همان دیده می‌شود.
   گزینشگرها عمداً به `.sx-theme` بسته نیستند: کلیدِ تمِ اپ حالا یک ردیف در
   منوی کاربر است و همین سه کلاس را هم روی آیکن‌ها دارد و هم روی برچسب‌های
   «سیستم/روشن/تیره». سایتِ عمومی هنوز دکمهٔ `.sx-theme` را دارد. */
.sx-theme-lt,
.sx-theme-dk { display: none; }
html[data-theme="light"] .sx-theme-sys,
html[data-theme="dark"]  .sx-theme-sys { display: none; }
html[data-theme="light"] .sx-theme-lt  { display: block; }
html[data-theme="dark"]  .sx-theme-dk  { display: block; }

/* زیرِ نامِ مربی می‌نشیند (ماکاپ: «آنلاین» با نقطهٔ سبز). */
.sx-conn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--myo-fs-xs);
    font-weight: 500;
    color: var(--myo-ink-muted);
}
.sx-conn i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--myo-ink-disabled);
    transition: background var(--myo-d-2) var(--myo-ez-in);
}
/* کلاسِ `live` را auth.js روی خودِ نقطه می‌گذارد، نه روی قاب. */
.sx-conn i.live { background: var(--myo-ok-icon); }

/* ══ تایپوگرافی و سرصفحهٔ صفحه ═════════════════════════════════════════════
   هر صفحه یک تیترِ h1 دارد، یک خطِ توضیح، و حداکثر یک اقدامِ اصلی. */

/* ── کاغذِ سرصفحه ────────────────────────────────────────────────────────
   سرصفحهٔ هر صفحه قبلاً بی‌قاب بود: متن مستقیم روی زمینه، و — چون بلندترین
   متنِ صفحه است — بالای هر صفحه رها دیده می‌شد. حالا سطح دارد.

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

   این‌جاست نه در `myo-app.css`، چون سه صفحه لازمش دارند: میزکار
   (پیش از بازطراحیِ پنجم)، شاگردها و فهرستِ برنامه‌ها (`.sx-head`). */
.sx-plate {
    position: relative;
    overflow: hidden;
    /* تابشِ برندیِ گوشهٔ عنوان (radial در ۹۷٪ -۳۶٪) ۱۸ سپتامبر ۲۰۲۶ برداشته
       شد — با هوای صفحه روی هم می‌افتاد و گوشهٔ بالا-راست را لک می‌کرد.
       شیبِ کاغذ ماند؛ همان است که کاغذ را از یک مستطیلِ پُر جدا می‌کند. */
    background:
        linear-gradient(154deg, var(--myo-paper) 0%, color-mix(in srgb, var(--myo-surface) 72%, var(--myo-paper)) 100%);
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-2xl);
    box-shadow: var(--myo-el-card), inset 0 1px 0 color-mix(in srgb, var(--myo-paper) 72%, transparent);
}

.sx-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
    padding: 20px 24px;
}

/* پرشِ مقیاس هم بخشی از همین زبان است: عنوانِ صفحه ۲۶ است نه ۲۰، مثلِ
   سلامِ میزکار. روی کاغذ، ۲۰ دوباره «متنِ معمولی» دیده می‌شد. */
.sx-head h1 {
    font-size: var(--myo-fs-2xl);
    font-weight: 800;
    color: var(--myo-ink);
    letter-spacing: -.9px;
    line-height: 1.3;
}

.sx-head p {
    margin-top: 4px;
    font-size: var(--myo-fs-base);
    color: var(--myo-ink-muted);
}

.sx-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* سرتیترِ یک بخش درونِ صفحه */

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

.sx-muted { color: var(--myo-ink-muted); }
.sx-faint { color: var(--myo-ink-faint); font-size: var(--myo-fs-sm); }

/* ══ دکمه ══════════════════════════════════════════════════════════════════
   ارتفاع از توکنِ `--myo-h-*` می‌آید نه از عددِ محلی، وگرنه هر مؤلفه
   دوباره قدِ خودش را می‌سازد و «کامپکت» از دست می‌رود.

   ── رنگ از *معنا* می‌آید، نه از «کدام دکمه مهم‌تر است» ─────────────────
   تا پیش از ۱۷ سپتامبر ۲۰۲۶ همهٔ دکمه‌های مهم یک رنگ بودند (آبیِ برند)،
   پس «ثبت»، «ویرایش» و «برنامهٔ جدید» از هم جدا نمی‌شدند و مربی باید
   *می‌خواند* تا بفهمد کدام کار را می‌کند. حالا چهار نقش داریم:

     is-go      پُرِ سبز    → ثبت، تأیید، ذخیره، فعال‌سازی. کاری که تمام می‌کند.
     is-primary پُرِ آبی    → ویرایش، ورود، ادامه. کاری که می‌بَرد یا عوض می‌کند.
     is-create  سبزِ تو‌خالی → ساختنِ چیزِ تازه (برنامه، شاگرد). آغاز، نه پایان.
     is-danger  قرمز       → حذف و بازگشت‌ناپذیر.

   «پُر» در برابر «تو‌خالی» هم معنا دارد: پُر یعنی کارِ کنونی را تمام
   می‌کند، تو‌خالی یعنی یک کارِ تازه باز می‌کند. پس دو سبز در یک صفحه
   با هم قاطی نمی‌شوند. */

.sx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--myo-h-lg);
    padding-inline: 13px;
    border: 1px solid var(--myo-line-2);
    border-radius: var(--myo-r-md);
    background: var(--myo-paper);
    color: var(--myo-ink-2);
    font-size: var(--myo-fs-base);
    font-weight: 700;
    white-space: nowrap;
    transition: background var(--myo-d-1) var(--myo-ez-in),
                border-color var(--myo-d-1) var(--myo-ez-in),
                color var(--myo-d-1) var(--myo-ez-in);
}

.sx-btn svg { width: 15px; height: 15px; color: currentColor; }
.sx-btn:hover { border-color: var(--myo-line-3); background: var(--myo-surface); color: var(--myo-ink); }
.sx-btn:not(.is-primary):not(.is-danger):not(.is-go):not(.is-create):hover svg { color: var(--myo-brand-vivid); }
.sx-btn:active { transform: translateY(.5px); }

.sx-btn[disabled], .sx-btn.is-disabled {
    opacity: .5;
    pointer-events: none;
}

.sx-btn.is-primary {
    border-color: var(--myo-brand);
    background: var(--myo-brand);
    color: var(--myo-on-fill);
}
.sx-btn.is-primary:hover { border-color: var(--myo-brand-hover); background: var(--myo-brand-hover); color: var(--myo-on-fill); }

.sx-btn.is-go {
    border-color: var(--myo-ok-fill);
    background: var(--myo-ok-fill);
    color: var(--myo-on-fill);
}
.sx-btn.is-go:hover { border-color: var(--myo-ok-ink); background: var(--myo-ok-ink); color: var(--myo-on-fill); }
.sx-btn.is-go svg { color: currentColor; }

/* تو‌خالی یعنی زمینه‌اش کاغذ است، نه یک سبزِ کم‌رنگ: پُرِ کم‌رنگ در کنارِ
   پُرِ سیر خوانده می‌شود «همان دکمه، غیرفعال». */
.sx-btn.is-create {
    border-color: var(--myo-ok-line-strong);
    background: var(--myo-paper);
    color: var(--myo-ok);
}
.sx-btn.is-create:hover { border-color: var(--myo-ok-fill); background: var(--myo-ok-soft); color: var(--myo-ok); }
.sx-btn.is-create svg,
.sx-btn.is-create:hover svg { color: var(--myo-ok-icon); }

.sx-btn.is-quiet {
    border-color: transparent;
    background: none;
    color: var(--myo-ink-muted);
}
.sx-btn.is-quiet:hover { background: var(--myo-surface-2); color: var(--myo-ink); }

.sx-btn.is-danger { color: var(--myo-danger); }
.sx-btn.is-danger:hover { border-color: var(--myo-danger); background: var(--myo-danger-soft); color: var(--myo-danger); }

.sx-btn.is-sm { height: var(--myo-h-md); padding-inline: 10px; font-size: var(--myo-fs-sm); border-radius: var(--myo-r-sm); }
.sx-btn.is-sm svg { width: 13px; height: 13px; }

.sx-btn.is-icon { width: var(--myo-h-lg); padding-inline: 0; }
.sx-btn.is-icon.is-sm { width: var(--myo-h-md); }

/* ══ ورودی ═════════════════════════════════════════════════════════════════ */

.sx-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--myo-h-lg);
    padding-inline: 11px;
    border: 1px solid var(--myo-line-2);
    border-radius: var(--myo-r-md);
    background: var(--myo-paper);
    color: var(--myo-ink-faint);
    transition: border-color var(--myo-d-1) var(--myo-ez-in), box-shadow var(--myo-d-1) var(--myo-ez-in);
}
.sx-field svg { width: 15px; height: 15px; }
.sx-field:focus-within { border-color: var(--myo-brand); box-shadow: var(--myo-ring); }
.sx-field:focus-within svg { color: var(--myo-brand-vivid); }

.sx-field input,
.sx-field select {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: none;
    color: var(--myo-ink);
    font-size: var(--myo-fs-base);
}
.sx-field input::placeholder { color: var(--myo-ink-disabled); }
.sx-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.sx-select {
    height: var(--myo-h-lg);
    padding-inline: 11px 28px;
    border: 1px solid var(--myo-line-2);
    border-radius: var(--myo-r-md);
    background: var(--myo-paper) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat;
    background-position: left 10px center;
    background-size: 13px;
    color: var(--myo-ink);
    font-size: var(--myo-fs-base);
    font-weight: 600;
    appearance: none;
    cursor: pointer;
    transition: border-color var(--myo-d-1) var(--myo-ez-in), box-shadow var(--myo-d-1) var(--myo-ez-in);
}
.sx-select:focus { outline: 0; border-color: var(--myo-brand); box-shadow: var(--myo-ring); }

.sx-input {
    width: 100%;
    height: var(--myo-h-lg);
    padding-inline: 11px;
    border: 1px solid var(--myo-line-2);
    border-radius: var(--myo-r-md);
    background: var(--myo-paper);
    color: var(--myo-ink);
    font-size: var(--myo-fs-base);
    transition: border-color var(--myo-d-1) var(--myo-ez-in), box-shadow var(--myo-d-1) var(--myo-ez-in);
}
.sx-input:focus { outline: 0; border-color: var(--myo-brand); box-shadow: var(--myo-ring); }
.sx-input::placeholder { color: var(--myo-ink-disabled); }

/* ── فرم: گرید، راهنما، خطا، اسپینر ─────────────────────────────────────── */

.sx-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}
.sx-form-grid .is-full { grid-column: 1 / -1; }

.sx-hint { font-size: var(--myo-fs-xs); color: var(--myo-ink-faint); }

.sx-err {
    display: none;
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: var(--myo-r-sm);
    background: var(--myo-danger-soft);
    color: var(--myo-danger);
    font-size: var(--myo-fs-sm);
    font-weight: 600;
}
.sx-err.on { display: block; }

.sx-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%;
    animation: sx-spin .7s linear infinite;
}
.sx-spin.on { display: block; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .sx-form-grid { grid-template-columns: 1fr; } }

.sx-form-row { display: grid; gap: 5px; }
.sx-form-row > label { font-size: var(--myo-fs-sm); font-weight: 700; color: var(--myo-ink-2); }

/* ══ زبانه‌های فیلتر ═══════════════════════════════════════════════════════
   خطِ زیرین، نه قرصِ پُر. فیلتر یک حالتِ خواندن است، نه یک دکمه. */

.sx-tab.is-on { color: var(--myo-brand-ink); font-weight: 700; }
.sx-tab.is-on::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 8px;
    height: 2px;
    background: var(--myo-brand);
    border-radius: 2px 2px 0 0;
}

/* گروهِ کلیدِ بخش‌بندی‌شده — برای انتخابِ دوتایی/سه‌تایی درونِ فرم */
.sx-seg {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-md);
    background: var(--myo-surface);
}

.sx-seg button {
    padding: 5px 12px;
    border-radius: var(--myo-r-sm);
    color: var(--myo-ink-muted);
    font-size: var(--myo-fs-sm);
    font-weight: 700;
    transition: background var(--myo-d-1) var(--myo-ez-in), color var(--myo-d-1) var(--myo-ez-in);
}
.sx-seg button:hover { color: var(--myo-ink); }
/* تخت: انتخاب‌شده با کاغذِ سفید و یک خطِ مویی از هم جدا می‌شود، نه با سایه. */
.sx-seg button.is-on {
    background: var(--myo-paper);
    color: var(--myo-brand-ink);
    box-shadow: inset 0 0 0 1px var(--myo-brand-line);
}

/* درونِ یک فیلدِ فرم، کلید تمامِ عرض را می‌گیرد و گزینه‌ها آن را برابر بخش
   می‌کنند؛ وگرنه گزینهٔ اول یک قرصِ کوچک می‌شود و بقیهٔ ریل خالی می‌ماند. */
.sx-form-row > .sx-seg { display: flex; width: 100%; }
.sx-form-row > .sx-seg button { flex: 1; }

/* ══ سطح: کارت، پنل، ردیف ══════════════════════════════════════════════════ */

.sx-card {
    background: var(--myo-paper);
    border: 1px solid var(--myo-line);
    /* `overflow: hidden` لازمهٔ شست‌وشوی سرصفحه است — وگرنه پُرِ سرصفحه از
       گوشهٔ گرد بیرون می‌زند. */
    border-radius: var(--myo-r-xl);
    overflow: hidden;
    box-shadow: var(--myo-el-card);
}

/* سرصفحهٔ کارت یک شست‌وشوی خیلی کم دارد — همان اختلافِ کوچکی که
   «سرصفحه» را از «ردیفِ اول» جدا می‌کند. */

/* ردیف: واحدِ اصلیِ فهرست‌ها. کارت نیست — فقط یک خطِ مویی جداکننده. */
.sx-rows { display: flex; flex-direction: column; }

.sx-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 14px;
    border-bottom: 1px solid var(--myo-line);
    text-align: start;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.sx-row:last-child { border-bottom: 0; }
.sx-row:hover { background: var(--myo-surface); }

.sx-row.is-on { background: var(--myo-brand-soft); }
.sx-row.is-on::before {
    content: "";
    width: 3px;
    align-self: stretch;
    /* حاشیه باید منطقی باشد، نه فیزیکی: با `margin-left` منفی، در RTL نوار
       از لبهٔ گردِ کارت بیرون می‌زد به‌جای اینکه بچسبد به شروعِ ردیف. */
    margin-block: -9px;
    margin-inline-end: -12px;
    background: var(--myo-brand);
}

.sx-row-main { flex: 1; min-width: 0; }
.sx-row-main b {
    display: block;
    font-size: var(--myo-fs-base);
    font-weight: 700;
    color: var(--myo-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sx-row-main span {
    display: block;
    font-size: var(--myo-fs-sm);
    color: var(--myo-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sx-row-go {
    color: var(--myo-ink-disabled);
    transition: color var(--myo-d-1) var(--myo-ez-in), transform var(--myo-d-1) var(--myo-ez);
}
.sx-row-go svg { width: 15px; height: 15px; }
/* در RTL «جلو» سمتِ چپ است، پس لغزشِ فلش هم باید منفی باشد. */
.sx-row:hover .sx-row-go { color: var(--myo-brand-ink); transform: translateX(-3px); }

/* ══ آواتار ════════════════════════════════════════════════════════════════
   حرفِ اولِ نام روی سطحِ خنثی. رنگِ تصادفی نداریم — رنگ در این اپ معنا دارد. */

.sx-av {
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: var(--myo-r-md);
    background: var(--myo-surface-2);
    color: var(--myo-ink-2);
    font-size: var(--myo-fs-sm);
    font-weight: 800;
}
.sx-av.is-lg { width: 38px; height: 38px; font-size: var(--myo-fs-md); border-radius: var(--myo-r-md); }
.sx-row.is-on .sx-av { background: var(--myo-brand); color: var(--myo-on-fill); }

/* ══ نشان و برچسب ══════════════════════════════════════════════════════════ */

.sx-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 20px;
    padding-inline: 8px;
    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;
}
.sx-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.sx-badge.is-ok     { background: var(--myo-ok-soft);     color: var(--myo-ok); }
.sx-badge.is-warn   { background: var(--myo-warn-soft);   color: var(--myo-warn); }
.sx-badge.is-danger { background: var(--myo-danger-soft); color: var(--myo-danger); }
.sx-badge.is-info   { background: var(--myo-info-soft);   color: var(--myo-info); }
.sx-badge.is-brand  { background: var(--myo-brand-soft);  color: var(--myo-brand-ink); }

/* چیپ: واحدِ ریزِ اطلاعات (عضله، ابزار، تگ). قابل‌کلیک نیست مگر گفته شود. */
.sx-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-pill);
    background: var(--myo-paper);
    color: var(--myo-ink-muted);
    font-size: var(--myo-fs-xs);
    font-weight: 600;
    white-space: nowrap;
}
.sx-chips { display: flex; flex-wrap: wrap; gap: 5px; }

/* ══ آمار ══════════════════════════════════════════════════════════════════
   عدد، برچسبِ ریز، و یک آیکنِ کوچکِ رنگی.

   قبلاً آیکن نداشت — با این استدلال که «چهار رنگِ متفاوت کنارِ هم چیزی را
   واضح‌تر نمی‌کند». استدلال برای جعبهٔ بزرگِ رنگی درست بود، ولی نتیجه یک
   ردیفِ چهارستونیِ بلند و بی‌لنگر شد که فقط عدد داشت. حالا آیکن ۱۴px است
   و رنگش *معنا* دارد نه تزئین: سبز = چیزی که ساخته‌ای، خنثی = شمارش،
   کهربایی = کاری که مانده. */

/* نوارِ آمار قبلاً *یک* جعبهٔ بسته بود با جداکنندهٔ ۱پیکسلی — و همان چیزی
   بود که «جدول» دیده می‌شد نه «کاشی». حالا کاشی‌های جدا با فاصله‌اند،
   همان درسی که در میزکار گرفته شد: فاصله «انتخاب» را نشان می‌دهد،
   جداکنندهٔ ۱پیکسلی «فهرست» را. */
.sx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

/* کاشیِ آمار گاهی `<button>` است (فیلترِ فهرستِ برنامه‌ها) و گاهی `<div>`.
   هر دو باید یکسان دیده شوند، پس تراز و چینش این‌جا صریح گفته می‌شود —
   وگرنه دکمه متنش را وسط‌چین می‌کند و ستون‌ها با هم جور درنمی‌آیند. */
.sx-stat {
    /* خنثی پلهٔ خطِ پررنگ است نه یک رنگِ معنایی: کاشیِ بی‌تُن نباید ادعا
       کند که چیزی را می‌گوید. */
    --c: var(--myo-neutral-400);
    position: relative;
    display: block;
    width: 100%;
    padding: 13px 15px 12px;
    padding-inline-start: 19px;
    background: var(--myo-paper);
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-lg);
    box-shadow: var(--myo-el-card);
    text-align: start;
    transition: transform var(--myo-d-2) var(--myo-ez-in),
                box-shadow var(--myo-d-2) var(--myo-ez-in),
                border-color var(--myo-d-2) var(--myo-ez-in);
}
.sx-stat.is-brand { --c: var(--myo-brand-icon); }
.sx-stat.is-info  { --c: var(--myo-info-icon); }
.sx-stat.is-ok    { --c: var(--myo-ok-icon); }

/* ریلِ دسته روی لبهٔ شروع. عمداً *بیرونِ* جعبهٔ متن است: نشانِ رنگیِ
   تزیینی که درونِ مستطیلِ یک گرهِ متنی بیفتد، در
   `contrast-audit-gradient.cjs` «زمینهٔ متن» خوانده می‌شود. */
.sx-stat::before {
    content: "";
    position: absolute;
    inset-block: 13px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: var(--myo-r-pill);
    background: var(--c);
    transition: inset-block var(--myo-d-2) var(--myo-ez);
}

button.sx-stat { cursor: pointer; }
button.sx-stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--c) 42%, var(--myo-line));
    box-shadow: var(--myo-el-2);
}
button.sx-stat:hover::before { inset-block: 8px; }
@media (prefers-reduced-motion: reduce) {
    .sx-stat { transition: none; }
    button.sx-stat:hover { transform: none; }
}

/* تنها عددی که از مربی کاری می‌خواهد رنگ می‌گیرد. */
.sx-stat.is-warn {
    --c: var(--myo-warn-icon);
    background: color-mix(in srgb, var(--myo-warn-soft) 76%, var(--myo-paper));
    border-color: color-mix(in srgb, var(--myo-warn-line) 62%, var(--myo-line));
}
.sx-stat.is-warn .sx-stat-n { color: var(--myo-warn); }
.sx-stat.is-warn .sx-stat-l { color: var(--myo-warn); }

/* آیکن یک کاشیِ ۲۰px با تُنِ ملایمِ خودش است، نه یک خطِ خاکستری چسبیده
   به عدد: در این اندازه یک گلیفِ تنها کنارِ عددِ ضخیم مثلِ غلطِ چاپی
   دیده می‌شود. کاشی به آن جا و قصد می‌دهد. */
.sx-stat-head { display: flex; align-items: center; gap: 8px; }
.sx-stat-head svg { width: 12px; height: 12px; }
.sx-stat-head > svg {
    flex: none;
    box-sizing: content-box;
    padding: 4px;
    border-radius: var(--myo-r-sm);
    background: var(--myo-surface-2);
    color: var(--myo-ink-muted);
}
.sx-stat.is-brand .sx-stat-head > svg { background: var(--myo-brand-soft); color: var(--myo-brand-ink); }
.sx-stat.is-warn  .sx-stat-head > svg { background: var(--myo-warn-soft);  color: var(--myo-warn); }
.sx-stat.is-info  .sx-stat-head > svg { background: var(--myo-info-soft);  color: var(--myo-info); }

.sx-stat-n {
    display: block;
    font-size: var(--myo-fs-lg);
    font-weight: 800;
    color: var(--myo-ink);
    line-height: 1.2;
    letter-spacing: -.5px;
}
.sx-stat-l {
    display: block;
    margin-top: 1px;
    font-size: var(--myo-fs-sm);
    color: var(--myo-ink-muted);
}

/* ══ فرکانسِ هفته ═══════════════════════════════════════════════════════════
   هفت میله برای هفت روز؛ پُرها جلسه‌اند. کدام روز را نمی‌دانیم (نه فهرستِ
   برنامه‌ها روزها را می‌آورد و نه خلاصهٔ میزکار)، پس میله‌ها ترتیبِ روز را
   ادعا نمی‌کنند — سنجهٔ تعدادند.

   این‌جاست و نه در `myo-app.css`، چون دو صفحه لازمش دارند: «برنامه‌های
   اخیرِ» میزکار و فهرستِ برنامه‌ها. هر صفحه فقط برچسبِ کنارش را خودش
   می‌چیند. */

.sx-wk { display: flex; align-items: center; gap: 8px; }

.sx-wk-dots { display: flex; gap: 3px; }
.sx-wk-dots i {
    width: 4px;
    height: 12px;
    border-radius: 1px;
    background: var(--myo-surface-3);
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.sx-wk-dots i.on { background: var(--myo-brand-400); }

.sx-wk em {
    font-style: normal;
    font-size: var(--myo-fs-xs);
    color: var(--myo-ink-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ══ حالتِ خالی ════════════════════════════════════════════════════════════ */

.sx-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 40px 24px;
    text-align: center;
}
.sx-empty-ic {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    margin-bottom: 4px;
    border-radius: var(--myo-r-md);
    background: var(--myo-surface-2);
    color: var(--myo-ink-disabled);
}
.sx-empty-ic svg { width: 17px; height: 17px; }
.sx-empty b { font-size: var(--myo-fs-md); font-weight: 700; color: var(--myo-ink); }
.sx-empty p { font-size: var(--myo-fs-base); color: var(--myo-ink-muted); max-width: 40ch; }
.sx-empty .sx-btn { margin-top: 10px; }

/* اسکلتِ بارگذاری */
.sx-skel {
    border-radius: var(--myo-r-sm);
    background: linear-gradient(90deg, var(--myo-surface-2) 25%, var(--myo-surface-3) 37%, var(--myo-surface-2) 63%);
    background-size: 400% 100%;
    animation: sx-shimmer 1.3s ease-in-out infinite;
}
@keyframes sx-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ══ جدول ══════════════════════════════════════════════════════════════════ */

/* ══ مودال ═════════════════════════════════════════════════════════════════ */

/* پردهٔ پشتِ هر پاپ‌آپ از `--myo-veil` می‌آید و نه از یک rgba دستی: تا
   پیش از این چهار سطح چهار عددِ مختلف داشتند و صفحه هر بار جورِ دیگری
   تیره می‌شد. عدد نازک است — کارت با سایهٔ خودش جدا می‌شود، نه با
   خاموش‌کردنِ پشتش. */
.sx-scrim.on { opacity: 1; visibility: visible; }

.sx-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--myo-veil);
    -webkit-backdrop-filter: blur(var(--myo-veil-blur));
    backdrop-filter: blur(var(--myo-veil-blur));
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--myo-d-2) var(--myo-ez-in), visibility var(--myo-d-2);
}
.sx-modal.on { opacity: 1; visibility: visible; }

.sx-modal-box {
    width: min(100%, 460px);
    /* `dvh` نه `vh`: در سافاریِ iOS واحدِ `vh` همیشه نمای *بزرگ* را
       می‌گیرد (یعنی نمای بی‌نوارِ آدرس)، پس تا وقتی نوار باز است، ته
       مودال — یعنی دقیقاً همان‌جایی که «ذخیره» نشسته — زیرِ نوار می‌ماند.
       اعلانِ `vh` عمداً اول آمده تا مرورگرِ بی‌`dvh` چیزی داشته باشد. */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--myo-paper);
    border-radius: var(--myo-r-xl);
    box-shadow: var(--myo-el-3);
    transform: translateY(10px) scale(.99);
    transition: transform var(--myo-d-3) var(--myo-ez);
}
.sx-modal.on .sx-modal-box { transform: none; }
.sx-modal-box.is-lg { width: min(100%, 720px); }
/* صندوقِ بازخورد: پاسخ‌ها و اسنپ‌شات دو ستونِ کنارِ هم‌اند و در ۷۲۰
   روی هم می‌افتند. */
.sx-modal-box.is-xl { width: min(100%, 1040px); }

.sx-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px 12px;
}
.sx-modal-head h2 { font-size: var(--myo-fs-lg); font-weight: 800; color: var(--myo-ink); letter-spacing: -.3px; }
.sx-modal-head p { margin-top: 3px; font-size: var(--myo-fs-base); color: var(--myo-ink-muted); }

.sx-modal-x {
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    margin: -4px -6px 0 0;
    border-radius: var(--myo-r-sm);
    color: var(--myo-ink-faint);
    transition: background var(--myo-d-1) var(--myo-ez-in), color var(--myo-d-1) var(--myo-ez-in);
}
.sx-modal-x svg { width: 16px; height: 16px; }
.sx-modal-x:hover { background: var(--myo-surface-2); color: var(--myo-ink); }

.sx-modal-body { padding: 0 18px 4px; overflow: auto; }

.sx-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 18px 16px;
}

/* ══ کشو ═══════════════════════════════════════════════════════════════════ */
.sx-drawer.on { transform: none; }

/* ══ توست ══════════════════════════════════════════════════════════════════ */

.sx-toast {
    position: fixed;
    inset-block-end: 22px;
    inset-inline-start: 22px;
    z-index: 120;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    background: var(--myo-deep-2);
    color: var(--myo-on-deep);
    border-radius: var(--myo-r-md);
    box-shadow: var(--myo-el-3);
    font-size: var(--myo-fs-base);
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--myo-d-2) var(--myo-ez-in), transform var(--myo-d-2) var(--myo-ez), visibility var(--myo-d-2);
}
.sx-toast.on { opacity: 1; visibility: visible; transform: none; }
.sx-toast i { width: 6px; height: 6px; border-radius: 50%; background: var(--myo-brand); }
/* گونهٔ توست را utils.js به‌صورتِ `is-<type>` می‌نویسد؛ فقط نقطه رنگ عوض
   می‌کند، نه کلِ قاب — پیامِ خطا هم باید به همان اندازه خوانا باشد. */
.sx-toast.is-err i { background: var(--myo-danger-400); }
.sx-toast.is-ok i { background: var(--myo-ok-400); }

/* تاپ‌بار در عرضِ کم: اول نامِ کاربر و وضعیتِ اتصال می‌رود، بعد برچسبِ
   مقصدها — آیکن‌ها می‌مانند چون خودشان مقصد را می‌گویند. */
@media (max-width: 900px) {
    .sx-user-id { display: none; }
}
/* ══ ناوبریِ گوشی: نوارِ پایین ══════════════════════════════════════════════
   روی دسکتاپ مقصدها قرصِ کوچک‌اند وسطِ تاپ‌بار. روی گوشی همان‌جا بدترین جای
   ممکن است: بالای صفحه، دورترین نقطه از شست، و — چون در ۷۲۰ برچسب‌ها
   برداشته می‌شدند — چهار آیکنِ بی‌نام کنارِ هم. یعنی گران‌ترین جای صفحه خرجِ
   چیزی می‌شد که خوانده هم نمی‌شد.

   زیرِ ۷۲۰ همان `<nav>` به ته صفحه می‌رود: ستون‌های مساوی، آیکن با برچسبِ
   زیرش، و حالتِ فعال با رنگ و وزن. نشانه‌گذاری دست نمی‌خورد — همان دکمه‌ها،
   همان `data-nav-screen`، همان `is-active`ی که `showScreen()` می‌نویسد.

   دو صفحه نوار را نمی‌گیرند (`body[data-screen]`): ویزارد و استودیو. هر دو
   فوترِ خودشان را دارند با کنشِ اصلیِ خودشان، و هر دو یک *کار*ند نه یک
   مقصد — نوارِ مقصدها زیرشان هم جا را می‌خورد و هم دو «کنشِ اصلی» در یک
   نما می‌گذارد.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
    :root { --sx-botnav-h: 58px; }

    .sx-topbar { padding-inline: 12px; }

    /* با رفتنِ مقصدها از تاپ‌بار، وسطِ نوار خالی می‌شود — پس نامِ اپ
       برمی‌گردد. در ۳۶۰ پیکسل هم جا دارد. */
    .sx-logo span:not(.sx-logo-mark) { display: inline; }

    .sx-nav {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: 55;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: 0;
        height: calc(var(--sx-botnav-h) + env(safe-area-inset-bottom));
        padding-block-end: env(safe-area-inset-bottom);
        background: var(--myo-paper);
        border-top: 1px solid var(--myo-line);
    }

    .sx-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: var(--sx-botnav-h);
        min-height: 0;
        padding: 0 2px;
        border-radius: 0;
        background: none;
        color: var(--myo-ink-faint);
    }
    /* برچسب‌ها برمی‌گردند: در یک ستونِ ۹۰پیکسلی جا دارند، و آیکنِ بی‌نام
       همان چیزی بود که این بازچینش برای رفعش آمده. */
    .sx-nav-item span {
        display: block;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }
    .sx-nav-item svg { width: 21px; height: 21px; }

    /* روی لمس هاوری نیست؛ قاعدهٔ `:hover`ِ دسکتاپ فقط بعد از زدن گیر
       می‌کند و دکمه را «فعال»‌نما می‌گذارد. */
    .sx-nav-item:hover,
    .sx-nav-item:hover svg { background: none; color: inherit; }

    .sx-nav-item.is-active { background: none; color: var(--myo-brand-vivid); }
    .sx-nav-item.is-active svg { color: var(--myo-brand-vivid); }
    .sx-nav-item.is-active span { font-weight: 800; }

    /* صفحه باید زیرِ نوار جا باز کند، وگرنه آخرین کارت پشتش می‌ماند. */
    .sx-page { padding-bottom: calc(24px + var(--sx-botnav-h) + env(safe-area-inset-bottom)); }

    /* پیامِ شناور بالای نوار می‌نشیند، نه پشتش. */
    .sx-toast { inset-block-end: calc(12px + var(--sx-botnav-h) + env(safe-area-inset-bottom)); }

    /* ویزارد و استودیو: نوار نیست، پس صفحه هم جایی برایش باز نمی‌کند. */
    body[data-screen="wizard"] .sx-nav,
    body[data-screen="loading"] .sx-nav,
    body[data-screen="planStudio"] .sx-nav,
    body[data-screen="planStudioEdit"] .sx-nav { display: none; }

    /* بی‌نشست، مقصدی هم نیست. */
    .sx-anon .sx-nav { display: none; }
}

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

@media (max-width: 900px) {
    .sx-page { padding: 20px 16px 56px; }
    .sx-head { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 18px 20px; }
    .sx-head-actions { justify-content: flex-start; }
}

/* برچسبِ مقصدها فقط در نوارِ *بالا* برداشته می‌شود — یعنی بینِ ۷۲۱ و ۹۰۰،
   جایی که ناوبری هنوز در تاپ‌بار است و جا کم دارد. زیرِ ۷۲۰ ناوبری نوارِ
   پایین است و همان برچسب‌ها کارش را می‌کنند؛ بی این کفِ عرض، قاعده به
   آن‌جا هم می‌رسید و چهار آیکنِ بی‌نام برمی‌گشت. */
@media (min-width: 721px) and (max-width: 900px) {
    .sx-nav-item span { display: none; }
    .sx-nav-item { padding-inline: 10px; }
}

@media (max-width: 620px) {
    .sx-topbar { padding-inline: 12px; }
    .sx-head { padding: 16px; border-radius: var(--myo-r-xl); }
    /* بی این، پدینگِ صفحه به ۵۶ برمی‌گشت و آخرین کارت زیرِ نوارِ پایین
       می‌رفت (قاعدهٔ ۷۲۰ بالاتر در فایل است، پس این‌جا بازنویسی می‌شد). */
    .sx-head h1 { font-size: var(--myo-fs-xl); }
    .sx-stats { gap: 8px; }
    .sx-stat { padding: 11px; padding-inline-start: 15px; }
    .sx-row { padding-inline: 14px; }
    .sx-card-body { padding: 14px; }
}

/* ══ گوشی ══════════════════════════════════════════════════════════════════
   سه چیز که با «باریک‌ترشدنِ ستون‌ها» حل نمی‌شوند و اعلانِ صریح می‌خواهند:

     ① **هدفِ لمس.** توکنِ ارتفاع در ≤۷۲۰px بالا رفته (tokens.css §۷)، ولی
        هر دکمه‌ای که قدش را با `padding` ساخته از آن توکن نمی‌خواند —
        `min-height` این‌جا کفِ همه‌شان است.
     ② **ناحیهٔ امنِ سخت‌افزار.** روی آیفون، نوارِ خانه روی ته صفحه می‌افتد
        و هر چیزی که به `inset-block-end: 0` چسبیده باشد زیرش می‌رود.
     ③ **مودال روی گوشی برگهٔ پایین است، نه کارتِ وسط.** کارتِ وسط‌چین
        با صفحه‌کلیدِ باز بالا می‌پرد و نصفش بیرونِ نما می‌ماند؛ برگه‌ای
        که به ته چسبیده همان‌جا می‌ماند و انگشت هم به دکمه‌هایش می‌رسد.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
    /* ① کفِ هدفِ لمس. `.sx-nav-item` این‌جا نیست: زیرِ ۷۲۰ خودش ستونِ
       نوارِ پایین است و قدش را از `--sx-botnav-h` می‌گیرد (۵۸ > ۴۴). */
    .sx-user-btn,
    .sx-menu-item,
    .sx-seg button { min-height: 40px; }

    .sx-logo { min-height: 40px; }

    .sx-modal-x { width: 40px; height: 40px; margin: -6px -8px 0 0; }
    .sx-modal-x svg { width: 18px; height: 18px; }

    /* ② ناحیهٔ امن. ته صفحه حالا دو چیز را باید پاس بدهد: نوارِ خانهٔ
       سخت‌افزار *و* نوارِ ناوبری. (این بند بعد از بندِ ناوبری در فایل
       است، پس هر عددی که این‌جا بنویسی آن را بازنویسی می‌کند.) */
    .sx-page { padding-bottom: calc(24px + var(--sx-botnav-h) + env(safe-area-inset-bottom)); }
    .sx-topbar { padding-inline: max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-left)); }
    .sx-toast {
        inset-inline: 12px;
        inset-block-end: calc(12px + var(--sx-botnav-h) + env(safe-area-inset-bottom));
        justify-content: center;
    }
    /* در ویزارد و استودیو نواری نیست، پس فضایش هم رزرو نمی‌شود. */
    body[data-screen="wizard"] .sx-page,
    body[data-screen="planStudio"] .sx-page,
    body[data-screen="planStudioEdit"] .sx-page { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ── لمس، مستقل از عرض ────────────────────────────────────────────────────
   گوشیِ چرخیده هنوز گوشی است: در ۸۴۴×۳۹۰ هیچ‌کدام از بندهای بالا نمی‌گیرند
   چون همه‌شان به *عرض* بسته‌اند، ولی انگشت همان انگشت است. این بند به نوعِ
   اشاره‌گر بسته است، نه به عرض.

   عمداً کوچک است و فقط کنترل‌های *بیرونِ* ویزارد و استودیو را می‌گیرد: آن دو
   بودجهٔ ارتفاعِ سفت دارند (قاعدهٔ «یک نما، بی اسکرول») و بزرگ‌کردنِ کنترل‌ها
   روی تبلتِ ۱۰۲۴ سرریزشان می‌کند. همان ‌جاها مرزِ عرض را دارند.
   ───────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .sx-user-btn,
    .sx-menu-item,
    .sx-logo { min-height: 44px; }
    /* در نوارِ پایین قد از خودِ نوار می‌آید؛ بیرونِ آن (تبلت، گوشیِ
       چرخیده در ۸۴۴ عرض) همان کفِ ۴۴ لازم است. */
    .sx-topbar .sx-nav-item { min-height: 44px; }
    .sx-modal-x { width: 44px; height: 44px; }
    /* `.sx-tool` این‌جا نیست: تعریفش در myo-app.css است که *بعد* از این
       فایل بار می‌شود، و مدیا-کوئری ویژگی اضافه نمی‌کند — پس قاعده‌اش
       همان‌جا نوشته شده. */
}

@media (max-width: 620px) {
    /* ③ برگهٔ پایین */
    .sx-modal { place-items: end center; padding: 0; }
    .sx-modal-box {
        width: 100%;
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        border-radius: var(--myo-r-2xl) var(--myo-r-2xl) 0 0;
        /* از پایین می‌آید، نه از وسط — همان جهتی که بسته می‌شود. */
        transform: translateY(14px);
    }

    /* دکمه‌های ته مودال روی گوشی کنارِ هم جا نمی‌شوند و آخری‌شان از قاب
       بیرون می‌زد. ستونِ وارونه: اقدامِ اصلی (که در نشانه‌گذاری آخر است)
       بالا می‌آید، یعنی نزدیک‌ترین جا به شست. */
    .sx-modal-foot {
        flex-direction: column-reverse;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .sx-modal-foot > .sx-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   آینه‌کردنِ آیکن‌های جهت‌دار در حالتِ انگلیسی
   Mirroring directional glyphs in LTR

   این آیکن‌ها SVGِ این‌لاین‌اند و مسیرشان در جاوااسکریپت و بلید نوشته شده،
   پس با `dir` خودشان برنمی‌گردند: فلشِ «برو» در RTL به چپ اشاره می‌کند و در
   LTR باید به راست اشاره کند، وگرنه دکمهٔ «Continue» فلشِ «بازگشت» دارد.

   **چرا فهرستِ صریح و نه یک قاعدهٔ فراگیر:** `svg { transform: scaleX(-1) }`
   روی کلِ اپ، تیک و ذره‌بین و آیکنِ عضله را هم برمی‌گرداند — و برگشتنِ یک
   تیک دقیقاً همان باگی است که [[rtl-control-pitfalls]] ماه‌ها ندیده بود.
   هر سلکتورِ این‌جا یک عنصرِ تک‌آیکنی است که تنها محتوایش همان فلش است.

   `translateX` های hover هم جهت دارند و همان‌جا وارونه می‌شوند.
   ══════════════════════════════════════════════════════════════════════════ */
html[dir="ltr"] .sx-row-go svg,
html[dir="ltr"] .hm-chev,
html[dir="ltr"] .pl-caret svg{ transform: scaleX(-1); }

html[dir="ltr"] .sx-row:hover .sx-row-go { transform: translateX(3px); }

/* کارتِ باز شدهٔ پوشه: چرخشِ ۹۰ درجه هم جهت دارد. آیکنِ درونش از قبل
   آینه شده، پس چرخش باید در جهتِ مخالف باشد تا باز هم «رو به پایین» شود. */
html[dir="ltr"] .pl-folder.is-open .pl-caret { transform: rotate(90deg); }

/* فلشِ `.sx-select` یک background-image است، نه SVGِ این‌لاین؛ پس با
   `dir` جابه‌جا نمی‌شود. در RTL سمتِ چپ می‌نشیند (درست)، ولی در LTR باید
   به راست برود — وگرنه روی خودِ متن می‌افتد، چون `padding-inline` جای
   خالی را در انتها باز کرده است. */
html[dir="ltr"] .sx-select { background-position: right 10px center; }