/* ===================================================================
   Blog.css — بلاگِ محاسب ۳۶۵، روی زبانِ طراحیِ سامانه (One UI)
   ===================================================================

   ⛔ **این فایل هیچ توکنی تعریف نمی‌کند.** پالت، شعاع، سایه، بلندیِ
     کنترل و ریتم همه از `_oui-tokens.css` می‌آیند که مالکش
     `Design_System/oui-tokens.css` است. این‌جا فقط چیدمانِ همین
     صفحه‌ها نوشته می‌شود.

     نسخه‌ی کنارِ این فایل **تولیدشده** است: `_sync_tokens.py` آن را از
     مالک کپی می‌کند، چون بلاگ روی وب‌روتِ دامنه‌ی ریشه است و
     `Design_System/` روی وب‌روتِ سامانه. دست‌کاری‌اش نکن.
     ⚠ و هیچ‌وقت `--oui-*` را این‌جا تعریف نکن؛
     `tools/oui_token_lint.py` جلویش را می‌گیرد و حق دارد.

   ⚠ نسخه‌ی قبلیِ همین فایل رد شد و دلیلش دقیقاً همان دلیلی بود که
     جهانِ قبلیِ دروازه رد شد: **توکنِ خودش را داشت (`--c-*`) و هیچ
     نسبتی با سیستمِ طراحیِ پروژه نداشت.** پرده‌ی تیره، قهرمانِ بزرگ و
     دکمه‌ی طلایی هیچ‌کدام One UI نبودند. ← DESIGN.md بندِ آخر

   ⚠ اندازه‌ی پایه ۱۵px است نه ۱۲px سامانه — دقیقاً همان استثنایی که
     دروازه گرفت. One UI برای صفحه‌ی کارِ متراکم نوشته شده؛ بلاگ
     صفحه‌ی **خواندن** است. بقیه‌ی زبان یکی است.

   ⚠ دقیقاً **یک** دکمه‌ی پُر در هر نما. بقیه تونال یا شبح.

   ---- فهرست ----
     ۱ فونت
     ۲ پایه و سطوحِ مرورگر
     ۳ چیدمان
     ۴ سربرگ
     ۵ متن
     ۶ دکمه و کارت
     ۷ فهرستِ مقاله‌ها
     ۸ صفحه‌ی مقاله
     ۹ پانویس
     ۱۰ موبایل
   =================================================================== */

/* ---- ۱ — فونت ----
   ⚠ مسیر مطلق است چون این فایل از پوشه‌ی دیگری سرو می‌شود. یک نسخه
     روی سرور، کنارِ صفحه‌ی معرفی — نه یک کپیِ دوم. */
@font-face { font-family: Vazirmatn; src: url('/Platform_Home/assets/fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('/Platform_Home/assets/fonts/Vazirmatn-Medium.woff2')  format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('/Platform_Home/assets/fonts/Vazirmatn-Bold.woff2')    format('woff2'); font-weight: 700; font-display: swap; }
/* ⚠ وزن ۸۰۰ باید اعلام شود، وگرنه مرورگر ۷۰۰ را مصنوعی چاق می‌کند. */
@font-face { font-family: Vazirmatn; src: url('/Platform_Home/assets/fonts/Vazirmatn-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }


/* ---- ۲ — پایه و سطوحِ مرورگر ---- */
:root {
    --wrap:  min(66rem, calc(100% - 2.5rem));
    --prose: 38rem;                  /* ≈ ۶۸ نویسه در وزیرمتن */
    --gap:   var(--oui-gap);         /* ۱۰ — بینِ دو کنترلِ هم‌گروه */
    --group: var(--oui-gap-group);   /* ۱۸ — بینِ دو گروه */
    --sec:   3rem;                   /* نفسِ عمودیِ بخش */
}

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

html {
    /* اسکرول‌بار سمت راست بماند، مثلِ بقیه‌ی سامانه.
       ← Memory/ganjdanesh-rtl-scrollbar-rule.md */
    direction: ltr;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    background: var(--oui-bg);
    scrollbar-color: var(--oui-border) var(--oui-bg);
}

body.bl-body {
    direction: rtl;
    margin: 0;
    background: var(--oui-bg);
    color: var(--oui-text);
    font-family: Vazirmatn, system-ui, sans-serif;
    font-size: 0.9375rem;            /* ۱۵px — بندِ بالا */
    line-height: 1.85;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;

    /* پانویس به کف بچسبد. ⚠ `svh` نه `vh`: نوارِ آدرسِ موبایل ۱۰۰vh را
       از قابِ واقعی بزرگ‌تر می‌کند. */
    min-height: 100svh;
    display: flex; flex-direction: column;
}
body.bl-body > main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; }

::selection { background: var(--oui-chip); color: var(--oui-text); }
:focus-visible {
    outline: 2px solid var(--oui-primary);
    outline-offset: 2px; border-radius: var(--oui-r-el);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* پرشِ به متن.
   ⚠ برای پنهان کردن از `inset-inline-start: -9999px` استفاده نکن: در
     صفحه‌ی راست‌چین یعنی «۹۹۹۹ پیکسل سمت راست» و سند را پهن می‌کند. */
.bl-skip { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.bl-skip:focus-visible {
    clip-path: none; width: auto; height: auto;
    inset-block-start: 8px; inset-inline-start: 8px; z-index: 40;
    padding: 8px 14px;
    background: var(--oui-card); border-radius: var(--oui-r-el);
    box-shadow: var(--oui-shadow-pop);
}


/* ---- ۳ — چیدمان ---- */
.bl-wrap  { width: var(--wrap); margin-inline: auto; }
.bl-block { padding-block: var(--sec); }
/* ⚠ فضای بالای تیتر بیشتر از پایینش — گروه‌بندی از همین می‌آید. */
.bl-head  { max-width: var(--prose); margin-bottom: var(--group); }
.bl-head p { margin-top: 0.4rem; color: var(--oui-muted); }


/* ---- ۴ — سربرگ ----
   بومِ صفحه، نه پرده‌ی رنگی. عمقش از یک خطِ مو می‌آید. */
.bl-top {
    position: sticky; inset-block-start: 0; z-index: 30;
    background: var(--oui-bg);
    border-bottom: 1px solid var(--oui-border);
}
.bl-top__in {
    width: var(--wrap); margin-inline: auto;
    display: flex; align-items: center; gap: var(--gap);
    min-height: 56px;
    /* ⚠ nowrap اجباری است: بدونش عنوانِ بلندِ فارسی داخلِ لینک می‌شکند و
       ردیف دوخطی می‌شود — روی ویوپورتِ ~۱۲۲۰ دقیقاً همین افتاد. */
    flex-wrap: nowrap;
}

.bl-brand {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    color: var(--oui-text); text-decoration: none;
    font-weight: 800; font-size: 1rem; white-space: nowrap;
}
.bl-brand__mark { width: 22px; height: 22px; flex: none; color: var(--oui-primary); }

/* ⛔ ناوبری کنارِ برند می‌ماند. `margin-inline-start:auto` روی خودِ ناو،
     هدر را آینه می‌کند: برند یک لبه، همه‌چیز لبه‌ی مقابل، حفره وسط. */
.bl-nav {
    display: flex; align-items: center; gap: 2px;
    margin-inline-start: var(--group);
    min-width: 0;
}
.bl-nav a {
    display: inline-flex; align-items: center;
    height: var(--oui-h-dense); padding-inline: 12px;
    border-radius: var(--oui-r-pill);
    color: var(--oui-muted); text-decoration: none;
    font-size: 0.875rem; font-weight: 700; white-space: nowrap;
    transition: background .15s, color .15s;
}
.bl-nav a:hover { background: var(--oui-soft); color: var(--oui-text); }
.bl-nav a[aria-current="page"] { background: var(--oui-chip); color: var(--oui-primary); }

.bl-util { display: flex; align-items: center; gap: var(--gap); margin-inline-start: auto; flex: none; }


/* ---- ۵ — متن ---- */
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.45; text-wrap: balance; }
h1 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; }
h2 { font-size: 1.125rem; letter-spacing: -0.01em; }
h3 { font-size: 0.9375rem; font-weight: 700; }

.bl-lead { max-width: var(--prose); color: var(--oui-muted); margin-top: 0.75rem; }

a { color: var(--oui-primary); text-underline-offset: 0.28em; }
a:hover { color: var(--oui-primary-2); }


/* ---- ۶ — دکمه و کارت ---- */
.bl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: var(--oui-h-field); padding-inline: 22px;
    border: none; border-radius: var(--oui-r-pill);
    background: var(--oui-soft); color: var(--oui-label);
    font: inherit; font-size: 0.875rem; font-weight: 700;
    text-decoration: none; cursor: pointer;
    transition: background .15s, color .15s;
}
.bl-btn:hover { background: var(--oui-softer); color: var(--oui-text); }
.bl-btn--primary { background: var(--oui-primary); color: #fff; }
.bl-btn--primary:hover { background: var(--oui-primary-2); color: #fff; }
.bl-btn--sm { height: var(--oui-h-dense); padding-inline: 16px; font-size: 0.8125rem; }

.bl-panel {
    background: var(--oui-card);
    border: 1px solid var(--oui-border);
    border-radius: var(--oui-r-card);
    box-shadow: var(--oui-shadow);
    padding: 20px;
}


/* ---- ۷ — فهرستِ مقاله‌ها ----
   چیپِ فیلتر، همان شکلی که نوارِ فیلترِ فهرست در سامانه دارد. */
.bl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--group); }
.bl-tab {
    display: inline-flex; align-items: center;
    height: var(--oui-h-dense); padding-inline: 14px;
    border-radius: var(--oui-r-pill);
    background: var(--oui-soft); color: var(--oui-muted);
    font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.bl-tab:hover  { background: var(--oui-softer); color: var(--oui-text); }
.bl-tab.is-on  { background: var(--oui-chip); color: var(--oui-primary); }

.bl-grid {
    display: grid; gap: var(--group);
    /* ستون‌ها از عرض می‌آیند، نه از عددِ ثابت — پس هیچ پله‌ای ردیفِ
       آخرِ ناقص نمی‌سازد. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.bl-card {
    background: var(--oui-card);
    border: 1px solid var(--oui-border);
    border-radius: var(--oui-r-card);
    box-shadow: var(--oui-shadow);
    overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.bl-card:hover { box-shadow: var(--oui-shadow-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .bl-card:hover { transform: none; } }

.bl-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.bl-card__img  { aspect-ratio: 16 / 9; background: var(--oui-soft); overflow: hidden; }
.bl-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bl-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bl-card__title { font-size: 1rem; font-weight: 800; line-height: 1.6; }
.bl-card__ex    { margin: 0; color: var(--oui-muted); font-size: 0.875rem; flex: 1; }
.bl-card__meta  { margin: 0; color: var(--oui-faint); font-size: 0.8125rem; }
.bl-dot { margin-inline: 6px; }

/* برچسبِ دسته — چیپ، نه نوارِ رنگی. */
.bl-chip {
    align-self: flex-start;
    padding: 2px 10px; border-radius: var(--oui-r-pill);
    background: var(--oui-chip); color: var(--oui-primary);
    font-size: 0.75rem; font-weight: 700;
}

/* صفحه‌بندی */
.bl-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--gap); margin-top: var(--sec); }
.bl-pager__at { color: var(--oui-faint); font-size: 0.8125rem; }

/* حالتِ خالی و ۴۰۴ — کارتِ آرام، نه صفحه‌ی خطا. */
.bl-empty {
    max-width: var(--prose); margin-inline: auto;
    padding: 2.5rem 1.5rem; text-align: center;
    background: var(--oui-card);
    border: 1px solid var(--oui-border);
    border-radius: var(--oui-r-card);
    box-shadow: var(--oui-shadow);
    color: var(--oui-muted);
}
.bl-empty__h { margin-bottom: 6px; color: var(--oui-text); font-size: 1.125rem; font-weight: 800; }
.bl-empty p  { margin: 0 0 6px; }


/* ---- ۸ — صفحه‌ی مقاله ---- */
.bl-post { max-width: var(--prose); margin-inline: auto; }

/* ── دو ستون: ناوبرِ موضوع‌ها و متن ──
   زیرِ ۱۰۸۰ یک ستون است و ناوبر بالای متن می‌نشیند. از ۱۰۸۰ به بالا دو
   ستون می‌شود؛ چون صفحه راست‌چین است، **ستونِ اول همان سمتِ راست است**.

   ⚠ مقاله در DOM اول می‌آید و جایش را `grid-column` می‌دهد، نه ترتیب —
     وگرنه صفحه‌خوان و پیمایشِ کیبورد اول ده لینکِ فهرست را می‌خوانند و
     بعد به جمله‌ی اولِ متن می‌رسند. */
.bl-layout { display: grid; gap: var(--group); }

/* ترتیبِ یک‌ستونه: عنوان، فهرست، متن. در DOM هم همین است، پس هیچ
   `order` ای لازم نیست و ترتیبِ صفحه‌خوان با ترتیبِ دیده‌شده یکی است. */
.bl-layout > .bl-post__head,
.bl-layout > .bl-post { max-width: var(--prose); margin-inline: auto; width: 100%; }

@media (min-width: 1024px) {
    .bl-layout {
        /* ستونِ اول در صفحه‌ی راست‌چین یعنی سمتِ راست. */
        grid-template-columns: 15rem minmax(0, var(--prose));
        justify-content: center;
        gap: 0 var(--sec);
        /* ⚠⚠ این‌جا `align-items: start` ننویس. با آن، خانه‌ی فهرست به
             اندازه‌ی محتوای خودش کوتاه می‌شود (۳۶۰ پیکسل در برابرِ
             ۴۱۸۸ پیکسلِ مقاله) و `sticky` هیچ فضایی برای حرکت ندارد —
             فهرست چند سانت پایین می‌آید و بعد با متن از صفحه بیرون
             می‌رود. پیش‌فرضِ `stretch` همان چیزی است که می‌خواهیم:
             ستون تا پایانِ مقاله کشیده می‌شود و چسبندگی تا آخر کار
             می‌کند. ۱۲ مهر ۱۴۰۵. */
    }
    .bl-layout > .bl-post__head { grid-column: 2; grid-row: 1; margin-inline: 0; }
    .bl-layout > .bl-post       { grid-column: 2; grid-row: 2; margin-inline: 0; }
    .bl-layout > .bl-more       { grid-column: 2; grid-row: 3; margin-inline: 0; }
    /* فهرست کنارِ هر سه می‌ایستد تا چسبندگی‌اش تا پایانِ صفحه ادامه داشته باشد. */
    .bl-layout > .bl-toc        { grid-column: 1; grid-row: 1 / span 3; }

    /* بدونِ فهرست، متن همان‌طور وسط می‌ماند که قبلاً بود. */
    .bl-layout--solo { grid-template-columns: minmax(0, var(--prose)); }
    .bl-layout--solo > .bl-post__head,
    .bl-layout--solo > .bl-post { grid-column: 1; }
}

/* ── ناوبرِ موضوع‌ها ──
   عمداً کارت نیست. این ناوبریِ درجه‌دوم است و اگر قاب و سایه بگیرد،
   با خودِ مقاله سرِ توجه رقابت می‌کند. */
.bl-toc { min-width: 0; }
.bl-toc__box { border: 0; }
.bl-toc__h {
    cursor: pointer; list-style: none;
    font-size: 0.8125rem; font-weight: 800; color: var(--oui-faint);
    letter-spacing: .02em;
    padding-block: 6px;
}
.bl-toc__h::-webkit-details-marker { display: none; }

.bl-toc__list {
    list-style: none; margin: 6px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 1px;
}
.bl-toc__i a {
    display: block; text-decoration: none;
    padding: 7px 12px; border-radius: var(--oui-r-el);
    color: var(--oui-muted); font-size: 0.8125rem; line-height: 1.7;
    transition: background .15s, color .15s;
}
.bl-toc__i a:hover { background: var(--oui-soft); color: var(--oui-text); }
/* بخشِ جاری — همان چیپِ سربرگ، تا یک زبان باشد. */
.bl-toc__i a[aria-current] { background: var(--oui-chip); color: var(--oui-primary); font-weight: 700; }
/* سرفصلِ درجه‌سه یک پله تورفته و ریزتر. */
.bl-toc__i--l3 a { padding-inline-start: 26px; font-size: 0.78125rem; }

@media (min-width: 1024px) {
    .bl-toc__box {
        position: sticky;
        /* سربرگِ چسبان ۵۶ است؛ این فاصله می‌گذارد فهرست زیرش گیر نکند. */
        inset-block-start: calc(56px + var(--gap));
        max-height: calc(100svh - 56px - var(--sec));
        overflow-y: auto;
    }
}

@media (max-width: 1023px) {
    /* ⚠ فهرستِ ده‌خطیِ بازشده روی گوشی یعنی خواننده باید از رویش رد
         شود تا به جمله‌ی اول برسد. پس بلندی‌اش بسته می‌شود و خودش
         اسکرول می‌خورد — و `<details>` هم اجازه‌ی جمع کردنش را
         می‌دهد. */
    .bl-toc__box {
        background: var(--oui-soft);
        border-radius: var(--oui-r-card);
        padding: 10px 14px;
    }
    .bl-toc__list { max-height: 11rem; overflow-y: auto; }
    .bl-toc__h { min-height: 44px; display: flex; align-items: center; }
}

/* ── نمودارِ Mermaid ──
   ⚠ متنِ خامِ Mermaid تا کشیده‌شدن پنهان است، وگرنه خواننده یک لحظه
     کدِ نمودار را می‌بیند. `data-done` را خودِ اسکریپت می‌گذارد — چه
     موفق، چه ناموفق — تا اگر کشیدن شکست خورد، جای خالی نماند. */
.bl-prose pre.mermaid {
    background: none; padding: 0; border: 0;
    text-align: center; direction: ltr;
    visibility: hidden;
}
.bl-prose pre.mermaid[data-done] { visibility: visible; }
.bl-prose pre.mermaid svg { max-width: 100%; height: auto; }

/* ── نمودارِ درون‌خطی ──
   ⚠ `max-width` و `height:auto` لازم است وگرنه SVG با عرضِ ذاتی‌اش
     رندر می‌شود و روی گوشی از صفحه بیرون می‌زند. */
.bl-prose svg { display: block; max-width: 100%; height: auto; margin: 1.6em auto; }

.bl-crumbs { color: var(--oui-faint); font-size: 0.8125rem; margin-bottom: 0.9rem; }
.bl-crumbs a { color: var(--oui-faint); text-decoration: none; }
.bl-crumbs a:hover { color: var(--oui-primary); }
.bl-crumbs span { margin-inline: 6px; }

.bl-post__title { font-size: clamp(1.55rem, 3vw, 2rem); }
.bl-post__sub   { max-width: var(--prose); margin-top: 0.75rem; color: var(--oui-muted); font-size: 1rem; }
/* خطِ مو زیرِ فراداده مرزِ «سر» و «متن» را می‌سازد، بدونِ پرده‌ی رنگی. */
.bl-post__meta  {
    margin-top: var(--group); padding-bottom: var(--group);
    border-bottom: 1px solid var(--oui-border);
    color: var(--oui-faint); font-size: 0.8125rem;
}

.bl-post__cover {
    margin: var(--group) 0 0;
    border-radius: var(--oui-r-card);
    overflow: hidden;
    border: 1px solid var(--oui-border);
}
.bl-post__cover img { display: block; width: 100%; }


/* متنِ مقاله — تنها جایی که HTML از دیتابیس می‌آید. */
.bl-prose { margin-top: var(--group); }
.bl-prose > :first-child { margin-block-start: 0; }
.bl-prose p { margin: 0 0 1.15em; }

.bl-prose h2 { margin: 2em 0 .6em; font-size: 1.125rem; }
.bl-prose h3 { margin: 1.7em 0 .5em; font-size: 1rem; }
.bl-prose h4 { margin: 1.5em 0 .4em; font-size: 0.9375rem; font-weight: 700; }

.bl-prose ul, .bl-prose ol { margin: 0 0 1.15em; padding-inline-start: 1.5em; }
.bl-prose li { margin-bottom: .45em; }

/* نقلِ قول: سطحِ آرام، نه نوارِ رنگیِ کناری — همان قاعده‌ای که
   `.ar-plan--pick` هم دارد (چیپ به‌جای نوار). */
.bl-prose blockquote {
    margin: 1.4em 0; padding: 14px 16px;
    background: var(--oui-soft); border-radius: var(--oui-r-el);
    color: var(--oui-muted);
}
.bl-prose blockquote p:last-child { margin-bottom: 0; }

.bl-prose img { display: block; margin: 1.6em auto; border-radius: var(--oui-r-el); border: 1px solid var(--oui-border); }
.bl-prose figure { margin: 1.6em 0; }
.bl-prose figcaption { margin-top: 8px; text-align: center; color: var(--oui-faint); font-size: 0.8125rem; }

.bl-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--oui-soft); border-radius: 6px; padding: 2px 6px;
    /* کد همیشه چپ‌چین است، حتی وسطِ جمله‌ی فارسی. */
    direction: ltr; unicode-bidi: isolate;
}
.bl-prose pre {
    /* ⚠ کدِ بلند داخلِ خودش اسکرول شود. بدونِ این، صفحه‌ی موبایل افقی
         اسکرول می‌گیرد — پرتکرارترین سرریزِ این پروژه. */
    overflow-x: auto;
    margin: 1.4em 0; padding: 14px 16px;
    background: var(--oui-soft); border-radius: var(--oui-r-el);
    direction: ltr; text-align: left;
}
.bl-prose pre code { background: none; padding: 0; }

.bl-prose hr { border: 0; border-top: 1px solid var(--oui-border); margin: 2em 0; }

/* جدول: همیشه داخلِ قابِ اسکرول‌شونده، نه روی بدنه‌ی صفحه. */
.bl-prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.875rem; }
.bl-prose th, .bl-prose td {
    border: 1px solid var(--oui-border); padding: 9px 12px; text-align: start;
    /* ⚠⚠ کفِ عرضِ ستون، وگرنه `overflow-x` بالا هیچ‌وقت شلیک نمی‌کند.
         `display:block` روی جدول یعنی جدول به عرضِ **ظرف** جمع می‌شود نه
         عرضِ محتوایش؛ پس هر چهار ستون داخلِ همان عرض فشرده می‌شوند و
         نوارِ اسکرول لازم نمی‌آید. اندازه‌گیریِ ۱۱ مهر ۱۴۰۵ روی ۳۹۰
         پیکسل: ستون‌ها ۷۶ تا ۱۰۲ پیکسل، ردیف‌ها تا ۲۰۰ پیکسل ارتفاع —
         یعنی پنج‌شش نویسه در هر سطر. با این کف، جدول پهن‌تر از ظرف
         می‌شود و داخلِ خودش اسکرول می‌خورد، همان‌طور که از اول قصد بود. */
    min-width: 7.5rem;
}
.bl-prose th { background: var(--oui-soft); font-weight: 700; }

/* کلاس‌هایی که خودِ ویرایشگرِ Quill می‌گذارد. */
.bl-prose .ql-align-center  { text-align: center; }
.bl-prose .ql-align-left    { text-align: left; }
.bl-prose .ql-align-right   { text-align: right; }
.bl-prose .ql-align-justify { text-align: justify; }
.bl-prose .ql-indent-1 { padding-inline-start: 3em; }
.bl-prose .ql-indent-2 { padding-inline-start: 6em; }
.bl-prose .ql-indent-3 { padding-inline-start: 9em; }

/* پرسش‌های پرتکرار — ردیفِ نرم، همان شکلِ `.ar-list`. */
.bl-faq { margin-top: var(--sec); }
.bl-faq h2 { margin-bottom: var(--gap); }
.bl-faq__item {
    background: var(--oui-soft); border-radius: var(--oui-r-el);
    padding: 12px 16px; margin-bottom: 8px;
}
.bl-faq__item summary { cursor: pointer; font-weight: 700; font-size: 0.9375rem; }
.bl-faq__item[open] summary { color: var(--oui-primary); }
.bl-faq__item > div { margin-top: 8px; color: var(--oui-muted); font-size: 0.875rem; }

/* «مطلب‌های دیگر» */
.bl-more { padding-top: var(--sec); margin-top: var(--sec); border-top: 1px solid var(--oui-border); }
.bl-more__h { margin-bottom: var(--group); }

/* ⚠ `auto-fit` نه `auto-fill`: با یک مقاله‌ی مرتبط، `auto-fill` سه ستون
     را نگه می‌دارد و کارت در یک گوشه با دو جای خالی می‌ماند. `auto-fit`
     ستونِ خالی را جمع می‌کند و همان یک کارت عرض را پر می‌کند. */
.bl-grid--more { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }


/* ---- ۹ — پانویس ---- */
.bl-foot { border-top: 1px solid var(--oui-border); padding-block: var(--group); }
.bl-foot__row {
    width: var(--wrap); margin-inline: auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 4px var(--group);
}
.bl-foot__row a { color: var(--oui-muted); text-decoration: none; font-size: 0.8125rem; font-weight: 700; padding-block: 6px; }
.bl-foot__row a:hover { color: var(--oui-text); }
.bl-foot__c { color: var(--oui-faint); font-size: 0.75rem; }


/* ---- ۱۰ — موبایل ----
   ⚠ کفِ لمسیِ ۴۴ فقط تا ۱۰۲۳ اعمال می‌شود. روی دسکتاپ ردیفِ هدر را
     می‌شکند — همان چیزی که DESIGN.md هم هشدار داده. */
@media (max-width: 1023px) {
    .bl-nav a, .bl-tab, .bl-foot__row a, .bl-btn { min-height: 44px; }
    .bl-faq__item summary { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 767px) {
    :root { --sec: 2rem; --wrap: min(66rem, calc(100% - 1.75rem)); }
    /* روی گوشی متنِ ناوبری جا نمی‌شود؛ فقط دکمه‌ی اصلی می‌ماند. */
    .bl-nav { display: none; }
    .bl-card__body { padding: 16px; }
}

/* چاپ */
@media print {
    .bl-top, .bl-foot, .bl-more, .bl-pager, .bl-tabs, .bl-skip { display: none; }
    html, body.bl-body { background: #fff; }
    .bl-post { max-width: none; }
    .bl-prose a::after { content: " (" attr(href) ")"; font-size: .85em; }
}

/* ── نوارِ پیش‌نمایش ──────────────────────────────────────────────────
   عمداً زشت‌تر از بقیه‌ی صفحه است. کسی که این را می‌بیند باید بداند
   صفحه‌ی زنده را نگاه نمی‌کند. */
.bl-draft {
    max-width: var(--prose);
    margin: 0 auto var(--group);
    padding: var(--group);
    border: 2px dashed var(--oui-primary);
    border-radius: var(--oui-r-card);
    background: var(--oui-card);
    color: var(--oui-text);
    font-size: 0.875rem;
    line-height: 1.8;
}
.bl-draft strong { color: var(--oui-primary); }