/* ============================================================================
   plans-list.css — صفحهٔ «برنامه‌ها»

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

   این بازطراحی سه کار می‌کند و هر سه از خودِ داده می‌آیند، نه از تزیین:

     ۱) **ریتمِ زمانی.** سطرها زیرِ سرگروه‌های «امروز / دیروز / ۷ روزِ
        گذشته / شهریور ۱۴۰۵» می‌نشینند. همان ۴۶ سطر، ولی حالا صفحه بند
        دارد و مربی می‌داند کجای زمان ایستاده است.
     ۲) **هویتِ سطر.** آیکنِ تکراریِ سند جای خود را به حرفِ اولِ شاگرد داد.
        قاعدهٔ `sx-av` سرِ جایش است — رنگِ تصادفی نداریم — ولی حرف که در
        هر سطر فرق می‌کند، همان تنوعی است که فهرست لازم داشت، و برنامه‌های
        یک شاگرد را هم کنارِ هم نشان می‌دهد.
     ۳) **فرکانس به‌جای جمله.** «۴ جلسه در هفته» در هر سطر تکرار می‌شد و
        خوانده نمی‌شد. حالا هفت میله است؛ تفاوتِ ۴ و ۶ جلسه از دور دیده
        می‌شود، بی‌آنکه لازم باشد متن خوانده شود.

   و یک حذف: کاشی‌های آمار و زبانه‌های وضعیت **یک کار می‌کردند** (فیلترِ
   وضعیت) و دو ردیفِ کاملِ صفحه را می‌خوردند. حالا یک ردیف‌اند: هر کاشی
   هم عددِ خودش را می‌گوید هم فیلترِ خودش است.

   فضای نام `pl-` عمداً از `sx-` جداست: `sx-row` و `sx-stat` را چهار صفحهٔ
   دیگر هم می‌پوشند و این بازطراحی نباید به آن‌ها سرایت کند.
   ============================================================================ */


/* ══ ۱. نوارِ وضعیت — هم شمارش، هم فیلتر ══════════════════════════════════
   پنج قرص: همه، فعال، پیش‌نویس، نیازمندِ بازبینی، آرشیو.

   دورِ اول اینها پنج کاشیِ تمام‌عرض بودند (مثلِ `sx-stat`) و هرکدام ۲۲۶px
   می‌گرفتند برای ۱۱۸px محتوا — یعنی نیمی از نوار فضای مرده بود، و همان
   «خشکی»ای که قرار بود درمان شود. حالا قرص به اندازهٔ محتوایش است و
   ردیف به لبهٔ شروع می‌چسبد؛ فضای آزادشده به فهرست می‌رسد.

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

.pl-scope {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.pl-sc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 10px 12px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-lg);
    background: var(--myo-paper);
    color: var(--myo-ink-2);
    font-size: var(--myo-fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--myo-d-1) var(--myo-ez-in),
                background var(--myo-d-1) var(--myo-ez-in),
                color var(--myo-d-1) var(--myo-ez-in);
    box-shadow: var(--myo-el-card);
}
.pl-sc:hover { border-color: var(--myo-line-3); }

/* قرصِ انتخاب‌شده: `is-on` است نه `on` — کنترلِ درونِ صفحه، نه لایهٔ شناور. */
.pl-sc.is-on {
    border-color: var(--myo-brand-line);
    background: var(--myo-brand-soft);
    color: var(--myo-brand-ink);
    font-weight: 700;
}
.pl-sc.is-on .pl-sc-n { background: var(--myo-brand); color: var(--myo-on-fill); }

/* عددِ صفر یعنی «این‌جا چیزی نیست» — قرص نباید همان وزنِ بقیه را داشته باشد،
   ولی حذف هم نمی‌شود: جای خالی‌اش ردیف را هر بار جابه‌جا می‌کرد. */
.pl-sc.is-empty { opacity: .48; }
.pl-sc.is-empty.is-on { opacity: 1; }

.pl-sc-ic {
    flex: none;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: var(--myo-r-sm);
    background: var(--myo-surface-2);
    color: var(--myo-ink-muted);
}
.pl-sc-ic svg { width: 13px; height: 13px; }

.pl-sc[data-tone="all"]  .pl-sc-ic { background: var(--myo-brand-soft); color: var(--myo-brand-ink); }
.pl-sc[data-tone="ok"]   .pl-sc-ic { background: var(--myo-ok-soft);    color: var(--myo-ok); }
.pl-sc[data-tone="warn"] .pl-sc-ic { background: var(--myo-warn-soft);  color: var(--myo-warn); }

.pl-sc-l { white-space: nowrap; }

/* شمارش یک قرصِ ریز است، نه عددِ چسبیده به برچسب: بدونِ ظرف، «۳۰» و
   «نیازمندِ بازبینی» یک رشتهٔ واحد خوانده می‌شدند. */
.pl-sc-n {
    flex: none;
    min-width: 22px;
    height: 19px;
    padding-inline: 5px;
    display: grid; place-items: center;
    border-radius: var(--myo-r-pill);
    background: var(--myo-surface-2);
    color: var(--myo-ink-2);
    font-size: var(--myo-fs-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.pl-sc[data-tone="warn"] .pl-sc-n { background: var(--myo-warn-soft); color: var(--myo-warn); }
.pl-sc[data-tone="warn"].is-on { border-color: var(--myo-warn); background: var(--myo-warn-soft); color: var(--myo-warn); }
.pl-sc[data-tone="warn"].is-on .pl-sc-n { background: var(--myo-warn); color: var(--myo-on-fill); }


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

/* ارتفاعِ نوار باید *عدد* باشد، نه چیزی که از محتوا درمی‌آید: سرگروهِ چسبان
   باید دقیقاً زیرِ آن بایستد. دورِ اول این عدد را با ذهن حساب کردم و پدینگ و
   خطِ خودِ `.pl-bar` از قلم افتاد — سرگروه ۱۸px زیرِ نوار گیر می‌کرد و
   نصفش دیده نمی‌شد. حالا یک توکنِ محلی است و هر دو از آن می‌خوانند. */
#scrPlansList { --pl-bar-h: 74px; }

/* این صفحه یک ستونِ فهرست است، نه یک چیدمانِ دوستونه مثلِ «شاگردها».
   در ۱۱۸۰px ستونِ عنوان ۷۴۰px می‌شد و عنوان‌ها ۲۵۰–۴۵۰px — یعنی تا ۴۹۰px
   ناودانِ خالی وسطِ هر سطر. یک پله باریک‌تر، همان ترازِ ستونی را نگه
   می‌دارد و حفره را نصف می‌کند. */
#scrPlansList .sx-page { width: min(100%, 1040px); }

.pl-bar-wrap {
    position: sticky;
    top: var(--sx-topbar-h);
    z-index: 6;
    padding-block: 14px 10px;
    background: var(--myo-canvas);
}

.pl-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding-inline: 10px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-lg);
    background: var(--myo-paper);
    box-shadow: var(--myo-el-card);
}
.pl-bar .sx-field { flex: 1 1 240px; min-width: 150px; border-color: var(--myo-line); }
/* `min-width: 0` اجازه می‌داد سلکت تا صفر جمع شود و در انگلیسی «Latest
   activity» نیمه بریده می‌شد — برچسب‌های انگلیسی از فارسی پهن‌ترند. عددِ
   ثابت جواب نمی‌دهد چون طولِ برچسب به زبان بسته است؛ `max-content` کفِ
   جمع‌شدن را روی خودِ متن می‌گذارد. جای جمع‌شدن را جستجو می‌دهد که
   `flex: 1 1 240px` دارد. */
.pl-bar .sx-select { flex: 0 1 auto; min-width: max-content; border-color: var(--myo-line); }
.pl-mode { flex: none; height: var(--myo-h-lg); align-items: center; }

/* شمارشِ نتیجه به لبهٔ پایانی می‌چسبد و با یک جداکنندهٔ عمودی از کنترل‌ها
   جدا می‌شود: عدد است، نه کنترل. */
.pl-bar-count {
    flex: none;
    margin-inline-start: auto;
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--myo-line);
    font-size: var(--myo-fs-sm);
    color: var(--myo-ink-muted);
    white-space: nowrap;
}
.pl-bar-count b {
    color: var(--myo-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* ══ ۳. گروهِ زمانی ════════════════════════════════════════════════════════
   سرگروه هم چسبان است، دقیقاً یک پله زیرِ نوارِ ابزار.
   خطِ افقی فاصله را پر می‌کند تا سرگروه یک عنوانِ شناور نباشد. */

.pl-group + .pl-group { margin-top: 18px; }

.pl-group-head {
    position: sticky;
    top: calc(var(--sx-topbar-h) + var(--pl-bar-h));
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block: 6px 8px;
    background: var(--myo-canvas);
}
.pl-group-head b {
    flex: none;
    font-size: var(--myo-fs-sm);
    font-weight: 800;
    color: var(--myo-ink-2);
    letter-spacing: -.1px;
}
.pl-group-head span {
    flex: 1;
    height: 1px;
    background: var(--myo-line-2);
}
.pl-group-head i {
    flex: none;
    font-style: normal;
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    color: var(--myo-ink-faint);
    font-variant-numeric: tabular-nums;
}


/* ══ ۴. پوشهٔ شاگرد — نمای پیش‌فرض ════════════════════════════════════════
   واحدِ فهرست «شاگرد» است، نه «برنامه». ۴۸ برنامه برای ۲۰ شاگرد بود و
   صفحه ~۳۴۰۰px می‌شد؛ بیست پوشهٔ بسته ~۱۱۰۰px است و — مهم‌تر — با
   ساخته‌شدنِ برنامه‌های تازه بلندتر *نمی‌شود*. این همان چیزی است که
   «خیلی اسکرول می‌شود» را می‌بندد؛ فشرده‌کردنِ سطر فقط تعویقش می‌انداخت. */

/* بیست قاب با فاصله بینشان، بیست جزیره بود — ۱۲۰px فضای مرده و یک
   فهرستِ «شل». حالا یک قاب است با خطِ مویی بینِ پوشه‌ها، مثلِ خودِ فهرستِ
   برنامه‌ها. پوشهٔ باز از قاب بیرون می‌زند تا مرزش دیده شود. */
.pl-folders {
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-lg);
    background: var(--myo-paper);
    box-shadow: var(--myo-el-card);
}

.pl-folder {
    border-bottom: 1px solid var(--myo-line);
    animation: pl-in var(--myo-d-3) var(--myo-ez) backwards;
    animation-delay: calc(min(var(--i, 0), 14) * 18ms);
}
.pl-folder:last-child { border-bottom: 0; }
.pl-folder:first-child .pl-folder-head { border-start-start-radius: var(--myo-r-lg); border-start-end-radius: var(--myo-r-lg); }
.pl-folder:last-child  .pl-folder-head { border-end-start-radius: var(--myo-r-lg);   border-end-end-radius: var(--myo-r-lg); }

/* پوشهٔ باز یک قابِ درونی می‌گیرد تا معلوم باشد کجا شروع و کجا تمام می‌شود. */
.pl-folder.is-open { background: var(--myo-surface); }
.pl-folder.is-open .pl-folder-head { background: var(--myo-brand-soft); border-radius: 0; }
.pl-folder.is-open:first-child .pl-folder-head { border-start-start-radius: 7px; border-start-end-radius: 7px; }

/* ── سرِ پوشه — تک‌خطی ──────────────────────────────────────────────────
   دورِ اول دو خط بود (نام بالا، «۲۴ برنامه · آخرین…» پایین) و ۶۷px ارتفاع
   می‌گرفت؛ ضربِ آن در بیست شاگرد همان اسکرولی است که قرار بود برود.
   تک‌خطی ۴۲px است و چون متا کنارِ نام می‌نشیند، حفرهٔ وسطِ سطر هم
   کوچک‌تر می‌شود. */
.pl-folder-head {
    position: relative;
    display: grid;
    grid-template-columns: 16px 28px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 12px;
    /* ۷px بالا/پایین ردیف را به یک خطِ جدول تبدیل می‌کرد. فهرستِ شاگرد
       چیزی است که مربی *می‌خواند*، نه اسکن می‌کند؛ نفس لازم دارد. */
    padding: 11px 14px;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.pl-folder-head:hover { background: var(--myo-surface); }
.pl-folder-head:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--myo-brand-200); }

/* نام و متا روی یک خط: نام پُررنگ، بقیه کم‌رنگ، و اگر جا کم آمد فقط
   نام است که کوتاه می‌شود. */
.pl-fname {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: var(--myo-fs-sm);
    color: var(--myo-ink-muted);
}
.pl-fname > b:first-child {
    font-size: var(--myo-fs-md);
    font-weight: 700;
    color: var(--myo-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-fname b { color: var(--myo-ink-2); font-weight: 700; }
.pl-fname > span, .pl-fname time { flex: none; white-space: nowrap; }

/* پیکان در RTL به *چپ* نگاه می‌کند (جهتِ «جلو») و با بازشدن ۹۰ درجه
   می‌چرخد تا به پایین برسد. `SX_ICON.go` خودش رو به چپ است، پس چرخشِ
   منفی لازم است نه مثبت. */
.pl-caret {
    display: grid; place-items: center;
    color: var(--myo-ink-disabled);
    transition: transform var(--myo-d-2) var(--myo-ez), color var(--myo-d-1) var(--myo-ez-in);
}
.pl-caret svg { width: 15px; height: 15px; }
.pl-folder.is-open .pl-caret { transform: rotate(-90deg); color: var(--myo-brand-ink); }
.pl-folder-head:hover .pl-caret { color: var(--myo-ink-muted); }

.pl-folder-head .pl-av { width: 28px; height: 28px; font-size: var(--myo-fs-sm); }
.pl-folder-head:hover .pl-av { background: var(--myo-brand-soft); color: var(--myo-brand-ink); }
.pl-folder.is-open .pl-av { background: var(--myo-brand); color: var(--myo-on-fill); }

/* نوارِ وضعیت *کنارِ* نام می‌نشیند، نه در ستونِ جداگانه‌ای در لبهٔ چپ.
   با ستونِ جدا، ۵۰۰px فضای خالی بینِ نام و نشان می‌افتاد و سرِ پوشه دو
   جزیرهٔ بی‌ربط می‌شد. */
.pl-mix { display: flex; align-items: center; gap: 5px; margin-inline-start: 3px; }
.pl-mix .pl-state { gap: 4px; padding-inline: 7px; }
.pl-mix .pl-state svg { width: 11px; height: 11px; }

/* ── بدنهٔ پوشه ───────────────────────────────────────────────────────────
   بازشدن با `grid-template-rows: 0fr → 1fr` است، نه `max-height` با یک
   عددِ حدسی: ارتفاعِ واقعیِ محتوا هر بار فرق می‌کند و عددِ حدسی یا محتوا
   را می‌بُرد یا یک مکثِ خالی می‌گذارد. */
.pl-folder-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--myo-d-3) var(--myo-ez);
}
.pl-folder-body > div { overflow: hidden; }
.pl-folder.is-open .pl-folder-body { grid-template-rows: 1fr; }

.pl-folder-body .pl-list {
    border: 0;
    border-radius: 0;
    background: var(--myo-paper);
    margin: 0 8px 8px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-md);
}
/* سطرهای درونِ پوشه گوشهٔ گرد لازم ندارند — قابِ پوشه خودش گرد است. */
.pl-folder-body .pl-item:first-child,
.pl-folder-body .pl-item:last-child { border-radius: 0; }
.pl-folder-body .pl-item:last-child { border-bottom: 0; }

.pl-folder-more {
    width: calc(100% - 16px);
    margin: -4px 8px 8px;
    padding: 7px;
    border: 1px dashed var(--myo-line-2);
    border-radius: var(--myo-r-md);
    color: var(--myo-brand-ink);
    font-size: var(--myo-fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.pl-folder-more:hover { background: var(--myo-brand-soft); }
.pl-folder.is-full .pl-folder-more { display: none; }
/* سقفِ پنج‌تایی: بدونِ آن، شاگردی با ۲۴ برنامه همان دیوارِ اسکرول را
   برمی‌گرداند — فقط یک کلیک دیرتر. */
.pl-folder:not(.is-full) .pl-folder-body .pl-item:nth-child(n+6) { display: none; }


/* ══ ۴. سطرِ برنامه ════════════════════════════════════════════════════════ */

/* گردیِ گوشه‌ها روی *سطرِ اول و آخر* نشسته، نه `overflow: hidden` روی قاب.
   با `overflow: hidden` منوی «بیشتر» — که یک لایهٔ شناور است و از سطر
   بیرون می‌زند — نصفه بریده می‌شد؛ دو گزینهٔ آخرش اصلاً دیده نمی‌شدند. */
.pl-list {
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-lg);
    background: var(--myo-paper);
    box-shadow: var(--myo-el-card);
}
.pl-item:first-child { border-start-start-radius: 7px; border-start-end-radius: 7px; }
.pl-item:last-child  { border-end-start-radius: 7px;   border-end-end-radius: 7px; }
/* ریلِ هاور هم باید همان گوشه را بگیرد، وگرنه از گردیِ قاب بیرون می‌زند. */
.pl-item:first-child::before { border-start-start-radius: 7px; }
.pl-item:last-child::before  { border-end-start-radius: 7px; }

/* سطری که منویش باز است باید بالای سرگروهِ چسبان و سطرهای بعدی بنشیند. */
.pl-item:has(.sx-pop-menu.on) { z-index: 30; }

.pl-item {
    position: relative;
    display: grid;
    /* سه ستونِ آخر عرضِ *ثابت* دارند، نه `auto`. هر سطر گریدِ خودش است، پس
       با `auto` میله‌ها و نشان‌ها در هر سطر چند پیکسل جابه‌جا می‌نشستند و
       ستونِ عنوان هم هر بار عرضِ دیگری داشت — فهرست ناخوانا بود و فاصلهٔ
       وسطِ سطر «حفره» دیده می‌شد. با عرضِ ثابت همان فاصله یک ناودانِ تراز
       است، و چشم می‌تواند ستونِ «جلسه» یا «وضعیت» را عمودی بخواند. */
    /* ستونِ آخر (ابزارها) تنها ستونی است که `auto` می‌گیرد: نشانِ «نظر
       نداده‌ای» فقط روی *بعضی* سطرها هست و تا دیروز هیچ ستونی نداشت —
       گرید یک ستونِ ضمنیِ هفتم می‌ساخت و سطر از قاب بیرون می‌زد (در
       ۳۶۰ پیکسل ستونِ عنوان به نوزده پیکسل می‌رسید). حالا نشان داخلِ
       همان گروهِ ابزار است و ستون به اندازهٔ محتوایش باز می‌شود.
       سطرهای بی‌نشان دقیقاً همان ۹۸ پیکسلِ قبل را دارند، پس ترازِ
       ستون‌های دیگر دست‌نخورده می‌ماند. */
    grid-template-columns: 34px minmax(0, 1fr) 104px 112px 118px minmax(98px, auto);
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--myo-line);
    cursor: pointer;
    transition: background var(--myo-d-1) var(--myo-ez-in);
    /* `backwards` است نه `both`، و این یک باگِ واقعی را می‌بندد: با `both`
       اثرِ انیمیشن برای همیشه روی عنصر می‌ماند، یعنی `transform` همیشه
       «متحرک» حساب می‌شود و سطر یک بافتِ چیدمانِ تازه می‌سازد — منوی
       «بیشتر» با `z-index: 20` هم داخلِ همان سطر زندانی می‌شد و زیرِ
       سطرهای بعدی می‌رفت. `backwards` فقط حالتِ *پیش از* شروع را نگه
       می‌دارد (که با تأخیرِ پلکانی همان چیزی است که لازم داریم) و بعدِ
       پایان اثری نمی‌گذارد. */
    animation: pl-in var(--myo-d-3) var(--myo-ez) backwards;
    animation-delay: calc(min(var(--i, 0), 14) * 18ms);
}
.pl-item:last-child { border-bottom: 0; }
.pl-item:hover { background: var(--myo-surface); }
.pl-item:focus-visible {
    outline: 0;
    background: var(--myo-surface);
    box-shadow: inset 0 0 0 2px var(--myo-brand-200);
}

@keyframes pl-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

/* ریلِ ورودی روی لبهٔ *شروع* (در RTL یعنی راست) — جایی که چشم وارد سطر
   می‌شود. فقط در هاور/فوکوس؛ نشانِ دائمی روی سطرها نمی‌گذاریم، چون در این
   داده ۳۰ سطر از ۴۶ «نیازمندِ بازبینی»اند و فهرست راه‌راه می‌شد. */
.pl-item::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--myo-brand);
    transform: scaleY(0);
    transition: transform var(--myo-d-2) var(--myo-ez);
}
.pl-item:hover::before,
.pl-item:focus-visible::before { transform: scaleY(1); }

/* ── سطرِ تودرتو: تک‌خطی ──────────────────────────────────────────────────
   داخلِ پوشه، آواتار و نامِ شاگرد تکرارِ سرِ پوشه‌اند و حذف می‌شوند؛ زمان
   از خطِ متا به ستونِ خودش می‌رود و سطر یک‌خطی می‌شود. ۲۴ برنامهٔ یک
   شاگرد از ~۱۵۰۰px به ~۹۶۰px می‌آید. */
.pl-item.is-nested {
    grid-template-columns: 20px minmax(0, 1fr) 96px 104px 112px 118px minmax(98px, auto);
    gap: 12px;
    padding-block: 7px;
}
.pl-item.is-nested .pl-title { font-size: var(--myo-fs-base); font-weight: 600; }

/* نشانهٔ شاخه — یک نقطهٔ ریز، نه خطِ درختیِ تمام‌عیار: در RTL خطِ درختی
   باید آینه شود و در عملْ فقط شلوغی اضافه می‌کرد. */
.pl-nest {
    justify-self: center;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--myo-line-3);
    transition: background var(--myo-d-2) var(--myo-ez-in);
}
.pl-item.is-nested:hover .pl-nest { background: var(--myo-brand); }

.pl-when {
    font-size: var(--myo-fs-sm);
    color: var(--myo-ink-muted);
    white-space: nowrap;
}


/* ── آواتار ───────────────────────────────────────────────────────────── */
.pl-av {
    width: 34px; height: 34px;
    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-md);
    font-weight: 800;
    transition: background var(--myo-d-2) var(--myo-ez-in), color var(--myo-d-2) var(--myo-ez-in);
}
.pl-item:hover .pl-av {
    background: var(--myo-brand-soft);
    color: var(--myo-brand-ink);
}

/* ── ستونِ متن ────────────────────────────────────────────────────────── */
.pl-main { min-width: 0; }

.pl-title {
    display: block;
    font-size: var(--myo-fs-md);
    font-weight: 700;
    color: var(--myo-ink);
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    font-size: var(--myo-fs-sm);
    color: var(--myo-ink-muted);
    min-width: 0;
}
.pl-meta > * { min-width: 0; }
.pl-meta time { white-space: nowrap; }

/* نقطهٔ جداکننده — کاراکترِ «·» در RTL کنارِ عدد جای بی‌ربط می‌پرید. */
.pl-sep {
    flex: none;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--myo-line-3);
}

/* نامِ شاگرد یک کنشِ واقعی است (فیلتر می‌کند)، پس باید دکمه دیده شود — ولی
   زیرخطِ نقطه‌چینِ قبلی متن را شکسته نشان می‌داد. */
.pl-who {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--myo-ink-muted);
    font-size: var(--myo-fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--myo-d-1) var(--myo-ez-in);
}
.pl-who:hover { color: var(--myo-brand-ink); text-decoration: underline; text-underline-offset: 3px; }

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

   میله‌ها `sx-wk` هستند — همان مؤلفه‌ای که «برنامه‌های اخیرِ» میزکار هم از
   قبل داشت. اول اینجا نسخهٔ دومی از آن ساختم؛ دو مؤلفهٔ هم‌شکل با دو نام
   دقیقاً همان چیزی است که «یک‌دست» نبودن از آن درمی‌آید. این‌جا فقط
   *چیدمانِ ستون* و یک پاسخِ هاور اضافه می‌شود. */
.pl-freq { justify-content: flex-start; }
.pl-item:hover .sx-wk-dots i.on { background: var(--myo-brand-500); }

.pl-freq-l {
    font-size: var(--myo-fs-sm);
    color: var(--myo-ink-muted);
    white-space: nowrap;
}
.pl-freq-l b {
    color: var(--myo-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── نشانِ وضعیت ─────────────────────────────────────────────────────────
   قرصِ کم‌رنگ با یک نقطه. چهار وضعیت، چهار تُن، و هیچ‌کدام پُر نیستند —
   وضعیت خبر است نه اقدام. */
.pl-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding-inline: 9px;
    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;
}
.pl-item > .pl-state { justify-self: start; }
.pl-state i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pl-state.is-ok   { background: var(--myo-ok-soft);   color: var(--myo-ok); }
.pl-state.is-warn { background: var(--myo-warn-soft); color: var(--myo-warn); }
.pl-state.is-off  { background: transparent; color: var(--myo-ink-faint); box-shadow: inset 0 0 0 1px var(--myo-line-2); }

/* نسخهٔ دومِ نشان، درونِ خطِ متا. فقط در نمای باریک زنده می‌شود — آن‌جا
   ستونِ وضعیت می‌افتد و نشان باید جایی برای رفتن داشته باشد. */
.pl-meta .pl-state { display: none; }

/* ── تمدید ───────────────────────────────────────────────────────────────
   ستونِ خودش را دارد و نه یک تکه در خطِ متا: مربی این فهرست را *عمودی*
   می‌خواند تا ببیند کدام شاگرد وقتش رسیده، و برای عمودی‌خواندن ستون لازم
   است. سطرِ آرشیو نشان نمی‌گیرد ولی خانهٔ خالی‌اش سرِ جاست (`is-none`)،
   وگرنه ستون‌های بعدیِ همان سطر یک پله جابه‌جا می‌شدند. */
.pl-renew {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    justify-self: start;
    min-width: 0;
    color: var(--myo-ink-muted);
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    line-height: 1.35;
}
.pl-renew b { font-size: var(--myo-fs-sm); font-weight: 800; color: var(--myo-ink); }
.pl-renew-l { min-width: 0; }
.pl-renew.is-none { display: block; }
.pl-meta .pl-renew { display: none; }

/* سه پله، و نه یک پله: «۳ روز مانده» و «۳ روز گذشته» دو خبرِ متفاوت‌اند و
   اگر هر دو نارنجی باشند مربی باید متن را بخواند تا بفهمد کدام است. */
.pl-renew.is-soon b,
.pl-renew.is-soon    { color: var(--myo-warn); }
.pl-renew.is-due b,
.pl-renew.is-due     { color: var(--myo-warn-fill); }
.pl-renew.is-over b,
.pl-renew.is-over    { color: var(--myo-danger); }

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

   کم‌رنگی با *رنگ* گفته می‌شود نه با `opacity`: شفافیت زمینهٔ هاورِ خودِ
   دکمه را هم می‌بُرد و کلیدها بی‌بازخورد می‌شدند. */
.pl-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}
.pl-tools .sx-tool { color: var(--myo-line-3); }
.pl-item:hover .pl-tools .sx-tool,
.pl-item:focus-within .pl-tools .sx-tool { color: var(--myo-ink-muted); }
.pl-tools .sx-tool:hover { color: var(--myo-ink); }


/* ══ ۵. اسکلتِ بارگذاری ═══════════════════════════════════════════════════
   شکلش باید *همان* شکلِ سطرِ واقعی باشد، وگرنه لحظهٔ جایگزینی صفحه می‌پرد. */

.pl-skel .pl-item { cursor: default; animation: none; }
.pl-skel .pl-item::before { display: none; }
.pl-skel-line {
    display: block;
    height: 10px;
    border-radius: var(--myo-r-sm);
    background: linear-gradient(90deg, var(--myo-surface-2) 25%, var(--myo-surface) 50%, var(--myo-surface-2) 75%);
    background-size: 240% 100%;
    animation: pl-shimmer 1.4s linear infinite;
}
.pl-skel-av {
    width: 34px; height: 34px;
    border-radius: var(--myo-r-md);
    background: var(--myo-surface-2);
}
@keyframes pl-shimmer {
    from { background-position: 240% 0; }
    to   { background-position: -240% 0; }
}


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

.pl-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 56px 24px;
    border: 1px dashed var(--myo-line-2);
    border-radius: var(--myo-r-lg);
    background: var(--myo-paper);
    text-align: center;
}
.pl-empty-ic {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--myo-r-lg);
    background: var(--myo-brand-soft);
    color: var(--myo-brand-ink);
    margin-bottom: 2px;
}
.pl-empty-ic svg { width: 21px; height: 21px; }
.pl-empty b { font-size: var(--myo-fs-md); color: var(--myo-ink); }
.pl-empty p { font-size: var(--myo-fs-base); color: var(--myo-ink-muted); max-width: 40ch; }
.pl-empty .sx-btn { margin-top: 8px; }
.pl-empty.is-err .pl-empty-ic { background: var(--myo-danger-soft); color: var(--myo-danger); }


/* ══ ۷. باریک‌شدن ═════════════════════════════════════════════════════════
   ترتیبِ افتادن از کم‌ارزش‌ترین شروع می‌شود: اول برچسبِ فرکانس، بعد میله‌ها،
   بعد نشانِ وضعیت به خطِ متا می‌رود. عنوان و ابزار هیچ‌وقت نمی‌افتند. */

/* زیرِ ۹۶۰ نوارِ ابزار به دو خط می‌شکند، و آن‌جا دو چیز با هم خراب می‌شوند:
   ارتفاعِ ثابتِ ۵۰ که محتوا از آن بیرون می‌زند، و `--pl-bar-h` که دیگر
   درست نیست پس سرگروهِ چسبان زیرِ نوار گم می‌شود. جوابْ چسبان‌نبودن است:
   در این عرض، نوارِ دوخطی بیش از یک‌پنجمِ نما را می‌خورد و چسباندنش به
   ضررِ خودِ فهرست تمام می‌شود. */
@media (max-width: 960px) {
    .pl-freq-l { display: none; }
    /* عدد می‌ماند، واژه می‌رود — همان کاری که ستونِ «جلسه» می‌کند. متنِ
       کامل در تولتیپِ همان نشان هست. */
    .pl-item > .pl-renew .pl-renew-l { display: none; }
    .pl-item > .pl-renew:not(:has(b)) .pl-renew-l { display: inline; }

    .pl-bar-wrap { position: static; padding-block: 14px 10px; }
    .pl-bar { height: auto; flex-wrap: wrap; padding-block: 8px; }
    .pl-bar .sx-field { flex-basis: 100%; }
    .pl-bar-count { margin-inline-start: auto; }

    .pl-group-head { position: static; }
}

@media (max-width: 720px) {
    /* در سطرِ تودرتو `pl-meta` وجود ندارد، پس نشانِ وضعیت جایی برای کوچ
       ندارد و با قاعدهٔ عمومی کلاً ناپدید می‌شد. این‌جا ستونِ زمان می‌رود
       و ستونِ وضعیت می‌ماند — وضعیت خبرِ مهم‌تری است. */
    /* سطرِ تودرتو خطِ متا ندارد، پس نشانِ تمدید جایی برای کوچ ندارد و
       همان‌جا می‌ماند — به‌جای ستونِ زمان که این‌جا حذف می‌شود. ستون‌ها
       پنج‌تا شمرده می‌شوند و نه چهارتا: هر آیتمِ دیده‌شده باید خانهٔ خودش
       را داشته باشد، وگرنه آخری به سطرِ دومِ گرید می‌افتد. */
    /* سطرِ تودرتو خطِ متا ندارد، پس نشانِ وضعیت و تمدید ستونِ خودشان را
       می‌خواهند. در یک ردیف، آن دو ستون به اندازهٔ محتوایشان باز می‌شوند
       و چیزی که می‌ماند سهمِ عنوان است — در ۴۱۴ پیکسل سیزده پیکسل، یعنی
       عنوان ناپدید. پس سطر دو *ردیف* می‌شود: بالا عنوان و ابزارها،
       پایین نشان‌ها. ستونِ نقطهٔ شاخه هر دو ردیف را می‌گیرد تا تورفتگی
       نشکند. */
    .pl-item.is-nested {
        grid-template-columns: 20px minmax(0, 1fr) auto auto;
        grid-template-areas:
            "nest main main tools"
            "nest state renew .";
        row-gap: 6px;
    }
    .pl-item.is-nested > .pl-nest { grid-area: nest; align-self: center; }
    .pl-item.is-nested > .pl-main { grid-area: main; }
    .pl-item.is-nested > .pl-tools { grid-area: tools; }
    .pl-item.is-nested > .pl-state { grid-area: state; display: inline-flex; justify-self: start; }
    .pl-item.is-nested > .pl-renew { grid-area: renew; display: inline-flex; justify-self: start; }
    /* در ردیفِ دوم جا هست، پس نشانِ تمدید واژه‌اش را پس می‌گیرد: «۲۷» به
       تنهایی عددی است که هیچ‌کس نمی‌داند عددِ چیست. (بندِ ۹۶۰ واژه را
       برداشته بود، آن‌وقت که نشان یک *ستونِ* تنگ بود.) */
    .pl-item.is-nested > .pl-renew .pl-renew-l { display: inline; }
    .pl-item.is-nested .pl-when { display: none; }

    /* خطِ نامِ پوشه می‌شکند تا نوارِ وضعیت — تنها سنجهٔ یک‌نگاهیِ این نما —
       حذف نشود. */
    .pl-fname { flex-wrap: wrap; gap: 4px 7px; }
    .pl-item {
        grid-template-columns: 34px minmax(0, 1fr) minmax(0, auto);
        gap: 10px;
        padding: 10px 12px;
    }
    .pl-freq { display: none; }
    .pl-item > .pl-renew { display: none; }
    .pl-tools { opacity: 1; }

    /* وضعیت از ستونِ خودش به خطِ متا کوچ می‌کند تا حذف نشود. */
    .pl-meta .pl-state { display: inline-flex; height: 18px; padding-inline: 7px; }
    .pl-item > .pl-state { display: none; }
    /* نشانِ تمدید هم مثل وضعیت به خطِ متا کوچ می‌کند، با متنِ کامل — آن‌جا
       ستون نیست و عددِ تنها معنایی ندارد. */
    .pl-meta .pl-renew .pl-renew-l { display: inline; }
    .pl-who { max-width: 150px; }

    /* عنوانِ برنامه تنها چیزی است که دو برنامهٔ یک شاگرد را از هم جدا
       می‌کند، و در سطرِ تودرتو سهمش به ۵۵ پیکسل می‌رسید — یعنی «برنامهٔ
       افزایش…» برای هر دو. دو خط مجاز است؛ سطر خودش قد می‌گیرد. */
    .pl-title {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ابزارهای سطر (منوی سه‌نقطه) تا هاور کم‌رنگ‌اند و ۳۰ پیکسل. روی لمس
       هاوری نیست و ۳۰ پیکسل هدفِ انگشت نیست. */
    /* `flex: none` لازم است: `.sx-tool` عرضش را با `width` می‌گیرد و
       داخلِ یک فلکسِ تنگ باز هم جمع می‌شود — در ۳۶۰ پیکسل به ۲۱ پیکسل
       می‌رسید، یعنی نصفِ آیکنش. */
    .pl-tools .sx-tool { flex: none; width: 38px; height: 38px; }
    .pl-tools .pl-fb { width: 38px; height: 38px; }

    /* پنج قرصِ فیلتر در ۳۹۰ پیکسل سه سطرِ پلکانی می‌شدند — هشتاد پیکسل
       ارتفاع برای چیزی که یک ردیفِ لغزنده هم می‌تواند باشد. حالا یک ردیف
       است و با انگشت افقی می‌لغزد، مثلِ هر فیلترِ دیگری روی گوشی.

       `margin-inline` منفی به‌علاوهٔ پدینگِ برابر: ریل تا لبهٔ صفحه ادامه
       پیدا می‌کند تا آخرین قرص «بریده» به‌نظر برسد، نه «تمام‌شده». */
    .pl-scope {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline: -16px;
        padding-inline: 16px;
        scroll-padding-inline: 16px;
    }
    .pl-scope::-webkit-scrollbar { display: none; }
    .pl-sc { flex: 0 0 auto; height: 40px; }

    /* نوارِ ابزار: پنج کنترل با عرضِ محتوایی در یک فلکسِ پیچنده، و نتیجه
       یک پلکانِ سه‌سطری با لبهٔ ناهموار. در این عرض گرید صادق‌تر است —
       جست‌وجو و شمارش تمامِ سطر، و چهار کنترلِ باقی دو-به-دو. */
    .pl-bar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 8px;
        padding: 10px;
    }
    .pl-bar > .sx-field,
    .pl-bar > .pl-bar-count { grid-column: 1 / -1; }
    .pl-bar > .sx-select,
    .pl-bar > .pl-mode { width: 100%; min-width: 0; }
    /* جداکنندهٔ عمودیِ شمارش مالِ وقتی بود که ته یک *ردیف* می‌نشست. */
    .pl-bar-count {
        margin-inline-start: 0;
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}


/* ══ ۸. حرکتِ کم ══════════════════════════════════════════════════════════
   بلوکِ سراسریِ `prefers-reduced-motion` در `myo-ds.css` فقط
   `animation-duration` را صفر می‌کند، نه `animation-delay` را. بدونِ این
   قاعده، کاربری که حرکت را خاموش کرده سطرها را تا ربعِ ثانیه نامرئی
   می‌بیند و بعد یک‌باره ظاهر می‌شوند — دقیقاً همان پرشی که قرار بود
   نباشد. */
@media (prefers-reduced-motion: reduce) {
    .pl-item { animation-delay: 0s !important; }
}

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

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

   فقط کفِ هدفِ لمس این‌جاست، نه چیدمان: در ۸۴۴ پیکسلِ عرض، ستون‌ها باید
   همان ستون‌های عریض بمانند.
   ───────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) and (max-height: 520px) {
    .pl-sc { height: 40px; }
    .pl-tools .sx-tool { flex: none; width: 38px; height: 38px; }
    .pl-tools .pl-fb { width: 38px; height: 38px; }
}