/* ============================================================
   سبزحساب — پورتال توسعه‌دهنده (مستندات API)

   مخاطبش توسعه‌دهنده است، نه صاحب کسب‌وکار. پس برعکس بقیه
   صفحه‌های عمومی:

   · هر دو تم دارد. کسی که یک ساعت کد می‌خواند، تم تاریک حقش است.
   · ستون محتوا باریک است (۷۲ch) چون متن فنی طولانی خوانده می‌شود.
   · جدول و کد افقی داخل خودشان می‌لغزند، نه بدنه صفحه.
   · فهرست کنار صفحه چسبان است و بخش فعال را علامت می‌زند.

   فقط tokens.css را می‌گیرد — رنگ و قلم برند یکی می‌ماند.
   ============================================================ */

/*
   🔴 `border-box` — همان ریستی که `app.css` خط ۷ برای پنل می‌گذارد.

   این صفحه `app.css` را نمی‌گیرد (فقط tokens.css)، و `tokens.css`
   عمدا ریست ندارد. نتیجه‌اش روی موبایل دیده شد: `.dc-shell` هم
   `inline-size: 100%` دارد هم `padding-inline` — و با `content-box`
   این دو جمع می‌شوند، نه اینکه پدینگ داخل عرض بنشیند. عرض ۳۷۵ شد
   ۴۰۷ و **کل صفحه** افقی می‌لغزید.

   و بدترین بخشش این بود که روی دسکتاپ هیچ نشانه‌ای نداشت.

   دامنه‌اش عمدا `.dc-page` است و نه `*` سراسری: این فایل کنار
   `pricing.css` و `home.css` زندگی می‌کند که هیچ‌کدام ریست ندارند و
   چیدمانشان روی همین فرض نوشته شده.
*/
.dc-page,
.dc-page *,
.dc-page *::before,
.dc-page *::after { box-sizing: border-box; }

.dc-page {
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ground);
    color: var(--ink);

    /*
       ── قلم کد: حرف‌ها ایران‌سنس، ارقام لاتین ──

       🔴 این یک مورد است که فقط روی همین صفحه فرق می‌کند، و دلیلش
       محکم است.

       هر دو ایران‌سنس (X و XNum) ارقام ASCII را به **شکل فارسی**
       می‌کشند. در کل سبزحساب همین درست است: مبلغ و تاریخ و شماره
       سند را کاربر فارسی می‌خواند.

       ولی اینجا نه. یک بار با همان قلم دیده شد و نتیجه این بود:

           Idempotency-Key: ord-SHOP-۸۸۴۵۱۲
           ۴۰۹ idempotency_key_reused
           /v۱/openapi.json

       یعنی کد وضعیت HTTP، نسخه API و شناسه نمونه، همه با ارقامی
       نوشته می‌شدند که در هیچ ترمینال و هیچ لاگی آن شکل را ندارند.
       متن کپی‌شده درست بود (در DOM همان ASCII است) ولی خوانده‌شده
       غلط — و توسعه‌دهنده‌ای که `/v۱/` می‌بیند، منطقا شک می‌کند که
       باید چه تایپ کند.

       `BrandLatinNum` در tokens.css دقیقا برای همین هست:
       `unicode-range: U+0030-0039` و `src: local(...)` — پس فقط
       ارقام ASCII را از یک قلم سیستمی می‌گیرد، حرف‌ها از ایران‌سنس
       می‌آیند، و قاعده ۱ (بدون فایل خارجی) هم نمی‌شکند.

       🔴 ارقام فارسی متن (۶۰۰، ۱۲۰، ۲۴) دست‌نخورده می‌مانند، چون
       آن‌ها U+06F0-06F9 نوشته شده‌اند و اصلا در این بازه نیستند.
    */
    --font-code: 'BrandLatinNum', 'IRANSansXNum', 'IRANSansX', Tahoma, sans-serif;
}

/* ══════════════════════════ نوار بالا ══════════════════════════ */

.dc-top {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-6);
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    border-block-end: 1px solid var(--border);
    /*
       🔴 `backdrop-filter` تنها جایی است که این صفحه شفافیت دارد.
       بدون `background` نیمه‌شفاف پشتش، در مرورگری که فیلتر را
       پشتیبانی نکند نوار کاملا شفاف می‌شد و متن زیرش رد می‌شد.
    */
    backdrop-filter: blur(10px);
}

.dc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 18px;
    color: var(--ink);
    text-decoration: none;
    flex: none;
}

.dc-brand svg { flex: none; }

.dc-brand .dc-kicker {
    font-size: var(--text-label);
    font-weight: 500;
    color: var(--ink-faint);
    padding-inline-start: var(--sp-2);
    border-inline-start: 1px solid var(--border-strong);
    margin-inline-start: var(--sp-1);
}

.dc-top nav {
    margin-inline-start: auto;
    display: flex;
    gap: var(--sp-1);
    align-items: center;
}

.dc-top nav a {
    padding: 7px 14px;
    border-radius: var(--r-pill);
    text-decoration: none;
    font-size: var(--text-sub);
    font-weight: 500;
    color: var(--ink-muted);
    white-space: nowrap;
}

.dc-top nav a:hover {
    color: var(--ink);
    background: var(--surface-sunken);
}

.dc-top nav a.is-cta {
    background: var(--brand-primary);
    color: var(--ink-on-brand);
    font-weight: 700;
}

/* دکمه تم و دکمه فهرست موبایل — یک شکل */
.dc-iconbtn {
    inline-size: 34px;
    block-size: 34px;
    display: inline-grid;
    place-items: center;
    flex: none;
    border: 1px solid var(--border);
    border-radius: var(--r-field);
    background: var(--surface);
    color: var(--ink-muted);
    cursor: pointer;
}

.dc-iconbtn:hover {
    color: var(--ink);
    border-color: var(--border-strong);
}

.dc-burger { display: none; }

/* ══════════════════════════ چیدمان ══════════════════════════ */

.dc-shell {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: var(--sp-8);
    max-inline-size: 1320px;
    inline-size: 100%;
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-6) var(--sp-16);
    align-items: start;
    /*
       🔴 `minmax(0, 1fr)` و نه `1fr`.
       ستون grid پیش‌فرض `min-width: auto` دارد، یعنی از پهن‌ترین
       محتوایش کوچک‌تر نمی‌شود. یک جدول مسیرها یا یک خط کد بلند،
       ستون را باز می‌کرد و کل صفحه افقی می‌لغزید — دقیقا همان چیزی
       که `overflow-x: auto` روی خود جدول قرار بود جلویش را بگیرد.
    */
}

/* ══════════════════════════ فهرست کنار ══════════════════════════ */

.dc-side {
    position: sticky;
    inset-block-start: 76px;
    max-block-size: calc(100vh - 92px);
    overflow-y: auto;
    padding-block-end: var(--sp-6);
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

.dc-search {
    inline-size: 100%;
    block-size: var(--h-control-sm);
    padding: 0 var(--sp-3);
    margin-block-end: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--r-field);
    background: var(--surface);
    font-size: var(--text-sub);
}

.dc-search::placeholder { color: var(--ink-faint); }

/* ---------- گروه تاشو ---------- */

.dc-group { margin-block-end: 2px; }
.dc-group[hidden] { display: none; }

.dc-group__head {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px var(--sp-2) 7px var(--sp-3);
    border: 0;
    border-radius: var(--r-field);
    background: transparent;
    color: var(--ink);
    font-size: var(--text-sub);
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

.dc-group__head:hover { background: var(--surface-sunken); }

.dc-group__head > span:first-of-type { flex: 1 1 auto; }

/* شمارنده مدخل‌ها — تا پیش از باز کردن معلوم باشد چقدر داخلش هست */
.dc-group__n {
    flex: none;
    min-inline-size: 20px;
    padding: 0 6px;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    color: var(--ink-faint);
    font-family: var(--font-code);
    font-size: var(--text-tiny);
    font-weight: 500;
    text-align: center;
}

.dc-group.is-open .dc-group__n {
    background: var(--brand-50);
    color: var(--brand-primary);
}

/*
   🔴 پیکان در RTL باید به **چپ** بچرخد، نه راست.
   `rotate(180deg)` در حالت بسته، چون مسیر SVG به راست اشاره می‌کند
   و در صفحه راست‌به‌چپ، «بسته» یعنی رو به داخل متن.
*/
.dc-group__chev {
    flex: none;
    color: var(--ink-faint);
    transform: rotate(180deg);
    transition: transform var(--t-fast) var(--ease);
}

.dc-group.is-open .dc-group__chev { transform: rotate(90deg); }

/*
   🔴 `display: none` و نه `max-height` متحرک.

   ارتفاع گروه‌ها از ۲ تا ۱۴ مدخل فرق می‌کند، پس هر `max-height`
   ثابتی یا بلندترین گروه را می‌برد یا برای کوتاه‌ها کند به نظر
   می‌رسد. و مهم‌تر: مدخل پنهان نباید در `IntersectionObserver` و
   جست‌وجو شرکت کند.
*/
.dc-group ul {
    display: none;
    list-style: none;
    margin: 0 0 var(--sp-2);
    padding: 0;
    flex-direction: column;
    gap: 1px;
}

.dc-group.is-open ul { display: flex; }

/* ---------- مدخل ---------- */

.dc-side a {
    display: block;
    /*
       تورفتگی بیشتر از سرگروه، تا سلسله‌مراتب از روی چیدمان خوانده
       شود نه فقط از روی وزن قلم.
    */
    padding: 6px var(--sp-3) 6px var(--sp-8);
    border-radius: var(--r-field);
    font-size: var(--text-sub);
    color: var(--ink-muted);
    text-decoration: none;
    border-inline-start: 2px solid transparent;
}

.dc-side a:hover {
    background: var(--surface-sunken);
    color: var(--ink);
}

.dc-side a.is-active {
    background: var(--brand-50);
    border-inline-start-color: var(--brand-primary);
    color: var(--brand-primary);
    font-weight: 700;
}

.dc-side li.is-hidden { display: none; }

/* ══════════════════════════ محتوا ══════════════════════════ */

.dc-main { min-inline-size: 0; }

.dc-hero {
    padding-block: var(--sp-4) var(--sp-6);
    border-block-end: 1px solid var(--border);
    margin-block-end: var(--sp-8);
}

.dc-hero h1 {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 800;
    margin: 0 0 var(--sp-3);
    line-height: 1.4;
}

.dc-hero h1 .g {
    background: linear-gradient(120deg, #11AD85, #57D362 60%, #98E766);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.dc-hero p {
    margin: 0;
    max-inline-size: 68ch;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 2;
    color: var(--ink-muted);
}

/* اعلان وضعیت — صادق و بالای صفحه، نه در پانوشت */
.dc-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-block-start: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--warning-bg);
    border: 1px solid color-mix(in oklab, var(--warning) 25%, transparent);
    border-radius: var(--r-card);
    font-size: var(--text-sub);
    line-height: 1.9;
}

.dc-notice svg {
    flex: none;
    margin-block-start: 4px;
    color: var(--warning);
}

/* ---------- بخش‌ها ---------- */

.dc-sec {
    /*
       🔴 `scroll-margin-top` وگرنه نوار بالای چسبان، سربرگ بخشی که
       از فهرست کلیک شده را می‌پوشاند و کاربر فکر می‌کند لینک کار
       نکرده است.
    */
    scroll-margin-block-start: 84px;
    padding-block-end: var(--sp-10);
}

.dc-sec > h2 {
    font-size: var(--text-title);
    font-weight: 800;
    margin: 0 0 var(--sp-4);
    padding-block-end: var(--sp-2);
    border-block-end: 1px solid var(--border);
}

.dc-sec h3 {
    font-size: var(--text-section);
    font-weight: 700;
    margin: var(--sp-8) 0 var(--sp-3);
}

.dc-sec h4 {
    font-size: var(--text-card);
    font-weight: 700;
    margin: var(--sp-6) 0 var(--sp-2);
}

.dc-sec p,
.dc-sec li {
    max-inline-size: 72ch;
    line-height: 1.95;
    color: var(--ink);
}

.dc-sec p { margin: 0 0 var(--sp-4); }

.dc-sec ul,
.dc-sec ol {
    margin: 0 0 var(--sp-4);
    padding-inline-start: var(--sp-5);
}

.dc-sec li { margin-block-end: var(--sp-2); }

.dc-sec code {
    font-family: var(--font-code);
    font-size: .92em;
    direction: ltr;
    unicode-bidi: isolate;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);

    /*
       🔴 `nowrap` نه — و این یکی روی موبایل گران تمام شد.

       کد درون‌خطی در این صفحه گاهی بلند است
       (`POST /v1/accounting/journal-entries/{id}/reverse`). با
       `nowrap` این ۲۷۴ پیکسل در هیچ خطی جا نمی‌شد، از جعبه خط
       می‌زد بیرون، و **کل صفحه** افقی می‌لغزید — روی عرض ۳۷۵.

       `anywhere` فقط وقتی می‌شکند که واقعا جا نشود، پس `GET` و
       `IRR` و بقیه کدهای کوتاه دست‌نخورده یک‌تکه می‌مانند.

       مسیر داخل جدول همچنان `nowrap` است — آنجا درست است، چون خود
       جدول در `.dc-tablewrap` می‌لغزد نه صفحه.
    */
    overflow-wrap: anywhere;
}

/* ---------- قاعده برجسته ---------- */

.dc-rule {
    display: flex;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--negative);
    border-radius: var(--r-card);
    font-size: var(--text-sub);
    line-height: 1.95;
    max-inline-size: 76ch;
}

.dc-rule > span:first-child {
    flex: none;
    font-size: 15px;
    line-height: 1.6;
}

.dc-rule p:last-child { margin-block-end: 0; }
.dc-rule p { margin-block-end: var(--sp-2); max-inline-size: none; }

.dc-rule--info { border-inline-start-color: var(--info); }
.dc-rule--good { border-inline-start-color: var(--positive); }

/* ---------- جدول ---------- */

.dc-tablewrap {
    overflow-x: auto;
    margin: 0 0 var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

.dc-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-sub);
}

.dc-table th,
.dc-table td {
    padding: 9px var(--sp-4);
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--border);
    line-height: 1.8;
}

.dc-table thead th {
    background: var(--surface-sunken);
    font-weight: 700;
    font-size: var(--text-label);
    color: var(--ink-muted);
    white-space: nowrap;
    position: sticky;
    inset-block-start: 0;
}

.dc-table tbody tr:last-child td { border-block-end: 0; }
.dc-table tbody tr:hover { background: var(--surface-sunken); }

.dc-table td code {
    white-space: nowrap;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--brand-primary);
    font-weight: 500;
}

/* ستون مسیر همیشه چپ‌چین و لاتین */
.dc-table .path {
    font-family: var(--font-code);
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

/* ---------- نشان فعل HTTP ---------- */

.verb {
    display: inline-block;
    min-inline-size: 54px;
    text-align: center;
    padding: 1px 7px;
    margin-inline-end: 3px;
    border-radius: 4px;
    font-family: var(--font-code);
    font-size: var(--text-tiny);
    font-weight: 700;
    letter-spacing: .03em;
    direction: ltr;
}

.verb--get    { background: var(--info-bg);     color: var(--info); }
.verb--post   { background: var(--positive-bg); color: var(--positive); }
.verb--patch  { background: var(--warning-bg);  color: var(--warning); }
.verb--put    { background: var(--warning-bg);  color: var(--warning); }
.verb--delete { background: var(--negative-bg); color: var(--negative); }

/* ---------- نشان اختیار و طرح ---------- */

.chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--r-pill);
    font-size: var(--text-tiny);
    font-weight: 500;
    background: var(--neutral-bg);
    color: var(--ink-muted);
    white-space: nowrap;
}

.chip--scope {
    font-family: var(--font-code);
    direction: ltr;
    background: var(--brand-50);
    color: var(--brand-primary);
    font-weight: 700;
}

.chip--paid { background: var(--negative-bg); color: var(--negative); font-weight: 700; }
.chip--plan { background: var(--warning-bg);  color: var(--warning); }

/* ══════════════════════ بلوک کد ══════════════════════ */

/*
   🔴 بلوک کد در **هر دو تم** تیره است، و این عمدی است.

   بقیه صفحه با تم عوض می‌شود؛ کد نه. سه دلیل:

   ۱. کد در تم روشن هم با زمینه تیره خوانده می‌شود — این قرارداد هر
      پورتال توسعه‌دهنده‌ای است (ملی‌پیامک، استرایپ، توییلیو). چشم
      خواننده انتظارش را دارد.
   ۲. رنگ‌های نحو روی یک زمینه ثابت تنظیم می‌شوند، نه دو تا. با دو
      زمینه باید هر رنگ را دو بار بسنجیم و یکی‌شان همیشه ضعیف می‌ماند.
   ۳. کد را از متن جدا می‌کند. در صفحه‌ای با ۲۳ بلوک، همین تضاد
      ساختار را دیدنی می‌کند.

   پس این پالت از توکن‌های تم **نمی‌آید** و متغیرهای خودش را دارد.
*/
.dc-code {
    --code-bg:      #0C1A16;   /* هم‌خانواده brand-950، نه مشکی خام */
    --code-bar:     #122421;
    --code-border:  #1E3831;
    --code-ink:     #D8E8E2;
    --code-faint:   #6E8A82;

    /* ── رنگ نحو ── */
    --code-key:     #98E766;   /* کلید JSON، نام هدر */
    --code-str:     #7FD6B4;   /* رشته */
    --code-num:     #F5C96B;   /* عدد و بولین */
    --code-verb:    #6BA5F5;   /* فعل HTTP، کلمه کلیدی */
    --code-var:     #E99CD0;   /* متغیر PHP */
    --code-note:    #5F7B73;   /* کامنت */
    --code-punc:    #7E9B93;

    position: relative;
    margin: 0 0 var(--sp-5);
    border: 1px solid var(--code-border);
    border-radius: var(--r-card);
    background: var(--code-bg);
    overflow: hidden;
}

.dc-code__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px var(--sp-3) 7px var(--sp-4);
    background: var(--code-bar);
    border-block-end: 1px solid var(--code-border);
    font-size: var(--text-label);
    color: var(--code-faint);
}

.dc-code__lang {
    font-family: var(--font-code);
    direction: ltr;
    font-weight: 500;
    letter-spacing: .02em;
}

.dc-copy {
    margin-inline-start: auto;
    padding: 2px 10px;
    border: 1px solid var(--code-border);
    border-radius: var(--r-field);
    background: transparent;
    color: var(--code-faint);
    font-size: var(--text-tiny);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}

.dc-copy:hover { color: var(--code-ink); border-color: var(--code-faint); }
.dc-copy.is-done { color: var(--code-key); border-color: var(--code-key); }

/* فوکوس روی زمینه تیره باید روشن باشد، نه سبز برند */
.dc-copy:focus-visible { outline: 2px solid var(--code-key); outline-offset: 2px; }

.dc-code pre {
    margin: 0;
    padding: var(--sp-4);
    overflow-x: auto;
    direction: ltr;
    text-align: start;
    scrollbar-width: thin;
    scrollbar-color: var(--code-border) transparent;
}

.dc-code code {
    font-family: var(--font-code);
    font-size: var(--text-sub);
    line-height: 1.85;
    background: transparent;
    border: 0;
    padding: 0;
    white-space: pre;
    color: var(--code-ink);
}

/* ── نشانه‌های نحو که docs.js می‌گذارد ── */
.tok-key  { color: var(--code-key); }
.tok-str  { color: var(--code-str); }
.tok-num  { color: var(--code-num); }
.tok-verb { color: var(--code-verb); font-weight: 700; }
.tok-var  { color: var(--code-var); }
.tok-note { color: var(--code-note); font-style: italic; }
.tok-punc { color: var(--code-punc); }

/*
   🔴 متن فارسی داخل نمونه کد (مثل "هزینه ارسال") باید راست‌به‌چپ
   خوانده شود ولی **جای خودش** را در خط LTR نگه دارد. بدون
   `isolate`، یک رشته فارسی وسط JSON کل بقیه خط را جابه‌جا می‌کرد و
   کاما و آکولاد سر جای غلط می‌نشستند.
*/
.dc-code code .fa { unicode-bidi: isolate; }

/* ---------- کارت‌های شروع سریع ---------- */

.dc-cards {
    display: grid;
    gap: var(--sp-3);
    grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
    margin: 0 0 var(--sp-6);
}

.dc-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    text-decoration: none;
    color: var(--ink);
}

.dc-card:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-pop);
}

.dc-card b { font-size: var(--text-card); font-weight: 700; }

.dc-card span {
    font-size: var(--text-label);
    color: var(--ink-muted);
    line-height: 1.75;
}

/* ---------- گام‌های آموزش ---------- */

.dc-steps {
    list-style: none;
    margin: 0 0 var(--sp-6);
    padding: 0;
    counter-reset: step;
}

.dc-steps > li {
    counter-increment: step;
    position: relative;
    padding-inline-start: var(--sp-10);
    padding-block-end: var(--sp-6);
    max-inline-size: none;
    margin-block-end: 0;
}

.dc-steps > li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 28px;
    block-size: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand-primary);
    color: var(--ink-on-brand);
    font-family: var(--font-num);
    font-size: var(--text-sub);
    font-weight: 700;
}

/* خط عمودی بین گام‌ها */
.dc-steps > li:not(:last-child)::after {
    content: '';
    position: absolute;
    inset-inline-start: 13px;
    inset-block: 34px 6px;
    border-inline-start: 2px dotted var(--border-strong);
}

.dc-steps > li > h4 { margin-block-start: 3px; }

/* ---------- مقایسه با رقبا ---------- */

/*
   خانه‌های این جدول شناسه فنی و متن فارسی را قاتی دارند
   («OpenAPI 3.1»، «/v1/»، «OAuth2» کنار «۲۲ اختیار» و «۲۴۰ یکسان
   برای همه»).

   🔴 و این قاعده دقیقا همان چیزی را می‌کند که باید، نه بیشتر:
   `BrandLatinNum` فقط U+0030-0039 را می‌گیرد، پس «3.1» لاتین
   می‌شود و «۲۴۰» — که با ارقام فارسی U+06F0-06F9 نوشته شده —
   دست‌نخورده فارسی می‌ماند. یک خانه، دو جور رقم، هر کدام درست.
*/
.dc-vs .dc-table td { font-family: var(--font-code); }

.dc-vs .yes { color: var(--positive); font-weight: 700; }
.dc-vs .no  { color: var(--negative); font-weight: 700; }
.dc-vs .meh { color: var(--warning);  font-weight: 700; }

/* نشانی بیرون از جدول هم همان قلم کد را می‌گیرد */
.dc-sec .path {
    font-family: var(--font-code);
    direction: ltr;
    unicode-bidi: isolate;
}

/* ---------- پانوشت ---------- */

.dc-foot {
    margin-block-start: auto;
    padding: var(--sp-6);
    border-block-start: 1px solid var(--border);
    text-align: center;
    font-size: var(--text-label);
    color: var(--ink-faint);
    line-height: 2.2;
}

.dc-foot a { color: var(--ink-muted); }

/* ══════════════════════════ موبایل ══════════════════════════ */

@media (max-width: 1000px) {
    .dc-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-4);
        padding-inline: var(--sp-4);
    }

    .dc-burger { display: inline-grid; }

    .dc-side {
        position: static;
        max-block-size: none;
        overflow: visible;
        padding: var(--sp-4);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-card);
    }

    /* روی موبایل بسته است تا محتوا بالا بماند */
    .dc-side[hidden] { display: none; }

    .dc-top nav a:not(.is-cta) { display: none; }
}

@media (max-width: 560px) {
    .dc-brand .dc-kicker { display: none; }
    .dc-sec > h2 { font-size: var(--text-section); }
}

/* چاپ: فهرست و نوار بالا لازم نیست */
@media print {
    .dc-top, .dc-side, .dc-copy { display: none !important; }
    .dc-shell { grid-template-columns: 1fr; padding: 0; }
    .dc-sec { page-break-inside: avoid; }
}