/* ============================================================
   محاسب ۳۶۵ — ماژول آموزش  ·  learn.mohaseb365.com

   این یک صفحه‌ی معرفی نیست؛ یک سندِ خواندنی است. پس همه‌چیزِ این فایل
   حولِ یک چیز می‌چرخد: خواندنِ متنِ فارسیِ بلند بدون خستگی، و همیشه
   دانستنِ اینکه کجای سند هستی.

   چرا توکن‌های خودش را دارد و به Design_System وصل نیست:
   دقیقاً همان دلیلِ Platform_Home — این یک وب‌روت جداست و دیزاین‌سیستمِ
   پشتِ لاگین آنجا سرو نمی‌شود. مقادیر برند عیناً از
   Platform_Home/Platform_Home.css کپی شده‌اند.
   ⚠ اگر رنگ برند در دیزاین‌سیستم عوض شد، هر دو جا دستی عوض کن.

   هیچ منبع بیرونی ندارد: نه فونت گوگل، نه تیلویند، نه آیکن‌فونت.

   ⚠⚠ روی متنِ فارسی letter-spacing نگذار. خطِ عربی وصل است و فاصله‌ی
      منفی یا مثبت، اتصالِ حرف‌ها را باز می‌کند. نسخه‌ی قبلی روی h1 و h2
      مقدار منفی داشت. تنها جای مجازش متنِ لاتینِ تک‌کلمه‌ای است.

   فهرست:
     ۱  فونت و توکن (روشن و تیره)
     ۲  پایه، انتخاب متن، فوکوس، اسکرول‌بار
     ۳  هدر
     ۴  پوسته‌ی دو ستونی
     ۵  ریلِ فهرست — دسکتاپ و کشوی موبایل
     ۶  سرصفحه‌ی سند
     ۷  درس‌ها و تایپوگرافی متن
     ۸  شکل‌ها (دیاگرامِ HTML)
     ۹  واژه‌نامه
     ۱۰ فوتر، ریسپانسیو، چاپ، حرکتِ کم
   ============================================================ */

/* ════════ ۱ — فونت و توکن ════════ */

@font-face { font-family: "Vazirmatn"; src: url("assets/fonts/Vazirmatn-Regular.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("assets/fonts/Vazirmatn-Medium.woff2") format("woff2");
             font-weight: 500; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("assets/fonts/Vazirmatn-Bold.woff2") format("woff2");
             font-weight: 700; font-display: swap; }

:root {
    color-scheme: light dark;

    --m-primary:        #2563eb;
    --m-primary-hover:  #1d4ed8;
    --m-primary-soft:   #eff6ff;
    --m-primary-border: #bfdbfe;
    --m-primary-ink:    #1e40af;
    /* ⚠ رنگِ متنِ روی دکمه‌ی آبی توکنِ خودش را دارد، نه #fff ثابت: در
       پوسته‌ی تیره خودِ آبی روشن می‌شود و سفیدِ رویش به ۲٫۵:۱ می‌افتد. */
    --m-on-primary:     #ffffff;

    /* رنگ‌های معنایی شکل‌ها. سه‌تایی‌اند چون در شکل سه نقش هست:
       کدِ مشترک، چیزِ به‌ازای هر مشتری، و چیزی که بیرون از سرور است. */
    --m-each-soft:   #ecfdf5;
    --m-each-border: #a7f3d0;
    --m-each-ink:    #065f46;
    --m-out-soft:    #f5f3ff;
    --m-out-border:  #ddd6fe;
    --m-out-ink:     #5b21b6;

    --m-warn-soft:   #fffbeb;
    --m-warn-border: #fde68a;
    --m-warn-ink:    #78350f;

    --m-bg:      #ffffff;
    --m-panel:   #f8fafc;   /* ریل و نوارها — یک پله سردتر از متن */
    --m-sunk:    #f1f5f9;
    --m-line:    #e2e8f0;
    --m-line-2:  #cbd5e1;
    --m-ink:     #0f172a;
    --m-body:    #334155;   /* متنِ بدنه: ۹.۷:۱ روی سفید */
    --m-muted:   #64748b;
    --m-head-bg: rgba(255, 255, 255, .88);

    --m-font: "Vazirmatn", system-ui, "Segoe UI", sans-serif;
    --m-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

    /* پله‌ی ثابت، نه سیال. سندِ خواندنی در هر عرضی یک اندازه‌ی متن
       می‌خواهد؛ تیترِ clamp دار وقتی ستون باریک می‌شود بدتر می‌شود نه بهتر.
       ⚠ کفِ متنِ فارسی روی گوشی ۱۲px است. هیچ پله‌ای زیر آن نیست. */
    --t-xs:  0.8125rem;   /* ۱۳ */
    --t-sm:  0.875rem;    /* ۱۴ */
    --t-md:  1rem;        /* ۱۶ */
    --t-lg:  1.125rem;    /* ۱۸ */
    --t-xl:  1.3125rem;   /* ۲۱ — جمله‌ی کلیدی */
    --t-2xl: 1.625rem;    /* ۲۶ — تیتر درس */
    --t-3xl: 2.125rem;    /* ۳۴ — تیتر سند */

    --lh:       1.95;     /* فارسیِ بلند نفس می‌خواهد */
    --lh-tight: 1.5;

    --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
    --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem;

    --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-full: 999px;

    /* سایه همیشه با آفست و بلورِ نرم — هاله‌ی بی‌آفست تزئین است */
    --sh-1: 0 1px 2px rgba(15, 23, 42, .06);
    --sh-2: 0 8px 24px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .05);

    --head-h: 3.5rem;
    --rail-w: 16.5rem;
    --col: 46rem;         /* ستونِ سند — شکل‌ها تا این پهنا باز می‌شوند */
    --measure: 38rem;     /* خطِ متن — اندازه‌گیری شد: ۶۸ نویسه */
    --shell: 71rem;       /* ریل + فاصله + ستون + حاشیه. بیشتر از این یعنی
                             ستونِ متن در یک میدانِ خالی شناور می‌شود. */

    --e: cubic-bezier(.16, .84, .30, 1);
}

/* پوسته‌ی تیره. کسی که شب روی گوشی می‌خواند نباید صفحه‌ی سفید بخورد.
   فقط توکن‌ها عوض می‌شوند — هیچ قاعده‌ی چیدمانی اینجا تکرار نشده. */
@media (prefers-color-scheme: dark) {
    :root {
        --m-primary:        #60a5fa;
        --m-primary-hover:  #93c5fd;
        --m-primary-soft:   #14213b;
        --m-primary-border: #24406e;
        --m-primary-ink:    #bfdbfe;
        --m-on-primary:     #0b1220;

        --m-each-soft:   #0d2620;
        --m-each-border: #1c4b3c;
        --m-each-ink:    #6ee7b7;
        --m-out-soft:    #1c1733;
        --m-out-border:  #382d63;
        --m-out-ink:     #c4b5fd;

        --m-warn-soft:   #2a2008;
        --m-warn-border: #5a4410;
        --m-warn-ink:    #fcd34d;

        --m-bg:      #0b1220;
        --m-panel:   #0f1829;
        --m-sunk:    #141f33;
        --m-line:    rgba(255, 255, 255, .10);
        --m-line-2:  rgba(255, 255, 255, .20);
        --m-ink:     #eaf0ff;
        --m-body:    #b9c7e0;
        --m-muted:   #8497b8;
        --m-head-bg: rgba(11, 18, 32, .86);

        --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
        --sh-2: 0 10px 30px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .30);
    }
}

/* ════════ ۲ — پایه ════════ */

/* ⚠ در صفحه‌ی فارسی اسکرول‌بار سمت راست است. فقط روی اسکرولرِ عمودیِ
   صفحه و دقیقاً یک سطح — نه روی هر عنصر. */
html {
    direction: rtl;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--head-h) + var(--s4));
    /* اسکرول‌بار هم بخشی از طراحی است؛ پیش‌فرضِ مرورگر مالِ هیچ سیستمی نیست */
    scrollbar-color: var(--m-line-2) transparent;
    scrollbar-width: thin;
}

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

body {
    margin: 0;
    font-family: var(--m-font);
    font-size: var(--t-md);
    line-height: var(--lh);
    color: var(--m-body);
    background: var(--m-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: var(--lh-tight); color: var(--m-ink); text-wrap: balance; }
p  { margin: 0 0 var(--s4); }
ul, ol { margin: 0; padding: 0; }

a { color: var(--m-primary); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--m-primary-hover); }

::selection { background: var(--m-primary-soft); color: var(--m-primary-ink); }

:focus-visible {
    outline: 2px solid var(--m-primary);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

code {
    font-family: var(--m-mono);
    /* ⚠ نسبی، ولی با کف: داخل متنِ ۱۳ پیکسلی، ۰٫۸۷۵em می‌شود ۱۱٫۴px و از
       کفِ خوانایی رد می‌شود. max() هر دو را با هم نگه می‌دارد. */
    font-size: max(.875em, .75rem);
    background: var(--m-sunk);
    border: 1px solid var(--m-line);
    border-radius: 6px;
    padding: .1em .45em;
    direction: ltr;
    display: inline-block;
    color: var(--m-ink);
}

.l-sprite { display: none; }
.l-ico {
    width: 1.05em; height: 1.05em; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ⚠ با آفستِ ۹۹۹۹- پنهان نمی‌شود: آن الگو صفحه را در RTL از یک طرف
   می‌کشد و در هر ممیزیِ سرریز هم یک هشدارِ کاذبِ دائمی می‌سازد. */
.l-skip {
    position: fixed; top: 0; inset-inline-start: 0; z-index: 100;
    background: var(--m-primary); color: var(--m-on-primary); padding: var(--s3) var(--s5);
    border-end-end-radius: var(--r);
    transform: translateY(-150%);
    transition: transform .18s var(--e);
}
.l-skip:focus { transform: none; }

/* ════════ ۳ — هدر ════════ */

.l-head {
    position: sticky; top: 0; z-index: 40;
    background: var(--m-head-bg);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--m-line);
}
.l-head__in {
    height: var(--head-h);
    max-width: var(--shell); margin-inline: auto;
    padding-inline: var(--s4);
    display: flex; align-items: center; gap: var(--s4);
}
.l-brand {
    display: flex; align-items: center; gap: var(--s2);
    min-height: 2.75rem;              /* هدفِ لمسی — WCAG 2.5.5 */
    color: var(--m-ink); text-decoration: none; font-size: var(--t-sm);
}
.l-brand__txt b { font-weight: 700; }
.l-brand__mark {
    width: 1.75rem; height: 1.75rem; border-radius: 8px; flex: none;
    background: var(--m-primary); color: var(--m-on-primary);
    display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.l-head__link {
    margin-inline-start: auto;
    font-size: var(--t-sm); color: var(--m-muted); text-decoration: none;
}
.l-head__link:hover { color: var(--m-ink); }
.l-head__cta {
    display: inline-flex; align-items: center;
    min-height: 2.75rem; padding-inline: var(--s4);
    background: var(--m-primary); color: var(--m-on-primary); text-decoration: none;
    border-radius: var(--r-sm);
    font-size: var(--t-sm); font-weight: 500;
    transition: background .18s var(--e);
}
.l-head__cta:hover { background: var(--m-primary-hover); color: var(--m-on-primary); }

/* نامِ واردشده و خروج. عمداً آرام‌اند: این نوار ابزارِ کار نیست، فقط
   می‌گوید «با چه حسابی اینجایی» و راهِ بیرون رفتن کجاست.
   ⚠ نقطه‌ی سبز نیست، آبی — سبز در این سیستم یعنی «انجام شد»، نه «فعال». */
.l-head__user {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--t-xs); color: var(--m-muted);
    max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.l-head__user::before {
    content: ''; flex: none;
    width: .45rem; height: .45rem; border-radius: 50%;
    background: var(--m-primary);
}
.l-head__out {
    display: inline-flex; align-items: center;
    min-height: 2.75rem;              /* هدفِ لمسی — WCAG 2.5.5 */
    padding-inline: var(--s3);
    border: 1px solid var(--m-line-2); border-radius: var(--r-sm);
    color: var(--m-body); text-decoration: none;
    font-size: var(--t-sm);
    transition: border-color .18s var(--e), color .18s var(--e);
}
.l-head__out:hover { border-color: var(--m-primary); color: var(--m-primary); }

/* نوار پیشرفتِ خواندن — فقط زیر ۱۰۲۴ که ریل دیده نمی‌شود.
   بالاتر از آن، خودِ ریل پیشرفت را نشان می‌دهد و دو نشانگر یعنی تکرار.

   ⚠ با transform مقیاس می‌گیرد نه با width: انیمیشنِ width هر فریم
     layout را دوباره حساب می‌کند. مبدأ ۱۰۰٪ یعنی لبه‌ی راست — که در
     صفحه‌ی راست‌به‌چپ همان ابتدای خط است. */
.l-progress {
    height: 2px; width: 100%;
    background: var(--m-primary);
    transform: scaleX(var(--p, 0));
    transform-origin: 100% 50%;
    transition: transform .1s linear;
}

/* ════════ ۴ — پوسته ════════ */

.l-shell {
    max-width: var(--shell); margin-inline: auto;
    padding-inline: var(--s4);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

/* ════════ ۵ — ریلِ فهرست ════════ */

.l-rail__toggle {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; min-height: 2.75rem;
    padding: var(--s2) var(--s3);
    font: inherit; font-size: var(--t-sm); color: var(--m-ink);
    background: var(--m-panel);
    border: 1px solid var(--m-line); border-radius: var(--r);
    cursor: pointer;
    transition: border-color .18s var(--e);
}
.l-rail__toggle:hover { border-color: var(--m-line-2); }
.l-rail__toggle .l-ico { color: var(--m-muted); }

.l-rail__title {
    margin: 0 0 var(--s3);
    font-size: var(--t-xs); font-weight: 500; color: var(--m-muted);
}

.l-rail__list {
    --row: 2.25rem;
    position: relative;
    list-style: none;
}
/* خطِ راهنمای فهرست + همان خط، پرشده تا جایی که خوانده‌ای.
   این تنها لحظه‌ی حرکتِ صفحه است و وضعیت را می‌رساند، نه تزئین را. */
.l-rail__list::before,
.l-rail__list::after {
    content: ""; position: absolute;
    inset-inline-start: calc(.5rem - 1px); width: 2px;
    top: calc(var(--row) / 2); bottom: calc(var(--row) / 2);
    border-radius: var(--r-full);
}
.l-rail__list::before { background: var(--m-line); }
.l-rail__list::after {
    background: var(--m-primary);
    transform: scaleY(var(--p, 0)); transform-origin: 50% 0;
    transition: transform .25s var(--e);
}
.l-rail__list li { min-height: var(--row); display: flex; align-items: center; }
.l-rail__list a {
    position: relative;
    display: grid; grid-template-columns: 1rem 1.1rem minmax(0, 1fr);
    align-items: center; gap: var(--s2);
    width: 100%; padding-block: var(--s1);
    font-size: var(--t-sm); line-height: 1.4;
    color: var(--m-muted); text-decoration: none;
    transition: color .18s var(--e);
}
.l-rail__list a:hover { color: var(--m-ink); }
.l-rail__list b { font-weight: 500; font-variant-numeric: tabular-nums; }
.l-rail__dot {
    justify-self: center;
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--m-bg);
    box-shadow: 0 0 0 2px var(--m-line) inset, 0 0 0 4px var(--m-bg);
    transition: background .25s var(--e), box-shadow .25s var(--e);
}
.l-rail__list a[data-read] .l-rail__dot {
    background: var(--m-primary);
    box-shadow: 0 0 0 2px var(--m-primary) inset, 0 0 0 4px var(--m-bg);
}
.l-rail__list a[aria-current="true"] { color: var(--m-ink); font-weight: 500; }
.l-rail__list a[aria-current="true"] .l-rail__dot {
    background: var(--m-primary);
    box-shadow: 0 0 0 2px var(--m-primary) inset, 0 0 0 4px var(--m-bg),
                0 0 0 7px var(--m-primary-soft);
}
.l-rail__extra { margin-block-start: var(--s2); }
.l-rail__extra a b { color: var(--m-line-2); }

/* ════════ ۶ — سرصفحه‌ی سند ════════ */

/* دو پهنا در یک ستون: خطِ متن کوتاه می‌ماند تا چشم برنگردد، ولی شکل و
   پیوندِ درس بعدی تا لبه‌ی ستون باز می‌شوند و از حاشیه‌ی متن بیرون می‌زنند.
   همان کاری که یک کتابِ درسی با تصویرِ کنارِ متن می‌کند. */
.l-doc { min-width: 0; max-width: var(--col); padding-block: var(--s7) var(--s8); }
.l-doc__head > *, .l-lesson > * { max-width: var(--measure); }
.l-lesson > .l-fig, .l-lesson > .l-next { max-width: none; }

.l-doc__head { margin-block-end: var(--s7); }
.l-doc__head h1 { font-size: var(--t-3xl); }
.l-doc__lead {
    margin-block: var(--s4) var(--s5);
    font-size: var(--t-lg); color: var(--m-body);
}
.l-doc__meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s2) var(--s3);
    list-style: none;
    padding-block-start: var(--s3);
    border-block-start: 1px solid var(--m-line);
    font-size: var(--t-xs); color: var(--m-muted);
}
.l-doc__meta li + li::before {
    content: "·"; margin-inline-end: var(--s3); color: var(--m-line-2);
}

/* ════════ ۷ — درس‌ها ════════ */

.l-lesson { padding-block-start: var(--s7); scroll-margin-top: calc(var(--head-h) + var(--s5)); }
.l-lesson + .l-lesson { border-block-start: 1px solid var(--m-line); }

/* شماره‌ی فصل. عمداً «برچسبِ بالای تیتر» نیست — عددِ حاشیه‌ایِ یک کتاب
   است: روی دسکتاپ در حاشیه‌ی کنارِ تیتر می‌نشیند و روی گوشی به ابتدای
   خودِ تیتر برمی‌گردد. یک گره، دو جا. */
.l-lesson h2 {
    position: relative;
    font-size: var(--t-2xl);
    margin-block-end: var(--s5);
    padding-block-start: var(--s1);
}
.l-lesson__n {
    font-weight: 400;
    color: var(--m-muted);
    font-variant-numeric: tabular-nums;
    margin-inline-end: var(--s3);
}

.l-anchor {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem;
    margin-inline-start: var(--s2);
    vertical-align: middle;
    color: var(--m-line-2);
    opacity: 0;
    transition: opacity .18s var(--e), color .18s var(--e);
}
.l-lesson h2:hover .l-anchor, .l-anchor:focus-visible { opacity: 1; }
.l-anchor:hover { color: var(--m-primary); }
/* روی دستگاهِ لمسی hover وجود ندارد: آیکن نامرئی می‌ماند ولی هدفِ لمسیِ
   ۲۸ پیکسلی سرِ راه است. جایی که دیده نمی‌شود، نباشد. */
@media (hover: none) { .l-anchor { display: none; } }

.l-lesson p { color: var(--m-body); }
.l-lesson strong { color: var(--m-ink); font-weight: 700; }

/* جمله‌ی کلیدیِ هر درس — نقلِ برجسته، نه کارتِ هشدار.
   ⚠ نسخه‌ای که نوارِ رنگیِ ضخیم روی یک لبه داشت برداشته شد: آن الگو
     همه‌جا تکرار شده و به‌جای «مهم است» فقط «قالبِ آماده» را می‌رساند.
     برجستگی از خودِ تایپوگرافی و فضا می‌آید. */
.l-key {
    margin-block: var(--s6);
    padding-block: var(--s5);
    border-block: 1px solid var(--m-line);
    font-size: var(--t-xl);
    font-weight: 500;
    line-height: 1.7;
    color: var(--m-ink);
}
.l-key a { color: var(--m-primary); }

/* حاشیه‌ی «حواست باشد». زرد فقط سطح است، هرگز رنگِ متن. */
.l-note {
    margin-block: var(--s5);
    padding: var(--s4) var(--s4) calc(var(--s4) - var(--s2));
    background: var(--m-warn-soft);
    border: 1px solid var(--m-warn-border);
    border-radius: var(--r);
    font-size: var(--t-sm); line-height: 1.85;
    color: var(--m-warn-ink);
}
.l-note p:last-child { margin-block-end: 0; }

.l-steps { margin-block: var(--s4) var(--s5); list-style: none; counter-reset: s; }
.l-steps li {
    counter-increment: s; position: relative;
    padding-inline-start: 2.5rem; padding-block: var(--s2);
    color: var(--m-body);
}
.l-steps li + li { border-block-start: 1px solid var(--m-line); }
.l-steps li::before {
    content: counter(s); position: absolute; inset-inline-start: 0; top: .85rem;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--m-primary-soft); color: var(--m-primary-ink);
    display: grid; place-items: center;
    font-size: var(--t-xs); font-weight: 500; line-height: 1;
}

/* پیوندِ درس بعدی — پایانِ هر درس. */
.l-next {
    display: flex; align-items: center; gap: var(--s3);
    margin-block-start: var(--s6);
    padding: var(--s3) var(--s4);
    min-height: 3rem;
    border: 1px solid var(--m-line); border-radius: var(--r);
    background: var(--m-panel);
    text-decoration: none; color: var(--m-ink);
    transition: border-color .18s var(--e), background .18s var(--e);
}
.l-next:hover { border-color: var(--m-primary-border); background: var(--m-primary-soft); color: var(--m-ink); }
.l-next span { font-size: var(--t-xs); color: var(--m-muted); }
.l-next b { font-size: var(--t-sm); font-weight: 500; }
.l-next .l-ico { margin-inline-start: auto; color: var(--m-primary); width: 1.25rem; height: 1.25rem; }

/* ════════ ۸ — شکل‌ها ════════ */

.l-fig { margin: var(--s6) 0; }
.l-fig figcaption {
    margin-block-start: var(--s3);
    font-size: var(--t-xs); color: var(--m-muted); line-height: 1.7;
}
.l-fig figcaption b { color: var(--m-ink); font-weight: 500; margin-inline-end: var(--s2); }

.l-diag { display: grid; gap: 0; }
.l-box {
    border: 1px solid var(--m-line); border-radius: var(--r);
    background: var(--m-bg);
    padding: var(--s4);
}
.l-box__h { margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--m-ink); line-height: 1.6; }
.l-box__sub { margin: var(--s1) 0 0; font-size: var(--t-xs); color: var(--m-muted); }
.l-box__ul { list-style: none; margin-block-start: var(--s3); font-size: var(--t-sm); }
.l-box__ul li { padding-block: var(--s1); line-height: 1.7; }
.l-box__ul li + li { border-block-start: 1px solid var(--m-line); }
.l-box__ul span {
    display: inline-block; margin-inline-start: var(--s2);
    font-size: var(--t-xs); color: var(--m-muted);
}

.l-box--host { background: var(--m-panel); }
.l-box--host > .l-box__h { text-align: center; }
.l-box--host > .l-box__sub { text-align: center; }
.l-box__grid {
    display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-block-start: var(--s4);
}
.l-box--code { background: var(--m-primary-soft); border-color: var(--m-primary-border); }
.l-box--code .l-box__h { color: var(--m-primary-ink); }
.l-box--code .l-box__ul { color: var(--m-primary-ink); }
.l-box--code .l-box__ul li + li { border-color: var(--m-primary-border); }
.l-box--each { background: var(--m-each-soft); border-color: var(--m-each-border); }
.l-box--each .l-box__h { color: var(--m-each-ink); }
.l-box--each .l-box__ul { color: var(--m-each-ink); }
.l-box--each .l-box__ul li + li { border-color: var(--m-each-border); }
.l-box--each .l-box__ul span { color: var(--m-each-ink); opacity: .75; }
.l-box--out { background: var(--m-out-soft); border-color: var(--m-out-border); }
.l-box--out .l-box__h { color: var(--m-out-ink); }
.l-box--out .l-box__sub { color: var(--m-out-ink); opacity: .8; }

/* پیکانِ «از بیرون به سرور». خطِ کشیده‌شده با CSS، بدون تصویر. */
.l-diag__link { height: var(--s6); display: grid; place-items: center; }
.l-diag__link span {
    display: block; width: 2px; height: 100%;
    background: linear-gradient(to top, var(--m-line-2), var(--m-line-2));
    position: relative;
}
.l-diag__link span::before {
    content: ""; position: absolute; top: -1px; inset-inline-start: -4px;
    border: 5px solid transparent; border-block-end-color: var(--m-line-2);
    border-block-start: 0;
}

.l-plans { display: grid; gap: var(--s3); }
.l-plans__pair {
    display: grid; gap: var(--s3);
    padding: var(--s3);
    border: 1px dashed var(--m-line-2); border-radius: var(--r-lg);
}
.l-plans__tie {
    margin: 0; text-align: center;
    font-size: var(--t-xs); color: var(--m-muted);
}
/* سه کارت کنار هم — ولی دوتای آخر داخل یک قابِ نقطه‌چین، چون همان
   «از نظر کد یکی‌اند» را ساختار می‌گوید، نه فقط زیرنویس. زیر ۷۶۸
   روی هم می‌نشینند و قاب سر جایش می‌ماند. */
@media (min-width: 48rem) {
    .l-plans { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); align-items: start; }
    .l-plans__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .l-plans__tie { grid-column: 1 / -1; }
}
.l-box--plan .l-box__ul li { padding-block: var(--s2); }
.l-box--full { background: var(--m-each-soft); border-color: var(--m-each-border); }
.l-box--full .l-box__h { color: var(--m-each-ink); }
.l-box--full .l-box__sub { color: var(--m-each-ink); opacity: .8; }
.l-box--full .l-box__ul li + li { border-color: var(--m-each-border); }
.l-box__who {
    margin: var(--s3) 0 0; padding-block-start: var(--s3);
    border-block-start: 1px solid var(--m-line);
    font-size: var(--t-xs); color: var(--m-muted);
}
.l-box--full .l-box__who { border-color: var(--m-each-border); color: var(--m-each-ink); }

/* ════════ ۹ — واژه‌نامه ════════ */

.l-lesson--annex .l-lesson__n { font-weight: 400; }

.l-terms { margin-block-start: var(--s5); }
.l-terms dt {
    font-weight: 700; color: var(--m-ink); font-size: var(--t-md);
    padding-block-start: var(--s4);
    border-block-start: 1px solid var(--m-line);
    scroll-margin-top: calc(var(--head-h) + var(--s5));
}
.l-terms dt:target { color: var(--m-primary); }
.l-terms dd {
    margin: var(--s1) 0 var(--s4);
    color: var(--m-body); font-size: var(--t-sm); line-height: 1.9;
}

/* ════════ ۱۰ — فوتر ════════ */

.l-foot {
    margin-block-start: var(--s7);
    border-block-start: 1px solid var(--m-line);
    background: var(--m-panel);
    font-size: var(--t-xs); color: var(--m-muted);
}
.l-foot__in {
    max-width: var(--shell); margin-inline: auto;
    padding: var(--s5) var(--s4);
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
}
.l-foot__date { margin-inline-start: auto; }
/* آیتمِ فلکس، پس بلوکی است و ارتفاعش را از متن می‌گیرد — بدون کف،
   روی گوشی یک هدفِ ۲۵ پیکسلی می‌شود. */
.l-foot a {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    color: var(--m-ink); text-decoration: none;
}
.l-foot a:hover { color: var(--m-primary); }

/* ════════ ریسپانسیو ════════ */

/* از ۱۰۲۴ به بالا: دو ستون، ریلِ چسبان. زیر آن: کشوی جمع‌شونده.
   ⚠ عرضِ ستونِ متن با minmax(0,1fr) بسته می‌شود، نه 1fr خالی: آیتمِ گرید
     پیش‌فرض min-width:auto دارد و حاضر نیست از محتوایش باریک‌تر شود —
     یک شکلِ پهن کلِ صفحه را افقی می‌کند. */
@media (min-width: 64rem) {
    .l-shell {
        grid-template-columns: var(--rail-w) minmax(0, 1fr);
        gap: var(--s8);
        padding-inline: var(--s6);
    }
    .l-rail {
        position: sticky; top: calc(var(--head-h) + var(--s5));
        padding-block-start: var(--s7);
    }
    .l-rail__toggle { display: none; }
    .l-progress { display: none; }
    .l-doc { padding-inline-end: var(--s4); }
    /* هم‌ترازی: هدر و فوتر همان حاشیه‌ی پوسته را بگیرند */
    .l-head__in, .l-foot__in { padding-inline: var(--s6); }
}

@media (max-width: 63.999rem) {
    .l-rail {
        position: sticky; top: var(--head-h); z-index: 30;
        margin-inline: calc(var(--s4) * -1);
        padding-block: var(--s3); padding-inline: var(--s4);
        background: var(--m-bg);
        border-block-end: 1px solid var(--m-line);
    }
    /* کشو روی متن باز می‌شود، نه اینکه متن را هل بدهد */
    .l-rail__nav {
        position: absolute; inset-inline: 0; top: 100%;
        max-height: min(60vh, 26rem); overflow-y: auto;
        padding: var(--s4);
        background: var(--m-bg);
        border-block-end: 1px solid var(--m-line);
        box-shadow: var(--sh-2);
    }
    .l-rail:not([data-open]) .l-rail__nav { display: none; }
    .l-rail__title { display: none; }
    .l-rail__list a { min-height: 2.75rem; }   /* هدف لمسی */
    .l-doc { padding-block-start: var(--s6); }
    .l-lesson h2 { font-size: var(--t-xl); }
    .l-doc__head h1 { font-size: 1.75rem; }
}

@media (max-width: 30rem) {
    .l-head__link { display: none; }
    .l-head__in { gap: var(--s2); }
    .l-head__cta { padding-inline: var(--s3); }
    /* ⚠ وقتی دو عنصرِ قبلی پنهان می‌شوند، margin: auto شان هم می‌رود و
       دکمه می‌چسبد به نشانِ برند. پس فشارِ راست به خودِ «خروج» منتقل شود. */
    .l-head__user { display: none; }
    .l-head__out  { margin-inline-start: auto; }
    .l-foot__date { margin-inline-start: 0; }
    .l-next { flex-wrap: wrap; row-gap: 0; }
}

/* ════════ چاپ ════════ */

@media print {
    .l-head, .l-rail, .l-next, .l-anchor, .l-skip { display: none !important; }
    .l-shell { display: block; padding: 0; }
    .l-doc, .l-doc__head > *, .l-lesson > * { max-width: none; }
    .l-lesson { break-inside: avoid-page; }
    .l-fig, .l-key, .l-note { break-inside: avoid; }
    body { color: #000; background: #fff; font-size: 11pt; }
}


/* ════════ سرفصلِ داخلِ درس ════════ */

/* ⚠ ریستِ صفحه margin همه‌ی سرفصل‌ها را صفر کرده و تا درس ۷ هیچ درسی h3
   نداشت — یعنی این رفتار تا آن لحظه دیده نمی‌شد. بدون این قاعده، هفت
   سرفصلِ درس ۷ به بند بالا و پایینشان می‌چسبند. */
.l-lesson h3 {
    margin-block: var(--s7) var(--s3);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--m-ink);
    line-height: 1.6;
}
.l-lesson h3:first-child { margin-block-start: 0; }

/* ════════ تصویرِ مرحله ════════ */

/* ⚠ نسبتِ ابعاد روی خودِ img نوشته شده (width/height در HTML) تا پیش از
   رسیدنِ تصویر جای خودش را بگیرد و صفحه وسطِ خواندن نپرد. */
/* روی گوشی تصویرِ کنسول ۲۹۵ پیکسل عرض می‌گیرد و خواندنی نیست؛ پس هر
   تصویر لینکِ نسخه‌ی کاملِ خودش است. لایت‌باکس عمداً نه — یک تبِ تازه
   همان کار را بدون یک خط جاوااسکریپت می‌کند. */
.l-shot__a { display: block; border-radius: var(--r); }
.l-shot__a:focus-visible { outline: 2px solid var(--m-primary); outline-offset: 3px; }

.l-shot {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--m-line); border-radius: var(--r);
    background: var(--m-bg);
}

/* ════════ حرکتِ کم ════════ */

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