/* dmhouse-tables.css — پوستهٔ مشترک جدول‌های افزونهٔ جدول‌ها.
   ⚠ این پرونده عیناً از پوستهٔ جدول‌های قالب قیمت طراحی سایت گرفته شده و فقط ریشه‌اش
   عوض شده: آنجا زیر ریشهٔ همان قالب محدود بود، اینجا زیر کلاس مستقل dmt می‌نشیند تا
   هر صفحه‌ای بتواند همان جدول را با همان ظاهر بیاورد.
   ⚠ قالب قیمت هنوز نسخهٔ خودش را دارد و به خواستهٔ کارفرما دست‌نخورده مانده است؛ پس
   امروز خروجی دو نسخه یکی است ولی جدا نگه‌داری می‌شوند. اگر ظاهر جدول عوض شد، هر دو
   باید عوض شوند.
   ⚠ هیچ filter و perspective ای اینجا نیست؛ برجستگی فقط از لبه و سایهٔ کوتاه است. */

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

/* ⚠ نشانه‌گذاری جدول از افزونهٔ جدول‌ها می‌آید، پس همهٔ قاعده‌ها روی کلاس‌های همان افزونه
   نوشته شده‌اند و زیر ریشهٔ این قالب محدود شده‌اند تا به جدول‌های جای دیگر سایت نزنند.
   ⚠ ویژگی سلکتور عمداً بالا برده شده: شیوه‌نامهٔ خودِ افزونه و شیوه‌نامهٔ سازندهٔ صفحه هر
   دو روی همین کلاس‌ها قاعده دارند و با ویژگی پایین، رنگ و فاصله‌ها برنده نمی‌شدند. */

.dmt {
    position: relative;
    margin-block-start: clamp(18px, 2.4vw, 26px);
}

/* ⚠ چیدمان انعطافی است، و این یک ترفند نیست بلکه تنها مکانیزم قابل اتکاست.
   سه بار «عرض» را با important نوشتیم و روی سایت زنده جدول باز هم نصف قاب ماند؛
   در بستر آزمایش همان نشانه‌گذاری با همین شیوه‌نامه کامل پر می‌شد، یعنی قاعده درست
   است و چیزی در سایت آن را می‌شکند. در چیدمان انعطافی، کِشش عضو از خصوصیتِ «عرض»
   خوانده نمی‌شود؛ پس هر قاعده‌ای که عرض را دستکاری کند دیگر بی‌اثر است.
   ⚠ عضو فقط بزرگ می‌شود و کوچک نمی‌شود، تا جدول‌های پهن همچنان بتوانند سرریز کنند و
   همین ظرف اسکرول افقی‌شان بدهد. */
/* ⚠ ظرف دیگر قاب نیست: از وقتی خانه‌ها جدا از هم و هرکدام یک کارت مستقل شدند، یک قاب
   دور آن‌ها جدول را دوباره «جعبه» می‌کرد و همان جدایی را خنثی می‌کرد.
   ⚠ فاصلهٔ درونی لازم است، نه تزئینی: سرریزِ افقی، برش عمودی هم می‌آورد و بدون این
   فاصله سایهٔ زیر کارت‌ها از لبهٔ ظرف بریده می‌شد. */
.dmt__scroll {
    display: flex;
    overflow-x: auto;
    padding: 6px 4px 14px;
    border: 0;
    background-color: transparent;
}

/* ⚠ سلکتور عمداً به نام کلاسِ افزونه و به پوششِ بیرونی وابسته نیست: هر جدولی که
   مستقیم داخل این ظرف بنشیند کشیده می‌شود. اگر روزی افزونه نام کلاسش را عوض کند یا
   پوشش بیرونی جابه‌جا شود، این قاعده همچنان کار می‌کند. */
.dmt__scroll > table {
    flex: 1 0 auto;
}

.dmt__missing {
    margin: 12px 0;
    padding: 12px 16px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

/* ⚠ عرض جدول با important نوشته می‌شود و این تصمیم بر پایهٔ اندازه‌گیری است نه حدس:
   همین نشانه‌گذاری و همین شیوه‌نامه در یک صفحهٔ ایزوله سنجیده شد و جدول کامل عرض قابش
   را گرفت (۱۳۵۸ از ۱۳۶۰ پیکسل). پس قاعدهٔ ما درست است و روی سایت زنده قاعدهٔ دیگری
   آن را می‌شکند؛ تنها چیزی که بر important غلبه می‌کند، important است.
   هر سه خصوصیت با هم می‌آیند: نوشتن فقط عرض کافی نیست اگر آن قاعده سقف عرض یا کف عرض
   را هم بسته باشد. */
/* ⚠ display اینجا عمداً inline-table است و این تنها تکه‌ای از این پرونده است که بر پایهٔ
   آزمایشِ خودِ کارفرما روی سایت زنده نوشته شده، نه بر پایهٔ اندازه‌گیری من: در محیط
   ایزوله — حتی با بارکردن شیوه‌نامهٔ خودِ افزونه — جدول همیشه کامل عرض می‌گرفت، پس
   قاعده‌ای بیرون از هر دو پرونده در کار است. محتمل‌ترین جا «سی‌اس‌اس سفارشی» خودِ
   افزونه است که در پایگاه داده ذخیره می‌شود و بعد از شیوه‌نامه‌اش بار می‌شود؛ چون در
   پرونده‌های افزونه نیست، با خواندن کد پیدا نمی‌شود.
   در ظرفِ انعطافی، این مقدار خودبه‌خود به table تبدیل می‌شود و بی‌اثر است؛ پس هر دو
   مسیر پوشش داده می‌شوند و هیچ‌کدام دیگری را خراب نمی‌کند.
   ⚠ حاشیهٔ صفر هم لازم است: شیوه‌نامهٔ افزونه margin خودکار می‌دهد و حاشیهٔ خودکار در
   ظرف انعطافی فضای آزاد را می‌بلعد. */
.dmt .tablepress {
    display: inline-table;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0;
    border-collapse: separate;
    /* ⚠ همین یک خط است که خانه‌ها را از هم جدا می‌کند؛ بدون آن هیچ کارتی از کارت کناری
       فاصله نمی‌گیرد و شعاع گوشه‌ها هم دیده نمی‌شود. */
    border-spacing: 9px;
    font-size: 14px;
    background-color: transparent;
}

/* ⚠ خط جداکنندهٔ افقی برداشته شد: وقتی هر خانه یک کارت جداست، خط زیر آن یک مرزِ دوم
   می‌سازد و همان چیزی است که جدول را شلوغ نشان می‌دهد. جدایی را فاصله می‌سازد. */
.dmt .tablepress th,
.dmt .tablepress td {
    padding: 15px 17px;
    border: 0;
    border-radius: 13px;
    line-height: 1.9;
    vertical-align: middle;
    background-color: transparent;
    word-break: normal;
    overflow-wrap: anywhere;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* ستون اول=نام ویژگی: آغازچین و پررنگ. بقیهٔ ستون‌ها مقدارند و وسط‌چین می‌مانند تا
   ستون‌ها در یک نگاه با هم مقایسه شوند. */
.dmt .tablepress .column-1 {
    min-width: 190px;
    text-align: start;
    font-weight: 700;
    color: var(--text-primary);
}

/* خانه‌های مقدار: کارت برجستهٔ روشن. یک خط نوریِ یک‌پیکسلی بالای کارت و یک سایهٔ کوتاه
   زیرش، همان حداقلی که برای «بالا بودن» لازم است. */
/* ⚠ اعلان اول یک عقب‌نشینی است، نه تکرار: مرورگری که color-mix را نشناسد خط دوم را
   نادیده می‌گیرد و همان رنگ توپر را می‌گیرد؛ بدون آن، خانه بی‌رنگ می‌شد.
   نیمه‌شفافی هم عمدی است: رنگ سکشن کمی از پشت کارت پیداست و همین است که سطح را
   شیشه‌ای می‌کند، بدون آنکه چیزی واقعاً تار شود. */
.dmt .tablepress td:not(.column-1) {
    background-color: var(--bg-secondary);
    background-color: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .85) 0%,
                      rgba(255, 255, 255, .30) 47%,
                      rgba(255, 255, 255, 0) 48%,
                      rgba(255, 255, 255, .14) 100%);
    box-shadow: inset 0 0 0 1px var(--border-color),
                inset 0 1px 0 rgba(255, 255, 255, .95),
                0 6px 12px -9px rgba(10, 25, 47, .60);
    text-align: center;
    color: var(--text-secondary);
}

/* ⚠ برجستگی از «لبه» ساخته می‌شود، نه از «سایهٔ پخش». هر لایه بدون پخش‌شدگی و فقط یک
   تا سه پیکسل است: تابش لبهٔ بالا (نور از بالا)، تیرگی لبهٔ پایین، و یک لبِ کوتاه زیر
   ردیف که ضخامت را می‌سازد. سایهٔ پخش روی ردیفِ تمام‌عرض به‌جای عمق، لکه می‌سازد.
   ⚠ نه فیلتر و نه جابه‌جایی: هر دو ردیف را به لایهٔ گرافیکی جدا می‌برند و در موبایل
   متن جدول را مات می‌کنند. */
/* ⚠ سرستون حالا یک کلید توپرِ مسی است، نه یک ته‌رنگ. برجستگی از چهار لایهٔ کوتاه
   می‌آید و هیچ‌کدام پخش نمی‌شوند: تابش لبهٔ بالا، تیرگی لبهٔ پایین، یک لبِ تیرهٔ سه
   پیکسلی که ضخامت کارت را می‌سازد، و یک سایهٔ کوتاه زیر آن که کارت را از زمینه بلند
   می‌کند. سایهٔ پخش روی کارتی به این پهنا لکه می‌سازد، نه عمق.
   ⚠ نه پرسپکتیو و نه فیلتر: هر دو خانه را به لایهٔ گرافیکی جدا می‌برند و متن جدول را
   در موبایل مات می‌کنند. */
.dmt .tablepress thead th {
    position: relative;
    z-index: 2;
    padding-block: 18px;
    border: 0;
    border-radius: 15px;
    /* ⚠ براقیِ شیشه‌ای با «رنگ» ساخته می‌شود نه با فیلتر: یک لایهٔ نورِ بالا که درست
       نزدیک میانهٔ کارت قطع می‌شود، همان چیزی که بازتاب روی سطح صیقلی را می‌سازد.
       backdrop-filter و filter عمداً به‌کار نرفته‌اند — هر دو خانه را روی لایهٔ گرافیکی
       جدا می‌برند و در موبایل متن را مات می‌کنند، و خواستهٔ صریح این بود که تار نشود. */
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .34) 0%,
                      rgba(255, 255, 255, .11) 47%,
                      rgba(255, 255, 255, 0) 48%,
                      rgba(255, 255, 255, .07) 100%),
                      linear-gradient(170deg, #c98a4d 0%, #b87333 52%, #9c5c25 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
                inset 1px 0 0 rgba(255, 255, 255, .22),
                inset -1px 0 0 rgba(255, 255, 255, .22),
                inset 0 -1px 0 rgba(60, 32, 8, .40),
                inset 0 -4px 0 -1px rgba(96, 54, 18, .32),
                0 5px 10px -7px rgba(90, 52, 18, .85),
                0 12px 22px -18px rgba(40, 22, 6, .90);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(60, 32, 8, .45);
    text-align: center;
}

/* ⚠ سرستون اول عمداً توپر نیست: در جدول‌های این صفحه، خانهٔ اول «نام ویژگی» است نه یک
   گزینه؛ اگر آن هم مسیِ توپر شود، چشم سه کارتِ هم‌وزن می‌بیند و دیگر معلوم نیست کدام
   ستون‌ها با هم مقایسه می‌شوند. اینجا یک کارتِ خالی با قاب مسی می‌نشیند. */
.dmt .tablepress thead th.column-1 {
    background-color: var(--bg-primary);
    background-color: color-mix(in srgb, var(--bg-primary) 74%, transparent);
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .55) 0%,
                      rgba(255, 255, 255, .16) 47%,
                      rgba(255, 255, 255, 0) 48%,
                      rgba(255, 255, 255, .10) 100%);
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .38),
                inset 0 1px 0 rgba(255, 255, 255, .85),
                0 4px 9px -8px rgba(60, 40, 15, .70);
    color: var(--accent-primary);
    text-shadow: none;
    text-align: start;
}

/* ستون اولِ هر ردیف عنوان است، نه مقدار؛ پس همان زبان برجستگیِ سرستون را می‌گیرد،
   فقط ملایم‌تر تا با آن رقابت نکند: تابش لبهٔ بالا، تیرگی لبهٔ پایین، و یک سایهٔ کوتاه
   روی لبه‌ای که به ستون‌های مقدار می‌رسد — همان چیزی که ستون را «بالاتر» نشان می‌دهد. */
/* ⚠ خانهٔ عنوان برعکسِ خانه‌های مقدار «فرورفته» است، نه برجسته. دو سطح در یک جدول
   بهتر از سه سطحِ هم‌جنس کار می‌کند: چشم بلافاصله می‌فهمد کدام ستون سؤال است و کدام
   ستون‌ها جواب. سایه از بالا به داخل می‌افتد، یعنی نور همچنان از بالاست و با سرستون
   جور درمی‌آید. */
.dmt .tablepress tbody td.column-1 {
    position: relative;
    background-color: rgba(184, 115, 51, .10);
    /* براقیِ این یکی ضعیف‌تر است: سطح فرورفته نور کمتری برمی‌گرداند و اگر هم‌اندازهٔ
       خانه‌های مقدار براق شود، تفاوت فرورفته و برجسته از بین می‌رود. */
    background-image: linear-gradient(180deg,
                      rgba(255, 255, 255, .30) 0%,
                      rgba(255, 255, 255, .08) 47%,
                      rgba(255, 255, 255, 0) 48%,
                      rgba(255, 255, 255, .06) 100%);
    box-shadow: inset 0 0 0 1px var(--border-color),
                inset 0 3px 5px -3px rgba(10, 25, 47, .35),
                inset 0 -1px 0 rgba(255, 255, 255, .55),
                inset 3px 0 0 0 rgba(184, 115, 51, .45);
    font-weight: 800;
}

/* ⚠ ته‌رنگ یک‌درمیان عمداً نیست: وقتی هر خانه کارت جداست، ته‌رنگِ ردیف روی کارت‌ها
   می‌نشیند و کارت‌بودنشان را از بین می‌برد. تأکید فقط با نشانگر می‌آید.
   ⚠ هیچ transform ای هم در کار نیست: خانهٔ جدول به transform پاسخ قابل اتکایی نمی‌دهد
   و پرسپکتیو در موبایل متن را مات می‌کند؛ حس بلندشدن فقط از سایه ساخته می‌شود. */
.dmt .tablepress tbody tr:hover td:not(.column-1) {
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .42),
                inset 0 1px 0 rgba(255, 255, 255, .85),
                0 10px 20px -12px rgba(10, 25, 47, .60);
    color: var(--text-primary);
}

/* خانهٔ عنوانِ ردیفِ زیر نشانگر: همان کارتِ فرورفته، فقط ریلش زنده می‌شود.
   ⚠ هر چهار لایه دوباره نوشته می‌شوند؛ box-shadow جایگزین می‌شود نه افزوده، و نوشتن
   تنهای ریل، فرورفتگی خانه را صاف می‌کرد. */
.dmt .tablepress tbody tr:hover td.column-1 {
    box-shadow: inset 0 0 0 1px rgba(184, 115, 51, .38),
                inset 0 3px 5px -3px rgba(10, 25, 47, .35),
                inset 0 -1px 0 rgba(255, 255, 255, .55),
                inset 4px 0 0 0 var(--accent-primary);
    color: var(--accent-primary);
}

/* ⚠ «دارد / ندارد» با شکل و رنگ هر دو نشان داده می‌شود، نه فقط رنگ؛ متن معادلش هم برای
   صفحه‌خوان در نشانه‌گذاری می‌ماند. تکیه بر رنگِ تنها برای کاربر نابینای رنگ بی‌معناست و
   اینجا تفاوت «دارد» و «ندارد» تفاوت قیمت است.
   کلاس‌ها را اسکریپت از روی متن خانه می‌گذارد؛ بدون آن، همان نویسهٔ اصلی دیده می‌شود. */
.dmt .tablepress td.dmt-yes,
.dmt .tablepress td.dmt-no {
    font-size: 0;
}

/* ⚠ نشان روی ::after می‌آید نه ::before: در حالت کارتیِ موبایل، ::before نام ستون را
   می‌نویسد و اگر نشان هم همان‌جا بود، یکی دیگری را پاک می‌کرد. */
.dmt .tablepress td.dmt-yes::after,
.dmt .tablepress td.dmt-no::after {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.dmt .tablepress td.dmt-yes::after {
    content: "✓";
    background-color: rgba(47, 158, 106, .16);
    color: #2f9e6a;
}

.dmt .tablepress td.dmt-no::after {
    /* ⚠ همان نویسه‌ای که در داده هست، نه یک نشانهٔ دیگر: خانه در جدول ضربدر دارد و
       جایگزین‌کردنش با خط تیره معنای «ندارد» را به «نامشخص» تغییر می‌داد.
       جایگزینی خودِ نویسه سر جایش می‌ماند، چون منبع سه شکل مختلف ضربدر می‌نویسد و
       این‌جا همه به یک شکل واحد و قابل استایل‌دهی می‌رسند. */
    content: "✕";
    background-color: rgba(210, 74, 99, .14);
    color: #c2415a;
}

/* ⚠ پیوند «ویرایش» که افزونه فقط برای مدیر زیر جدول می‌گذارد. افزونه روی خودِ عنصر
   سبک درون‌خطی می‌نویسد (تراز به چپ، بدون فاصله)، و سبک درون‌خطی را هیچ ویژگی
   سلکتوری نمی‌برد؛ پس تراز و فاصله اینجا با important بازنویسی می‌شوند. بازدیدکنندهٔ
   عادی این را اصلاً نمی‌بیند، ولی برای مدیر هم نباید بی‌ریخت باشد. */
.dmt .tablepress caption {
    padding: 10px 18px !important;
    text-align: start !important;
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.dmt .tablepress caption a,
.dmt .tablepress caption a:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--pill-radius, 50px);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary) !important;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.dmt .tablepress caption a::before {
    content: "✎";
    font-size: 11px;
}

.dmt .tablepress caption a:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary) !important;
}


/* ── کوتاه‌سازی ── */

/* ⚠ این عدد با آستانهٔ داخل اسکریپت یکی است؛ اگر یکی عوض شد، آن یکی هم باید. هدف این

/* ⚠ زیر ۷۶۸ پیکسل جدول چهارستونی خوانا نیست. هر ردیف به یک کارت تبدیل می‌شود و نام
   ستون از data-label روی خودِ خانه می‌آید، پس نشانه‌گذاری یکی می‌ماند و جدول واقعی
   برای صفحه‌خوان و موتور جستجو دست‌نخورده باقی است. */
@media (max-width: 768px) {
    .dmt__scroll {
        border: 0;
        border-radius: 0;
        overflow-x: visible;
    }

    /* ⚠ فاصلهٔ میان‌خانه‌ای در حالت کارت باید صفر شود: آنجا هر ردیف خودش یک کارت است و
       خانه‌ها نوارهای پشت سر هم داخل آن؛ فاصلهٔ ارثی، درزهای خالی داخل کارت می‌ساخت.
       شعاع گوشهٔ خانه‌ها هم برداشته می‌شود چون شعاعِ کارت مالِ خودِ ردیف است. */
    .dmt .tablepress,
    .dmt .tablepress tbody,
    .dmt .tablepress tr,
    .dmt .tablepress th,
    .dmt .tablepress td {
        display: block;
        width: auto;
        min-width: 0;
        border-spacing: 0;
        border-radius: 0;
    }

    /* ⚠ در حالت کارت، براقی و شیشه‌ای‌بودن مالِ خودِ ردیف است نه تک‌تک خانه‌ها؛ اگر
       نوارهای درون یک کارت هرکدام بازتاب خودشان را داشته باشند، کارت تکه‌تکه دیده
       می‌شود. background-image هم صریح خاموش می‌شود، وگرنه فقط رنگ پاک می‌شد و
       لایهٔ نور سر جایش می‌ماند. */
    .dmt .tablepress tbody td:not(.column-1) {
        background-color: transparent;
        background-image: none;
        box-shadow: none;
    }

    .dmt .tablepress thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .dmt .tablepress tbody tr {
        margin-block-end: 12px;
        border: 1px solid var(--border-color);
        border-radius: 16px;
        overflow: hidden;
        background-color: var(--bg-primary);
        background-color: color-mix(in srgb, var(--bg-primary) 72%, transparent);
        background-image: linear-gradient(180deg,
                          rgba(255, 255, 255, .50) 0%,
                          rgba(255, 255, 255, .14) 22%,
                          rgba(255, 255, 255, 0) 23%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85),
                    0 6px 14px -12px rgba(10, 25, 47, .65);
    }

    /* ⚠ ویژگی این سلکتورها عمداً با نسخهٔ دسکتاپ برابر شده (td در سلکتور هست). پیش از
       این «tbody .column-1» نوشته شده بود که یک درجه پایین‌تر است و قاعدهٔ دسکتاپ در
       موبایل هم برنده می‌شد — رسانه‌ای‌بودن قاعده هیچ امتیازی اضافه نمی‌کند. */
    .dmt .tablepress tbody tr:hover td,
    .dmt .tablepress tbody tr:hover th {
        background-color: transparent;
    }

    .dmt .tablepress tbody tr:hover td:not(.column-1) {
        box-shadow: none;
    }

    .dmt .tablepress tbody tr:hover td.column-1 {
        box-shadow: inset 0 -1px 0 rgba(120, 72, 30, .12);
        color: var(--text-primary);
    }

    /* ⚠ در حالت کارت، خانهٔ عنوان یک نوار تمام‌عرض بالای کارت است، نه یک ستون؛ پس نه
       فرورفتگی می‌گیرد و نه ریل کناری، فقط یک ته‌رنگ و یک خط جداکننده. */
    .dmt .tablepress tbody td.column-1 {
        padding: 13px 16px;
        border-block-end: 1px solid var(--border-color);
        background-color: rgba(184, 115, 51, .07);
        background-image: none;
        box-shadow: inset 0 -1px 0 rgba(120, 72, 30, .12);
        font-size: 14px;
        text-align: start;
    }

    /* ⚠ نام ستون از صفت data-label می‌آید و آن را اسکریپت از روی سرستون‌های خودِ جدول
       می‌نویسد؛ نشانه‌گذاری افزونه چنین صفتی ندارد و بدون آن، خانه‌ها در موبایل
       بی‌عنوان می‌شدند. اگر اسکریپت اجرا نشود، صفت خالی است و فقط عنوان دیده نمی‌شود. */
    .dmt .tablepress tbody td:not(.column-1) {
        display: grid;
        grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
        gap: 10px;
        padding: 11px 16px;
        border-block-end: 1px solid var(--border-color);
        text-align: start;
    }

    .dmt .tablepress tbody tr td:last-child {
        border-block-end: 0;
    }

    .dmt .tablepress tbody td:not(.column-1)::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        color: var(--text-primary);
    }

    /* در حالت کارتی، نشانِ «دارد/ندارد» ستون دوم کارت است و به لبهٔ آغازین می‌چسبد. */
    .dmt .tablepress td.dmt-yes::after,
    .dmt .tablepress td.dmt-no::after {
        justify-self: start;
    }
}
/* ═══════════ کوتاه‌سازی جدول‌های بلند ═══════════ */

/* ⚠ سقف ارتفاع و دکمه را جاوااسکریپت مسلح می‌کند (کلاس is-clamped روی همین جعبه)، نه
   شیوه‌نامه. اگر پیش‌فرضِ شیوه‌نامه بود، بدون جاوااسکریپت نیمی از جدول برای همیشه
   پنهان می‌ماند و راهی برای بازکردنش نبود.
   ⚠ همان سقفی که اینجا بسته می‌شود در اسکریپت هم حساب می‌شود؛ اگر یکی عوض شد، آن
   یکی هم باید. */
.dmt.is-clamped .dmt__scroll {
    max-height: clamp(280px, 40vh, 420px);
    overflow-y: hidden;
}

.dmt__fade {
    display: none;
}

/* ⚠ محوشدگی با گرادیان است نه ماسک: ماسک، جدول را روی لایهٔ گرافیکی جدا می‌برد و در
   موبایل متنش را مات می‌کند. رنگ پایانش از پس‌زمینهٔ سکشن خوانده می‌شود چون ظرف جدول
   خودش پس‌زمینه ندارد. */
.dmt.is-clamped .dmt__fade {
    display: block;
    position: absolute;
    inset-inline: 1px;
    inset-block-end: 58px;
    height: 120px;
    background-image: linear-gradient(to bottom, rgba(10, 25, 47, 0), var(--bg-primary));
    pointer-events: none;
}

.dmt__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-block-start: 14px;
    padding: 11px 22px;
    border: 1px solid rgba(245, 214, 143, .4);
    border-radius: var(--pill-radius, 50px);
    background-color: rgba(245, 214, 143, .08);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dmt__more:hover {
    background-color: rgba(245, 214, 143, .16);
}

.dmt__more-icon {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2.5px) rotate(45deg);
    transition: transform .3s ease;
}

.dmt.is-open .dmt__more-icon {
    transform: translateY(2.5px) rotate(225deg);
}

/* ⚠ ویژگی hidden امتیاز ۰-۱-۰ دارد و هر کلاسی که display بدهد آن را می‌بازد؛ بدون این
   قاعده، دکمه‌ای که اسکریپت پنهانش کرده کاملاً دیده می‌شود و خطایی هم نمی‌دهد. */
[hidden] {
    display: none !important;
}