/**
 * استایل جلوی سایت — زبان بصری §۷.
 *
 * خودکفاست: به هیچ کلاس، متغیر یا ریست تمی تکیه نمی‌کند. «خودکفا» رنگ و فاصله
 * و **اندازه‌ی قلم و عرض خواندنی** را هم شامل می‌شود؛ نسخه‌ای که تایپوگرافی را
 * از تم ارث می‌برد، روی تمی با ۱۴px و line-height ۱٫۵ خطی با ~۳۰۰ نویسه داد.
 *
 * پنج قاعده:
 *
 * ۱. **موبایل پیش‌فرض است.** هر مقدار پایه مقدار موبایل است؛ دسکتاپ ارتقاست.
 * ۲. ویژگی‌های منطقی (inline-start به‌جای left). پلاگین جهت را نمی‌داند.
 * ۳. **هیچ متنی سفید نمی‌شود مگر روی زمینه‌ی seal یا danger.** نقض همین قاعده
 *    پرسش محوری درس را روی سایت واقعی نامرئی کرد: توکن «متن روی سطح تیره» با
 *    prefers-color-scheme روشن می‌شد، ولی زمینه‌ی تم سفید می‌ماند. پس هیچ توکنی
 *    اینجا رنگِ سطح تیره نیست و هیچ بلوک dark-mode ای وجود ندارد.
 * ۴. هیچ شفافیتی روی سطحی که متن داخلش است. شفافیت، زمینه‌ی زیر متن را
 *    غیرقابل‌پیش‌بینی می‌کند و با آن نسبت کنتراست هم غیرقابل‌تضمین — و کف
 *    WCAG AA برای هر سایت عمومی برقرار است.
 * ۵. **هیچ هدف لمسی زیر ۴۴px.**
 */

/* ⚠️ `:root` **تنها جایی است که یک عدد نوشته می‌شود.** هر اعلان دیگری در این
 * شیت `var()` است.
 *
 * این یک سلیقه‌ی سبک نیست، شرط تست‌پذیری معیار ۲۷ است: تا وقتی عددها در کل
 * شیت پخش بودند (۷۲ عدد خام در ۴۳ اعلان)، تست باید **نیت** هر اعلان را
 * می‌فهمید تا بداند با کدام مقیاس بسنجدش. با این قاعده، تست دو خط می‌شود و
 * راه ورود عدد تازه بسته است.
 *
 * سه استثنا — مجموعه‌ی بسته، هرکدام با دلیل:
 *
 * ۱. `0` — نبودِ اندازه است، نه یک اندازه.
 * ۲. کلیدواژه‌ها و درصد (`auto` · `none` · `100%` · `50%`) — واحد طول نیستند.
 * ۳. `1px` خط جداکننده — کمترین پله‌ی مقیاس فاصله ۴ است و هیچ مقیاسی نباید
 *    پله‌ی ۱ داشته باشد؛ خط مو یک **مرز** است نه یک فاصله.
 */
:root {
	/* ⚠️ **رنگ یک ادعاست، نه تزئین.** هر پیکسل رنگی به یک واقعیت گره خورده:
	 * پاسخگویی، تأیید، سطح دسترسی، یا هشدار. */
	--d365-ink: #12161a;
	--d365-ink-2: #3f4750;
	--d365-ink-3: #6b737d;

	/* ⚠️ `bg-2` **زمینِ ناحیه‌ی ماست**، نه رنگِ کارت — و این رفعِ یک نقصِ
	 * اندازه‌گیری‌شده است: نسخه‌ی قبلی کارت `#f6f8fb` روی زمینه‌ی سفیدِ قالب
	 * می‌گذاشت و کنتراستشان **۱.۰۶ به یک** بود، زیر آستانه‌ی دیدن. شش سطح
	 * رندر می‌شد و هیچ‌کدام دیده نمی‌شد.
	 *
	 * سطح فقط وقتی سطح است که از زمینِ زیرش جدا شود؛ و چون زمینِ تم را
	 * نمی‌شناسیم، زمین را خودمان می‌گذاریم. */
	--d365-bg: #ffffff;
	--d365-bg-2: #eef1f6;
	--d365-line: #eaedf1;

	--d365-seal: #1f5e4b;
	--d365-seal-soft: #e2ebe7;

	/* ⚠️ **فقط نشان تأیید.** هیچ پیوند، عنوان یا دکمه‌ای آبی نمی‌شود — وگرنه
	 * همان رنگی برمی‌گردد که با رنگ برند میزبان می‌جنگد. نشان مالِ **پلتفرم**
	 * است نه پزشک: ادعا این است که «این سیستم بازبینی‌اش کرده». */
	--d365-verified: #1567c2;
	--d365-verified-2: #3a95e6;
	--d365-verified-ring: #bfdcf6;

	--d365-accent: #8a6314;
	--d365-accent-soft: #fbeedb;
	--d365-danger: #c0392b;
	--d365-danger-soft: #fdeeec;

	/* تایپوگرافی — شش پله، و هر پله یک شغل نوشته‌شده دارد.
	 *
	 * ⚠️ معیار ۲۷ دو چیز را قاطی کرده بود: «هر عدد یک توکن با یک شغل» (درست)
	 * و «توکن‌ها کم باشند» (دلبخواه). فاصله‌ی ۱۳ تا ۱۶ برای ردیف فهرست —
	 * پرتکرارترین جزء سیستم — زیادی باز بود. افزودن پله مجاز است اگر شغلش
	 * نوشته شود. */
	--d365-text-meta: 13px;
	--d365-text-note: 15px;
	--d365-text-body: 17px;
	--d365-text-lead: 19px;
	--d365-text-section: 23px;
	--d365-text-page: 28px;

	--d365-lh-page: 1.28;
	--d365-lh-section: 1.35;
	--d365-lh-note: 1.55;
	--d365-lh-label: 1.45;
	--d365-lh-body: 1.9;

	--d365-weight-body: 400;
	--d365-weight-strong: 600;
	--d365-weight-heading: 700;
	--d365-weight-display: 800;

	/* فاصله — شبکه‌ی ۴ */
	--d365-space-1: 4px;
	--d365-space-2: 8px;
	--d365-space-3: 12px;
	--d365-space-4: 16px;
	--d365-space-5: 24px;
	--d365-space-6: 32px;
	--d365-space-7: 48px;

	/* اندازه — مجموعه‌ی بسته، هرکدام یک شغل */
	--d365-tap: 44px;
	--d365-slot: 48px;
	--d365-chip: 32px;
	--d365-action: 58px;
	--d365-badge: 22px;
	--d365-photo-lg: 160px;
	--d365-rail: 300px;

	/* مرز — نه فاصله */
	--d365-rule: 4px;

	/* ⚠️ سایه یک **توکنِ کامل** است، نه چند عدد پراکنده. اختلاف تُنِ زمین و
	 * کارت ۱.۱۳ به یک است — کافی برای دیده‌شدن، ولی سایه همان چیزی است که
	 * کارت را **روی** زمین می‌نشاند نه کنارش. */
	--d365-shadow: 0 1px 2px rgba(18, 22, 34, 0.05), 0 10px 28px rgba(18, 22, 34, 0.07);

	/* یک شعاع. `999` استثنا نیست — یک **شکل** است، نه یک گوشه. */
	--d365-radius: 26px;
	--d365-radius-pill: 999px;

	/* عرض — measure بر حسب em است، پس با بزرگ‌شدن قلم خودش بزرگ می‌شود و
	 * شمارش نویسه‌ی معیار ۲۰ دست‌نخورده می‌ماند.
	 *
	 * ۲۹.۵em روی ۱۷px ⇒ ۵۰۱ · پهن = ۱.۵ برابر ⇒ ۷۵۲
	 * خواندن  = ۷۵۲ + ۳۲                      ⇒ ۷۸۴
	 * با ریل  = ۷۵۲ + ۲۴ + ۳۰۰ + ۳۲          ⇒ ۱۱۰۸ */
	--d365-measure: 29.5em;
	--d365-wide: calc(var(--d365-measure) * 1.5);
	--d365-shell-read: 784px;
	--d365-shell-wide: 1108px;
}

/* ------------------------------------------------------------------ *
 * ظرف صفحه
 * ------------------------------------------------------------------ */

.d365-shell {
	/* تایپوگرافی از اینجا شروع می‌شود، نه از تم — وگرنه هر `em` پایین‌دست به
	 * قلم تم گره می‌خورد و عرض خوانا معنایش را از دست می‌دهد.
	 *
	 * `max()` عمدی است: `16px` خالی تنظیم اندازه‌ی قلمِ مرورگرِ کاربر را
	 * نادیده می‌گیرد، و `1rem` خالی روی تمی که `html` را ۶۲٫۵٪ کرده ۱۰px
	 * می‌شود. این هر دو را می‌گیرد. */
	font-size: var(--d365-text-body);
	line-height: var(--d365-lh-body);
	color: var(--d365-ink);

	max-width: var(--d365-shell-read);
	margin-inline: auto;

	/* ⚠️ فاصله‌ی داخلی داخل سقف حساب می‌شود، نه بیرونش. container query عرض
	 * **جعبه‌ی محتوا** را می‌سنجد؛ با `content-box` سقف ۸۲۰ می‌شد ولی چیزی که
	 * سنجیده می‌شد ۷۸۸ بود و دو ستون هیچ‌وقت فعال نمی‌شد. */
	box-sizing: border-box;
	padding-inline: var(--d365-space-4);

	/* ⚠️ بدون این، عنوان درس به هدرِ چسبانِ قالب می‌چسبد — روی سایت واقعی
	 * صفر پیکسل فاصله داشت. قابِ صفحه مال قالب است، ولی فاصله‌ی **خودِ ما**
	 * تا آن قاب مال ماست. */
	padding-block: var(--d365-space-6) var(--d365-space-7);
}

/* رَپر خنثای پیش‌فرض — پله‌ی ۰. عمداً هیچ عرض و هیچ فاصله‌ای تحمیل نمی‌کند؛
 * آن مال قالب است. */
.d365-main {
	display: block;
}

/* صفحه‌ی فهرست ریل ندارد ولی گروه‌های دوستونه دارد، پس عرضش از شغل ستون
 * می‌آید نه از عرض خواندن (§۷.۵). */
.d365-shell--wide {
	max-width: var(--d365-shell-wide);
}

/* ⚠️ **ناحیه‌ی ما زمینِ خودش را دارد.** بدون این، کارت‌های سفید روی زمینه‌ی
 * سفیدِ قالب می‌نشینند و کنتراستشان زیر آستانه‌ی دیدن می‌ماند — اندازه‌گیری‌شده
 * روی سایت واقعی: ۱.۰۶ به یک. سطح فقط وقتی سطح است که از زمینِ زیرش جدا شود،
 * و زمینِ تم را نمی‌شناسیم. */
.d365-page {
	padding: var(--d365-space-5) var(--d365-space-4) var(--d365-space-6);
	border-radius: var(--d365-radius);
	background: var(--d365-bg-2);
}

.d365-page > * + * {
	margin-block-start: var(--d365-space-5);
}

/* ------------------------------------------------------------------ *
 * بدنه — عرض خوانا و فاصله‌ی پاراگراف
 * ------------------------------------------------------------------ */

/* ⚠️ سقف روی **فرزندها**ست، نه روی خودِ بدنه — و این تفاوت کل بند ۱ هدف است.
 *
 * تا حالا بدنه خودش `max-width` داشت، پس هیچ بلاکی نمی‌توانست از عرض نثر
 * بیرون بزند. یعنی مکانیزم عرضِ خودِ گوتنبرگ (`alignwide` / `alignfull`) بی‌اثر
 * بود و ویدیوی ۱۶:۹ در درس روی نمایشگر ۱۴۴۰ به ۴۷۲ پیکسل می‌افتاد — ظرفِ
 * مقاله، نه ظرفِ درسِ مولتی‌مدیا.
 *
 * حالا هر فرزند به عرض خوانا مقید است و **نویسنده** می‌تواند بلاک‌به‌بلاک از
 * آن بیرون بزند. آزمون ۳ همین را می‌خواهد: شکل محتوا را تحمیل نکن.
 *
 * عمداً نه گرید و نه حاشیه‌ی منفی: بدنه `block` می‌ماند تا کولاپسِ مارجینِ
 * پاراگراف‌ها حفظ شود. با گرید، فاصله‌ی دو پاراگراف از ۱۶ به ۳۲ می‌پرید. */
.d365-page__body > * {
	max-width: var(--d365-measure);
	margin-inline: auto;
}

/* «پهن» مشتق است نه یک عدد تازه: یک‌ونیم برابر عرض نثر. با این نسبت، ستون
 * متن همچنان باریک‌ترین و اصلی‌ترین چیز صفحه می‌ماند. */
.d365-page__body > .alignwide {
	max-width: var(--d365-wide);
}

/* «تمام‌عرض» یعنی تا لبه‌ی ستونی که تم به ما داده — نه تا لبه‌ی پنجره. قابِ
 * صفحه مال قالب است (§۶.۱)، پس بیرون از آن نمی‌رویم. */
.d365-page__body > .alignfull {
	max-width: none;
}

/* ⚠️ **پاراگراف بدون فاصله، متن نیست.** تکیه بر تم یعنی روی تمی که
 * `p { margin: 0 }` گذاشته، بدنه یک بلوک به‌هم‌چسبیده می‌شود — روی سایت واقعی
 * دقیقاً همین شد. پس فاصله را خودمان می‌گذاریم، با اختصاصیتی که ریست تم را
 * رد کند. */
.d365-page__body p,
.d365-page__body ul,
.d365-page__body ol,
.d365-page__body blockquote,
.d365-page__body figure,
.d365-page__body table {
	margin-block: var(--d365-space-4);
}

.d365-page__body > :first-child {
	margin-block-start: 0;
}

.d365-page__body > :last-child {
	margin-block-end: 0;
}

.d365-page__body h2 {
	margin-block: calc(var(--d365-space-4) * 1.8) var(--d365-space-4);
	font-size: var(--d365-text-lead);
	line-height: var(--d365-lh-label);
}

.d365-page__body h3 {
	margin-block: calc(var(--d365-space-4) * 1.5) var(--d365-space-4);
	font-size: var(--d365-text-section);
	line-height: var(--d365-lh-label);
}

/* ------------------------------------------------------------------ *
 * سر صفحه و خط مسیر
 *
 * ⚠️ اینجا هیچ بردکرامبی نیست و نباید باشد. بردکرامب مال قالب است؛ خط مسیر
 * چیز دیگری است — اطلاعاتی که هیچ قالبی ندارد، در شکلی که با بردکرامب رقابت
 * نمی‌کند.
 * ------------------------------------------------------------------ */

/* ⚠️ سرصفحه **سطح خودش را دارد**، و این تزئین نیست: §۷.۱ می‌گوید هر متنی که
 * زیر ۱۶px رندر می‌کنیم باید روی سطحی بنشیند که خودمان رنگش کرده‌ایم. هر سه
 * متن ریزِ اینجا — کیکر، خط مسیر، خط امضا — تا حالا روی زمینه‌ی **تم**
 * می‌نشستند. اندازه‌گیری: خط امضا ۱۳px با `ink-3` روی بومِ تم ۴.۰۴ داد.
 *
 * تیره‌ترکردنِ رنگ جوابش نبود؛ «هر زمینه‌ی روشنِ ممکن» بی‌کران است و روی
 * زمینه‌ی ناشناخته هیچ تعهدی به کنتراست نمی‌شود داد. بوم هم سرصفحه را از اول
 * نوار `bg-2` کشیده بود — همان‌جا با گوشه‌ی گرد، چون ظرف ما تمام‌عرض نیست. */
/* ⚠️ سرصفحه **سطح ندارد** — و این هم یک تصمیم طراحی است هم یک رفع.
 *
 * سطحِ قبلی `bg-2` روی زمینه‌ی سفیدِ قالب واقعی ۱.۰۴ به یک بود: کارتی که
 * کارت خوانده نمی‌شد. دلیلِ وجودش هم قاعده‌ی «متن ریز روی سطح ما» بود.
 *
 * §۷.۲ آن دلیل را از ریشه برداشت: **هیچ‌چیز در سرصفحه زیر اندازه‌ی بدنه
 * نیست**، پس سطحی هم لازم نیست. سطح ۱ در §۷.۳ یعنی زمین باز. */
.d365-page__header {
	margin-block-end: var(--d365-space-6);
}

.d365-page__title {
	margin: 0;
	font-size: var(--d365-text-page);
	line-height: var(--d365-lh-page);
	font-weight: var(--d365-weight-heading);
	color: var(--d365-ink);
}

.d365-page__photo {
	margin-block-end: var(--d365-space-3);
}

.d365-page__photo img {
	display: block;
	max-width: var(--d365-photo-lg);
	height: auto;
	border-radius: 50%;
}

/* ⚠️ ۱۶ نه ۱۳، و رنگ ink-2 نه ink-3 — §۷.۲: هیچ‌چیز در سرصفحه زیر اندازه‌ی
 * بدنه نیست. با حذف سطحِ سرصفحه این دیگر یک ترجیح نیست: متن ۱۳px با
 * ink-3 روی بومِ تم ۴.۰۴ داد. */
.d365-path-line {
	margin: var(--d365-space-2) 0 0;
	font-size: var(--d365-text-body);
	line-height: var(--d365-lh-label);
	color: var(--d365-ink-2);
}

/* هدف لمسی، بدون جابه‌جا کردن خط.
 *
 * ⚠️ این تنها هدف زیر ۴۴px بود که روی سایت واقعی ماند و تست ما نگرفتش — چون
 * هارنس عمداً کنارش گذاشته بود، به این استدلال که «پیوند داخل جمله است».
 * استدلال غلط بود: این پیوند اصلی‌ترین راه رسیدن به مسیر است.
 *
 * فاصله‌ی داخلی روی عنصر inline ارتفاع خط را عوض نمی‌کند ولی هم ناحیه‌ی
 * کلیک و هم `getBoundingClientRect` را بزرگ می‌کند — یعنی هدف واقعاً بزرگ
 * می‌شود، نه اینکه فقط عدد تست را راضی کند.
 *
 * عدد عمداً بیش از لازم است: ارتفاع جعبه‌ی محتوای یک عنصر inline به متریک
 * خودِ قلم بستگی دارد و از CSS قابل حساب نیست. با `1.7em` — که ارتفاع خط
 * است — حساب شد و ۳۹px درآمد، چون جعبه‌ی محتوا ۱۷px بود نه ۲۲. بزرگ‌تر
 * بودنِ هدف لمسی عیب نیست؛ کوچک بودنش هست. */
.d365-path-line__path {
	color: var(--d365-seal);
	font-weight: var(--d365-weight-strong);
}

/* ------------------------------------------------------------------ *
 * پرسش محوری و جمله‌ی آغازین
 *
 * ⚠️ طبق §۰ پرسش محوری مهم‌ترین عنصر صفحه است. یک بار با رنگِ سطح تیره سفید
 * شد و روی زمینه‌ی سفید ناپدید — از هر تست متن‌محوری هم سبز رد شد، چون عنصر
 * سر جایش بود و متنش هم درست.
 * ------------------------------------------------------------------ */

/* پرسش اصلی **لید صفحه است**، نه یک زیرنویس. طبق §۰ کل درس حول آن تعریف
 * می‌شود؛ روی سایت واقعی ۲۶ پیکسل ارتفاع داشت و جدول اداری زیرش ۱۸۴ — یعنی
 * مهم‌ترین عنصر صفحه یک‌هفتمِ شناسنامه‌اش بود. */
.d365-core-question,
.d365-lead {
	margin: var(--d365-space-4) 0 0;
	font-size: var(--d365-text-lead);
	font-weight: var(--d365-weight-strong);
	line-height: var(--d365-lh-label);
	color: var(--d365-ink-2);
}

/* خط امضا — یک سطر، بدون کارت و بدون جدول. تنها چیزی از شناسنامه‌ی درس که
 * خواننده **پیش از خواندن** لازم دارد. */
/* کولوفون — عنصر امضای سیستم (§۷.۳).
 *
 * ⚠️ تا امروز ۱۳px و `ink-3` بود، یعنی **کم‌رنگ‌ترین چیز صفحه**: بلندترین
 * چیز عنوان بود و ساکت‌ترین چیز، دلیلِ اعتماد به آن. حالا اندازه‌ی بدنه
 * است و نام‌ها تنها متن رنگیِ صفحه‌اند. */
.d365-signature {
	margin: var(--d365-space-4) 0 0;
	font-size: var(--d365-text-body);
	line-height: var(--d365-lh-label);
	color: var(--d365-ink-2);
}

/* نام تأییدکننده داخل یک سطر متن است، پس نباید ۴۴ پیکسل **دیده** شود — ولی
 * پیوند است، پس باید ۴۴ پیکسل **لمس** شود. همان راه خط مسیر: فاصله‌ی داخلی
 * روی عنصر inline، که ارتفاع خط را عوض نمی‌کند و ناحیه‌ی لمس را بزرگ می‌کند. */
.d365-signature .d365-person {
	min-height: 0;
	font-weight: var(--d365-weight-strong);
}

.d365-signature__date {
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * کارت واقعیت‌ها — نوار اعتبار و دسته‌بندی، در یک سطح
 *
 * ⚠️ قبلاً دو کارتِ جدا بودند، هرکدام با قاب و زمینه‌ی خودش، پشت سر هم. دو
 * جعبه‌ی هم‌شکل و هم‌وزن پشت هم، سلسله‌مراتب نمی‌سازند — تکرار می‌سازند. و
 * چون هر کدام گرید مستقل داشت، ستون برچسب‌هایشان هم با هم تراز نبود.
 *
 * حالا یک سطح، و ردیف‌ها با خط جداکننده از هم جدا می‌شوند. ردیف هم دیگر
 * «جدول دوستونی» نیست: برچسب سرِ خط، مقدار تهِ خط. با این شکل، دو فهرست
 * پشت سر هم هم بدون هیچ ترازِ مشترکی مرتب دیده می‌شوند — تراز به لبه‌های
 * کارت است، نه به عرضِ بلندترین برچسب.
 * ------------------------------------------------------------------ */

.d365-credits,
.d365-path-status {
	padding: 0 var(--d365-space-4);
	border-radius: var(--d365-radius);
	background: var(--d365-bg-2);
}

.d365-credits__list,
.d365-terms__list,
.d365-path-status__list {
	margin: 0;
}

.d365-meta-row {
	display: flex;
	gap: var(--d365-space-4);
	align-items: center;
	justify-content: space-between;
	min-height: var(--d365-slot);
}

/* خط جداکننده بین ردیف‌ها — از لبه‌ی کارت تو رفته، چون داخل فاصله‌ی داخلیِ
 * کارت می‌نشیند. */
.d365-meta-row + .d365-meta-row {
	border-block-start: 1px solid var(--d365-line);
}

.d365-meta-row__label {
	margin: 0;
	flex: 0 0 auto;
	font-size: var(--d365-text-meta);
	font-weight: var(--d365-weight-strong);
	line-height: var(--d365-lh-label);
	color: var(--d365-ink-3);
}

.d365-meta-row__value {
	/* dd از تم فاصله‌ی داخلی ارث می‌برد؛ شیت خودکفا یعنی این هم مال ماست. */
	margin: 0;
	padding: 0;
	min-width: 0;
	font-size: var(--d365-text-body);
	font-weight: var(--d365-weight-strong);
	line-height: var(--d365-lh-label);
	text-align: end;
	color: var(--d365-ink);
}

.d365-person__separator {
	white-space: pre;
}

/* ------------------------------------------------------------------ *
 * متن فقط برای صفحه‌خوان
 *
 * ⚠️ مارک‌آپ ما `screen-reader-text` دارد ولی تعریفش را از تم می‌گرفت. روی
 * تمی که این کلاس را نمی‌شناسد، عنوان‌های پنهانِ «اعتبار علمی» و «دسته‌بندی»
 * وسط صفحه ظاهر می‌شوند. شیت خودکفا یعنی این هم مال ماست.
 * ------------------------------------------------------------------ */

.d365-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
/* ------------------------------------------------------------------ *
 * چیپ و نشان
 * ------------------------------------------------------------------ */

.d365-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--d365-space-2);
}

/* چیپ یک **پیوند** است، پس هدف لمسی است — ولی لازم نیست ۴۴ پیکسل هم دیده
 * شود. تراشه‌ی ۴۴ پیکسلی کنار یک برچسب ۱۳ پیکسلی، ردیف را باد می‌کند و
 * همان چیزی است که کارت بالا را بزرگ و شلوغ کرده بود.
 *
 * پس ظاهر ۳۲ و ناحیه‌ی لمس ۴۴: یک شبه‌عنصر که بی‌رنگ است و از بالا و پایین
 * بیرون می‌زند. نشان (`badge`) اصلاً پیوند نیست و هیچ‌کدام را لازم ندارد. */
.d365-chip,
.d365-badge {
	display: inline-flex;
	align-items: center;
	border-radius: var(--d365-radius-pill);
	background: var(--d365-bg);
	font-size: var(--d365-text-meta);
	line-height: var(--d365-lh-label);
	color: var(--d365-ink-2);
	text-decoration: none;
	white-space: nowrap;
}

.d365-chip {
	position: relative;
	min-height: var(--d365-chip);
	padding: 0 var(--d365-space-4);
}

.d365-chip::after {
	content: "";
	position: absolute;
	inset: calc((var(--d365-chip) - var(--d365-tap)) / 2) 0;
}

.d365-badge {
	padding: var(--d365-space-1) var(--d365-space-3);
	color: var(--d365-ink-3);
}

.d365-chip:hover,
.d365-chip:focus-visible {
	background: var(--d365-bg-2);
	color: var(--d365-seal);
}

.d365-badge--access {
	background: var(--d365-accent-soft);
	color: var(--d365-ink);
	font-weight: var(--d365-weight-strong);
}

/* ------------------------------------------------------------------ *
 * کارت مسیر روی صفحه‌ی درس
 *
 * یک DOM برای هر دو حالت، بدون جاوااسکریپت — چون خروجی باید برای کاربر
 * لاگین‌کرده و ناشناس بیت‌به‌بیت یکی بماند.
 *
 * روی موبایل یک نوار **جمع‌شونده** است (پیش‌فرض بسته)، روی دسکتاپ ستون کناری
 * چسبان با فهرست باز. `details` پیش‌فرض بسته است چون موبایل پیش‌فرض است؛ باز
 * کردنش روی دسکتاپ کار CSS است.
 * ------------------------------------------------------------------ */

.d365-path-card__box {
	border-radius: var(--d365-radius);
	background: var(--d365-bg-2);
	overflow: hidden;
}

.d365-path-card__summary {
	display: flex;
	gap: var(--d365-space-3);
	align-items: center;
	justify-content: space-between;
	min-height: var(--d365-tap);
	padding: var(--d365-space-3) var(--d365-space-4);
	cursor: pointer;
	list-style: none;
}

.d365-path-card__summary::-webkit-details-marker {
	display: none;
}

.d365-path-card__head {
	display: grid;
	gap: var(--d365-space-1);
	min-width: 0;
}

.d365-path-card__label {
	font-size: var(--d365-text-meta);
	line-height: var(--d365-lh-label);
	color: var(--d365-seal);
}

.d365-path-card__path {
	font-size: var(--d365-text-body);
	font-weight: var(--d365-weight-heading);
	line-height: var(--d365-lh-label);
	color: var(--d365-ink);
}

.d365-path-card__position {
	font-size: var(--d365-text-meta);
	line-height: var(--d365-lh-label);
	color: var(--d365-ink-3);
}

.d365-path-card__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--d365-space-2);
	font-size: var(--d365-text-meta);
	color: var(--d365-seal);
}

.d365-path-card__toggle::after {
	content: "⌄";
	font-size: var(--d365-text-body);
	line-height: var(--d365-lh-page);
}

.d365-path-card__box[open] .d365-path-card__toggle::after {
	content: "⌃";
}

.d365-path-card__list {
	margin: 0;
	padding: var(--d365-space-2);
	list-style: none;
	background: var(--d365-bg);
}

.d365-path-card__item {
	display: flex;
	gap: var(--d365-space-3);
	align-items: center;
	min-height: var(--d365-tap);
	padding: var(--d365-space-1) var(--d365-space-2);
	border-radius: var(--d365-radius);
	font-size: var(--d365-text-body);
	line-height: var(--d365-lh-label);
}

.d365-path-card__number {
	flex: 0 0 auto;
	min-width: var(--d365-space-5);
	color: var(--d365-ink-3);
	font-size: var(--d365-text-meta);
	font-variant-numeric: tabular-nums;
}

.d365-path-card__title {
	color: var(--d365-ink-2);
	text-decoration: none;
}

.d365-path-card__title:hover,
.d365-path-card__title:focus-visible {
	color: var(--d365-seal);
	text-decoration: underline;
}

/* درس جاری **وضعیت** است، نه اقدام — پس رنگ ناحیه‌اش را پر نمی‌کند. با
 * وزن و رنگِ متن گفته می‌شود، که همان‌قدر خوانا و بسیار آرام‌تر است. */
.d365-path-card__item--current {
	background: var(--d365-bg);
}

.d365-path-card__item--current .d365-path-card__title,
.d365-path-card__item--current .d365-path-card__number {
	color: var(--d365-seal);
	font-weight: var(--d365-weight-strong);
}

/* ------------------------------------------------------------------ *
 * قبلی/بعدی
 *
 * روی موبایل نوار چسبان پایین صفحه است (§۷.۳)، روی دسکتاپ دو دکمه در جریان
 * صفحه. فقط حالت تک‌مسیره؛ `--many` فهرست مسیرهاست و هرگز چسبان نمی‌شود.
 * ------------------------------------------------------------------ */

.d365-page__body h2,
.d365-path-nav__heading,
.d365-section__heading,
.d365-list__heading {
	margin: 0 0 var(--d365-space-3);
	font-size: var(--d365-text-section);
	font-weight: var(--d365-weight-heading);
	line-height: var(--d365-lh-section);
	color: var(--d365-ink);
}

.d365-path-nav__position {
	margin: 0 0 var(--d365-space-3);
	font-size: var(--d365-text-meta);
	color: var(--d365-ink-3);
}

.d365-path-nav__links {
	display: flex;
	gap: var(--d365-space-3);
}

.d365-path-nav__link {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 0;
	border-radius: var(--d365-radius-pill);

	/* ⚠️ بدون این، `flex-shrink` به عنوانِ درسِ بلندتر گیر می‌کند و نسبت ۱ به
	 * ۱٫۴ برعکس می‌شود — «قبلی» پهن‌تر از «بعدی» می‌افتد. یک بار اندازه گرفته
	 * شد: ۲۰۰ در برابر ۱۸۴. */
	min-width: 0;

	min-height: var(--d365-action);
	padding: 0 var(--d365-space-4);
	border-radius: var(--d365-radius);
	background: var(--d365-bg-2);
	color: var(--d365-ink);
	text-decoration: none;
	line-height: var(--d365-lh-label);
}

/* ⚠️ **تنها جای صفحه که `seal` یک ناحیه را پر می‌کند** — چون تنها دکمه‌ی
 * اقدام صفحه است (§۷.۳). */
.d365-path-nav__link--next {
	flex: 1.4 1 0;
	background: var(--d365-seal);
	text-align: end;
}

.d365-path-nav__direction {
	display: block;
	font-size: var(--d365-text-meta);
	color: var(--d365-ink-3);
}

.d365-path-nav__title {
	display: block;
	font-size: var(--d365-text-body);
	font-weight: var(--d365-weight-strong);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* تنها متن سفید صفحه — و زمینه‌اش `seal` است. */
.d365-path-nav__link--next,
.d365-path-nav__link--next .d365-path-nav__direction {
	color: #ffffff;
}

.d365-path-nav__courses {
	display: grid;
	gap: var(--d365-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.d365-path-nav__course a {
	display: flex;
	align-items: center;
	min-height: var(--d365-tap);
	color: var(--d365-seal);
	text-decoration: none;
}

.d365-path-nav__course a:hover,
.d365-path-nav__course a:focus-visible {
	text-decoration: underline;
}

.d365-path-nav__courses a::before {
	content: "›";
	margin-inline-end: var(--d365-space-2);
	color: var(--d365-ink-3);
}

/* ------------------------------------------------------------------ *
 * فهرست — تنها کامپوننت فهرست (معیار ۲۸)
 *
 * ⚠️ **فهرست یک ظرفِ گروهی است، نه چند کارت.** ردیف‌ها داخل یک کارت سفید
 * می‌نشینند و با جداکننده‌ی **تورفته** جدا می‌شوند. چند مستطیل هم‌شکل پشت هم
 * به هم می‌ریزند — همان چیزی که «تو هم شده» خوانده شد.
 * ------------------------------------------------------------------ */

.d365-list__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--d365-radius);
	background: var(--d365-bg);
	box-shadow: var(--d365-shadow);
	overflow: hidden;
}

.d365-list__item {
	display: flex;
	gap: var(--d365-space-3);
	align-items: flex-start;
	padding: var(--d365-space-3) var(--d365-space-4);
	line-height: var(--d365-lh-label);
}

/* جداکننده از سمت اسلات تورفته است — امضای فهرستِ گروهی. */
.d365-list__item + .d365-list__item {
	border-block-start: 1px solid var(--d365-line);
	margin-inline-start: calc(var(--d365-slot) + var(--d365-space-3) + var(--d365-space-4));
}

.d365-list__item + .d365-list__item > .d365-list__slot {
	margin-inline-start: calc((var(--d365-slot) + var(--d365-space-3) + var(--d365-space-4)) * -1);
}

/* ⚠️ **اسلاتِ ابتدا یک شکل است و پرشدنش مشتق:** تصویر شاخص اگر باشد، وگرنه
 * شماره اگر ترتیب مالِ فهرست باشد، وگرنه خالی. یک اندازه، یک جا، سه محتوا. */
.d365-list__slot {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--d365-slot);
	height: var(--d365-slot);
	border-radius: var(--d365-radius-pill);
	overflow: hidden;
	background: var(--d365-bg-2);
	color: var(--d365-ink-2);
	font-size: var(--d365-text-note);
	font-weight: var(--d365-weight-heading);
	font-variant-numeric: tabular-nums;
}

.d365-list__slot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.d365-list__body {
	flex: 1 1 auto;
	min-width: 0;
}

.d365-list__title {
	font-weight: var(--d365-weight-heading);
	color: var(--d365-ink);
	text-decoration: none;
}

.d365-list__title:hover,
.d365-list__title:focus-visible {
	color: var(--d365-seal);
}

/* جمله فقط در فهرستِ اصلیِ صفحه رندر می‌شود (§۷.۳) — اینجا فقط شکلش. */
.d365-list__note {
	margin: var(--d365-space-1) 0 0;
	font-size: var(--d365-text-note);
	line-height: var(--d365-lh-note);
	color: var(--d365-ink-2);
}

.d365-list__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--d365-space-2);
	align-items: center;
	margin-block-start: var(--d365-space-2);
	font-size: var(--d365-text-meta);
	color: var(--d365-ink-3);
}

.d365-list__meta .d365-badge {
	min-height: 0;
	padding: var(--d365-space-1) var(--d365-space-3);
	font-size: var(--d365-text-meta);
}

.d365-list__heading,
.d365-section__heading,
.d365-facts__heading {
	margin: 0 0 var(--d365-space-3);
	padding-inline: var(--d365-space-2);
	font-size: var(--d365-text-section);
	font-weight: var(--d365-weight-heading);
	line-height: var(--d365-lh-section);
	color: var(--d365-ink);
}

.d365-related > .d365-list + .d365-list {
	margin-block-start: var(--d365-space-5);
}

/* ------------------------------------------------------------------ *
 * ردیف اعتبار — عنصر امضای سیستم
 *
 * یک ردیف: عکس با حلقه و نشان تأیید · نام · و زیرش «بازبینی علمی · تاریخ ·
 * زمان». اندازه‌گیری‌شده روی ۳۹۰px: ۷۴px — نسخه‌ی دوردیفهٔ قبلی ۱۲۷ بود.
 * ------------------------------------------------------------------ */

.d365-signature {
	display: flex;
	gap: var(--d365-space-3);
	align-items: center;
	margin: var(--d365-space-4) 0 0;
	padding: var(--d365-space-3) var(--d365-space-4);
	border-radius: var(--d365-radius);
	background: var(--d365-bg);
	box-shadow: var(--d365-shadow);
}

/* ⚠️ حلقه دور عکس، تا کل واحد «آدمِ تأییدشده» خوانده شود، نه «عکسی با
 * یک برچسب». */
/* بدون تأییدکننده، حلقه‌ی آبی هم نیست — حلقه نشانه‌ی همان ادعاست. */
.d365-signature__face--plain {
	box-shadow: none;
}

.d365-signature__face {
	position: relative;
	flex: 0 0 auto;
	padding: var(--d365-space-1);
	border-radius: var(--d365-radius-pill);
	background: var(--d365-bg);
	box-shadow: 0 0 0 2px var(--d365-verified-ring);
}

.d365-signature__face img {
	display: block;
	width: var(--d365-slot);
	height: var(--d365-slot);
	border-radius: var(--d365-radius-pill);
	object-fit: cover;
}

/* ⚠️ نشان **مالِ پلتفرم** است نه پزشک، و تنها آبیِ صفحه. معنایش هرگز فقط در
 * رنگ نیست — «بازبینی علمی» همیشه کنارش نوشته می‌شود (§۷.۷). */
.d365-signature__badge {
	position: absolute;
	inset-inline-start: calc(var(--d365-space-1) / -2);
	bottom: calc(var(--d365-space-1) / -2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--d365-badge);
	height: var(--d365-badge);
	border: var(--d365-rule) solid var(--d365-bg);
	border-radius: var(--d365-radius-pill);
	background: linear-gradient(180deg, var(--d365-verified-2) 0%, var(--d365-verified) 100%);
	color: var(--d365-bg);
}

.d365-signature__badge svg {
	display: block;
}

.d365-signature__body {
	flex: 1 1 auto;
	min-width: 0;
	line-height: var(--d365-lh-label);
}

.d365-signature__name {
	font-size: var(--d365-text-body);
	font-weight: var(--d365-weight-heading);
	color: var(--d365-ink);
	text-decoration: none;
}

.d365-signature__facts {
	margin: var(--d365-space-1) 0 0;
	font-size: var(--d365-text-meta);
	color: var(--d365-ink-3);
}

/* ------------------------------------------------------------------ *
 * متخصص
 * ------------------------------------------------------------------ */

.d365-expert-card {
	display: flex;
	gap: var(--d365-space-3);
	align-items: center;
	min-height: var(--d365-tap);
	padding: var(--d365-space-3) var(--d365-space-4);
	border-radius: var(--d365-radius);
	background: var(--d365-bg-2);
}

.d365-expert-card__photo img {
	display: block;
	width: var(--d365-slot);
	height: var(--d365-slot);
	border-radius: 50%;
	object-fit: cover;
}

.d365-expert-card__name {
	display: inline-flex;
	align-items: center;
	min-height: var(--d365-space-5);
	font-weight: var(--d365-weight-strong);
	color: var(--d365-ink);
	text-decoration: none;
}

.d365-expert-card__name:hover,
.d365-expert-card__name:focus-visible {
	color: var(--d365-seal);
	text-decoration: underline;
}

.d365-expert-card__credentials {
	margin: var(--d365-space-1) 0 0;
	font-size: var(--d365-text-meta);
	line-height: var(--d365-lh-label);
	color: var(--d365-ink-3);
}

.d365-expert-credentials p {
	margin: 0;
	line-height: var(--d365-lh-body);
}

/* ------------------------------------------------------------------ *
 * بلاک‌های محتوا
 * ------------------------------------------------------------------ */

.d365-faq__item + .d365-faq__item {
	margin-block-start: var(--d365-space-4);
}

.d365-faq__question {
	margin: 0 0 var(--d365-space-2);
	font-weight: var(--d365-weight-heading);
	color: var(--d365-ink);
}

/* جعبه‌ی جواب کوتاه — §۷.۳. زمینه‌ی پر، بدون شفافیت. §۹.۲ می‌گوید هرگز گلس. */
.d365-faq__answer {
	margin: 0;
	padding: var(--d365-space-3) var(--d365-space-4);
	border-radius: var(--d365-radius);
	background: var(--d365-bg-2);
	color: var(--d365-ink);
	line-height: var(--d365-lh-body);
}

/* هشدار پزشکی — §۷.۳. هرگز گلس، هرگز کم‌کنتراست. */
.d365-warning {
	padding: var(--d365-space-4) var(--d365-space-4);
	border-inline-start: var(--d365-rule) solid var(--d365-danger);
	border-radius: var(--d365-radius);
	background: var(--d365-danger-soft);
	color: var(--d365-ink);
}

.d365-warning__heading {
	margin: 0 0 var(--d365-space-2);
	font-weight: var(--d365-weight-heading);
	color: var(--d365-danger);
}

.d365-warning__body {
	margin: 0;
	line-height: var(--d365-lh-body);
}

.d365-video {
	margin: 0;
}

.d365-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--d365-radius);
	overflow: hidden;
}

.d365-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ================================================================== *
 * نوار قبلی/بعدی — در جریان صفحه، نه چسبان
 *
 * ⚠️ §۷.۳ این را نوار چسبانِ پایینِ موبایل خواسته بود و همان ساخته شد. روی
 * سایت واقعی معلوم شد قالب خودش یک منوی ثابت پایین دارد (۶۰px، z-index
 * ۱۱۰۰۰) و نوار ما با z-index ۲۰ کاملاً زیرش می‌رفت: نه دیده می‌شد، نه
 * کار می‌کرد — و ۷۸px فضای رزروشده‌ی خالی هم ته صفحه جا می‌گذاشت.
 *
 * بالا بردن z-index جواب نبود؛ دو نوار ثابت روی صفحه‌ی ۸۴۴ پیکسلی یعنی
 * ۱۲۳px از ارتفاع صرف نوار. یک نوار ثابت پایین برای کاربر کافی است و آن
 * یکی مال قالب است.
 *
 * پیامد ساختاری: با رفتن نوار چسبان، `containment` دیگر با هیچ عنصر
 * `fixed` ای تداخل ندارد (یافته ۱۴) — ولی همان‌جا می‌ماند، چون دلیل دومش
 * سر جایش است: container query بدون آن کار نمی‌کند.
 * ================================================================== */

/* ================================================================== *
 * دسکتاپ — ارتقا
 *
 * آستانه با سقف ظرف یکی است: دو ستون دقیقاً وقتی فعال می‌شود که هم متن به
 * عرض خوانا برسد و هم ۳۰۰px برای ستون کناری بماند.
 * ================================================================== */

@media (min-width: 820px) {
	/* مقیاس دسکتاپ **یک بازنویسی توکن** است، نه بازنویسی قانونِ هر جزء.
	 * با این شکل هیچ کامپوننتی در نقطه‌ی شکست اندازه عوض نمی‌کند — فقط
	 * پله‌ها بزرگ می‌شوند و همه‌چیز با آن‌ها می‌رود. یعنی یک جزء تازه
	 * خودبه‌خود درست است. */
	:root {
		--d365-text-lead: 23px;
		--d365-text-section: 28px;
		--d365-text-page: 40px;
	}

	/* ⚠️ شرط چیدمان روی **عرض خودِ ظرف** است، نه عرض پنجره. یک تم با ستون
	 * محتوای ۶۰۰ پیکسلی روی نمایشگر ۱۹۲۰ هم هست؛ با media query تنها، دو
	 * ستون همان‌جا هم فعال می‌شد و کارتِ کناری از خود متن پهن‌تر می‌افتاد.
	 * media query اینجا فقط containment را روشن می‌کند؛ تصمیم با container
	 * query است. */
	.d365-shell {
		container-type: inline-size;
		container-name: d365-page;
	}

	/* ⚠️ **کاهش فاصله‌ی حروف اعمال نمی‌شود.** `letter-spacing` منفی روی نمایشِ
	 * درشت، توصیه‌ی تایپوگرافی **لاتین** است و به خط فارسی منتقل نمی‌شود: خط
	 * متصل است و فشردنش هم خوانایی را می‌زند و هم می‌تواند اتصال را در بعضی
	 * قلم‌ها خراب کند. فشردگی فقط از ارتفاع خط می‌آید (`--d365-lh-page`). */
	.d365-page__title {
		font-size: var(--d365-text-page);
	}

	.d365-core-question,
	.d365-lead {
		font-size: var(--d365-text-lead);
	}

	.d365-page__body h2 {
		font-size: var(--d365-text-section);
	}

	/* ⚠️ نوار اعتبار عمداً اینجا **نیست**. دوستونه‌کردنش روی دسکتاپ، همان
	 * چیزی بود که چهار مقدار را روی چهار جای مختلف می‌نشاند. یک ستون تراز،
	 * از دو ستونِ ناتراز بهتر است. */
	/* ⚠️ تفاوتِ «در ورودی» با «دوره» از **عنصر** می‌آید، نه از نوع صفحه:
	 * `ol` یعنی دنباله و دنباله یک ستون خوانده می‌شود؛ `ul` یعنی انتخاب‌های
	 * موازی و موازی‌ها کنار هم می‌نشینند.
	 *
	 * و خودِ عنصر از داده آمده — مسیر مالک ترتیب درس‌هاست، نتیجه‌ی کوئری
	 * نیست. پس هیچ صفحه‌ای قاعده‌ی خودش را ندارد و معیار ۲۸ هم دست‌نخورده
	 * می‌ماند: همان کامپوننت با همان توکن‌ها، فقط چند ستون. */
	ul.d365-list__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* کمی زیر سقف ظرف، نه دقیقاً رویش: روی لبه‌ی دقیق، یک پیکسل گردکردن مرورگر
 * چیدمان را خاموش می‌کند. متنِ باریک‌تر از هدف عیب نیست، پهن‌تر عیب است. */
@container d365-page (min-width: 780px) {
	.d365-page--lesson.d365-page--with-aside {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--d365-rail);
		column-gap: var(--d365-space-5);
		align-items: start;
	}

	.d365-page--lesson.d365-page--with-aside > * {
		grid-column: 1;
	}

	.d365-page--lesson.d365-page--with-aside > * + * {
		margin-block-start: var(--d365-space-5);
	}

	.d365-page--lesson.d365-page--with-aside > .d365-path-card {
		grid-column: 2;
		grid-row: 1 / span 20;
		position: sticky;
		top: var(--d365-space-5);
		margin-block-start: 0;
	}

	/* روی دسکتاپ فهرست همیشه باز است — کارت مسیر بدون فهرست، کارت نیست.
	 *
	 * ⚠️ `details` بسته را نمی‌شود با CSS باز کرد. سه راه امتحان شد و هر سه
	 * شکست خورد: `display: block` روی فرزند، `flex` روی خود `details`، و
	 * `overflow: visible`. در هر سه، فهرست **رندر می‌شد** ولی ارتفاعش در
	 * جعبه حساب نمی‌شد و بیرون کادر می‌افتاد — یعنی از هر تستی که فقط وجود
	 * عنصر را می‌سنجد سبز رد می‌شد و روی صفحه دیده نمی‌شد.
	 *
	 * تنها راهی که کار می‌کند خودِ شبه‌عنصر است. مرورگر قدیمی کارت را بسته
	 * نشان می‌دهد و کاربر یک ضربه می‌زند — افت کیفیت، نه شکست. پس
	 * «فهرست درس‌ها» فقط جایی پنهان می‌شود که واقعاً باز شده باشد. */
	.d365-path-card__box::details-content {
		content-visibility: visible;
		block-size: auto;
	}

	@supports selector(::details-content) {
		.d365-path-card__summary {
			cursor: default;
		}

		.d365-path-card__toggle {
			display: none;
		}
	}

	.d365-path-card__box {
		border-radius: var(--d365-radius);
	}
}
/* ================================================================== *
 * حلقه‌ی فوکوس — §۷.۳
 *
 * ⚠️ تا امروز صفر قاعده‌ی `outline` در کل این شیت بود. شش قاعده‌ی
 * `:focus-visible` داشتیم و هر شش‌تا فقط رنگ و زیرخط عوض می‌کردند — یعنی
 * ناوبری با کیبورد کاملاً به پیش‌فرض مرورگر تکیه داشت، و روی تمی که
 * `outline: none` گذاشته **نامرئی** می‌شد.
 *
 * همان طبقه‌ی خطای «متن سفید روی سفید»: عنصر سر جایش است، متنش درست است، و
 * از هر تست متن‌محوری سبز رد می‌شود.
 * ================================================================== */

/* ⚠️ `!important` اینجا تنبلی نیست، اندازه‌گیری است. تم پیش‌فرض وردپرس این
 * را دارد:
 *
 *   .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button)
 *     { outline: transparent solid 2px }
 *
 * اختصاصیتش (۰,۳,۱) است و هر انتخابگر معقولی از سمت ما را می‌برد — یعنی
 * حلقه‌ی فوکوس **شفاف** می‌شود، روی خودِ تمِ آزمایشی ما. و این کفِ
 * دسترس‌پذیری است، نه یک ترجیح سبک: هیچ تمی نباید بتواند بی‌صدا برش دارد.
 *
 * دامنه‌اش سخت‌گیرانه بسته است — فقط فرزندان ظرف خودمان، پس به هیچ عنصری
 * از تم دست نمی‌زند. */
.d365-page :focus-visible,
.d365-shell :focus-visible {
	outline: var(--d365-rule) solid var(--d365-seal) !important;
	outline-offset: var(--d365-space-1);
	border-radius: var(--d365-radius);
}

/* ================================================================== *
 * حرکت — فقط انتقال، و فقط اگر کاربر مخالف نباشد
 * ================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.d365-list__title,
	.d365-chip,
	.d365-path-nav__link,
	.d365-person {
		transition: color 0.15s ease, background-color 0.15s ease;
	}

	/* ⚠️ حرکت قبلاً زیادی رد شده بود، با استدلالِ «صفر جاوااسکریپت و خروجی
	 * بیت‌به‌بیت یکی». ولی انیمیشن CSS جاوااسکریپت نیست و یک بایت هم به خروجی
	 * اضافه نمی‌کند؛ قید واقعی فقط همین media query است.
	 *
	 * و حسِ این زبان بصری تا حد زیادی از **پاسخِ فشار** می‌آید. */
	.d365-list__item,
	.d365-chip,
	.d365-path-nav__link {
		transition: transform 0.12s ease, background-color 0.15s ease;
	}

	.d365-list__item:active,
	.d365-path-nav__link:active {
		transform: scale(0.985);
	}
}

.d365-list__item:hover {
	background: var(--d365-bg-2);
}

/* ================================================================== *
 * هدف لمسی — §۷.۴
 *
 * ⚠️ ۴۴px روی **ظرف** کافی نیست؛ چیزی که انگشت می‌زند خودِ پیوند است. ردیف
 * ۴۴ پیکسلی با پیوند ۲۱ پیکسلی داخلش هنوز هدف ۲۱ پیکسلی است — و اندازه‌گیری
 * روی نسخه‌ی ۴ همین را نشان داد: ۷ هدف از ۱۳ زیر ۴۴px.
 *
 * پس پیوند تا لبه‌های ردیفش کشیده می‌شود، نه اینکه ردیف دورش بزرگ‌تر شود.
 * ================================================================== */

.d365-path-card__title,
.d365-list__title {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	align-self: stretch;
	min-height: var(--d365-tap);
}

/* نام متخصص داخل ردیف اعتبار: پیوند است، پس هدف لمسی است. */
.d365-person {
	display: inline-flex;
	align-items: center;
	min-height: var(--d365-tap);
	color: var(--d365-seal);
	text-decoration: none;
}

.d365-person:hover,
.d365-person:focus-visible {
	text-decoration: underline;
}

/* ناحیه‌ی لمس ۴۴ پیکسلی برای پیوندی که درون یک خط متن نشسته.
 *
 * ⚠️ تا الان **دو** راه برای یک مسئله داشتم: فاصله‌ی داخلی روی خط مسیر و نام
 * تأییدکننده، و شبه‌عنصر روی تراشه. فاصله‌ی داخلی عددی تولید می‌کرد که عضو
 * هیچ مقیاسی نبود — ‏۱۵٫۵px — و معیار ۲۸ همان را گرفت. شبه‌عنصر این مشکل را
 * ندارد چون هیچ عددی به چیدمان اضافه نمی‌کند.
 *
 * یک واقعیت، یک مکانیزم. */
.d365-path-line__path,
.d365-signature .d365-person {
	position: relative;
}

.d365-path-line__path::after,
.d365-signature .d365-person::after {
	content: "";
	position: absolute;
	inset-block: calc((1em - var(--d365-tap)) / 2);
	inset-inline: 0;
}

/* ------------------------------------------------------------------ *
 * ستون فقرات — §۷.۶ و §۷.۷
 * ------------------------------------------------------------------ */

/* کیکر: جای این صفحه در سیستم، پیش از اینکه عنوان بگوید چیست. */
.d365-kicker {
	margin: 0 0 var(--d365-space-2);

	/* ⚠️ ۱۶ نه ۱۳ — §۷.۲: هیچ‌چیز در سرصفحه زیر اندازه‌ی بدنه نیست. */
	font-size: var(--d365-text-body);
	font-weight: var(--d365-weight-strong);
	line-height: var(--d365-lh-label);
	color: var(--d365-seal);
}

/* FACTS — یک بخش با عنوان **دیده‌شونده**.
 *
 * ⚠️ تا الان عنوانش `screen-reader-text` بود و نتیجه‌اش صفحه‌ای بود که بعد از
 * `h1` هیچ نشانه‌ی ساختاری نداشت. §۷.۷ می‌گوید عنوان واقعی. */
/* FACTS یک **سطح** است، مثل بقیه‌ی کارت‌ها. قاب را از اجزای داخلی برداشتم
 * و اگر به خودِ بخش داده نمی‌شد، شناسنامه بی‌سطح می‌ماند — و همان لحظه
 * مجموعه‌ی شعاعِ صفحه‌ی درس از {۲۰,۹۹۹} شد {۹۹۹}. معیار ۲۸ گرفتش. */
.d365-facts {
	padding: var(--d365-space-4);
	border-radius: var(--d365-radius);
	background: var(--d365-bg-2);
}

.d365-facts__heading {
	margin: 0 0 var(--d365-space-3);
	font-size: var(--d365-text-section);
	font-weight: var(--d365-weight-heading);
	line-height: var(--d365-lh-section);
	color: var(--d365-ink);
}

/* داخل FACTS، ردیف‌ها سطح خودشان را رها می‌کنند — کارت یکی است. */
.d365-facts .d365-credits,
.d365-facts .d365-path-status {
	padding: 0;
	border-radius: 0;
	background: none;
}

.d365-facts .d365-terms {
	margin-block-start: var(--d365-space-3);
}

.d365-facts .d365-meta-row:first-child .d365-meta-row__label,
.d365-facts .d365-meta-row:first-child .d365-meta-row__value {
	border-block-start: 0;
}