/* ══════════════════════════════════════════════════════════════════════
   مؤلفه‌های صنعت منت
   ──────────────────────────────────────────────────────────────────────
   کلاس‌های معنایی و مستقل از سازنده‌ی صفحه. هم تمپلیت PHP چایلد تم
   و هم ویجت Elementor می‌توانند از این‌ها استفاده کنند.

   همه‌ی مقادیر از توکن‌های style.css می‌آیند. هیچ رنگ یا اندازه‌ای
   اینجا مستقیم نوشته نمی‌شود.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── چیدمان عمومی ─────────────────────────────────────────────────── */

.sm-wrap {
	max-width: var(--sm-container);
	margin-inline: auto;
	padding-inline: var(--sm-space-4);
}

/* ══════════════════════════════════════════════════════════════════════
   ۱ · پلاک مشخصات — عنصر امضای پروژه
   ──────────────────────────────────────────────────────────────────────
   هر ماشین‌ابزار یک پلاک فلزی پرچ‌شده دارد با مشخصات حکاکی‌شده.
   سرصفحه‌ی پروفایل عضو، همان پلاک است.

   یک‌بار در هر صفحه. تمام جسارت بصری همین‌جا خرج می‌شود.
   ══════════════════════════════════════════════════════════════════════ */

.sm-plate {
	position: relative;
	background: var(--sm-primary-deep);
	color: var(--sm-on-deep);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-8);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sm-space-6);
	align-items: start;
}

/* لبه‌ی پلاک — خط داخلی با تورفتگی، مثل قاب فلزی */
.sm-plate::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--sm-radius);
	pointer-events: none;
}

.sm-plate__kicker {
	margin: 0 0 var(--sm-space-2);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-ui);
	color: var(--sm-on-deep-mut);
	max-width: none;
}

.sm-plate__name {
	margin: 0;
	font-size: var(--sm-text-3xl);
	font-weight: var(--sm-weight-plate);
	color: var(--sm-on-deep);
	line-height: var(--sm-leading-head);
}

.sm-plate__lead {
	margin: var(--sm-space-3) 0 0;
	color: var(--sm-on-deep-mut);
	font-size: var(--sm-text-base);
	max-width: 52ch;
}

/* شبکه‌ی مشخصات حکاکی‌شده داخل پلاک */
.sm-plate__specs {
	margin: var(--sm-space-6) 0 0;
	display: grid;
	/* min() جلوی سرریز در عرض‌های خیلی کم را می‌گیرد —
	   بدون آن، minmax با کف ثابت روی صفحه‌ی ۳۲۰px اسکرول افقی می‌سازد. */
	grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
}

.sm-plate__specs > div {
	min-width: 0;
	padding: var(--sm-space-3) var(--sm-space-4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	border-inline-end: 1px solid rgba(255, 255, 255, 0.16);
}

.sm-plate__specs dt {
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-ui);
	color: var(--sm-on-deep-mut);
	margin-bottom: var(--sm-space-1);
}

.sm-plate__specs dd {
	margin: 0;
	font-size: var(--sm-text-lg);
	color: var(--sm-on-deep);
}

/* مهر تأیید در گوشه‌ی پلاک */
.sm-plate__stamp {
	justify-self: end;
	text-align: center;
	padding: var(--sm-space-3) var(--sm-space-4);
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--sm-radius);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-ui);
	color: var(--sm-on-deep);
	line-height: 1.5;
}

.sm-plate__stamp span {
	display: block;
	font-size: var(--sm-text-xs);
	color: var(--sm-on-deep-mut);
}

@media (max-width: 640px) {
	.sm-plate {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--sm-space-6) var(--sm-space-4);
	}
	.sm-plate__name { font-size: var(--sm-text-2xl); }
	.sm-plate__stamp { justify-self: start; }
}

/* ══════════════════════════════════════════════════════════════════════
   ۲ · قاب تصویر — مهارشده برای مقیاس ۲۰۰۰ عضو
   ──────────────────────────────────────────────────────────────────────
   نسبت قفل‌شده · خط داخلی برای مهار لوگوی زمینه‌سفید ·
   جایگزین تولیدشده وقتی تصویری نیست.
   ══════════════════════════════════════════════════════════════════════ */

.sm-figure {
	position: relative;
	overflow: hidden;
	background: var(--sm-paper);
	border-radius: var(--sm-radius);
	/* خط داخلی: نمی‌گذارد تصویر زمینه‌سفید در کارت سفید حل شود */
	box-shadow: inset 0 0 0 1px var(--sm-line);
}

/* داخل کارت، قاب به لبه می‌چسبد و فقط بالا گرد می‌ماند */
.sm-card > .sm-figure {
	border-radius: 2px 2px 0 0;
}

.sm-figure--4x3  { aspect-ratio: 4 / 3; }
.sm-figure--16x9 { aspect-ratio: 16 / 9; }
.sm-figure--1x1  { aspect-ratio: 1 / 1; }

.sm-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* جایگزین وقتی عضو تصویری ندارد — باید عمدی به‌نظر برسد، نه ناقص */
.sm-figure--empty {
	display: grid;
	place-items: center;
	background: var(--sm-primary-soft);
}

/* دو حرف اول نام، نه یکی.
   حروف فارسی به هم می‌چسبند و دو حرف یک شکل کامل می‌سازند؛
   یک حرف تنها — به‌ویژه «ا» و «آ» و «ل» — فقط یک خط عمودی نازک است
   و در قاب بزرگ ناقص به‌نظر می‌رسد. */
.sm-figure__initial {
	font-size: var(--sm-text-3xl);
	font-weight: var(--sm-weight-plate);
	color: var(--sm-cat, var(--sm-primary));
	opacity: 0.5;
	line-height: 1;
	padding: var(--sm-space-4);
}

/* ══════════════════════════════════════════════════════════════════════
   ۳ · کارت عضو — اتم طراحی
   ══════════════════════════════════════════════════════════════════════ */

.sm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
	gap: var(--sm-space-4);
}

.sm-card {
	--sm-cat: var(--sm-primary);
	position: relative; /* پایه‌ی پوشش کلیک روی کل کارت */
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-top: 3px solid var(--sm-cat); /* نشانگر دسته — تنها جای رنگ دسته */
	border-radius: var(--sm-radius-lg);
	display: flex;
	flex-direction: column;
	transition: border-color 120ms ease;
}

.sm-card--makers    { --sm-cat: var(--sm-cat-makers); }
.sm-card--engineers { --sm-cat: var(--sm-cat-engineers); }
.sm-card--surplus   { --sm-cat: var(--sm-cat-surplus); }
.sm-card--knowhow   { --sm-cat: var(--sm-cat-knowhow); }

.sm-card:hover,
.sm-card:focus-within {
	border-color: var(--sm-cat);
}

.sm-card__body {
	padding: var(--sm-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2);
	flex: 1;
	min-width: 0; /* پیش‌فرض آیتم فلکس min-width:auto است و کوچک نمی‌شود */
}

.sm-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sm-space-2);
}

.sm-card__name {
	margin: 0;
	font-size: var(--sm-text-lg);
	line-height: 1.4;
	/* نام بلند نباید چیدمان را بشکند */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sm-card__name a {
	color: inherit;
	text-decoration: none;
}

/* کل کارت قابل کلیک، ولی فقط نام در ترتیب فوکوس صفحه‌کلید —
   کاربر صفحه‌کلید یک بار Tab می‌زند، نه چهار بار برای یک مقصد. */
.sm-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sm-card__meta {
	margin: 0;
	max-width: none;
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
}

/* ══════════════════════════════════════════════════════════════════════
   ۴ · مشخصات — برچسب فارسی، مقدار مونو
   ══════════════════════════════════════════════════════════════════════ */

/* نوار سه‌ستونه‌ی داخل کارت */
.sm-spec-strip {
	margin: var(--sm-space-2) 0 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--sm-line-soft);
}

.sm-spec-strip > div {
	min-width: 0;
	padding: var(--sm-space-2) var(--sm-space-2) 0;
	border-inline-start: 1px solid var(--sm-line-soft);
}

.sm-spec-strip > div:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.sm-spec-strip dt {
	font-size: var(--sm-text-xs);
	color: var(--sm-ink-mut);
}

/* نوار سه‌ستونه‌ی کارت باریک است. مقدار بلند مثل SolidWorks یا
   یک کد مدل نباید به دو خط بشکند و ارتفاع کارت‌ها را نامساوی کند —
   با سه‌نقطه بریده می‌شود و مقدار کامل در صفحه‌ی پروفایل می‌ماند. */
.sm-spec-strip dd {
	margin: 0;
	font-size: var(--sm-text-base);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* سلول خالی — خط تیره، نه فضای سفید مبهم */
.sm-spec-strip dd:empty::before,
.sm-spec-table dd:empty::before {
	content: "—";
	color: var(--sm-line);
}

/* جدول کامل مشخصات در صفحه‌ی پروفایل */
.sm-spec-table {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 0 var(--sm-space-8);
}

/* minmax(0, …) روی هر دو ستون لازم است: بدون آن، کف ستون برابر
   min-content می‌شود و یک کد مدل بلند مثل FANUC 0i-TF کل صفحه را
   پهن می‌کند. این رایج‌ترین علت اسکرول افقی در موبایل است. */
.sm-spec-table > div {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	gap: var(--sm-space-4);
	align-items: baseline;
	padding: var(--sm-space-3) 0;
	border-bottom: 1px solid var(--sm-line-soft);
}

.sm-spec-table dt {
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-ui);
	color: var(--sm-ink-mut);
}

.sm-spec-table dd {
	margin: 0;
	min-width: 0;
	font-size: var(--sm-text-base);
}

/* ══════════════════════════════════════════════════════════════════════
   ۵ · چیپ و نشان — اعتماد از جنس واقعیت، نه آیکون سپر
   ══════════════════════════════════════════════════════════════════════ */

.sm-chips {
	list-style: none;
	margin: var(--sm-space-3) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2);
}

.sm-chip {
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-ui);
	color: var(--sm-ink-mut);
	background: var(--sm-paper);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	padding: var(--sm-space-1) var(--sm-space-2);
	white-space: nowrap;
}

.sm-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-1);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-ui);
	border-radius: var(--sm-radius);
	padding: var(--sm-space-1) var(--sm-space-2);
	white-space: nowrap;
}

.sm-badge--verified {
	color: var(--sm-verified);
	background: var(--sm-primary-soft);
}

.sm-badge--pending {
	color: var(--sm-signal);
	background: var(--sm-signal-soft);
}

/* پروفایلی که ۶ ماه بازتأیید نشده — حذف نمی‌شود، برچسب می‌گیرد.
   چون تاریخ دارد و بلند است، جایش ردیف چیپ‌هاست نه کنار نام:
   نشان بلند در سرِ کارت، نام را به دو خط می‌شکند. */
.sm-chip--stale {
	color: var(--sm-signal);
	background: var(--sm-signal-soft);
	border-color: var(--sm-signal-soft);
}

.sm-badge__mark {
	font-family: var(--sm-font-num);
	font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   ۶ · دکمه
   ══════════════════════════════════════════════════════════════════════ */

.sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sm-space-2);
	font-family: inherit;
	font-size: var(--sm-text-base);
	font-weight: var(--sm-weight-ui);
	line-height: 1.5;
	padding: var(--sm-space-3) var(--sm-space-6);
	border-radius: var(--sm-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.sm-btn--solid {
	background: var(--sm-primary);
	color: #FFFFFF;
}

.sm-btn--solid:hover { background: var(--sm-primary-deep); }

.sm-btn--line {
	background: transparent;
	color: var(--sm-primary);
	border-color: var(--sm-line);
}

.sm-btn--line:hover { border-color: var(--sm-primary); }

/* ══════════════════════════════════════════════════════════════════════
   ۷ · نوار فیلتر آرشیو
   ══════════════════════════════════════════════════════════════════════ */

.sm-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sm-space-2);
	padding: var(--sm-space-3) var(--sm-space-4);
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-lg);
}

.sm-filterbar__label {
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-ui);
	color: var(--sm-ink-mut);
	margin-inline-end: var(--sm-space-2);
}

.sm-filterbar select {
	font-size: var(--sm-text-sm);
	border-color: var(--sm-line-strong);
}

.sm-filterbar__count {
	margin-inline-start: auto;
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
}

/* ══════════════════════════════════════════════════════════════════════
   ۸ · جای خالی — «این جایگاه شماست»
   ──────────────────────────────────────────────────────────────────────
   داخل خود شبکه‌ی نتایج می‌نشیند، نه بالای صفحه.
   بالای صفحه‌ی دسته باید H1 و متن معرفی باشد — همان چیزی که
   صفحه را رتبه‌آور می‌کند و مسیر خریدار را قطع نمی‌کند.
   ══════════════════════════════════════════════════════════════════════ */

.sm-slot {
	border: 1px dashed var(--sm-line);
	border-radius: var(--sm-radius-lg);
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--sm-space-3);
	padding: var(--sm-space-6);
	min-height: 220px;
}

.sm-slot__title {
	margin: 0;
	font-size: var(--sm-text-lg);
	color: var(--sm-ink);
}

.sm-slot__text {
	margin: 0;
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
	max-width: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ۹ · مسیر راهنما — شِورون در RTL باید برعکس شود
   ══════════════════════════════════════════════════════════════════════ */

.sm-crumb {
	list-style: none;
	margin: 0 0 var(--sm-space-4);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sm-space-2);
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
}

.sm-crumb li + li::before {
	content: "‹"; /* در RTL شِورون به چپ اشاره می‌کند */
	margin-inline-end: var(--sm-space-2);
	color: var(--sm-line);
}

[dir="ltr"] .sm-crumb li + li::before { content: "›"; }

.sm-crumb a { color: var(--sm-ink-mut); }

/* ══════════════════════════════════════════════════════════════════════
   ۱۰ · صفحه‌بندی
   ══════════════════════════════════════════════════════════════════════ */

.sm-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2);
	list-style: none;
	margin: var(--sm-space-8) 0 0;
	padding: 0;
	justify-content: center;
}

.sm-pagination a,
.sm-pagination span {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--sm-space-2);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	background: var(--sm-surface);
	color: var(--sm-ink);
	text-decoration: none;
	font-size: var(--sm-text-sm);
}

.sm-pagination [aria-current="page"] {
	background: var(--sm-primary);
	border-color: var(--sm-primary);
	color: #FFFFFF;
}

/* ══════════════════════════════════════════════════════════════════════
   ۱۱ · ریل هم‌تخصص در همان شهر
   ──────────────────────────────────────────────────────────────────────
   هم برای کاربر مفید است (مقایسه) هم قدرت را در همان خوشه‌ای
   متمرکز می‌کند که صفحه‌ی دسته‌اش قرار است رتبه بگیرد.
   ══════════════════════════════════════════════════════════════════════ */

.sm-rail {
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-4);
}

.sm-rail__title {
	margin: 0 0 var(--sm-space-3);
	font-size: var(--sm-text-base);
	font-weight: var(--sm-weight-head);
}

.sm-rail ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sm-rail li + li {
	border-top: 1px solid var(--sm-line-soft);
}

.sm-rail li a {
	display: flex;
	justify-content: space-between;
	gap: var(--sm-space-3);
	padding: var(--sm-space-3) 0;
	text-decoration: none;
	color: var(--sm-ink);
	font-size: var(--sm-text-sm);
}

.sm-rail li a span {
	color: var(--sm-ink-mut);
	white-space: nowrap;
}

.sm-rail li a:hover { color: var(--sm-primary); }

/* ══════════════════════════════════════════════════════════════════════
   ۱۲ · پنل محتوایی صفحه
   ══════════════════════════════════════════════════════════════════════ */

.sm-panel {
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
}

.sm-panel > :first-child { margin-top: 0; }
.sm-panel > :last-child  { margin-bottom: 0; }

.sm-panel__title {
	margin: 0 0 var(--sm-space-4);
	font-size: var(--sm-text-xl);
	padding-bottom: var(--sm-space-3);
	border-bottom: 1px solid var(--sm-line);
}

/* ══════════════════════════════════════════════════════════════════════
   ۱۳ · سرصفحه و نشان برند
   ──────────────────────────────────────────────────────────────────────
   لوگوی تصویری هنوز وجود ندارد. نشان فعلاً تایپوگرافیک است و وقتی
   لوگو ساخته شد، فقط محتوای .sm-brand عوض می‌شود — نه چیدمان سرصفحه.
   ══════════════════════════════════════════════════════════════════════ */

.sm-header {
	background: var(--sm-surface);
	border-bottom: 1px solid var(--sm-line);
}

.sm-header__inner {
	max-width: var(--sm-container);
	margin-inline: auto;
	padding: var(--sm-space-3) var(--sm-space-4);
	display: flex;
	align-items: center;
	gap: var(--sm-space-6);
}

.sm-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	text-decoration: none;
	color: var(--sm-ink);
	flex: none;
}

/* نشانه‌ی موقت: مربع رنگ برند با خط داخلی — همان زبان لبه‌ی پلاک */
.sm-brand__mark {
	width: 30px;
	height: 30px;
	border-radius: var(--sm-radius);
	background: var(--sm-primary-deep);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	flex: none;
}

.sm-brand__name {
	font-size: var(--sm-text-lg);
	font-weight: var(--sm-weight-plate);
	line-height: 1.2;
}

.sm-nav {
	display: flex;
	align-items: center;
	gap: var(--sm-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.sm-nav a {
	display: block;
	padding: var(--sm-space-2) var(--sm-space-3);
	border-radius: var(--sm-radius);
	color: var(--sm-ink);
	text-decoration: none;
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-ui);
}

.sm-nav a:hover { background: var(--sm-primary-soft); }

.sm-nav [aria-current="page"] {
	color: var(--sm-primary);
	box-shadow: inset 0 -2px 0 var(--sm-primary);
}

.sm-header__end {
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	gap: var(--sm-space-2);
	flex: none;
}

@media (max-width: 860px) {
	.sm-header__inner { flex-wrap: wrap; gap: var(--sm-space-3); }
	.sm-header__end { margin-inline-start: 0; }
	.sm-nav { order: 3; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   ۱۴ · هیرو صفحه‌ی اصلی
   ──────────────────────────────────────────────────────────────────────
   صفحه‌ی اصلی توزیع‌کننده است: کارش این است که بازدیدکننده در چند ثانیه
   بفهمد کدام بخش مال اوست و برود. برای عبارات برند رتبه می‌گیرد،
   نه عبارات تخصصی — آن‌ها کار صفحات دسته است.

   پس بالای صفحه جای شعار و تصویر تزئینی نیست؛ جای جستجوست.
   ══════════════════════════════════════════════════════════════════════ */

.sm-hero {
	position: relative;
	overflow: hidden;
	background: var(--sm-primary-deep);
	color: var(--sm-on-deep);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-16) var(--sm-space-12) var(--sm-space-8);
	margin-top: var(--sm-space-8);
}

/* کاغذ میلی‌متری — بافت نقشه‌ی فنی، با CSS و صفر بایت تصویر.
   شدتش عمداً در مرز دیده‌شدن است: باید حس کاغذ بدهد، نه الگوی تزئینی. */
.sm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(to right,  rgba(255,255,255,.062) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(to bottom, rgba(255,255,255,.062) 0 1px, transparent 1px 44px);
	pointer-events: none;
}

/* همان لبه‌ی پلاک — صفحه‌ی اصلی و پروفایل یک زبان دارند */
.sm-hero::after {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--sm-radius);
	pointer-events: none;
}

.sm-hero > * { position: relative; z-index: 1; }

.sm-hero__kicker {
	margin: 0 0 var(--sm-space-3);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-ui);
	color: var(--sm-on-deep-mut);
	max-width: none;
}

/* دو ستونه: عنوان راست، توضیح و جستجو چپ.
   تک‌ستونه، نیمی از پرارزش‌ترین ناحیه‌ی صفحه خالی می‌ماند و
   بازدیدکننده دیرتر به درگاه‌ها می‌رسد — که کل کار این صفحه است. */
.sm-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--sm-space-8) var(--sm-space-12);
	align-items: end;
}

.sm-hero__title {
	margin: 0;
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	font-weight: var(--sm-weight-plate);
	line-height: 1.25;
	color: var(--sm-on-deep);
	max-width: 16ch;
}

.sm-hero__lead {
	margin: 0;
	font-size: var(--sm-text-lg);
	color: var(--sm-on-deep-mut);
	max-width: 52ch;
}

/* شمارنده‌ها به‌شکل مشخصات حکاکی‌شده — نه «عدد بزرگ با برچسب کوچک»
   که تقریباً هر صفحه‌ی اصلی‌ای دارد، بلکه همان شبکه‌ی پلاک. */
.sm-hero__figures {
	margin: var(--sm-space-12) 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
}

.sm-hero__figures > div {
	min-width: 0;
	padding: var(--sm-space-4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
	border-inline-end: 1px solid rgba(255, 255, 255, 0.16);
}

.sm-hero__figures dt {
	font-size: var(--sm-text-xs);
	color: var(--sm-on-deep-mut);
	margin-bottom: var(--sm-space-1);
}

.sm-hero__figures dd {
	margin: 0;
	font-size: var(--sm-text-xl);
	font-weight: var(--sm-weight-head);
	color: var(--sm-on-deep);
}

@media (max-width: 860px) {
	.sm-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.sm-hero { padding: var(--sm-space-8) var(--sm-space-4) var(--sm-space-4); }
	.sm-hero__lead { font-size: var(--sm-text-base); }
	.sm-hero__figures { margin-top: var(--sm-space-8); }
}

/* جستجو — پرنیت‌ترین عنصر صفحه‌ی اصلی */
.sm-search {
	margin: var(--sm-space-4) 0 0;
	display: flex;
	gap: var(--sm-space-2);
}

.sm-search input {
	flex: 1;
	min-width: 0;
	font-size: var(--sm-text-base);
	padding: var(--sm-space-3) var(--sm-space-4);
}

.sm-search input {
	border-color: transparent;
}

.sm-search__hint {
	margin: var(--sm-space-3) 0 0;
	font-size: var(--sm-text-sm);
	color: var(--sm-on-deep-mut);
	max-width: none;
}

/* دکمه روی زمینه‌ی تیره باید از زمینه جدا شود، نه در آن حل */
.sm-hero .sm-btn--solid {
	background: var(--sm-on-deep);
	color: var(--sm-primary-deep);
}

.sm-hero .sm-btn--solid:hover { background: #FFFFFF; }

/* ══════════════════════════════════════════════════════════════════════
   ۱۵ · درگاه سرویس
   ──────────────────────────────────────────────────────────────────────
   چهار سرویس هم‌وزن نیستند و نباید چهار جعبه‌ی یکسان باشند:
   «غرفه‌ی صنعتکاران» اولویت اول است و عرض دوبرابر می‌گیرد.
   جعبه‌های یکسان، هم اولویت واقعی را پنهان می‌کنند و هم همان
   کیت کارت‌های تکراری‌اند که هر سایتی دارد.

   هر درگاه دو چیز دارد که جای شعار را می‌گیرند:
   ۱. معیارهایی که با آن‌ها مقایسه می‌کنید — وعده‌ی واقعی محصول
   ۲. لینک به دسته‌های پرطرفدار — توزیع اقتدار به صفحاتی که
      قرار است واقعاً رتبه بگیرند
   ══════════════════════════════════════════════════════════════════════ */

/* سه ستون: «غرفه‌ی صنعتکاران» (اولویت اول) دو ستون می‌گیرد و بقیه یکی.
   شبکه‌ی دوستونه، اولویت چهارم را هم‌اندازه‌ی اولویت اول می‌کرد —
   دقیقاً برعکس چیزی که در decisions.md تصمیم گرفته شد.
   خانه‌ی آخر با دعوت به ثبت‌نام پر می‌شود؛ هم شبکه کامل می‌شود
   هم مسیر طرف عرضه جایی در صفحه‌ی اصلی پیدا می‌کند. */
.sm-doors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sm-space-4);
	margin: var(--sm-space-12) 0 0;
}

.sm-door {
	--sm-cat: var(--sm-primary);
	position: relative;
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-top: 3px solid var(--sm-cat);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	transition: border-color 120ms ease;
}

.sm-door--wide { grid-column: span 2; }

/* اولویت اول فقط بزرگ‌تر نیست، سنگین‌تر هم هست —
   ته‌رنگ برند، نه یک جعبه‌ی سفید مثل بقیه. */
.sm-door--makers {
	--sm-cat: var(--sm-cat-makers);
	background: var(--sm-primary-soft);
	border-color: #CFDCD9;
}

.sm-door--makers .sm-door__links a { background: var(--sm-surface); }
.sm-door--engineers { --sm-cat: var(--sm-cat-engineers); }
.sm-door--surplus   { --sm-cat: var(--sm-cat-surplus); }
.sm-door--knowhow   { --sm-cat: var(--sm-cat-knowhow); }

.sm-door:hover,
.sm-door:focus-within { border-color: var(--sm-cat); }

.sm-door__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sm-space-3);
}

.sm-door__title {
	margin: 0;
	font-size: var(--sm-text-xl);
}

.sm-door__title a {
	color: inherit;
	text-decoration: none;
}

.sm-door__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sm-door__count {
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
	white-space: nowrap;
}

.sm-door__text {
	margin: 0;
	color: var(--sm-ink-mut);
	max-width: 62ch;
}

/* معیارهای مقایسه — وعده‌ی واقعی سرویس، به‌جای شعار */
.sm-door__by {
	margin: 0;
	padding-top: var(--sm-space-3);
	border-top: 1px solid var(--sm-line-soft);
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
	max-width: none;
}

.sm-door__by strong {
	font-weight: var(--sm-weight-ui);
	color: var(--sm-ink);
}

/* لینک دسته‌های پرطرفدار — توزیع اقتدار به صفحاتی که رتبه می‌گیرند.
   z-index بالاتر از پوشش کلیک عنوان، وگرنه قابل کلیک نیستند. */
.sm-door__links {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2);
}

.sm-door__links a {
	display: block;
	font-size: var(--sm-text-sm);
	color: var(--sm-ink);
	text-decoration: none;
	background: var(--sm-paper);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	padding: var(--sm-space-1) var(--sm-space-3);
}

.sm-door__links a:hover {
	border-color: var(--sm-cat);
	color: var(--sm-cat);
}

/* دعوت طرف عرضه — همان زبان «جای خالی» در شبکه‌ی نتایج */
.sm-door--invite {
	background: transparent;
	border: 1px dashed var(--sm-line);
	border-top: 1px dashed var(--sm-line);
	justify-content: center;
}

.sm-door--invite:hover { border-color: var(--sm-primary); }

@media (max-width: 1000px) {
	.sm-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.sm-doors { grid-template-columns: minmax(0, 1fr); }
	.sm-door--wide { grid-column: span 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   ۱۶ · نوار اعتماد — واقعیت، نه آیکون سپر
   ──────────────────────────────────────────────────────────────────────
   با صفر خریدار، بخش نظرات خالی از نبودش بدتر است. جایگزین‌ها
   همه قابل راستی‌آزمایی‌اند و همان چیزی را می‌گویند که واقعاً انجام می‌شود.
   ══════════════════════════════════════════════════════════════════════ */

.sm-assure {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-lg);
	margin: var(--sm-space-12) 0 0;
}

.sm-assure > div {
	min-width: 0;
	padding: var(--sm-space-6);
	border-inline-start: 1px solid var(--sm-line-soft);
}

.sm-assure > div:first-child {
	border-inline-start: 0;
}

.sm-assure h3 {
	margin: 0 0 var(--sm-space-2);
	font-size: var(--sm-text-base);
}

.sm-assure p {
	margin: 0;
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
	max-width: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ۱۷ · بخش صفحه
   ══════════════════════════════════════════════════════════════════════ */

.sm-section { padding: var(--sm-space-16) 0 0; }

/* عنوان ← خط راهنما ← لینک «همه».
   خط کشیده‌ی بین عنوان و لینک، همان leader line نقشه‌های فنی است:
   ساختار را نشان می‌دهد و جای برچسب ALL-CAPS تزئینی را می‌گیرد. */
.sm-section__head {
	display: flex;
	align-items: center;
	gap: var(--sm-space-4);
	margin-bottom: var(--sm-space-6);
	flex-wrap: wrap;
}

.sm-section__head h2 {
	margin: 0;
	order: 1;
}

.sm-section__head::after {
	content: "";
	order: 2;
	flex: 1 1 40px;
	height: 1px;
	background: var(--sm-line);
}

.sm-section__more { order: 3; }

.sm-section__more {
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-ui);
}

/* ══════════════════════════════════════════════════════════════════════
   ۱۸ · فوتر
   ══════════════════════════════════════════════════════════════════════ */

.sm-footer {
	background: var(--sm-primary-deep);
	color: var(--sm-on-deep-mut);
	margin-top: var(--sm-space-24);
	padding: var(--sm-space-12) 0 var(--sm-space-8);
}

.sm-footer__inner {
	max-width: var(--sm-container);
	margin-inline: auto;
	padding-inline: var(--sm-space-4);
}

.sm-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: var(--sm-space-8);
}

.sm-footer h2 {
	margin: 0 0 var(--sm-space-3);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-ui);
	color: var(--sm-on-deep);
}

.sm-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sm-space-2);
}

.sm-footer a {
	color: var(--sm-on-deep-mut);
	text-decoration: none;
	font-size: var(--sm-text-sm);
}

.sm-footer a:hover {
	color: var(--sm-on-deep);
	text-decoration: underline;
}

.sm-footer p { max-width: 48ch; font-size: var(--sm-text-sm); }

.sm-footer__base {
	margin-top: var(--sm-space-8);
	padding-top: var(--sm-space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-4);
	justify-content: space-between;
	font-size: var(--sm-text-sm);
}

/* ══════════════════════════════════════════════════════════════════════
   ۱۹ · نوار دسته — سربرگ فشرده‌ی صفحات آرشیو
   ──────────────────────────────────────────────────────────────────────
   همان زبان پلاک، ولی کوتاه: صفحه‌ی دسته کارش نمایش فهرست است و
   سربرگ بلند کارت‌ها را پایین می‌راند. خلاصه‌ی عددی دسته هم
   خودش برای خریدار مفید است، نه تزئین.
   ══════════════════════════════════════════════════════════════════════ */

.sm-band {
	position: relative;
	overflow: hidden;
	background: var(--sm-primary-deep);
	color: var(--sm-on-deep);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6) var(--sm-space-8);
}

.sm-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(to right,  rgba(255,255,255,.062) 0 1px, transparent 1px 44px),
		repeating-linear-gradient(to bottom, rgba(255,255,255,.062) 0 1px, transparent 1px 44px);
	pointer-events: none;
}

.sm-band > * { position: relative; z-index: 1; }

.sm-band .sm-crumb,
.sm-band .sm-crumb a { color: var(--sm-on-deep-mut); }
.sm-band .sm-crumb li + li::before { color: rgba(255, 255, 255, 0.28); }

.sm-band__title {
	margin: 0;
	font-size: var(--sm-text-2xl);
	font-weight: var(--sm-weight-plate);
	color: var(--sm-on-deep);
}

.sm-band__lead {
	margin: var(--sm-space-3) 0 0;
	color: var(--sm-on-deep-mut);
	max-width: 62ch;
}

/* خلاصه‌ی عددی دسته — یک ردیف، نه شبکه‌ی کامل پلاک */
.sm-band__figures {
	margin: var(--sm-space-5) 0 0;
	padding-top: var(--sm-space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-6);
	font-size: var(--sm-text-sm);
	color: var(--sm-on-deep-mut);
}

.sm-band__figures > span { white-space: nowrap; }
.sm-band__figures strong {
	color: var(--sm-on-deep);
	font-weight: var(--sm-weight-ui);
}

@media (max-width: 640px) {
	.sm-band { padding: var(--sm-space-5) var(--sm-space-4); }
	.sm-band__title { font-size: var(--sm-text-xl); }
	.sm-band__figures { gap: var(--sm-space-3) var(--sm-space-4); }
}

/* ══════════════════════════════════════════════════════════════════════
   ۲۰ · ویترین عضو — پلاک روی عکس
   ──────────────────────────────────────────────────────────────────────
   خواسته‌ی مالک سایت: صفحه‌ی عضو باید حس «وب‌سایت شخصی حرفه‌ای و
   گران‌قیمت» بدهد، نه ردیف دایرکتوری.

   چیزی که یک صفحه را گران نشان می‌دهد، تزئین بیشتر نیست — فضا،
   عکس بزرگ و تایپوگرافی مطمئن است. الگوی کاتالوگ ماشین‌ابزارهای
   درجه‌یک: عکس بزرگ، فضای زیاد، جدول مشخصات دقیق.

   و پلاک، روی لبه‌ی پایین عکس می‌نشیند — همان‌طور که پلاک واقعی
   روی خود ماشین پرچ می‌شود. شخصی‌سازی از «محتوای عضو» می‌آید
   (عکس کار خودش)، نه از تغییر پوسته — پس برند یکدست می‌ماند.

   ⚠️ این ناقض قاعده‌ی «هرگز متن روی عکس عضو» نیست: پلاک یک سطح
   مات است، نه متن شناور. کنتراست تضمین‌شده باقی می‌ماند.
   ══════════════════════════════════════════════════════════════════════ */

.sm-showcase { position: relative; }

.sm-showcase__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 21 / 9;
	background: var(--sm-primary-soft);
	border-radius: var(--sm-radius-lg);
	box-shadow: inset 0 0 0 1px var(--sm-line);
}

.sm-showcase__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* عکس به سمت پایین کمی تیره می‌شود تا پلاک روی لبه‌اش بنشیند
   بدون اینکه مرزش گم شود */
.sm-showcase__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 55%, rgba(14, 46, 42, .45));
	pointer-events: none;
}

.sm-showcase .sm-plate {
	position: relative;
	z-index: 1;
	margin-inline: var(--sm-space-8);
	margin-top: calc(var(--sm-space-16) * -1);
}

@media (max-width: 860px) {
	.sm-showcase__media { aspect-ratio: 16 / 9; }
	.sm-showcase .sm-plate {
		margin-inline: var(--sm-space-2);
		margin-top: calc(var(--sm-space-8) * -1);
	}
}

@media (max-width: 640px) {
	.sm-showcase__media { aspect-ratio: 4 / 3; }
	.sm-showcase .sm-plate {
		margin-inline: 0;
		margin-top: calc(var(--sm-space-6) * -1);
	}
}

/* نشان عضو داخل پلاک — لوگوی خودش، اگر داشته باشد */
.sm-plate__logo {
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: var(--sm-radius);
	background: var(--sm-surface);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	object-fit: contain;
	padding: var(--sm-space-2);
}

/* جمله‌ی موضع عضو — بزرگ، آرام، یک خط. جای شعار را می‌گیرد. */
.sm-stance {
	margin: var(--sm-space-12) 0;
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.6;
	font-weight: var(--sm-weight-ui);
	color: var(--sm-ink);
	max-width: 34ch;
}

/* ══════════════════════════════════════════════════════════════════════
   ۲۱ · تماس — مهم‌ترین لحظه‌ی تبدیل کل سایت
   ──────────────────────────────────────────────────────────────────────
   «تماس واقعی برای اعضا» تنها عددی است که عضو برایش پول می‌دهد.
   پس این کارت باید در دسترس بماند، نه اینکه با اسکرول گم شود.

   ⚠️ در فاز گیت‌شدن، شماره نباید در HTML باشد و با CSS پنهان شود —
   باید با درخواست سرور بیاید. وگرنه هر خزنده‌ای بی‌زحمت برش می‌دارد.
   ══════════════════════════════════════════════════════════════════════ */

.sm-contact {
	position: sticky;
	top: var(--sm-space-4);
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-top: 3px solid var(--sm-primary);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-5);
}

.sm-contact__title {
	margin: 0 0 var(--sm-space-1);
	font-size: var(--sm-text-base);
}

.sm-contact__hours {
	margin: 0 0 var(--sm-space-4);
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
	max-width: none;
}

.sm-contact .sm-btn { width: 100%; }
.sm-contact .sm-btn + .sm-btn { margin-top: var(--sm-space-2); }

/* حالت آشکارشده — عدد باید بزرگ و قابل انتخاب باشد */
.sm-reveal > summary {
	list-style: none;
	cursor: pointer;
}

.sm-reveal > summary::-webkit-details-marker { display: none; }

.sm-reveal[open] > summary { display: none; }

.sm-phone {
	display: block;
	font-family: var(--sm-font-num);
	font-size: var(--sm-text-2xl);
	font-weight: 600;
	direction: ltr;
	unicode-bidi: isolate;
	text-align: center;
	color: var(--sm-ink);
	text-decoration: none;
	padding: var(--sm-space-3);
	background: var(--sm-primary-soft);
	border-radius: var(--sm-radius);
}

.sm-contact__note {
	margin: var(--sm-space-3) 0 0;
	font-size: var(--sm-text-xs);
	color: var(--sm-ink-mut);
	max-width: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ۲۲ · شبکه‌ی توانایی — ورودی بخش مهندسان
   ──────────────────────────────────────────────────────────────────────
   کارفرما «استخدام مهندس مکانیک» را جستجو نمی‌کند؛ دنبال
   «کسی که بتواند قالب تزریق طراحی کند» است. سایت‌های کاریابی
   بر پایه‌ی عنوان شغلی ساخته شده‌اند و برای این عبارت صفحه‌ای ندارند.

   پس صفحه با توانایی باز می‌شود، نه با عکس آدم‌ها — و هر خانه
   یک صفحه‌ی قابل رتبه‌گیری می‌سازد.
   ══════════════════════════════════════════════════════════════════════ */

.sm-abilities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: var(--sm-space-3);
}

.sm-ability {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sm-space-3);
	padding: var(--sm-space-4);
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-inline-start: 3px solid var(--sm-cat-engineers);
	border-radius: var(--sm-radius);
	color: var(--sm-ink);
	text-decoration: none;
	font-weight: var(--sm-weight-ui);
	transition: border-color 120ms ease, background-color 120ms ease;
}

.sm-ability:hover {
	background: var(--sm-primary-soft);
	border-color: var(--sm-cat-engineers);
}

.sm-ability span {
	font-family: var(--sm-font-num);
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
	flex: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ۲۳ · گالری نمونه‌کار — بزرگ، با شرح فنی
   ──────────────────────────────────────────────────────────────────────
   شرح فنی زیر هر تصویر، هم برای خریدار مفید است و هم
   منبع اصلی یکتایی محتوا در مقیاس ۲۰۰۰ پروفایل.
   ══════════════════════════════════════════════════════════════════════ */

.sm-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: var(--sm-space-6);
}

.sm-gallery figure { margin: 0; }

.sm-gallery figcaption {
	padding-top: var(--sm-space-3);
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
}

.sm-gallery figcaption b {
	display: block;
	color: var(--sm-ink);
	font-weight: var(--sm-weight-ui);
	font-size: var(--sm-text-base);
	margin-bottom: var(--sm-space-1);
}

/* ══════════════════════════════════════════════════════════════════════
   ۲۴ · عکس پرسنلی داخل پلاک — فقط مهندسان
   ──────────────────────────────────────────────────────────────────────
   ویترین مهندس، پروژه‌ای است که طراحی کرده، نه چهره‌اش. عکس پرسنلی
   کوچک داخل پلاک می‌نشیند: هم صفحه با «توانایی، نه رزومه» جور می‌ماند،
   هم نبودِ عکس حرفه‌ای — که میان مهندسان رایج است — صفحه را خراب نمی‌کند.
   ══════════════════════════════════════════════════════════════════════ */

.sm-plate__head {
	display: flex;
	align-items: center;
	gap: var(--sm-space-4);
}

.sm-plate__portrait {
	width: 72px;
	height: 72px;
	flex: none;
	border-radius: var(--sm-radius);
	object-fit: cover;
	background: var(--sm-primary-soft);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* جایگزین وقتی عکسی نیست — دو حرف اول، مثل کارت */
.sm-plate__portrait--empty {
	display: grid;
	place-items: center;
	font-size: var(--sm-text-xl);
	font-weight: var(--sm-weight-plate);
	color: var(--sm-cat-engineers);
}

@media (max-width: 640px) {
	.sm-plate__portrait { width: 56px; height: 56px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ۲۵ · میزان آمادگی — دانش فنی
   ──────────────────────────────────────────────────────────────────────
   «ایده / نمونه آزمایشگاهی / نیمه‌صنعتی / تولید انبوه» تعیین‌کننده‌ی
   ریسک خریدار است و مهم‌ترین عدد این سرویس.

   اینجا شماره‌گذاری مرحله‌ای بجاست، چون محتوا واقعاً یک توالی است —
   برخلاف جاهایی که ۰۱/۰۲/۰۳ فقط تزئین است.
   ══════════════════════════════════════════════════════════════════════ */

.sm-readiness {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sm-space-1);
	counter-reset: sm-step;
}

.sm-readiness li {
	counter-increment: sm-step;
	padding: var(--sm-space-2) var(--sm-space-2) var(--sm-space-3);
	border-top: 3px solid var(--sm-line);
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
	min-width: 0;
}

.sm-readiness li::before {
	content: counter( sm-step );
	display: block;
	font-family: var(--sm-font-num);
	font-size: var(--sm-text-xs);
	color: var(--sm-line-strong);
	margin-bottom: var(--sm-space-1);
}

.sm-readiness .is-done {
	border-top-color: var(--sm-cat-knowhow);
	color: var(--sm-ink);
}

.sm-readiness [aria-current="step"] {
	border-top-color: var(--sm-cat-knowhow);
	color: var(--sm-cat-knowhow);
	font-weight: var(--sm-weight-head);
}

.sm-readiness .is-done::before,
.sm-readiness [aria-current="step"]::before { color: var(--sm-cat-knowhow); }

@media (max-width: 560px) {
	.sm-readiness { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
   ۲۶ · بلوک دولایه — دانش فنی
   ──────────────────────────────────────────────────────────────────────
   خلاصه عمومی می‌ماند تا صفحه محتوای کافی برای رتبه‌گیری داشته باشد
   و خریدار بتواند ارزیابی اولیه کند. فرمول، نقشه و مستندات فقط پس از
   درخواست ثبت‌شده باز می‌شوند.

   خط‌چین همان زبانی است که برای «جای خالی» به کار می‌رود: چیزی که
   هنوز اینجا نیست. آیکون قفل عمداً استفاده نشده — کلیشه است و
   خودِ ساختار پیام را می‌رساند.
   ══════════════════════════════════════════════════════════════════════ */

.sm-gate {
	border: 1px dashed var(--sm-line-strong);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-6);
	background: var(--sm-paper);
}

.sm-gate__title {
	margin: 0 0 var(--sm-space-4);
	font-size: var(--sm-text-lg);
}

.sm-gate ul {
	list-style: none;
	margin: 0 0 var(--sm-space-6);
	padding: 0;
	display: grid;
	gap: var(--sm-space-2);
}

.sm-gate li {
	padding-inline-start: var(--sm-space-5);
	position: relative;
	color: var(--sm-ink-mut);
	font-size: var(--sm-text-sm);
}

/* خط تیره به‌جای آیکون قفل — فهرست چیزهایی که هنوز باز نشده‌اند */
.sm-gate li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.75em;
	width: 12px;
	height: 1px;
	background: var(--sm-line-strong);
}

.sm-gate__note {
	margin: var(--sm-space-4) 0 0;
	font-size: var(--sm-text-xs);
	color: var(--sm-ink-mut);
	max-width: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ۲۷ · قیمت — تخفیف‌محور
   ──────────────────────────────────────────────────────────────────────
   معیار اصلی مقایسه «تخفیف نسبت به نو» است، نه عدد ریالی.
   با تورم، قیمت مطلق در دو ماه کهنه می‌شود و با چرخه‌ی بازتأیید
   ۶ ماهه نمی‌خواند؛ درصد تخفیف معنایش را نگه می‌دارد.
   ══════════════════════════════════════════════════════════════════════ */

.sm-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sm-space-2) var(--sm-space-4);
	padding: var(--sm-space-4);
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-inline-start: 3px solid var(--sm-cat-surplus);
	border-radius: var(--sm-radius);
}

.sm-price__off {
	font-size: var(--sm-text-2xl);
	font-weight: var(--sm-weight-head);
	color: var(--sm-cat-surplus);
	line-height: 1.2;
}

.sm-price__off small {
	display: block;
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-body);
	color: var(--sm-ink-mut);
}

.sm-price__val {
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
	margin-inline-start: auto;
	text-align: end;
}

.sm-price__val strong {
	display: block;
	font-size: var(--sm-text-lg);
	color: var(--sm-ink);
	font-weight: var(--sm-weight-ui);
}

/* در کارت آرشیو، فقط درصد تخفیف نشان داده می‌شود */
.sm-card .sm-price {
	border: 0;
	border-top: 1px solid var(--sm-line-soft);
	border-radius: 0;
	padding: var(--sm-space-3) 0 0;
	background: transparent;
}

.sm-card .sm-price__off { font-size: var(--sm-text-xl); }

/* ══════════════════════════════════════════════════════════════════════
   ۲۸ · امضای نویسنده — الزام E-E-A-T
   ──────────────────────────────────────────────────────────────────────
   ارزش‌گذاری، اعتبار مالیاتی و کارگزاری از جنس مشاوره‌ی مالی‌اند؛
   سخت‌گیرترین حوزه‌ی E-E-A-T. امضای بی‌نام آنجا ضعیف‌ترین حالت است.

   عکس مربع می‌ماند نه دایره: دایره زبان شبکه‌ی اجتماعی است،
   مربع زبان کارت شناسایی و پلاک — همان زبان بقیه‌ی سایت.

   نام همیشه لینک است. اگر کسی صفحه‌ی کارشناس ندارد، اسمش
   هم روی محتوا نمی‌نشیند — تحریریه امضا می‌کند.
   ══════════════════════════════════════════════════════════════════════ */

.sm-author {
	display: flex;
	align-items: center;
	gap: var(--sm-space-4);
	padding: var(--sm-space-4);
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-inline-start: 3px solid var(--sm-primary);
	border-radius: var(--sm-radius);
}

.sm-author__portrait {
	width: 56px;
	height: 56px;
	flex: none;
	border-radius: var(--sm-radius);
	object-fit: cover;
	background: var(--sm-primary-soft);
	display: grid;
	place-items: center;
	font-size: var(--sm-text-lg);
	font-weight: var(--sm-weight-plate);
	color: var(--sm-primary);
}

.sm-author__body { min-width: 0; }

.sm-author__name {
	margin: 0;
	font-size: var(--sm-text-base);
	font-weight: var(--sm-weight-head);
	line-height: var(--sm-leading-head);
}

.sm-author__name a { text-decoration: none; }
.sm-author__name a:hover { text-decoration: underline; }

.sm-author__role {
	margin: var(--sm-space-1) 0 0;
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
	max-width: none;
}

/* ستون سمت پایانی: بازبین و تاریخ. در موبایل زیر نام می‌رود. */
.sm-author__meta {
	margin-inline-start: auto;
	text-align: end;
	font-size: var(--sm-text-xs);
	color: var(--sm-ink-mut);
	line-height: 1.9;
	flex: none;
}

.sm-author__meta b {
	color: var(--sm-ink);
	font-weight: var(--sm-weight-ui);
}

/* نسخه‌ی پایان مقاله — با معرفی کوتاه و دکمه */
.sm-author--full {
	align-items: flex-start;
	flex-wrap: wrap;
	padding: var(--sm-space-6);
	border-radius: var(--sm-radius-lg);
}

.sm-author--full .sm-author__portrait { width: 72px; height: 72px; }

.sm-author--full .sm-author__bio {
	margin: var(--sm-space-3) 0 0;
	font-size: var(--sm-text-sm);
	color: var(--sm-ink-mut);
}

@media (max-width: 640px) {
	.sm-author { flex-wrap: wrap; }
	.sm-author__meta {
		margin-inline-start: 0;
		text-align: start;
		flex-basis: 100%;
		padding-top: var(--sm-space-3);
		border-top: 1px solid var(--sm-line-soft);
	}
}

/* ══════════════════════════════════════════════════════════════════════
   ۲۹ · فهرست درون‌صفحه — با خط راهنما
   ──────────────────────────────────────────────────────────────────────
   مقاله‌ی ستون بلند است و خواننده‌ی حرفه‌ای معمولاً دنبال یک بخش
   مشخص آمده. فهرست، پرش مستقیم می‌دهد و برای گوگل هم لینک
   لنگر می‌سازد.

   خط راهنمای بین عنوان و شماره، همان leader line نقشه‌های فنی است
   که در سرِ بخش‌ها هم به کار رفته — تکرار عمدی یک زبان، نه تزئین.
   ══════════════════════════════════════════════════════════════════════ */

.sm-toc {
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-5) var(--sm-space-6);
}

.sm-toc__title {
	margin: 0 0 var(--sm-space-3);
	font-size: var(--sm-text-sm);
	font-weight: var(--sm-weight-head);
	color: var(--sm-ink-mut);
}

.sm-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: sm-toc;
}

.sm-toc li { counter-increment: sm-toc; }

.sm-toc li + li { border-top: 1px solid var(--sm-line-soft); }

.sm-toc a {
	display: flex;
	align-items: baseline;
	gap: var(--sm-space-3);
	padding: var(--sm-space-3) 0;
	font-size: var(--sm-text-sm);
	color: var(--sm-ink);
	text-decoration: none;
}

.sm-toc a::after {
	content: "";
	flex: 1 1 12px;
	height: 1px;
	background: var(--sm-line);
	transform: translateY(-0.25em);
}

/* شماره‌ی بخش، در انتهای خط راهنما — مثل شماره‌ی بالن در نقشه */
.sm-toc a::before {
	content: counter( sm-toc, decimal );
	order: 3;
	flex: none;
	font-family: var(--sm-font-num);
	font-size: var(--sm-text-xs);
	color: var(--sm-line-strong);
	direction: ltr;
	unicode-bidi: isolate;
}

.sm-toc a:hover { color: var(--sm-primary); }
.sm-toc a:hover::after { background: var(--sm-primary); }

/* روی دسکتاپ در ستون کناری می‌چسبد و همراه اسکرول می‌ماند */
@media (min-width: 960px) {
	.sm-toc--stick {
		position: sticky;
		top: var(--sm-space-6);
	}
}

/* ══════════════════════════════════════════════════════════════════════
   ۳۰ · منابع — الزام §۱۶
   ──────────────────────────────────────────────────────────────────────
   وقتی متن به قانون مالیاتی یا آیین‌نامه ارجاع می‌دهد، منبع باید
   دیده شود؛ وگرنه ادعای «تأیید رسمی» بدون مدرک است.

   شماره‌ی مونو در حاشیه می‌نشیند تا متن منبع تورفتگی یکدست
   داشته باشد — همان چیدمان پانویس در سند فنی.
   ══════════════════════════════════════════════════════════════════════ */

.sm-sources {
	background: var(--sm-paper);
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-5) var(--sm-space-6);
}

.sm-sources__title {
	margin: 0 0 var(--sm-space-4);
	font-size: var(--sm-text-base);
	font-weight: var(--sm-weight-head);
}

.sm-sources ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: sm-src;
	display: grid;
	gap: var(--sm-space-3);
}

.sm-sources li {
	counter-increment: sm-src;
	position: relative;
	padding-inline-start: var(--sm-space-8);
	font-size: var(--sm-text-sm);
	color: var(--sm-ink);
	line-height: var(--sm-leading-normal);
}

.sm-sources li::before {
	content: "[" counter( sm-src ) "]";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	font-family: var(--sm-font-num);
	font-size: var(--sm-text-xs);
	color: var(--sm-line-strong);
	direction: ltr;
	unicode-bidi: isolate;
}

/* ناشر و تاریخ — بخش راستی‌آزمایی‌پذیر منبع */
.sm-sources__pub {
	display: block;
	color: var(--sm-ink-mut);
	font-size: var(--sm-text-xs);
	margin-top: var(--sm-space-1);
}

/* ══════════════════════════════════════════════════════════════════════
   ۳۱ · مهر تازگی — الزام §۱۶ برای محتوای قانونی
   ──────────────────────────────────────────────────────────────────────
   نرخ اعتبار مالیاتی و آیین‌نامه‌ها هر سال عوض می‌شوند. متنی که
   تاریخ ندارد، خواننده نمی‌داند به دردش می‌خورد یا نه — و همین
   بی‌اعتمادی، بدتر از نداشتن مقاله است.

   همان زبان «مهر تأیید» پلاک، ولی روی زمینه‌ی روشن.
   ══════════════════════════════════════════════════════════════════════ */

.sm-updated {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sm-space-1) var(--sm-space-4);
	padding: var(--sm-space-2) var(--sm-space-4);
	border: 1px solid var(--sm-line-strong);
	border-radius: var(--sm-radius);
	background: var(--sm-surface);
	font-size: var(--sm-text-xs);
	color: var(--sm-ink-mut);
	line-height: 1.8;
}

.sm-updated b {
	color: var(--sm-ink);
	font-weight: var(--sm-weight-ui);
}

/* وقتی متن از چرخه‌ی بازبینی عقب افتاده — حذف نمی‌شود، برچسب می‌گیرد */
.sm-updated--stale {
	border-color: var(--sm-signal);
	background: var(--sm-signal-soft);
	color: var(--sm-signal);
}

.sm-updated--stale b { color: var(--sm-signal); }

/* ══════════════════════════════════════════════════════════════════════
   ۳۲ · باند TRL — کنار مقیاس فارسی، نه به‌جای آن
   ──────────────────────────────────────────────────────────────────────
   دو مخاطب، دو زبان، یک واقعیت.

   صاحب کارگاه در فرم «نیمه‌صنعتی» را درست انتخاب می‌کند و
   «TRL 6» را نه. پس پرسش فرم فارسی می‌ماند و باند TRL از رویش
   استخراج می‌شود — داده‌ی غلط بدتر از نبود داده است.

   ولی مدیر R&D و سرمایه‌گذار با TRL کار می‌کنند و همان را
   جستجو می‌کنند. با استخراج، هر دو پوشش داده می‌شوند بدون
   اینکه بار درست‌پرکردن روی دوش کسی بیفتد که نمی‌داند.

   محور TRL در همه‌ی مراجع از ۱ به ۹ چپ‌به‌راست است؛ در صفحه‌ی
   RTL هم برعکس نمی‌شود، چون آن‌وقت با هر نمودار مرجعی
   ناخوان می‌شود.
   ══════════════════════════════════════════════════════════════════════ */

.sm-trl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sm-space-3) var(--sm-space-4);
	margin-top: var(--sm-space-4);
	padding-top: var(--sm-space-4);
	border-top: 1px solid var(--sm-line-soft);
}

.sm-trl__label {
	font-size: var(--sm-text-xs);
	color: var(--sm-ink-mut);
	flex: none;
}

.sm-trl__band {
	font-family: var(--sm-font-num);
	font-size: var(--sm-text-sm);
	font-weight: 600;
	direction: ltr;
	unicode-bidi: isolate;
	padding: var(--sm-space-1) var(--sm-space-3);
	border-radius: var(--sm-radius);
	background: var(--sm-cat-knowhow);
	color: #FFFFFF;
	flex: none;
}

/* محور ۱ تا ۹ — خانه‌های داخل باند پر می‌شوند */
.sm-trl__scale {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2px;
	direction: ltr;
	flex: none;
}

.sm-trl__scale li {
	width: 1.75rem;
	height: 1.5rem;
	display: grid;
	place-items: center;
	font-family: var(--sm-font-num);
	font-size: var(--sm-text-xs);
	color: var(--sm-ink-mut);
	background: var(--sm-paper);
	box-shadow: inset 0 0 0 1px var(--sm-line);
	border-radius: 1px;
}

.sm-trl__scale .is-in {
	background: var(--sm-cat-knowhow);
	color: #FFFFFF;
	box-shadow: none;
}

/* توضیح نگاشت — چرا این باند از آن پاسخ درآمد */
.sm-trl__note {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--sm-text-xs);
	color: var(--sm-ink-mut);
	max-width: none;
}

@media (max-width: 480px) {
	.sm-trl__scale li { width: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   ۳۳ · چیدمان دوستونی — متن اصلی و ستون کناری
   ──────────────────────────────────────────────────────────────────────
   این الگو تا حالا در پیش‌نمونه با style درون‌خطی نوشته می‌شد. حالا که
   تمپلیت واقعی هم لازمش دارد، جایش در سیستم است — وگرنه همان عدد
   ۳۴۰px در چند فایل تکرار می‌شود و روزی یکی‌شان جا می‌ماند.

   ستون کناری در موبایل پایین می‌رود، نه اینکه پنهان شود: فهرست و
   ریل لینک هر دو محتوای واقعی‌اند.
   ══════════════════════════════════════════════════════════════════════ */

.sm-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sm-space-8);
	align-items: start;
}

/* ستون ضمنی گرید auto است و کفش min-content — یعنی یک جدول یا
   نوار TRL می‌تواند ستون را پهن‌تر از ظرف کند و در ۳۲۰px اسکرول
   افقی بسازد. min-width:0 روی خودِ ستون کافی نیست؛ کف باید روی
   شیار هم صفر شود. همان درسی که در .sm-grid گرفتیم. */
.sm-cols__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sm-space-8);
	min-width: 0;
}

.sm-cols__side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sm-space-4);
	align-content: start;
	min-width: 0;
}

@media (min-width: 960px) {
	.sm-cols { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ۳۴ · سرِ صفحه‌ی ستون و متن بلند
   ──────────────────────────────────────────────────────────────────────
   تا اینجا هر صفحه‌ای که ساختیم فهرست بود یا پروفایل. ستون دانش
   اولین صفحه‌ای است که واقعاً «متن بلند» دارد، و متن بلند فارسی
   قواعد خودش را می‌خواهد: فاصله‌ی خطی بازتر، طول سطر محدود، و
   تیترهایی که با یک خط از متن قبلی جدا شوند.

   خط بالای هر H2 همان زبان جداکننده‌ی سرِ بخش‌هاست — خواننده با
   اسکرول تند هم می‌فهمد بخش عوض شده.
   ══════════════════════════════════════════════════════════════════════ */

.sm-pillar__head {
	display: grid;
	gap: var(--sm-space-4);
	margin-bottom: var(--sm-space-8);
}

.sm-pillar__head h1 { margin: 0; }

.sm-pillar__lead {
	margin: 0;
	font-size: var(--sm-text-lg);
	color: var(--sm-ink-mut);
	line-height: var(--sm-leading-normal);
}

/* ─── متن بلند ─────────────────────────────────────────────────────── */

.sm-prose > :first-child { margin-top: 0; }
.sm-prose > :last-child  { margin-bottom: 0; }

.sm-prose h2 {
	margin: var(--sm-space-12) 0 var(--sm-space-4);
	padding-top: var(--sm-space-5);
	border-top: 1px solid var(--sm-line-soft);
	font-size: var(--sm-text-2xl);
	scroll-margin-top: var(--sm-space-6);
}

.sm-prose h3 {
	margin: var(--sm-space-8) 0 var(--sm-space-3);
	font-size: var(--sm-text-xl);
}

.sm-prose p { margin: 0 0 var(--sm-space-4); }

.sm-prose ul,
.sm-prose ol {
	margin: 0 0 var(--sm-space-4);
	padding-inline-start: var(--sm-space-6);
	max-width: var(--sm-measure);
}

.sm-prose li { margin-bottom: var(--sm-space-2); }

.sm-prose li::marker { color: var(--sm-line-strong); }

/* نقل‌قول و تأکید — خط حاشیه، نه گیومه‌ی تزئینی درشت */
.sm-prose blockquote {
	margin: var(--sm-space-6) 0;
	padding: var(--sm-space-1) var(--sm-space-5);
	border-inline-start: 3px solid var(--sm-primary);
	color: var(--sm-ink-mut);
}

.sm-prose blockquote p:last-child { margin-bottom: 0; }

/* جدول در متن — همان زبان جدول مشخصات */
.sm-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--sm-space-6);
	font-size: var(--sm-text-sm);
}

.sm-prose th,
.sm-prose td {
	padding: var(--sm-space-3);
	border-bottom: 1px solid var(--sm-line-soft);
	text-align: start;
	vertical-align: top;
}

.sm-prose thead th {
	border-bottom-color: var(--sm-line);
	color: var(--sm-ink-mut);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-ui);
}

/* جدول عریض نباید صفحه را بشکند — خودش می‌لغزد */
.sm-prose .sm-scroll {
	overflow-x: auto;
	margin-bottom: var(--sm-space-6);
}

.sm-prose .sm-scroll table { margin-bottom: 0; }

/* ─── فهرست سوابق ──────────────────────────────────────────────────── */

.sm-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sm-space-3);
}

.sm-facts li {
	position: relative;
	padding-inline-start: var(--sm-space-5);
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-normal);
}

.sm-facts li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.8em;
	width: 12px;
	height: 1px;
	background: var(--sm-line-strong);
}

.sm-fineprint {
	margin: var(--sm-space-4) 0 0;
	font-size: var(--sm-text-xs);
	color: var(--sm-ink-mut);
	max-width: none;
}

/* ══════════════════════════════════════════════════════════════════════
   ۳۵ · اصلاح‌های نوار پالایش پس از اتصال به وردپرس
   ──────────────────────────────────────────────────────────────────────
   نوار پالایش در پیش‌نمونه با <div> بود و حالا <form> است. عرض
   پیش‌فرض select در فرم واقعی کشیده می‌شد و هر کشو یک سطر کامل
   می‌گرفت — نواری که قرار بود یک خط باشد، پنج خط شد.
   ══════════════════════════════════════════════════════════════════════ */

.sm-filterbar select {
	width: auto;
	flex: 0 1 auto;
	min-width: 7rem;
	max-width: 100%;
}

/* دکمه‌ی «اعمال» هم‌قد کشوها بماند، نه بلندتر */
.sm-filterbar .sm-btn {
	padding: var(--sm-space-2) var(--sm-space-4);
	font-size: var(--sm-text-sm);
}

/* در موبایل کشوها تمام‌عرض می‌شوند — آنجا یک‌خط‌بودن ممکن نیست
   و نصفه‌عرض، متن گزینه را می‌برد. */
@media (max-width: 560px) {
	.sm-filterbar select { width: 100%; flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   ۳۶ · مراحل انجام کار — الزام «توضیح روش‌شناسی» در §۱۶
   ──────────────────────────────────────────────────────────────────────
   نوار افقی .sm-readiness برای وضعیت است: کجای مسیر ایستاده‌ای.
   این یکی برای روال است: چه اتفاقی به چه ترتیبی می‌افتد — و چون
   هر گام یک جمله‌ی کامل دارد، عمودی می‌نشیند.

   خط عمودی بین شماره‌ها، همان زبان leader line است که در فهرست و
   سرِ بخش‌ها به کار رفته: پیوستگی را نشان می‌دهد بدون فلش تزئینی.
   ══════════════════════════════════════════════════════════════════════ */

.sm-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: sm-step;
	display: grid;
	gap: var(--sm-space-5);
}

.sm-steps li {
	counter-increment: sm-step;
	position: relative;
	padding-inline-start: var(--sm-space-12);
	font-size: var(--sm-text-base);
	line-height: var(--sm-leading-normal);
	min-height: 2rem;
}

.sm-steps li::before {
	content: counter( sm-step );
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	font-family: var(--sm-font-num);
	font-size: var(--sm-text-sm);
	font-weight: 600;
	color: var(--sm-primary);
	background: var(--sm-primary-soft);
	border-radius: var(--sm-radius);
}

/* خط پیوند تا گام بعد — روی آخرین گام نمی‌آید */
.sm-steps li::after {
	content: "";
	position: absolute;
	inset-inline-start: 1rem;
	top: 2.25rem;
	bottom: calc(var(--sm-space-5) * -1);
	width: 1px;
	background: var(--sm-line);
}

.sm-steps li:last-child::after { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   ۳۷ · بریدن درست مقدار لاتین در ظرف راست‌به‌چپ
   ──────────────────────────────────────────────────────────────────────
   نوار مشخصات کارت باریک است و مقدار بلند با سه‌نقطه بریده می‌شود.
   ولی وقتی مقدار لاتین است — SolidWorks، FANUC 0i-TF — و ظرف
   راست‌به‌چپ، مرورگر از سمت منطقیِ ظرف می‌بُرد نه از انتهای خودِ
   کلمه. نتیجه «…dWorks» می‌شود: اولِ کلمه حذف شده، که بدتر از
   نبودنش است چون خواننده فکر می‌کند نام همین است.

   unicode-bidi: plaintext جهت هر سلول را از اولین نویسه‌ی قویِ خودش
   می‌گیرد: مقدار فارسی راست‌به‌چپ می‌ماند و مقدار لاتین چپ‌به‌راست
   می‌شود — پس هر کدام از انتهای درست خودش بریده می‌شود.

   .sm-num با isolate جدا می‌ماند و دست‌نخورده است؛ آنجا جهت باید
   قطعی باشد نه حدسی، چون «±0.01» با نویسه‌ی ضعیف شروع می‌شود.
   ══════════════════════════════════════════════════════════════════════ */

.sm-spec-strip dd:not(.sm-num),
.sm-spec-table dd:not(.sm-num) {
	unicode-bidi: plaintext;
	text-align: start;
}

/* ══════════════════════════════════════════════════════════════════════
   ۳۸ · یادداشت بلند در ریل
   ──────────────────────────────────────────────────────────────────────
   جایگاه <span> در ریل برای مقدار کوتاه است — تاریخ، شمارنده، برچسب —
   و به همین دلیل white-space: nowrap دارد تا وسطش نشکند.

   وقتی در صفحه‌ی نتایج جستجو خلاصه‌ی هشت‌کلمه‌ای در همان جایگاه
   نشست، nowrap اجازه‌ی شکستن نداد و در ۳۲۰px صفحه را ۱۲۲ پیکسل
   پهن کرد. راه‌حل، حذف خلاصه نیست؛ جایگاهِ درست برایش است.
   ══════════════════════════════════════════════════════════════════════ */

.sm-rail li a { flex-wrap: wrap; }

.sm-rail li a .sm-rail__note {
	flex-basis: 100%;
	white-space: normal;
	font-size: var(--sm-text-xs);
	line-height: var(--sm-leading-normal);
	margin-top: var(--sm-space-1);
}