/* =========================================================
   بخش «توضیحات اضافه» — متن بلند و جدول مقایسه‌ی پلن‌ها.

   تم کهکشانی، با همان زبان صفحه اصلی: سحابی‌های کم‌رنگ پشت، یک
   صورت فلکی، و ستاره‌هایی که با همان توکن --star رنگ می‌گیرند.
   هیچ رنگ خامی اینجا نیست — همه از پالت می‌آید، پس حالت روشن
   «جوهر روی کاغذ» می‌ماند و حالت تیره «فضا».
   ========================================================= */

.xtra{
  position:relative;
  margin-block-start:var(--s-8);
  padding:var(--s-8) var(--s-5) var(--s-7);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  overflow:hidden;
  isolation:isolate;
}

/* ── آسمان پشت بخش ─────────────────────────────────────────
   z-index منفی و isolation روی والد: سحابی‌ها پشت محتوا می‌مانند
   بدون اینکه از کادر بخش بیرون بزنند. */
.xtra__sky{ position:absolute; inset:0; z-index:-1; pointer-events:none; }

.xtra__neb{
  position:absolute; border-radius:50%;
  filter:blur(60px);
  opacity:var(--xtra-neb, .28);
}
.xtra__neb--a{
  inline-size:52%; aspect-ratio:1; inset-block-start:-18%; inset-inline-end:-12%;
  background:radial-gradient(circle, var(--violet), transparent 68%);
}
.xtra__neb--b{
  inline-size:44%; aspect-ratio:1; inset-block-end:-16%; inset-inline-start:-10%;
  background:radial-gradient(circle, var(--cyan), transparent 68%);
}

/* در حالت روشن سحابی باید فقط یک ته‌رنگ باشد؛ همان مقدار روی سفید
   لکه‌ی رنگی می‌سازد و متن را کم‌کنتراست می‌کند. */
:root, :root[data-theme="light"]{ --xtra-neb:.16; }
:root[data-theme="dark"]{ --xtra-neb:.34; }

.xtra__cst{
  position:absolute; inset-block-start:var(--s-4); inset-inline:0;
  inline-size:100%; block-size:auto; opacity:.5;
}

.xtra .section-head{ margin-block-end:var(--s-6); }

/* ── انتخابگر ستون (فقط موبایل) ──────────────────────────── */
.cmp__pick{
  display:none;
  gap:var(--s-2);
  margin-block-end:var(--s-3);
  flex-wrap:wrap;
  justify-content:center;
}
.cmp__pickbtn{
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  font:inherit; font-size:var(--t-sm); font-weight:700;
  padding:.5em 1.1em;
  border-radius:var(--r-full);
  cursor:pointer;
}
.cmp__pickbtn.is-on{
  border-color:color-mix(in oklch, var(--violet) 55%, transparent);
  background:color-mix(in oklch, var(--violet) 14%, transparent);
}

/* ── جدول مقایسه ─────────────────────────────────────────── */
.xtra__tablewrap{
  margin-block-end:var(--s-6);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
}

.cmp{
  inline-size:100%;
  border-collapse:collapse;
  font-size:var(--t-sm);
}

.cmp th, .cmp td{
  padding:.85em 1em;
  text-align:center;
  border-block-end:1px solid var(--line);
  vertical-align:middle;
}

.cmp thead th{
  position:sticky; inset-block-start:0;
  background:var(--surface-2);
  font-weight:900; font-size:var(--t-base);
  border-block-end:1px solid var(--line);
}

/* ستون اول لنگر جدول است: راست‌چین و چسبیده، تا موقع اسکرول افقی
   معلوم بماند هر ردیف درباره‌ی چیست. */
.cmp__rowhead{
  position:sticky; inset-inline-start:0;
  text-align:start; font-weight:700;
  background:var(--surface);
  z-index:1;
}
.cmp thead .cmp__rowhead{ background:var(--surface-2); z-index:2; }

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td{ border-block-end:0; }

.cmp tbody tr:hover th,
.cmp tbody tr:hover td{ background:color-mix(in oklch, var(--violet) 5%, transparent); }

.cmp__yes svg, .cmp__no svg{
  inline-size:1.15rem; block-size:1.15rem;
  fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
.cmp__yes{ color:var(--emerald); }
.cmp__no{ color:var(--text-muted); opacity:.55; }
.cmp__yes svg, .cmp__no svg{ stroke:currentColor; }

/* ── متن بلند ──────────────────────────────────────────────
   عرض خط عمداً محدود است. متنی که تا لبه‌ی صفحه کشیده شود روی
   دسکتاپ خوانده نمی‌شود، هرچقدر هم خوب نوشته شده باشد.

   کنارِ آغازِ متن (سمت راست) یک «ریسمان صورت فلکی» می‌گذاریم:
   یک نخِ مویی عمودی که از بالا تا پایینِ متن کشیده شده، و روی آن
   سرِ هر بلوک یک ستاره نشسته است — همان ستاره‌ی چهارپرِ --star-mask
   که در fan__cta-star و uc__fact-star و prose h3 مقاله هم هست.

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

   عرضِ ستون را هم به اندازه‌ی همان ناودان زیاد می‌کنیم تا خودِ متن
   دقیقاً همان ۷۰ نویسه‌ی قبلی بماند و ریتمش دست‌نخورده باشد. */
.xtra__prose{
  --pm-gutter:1.75rem;                  /* ناودانِ نشانه‌ها */
  --pm-bead:1.375rem;                   /* قطرِ حبابِ شیشه‌ای سرتیترها */
  --pm-star-h:.6875rem;                 /* ستاره‌ی سرتیتر */
  --pm-star-p:.5rem;                    /* ستاره‌ی پاراگراف */
  --pm-accent:var(--accent, var(--violet));

  position:relative;
  max-inline-size:calc(70ch + var(--pm-gutter));
  margin-inline:auto;
  padding-inline-start:var(--pm-gutter);
  line-height:1.95;
}

/* نخِ ریسمان. همان کاری که .cst__link در صورت فلکی می‌کند: خطی که
   ستاره‌ها را به هم وصل می‌کند و خودش تقریباً دیده نمی‌شود. دو سرش
   محو می‌شود تا مثل خط‌کش شروع و تمام نشود. */
.xtra__prose::before{
  content:'';
  position:absolute; pointer-events:none;
  inset-block:0;
  inset-inline-start:calc(var(--pm-gutter) / 2 - .5px);
  inline-size:1px;
  /* محوشدگی با طولِ ثابت، نه درصد: بالا دقیقاً پای اولین ستاره جان
     می‌گیرد و پایین، بعد از آخرین ستاره، آرام تمام می‌شود — مستقل از
     اینکه متن کوتاه باشد یا بلند. */
  background:linear-gradient(to bottom,
    transparent 0,
    color-mix(in oklch, var(--pm-accent) 30%, transparent) 13px,
    color-mix(in oklch, var(--pm-accent) 30%, transparent) calc(100% - 64px),
    transparent 100%);
}

.xtra__prose h3{
  position:relative;
  margin-block:var(--s-5) var(--s-2);
  font-size:var(--t-lg); font-weight:900;
}

/* حبابِ شیشه‌ای سرتیتر — از همان --uc-glass / --uc-glass-line که
   کارت‌های uc__fact و پنل‌های مقاله رویش ساخته شده‌اند، با یک ته‌رنگِ
   accent داخلش. چون نیمه‌شفاف است، نخِ ریسمان از پشتش رد می‌شود؛
   دانه‌ای روی نخ، نه لکه‌ای رویش. */
.xtra__prose > h3::before{
  content:'';
  position:absolute;
  inline-size:var(--pm-bead); block-size:var(--pm-bead);
  inset-inline-start:calc((var(--pm-gutter) + var(--pm-bead)) / -2);
  inset-block-start:calc((1.5em - var(--pm-bead)) / 2);   /* h1..h3 سراسری: line-height 1.5 */
  inset-block-start:calc((1lh - var(--pm-bead)) / 2);     /* جایی که lh هست، دقیق‌تر */
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,
      color-mix(in oklch, var(--pm-accent) 26%, transparent),
      color-mix(in oklch, var(--pm-accent) 5%, transparent) 72%),
    color-mix(in srgb, var(--uc-glass) 60%, transparent);
  border:1px solid color-mix(in oklch, var(--pm-accent) 32%, var(--uc-glass-line));
  box-shadow:0 0 16px color-mix(in oklch, var(--pm-accent) 16%, transparent);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
}

/* و ستاره‌ی داخلش. */
.xtra__prose > h3::after{
  content:'';
  position:absolute;
  inline-size:var(--pm-star-h); block-size:var(--pm-star-h);
  inset-inline-start:calc((var(--pm-gutter) + var(--pm-star-h)) / -2);
  inset-block-start:calc((1.5em - var(--pm-star-h)) / 2);
  inset-block-start:calc((1lh - var(--pm-star-h)) / 2);
  background:var(--pm-accent);
  -webkit-mask:var(--star-mask) center / contain no-repeat;
          mask:var(--star-mask) center / contain no-repeat;
  filter:drop-shadow(0 0 5px color-mix(in oklch, var(--pm-accent) 55%, transparent));
}

.xtra__prose p{ position:relative; margin-block:0 var(--s-3); }

/* پاراگراف همان ستاره را می‌گیرد، اما کوچک‌تر و کم‌جان‌تر و بدون حباب.
   سلسله‌مراتب از اندازه و شفافیت می‌آید، نه از دو شکلِ بی‌ربط. */
.xtra__prose > p:not(:empty)::before{
  content:'';
  position:absolute;
  inline-size:var(--pm-star-p); block-size:var(--pm-star-p);
  inset-inline-start:calc((var(--pm-gutter) + var(--pm-star-p)) / -2);
  inset-block-start:calc((1.95em - var(--pm-star-p)) / 2);
  inset-block-start:calc((1lh - var(--pm-star-p)) / 2);
  background:var(--pm-accent);
  opacity:.55;
  -webkit-mask:var(--star-mask) center / contain no-repeat;
          mask:var(--star-mask) center / contain no-repeat;
  filter:drop-shadow(0 0 4px color-mix(in oklch, var(--pm-accent) 40%, transparent));
}

.xtra__prose ul{ margin-block:0 var(--s-3); padding-inline-start:1.4em; }
.xtra__prose li{ margin-block-end:.4em; }

/* پیوندهای داخل متن دست‌نخورده می‌مانند؛ نشانه‌ها absolute هستند و
   بیرونِ جریانِ متن، پس نه ترازِ خط عوض می‌شود نه فاصله‌ی سطرها. */

/* ── موبایل: یک ستون در هر لحظه ────────────────────────────
   اسکرول افقی روی جدول مقایسه بدترین حالت است — کاربر نمی‌داند چند
   ستون دیگر مانده و برای مقایسه‌ی دو پلن باید مدام جلو و عقب برود.
   زیر ۷۰۰px فقط ستون انتخاب‌شده نمایش داده می‌شود، پس نه اسکرول
   افقی لازم است نه سطر شکسته.

   ستون‌ها با nth-child پنهان می‌شوند و data-col روی ظرف تعیین می‌کند
   کدام بماند؛ JS فقط همان یک اتریبیوت را عوض می‌کند. */
@media (max-width: 700px){
  .cmp__pick{ display:flex; }

  .cmp th, .cmp td{ padding:.7em .8em; }

  .cmp th:not(:first-child),
  .cmp td:not(:first-child){ display:none; }

  .xtra__tablewrap[data-col="1"] :is(th,td):nth-child(2),
  .xtra__tablewrap[data-col="2"] :is(th,td):nth-child(3),
  .xtra__tablewrap[data-col="3"] :is(th,td):nth-child(4),
  .xtra__tablewrap[data-col="4"] :is(th,td):nth-child(5),
  .xtra__tablewrap[data-col="5"] :is(th,td):nth-child(6){ display:table-cell; }

  .cmp__rowhead{ position:static; }
}

@media (max-width: 600px){
  .xtra{ padding:var(--s-6) var(--s-3) var(--s-5); }

  /* ناودان روی موبایل گران است — هر پیکسلش از عرضِ خواندنی کم می‌کند.
     نشانه‌ها می‌مانند، فقط جمع‌وجورتر. */
  .xtra__prose{
    --pm-gutter:1.4rem;
    --pm-bead:1.125rem;
    --pm-star-h:.5625rem;
    --pm-star-p:.375rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .xtra__cst .cst__star use{ animation:none; }
}

/* ── جا رزرو کردن برای صحنه‌ی خورشید و ماه ──────────────────
   #orbitSky یک <svg> خالی است که product-scenes.js بعداً پرش
   می‌کند. تا آن لحظه ارتفاعش صفر است و وقتی محتوا می‌آید ۳۱۰
   پیکسل باز می‌شود — یعنی هرچه پایین‌ترش هست هل می‌خورد.

   اندازه‌گیری شده: همین یک اتفاق تنها منبع CLS صفحه محصول بود
   (۰٫۱۱۴۵ از ۰٫۱۱۴۵).

   نسبت از viewBox خودِ svg می‌آید (۴۸۰×۴۱۵)، پس کادر از اولین
   پینت همان اندازه‌ای است که بعداً پر می‌شود. */
.orbit__sky{ aspect-ratio: 480 / 415; block-size: auto; }