/* ===========================================================================
   نارنجی — سیستم طراحی وب
   زبان انتخاب‌شده: «نرم و مدرنِ سلامت» (طرح ج)

   سه ستون این زبان:
   ۱. هر بخش روی یک سطح سفید با شعاع بزرگ و سایهٔ بسیار ملایم می‌نشیند.
   ۲. پنج تینت پاستلی کارِ تفکیک را می‌کنند، نه خط و قاب.
   ۳. آیکون همیشه کنارِ برچسب است، هیچ‌وقت به‌جای آن.

   قفل‌های docs/web-design-brief.md که اینجا اعمال شده‌اند:
   · letter-spacing همه‌جا صفر است — در فارسی اتصال حروف را می‌شکند.
   · ارتفاع خط متن طولانی ۱٫۹ به بالا.
   · tabular-nums استفاده نمی‌شود؛ تراز ستون عددی ساختاری است
     (عرض ثابت + راست‌چین)، چون tabular-nums رقم فارسی را از هم باز می‌کند.
   · سایه فقط برای ارتفاع؛ نه نئومورفیزم، نه سایهٔ عمیق، نه گرادیان اشباع.
   · تم روشن، تنها تم. (تصمیم مالک محصول — ۲۹ شهریور ۱۴۰۵)
   =========================================================================== */

/* ── فونت ─────────────────────────────────────────────────────────────
   فونت‌ها خودمیزبان‌اند و از CDN نمی‌آیند. سه دلیل، و هیچ‌کدام سلیقه‌ای نیست:

   ۱. ‏@import در دلِ یک CSS، درخواست‌ها را *زنجیره‌ای* می‌کند: مرورگر باید
      site.css را بگیرد و پارس کند، بعد تازه بفهمد باید index.css را از
      دامنهٔ دیگری بگیرد، و بعد از آن woff2 را. سه رفت‌وبرگشت پیش از اینکه
      یک حرف با فونتِ درست دیده شود.
   ۲. دامنهٔ سوم یعنی یک DNS و یک TLS دیگر — و روی اینترنت ایران، دامنه‌ای
      که ما کنترلش نمی‌کنیم یعنی روزی که فونت بی‌صدا نمی‌آید و سایت با
      Tahoma بالا می‌آید. خرابی‌ای که در تستِ ما هیچ‌وقت دیده نمی‌شود.
   ۳. کش عمومیِ CDN دیگر بین سایت‌ها مشترک نیست (مرورگرها از ۲۰۲۰ کش را
      پارتیشن کرده‌اند)، پس تنها مزیتِ باقی‌ماندهٔ CDN هم دیگر وجود ندارد.

   فقط زیرمجموعهٔ arabic و latin برداشته شده. latin-ext و vietnamese
   نیامده‌اند چون هیچ صفحه‌ای آن نویسه‌ها را ندارد؛ و چون unicode-range
   دارند، حتی اگر بودند هم تا ظاهر نشدنِ یک نویسه دانلود نمی‌شدند.

   ⚠️ ترتیب همان ترتیب fontsource است (اول arabic و بعد latin) و عمدی است:
   دو بازه روی U+200C (نیم‌فاصله) هم‌پوشانی دارند و در CSS اعلانِ بعدی
   برنده می‌شود. جابه‌جا کردنشان نیم‌فاصله را از فایل دیگری می‌آورد.

   ⚠️ شمارهٔ نسخه در *مسیر* است (fonts/fontsource-5.3.0/) و این هم عمدی
   است: فایل‌های ایستا با «immutable» و یک‌سال کش می‌شوند، ولی فونت —
   برخلاف site.css — از asp-append-version نمی‌گذرد چون از داخل CSS و از
   یک <link rel=preload> صدا زده می‌شود. اگر نسخهٔ تازه روی همان نام
   بنشیند، مرورگرِ هر کاربرِ قدیمی تا یک سال فونتِ کهنه را نگه می‌دارد.
   پس به‌روزرسانی یعنی یک پوشهٔ تازه و عوض کردن مسیر در همین دو جا
   (اینجا و _Layout.cshtml)، نه جایگزینی فایل.
   ─────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Estedad Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fontsource-5.3.0/estedad-arabic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face {
  font-family: 'Estedad Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fontsource-5.3.0/estedad-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fontsource-5.3.0/vazirmatn-arabic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}
@font-face {
  font-family: 'Vazirmatn Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fontsource-5.3.0/vazirmatn-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── توکن‌ها ─────────────────────────────────────────────────────────── */

:root {
  /* پالت «آبی آرام» — انتخاب مالک محصول، ۲۹ شهریور ۱۴۰۵.
     همهٔ ترکیب‌های متن/زمینه کمینهٔ ۴٫۵:۱ را رد می‌کنند. */
  --bg: #F4F7FA;
  --surface: #FFFFFF;
  --ink: #131A22;
  --ink-2: #41505E;
  --ink-3: #606F80;
  --rule: #E2E9F0;
  --rule-2: #CBD6E1;

  --accent: #1D6FB8;
  --accent-ink: #12578F;
  --accent-soft: #E6F0FA;

  /* آبیِ عمیق برای سطح‌های رنگی (طبقهٔ بالای سربرگ). روی خودِ --accent،
     لینکِ سفیدِ کم‌رنگ‌شده به ۳٫۹۵:۱ می‌افتد و قید ۴٫۵:۱ را رد می‌کند؛
     روی این یکی همان لینک ۶٫۴:۱ می‌خواند. */
  --accent-deep: #17537F;
  --accent-deep-2: #0F3F63;

  /* پاصفحه: تیرهٔ آبی‌مایل — انتخاب مالک محصول، ۳۰ شهریور ۱۴۰۵.
     تیره خوانده می‌شود ولی از خانوادهٔ همین پالت است، و رنگ تأکید را برای
     کارِ اصلی‌اش (لینک و دکمه) آزاد می‌گذارد. لینکِ پاصفحه روی این زمینه
     ۱۲٫۳:۱ می‌خواند. */
  --ft-bg: #16212C;
  --ft-panel: rgb(255 255 255 / 6%);
  --ft-ink: #FFFFFF;
  --ft-ink-2: rgb(255 255 255 / 86%);
  --ft-ink-3: rgb(255 255 255 / 72%);
  --ft-rule: rgb(255 255 255 / 16%);
  --ft-spark: #7FB6E4;
  --ft-proto: rgb(255 255 255 / 28%);

  /* چهار تینت تفکیک. با تأکیدِ آبی، تینتِ آبیِ قبلی عملاً همان accent-soft
     می‌شد و کارت سومِ «در یک نگاه» از بقیه جدا دیده نمی‌شد؛ جایش یک خنثای
     دودی نشست. --sky به همان خنثی اشاره می‌کند تا نشانه‌گذاری قبلی نشکند. */
  --mint: #E1F2E9;
  --mint-ink: #14633F;
  --peach: #FAEBE5;
  --peach-ink: #8A4A31;
  --orchid: #F3EAF4;
  --orchid-ink: #7E3F74;
  --sky: #E9EDF3;
  --sky-ink: #3D4B5A;

  /* مراقبت — ارجاع پزشکی، کف کالری، مرز محتوای سلامت.
     عمداً قرمز نیست: این خطا نیست، محافظت است. */
  --care: #FDF3E4;
  --care-ink: #77511E;
  --care-rule: #EDD9B4;

  /* خطای واقعی سیستم — فقط همین‌جا قرمز */
  --danger: #B3261E;
  --danger-soft: #FCEDEC;

  --font-display: 'Estedad Variable', 'Estedad', Tahoma, system-ui, sans-serif;
  --font-body: 'Vazirmatn Variable', 'Vazirmatn', Tahoma, system-ui, sans-serif;

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 24px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgb(23 26 40 / 4%), 0 4px 14px rgb(23 26 40 / 4%);
  --shadow-2: 0 2px 6px rgb(23 26 40 / 5%), 0 16px 34px rgb(23 26 40 / 6%);

  --max: 1160px;
  --head-h: 64px;

  --motion: 160ms cubic-bezier(0.2, 0, 0, 1);
}

/* ── پایه ────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 20px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0;
  /* clip و نه hidden: hidden یک ظرف اسکرول می‌سازد و sticky داخلش
     می‌تواند بی‌صدا از کار بیفتد. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
}

p, figure, blockquote, dl, table {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding-inline-start: 1.3em;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-ink);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: color var(--motion);
}

a:hover {
  color: var(--ink);
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: 18px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 10px;
  z-index: 90;
  padding: 12px 18px;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-s);
  box-shadow: var(--shadow-2);
}

.skip:focus {
  inset-inline-start: 16px;
}

[hidden] {
  display: none !important;
}

/* ── نوار پیشرفت مطالعه ──────────────────────────────────────────────── */

.progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 80;
  pointer-events: none;
}

.progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 90ms linear;
}

/* ── سربرگ: دوطبقه ───────────────────────────────────────────────────
   طبقهٔ بالا رنگی است و لینک‌های اعتماد و خبرِ انتشار را نگه می‌دارد؛
   طبقهٔ پایین سفید است و کارِ ناوبری، جستجو و ورود را می‌کند.
   موقع اسکرول طبقهٔ بالا جمع می‌شود تا ارتفاع سربرگ روی صفحهٔ غذا،
   جوابِ کالری را پایین نراند.                                          */

.sitehead {
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar {
  height: 40px;
  overflow: hidden;
  background: var(--accent-deep);
  color: #FFFFFF;
  font-size: 13px;
  transition: height 180ms cubic-bezier(0.2, 0, 0, 1), opacity 140ms linear;
}

.topbar .row {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 40px;
}

.topbar a {
  color: rgb(255 255 255 / 86%);
  text-decoration: none;
  white-space: nowrap;
}

.topbar a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.topbar .end {
  margin-inline-start: auto;
  color: rgb(255 255 255 / 86%);
  white-space: nowrap;
}

.topbar .end a {
  color: #FFFFFF;
  font-weight: 600;
}

.sitehead.shrink .topbar {
  height: 0;
  opacity: 0;
}

.mainbar {
  position: relative;
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.mainbar .row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--head-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  width: 25px;
  height: 25px;
  flex: none;
  color: var(--accent);
}

.sitenav {
  display: flex;
  gap: 24px;
  margin-inline-end: auto;
  font-size: 15px;
}

.sitenav a {
  position: relative;
  padding-block: 8px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.sitenav a:hover {
  color: var(--ink);
}

.sitenav a[aria-current] {
  color: var(--accent-ink);
  font-weight: 600;
}

.sitenav a[aria-current]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  background: var(--bg);
  border: 0;
  border-radius: 50%;
  color: var(--ink-2);
  transition: background var(--motion), color var(--motion);
}

.icon-btn:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}

.head-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  background: var(--accent);
  border-radius: var(--r-pill);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.head-cta:hover {
  background: var(--accent-ink);
  color: #FFFFFF;
}

.menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-inline-end: auto;
  padding: 0 14px;
  background: var(--bg);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 14px;
}

.menu-btn svg {
  width: 17px;
  height: 17px;
}

/* ── خرده‌نان ────────────────────────────────────────────────────────── */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 20px;
  font-size: 13px;
  color: var(--ink-3);
}

.crumbs a {
  color: var(--ink-3);
  text-decoration: none;
}

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

.crumbs [aria-current] {
  color: var(--ink-2);
}

/* ── کارت‌ها و بخش‌ها ────────────────────────────────────────────────── */

.card {
  padding: 32px 36px;
  background: var(--surface);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
}

.card-flat {
  box-shadow: none;
  border: 1px solid var(--rule);
}

.card-sunken {
  background: var(--bg);
  box-shadow: none;
}

.section {
  margin-top: 22px;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.section-head h2 {
  font-size: clamp(21px, 2.4vw, 27px);
}

.section-head .more {
  margin-inline-start: auto;
  font-size: 14.5px;
  font-weight: 600;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.lead {
  max-width: 58ch;
  font-size: clamp(16.5px, 1.6vw, 19px);
  line-height: 1.8;
  color: var(--ink-2);
}

.note {
  font-size: 13px;
  color: var(--ink-3);
}

/* ── نشان‌ها ─────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--mint);
  color: var(--mint-ink);
  font-size: 13px;
  font-weight: 600;
}

.pill svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.pill-sky { background: var(--sky); color: var(--sky-ink); }
.pill-peach { background: var(--peach); color: var(--peach-ink); }
.pill-orchid { background: var(--orchid); color: var(--orchid-ink); }
.pill-accent { background: var(--accent-soft); color: var(--accent-ink); }
.pill-quiet { background: var(--bg); color: var(--ink-3); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--mint);
  color: var(--mint-ink);
  font-size: 12.5px;
  font-weight: 600;
}

.badge svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ── دکمه و ورودی ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background var(--motion), color var(--motion);
}

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

.btn-primary:hover {
  background: var(--accent-ink);
  color: #FFFFFF;
}

.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.btn-quiet:hover {
  color: var(--accent-ink);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--rule-2);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--surface);
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.field .help {
  font-size: 13px;
  color: var(--ink-3);
}

.input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
  transition: border-color var(--motion);
}

.input::placeholder {
  color: var(--ink-3);
}

.input:focus {
  border-color: var(--accent);
}

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: 16px calc(50% + 2px), 21px calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: 38px;
}

/* انتخاب گروهی — به‌جای رادیوی خشک */
.choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}

.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.choice label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.choice label:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
}

.check input {
  width: 22px;
  height: 22px;
  margin-top: 4px;
  flex: none;
  accent-color: var(--accent);
}

/* ── جستجو ───────────────────────────────────────────────────────────── */

.search {
  position: relative;
  max-width: 640px;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline: 20px;
  background: var(--bg);
  border: 1px solid transparent;
  border-radius: var(--r-m);
  transition: border-color var(--motion), background var(--motion);
}

.search-field:focus-within {
  background: var(--surface);
  border-color: var(--accent);
}

.search-field svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-3);
}

.search-field input {
  flex: 1;
  min-height: 60px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-size: clamp(16px, 2.2vw, 18px);
}

.search-field input::placeholder {
  color: var(--ink-3);
}

.suggest {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 8px);
  z-index: 30;
  overflow: hidden;
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-2);
}

.suggest ul {
  margin: 0;
  padding: 8px;
  list-style: none;
}

.suggest a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: var(--r-s);
  color: var(--ink);
  text-decoration: none;
}

.suggest a:hover,
.suggest a:focus-visible {
  background: var(--bg);
}

.suggest .unit {
  font-size: 13px;
  color: var(--ink-3);
}

.suggest .kcal {
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.suggest .empty {
  padding: 20px;
  font-size: 15px;
  color: var(--ink-3);
}

/* ── عدد ─────────────────────────────────────────────────────────────
   تراز ستون عددی ساختاری است، نه با tabular-nums.                     */

.num {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: normal;
}

.answer {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

.answer .n {
  font-family: var(--font-display);
  font-size: clamp(52px, 11vw, 96px);
  font-weight: 800;
  line-height: 0.95;
  color: var(--ink);
}

.answer .u {
  max-width: 24ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.stat {
  padding: 16px 18px;
  background: var(--bg);
  border-radius: var(--r-m);
}

.stat .k {
  font-size: 13px;
  color: var(--ink-3);
}

.stat .v {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.stat .v small {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}

.stat .missing {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--ink-3);
}

/* ── جدول ────────────────────────────────────────────────────────────── */

.table-card {
  padding: 22px 24px;
  background: var(--bg);
  border-radius: var(--r-m);
}

.table-card h3 {
  font-size: 16px;
}

.table-card .sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-3);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

table.data caption {
  caption-side: bottom;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.7;
}

table.data th {
  padding: 0 0 10px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

table.data th button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
}

table.data th button:hover {
  color: var(--ink);
}

table.data th .arrow {
  opacity: 0;
  font-size: 10px;
}

table.data th[aria-sort] button {
  color: var(--accent-ink);
}

table.data th[aria-sort] .arrow {
  opacity: 1;
}

table.data td {
  padding: 13px 0 13px 16px;
  border-top: 1px solid var(--rule);
  vertical-align: baseline;
}

table.data .name {
  color: var(--ink);
  font-weight: 500;
}

table.data .name a {
  color: inherit;
  text-decoration: none;
}

table.data .name a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

table.data .v {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  min-width: 5.5ch;
}

table.data .missing {
  color: var(--ink-3);
}

/* واحد عرفی — مهم‌ترین بلوک صفحهٔ غذا، پس درشت‌تر است */
table.portions {
  width: 100%;
  border-collapse: collapse;
}

table.portions th {
  padding: 0 0 10px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: right;
}

table.portions td {
  padding: 15px 0 15px 16px;
  border-top: 1px solid var(--rule);
  vertical-align: baseline;
}

table.portions .p-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
}

table.portions .p-gram {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
  min-width: 6ch;
}

table.portions .p-kcal {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  min-width: 6ch;
}

table.portions small {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
}

/* نمودار میله‌ای درون جدول: یک سری داده → یک رنگ، بدون راهنما، با
   برچسب عدد مستقیم روی ردیف. خودِ جدول همان «نمای جدولی» است. */
table.barchart {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

table.barchart caption {
  caption-side: bottom;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-3);
  text-align: right;
  line-height: 1.7;
}

table.barchart th {
  padding-bottom: 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: right;
}

table.barchart td {
  padding-block: 10px;
  vertical-align: middle;
}

table.barchart .name {
  width: 32%;
  color: var(--ink);
  white-space: nowrap;
}

table.barchart .name a {
  color: inherit;
  text-decoration: none;
}

table.barchart .name a:hover {
  text-decoration: underline;
}

table.barchart .track {
  display: block;
  height: 12px;
  background: var(--surface);
  border-radius: 4px;
}

table.barchart .fill {
  display: block;
  height: 100%;
  width: var(--w);
  background: var(--accent);
  border-radius: 4px;
}

table.barchart .v {
  width: 7ch;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}

/* ── بلوک مراقبت ─────────────────────────────────────────────────────── */

.care {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: var(--care);
  border: 1px solid var(--care-rule);
  border-radius: var(--r-m);
  color: var(--care-ink);
}

.care > svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 4px;
}

.care h3 {
  font-size: 16px;
  color: var(--care-ink);
}

.care p {
  margin-top: 8px;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.8;
}

.care a {
  color: var(--care-ink);
}

/* نسخهٔ هشدارِ «دادهٔ این صفحه تستی است». عمداً رنگِ دیگری دارد تا
   با بلوک ارجاع به متخصص یکی دیده نشود: آن یکی با خواننده حرف می‌زند،
   این یکی با خودِ ما. */
.care-draft {
  background: var(--peach);
  border-color: rgb(138 74 49 / 26%);
  color: var(--peach-ink);
}

.care-draft h3,
.care-draft a {
  color: var(--peach-ink);
}

.care-draft ul {
  margin-top: 10px;
  padding-inline-start: 20px;
  font-size: 15px;
  line-height: 1.8;
}

.care-draft li + li {
  margin-top: 4px;
}

/* مقداری که هنوز واقعی نیست. در خودِ متن دیده می‌شود و نه فقط در بلوک
   بالای صفحه، چون کسی که وسط صفحه می‌رسد آن بلوک را ندیده است. */
.tbd {
  background: rgb(138 74 49 / 10%);
  border-bottom: 1px dashed rgb(138 74 49 / 55%);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--peach-ink);
  font-size: 0.95em;
}

.tbd::after {
  content: " ‚2 2A332ACC";
  font-size: 0.82em;
  opacity: 0.85;
}

/* ── متن مقاله ───────────────────────────────────────────────────────── */

.prose {
  max-width: 66ch;
  font-size: 17px;
  line-height: 1.92;
  color: var(--ink-2);
}

.prose > * + * {
  margin-top: 20px;
}

.prose h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 46px;
  font-size: clamp(20px, 2.2vw, 25px);
}

.prose h2 .dot {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.prose h3 {
  margin-top: 30px;
  font-size: 18px;
}

.prose li {
  margin-top: 8px;
}

.prose li::marker {
  color: var(--ink-3);
}

.prose strong {
  color: var(--ink);
}

.prose .fn {
  font-family: var(--font-display);
  font-size: 0.72em;
  vertical-align: super;
  padding-inline: 2px;
  text-decoration: none;
}

.quote {
  margin-block: 34px;
  padding: 24px 26px;
  background: var(--accent-soft);
  border-radius: var(--r-m);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--accent-ink);
}

figure.inline {
  margin-block: 34px;
}

figure.inline img {
  width: 100%;
  border-radius: var(--r-m);
}

/* عکسِ غذا نسبتِ ثابت می‌گیرد و بریده می‌شود.

   برخلاف تصویر شاخصِ مقاله که ویرایشگر با نسبتِ معلوم آپلودش می‌کند، عکسِ
   کاتالوگ از هر منبعی می‌آید و نسبتش در دیتابیس نیست. بدون نسبتِ ثابت،
   عددهای width/height روی تگ یک قابِ اشتباه رزرو می‌کنند و صفحه موقع رسیدنِ
   فایل می‌پرد — روی صفحه‌ای که پرترافیک‌ترین الگوی سایت است. */
figure.food-photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

figure.inline figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ── چیدمان با ستون حاشیه ────────────────────────────────────────────── */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (min-width: 1000px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }

  /* ستون حاشیه در DOM پیش از متن است تا روی موبایل فهرست بالا بیفتد و
     نه ته صفحه؛ اینجا با order به ستون کناری برمی‌گردد. */
  .body-col {
    order: 1;
  }

  .rail {
    order: 2;
    position: sticky;
    top: calc(var(--head-h) + 16px);
  }
}

.rail-card {
  padding: 22px 24px;
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
}

.rail-card + .rail-card {
  margin-top: 14px;
}

.rail-card h2,
.rail-card h3 {
  font-size: 14px;
}

.rail-card p {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-3);
}

.rail-card .go {
  display: inline-block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
}

.rail-card dl {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  font-size: 14px;
}

.rail-card dt {
  font-size: 12.5px;
  color: var(--ink-3);
}

.rail-card dd {
  margin: 2px 0 0;
  color: var(--ink);
}

/* ── فهرست مطالب: یک جزء، دو جای نمایش ───────────────────────────────
   · باریک — نوار جمع‌شدهٔ چسبان که بخش فعلی را می‌گوید.
   · عریض  — همان فهرست، باز و بی‌نوار، در ریل چسبان.
   فهرست پیش از متن می‌نشیند، چون کارش جهت‌یابیِ *پیش از* خواندن است.  */

details.toc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}

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

details.toc > summary::after {
  content: "▾";
  flex: none;
  font-size: 11px;
}

details.toc[open] > summary::after {
  content: "▴";
}

.toc-now {
  margin-inline-start: auto;
  max-width: 18ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
}

.toc ol {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  max-height: 50vh;
  overflow-y: auto;
}

.toc a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--ink-3);
  font-size: 14px;
  text-decoration: none;
  transition: background var(--motion), color var(--motion);
}

.toc a:hover {
  background: var(--bg);
  color: var(--ink);
}

.toc a.current {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

@media (max-width: 999px) {
  details.toc {
    position: sticky;
    top: var(--head-h);
    z-index: 30;
    margin-bottom: 22px;
    padding-block: 4px 12px;
  }
}

@media (min-width: 1000px) {
  details.toc > summary {
    min-height: 0;
    cursor: default;
    pointer-events: none;
  }

  details.toc > summary::after,
  .toc-now {
    display: none;
  }

  .toc ol {
    max-height: none;
    overflow: visible;
  }
}

/* ── پرسش‌های پرتکرار ────────────────────────────────────────────────── */

.faq details {
  margin-top: 10px;
  padding: 2px 24px;
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-3);
  font-size: 18px;
}

.faq details[open] summary::after {
  content: "−";
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.faq .a {
  padding-bottom: 20px;
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-2);
}

/* ── امضای انسانی ────────────────────────────────────────────────────── */

.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  font-size: 13.5px;
  color: var(--ink-3);
}

.who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.who b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}

/* ── کارت‌های خلاصه ──────────────────────────────────────────────────── */

.keygrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.keycard {
  padding: 22px;
  border-radius: var(--r-m);
}

.keycard:nth-child(4n+1) { background: var(--mint); color: var(--mint-ink); }
.keycard:nth-child(4n+2) { background: var(--peach); color: var(--peach-ink); }
.keycard:nth-child(4n+3) { background: var(--sky); color: var(--sky-ink); }
.keycard:nth-child(4n+4) { background: var(--orchid); color: var(--orchid-ink); }

.keycard .ico {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}

.keycard .ico svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.keycard p {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.75;
}

/* ── کارت مقاله ──────────────────────────────────────────────────────── */

.cardgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cardgrid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.post {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--motion), transform var(--motion);
}

.post:hover {
  box-shadow: var(--shadow-2);
  color: inherit;
}

.post img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-s);
}

.post .k {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
}

.post h3 {
  margin-top: 6px;
  font-size: 17.5px;
  line-height: 1.5;
}

.post p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-3);
}

.post .foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.post:hover h3 {
  color: var(--accent-ink);
}

/* مقالهٔ شاخص — بزرگ و دوستونی */
.post-hero {
  display: grid;
  gap: 22px;
  padding: 18px;
  background: var(--surface);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
}

@media (min-width: 860px) {
  .post-hero {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 34px;
    padding: 20px;
  }
}

.post-hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-m);
}

.post-hero .body {
  padding: 8px 12px 14px;
}

.post-hero h2 {
  margin-top: 14px;
  font-size: clamp(22px, 2.8vw, 31px);
  line-height: 1.35;
}

.post-hero p {
  margin-top: 12px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

.post-hero:hover h2 {
  color: var(--accent-ink);
}

/* ── فهرست ردیفی ─────────────────────────────────────────────────────── */

.rowlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rowlist li + li {
  border-top: 1px solid var(--rule);
}

.rowlist a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-block: 15px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15.5px;
}

.rowlist a:hover {
  color: var(--accent-ink);
}

.rowlist .tag {
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* فهرست شماره‌دار ابزارها */
.toolgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.tool {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  background: var(--surface);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--motion);
}

.tool:hover {
  box-shadow: var(--shadow-2);
  color: inherit;
}

.tool .ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-s);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.tool .ico svg {
  width: 20px;
  height: 20px;
}

.tool h3 {
  font-size: 17.5px;
}

.tool p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-3);
}

.tool .go {
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
}

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

.chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip-btn {
  min-height: 40px;
  padding: 0 16px;
  background: var(--surface);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 14.5px;
  box-shadow: var(--shadow-1);
  transition: background var(--motion), color var(--motion);
}

.chip-btn:hover {
  color: var(--ink);
}

.chip-btn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ── هم‌رسانی ────────────────────────────────────────────────────────── */

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-3);
}

.share button {
  min-height: 42px;
  padding: 0 18px;
  background: var(--surface);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 13.5px;
  box-shadow: var(--shadow-1);
}

.share button:hover {
  color: var(--accent-ink);
}

.share [data-share-said] {
  color: var(--accent-ink);
}

/* ── فراخوان ─────────────────────────────────────────────────────────── */

.cta {
  padding: 34px 36px;
  background: var(--accent);
  border-radius: var(--r-l);
  color: #FFFFFF;
}

.cta h2 {
  max-width: 20ch;
  font-size: clamp(21px, 2.4vw, 27px);
  color: #FFFFFF;
}

.cta p {
  max-width: 48ch;
  margin-top: 12px;
  font-size: 15.5px;
  /* روی --accent باید دست‌کم ۴٫۵:۱ بخواند؛ همان --accent-soft است */
  color: #E6F0FA;
}

.cta form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 470px;
  margin-top: 22px;
}

.cta .input {
  flex: 1 1 210px;
  background: rgb(255 255 255 / 12%);
  border-color: rgb(255 255 255 / 30%);
  color: #FFFFFF;
}

.cta .input::placeholder {
  color: #E6F0FA;
}

.cta .input:focus {
  background: rgb(255 255 255 / 18%);
  border-color: #FFFFFF;
}

.cta .btn-white {
  background: #FFFFFF;
  color: var(--accent-ink);
  font-weight: 700;
}

.cta .btn-white:hover {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.cta .fine {
  margin-top: 14px;
  font-size: 12.5px;
  color: #E6F0FA;
}

/* ── قیمت ────────────────────────────────────────────────────────────── */

.tiers {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--surface);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-1);
}

.tier-featured {
  box-shadow: var(--shadow-2);
  outline: 2px solid var(--accent);
}

.tier .price {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.tier .price.empty {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-3);
}

.tier ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.tier li {
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}

/* ── حالت خالی ───────────────────────────────────────────────────────── */

.empty-state {
  max-width: 54ch;
  padding-block: 20px;
}

.empty-state h2 {
  font-size: clamp(20px, 2.2vw, 25px);
}

.empty-state p {
  margin-top: 12px;
}

/* ── صفحه‌بندی ───────────────────────────────────────────────────────── */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.pager a,
.pager span {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  text-decoration: none;
  color: var(--ink-2);
}

.pager a:hover {
  background: var(--surface);
  color: var(--ink);
}

.pager [aria-current] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 700;
}

/* ── منابع ───────────────────────────────────────────────────────────── */

.sources h2 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}

.sources ol {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-3);
}

/* ── پاصفحه ──────────────────────────────────────────────────────────
   چهارستونی روی زمینهٔ تیره. رنگ‌هایش از توکن‌های --ft-* می‌آیند و نه از
   توکن‌های صفحه، پس عوض کردن زمینهٔ پاصفحه بقیهٔ سایت را دست نمی‌زند.   */

.sitefoot {
  margin-top: 46px;
  padding-block: 44px 26px;
  background: var(--ft-bg);
  color: var(--ft-ink-3);
  font-size: 14px;
}

.sitefoot .brand {
  color: var(--ft-ink);
}

.sitefoot .brand-mark {
  color: var(--ft-spark);
}

.footcols {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
}

.footcols .about p {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 14.5px;
  color: var(--ft-ink-2);
}

.footcols h3 {
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ft-ink-3);
}

.footcols ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footcols a {
  color: var(--ft-ink-2);
  font-size: 14.5px;
  text-decoration: none;
}

.footcols a:hover {
  color: var(--ft-ink);
  text-decoration: underline;
}

/* ردیف اسناد حقوقی. جدا از چهار ستون بالا است و نه داخلِ یکی از
   آن‌ها: این‌ها دستهٔ محتوایی نیستند، سندند — و جای قراردادی‌شان همین‌جاست،
   پس کاربر برای پیدا کردنشان نباید فکر کند. */
.footlegal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ft-rule);
  font-size: 13px;
}

.footlegal a {
  color: var(--ft-ink-2);
}

.footlegal a:hover {
  color: var(--ft-ink);
}

/* پاصفحه دیگر دو خط جداکنندهٔ پشت سر هم نداشته باشد. */
.footlegal + .footnote {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
}

.footnote {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--ft-rule);
  font-size: 12.5px;
  color: var(--ft-ink-3);
}

.proto {
  padding: 2px 12px;
  border: 1px dashed var(--ft-proto);
  border-radius: var(--r-pill);
}

/* ── کمکی ────────────────────────────────────────────────────────────── */

.stack-2 > * + * { margin-top: 8px; }
.stack-3 > * + * { margin-top: 12px; }
.stack-4 > * + * { margin-top: 16px; }
.stack-5 > * + * { margin-top: 24px; }
.stack-6 > * + * { margin-top: 32px; }

.two-col {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

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

@media (max-width: 900px) {
  .cardgrid,
  .cardgrid-2,
  .toolgrid {
    grid-template-columns: 1fr;
  }

  .footcols {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }

  .footcols .about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16.5px;
  }

  .sitenav {
    display: none;
  }

  .menu-btn {
    display: inline-flex;
  }

  /* روی موبایل فقط خبرِ انتشار می‌ماند؛ لینک‌های اعتماد به پاصفحه واگذار
     می‌شوند، وگرنه طبقهٔ بالا افقی اسکرول می‌خواهد. */
  .topbar .row a:not(.keep) {
    display: none;
  }

  .topbar .end {
    margin-inline: auto;
  }

  .topbar .end a {
    display: inline;
  }

  .sitenav.open {
    position: absolute;
    inset-inline: 12px;
    top: 100%;
    display: grid;
    gap: 2px;
    padding: 10px;
    background: var(--surface);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-2);
    z-index: 5;
  }

  .sitenav.open a {
    padding: 12px 14px;
  }

  .sitenav.open a[aria-current]::after {
    display: none;
  }

  .head-cta {
    padding: 0 16px;
    font-size: 13.5px;
  }

  .card {
    padding: 24px 20px;
    border-radius: var(--r-m);
  }

  .cta {
    padding: 26px 22px;
    border-radius: var(--r-m);
  }

  .keygrid {
    grid-template-columns: 1fr;
  }

  .tier {
    padding: 24px 20px;
  }

  .post-hero .body {
    padding: 4px 6px 10px;
  }

  /* جدول روی ۳۶۰ به ردیف کارتی تبدیل می‌شود: نه اسکرول افقی صفحه،
     نه فشردنِ ستون تا جایی که نام غذای بلند بشکند. */
  table.data thead,
  table.portions thead {
    display: none;
  }

  table.data tbody tr,
  table.portions tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 14px;
    padding-block: 14px;
    border-top: 1px solid var(--rule);
  }

  table.data td,
  table.portions td {
    padding: 0;
    border: 0;
  }

  table.data td.name,
  table.portions td.p-name {
    grid-column: 1 / -1;
  }

  table.data td[data-label]::before,
  table.portions td[data-label]::before {
    content: attr(data-label) " ";
    font-size: 12.5px;
    color: var(--ink-3);
  }

  table.data td.v,
  table.portions td.p-kcal {
    justify-self: end;
  }

  table.portions td.p-gram {
    justify-self: start;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14.5px;
    color: var(--ink-3);
  }
}

@media (max-width: 520px) {
  table.barchart thead {
    display: none;
  }

  table.barchart tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    padding-block: 12px;
    border-top: 1px solid var(--rule);
  }

  table.barchart td {
    padding: 0;
  }

  table.barchart .name {
    width: auto;
    grid-column: 1 / -1;
    white-space: normal;
  }

  table.barchart .v {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}