/* ============================================================================
   کامپوننت‌ها — الگوهایی که در طراحی بیش از دو جا تکرار شده‌اند.

   قاعده‌های استخراج:
     • الگو دست‌کم سه بار تکرار شده باشد. دو بار تکرار نیست.
     • تفاوت‌ها با مادیفایر، نه با کلاس پایهٔ جدید.
     • هر استخراج جدا اندازه‌گیری می‌شود و اگر پیکسلی جابه‌جا شد برمی‌گردد.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   بَج
   --------------------------------------------------------------------------- */

.sy-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sy-s2);
	border-radius: var(--sy-r-pill);
	font-size: 15px;
	font-weight: 700;
	padding: var(--sy-s2) 15px;
}

.sy-badge--sm {
	display: inline-block;
	align-self: flex-start;
	gap: 0;
	font-size: 13px;
	padding: 6px var(--sy-s3);
	margin-top: var(--sy-s1);
}

.sy-badge--tint {
	background: var(--sy-surface-tint);
	color: var(--sy-primary);
}

.sy-badge--surface {
	background: var(--sy-white);
	color: var(--sy-primary);
}

.sy-badge--success {
	background: var(--sy-success-tint);
	color: var(--sy-success);
}

/* ============================================================================
   بردکرامب — کامپوننت دوم
   ============================================================================

   چهار صفحهٔ پورت‌شده هرکدام یک کپی از این چهار قاعده داشتند، با همان
   مقدارها و نام‌های مختلف (svc-p035 تا svc-p038 و همتاهایشان). حالا یکی
   است، و هر صفحهٔ تازه‌ای هم همین را می‌گیرد.

   مقدارها از طرح‌اند، ولی چهار کپی با هم یکی نبودند: سه صفحه
   padding:12px و font-size:15px داشتند و صفحهٔ فنی 11px و 13.5px. یک
   کامپوننت نمی‌تواند هر چهارتا باشد، پس اکثریتِ طرح برنده شد. هزینه‌اش
   دیدنی است و پنهان نمی‌ماند: بردکرامبِ صفحهٔ فنی سه پیکسل بلندتر شد.

   سند ۱۴px خواسته بود؛ ۱۵px ماند. ۱۴ کفِ تأییدشده است نه هدف، و
   کوچک‌کردن متن برای مخاطبی که میانگین سنش بالاست، برای خواندنِ یک عدد
   از سند، معاملهٔ بدی است. اگر دقیقاً ۱۴ خواسته شد، یک خط است.

   flex-wrap:nowrap با overflow-x:auto: در موبایل مسیر به چند خط
   نمی‌شکند، افقی اسکرول می‌شود. */

.sy-crumbs-wrap {
	background: var(--sy-surface);
	border-bottom: 1px solid var(--sy-hairline);
}

.sy-crumbs {
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px clamp(16px, 4vw, 40px);
	font-size: 15px;
	color: var(--sy-muted);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sy-crumbs::-webkit-scrollbar {
	display: none;
}

.sy-crumbs > * {
	flex: none;
}

.sy-crumbs a {
	color: var(--sy-muted);
	text-decoration: none;
}

.sy-crumbs a:hover {
	color: var(--sy-primary);
}

.sy-crumbs [aria-current="page"] {
	color: var(--sy-ink);
	font-weight: 700;
}

/* ============================================================================
   دکمه‌های انتخابگر سنی — کامپوننت سوم
   ============================================================================

   مقدارها از رانتایم خودِ طرح آمده‌اند، جایی که به‌صورت style درون‌خطی
   ساخته می‌شدند. حالا کلاس‌اند، چون حالت فعال باید از aria-selected
   بیاید نه از یک رشتهٔ CSS که جاوااسکریپت می‌سازد: خواننده‌ی صفحه‌خوان
   هم باید بفهمد کدام تب باز است. */

.sy-agetab {
	font: 600 16px/1 inherit;
	font-family: inherit;
	color: var(--sy-ink-2);
	background: var(--sy-white);
	border: 1.5px solid var(--sy-border);
	border-radius: 999px;
	padding: 13px 22px;
	cursor: pointer;
	white-space: nowrap;
}

.sy-agetab[aria-selected="true"] {
	font-weight: 700;
	color: var(--sy-white);
	background: var(--sy-primary);
	border-color: var(--sy-primary);
}

/* ============================================================================
   کامپوننت ۴ — بستهٔ متنِ ویرایشگر
   ============================================================================

   فیلد ویرایشگر پاراگراف‌های خودش را می‌سازد و تعدادشان دست کارفرماست،
   پس نمی‌شود مثل طرح به آخری کلاس دیگری داد. در فایل طرح تنها فرقِ
   پاراگراف آخر نداشتنِ حاشیهٔ پایین است؛ همان با :last-child بازسازی
   می‌شود و متنِ کارفرما تکه‌تکه نمی‌شود.

   اندازه و ارتفاع خط از خودِ طرح‌اند (۱۸px/۲٫۰۵)، نه از توکنِ بدنه —
   این متن در طرح عمداً یک پله بازتر از متن معمولی است. */

.sy-prose > p {
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 2.05;
	color: var(--sy-ink-2);
}

.sy-prose > p:last-child {
	margin-bottom: 0;
}

/* بستهٔ متن، فضای بعد از خودش را ندارد — چون نمی‌داند بعدش چه می‌آید.
   جایی که در طرح پیش از تیتر بعدی فاصله هست، همان فاصله را روی خودِ
   بسته می‌گذاریم، نه روی پاراگرافِ آخر: با :last-child، صفحه‌ای که
   بسته‌اش ته سکشن است هم فاصله می‌گرفت. */
.sy-prose--gap {
	margin-bottom: 28px;
}

/* بستهٔ متنِ یادداشت — یک پله کوچک‌تر و فشرده‌تر از متنِ اصلی. مقدارها
   از خودِ طرح‌اند، همان‌جا که این کادر ظاهر می‌شود. */
.sy-note > p {
	margin: 0 0 14px;
	font-size: 17.5px;
	line-height: 2;
	color: var(--sy-body);
}

.sy-note > p:last-child {
	margin-bottom: 0;
}