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

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

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

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

.rgba-verified-wrap { padding-top: 8px; }
.rgba-verified {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-2);
	font-size: .86rem;
}
.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: 720px; }
.rgba-rank-table th[scope="col"] { vertical-align: bottom; }
.rgba-th-weight {
	display: block;
	margin-top: 4px;
	color: var(--text-3);
	font-size: .74rem;
	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: .7rem; }

.rgba-cell-value {
	display: block;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}
.rgba-cell-src,
.rgba-cell-note {
	display: block;
	margin-top: 3px;
	font-size: .72rem;
	color: var(--text-3);
}
.rgba-cell-src { color: var(--blue); }
.rgba-missing {
	color: var(--text-3);
	font-size: .8rem;
	font-style: normal;
}

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

.rgba-unranked {
	margin-top: 26px;
	padding: clamp(18px, 2.5vw, 26px);
}
.rgba-unranked h3 { font-size: 1.02rem; margin-bottom: 8px; }
.rgba-unranked p { color: var(--text-2); font-size: .9rem; margin-bottom: 14px; }

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

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

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

/* عمدا auto-fit و نه سه ستون ثابت: تعداد دستهها با محتوا عوض میشود و
   شبکهای که روی عدد سه قفل شده باشد، ردیف آخرِ لنگ میسازد. */
.rgba-tiles,
.rgba-cards {
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}

.rgba-tile,
.rgba-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(18px, 2.4vw, 24px);
	color: inherit;
	transition: border-color .18s ease, transform .18s ease;
}
.rgba-tile:hover,
.rgba-card:hover {
	border-color: var(--border-2);
	transform: translateY(-2px);
}
.rgba-tile-name,
.rgba-card-name {
	font-weight: 800;
	font-size: 1.04rem;
	color: var(--text);
}
.rgba-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.rgba-card-vendor {
	color: var(--text-3);
	font-size: .78rem;
}
.rgba-tile-lede,
.rgba-card-lede {
	color: var(--text-2);
	font-size: .9rem;
	line-height: 1.85;
}
.rgba-tile-winner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.rgba-tile-winner-label {
	color: var(--text-3);
	font-size: .76rem;
}
.rgba-card-extra {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--border);
	color: var(--text-3);
	font-size: .8rem;
}

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

.rgba-iran-card { padding: clamp(20px, 3vw, 30px); }
.rgba-iran-card > h2 { font-size: 1.2rem; margin-bottom: 8px; }
.rgba-iran-card > p { color: var(--text-2); font-size: .92rem; }

.rgba-iran-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 16px;
	margin: 22px 0 0;
}
.rgba-iran-grid dt {
	color: var(--text-3);
	font-size: .8rem;
	margin-bottom: 5px;
}
.rgba-iran-grid dd {
	margin: 0;
	font-weight: 700;
	color: var(--text);
}
.rgba-access-open { color: var(--green); }
.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: .88rem;
}
.rgba-method,
.rgba-iran-card .rgba-alt {
	margin-top: 16px;
	padding-top: 16px;
	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(20px, 2.6vw, 28px); }
.rgba-strengths h2,
.rgba-limits h2 { font-size: 1.1rem; margin-bottom: 14px; }

.rgba-bullets {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.rgba-bullets li {
	color: var(--text-2);
	font-size: .93rem;
	line-height: 1.9;
	padding-inline-start: 18px;
	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: 22px;
	padding: clamp(20px, 2.6vw, 28px);
}
.rgba-verdict h2 { font-size: 1.1rem; margin-bottom: 10px; }
.rgba-verdict p { color: var(--text-2); line-height: 1.95; }

.rgba-notfor { padding: clamp(20px, 2.6vw, 28px); }
.rgba-notfor h2 { font-size: 1.1rem; margin-bottom: 14px; }

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

/*
 * محور زمان یک خط مویی خنثاست و نه یک ریل رنگی. تفاوتش مهم است: این خط
 * ساختار را نشان میدهد (ترتیب زمانی) و اگر برداشته شود، فهرست معنایش را کم
 * میکند. رنگ هم ندارد.
 */
.rgba-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}
.rgba-tl-item {
	display: grid;
	grid-template-columns: minmax(96px, 150px) 1fr;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px solid var(--border);
}
.rgba-tl-item:last-child { border-bottom: 0; }
.rgba-tl-date {
	color: var(--text-3);
	font-size: .84rem;
	padding-top: 2px;
}
.rgba-tl-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}
.rgba-tl-changed {
	display: block;
	margin-top: 6px;
	color: var(--text-2);
	font-size: .9rem;
	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: 14px;
}
.rgba-log-item { padding: clamp(16px, 2.2vw, 22px); }
.rgba-log-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.rgba-log-head time {
	color: var(--text-3);
	font-size: .84rem;
}
.rgba-log-item p {
	color: var(--text-2);
	font-size: .93rem;
	line-height: 1.9;
	margin: 0;
}
.rgba-log-src { margin-top: 10px !important; font-size: .8rem !important; }

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

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

.rgba-filters { margin: 0 0 20px; }
.rgba-filters fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0;
	padding: 16px 18px;
	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: .9rem;
	cursor: pointer;
}
.rgba-check input { accent-color: var(--blue); inline-size: 16px; block-size: 16px; }
.rgba-count { color: var(--text-3); font-size: .86rem; margin-bottom: 16px; }

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

.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 22px;
	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); }

.rgba-related {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.rgba-related li { font-size: .95rem; }

.rgba-sources { padding-block: clamp(28px, 4vw, 44px); }
.rgba-source-list {
	margin: 0;
	padding-inline-start: 20px;
	display: grid;
	gap: 10px;
	color: var(--text-2);
	font-size: .88rem;
}
.rgba-tier,
.rgba-read {
	color: var(--text-3);
	font-size: .78rem;
	margin-inline-start: 6px;
}

.rgba-service-line {
	padding: clamp(16px, 2.2vw, 22px);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--text-2);
	font-size: .95rem;
	line-height: 1.95;
	margin: 0;
}

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

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

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

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

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

.rgba-buy-official {
	padding: clamp(20px, 2.6vw, 28px);
	margin-bottom: 24px;
	border-inline-start: 3px solid var(--border);
}
.rgba-buy-official.rgba-buy-yes { border-inline-start-color: var(--green); }
.rgba-buy-official.rgba-buy-no { border-inline-start-color: var(--red); }
.rgba-buy-official h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 1.05rem;
	margin: 0 0 10px;
}
.rgba-buy-official p { color: var(--text-2); font-size: .92rem; margin: 0; }
.rgba-buy-src {
	margin-top: 14px !important;
	font-size: .82rem;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: baseline;
}
.rgba-buy-read { color: var(--text-3); }

.rgba-buy-table th[scope="row"] { white-space: normal; min-width: 150px; }
.rgba-buy-table td { font-size: .88rem; color: var(--text-2); vertical-align: top; }
.rgba-buy-kind {
	display: block;
	margin-top: 5px;
	color: var(--text-3);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .02em;
}
.rgba-buy-note {
	display: block;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--border);
	color: var(--text-3);
}
.rgba-buy-table .rgba-buy-risk { color: var(--text); }
.rgba-buy-disclaimer { margin-top: 18px; }