/*
 * مرجع هوش مصنوعی. فقط روی روتهای /ai/ بارگذاری میشود.
 *
 * قواعد طراحی سایت اینجا هم اجرا میشوند: هیچ نوار رنگی و هیچ ریلی روی کارت
 * و سرفصل نیست، مرزها یک خط مویی var(--border) اند، و تاکید از وزن قلم و
 * تهرنگ سطح میآید نه از خط تزیینی. جایی که رنگ آمده، حالت را از هم جدا
 * میکند (باز، مسدود، تایید نشده) و تزیین نیست.
 *
 * چیپ بالای عنوان فقط در hero هست، چون کل سایت hero را همینطور دارد. بالای
 * هیچ H2 بخشی چیپ برچسبی گذاشته نشده.
 */

/* ───────────────────────────── پوسته ───────────────────────────── */

.rgba-alt { background: var(--bg-2); }

.rgba-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 21px;
	margin-top: 21px;
	color: var(--text-3);
	font-size: 0.887rem;
}
.rgba-hero-meta a { color: var(--blue); }

.rgba-verified-wrap { padding-top: 8px; }
.rgba-verified {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 13px;
	margin: 0;
	padding: 13px 21px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-2);
	font-size: 0.887rem;
}
.rgba-verified-label { color: var(--text-3); }
.rgba-verified time { color: var(--text); font-weight: 700; }
.rgba-verified-note { color: var(--text-3); flex: 1 1 240px; }

/* ───────────────────────────── جدول رتبه ───────────────────────────── */

.rgba-rank-wrap { margin-top: 8px; }

/* ۷۶۰ و نه ۹۴۰.
   عدد قبلی ۹۴۰ بود چون دو ستون این جدول یادداشت چند خطی داشتند و در عرض کمتر
   له می شدند. آن یادداشت ها از ۲۸ اوت ۲۰۲۶ زیر جدول رفته اند و هر سلول حالا
   یک عدد است، پس جدول همان قدر عرض می خواهد که نه ستون عدد لازم دارند. */
.rgba-rank-table { min-inline-size: 610px; }
.rgba-rank-table th[scope="col"] { vertical-align: bottom; }

/* چینش بالا می ماند، چون سلول ابزار دو خطی می شود (نام به اضافه قرص «انتخاب
   فعلی») و بقیه سلول ها یک خطی اند. پدینگ از ۱۶ به ۱۲ آمد: با نبودن پاراگراف
   داخل سلول، ۱۶ فقط فاصله خالی بود. */
.rgba-rank-table tbody td,
.rgba-rank-table tbody th[scope="row"] { vertical-align: top; padding-block: 13px; }
.rgba-th-weight {
	display: block;
	margin-top: 5px;
	color: var(--text-3);
	font-size: 0.697rem;
	font-weight: 600;
}
.rgba-rank-table .rgba-score {
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	color: var(--text);
}
.rgba-winner-row { background: var(--surface-2); }
.rgba-pick { margin-inline-start: 8px; font-size: 0.697rem; }

.rgba-cell-value {
	display: block;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}

/* خود عدد لینک منبع است.
 *
 * تا امروز زیر هر عدد کلمه «منبع» به رنگ آبی می نشست. در جدول کدنویسی این
 * یعنی سی و دو لینک آبی دور هشت ردیف عدد، و چشم اول آبی ها را می دید و بعد
 * عددها را. حالا لینک خود عدد است، به رنگ متن، و تنها نشانه اش یک زیرخط
 * نقطه چین کمرنگ است که در هاور پررنگ می شود. نام دامنه منبع برای صفحهخوان
 * داخل لینک هست و برای ماوس در title. */
.rgba-cell-cite {
	color: inherit;
	text-decoration: underline dotted;
	text-decoration-color: var(--text-3);
	text-underline-offset: 4px;
}
.rgba-cell-cite:hover { text-decoration-color: var(--text); }
.rgba-cell-cite:hover .rgba-cell-value { color: var(--text); }
.rgba-missing {
	color: var(--text-3);
	font-size: 0.786rem;
	font-style: normal;
}

.rgba-note {
	margin-top: 13px;
	color: var(--text-3);
	font-size: 0.887rem;
}

.rgba-unranked {
	margin-top: 21px;
	padding: clamp(21px, 2.5vw, 21px);
}
.rgba-unranked h3 { font-size: 1rem; margin-bottom: 8px; }
.rgba-unranked p { color: var(--text-2); font-size: 0.887rem; margin-bottom: 13px; }

/* ───────────────────────────── rubric ───────────────────────────── */

.rgba-crit-note {
	display: block;
	margin-top: 5px;
	color: var(--text-3);
	font-size: 0.786rem;
}

/* ───────────────────────────── کاشی و کارت ───────────────────────────── */

/* عمدا auto-fit و نه ستون ثابت: تعداد دسته ها با محتوا عوض می شود و شبکه ای
   که روی عدد سه قفل شده باشد، ردیف آخر لنگ می سازد.
   ولی auto-fit تنها هم کافی نبود. ترک ها ۱fr اند، پس دو کارت روی دسکتاپ به دو
   تخته ۵۶۰ پیکسلی کش می آمدند که ارتفاعشان صد پیکسل بود: صفحه سازنده با دو
   خانواده مدل دقیقا همین شکل را داشت. حالا PHP تعداد کارت را در rgba-cols
   می نویسد و همان عدد پهنای کل شبکه را می بندد؛ auto-fit داخل این عرض کار
   خودش را می کند و شکستن روی موبایل هم دست خودش می ماند.
   کف ترک ۳۰۰ است و نه ۲۵۸، چون auto-fit تعداد ستون را از همین کف حساب می کند:
   با ۲۵۸، در عرض ۱۱۵۲ چهار ستون در می آمد و شش دسته خانه بخش، چهار به علاوه
   دو می شد. با ۳۰۰ دقیقا سه ستون می شود و ردیف دوم هم پر است. */
.rgba-tiles,
.rgba-cards {
	--rgba-cols: 3;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	max-inline-size: min(100%, calc(var(--rgba-cols) * 377px));
}

.rgba-tile,
.rgba-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(21px, 2.4vw, 21px);
	color: inherit;

}
.rgba-tile:hover,
.rgba-card:hover {
	border-color: var(--border-2);

}
.rgba-tile-name,
.rgba-card-name {
	font-weight: 800;
	font-size: 1rem;
	color: var(--text);
}
.rgba-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px 8px;
}
.rgba-card-vendor {
	color: var(--text-3);
	font-size: 0.786rem;
}
.rgba-tile-lede,
.rgba-card-lede {
	color: var(--text-2);
	font-size: 0.887rem;
	line-height: 1.85;
}
.rgba-tile-winner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 13px;
	border-top: 1px solid var(--border);
}
.rgba-tile-winner-label {
	color: var(--text-3);
	font-size: 0.786rem;
}
.rgba-card-extra {
	margin-top: auto;
	padding-top: 13px;
	border-top: 1px solid var(--border);
	color: var(--text-3);
	font-size: 0.786rem;
}

/* ───────────────────────────── ستون ایران ───────────────────────────── */

.rgba-iran-card { padding: clamp(21px, 3vw, 34px); }
.rgba-iran-card > h2 { font-size: 1.272rem; margin-bottom: 8px; }
.rgba-iran-card > p { color: var(--text-2); font-size: 0.887rem; }

.rgba-iran-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 13px;
	margin: 21px 0 0;
}
.rgba-iran-grid dt {
	color: var(--text-3);
	font-size: 0.786rem;
	margin-bottom: 5px;
}
.rgba-iran-grid dd {
	margin: 0;
	font-weight: 700;
	color: var(--text);
}
.rgba-access-open { color: var(--green-ink); }
.rgba-access-partial { color: var(--amber); }
.rgba-access-blocked { color: var(--red); }
.rgba-access-unknown { color: var(--text-3); font-weight: 600; }

.rgba-method,
.rgba-alt-line,
.rgba-alt {
	font-size: 0.887rem;
}
.rgba-method,
.rgba-iran-card .rgba-alt {
	margin-top: 13px;
	padding-top: 13px;
	border-top: 1px solid var(--border);
	color: var(--text-2);
}
.rgba-method span:first-child,
.rgba-iran-card .rgba-alt span:first-child { color: var(--text-3); }

/* ───────────────────────────── مزیت و محدودیت ───────────────────────────── */

.rgba-strengths,
.rgba-limits { padding: clamp(21px, 2.6vw, 34px); }
.rgba-strengths h2,
.rgba-limits h2 { font-size: 1.128rem; margin-bottom: 13px; }

.rgba-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}
.rgba-bullets li {
	color: var(--text-2);
	font-size: 0.887rem;
	line-height: 1.9;
	padding-inline-start: 21px;
	position: relative;
}
.rgba-bullets li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .72em;
	inline-size: 5px;
	block-size: 5px;
	border-radius: 50%;
	background: var(--text-3);
}

.rgba-verdict {
	margin-top: 21px;
	padding: clamp(21px, 2.6vw, 34px);
}
.rgba-verdict h2 { font-size: 1.128rem; margin-bottom: 8px; }
.rgba-verdict p { color: var(--text-2); line-height: 1.95; }

.rgba-notfor { padding: clamp(21px, 2.6vw, 34px); }
.rgba-notfor h2 { font-size: 1.128rem; margin-bottom: 13px; }

/* ───────────────────────────── خط زمانی ───────────────────────────── */

/*
 * محور زمان یک خط مویی خنثاست و نه یک ریل رنگی. تفاوتش مهم است: این خط
 * ساختار را نشان میدهد (ترتیب زمانی) و اگر برداشته شود، فهرست معنایش را کم
 * میکند. رنگ هم ندارد.
 */
ol.rgba-timeline {
	list-style: none;
	margin: 0;
	padding: clamp(21px, 2.6vw, 34px);
	display: grid;
	gap: 0;
}

/* ستون وسط نقطه هاست. خانواده ای که هنوز یک نسخه دارد، قبلا یک خط تنها وسط
   یک بخش خالی می شد؛ همان یک خط داخل کارت، کم بودنش عمدی به نظر می رسد. */
.rgba-tl-item {
	display: grid;
	grid-template-columns: minmax(88px, 132px) 9px 1fr;
	gap: 5px 13px;
	padding: 13px 0;
	border-bottom: 1px solid var(--border);
}
.rgba-tl-item::before {
	content: "";
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	justify-self: center;
	inline-size: 8px;
	block-size: 8px;
	margin-block-start: .66em;
	border-radius: 50%;
	background: var(--text-3);
}
.rgba-tl-live::before { background: var(--green); }
.rgba-tl-item:first-child { padding-top: 0; }
.rgba-tl-item:last-child { border-bottom: 0; padding-bottom: 0; }
.rgba-tl-date {
	color: var(--text-3);
	font-size: 0.887rem;
	padding-top: 2px;
	font-variant-numeric: tabular-nums;
}
.rgba-tl-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}
.rgba-tl-changed {
	display: block;
	margin-top: 5px;
	color: var(--text-2);
	font-size: 0.887rem;
	line-height: 1.85;
}
.rgba-tl-retired .rgba-tl-name,
.rgba-tl-legacy .rgba-tl-name { color: var(--text-2); }

/* ───────────────────────────── دفتر تغییرها ───────────────────────────── */

.rgba-log {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 13px;
}
.rgba-log-item { padding: clamp(13px, 2.2vw, 21px); }
.rgba-log-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.rgba-log-head time {
	color: var(--text-3);
	font-size: 0.887rem;
}
.rgba-log-item p {
	color: var(--text-2);
	font-size: 0.887rem;
	line-height: 1.9;
	margin: 0;
}
.rgba-log-src { margin-top: 8px !important; font-size: 0.786rem !important; }

.rgba-update-list {
	list-style: none;
	margin: 0 0 21px;
	padding: 0;
	display: grid;
	gap: 13px;
}
.rgba-update-list li {
	display: grid;
	grid-template-columns: minmax(90px, 140px) 1fr;
	gap: 13px;
	padding-bottom: 13px;
	border-bottom: 1px solid var(--border);
	color: var(--text-2);
	font-size: 0.887rem;
}
.rgba-update-list time { color: var(--text-3); font-size: 0.887rem; }

/* ───────────────────────────── فیلتر ───────────────────────────── */

.rgba-filters { margin: 0 0 21px; }
.rgba-filters fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 13px 21px;
	margin: 0;
	padding: 13px 21px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
}
.rgba-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text-2);
	font-size: 0.887rem;
	cursor: pointer;
}
.rgba-check input { accent-color: var(--blue); inline-size: 13px; block-size: 13px; }
.rgba-count { color: var(--text-3); font-size: 0.887rem; margin-bottom: 13px; }

/* ───────────────────────────── متن و لینک ───────────────────────────── */

.rgba-prose { max-inline-size: 74ch; }
.rgba-prose h2 { margin-top: 1.8em; }
.rgba-prose h3 { margin-top: 1.4em; }

.rgba-cat-links {
	list-style: none;
	margin: 0 0 21px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rgba-cat-links a { color: var(--text-2); }
.rgba-cat-links a:hover { color: var(--text); border-color: var(--border-2); }

/* این فهرست حالا کلاس related-links تم را هم دارد و شکل قرصی همان جا تعریف
   شده. اینجا فقط اندازه اش تنظیم می شود. */
.rgba-related li { font-size: 1rem; }

.rgba-related-card { padding: clamp(21px, 3vw, 34px); }
.rgba-related-group h2 {
	font-size: 1rem;
	margin-bottom: 13px;
}
.rgba-related-group + .rgba-related-group {
	margin-top: clamp(21px, 3vw, 21px);
	padding-top: clamp(21px, 3vw, 21px);
	border-top: 1px solid var(--border);
}
/* دو گروه این کارت باید یک جور دیده شوند. چیپ دسته و قرص صفحه مرتبط دو
   کامپوننت جدا هستند و اندازه پیش فرضشان یکی نبود. */
.rgba-related-group .rgba-cat-links { margin-bottom: 0; gap: 13px; }
.rgba-related-group .rgba-cat-links a.chip { padding: 8px 21px; font-size: 0.887rem; }

.rgba-sources { padding-block: clamp(34px, 4vw, 55px); }
.rgba-sources-card { padding: clamp(21px, 3vw, 34px); }
.rgba-sources-card > h2 { font-size: 1.128rem; margin-bottom: 5px; }

/* شماره از counter می آید و نه از marker پیش فرض مرورگر، چون marker در ستون
   بیرون از کارت می افتاد و با padding کارت هم تراز نمی شد. */
.rgba-source-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rgba-src;
}
.rgba-source {
	display: grid;
	grid-template-columns: 26px 1fr;
	align-items: baseline;
	gap: 5px 13px;
	padding-block: 13px;
	border-bottom: 1px solid var(--border);
	counter-increment: rgba-src;
}
.rgba-source:last-child { border-bottom: 0; padding-bottom: 0; }
.rgba-source::before {
	content: counter(rgba-src);
	grid-row: 1 / span 2;
	color: var(--text-3);
	font-size: 0.786rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
/* شماره فهرست هم باید با بقیه اعداد صفحه یک شکل باشد. بقیه سایت ارقام فارسی
   چاپ می کند و این counter پیش فرض لاتین می داد. عربی عمدا لاتین می ماند،
   چون تاریخ ها و اعدادش هم در همین بخش لاتین اند. */
:root:lang(fa) .rgba-source::before { content: counter(rgba-src, persian); }

/* لینک، آیتم گرید است پس بلوک می شود و آندرلاین گرادیانی تا ته ستون کشیده
   می شد. باید به عرض متن خودش جمع شود. */
.rgba-source-name {
	justify-self: start;
	color: var(--blue);
	font-weight: 600;
	font-size: 1rem;
	background-image: linear-gradient(90deg, rgba(0, 35, 102, .38), rgba(0, 35, 102, .38));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1.5px;
	padding-bottom: 3px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.rgba-source-name:hover { color: #1450c8; background-size: 100% 2px; }
.rgba-source-meta {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 3px 13px;
	color: var(--text-3);
	font-size: 0.786rem;
}
.rgba-tier-primary { color: var(--text-2); font-weight: 600; }
.rgba-source-host { font-variant-numeric: tabular-nums; }

.rgba-tier,
.rgba-read {
	color: var(--text-3);
	font-size: 0.786rem;
}

/* تنها جای این صفحه که چیزی می فروشد. قبلا یک جمله خاکستری داخل قاب نازک بود
   با لینک متنی ته آن، یعنی از شکل، سلب مسئولیت خوانده می شد. */
.rgba-service-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 21px 34px;
	padding: clamp(21px, 3vw, 34px);
}
.rgba-service-line {
	flex: 1 1 360px;
	margin: 0;
	color: var(--text-2);
	font-size: 1rem;
	line-height: 1.95;
}
.rgba-service-btn { flex: none; }

.rgba-why h2 { margin-bottom: 21px; }
.rgba-honest { padding: clamp(21px, 3vw, 34px); }
.rgba-honest h2 { font-size: 1.272rem; margin-bottom: 13px; }
.rgba-honest p {
	color: var(--text-2);
	line-height: 1.95;
}
.rgba-honest p:not(:last-child) { margin-bottom: 13px; }

.rgba-both-links {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin-top: 21px;
}

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

@media (max-width: 620px) {
	.rgba-tl-item,
	.rgba-update-list li {
		grid-template-columns: 1fr;
		gap: 5px;
	}
	.rgba-tl-item::before { display: none; }
	.rgba-verified { font-size: 0.786rem; }
}

/* ───────────────────────────── لایه خرید ───────────────────────────── */

.rgba-buy-official {
	padding: clamp(21px, 2.6vw, 34px);
	margin-bottom: 21px;
}
.rgba-buy-official h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 1rem;
	margin: 0 0 8px;
}
.rgba-buy-official p { color: var(--text-2); font-size: 0.887rem; margin: 0; }
.rgba-buy-src {
	margin-top: 13px !important;
	font-size: 0.786rem;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: baseline;
}
.rgba-buy-read { color: var(--text-3); }

.rgba-buy-table th[scope="row"] { white-space: normal; min-width: 144px; }
.rgba-buy-table td { font-size: 0.887rem; color: var(--text-2); vertical-align: top; }
.rgba-buy-kind {
	display: block;
	margin-top: 5px;
	color: var(--text-3);
	font-size: 0.697rem;
	font-weight: 500;
	letter-spacing: var(--ls-0, normal);
}
.rgba-buy-note {
	display: block;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--border);
	color: var(--text-3);
}
.rgba-buy-table .rgba-buy-risk { color: var(--text); }
.rgba-buy-disclaimer { margin-top: 21px; }

/* ───────────────────── سلول های جدول رتبه ───────────────────── */

/*
 * سه ستون اول جدول تا امروز سه عدد و یک لینک لخت بودند، وسط جدولی که ستون های
 * بعدی اش پاراگراف داشتند. یعنی خود رتبه، کم وزن ترین چیز جدول رتبه بندی بود.
 * نشان شماره و نوار امتیاز هر دو داده اند و نه تزیین: یکی جایگاه را می گوید و
 * دیگری فاصله را، همان فاصله ای که متن زیر جدول درباره اش حرف می زند.
 */
.rgba-rank-cell { inline-size: 1%; white-space: nowrap; }
.rgba-rank-num {
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--text-2);
	font-size: 0.887rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.rgba-tool-cell { min-inline-size: 144px; }
.rgba-tool-name {
	display: inline-block;
	font-weight: 700;
	text-wrap: balance;
}
.rgba-tool-flat { color: var(--text); }
.rgba-pick {
	display: inline-flex;
	margin: 8px 0 0;
	font-size: 0.697rem;
	padding: 5px 13px;
	white-space: nowrap;
}

/* «سازنده جایگزینش کرده با ...» زیر اسم مدل در جدول رتبه بندی.
   عمدا نه چیپ است و نه هشدار: یک واقعیت خنثی است و مدل هم غلط نیست، فقط
   جانشین دارد. رنگ متن سوم، بدون پس زمینه و بدون هیچ نواری. */
.rgba-superseded {
	display: block;
	margin-top: 5px;
	color: var(--text-3);
	font-size: 0.697rem;
	font-weight: 400;
	line-height: 1.5;
}
.rgba-tile-superseded {
	color: var(--text-3);
	font-size: 0.697rem;
	line-height: 1.5;
}

.rgba-rank-table .rgba-score { inline-size: 1%; white-space: nowrap; }
.rgba-score-n {
	display: block;
	font-size: 1rem;
	line-height: 1.4;
}
/* نوار امتیاز از ۴ پیکسل به ۶ رفت و رنگ پرشده اش از text-3 به text-2.
   در ۴ پیکسل و کمرنگ ترین رنگ متن، تنها چیزی که فاصله بین ردیف اول و آخر را
   نشان می داد عملا دیده نمی شد. */
.rgba-score-bar {
	display: block;
	inline-size: 55px;
	block-size: 5px;
	margin-top: 8px;
	border-radius: 5px;
	background: var(--surface-3);
	overflow: hidden;
}
.rgba-score-bar > span {
	display: block;
	block-size: 100%;
	border-radius: 5px;
	background: var(--text-2);
}

/* ردیف برنده باید از هاور و از راه راه زوج جدول قوی تر باشد، وگرنه با ماوس
   روی ردیف دوم، برنده گم می شود. */
.rgba-rank-table tbody tr.rgba-winner-row,
.rgba-rank-table tbody tr.rgba-winner-row:hover { background: var(--surface-2); }
.rgba-winner-row .rgba-rank-num {
	color: var(--text);
	border-color: var(--border-2);
	background: var(--surface-3);
}
.rgba-winner-row .rgba-score-bar > span { background: var(--text-2); }



/* ───────────────────── جدول مشخصات ───────────────────── */

/*
 * قبلا یک جدول دو ستونی تمام عرض بود: برچسب باریک، مقدار حدود نهصد پیکسل، و
 * مقدارها چند کاراکتر بیشتر نبودند. هر ردیف یک نوار خالی به عرض صفحه می ساخت.
 * همین داده در کاشی، هم فشرده تر است و هم روی موبایل اسکرول افقی نمی خواهد.
 */
.rgba-spec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr));
	gap: 13px;
	margin: 0;
}
.rgba-spec {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 13px 21px;
	border-radius: var(--r-sm);
}
.rgba-spec dt {
	color: var(--text-3);
	font-size: 0.786rem;
	line-height: 1.6;
}
.rgba-spec dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 3px 8px;
}
.rgba-spec-value {
	color: var(--text);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
}

/* ───────────────────── ستون ایران، کاشی ها ───────────────────── */

.rgba-iran-grid > div {
	padding: 13px 13px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
}
.rgba-iran-grid dd { font-size: 1rem; line-height: 1.6; }

/* ───────────────────── مزیت و محدودیت، نظر ───────────────────── */

/*
 * موجودیتی که فقط محدودیت دارد و مزیت ننوشته (اعتبارسنجی فقط محدودیت را
 * اجباری کرده) کارتش نصف عرض را می گرفت و نصف دیگر خالی می ماند. یک کارت
 * تنها باید تمام عرض بگیرد.
 */
.rgba-pros-cons .grid-2:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

.rgba-verdict { padding: clamp(21px, 3vw, 34px); }
.rgba-verdict h2 { font-size: 1.128rem; margin-bottom: 13px; }
.rgba-verdict p { color: var(--text-2); font-size: 1rem; line-height: 1.95; }

/* ───────────────────── فهرست تغییرها روی خانه ───────────────────── */

.rgba-update-card { padding: clamp(21px, 2.6vw, 34px); }
.rgba-update-list {
	margin: 0;
	gap: 0;
}
.rgba-update-list li {
	padding-block: 13px;
	padding-bottom: 13px;
	align-items: baseline;
}
.rgba-update-list li:first-child { padding-top: 0; }
.rgba-update-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.rgba-update-list time { font-variant-numeric: tabular-nums; }
.rgba-update-more { margin-top: 21px; }

/* ───────────────────────── فهرست کامل مدل ها ─────────────────────────
 *
 * این جدول از جدول رتبه بندی پهن تر است (نه ستون در برابر پنج) و ردیف هایش
 * بلند نیستند، چون هیچ سلولی پاراگراف ندارد. پس بر خلاف .rgba-rank-table
 * اینجا فشردگی هدف است: ارتفاع ردیف کم، عدد با ارقام هم عرض، و نام مدل
 * چسبیده به لبه تا موقع اسکرول افقی گم نشود.
 */

.rgba-mx-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 13px 21px;
	margin-block-end: 21px;
}
.rgba-mx-search { flex: 1 1 260px; max-inline-size: 377px; }
.rgba-mx-search input {
	inline-size: 100%;
	padding: 8px 13px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 0.887rem;
}
.rgba-mx-search input::placeholder { color: var(--text-3); }

.rgba-mx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1 1 100%;
}
.rgba-mx-chips button {
	cursor: pointer;
	font: inherit;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-2);
}
/* حالت انتخاب شده با وزن قلم و تهرنگ سطح جدا می شود و نه با پر شدن رنگی،
   چون قاعده کنتراست ادمین و سایت هر دو قرص پر رنگی را رد می کنند. */
.rgba-mx-chips button.rgba-mx-on {
	background: var(--surface-2);
	border-color: var(--text-3);
	color: var(--text);
	font-weight: 700;
}
.rgba-mx-count {
	margin: 0;
	color: var(--text-3);
	font-size: 0.887rem;
	font-variant-numeric: tabular-nums;
}

/* نه ستون. زیر این عرض جدول خوانده نمی شود و اسکرول افقی درست ترین کار است. */
.rgba-mx-table { min-inline-size: 987px; }
.rgba-mx-table tbody td,
.rgba-mx-table tbody th[scope="row"] { vertical-align: top; padding-block: 13px; }
.rgba-mx-table thead th { vertical-align: bottom; }

.rgba-mx-name { min-inline-size: 233px; }
.rgba-mx-api {
	display: block;
	margin-block-start: 3px;
	color: var(--text-3);
	font-size: 0.697rem;
	word-break: break-all;
}
.rgba-mx-n {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.rgba-mx-closed { color: var(--text-3); }

/* دکمه مرتب سازی خودش را شبیه سرستون نگه می دارد: نه قاب دارد، نه پس زمینه.
   جهت فعلی با یک مثلث کوچک نشان داده می شود و نه با رنگ. */
.rgba-mx-sortbtn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: start;
}
.rgba-mx-sortbtn:hover { color: var(--text); }
.rgba-mx-arrow {
	inline-size: 0;
	block-size: 0;
	border-inline: 4px solid transparent;
	border-block-start: 5px solid var(--text-3);
	opacity: .45;
}
[data-dir="up"] .rgba-mx-arrow {
	border-block-start: 0;
	border-block-end: 5px solid var(--text);
	opacity: 1;
}
[data-dir="down"] .rgba-mx-arrow {
	border-block-start: 5px solid var(--text);
	opacity: 1;
}

.rgba-mx-src { min-inline-size: 144px; }
/* درون خطی و نه بلوکی: با دو منبع در هر ردیف، حالت بلوکی به تنهایی سی و شش
   پیکسل به ارتفاع هر ردیف اضافه می کرد. */
.rgba-mx-src a {
	display: inline;
	color: var(--text-3);
	font-size: 0.697rem;
	word-break: break-all;
}
.rgba-mx-src a + a::before { content: '\060C\0020'; }
.rgba-mx-src a:hover { color: var(--blue); }

.rgba-mx-empty {
	margin: 21px 0 0;
	padding: 13px 21px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-2);
}

/* فشرده کردن ردیف ها.
 *
 * با هشتاد و نه ردیف، هر پیکسل ارتفاع ردیف نود پیکسل صفحه است. قرص وضعیت در
 * اندازه پیش فرضش دو خطی می شد («نسخه جاری») و به تنهایی ارتفاع ردیف را از
 * پنجاه به نود و چهار می برد، یعنی چهار هزار پیکسل صفحه برای یک کلمه. */
.rgba-mx-table .chip {
	white-space: nowrap;
	padding: 2px 8px;
	font-size: 0.697rem;
}
.rgba-mx-table tbody td,
.rgba-mx-table tbody th[scope="row"] { padding-block: 8px; line-height: 1.45; }
.rgba-mx-table tbody td:nth-child(2) { white-space: nowrap; }

/* یک خط، زیر کارت های دسته. دکمه نشده چون رقیب چهار کارت بالای خودش نیست. */
.rgba-hub-allmodels {
	margin: 21px 0 0;
	color: var(--text-3);
	font-size: 0.887rem;
}


/* ───────────────── پشت هر عدد: یادداشت های زیر جدول ─────────────────
 *
 * همان متنی که تا ۲۸ اوت ۲۰۲۶ داخل سلول های جدول بود. دویست و نود کاراکتر در
 * ستونی به عرض ۱۶۱ پیکسل چهارده خط می شد؛ همان متن در عرض کامل صفحه دو خط است.
 *
 * چیدمان جریانی است و نه دو ستونی. اولین نسخه یک dl دو ستونی بود با برچسب در
 * ستون اول، و همان یک تصمیم بلوک را از هزار و دویست پیکسل به ۲۹۱۳ رساند: ستون
 * توضیح باریک تر می شد، مقدار خط خودش را می گرفت، و هر یادداشت دو ردیف ارتفاع
 * می خواست. حالا برچسب و مقدار سرخط همان پاراگراف اند.
 */
.rgba-ev { margin-top: 34px; }
.rgba-ev-h { font-size: 1rem; margin-bottom: 5px; }
.rgba-ev-intro {
	margin: 0 0 21px;
	color: var(--text-3);
	font-size: 0.887rem;
	max-inline-size: 78ch;
}
.rgba-ev-list { display: grid; gap: 8px; }
.rgba-ev-item {
	padding: 13px 21px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
}
.rgba-ev-model {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-weight: 700;
	color: var(--text);
}
/* همان دایره شماره جدول، کوچکتر، تا ردیف جدول و بلوک زیرش به هم وصل شوند. */
.rgba-ev-n {
	display: grid;
	place-items: center;
	inline-size: 21px;
	block-size: 21px;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: var(--surface-2);
	color: var(--text-2);
	font-size: 0.697rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.rgba-ev-line {
	margin: 0 0 5px;
	color: var(--text-2);
	font-size: 0.887rem;
	line-height: 1.72;
}
.rgba-ev-line:last-child { margin-bottom: 0; }
.rgba-ev-lab {
	color: var(--text-3);
	font-size: 0.786rem;
	font-weight: 700;
}
.rgba-ev-val {
	margin-inline-start: 5px;
	margin-inline-end: 5px;
	color: var(--text);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
}

/* رد اندازه گیری. بسته پیش فرض، چون این همان متنی است که تا دیروز داخل صفت
   title بود و هیچکس نمی دیدش؛ باز بودنش پنج برابر خود جدول ارتفاع می گرفت. */
.rgba-ev-more { margin-top: 8px; }
.rgba-ev-more > summary {
	cursor: pointer;
	color: var(--text-3);
	font-size: 0.786rem;
	font-weight: 700;
	list-style: none;
}
.rgba-ev-more > summary::-webkit-details-marker { display: none; }
/* نشانه باز و بسته با یک مثلث CSS، چون کاراکتر پیکان در این سایت ممنوع است. */
.rgba-ev-more > summary::before {
	content: '';
	display: inline-block;
	inline-size: 0;
	block-size: 0;
	margin-inline-end: 8px;
	vertical-align: middle;
	border-block: 4px solid transparent;
	border-inline-start: 5px solid var(--text-3);
}
.rgba-ev-more[open] > summary::before {
	border-inline: 4px solid transparent;
	border-block-start: 5px solid var(--text-2);
	border-block-end: 0;
}
.rgba-ev-more > summary:hover { color: var(--text-2); }
.rgba-ev-more > .rgba-ev-line { margin-top: 8px; }

/* ─────────── موقت: برای HTMLای که هنوز در کش است ───────────
 *
 * بازطراحی ۲۸ اوت مارکاپ جدول رتبه را عوض کرد، ولی CSS نسخه دار است و فورا
 * می رسد در حالی که HTML کش شده هر صفحه تا چرخش بعدی کش همان مارکاپ قدیم را
 * دارد. یعنی برای مدتی، صفحه ای با مارکاپ قدیم و CSS جدید بالا می آید.
 *
 * بدون این چند خط، آن صفحه ها بدتر از قبل می شدند نه بهتر: .rgba-cell-note
 * بدون قاعده خودش با اندازه متن بدنه داخل یک ستون ۱۶۱ پیکسلی رندر می شد و
 * ردیف را از ۳۳۵ پیکسل هم بلندتر می کرد.
 *
 * وقتی کش کل بخش یک دور چرخید، این بلوک را می شود حذف کرد. تا آن وقت هزینه اش
 * چند خط است و سودش این است که هیچ بازدیدکننده ای صفحه شکسته نمی بیند.
 */
.rgba-cell-src,
.rgba-cell-note {
	display: block;
	margin-top: 3px;
	font-size: 0.697rem;
	color: var(--text-3);
}
.rgba-cell-src { color: var(--blue); inline-size: max-content; }
.rgba-cell-note { max-inline-size: 34ch; line-height: 1.8; }

/* ───────────── جدول پهن مدل ها: ستون نام چسبیده و نوار اسکرول در دید ─────────────
 *
 * ده ستون در عرضی که هیچ نمایشگری ندارد. جدول به طور طبیعی ۱۴۷۸ پیکسل می شود و
 * ستون متن سایت ۱۱۵۲ پیکسل است، پس دو ستون آخر (وزن ها و منبع) بیرون از لبه
 * می مانند. تا امروز هیچ نشانه ای هم نبود که آن بیرون چیزی هست: نوار اسکرول
 * افقی مرورگر ته همان جعبه کشیده می شود و جعبه با ۹۷ ردیف حدود ۵۲۰۰ پیکسل
 * ارتفاع دارد، یعنی نوار پنج هزار پیکسل پایین تر از جایی است که خواننده نگاه
 * می کند. کاربر ماوس عملا به آن دو ستون نمی رسید.
 *
 * سه کار، و هیچکدام بدون جاوااسکریپت صفحه را خراب نمی کند.
 */

/* ۱) روی نمایشگر بزرگ جدول از ستون متن بیرون می زند. همان کاری که main.css با
      پنل ها می کند، و با ۱۷۶۰ پیکسل کل جدول جا می شود و اصلا اسکرولی نمی ماند. */
@media (min-width: 1360px) {
	.rgba-mx {
		inline-size: min(1597px, 95vw);
		margin-inline: calc(50% - min(1597px, 95vw) / 2);
	}
}

/* ۲) ستون نام مدل می چسبد، پس هر عددی که زیر چشم می آید معلوم است مال کدام مدل
      است. جدول باید overflow: clip باشد و نه hidden که تم می دهد: با hidden خود
      جدول یک اسکرول پورت می شود و سلول چسبیده به همان می چسبد، یعنی هیچ وقت
      تکان نمی خورد. clip می برد ولی اسکرول پورت نمی سازد، پس sticky به
      .table-wrap گره می خورد که واقعا اسکرول می شود.

      پس زمینه سلول چسبیده باید مات باشد وگرنه ستون های زیرش دیده می شوند، و
      var(--surface) خودش نیمه شفاف است. برای همین همان رنگ یک بار روی
      var(--bg) به شکل گرادیان تخت لایه شده تا دقیقا رنگ خود جدول در بیاید و
      اگر توکن ها عوض شدند هم دنبالشان بیاید. */
table.rgba-mx-table { overflow: clip; }
table.rgba-mx-table thead th:first-child,
table.rgba-mx-table tbody th[scope="row"] {
	background-color: var(--bg);
	background-image: linear-gradient(var(--surface), var(--surface));
	border-inline-end: 1px solid var(--border);
}
/* زیر ۶۰۰ پیکسل نمی چسبد. ستون نام ۲۱۰ پیکسل است و روی صفحه ۳۹۰ پیکسلی از
   ۳۴۲ پیکسل جای دیده شدن، ۱۳۲ پیکسل برای داده می ماند؛ یعنی کمتر از یک ستون.
   آنجا چسبیدن نام کمکی نیست، هزینه است. */
@media (min-width: 600px) {
	table.rgba-mx-table thead th:first-child,
	table.rgba-mx-table tbody th[scope="row"] {
		position: sticky;
		inset-inline-start: 0;
	}
}
table.rgba-mx-table tbody th[scope="row"] { z-index: 3; }
table.rgba-mx-table thead th:first-child {
	z-index: 4;
	background-image: linear-gradient(180deg, rgba(0, 35, 102, .07), rgba(0, 35, 102, .02)), linear-gradient(var(--surface), var(--surface));
}
table.rgba-mx-table tbody tr:nth-child(even) th[scope="row"] {
	background-image: linear-gradient(rgba(0, 35, 102, .018), rgba(0, 35, 102, .018)), linear-gradient(var(--surface), var(--surface));
}
table.rgba-mx-table tbody tr:hover th[scope="row"] {
	background-image: linear-gradient(var(--surface-2), var(--surface-2)), linear-gradient(var(--surface), var(--surface));
}

/* ۳) نوار اسکرول دومی که به کف پنجره می چسبد و تا وقتی جدول در دید است می ماند.
      تزیینی نیست: خودش یک جعبه اسکرول واقعی است روی یک span یک پیکسلی، پس
      کشیدن و کلیک روی مسیرش همان چیزی است که کاربر از هر نوار اسکرولی انتظار
      دارد و جاوااسکریپت فقط دو تا scrollLeft را به هم گره می زند.

      ارتفاعش همیشه رزرو است و فقط رنگ و نوار وقتی می آید که جدول واقعا پهن تر
      از جایش باشد، تا رسیدن اسکریپت چیزی را جابه جا نکند. */
.rgba-mx-rail {
	position: sticky;
	inset-block-end: 0;
	z-index: 6;
	block-size: 13px;
	overflow: hidden;
	pointer-events: none;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 35, 102, .3) transparent;
}
.rgba-mx-rail > span { display: block; block-size: 1px; inline-size: 0; }
.rgba-mx[data-mx-scroll="yes"] .rgba-mx-rail {
	overflow-x: auto;
	overflow-y: hidden;
	background: var(--bg);
	border-block-start: 1px solid var(--border);
	pointer-events: auto;
}
.rgba-mx-rail::-webkit-scrollbar { height: 13px; }
.rgba-mx-rail::-webkit-scrollbar-track { background: transparent; }
.rgba-mx-rail::-webkit-scrollbar-thumb {
	background: rgba(0, 35, 102, .3);
	border: 3px solid transparent;
	background-clip: padding-box;
	border-radius: 5px;
}
.rgba-mx-rail::-webkit-scrollbar-thumb:hover { background: rgba(0, 35, 102, .45); background-clip: padding-box; }
/* روی صفحه لمسی این نوار کاری نمی کند، چون انگشت خودش جدول را می کشد و
   مرورگرهای لمسی نوار اسکرول دائمی نشان نمی دهند. */
@media (hover: none) and (pointer: coarse) {
	.rgba-mx-rail { display: none; }
}

/* جمله ای که می گوید جدول پهن تر از صفحه است. کنار شمارنده می نشیند، پس خط
   تازه ای به نوار ابزار اضافه نمی کند. پیش فرضش دیده شدن است: اگر اسکریپت
   نیاید، جمله سر جایش می ماند و راست هم هست. */
.rgba-mx-hint { margin: 0; color: var(--text-3); font-size: 0.887rem; }
.rgba-mx[data-mx-scroll="no"] .rgba-mx-hint { visibility: hidden; }