/* ──────────────────────────────────────────────────────────────────────────
 * «شورتس» — پخش‌کنندهٔ عمودیِ تمام‌قد (Round SH · SH-3.2 · طراحی §۴٫۲).
 *
 * قانونِ جهت (docs/14-FRONTEND-AND-DESIGN.md): **متن RTL، کنترل LTR.** ریشه `dir="rtl"`
 * است و فقط کانتینرهای کنترل (`.amsh__controls`, `.amsh__nav`, نوارِ پیشرفت) `dir="ltr"`
 * می‌گیرند — چون ترتیبِ فضاییِ دکمه‌ها و ریاضیِ نوار جهت‌مندند، نه زبان‌مند.
 *
 * توکن‌ها از `tokens.css` می‌آیند (ریشه کلاسِ `amaudio` هم دارد ⇒ داخلِ اسکوپِ توکن است).
 * شیتِ پی‌وال عمداً هیچ استایلی این‌جا ندارد: همان کامپوننتِ `.ampod__lockov`ِ
 * `podcasts.css` است، فقط با قلابِ `.amsh__lock` برای تست/E2E.
 * ────────────────────────────────────────────────────────────────────────── */

.amsh{
  position:relative;
  font-family:var(--font-ui);
  background:#000;
  color:#fff;
  /* ارتفاعِ ظرف: تمام‌صفحه منهای نوارِ پایینِ اپ. `dvh` روی موبایل نوارِ آدرس را حساب می‌کند.
     ⚠ این فقط **مقدارِ اولیه** است؛ `shorts.js` (fitBottomBar) بلافاصله ارتفاعِ واقعیِ نوار را
     اندازه می‌گیرد و همین متغیر را بازنویسی می‌کند. عددِ حدسی یک‌بار باعث شد دکمهٔ CTA زیرِ
     نوار بیفتد و کلیک‌ناپذیر شود (آزمونِ مرورگر ۲۰۲۶-۰۸-۲۳). */
  --amsh-nav:88px;
  --amsh-h:calc(100vh - var(--amsh-nav));
  /**
   * SH-P1 — ریاضیِ «صحنه» (ستونِ ویدیو)، حالا **یکسان در هر عرضی**.
   *   --amsh-avail  : ارتفاعی که واقعاً به ستون می‌رسد (روی دسکتاپ منهای ردیفِ ثابتِ چیپ‌ها)
   *   --amsh-colmax : سقفِ پهنای ستون (فقط دسکتاپ؛ روی موبایل تمامِ عرض)
   *   --amsh-col    : پهنای ستون = کوچک‌ترینِ (تمامِ عرض، سقف، ارتفاعِ در دسترس × ۹/۱۶)
   * چون پهنا از همان ارتفاع مشتق می‌شود، `aspect-ratio:9/16`ِ ستون هرگز به `max-height`
   * نمی‌خورد ⇒ قابِ ۹:۱۶ **دقیقاً** ستون را پر می‌کند و نوارِ سیاهِ بالا/پایینِ داخلِ
   * پخش‌کننده صفر می‌شود (نقصِ ~۳۲px روی ۳۹۰×۸۴۴، داوریِ بصریِ ۲۰۲۶-۰۸-۲۷).
   * نه کشیدگی، نه بریدنِ زیرنویسِ سوخته: `object-fit:contain` دست‌نخورده می‌مانَد و چون
   * ستون هم‌قوارهٔ قاب است، contain و cover یک نتیجه می‌دهند.
   */
  --amsh-avail:var(--amsh-h);
  --amsh-colmax:100%;
  --amsh-col:min(100%, var(--amsh-colmax), calc(var(--amsh-avail) * 9 / 16));
  height:var(--amsh-h);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
}
@supports (height:100dvh){ .amsh{ --amsh-h:calc(100dvh - var(--amsh-nav)); } }

/* ── ✕ِ شناور (SH-F1، داوریِ مالک ۲۰۲۶-۰۸-۲۷) ────────────────────────────── *
 * جایگزینِ نوارِ افقیِ «خانه» که مالک «زشت و آماتور» خواندش. گوشهٔ **چپ‌بالا** — عمداً
 * روبه‌روی ریلِ کنش‌ها که لبهٔ راست است، تا هیچ‌وقت با هم اشتباه/هم‌پوشان نشوند.
 * `left` **فیزیکی** است نه `inset-inline-start`: با ریشهٔ RTL دومی راست می‌افتاد و
 * می‌رفت زیرِ ریل. هدفِ لمس ۴۴px (کفِ توصیه‌شده)، آگاه از safe-area.
 */
.amsh__close{
  position:absolute; z-index:9;
  /* SH-P1 (nit5) — لبهٔ افقی همیشه لبهٔ **صحنه** است، نه لبهٔ پنجره: به‌محضِ این‌که ستونِ
     ویدیو باریک‌تر از ریشه شود (تبلت به بالا) ✕ با آن جابه‌جا می‌شود. روی گوشی
     `--amsh-stage-x` صفر است ⇒ دقیقاً همان `left:10px`ِ قبلی. عمود در بلوکِ ≥۸۸۰px. */
  left:calc(var(--amsh-stage-x, 0px) + 10px); top:calc(8px + env(safe-area-inset-top, 0px));
  width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,16,28,.46); color:#fff;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 2px 14px rgba(0,0,0,.28);
  transition:background .16s ease-out, transform .16s ease-out;
}
/* ⚠ `display:flex`ِ بالا بر استایلِ پیش‌فرضِ مرورگر برای صفتِ [hidden] غلبه می‌کند — همان
   تلهٔ فلش‌های حذف‌شده. لازم است چون در ظرفِ اپ، وقتی میزبان ✕ِ خودش را دارد، `shorts.js`
   ✕ِ ما را `hidden` می‌کند تا دو ضربدر روی هم نیفتد (SH-R1). */
.amsh__close[hidden]{ display:none }
.amsh__close:hover{ background:rgba(12,16,28,.66) }
.amsh__close:active{ transform:scale(.92) }
.amsh__close:focus-visible{ outline:2px solid #fff; outline-offset:2px }

/**
 * ⚠ نوارِ بالای صفحهٔ **مستقل** پنهان می‌شود.
 * `/learn/s/<slug>/` را خودِ `shorts-feed.php` دیگر نمی‌سازد، ولی `/learn/?amtype=short`
 * را `includes/podcasts.php` می‌سازد که فایلِ این گروه **نیست** — پس تنها راهِ بی‌تداخل،
 * پنهان‌کردنش از همین‌جا با دو مسیرِ موازی است: `:has()` (بی‌پرش، مرورگرِ نو) و کلاسِ
 * `amsh-standalone` که `shorts.js` سرِ بوت روی `<body>` می‌گذارد (مرورگرِ قدیمی‌تر).
 * وقتی SH-x بعداً `podcasts.php` را باز کرد، بهتر است همان‌جا رندر نشود و این دو قاعده
 * برداشته شود.
 */
body.amsh-standalone .ampod__topbar{ display:none }
body:has(.amsh[data-chrome="standalone"]) .ampod__topbar{ display:none }

/* ── نوارِ چیپ‌های موضوع (بالای پخش‌کننده) ───────────────────────────────── */
.amsh__chips{
  flex:0 0 auto;
  display:flex; gap:8px; align-items:center;
  padding:10px 18px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  position:absolute; inset-inline:0; top:0; z-index:6;
  /**
   * SH-P1 (nit8) — لبه‌ها **محو** می‌شوند به‌جای بریدنِ خشکِ وسطِ کلمه. پهنای محو دقیقاً
   * برابرِ پدینگِ افقی است، پس چیپِ لبه در حالتِ سکون کاملاً تو-پُر دیده می‌شود و فقط
   * چیزی که واقعاً از قاب بیرون می‌زند رنگ می‌بازد. متقارن، چون ریل در RTL به چپ و در
   * LTR به راست سرریز می‌کند و ماسک نباید به `dir` گره بخورد.
   * ⚠ پس‌زمینهٔ گرادیانیِ قبلیِ همین نوار برداشته شد: حالا «اسکریمِ بالا»ی خودِ آیتم
   *   (پایین‌تر) پشتِ چیپ‌ها را تیره می‌کند. دو گرادیان روی هم یعنی همان نوارِ سیاهِ
   *   سنگینی که نباید ساخته شود.
   */
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.amsh__chips::-webkit-scrollbar{ display:none }
/**
 * روی ظرفِ مستقل، نوارِ چیپ‌ها یک **ردیف پایین‌تر** می‌نشیند تا هرگز زیرِ ✕ نرود.
 * چرا «پایین‌تر» و نه «فاصله از چپ»: نوارِ چیپ اسکرولِ افقی دارد و ریشه RTL است، پس
 * چیپ‌ها از راست شروع و به **چپ** سرریز می‌کنند — یعنی با هر فهرستِ بلندی، بالاخره از
 * زیرِ ✕ رد می‌شدند. جداییِ عمودی تنها تضمینِ قطعی در هر دیدگاهی است.
 */
.amsh[data-chrome="standalone"] .amsh__chips{ top:calc(54px + env(safe-area-inset-top, 0px)) }
.amsh__chips .amsh__chip{
  flex:0 0 auto; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.10);
  color:#fff; font:inherit; font-size:13px; font-weight:600; line-height:1;
  padding:8px 13px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
/**
 * چیپِ فعال — رنگش از **رجیستریِ وی‌کلاب** ارث می‌رسد (SH-R1، حکمِ ۳ِ مالک: «دسته‌بندی‌های
 * شورتس از دسته‌بندی‌های وی‌کلاب ارث‌بری کنه»). `--amsh-chip-c` را `shorts.js` از کلیدِ
 * `c`ِ همان رجیستری روی خودِ دکمه می‌گذارد؛ نبودنش ⇒ همان سفیدِ قبلی، پس «همه»/«دیده‌شده‌ها»
 * که در رجیستری نیستند دقیقاً مثلِ گذشته می‌مانند و هیچ رنگی اختراع نمی‌شود.
 */
.amsh__chips .amsh__chip.is-on{ background:#fff; color:#12172a; border-color:#fff }
.amsh__chips .amsh__chip.is-on.amsh__chip--c{
  background:var(--amsh-chip-c); border-color:var(--amsh-chip-c); color:#fff;
}
.amsh__chip:focus-visible{ outline:2px solid var(--dot,#F2674F); outline-offset:2px }

/* ── افوردنسِ پیمایشِ نوارِ چیپ — فقط اشاره‌گرِ درشت (F-SHR4P-n4b) ─────────── *
 * نقصِ ثبت‌شده: روی تبلتِ پهن ~۵ چیپ از ۱۸ تا دیده می‌شود، اسکرول‌بار پنهان است و
 * تنها نشانهٔ موجود همان محوِ ۱۸ پیکسلیِ ماسک است — که «قابلِ سوایپ بودن» را نمی‌گوید.
 *
 * روپوشِ `amsh__chipcue` یک **هم‌نیای** نوار است، نه فرزندش: فرزند همان `mask-image`ِ
 * نوار را می‌خورَد و دقیقاً روی لبه‌ای که باید دیده شود محو می‌شد (چراییِ کامل در
 * `assets/shorts.js`، تابعِ `syncChipCue`). مختصات و ارتفاعش را همان تابع می‌گذارد؛
 * این‌جا فقط ظاهر است.
 *
 * `data-side` را کلاینت از `direction`ِ زندهٔ نوار می‌سازد: ریشه RTL است ⇒ سرریز به
 * **چپ** ⇒ `start` (لبهٔ چپ، نشانهٔ «‹»). روی چیدمانِ LTR خودبه‌خود قرینه می‌شود.
 */
.amsh__chipcue{
  position:absolute; z-index:7; width:56px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;                 /* هرگز جلوی لمسِ خودِ چیپ را نمی‌گیرد */
  opacity:.96;
}
.amsh__chipcue[data-side="start"]{
  background:linear-gradient(to right, rgba(8,10,18,.62) 0, rgba(8,10,18,.28) 55%, rgba(8,10,18,0) 100%);
}
.amsh__chipcue[data-side="end"]{
  background:linear-gradient(to left, rgba(8,10,18,.62) 0, rgba(8,10,18,.28) 55%, rgba(8,10,18,0) 100%);
}
/* نشانه در CSS و نه در DOM: تزئینِ محض است، هیچ رشتهٔ رابطِ کاربری‌ای اضافه نمی‌کند. */
.amsh__chipcue::after{
  content:'‹';
  font-size:22px; line-height:1; font-weight:700;
  color:rgba(255,255,255,.92); text-shadow:0 1px 3px rgba(0,0,0,.55);
  transform:translateX(0);
}
.amsh__chipcue[data-side="end"]::after{ content:'›' }
@media (prefers-reduced-motion: no-preference){
  .amsh__chipcue::after{ animation:amsh-cue 1.9s ease-in-out infinite }
  .amsh__chipcue[data-side="end"]::after{ animation-name:amsh-cue-e }
}
@keyframes amsh-cue   { 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(-4px) } }
@keyframes amsh-cue-e { 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(4px) } }
/* کمربندِ دوم: روی اشاره‌گرِ **دقیق** هیچ‌چیزِ این نقشه رندر نمی‌شود (مسیرِ کارتِ ویترین). */
@media (pointer: fine){ .amsh .amsh__chipcue{ display:none } }
.amsh.is-deskonly > .amsh__chipcue{ display:none }

/* ── فیدِ اسنپ‌شونده ─────────────────────────────────────────────────────── */
.amsh__feed{
  /* فالبکِ مرورگرِ بی‌`aspect-ratio`: همان رفتارِ پیشین (ستون تمامِ ارتفاع، قاب لِتِرباکس). */
  flex:1 1 auto; width:100%;
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  outline:none;
}
.amsh__feed::-webkit-scrollbar{ display:none }
/**
 * SH-P1 — ستونِ **دقیقاً ۹:۱۶**، وسط‌چینِ افقی (align-items) و عمودی (margin:auto).
 * پشتِ `@supports` است چون بی‌`aspect-ratio` ارتفاعِ ستون صفر می‌شد و پخش‌کننده ناپدید.
 */
@supports (aspect-ratio: 9 / 16){
  .amsh__feed{
    flex:0 0 auto;
    margin:auto;
    width:var(--amsh-col);
    aspect-ratio:9 / 16;
    max-height:var(--amsh-avail);
  }
  /**
   * روی گوشی، باقی‌ماندهٔ ارتفاع **تماماً به بالا** می‌رود، نه نصف-نصف.
   * چرا: دو نوارِ ۳۲پیکسلیِ قرینه دقیقاً همان «لِتِرباکس»ی است که باید برود؛ ولی یک
   * نوارِ بالا که ✕ داخلش می‌نشیند «نوارِ ابزار» خوانده می‌شود و کفِ قاب می‌چسبد به
   * نوارِ پایینِ اپ — یعنی هیچ درزِ تیره‌ای بینِ ویدیو و نوار نمی‌مانَد.
   * روی دسکتاپ (≥۸۸۰) ستون بینِ ردیفِ چیپ‌ها و کف وسط‌چین می‌مانَد.
   */
  @media (max-width:879.98px){
    .amsh__feed{ margin-block:auto 0 }
  }
}

.amsh__item{
  position:relative;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex; align-items:center; justify-content:center;
  background:#000 center/cover no-repeat;
  overflow:hidden;
}
/* ⚠ پس‌زمینهٔ **شفاف** عمدی است (SH-F1): عنصرِ ویدیو تا پیش از اولین فریم یک مستطیلِ
   مشکی می‌کشید و روی پوسترِ آیتم می‌افتاد ⇒ همان «فلاشِ سیاه»ِ بینِ دو شورت. با شفاف‌بودنش،
   `background-image`ِ خودِ `.amsh__item` (پوستر، سرورـرندر) تا لحظهٔ اولین فریم دیده می‌شود. */
.amsh__video{
  width:100%; height:100%; object-fit:contain; background:transparent;
  display:block;
  opacity:0; transition:opacity .2s ease-out;
}
.amsh__item.has-frame .amsh__video{ opacity:1 }
/* قابِ منجمدِ پایانِ پیش‌نمایش: فریم می‌مانَد، ولی مات — «فریز + شیت» طراحی §۴٫۲/D7. */
.amsh__item.is-locked .amsh__video{ filter:blur(14px) brightness(.6); transform:scale(1.06) }

/* ── همپوشانِ روی ویدیو ─────────────────────────────────────────────────── *
 * ⚠ تغییرِ SH-F1 (۲۰۲۶-۰۸-۲۷): این همپوشان دیگر فلکس نیست. پیش‌تر ترتیبِ فضایی را
 * `flex` + `dir=rtl`ِ ریشه تعیین می‌کرد، پس ریلِ کنش‌ها **سمتِ چپ** می‌افتاد (اندازه‌گیریِ
 * زنده: x=14 روی دیدگاهِ ۳۹۰) — خلافِ آن‌چه مالک می‌خواهد و خلافِ یوتیوب/اینستاگرام.
 * حالا هر دو بلوک با مختصاتِ **فیزیکی** (`left`/`right`) می‌نشینند: ریل راست، متن چپ —
 * مستقل از `dir`. متن خودش RTL می‌مانَد (قانونِ جهت: *متن* زبان‌مند است، *چیدمان* نه).
 */
.amsh{
  /* پهنای رزروشدهٔ ریل: دکمهٔ ۴۲ + فاصله. متن هرگز زیرِ ریل نمی‌رود. */
  --amsh-rail:64px;
  /* ── R4-P (n3) — «گاردِ خوانایی» متن‌های **برهنه** ────────────────────────── *
   * کدام متن‌ها: آن‌هایی که بیرونِ هر دیسک/چیپ/پیلی روی خودِ قاب می‌نشینند — خطِ
   * عنوانِ پایین (`.amsh__title`) و نوشته‌های زیرِ دکمه‌های ریل (`.amsh__cnt`، که
   * برچسبِ «بازنشر» هم یکی از آن‌هاست). نمادهای داخلِ دیسک این مشکل را ندارند: خودِ
   * دیسک `rgba(0,0,0,.38)` + `backdrop-filter:blur(6px)` دارد.
   *
   * چرا سایهٔ تک‌لایهٔ پیشین کافی نبود (سنجهٔ زندهٔ ۱۴۰۵/۰۶/۱۲ روی ۱۴۴۰×۹۰۰، قابِ
   * **قفل‌شدهٔ** روشن): `0 1px 3px rgba(0,0,0,.6)` فقط ۳px پخش دارد، پس روی قابی که
   * زیرِ خودِ حروف روشن است لبهٔ حرف در یک‌دو پیکسل حل می‌شود و متن «می‌شوید».
   *
   * چرا این شکل و نه جعبه/بلور: قانونِ همین راند «هم‌خانوادهٔ اسکریم‌ها، بی‌جعبهٔ سنگین».
   * پس همان الفبای اسکریم به‌کار می‌رود — سیاهِ شفاف با آلفای نزولی — ولی به‌جای یک
   * مستطیل، سه لایهٔ **هم‌مرکزِ خودِ حرف**:
   *   ۱) `0 1px 2px α.80`  — کنتراستِ تیزِ لبهٔ حرف (خوانایی در اندازهٔ کوچک)
   *   ۲) `0 1px 6px α.55`  — هالهٔ نزدیک، پیوستهٔ همان لبه
   *   ۳) `0 0 16px α.42`   — همان «اسکریمِ محوشونده»، ولی به قدِ یک کلمه نه یک نوار
   * هیچ لبهٔ دیده‌شدنی نمی‌سازد (سه گرادیانِ شعاعیِ نرم روی هم)، و وسطِ قاب دست‌نخورده
   * می‌مانَد — دقیقاً همان قاعده‌ای که `.amsh__scrim--*` و `.amsh__rail--right::before`
   * از آن پیروی می‌کنند.
   *
   * توکن است نه مقدارِ تکراری: تنها یک جا برای عوض‌کردن، و آزمونِ ایستا هم می‌تواند
   * «هر متنِ برهنه‌ای از همین توکن استفاده می‌کند» را بسنجد نه سه رشتهٔ جدا. */
  --amsh-textguard:0 1px 2px rgba(0,0,0,.80), 0 1px 6px rgba(0,0,0,.55), 0 0 16px rgba(0,0,0,.42);
}
.amsh__overlay{
  position:absolute; inset:0; pointer-events:none;
}
.amsh__overlay > *{ pointer-events:auto }

/* ── اسکریم‌ها (SH-P1، nit2) ─────────────────────────────────────────────── *
 * دو گرادیانِ **نرم و محوشونده** — نه نوارِ سیاه. بالا برای ردیفِ چیپ‌ها، پایین برای
 * عنوان/برچسب/CTA و ریلِ کنش‌ها. روی قابِ روشن یا قابی که خودش زیرنویسِ سوخته دارد،
 * همین‌قدر کافی است که متنِ سفید بخوانَد و وسطِ قاب دست‌نخورده بمانَد.
 * ⚠ `pointer-events:none` **پس از** `.amsh__overlay > *` می‌آید (اختصاصیتِ برابر،
 *   ترتیبِ منبع برنده): وگرنه این دو مستطیل هر دو-لمس و «پیک» را می‌بلعیدند.
 */
.amsh__scrim{ position:absolute; inset-inline:0; z-index:0 }
.amsh__scrim--top{
  top:0; height:min(30%, 176px);
  background:linear-gradient(180deg,rgba(0,0,0,.60) 0%,rgba(0,0,0,.26) 48%,rgba(0,0,0,0) 100%);
}
.amsh__scrim--bottom{
  bottom:0; height:min(50%, 320px);
  background:linear-gradient(0deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.32) 40%,rgba(0,0,0,0) 100%);
}
.amsh__scrim{ pointer-events:none }

/* متن — پایین-چپ (فیزیکی)، ولی خودِ نوشته RTL. */
.amsh__text{
  position:absolute; z-index:2;
  left:14px;
  right:var(--amsh-rail);
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  min-width:0;
}
.amsh__title{
  margin:0 0 8px; font-size:15px; font-weight:700; line-height:1.7; color:#fff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  /* R4-P (n3) — گاردِ خوانایی؛ چراییِ کامل کنارِ تعریفِ `--amsh-textguard` بالای فایل. */
  text-shadow:var(--amsh-textguard, 0 1px 3px rgba(0,0,0,.6));
}
.amsh__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px }
.amsh__tag{
  border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.32); color:#fff;
  font:inherit; font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; cursor:pointer;
}
.amsh__cta{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:#12172a; font-size:13px; font-weight:800;
  padding:9px 15px; border-radius:999px; text-decoration:none;
}
.amsh__cta:hover{ color:#12172a; opacity:.92 }

/* کنترل‌ها — LTR (قانونِ جهت)، ستونِ عمودیِ چسبیده به لبهٔ **راستِ فیزیکی**. */
.amsh__controls{
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.amsh__rail--right{
  position:absolute; z-index:3;
  right:11px;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
}
/* ── R4-4 — اسکریمِ ریل (nit9) ──────────────────────────────────────────────── *
 * چرا اسکریمِ پایینی کافی نبود (سنجهٔ زنده روی ۳۹۰×۸۴۴): ریل `y 516..824` است ولی
 * `.amsh__scrim--bottom` بلندی‌اش `min(50%, 320px)` است و در ارتفاعِ سرِ ریل عملاً به
 * شفافیت رسیده — یعنی سه دکمهٔ بالاییِ ریل (لایک، هم‌رسانی، ⓘ) روی قابِ روشن سفیدِ
 * روی سفید می‌شدند. همان قاعدهٔ ظرافتِ اسکریمِ چیپ‌ها این‌جا هم برقرار است: **گرادیانِ
 * نرمِ محوشونده، نه مستطیلِ سیاه**؛ بیضیِ ملایمی که دقیقاً پشتِ ستونِ دکمه‌ها تیره است
 * و تا لبه‌ها به صفر می‌رسد، پس هیچ لبهٔ دیده‌شدنی نمی‌سازد.
 * `z-index:-1` عمدی است: شبه‌عنصرِ موقعیت‌دار وگرنه **روی** خودِ دکمه‌ها می‌افتاد؛ با ۱−
 * داخلِ همان بافتِ ترکیبِ ریل (z=3) زیرِ دکمه‌ها و بالای ویدیو می‌مانَد.
 * `pointer-events:none` هم لازم است، چون `.amsh__overlay > *` رویدادها را روشن می‌کند. */
.amsh__rail--right::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-16px -14px -16px -22px;
  background:radial-gradient(58% 52% at 74% 50%,
    rgba(0,0,0,.36) 0%, rgba(0,0,0,.20) 46%, rgba(0,0,0,.07) 74%, rgba(0,0,0,0) 100%);
}
.amsh__cbtn{
  width:42px; height:42px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.38); color:#fff;
  display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.amsh__cbtn svg{ width:22px; height:22px }
.amsh__cbtn.is-on{ color:var(--like,#E0483B) }
.amsh__cbtn b{ display:none }
/* جای‌گاهِ نام‌دارِ SH-11 (نظرها). وقتی چیزی داخلش نباشد **هیچ جایی نمی‌گیرد** — یعنی نه
   دکمهٔ مرده‌ای دیده می‌شود نه فاصلهٔ خالیِ بی‌دلیل. (تصمیمِ مالک ۲۰۲۶-۰۸-۲۳) */
.amsh__rail-slot:empty{ display:none }
.amsh__rail-slot{ display:flex; flex-direction:column; align-items:center; gap:14px }
.amsh__cbtn:focus-visible{ outline:2px solid #fff; outline-offset:2px }

/* ── دکمه + بجِ شمار ────────────────────────────────────────────────────────
 * SH-11 شمار را فقط به «نظرها» داد. داوریِ بصریِ ۲۰۲۶-۰۸-۲۷ (شاتِ D5b): قلبِ بی‌عدد
 * کنارِ نظرهای عددْدار ناتمام دیده می‌شد ⇒ SH-P1 همان الگو را به **لایک** هم داد.
 * `share`/`info` عمداً بی‌شمار می‌مانند: هم‌رسانی عددِ قابلِ‌اتکایی ندارد (فقط نیت را
 * می‌شمارد) و «اطلاعات» اصلاً شمارنده نیست. */
.amsh__cbtnwrap{ display:flex; flex-direction:column; align-items:center; gap:3px }
.amsh__cnt{
  font-size:11px; font-weight:800; color:#fff; line-height:1;
  /* R4-P (n3) — همان گاردِ عنوان. این عنصر هم شمارِ لایک/نظر است و هم برچسبِ
     «بازنشر» (`.amsh__rplabel` روی همین کلاس می‌نشیند)، پس یک قاعده هر دو را
     می‌پوشاند و هیچ متنِ برهنه‌ای از قلم نمی‌افتد. */
  text-shadow:var(--amsh-textguard, 0 1px 3px rgba(0,0,0,.6));
}
/* ── «بازنشر» روی ریل (R3-6) ────────────────────────────────────────────────
 * زیرِ این دکمه **عدد** نمی‌نشیند بلکه یک واژه (برچسبِ پنلیِ `repost_label`)، پس همان
 * جایگاهِ `.amsh__cnt` را می‌گیرد ولی دو تفاوتِ لازم دارد: جهتِ متن باید RTL باشد (ریل
 * `dir="ltr"` است — قاعدهٔ جهتِ کنترل‌ها) و واژه نباید بشکند و ریل را پهن کند.
 * دکمه خودش کمی دعوت‌کننده‌تر از بقیهٔ ریل است (حلقهٔ نازکِ شیشه‌ای + ضربانِ یک‌بارهٔ
 * ورود): خواستهٔ صریحِ مالک «دکمه‌ای که مردم واقعاً بزنند» — بی‌آنکه از خانوادهٔ بصریِ
 * ریل بیرون بزند. `prefers-reduced-motion` ضربان را کامل خاموش می‌کند. */
.amsh__rplabel{ direction:rtl; white-space:nowrap; letter-spacing:-.1px }
/* ── ⚠ شیتِ اپ باید **روی** پخش‌کنندهٔ تمام‌صفحه بنشیند (نقصِ واقعی، عکسِ r36-03) ──────
 * دکمهٔ «بازنشر» کامپوزرِ خودِ «وی‌کلاب» را باز می‌کند و آن کامپوزر `.sheet` با
 * `z-index:81` است (`app.php`)، در حالی که پخش‌کننده در حالتِ `html.amsh-fs` کلِ
 * ویوپورت را با لایه‌ای **بسیار** بالاتر می‌گیرد. نتیجه در مرورگر: شیت واقعاً باز می‌شد
 * (`#repostSheet.show` در DOM بود و تست هم سبز بود) ولی کاربر **هیچ چیز نمی‌دید** — فقط
 * توستِ «در حالِ آماده‌سازی…». دقیقاً همان کلاسِ «پی‌والِ نامرئی»ِ موجِ A، از درِ دیگر.
 *
 * قاعده این‌جاست و نه در `app.php`، چون شرط مالِ همین ماژول است: «تا وقتی پخش‌کننده
 * تمام‌صفحه است». ماژولِ خاموش ⇒ کلاسِ `amsh-fs` هرگز روی <html> نمی‌نشیند ⇒ این دو
 * گزاره بی‌اثرند و هیچ سطحِ دیگری از اپ لمس نمی‌شود.
 * عمداً `.sheet` (نه فقط `#repostSheet`): شیتِ **ورودِ** مهمان هم از همین مسیر باز
 * می‌شود و اگر نامرئی بماند، مهمان در بن‌بست می‌ماند. */
html.amsh-fs #scrim.show{ z-index:2147483200 }
html.amsh-fs .sheet.show{ z-index:2147483201 }
.amsh__rpbtn{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);
  border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,.25);
  animation:amshRpIn .5s ease-out both;
}
.amsh__rpbtn:hover{ background:rgba(255,255,255,.26) }
.amsh__rpbtn.is-busy{ opacity:.55; pointer-events:none }
@keyframes amshRpIn{ 0%{ transform:scale(.82); opacity:0 } 60%{ transform:scale(1.06) } 100%{ transform:scale(1); opacity:1 } }
@media (prefers-reduced-motion: reduce){ .amsh__rpbtn{ animation:none } }

/* ── شیتِ نظرها (SH-11) — کف‌صفحه‌ای، محتوایش کامپوننتِ podcasts.css است ─────────────
   (`.ampod__cmt*`, `.ampod__composer`, `.ampod__cinput`, `.ampod__csend`, `.ampod__none`,
   `.ampod__mine`, `.ampod__chint`) — این‌جا فقط چارچومِ خودِ شیت استایل می‌گیرد. */
.amsh__cmtov{
  position:fixed; inset:0; z-index:2147483000; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(10,14,25,.55); padding:0; font-family:var(--font-ui,Vazirmatn,Tahoma,sans-serif);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.amsh__cmtsheet{
  width:100%; max-width:460px; max-height:78vh; background:#fff; color:var(--ink,#1b2233);
  border-radius:18px 18px 0 0; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 -14px 44px rgba(0,0,0,.4);
  /* SH-P1 (nit6) — کفِ شیت هم به «چانهٔ» گوشی احترام می‌گذارد هم یک کفِ معقولِ خودش
     دارد: روی گوشی‌های بی‌safe-area مقدارِ `env()` صفر بود و دکمهٔ ارسال دقیقاً روی لبهٔ
     صفحه می‌نشست. `max()` هر دو را با هم تضمین می‌کند. */
  padding-bottom:max(12px, env(safe-area-inset-bottom,0px));
  animation:amsh-cmt-in .22s ease-out;
}
@keyframes amsh-cmt-in{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
.amsh__cmthandle{
  width:36px; height:4px; border-radius:99px; background:var(--line,rgba(0,0,0,.16));
  margin:9px auto 0; flex:0 0 auto;
}
.amsh__cmthead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px 10px; border-bottom:1px solid var(--line,rgba(0,0,0,.08)); flex:0 0 auto;
}
.amsh__cmthead b{ font-size:14px; font-weight:800; color:var(--ink,#1b2233) }
.amsh__cmtclose{
  width:28px; height:28px; border-radius:50%; border:0; cursor:pointer;
  background:var(--surface-2,rgba(0,0,0,.06)); color:var(--ink-3,#5b6377); font-size:18px; line-height:1;
}
/* هر دو کلاس عمداً: `.ampod__cmts` سقفِ ارتفاعِ خودش (۲۸۰px) را برای کارتِ بازِ پادکست
   می‌گذارد؛ این‌جا فضای واقعیِ شیت (max-height:78vh) باید حاکم باشد، پس با دو کلاس روی
   یک انتخابگر (اختصاصیتِ بالاتر از هر دو تک‌کلاس) این ستون را بازنویسی می‌کنیم. */
.amsh__cmtlist.ampod__cmts{ flex:1 1 auto; overflow-y:auto; max-height:none; padding:12px 16px }
.amsh__cmtfoot{ flex:0 0 auto; padding:0 16px 14px }
.amsh__cmtform.ampod__composer{ margin-top:0 }
.amsh__cmtlogin{
  display:block; text-align:center; padding:11px; border-radius:12px; text-decoration:none;
  background:var(--accent,#1E3A8A); color:#fff; font-weight:700; font-size:13.5px;
}
.amsh__cmtlogin:hover{ opacity:.9; color:#fff }

@media (prefers-reduced-motion: reduce){
  .amsh__cmtsheet{ animation:none }
}

/* ── شیتِ «ⓘ» (R4-2) — همان چارچومِ شیتِ نظرها، فقط محتوایش فرق دارد ──────────────
 * ریشه/چارچوم/دستگیره/سر/✕/انیمیشن/سوایپ همه از بلوکِ بالا می‌آیند (`.amsh__cmtov` و
 * `.amsh__cmtsheet` روی همان گره‌اند)، پس این‌جا **هیچ‌کدامشان تکرار نشده** — دقیقاً همان
 * الگویی که `.amsh__lock`/`.amsh__login` برای شیتِ پی‌وال/ورود به کار بردند. تنها چیزی که
 * تازه است، سطرهای «برچسب / مقدار» و ردیفِ کنش‌هاست. */
/* `min-height:0` لازم است: والد فلکسِ ستونی با `overflow:hidden` است و بی این، آیتمِ
   فلکس زیرِ محتوای بلند کوچک نمی‌شود و اسکرول هرگز فعال نمی‌شد. */
.amsh__infobody{ flex:1 1 auto; min-height:0; padding:14px 16px 4px; overflow-y:auto }
.amsh__infoh{
  margin:0 0 12px; font-size:15.5px; font-weight:800; line-height:1.9; color:var(--ink,#1b2233);
}
.amsh__inforow{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; border-top:1px solid var(--line,rgba(0,0,0,.07));
}
.amsh__infok{ flex:0 0 auto; min-width:64px; font-size:12.5px; font-weight:700; color:var(--ink-3,#5b6377) }
.amsh__infov{ flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:700; color:var(--ink,#1b2233) }
/* چیپ‌های دسته داخلِ شیت: **همان** `.amsh__tag` است ولی روی زمینهٔ روشنِ شیت، پس فقط
   رنگ‌هایش وارونه می‌شود — نه یک کامپوننتِ چیپِ سوم. */
.amsh__inforow--cats .amsh__infov{ display:flex; flex-wrap:wrap; gap:6px }
.amsh__infocat.amsh__tag{
  border-color:var(--line,rgba(0,0,0,.14)); background:var(--surface-2,rgba(0,0,0,.05));
  color:var(--ink,#1b2233);
}
.amsh__infocat.amsh__tag:hover{ background:var(--surface-3,rgba(0,0,0,.09)) }
.amsh__infoacts{ display:flex; flex-wrap:wrap; gap:9px; padding:14px 0 10px }
.amsh__infocopy{
  flex:1 1 auto; min-width:140px; padding:11px 16px; border:0; border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:700;
  background:var(--accent,#1E3A8A); color:#fff;
}
.amsh__infocopy:hover{ opacity:.9 }
.amsh__infocopy:active{ transform:scale(.98) }
/* CTAِ «ادامه‌اش را ببین» همان `.amsh__cta`ِ روی ویدیوست؛ این‌جا فقط از سفیدِ روی‌ویدیو
   به دکمهٔ کناریِ شیت تبدیل می‌شود (زمینهٔ شیت روشن است و سفید روی سفید دیده نمی‌شد). */
.amsh__infocta.amsh__cta{
  flex:1 1 auto; justify-content:center; min-width:140px; padding:11px 16px; border-radius:12px;
  background:var(--surface-2,rgba(0,0,0,.05)); color:var(--ink,#1b2233);
  border:1px solid var(--line,rgba(0,0,0,.12));
}
.amsh__infocta.amsh__cta:hover{ color:var(--ink,#1b2233); opacity:.88 }
@media (prefers-reduced-motion: reduce){
  .amsh__infocopy:active{ transform:none }
}

/* نوارِ پیشرفتِ نازکِ پایین — LTR (ریاضیِ (x-left)/width).
   SH-F1: پیش‌رانِ عرض از `width` به `transform:scaleX` رفت — روی لایهٔ ترکیب (GPU) اجرا
   می‌شود، پس با فریمِ ویدیو نرم جلو می‌رود به‌جای پرش‌های ۴-بار-در-ثانیهٔ `timeupdate`.
   `transform-origin:left` چون خودِ نوار `dir=ltr` است (ریاضیِ جهت‌مند). */
.amsh__bar{
  position:absolute; inset-inline:0; bottom:0; height:2.5px; z-index:4;
  background:rgba(255,255,255,.20);
}
.amsh__bar i{
  display:block; height:100%; width:100%; background:#fff;
  transform:scaleX(0); transform-origin:left center; will-change:transform;
}

/* ── انفجارِ قلبِ دو-لمس (SH-F1) — CSSِ خالص، بی‌دارایی/کتابخانهٔ تازه ───────── */
.amsh__burst{
  position:absolute; z-index:5; pointer-events:none;
  width:104px; height:104px; margin:-52px 0 0 -52px; color:#fff;
  animation:amsh-burst .72s cubic-bezier(.17,.89,.32,1.28) forwards;
}
.amsh__burst svg{ width:100%; height:100%; filter:drop-shadow(0 3px 10px rgba(0,0,0,.45)) }
@keyframes amsh-burst{
  0%   { opacity:0; transform:scale(.2) rotate(-12deg) }
  22%  { opacity:.96; transform:scale(1.08) rotate(4deg) }
  46%  { opacity:.96; transform:scale(.94) rotate(0deg) }
  100% { opacity:0; transform:scale(1.5) translateY(-26px) }
}

/* تپشِ لمسِ دکمه‌های ریل — بازخوردِ همان‌تیک، مستقل از شبکه. */
@keyframes amsh-tap{ 0%{ transform:scale(1) } 38%{ transform:scale(.84) } 100%{ transform:scale(1) } }
.amsh__cbtn.is-tap{ animation:amsh-tap .26s ease-out }
/* قلبِ لایک: هم رنگ عوض می‌کند هم یک تپشِ کوتاه (حالتِ خوش‌بینانه دیده شود). */
@keyframes amsh-liked{ 0%{ transform:scale(1) } 40%{ transform:scale(1.32) } 100%{ transform:scale(1) } }
.amsh__cbtn[data-act="like"].is-on svg{ fill:currentColor; animation:amsh-liked .34s ease-out }

/* «پیک»: نگه‌داشتن (۲×) ⇒ نوشته‌ها محو می‌شوند تا قاب دیده شود. */
.amsh__overlay, .amsh__bar{ transition:opacity .18s ease-out }
.amsh__item.is-peek .amsh__overlay{ opacity:.12 }
.amsh__item.is-peek .amsh__bar{ opacity:.35 }

/* ── توستِ بازخورد — یک‌سومِ پایینی، **بالای** بلوکِ عنوان (R4-5) ─────────────── *
 * SH-P1 (nit4) لنگر را به `top:62%` برد. سنجهٔ زندهٔ R4 روی ۳۹۰×۸۴۴ نشان داد آن عدد
 * دلبخواهی است و درست وسطِ صحنه می‌افتد: توست `y 502..544` و سرِ ریلِ کنش‌ها `y 516` —
 * یعنی هم «وسطِ صفحه» بود هم روی ریل. حالا هیچ درصدِ دلبخواهی نمانده:
 *   • **عمودی**: `--amsh-toast-b` را `anchorToast()`ِ `shorts.js` از ارتفاعِ **واقعیِ**
 *     بلوکِ عنوانِ آیتمِ فعال می‌سازد (+۱۰px درز)، با سقفِ `ارتفاعِ صحنه/۳ − ۲۰` تا مرکزِ
 *     توست همیشه در یک‌سومِ پایینی بمانَد. فالبکِ بی‌JS همان ۱۶۸px است.
 *   • **افقی**: از لبهٔ چپِ صحنه تا شروعِ ریل (`--amsh-rail`) — نه «وسطِ ریشه». پس روی
 *     هیچ عرضی زیرِ دکمه‌های ریل نمی‌رود، و `margin-inline:auto` روی جعبهٔ مقیدشده
 *     (CSS 2.1 §10.3.7 — همان ترفندِ وسط‌نشاندنِ ریشه در همین فایل) پیل را وسطِ همان
 *     نوار می‌نشاند بی‌آن‌که خودش سرتاسری شود.
 */
.amsh__toast{
  position:absolute; z-index:12; top:auto;
  left:calc(var(--amsh-stage-x, 0px) + 14px);
  right:calc(var(--amsh-stage-r, 0px) + var(--amsh-rail));
  bottom:calc(var(--amsh-toast-b, 168px) + env(safe-area-inset-bottom, 0px));
  width:max-content; max-width:100%; margin-inline:auto;
  transform:none;
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:rgba(12,16,28,.92); color:#fff; font-size:13px; font-weight:700; line-height:1.7;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:amsh-toast-in .2s ease-out;
}
@keyframes amsh-toast-in{
  from{ opacity:0; transform:translateY(10px) }
  to  { opacity:1; transform:translateY(0) }
}

/* ── R4-3 — چیپِ «صدا» (فقط وقتی مرورگر بی‌صدا شروع کرده) ────────────────────── *
 * جایگاه: بالا-**راستِ صحنه**، دقیقاً در همان نوارِ عمودیِ ✕ (که چپ است) — پس روبه‌روی
 * هم می‌نشینند و هیچ‌کدام روی ردیفِ چیپ‌های موضوع (یک ردیف پایین‌تر) نمی‌افتند.
 * مختصات از همان `--amsh-stage-*`ِ اندازه‌گیری‌شده می‌آید، پس روی دیدگاهِ پهن هم به گوشهٔ
 * **ستونِ ویدیو** می‌چسبد نه به گوشهٔ پنجره (همان قاعدهٔ nit5 برای ✕).
 * `.amsh__seen` عمداً برخورد نمی‌کند: ریشه RTL است و `inset-inline-end` آن را **چپ**
 * می‌نشاند (سنجهٔ زنده)، ضمنِ اینکه یک ردیف پایین‌تر هم هست. */
.amsh__unmute{
  position:absolute; z-index:11;
  top:calc(8px + env(safe-area-inset-top, 0px));
  left:calc(var(--amsh-stage-x, 0px) + var(--amsh-stage-w, 100%) - 10px);
  transform:translateX(-100%);
  max-width:calc(var(--amsh-stage-w, 100%) - 78px);
  display:flex; align-items:center; gap:6px; min-height:36px;
  padding:0 14px; border:1px solid rgba(255,255,255,.30); border-radius:999px; cursor:pointer;
  background:rgba(12,16,28,.62); color:#fff;
  font-family:inherit; font-size:13px; font-weight:700; line-height:1.7; white-space:nowrap;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 2px 14px rgba(0,0,0,.30);
  animation:amsh-unmute-in .22s ease-out;
}
.amsh__unmute:hover{ background:rgba(12,16,28,.80) }
.amsh__unmute:active{ transform:translateX(-100%) scale(.94) }
.amsh__unmute:focus-visible{ outline:2px solid #fff; outline-offset:2px }
@keyframes amsh-unmute-in{
  from{ opacity:0; transform:translateX(-100%) translateY(-6px) }
  to  { opacity:1; transform:translateX(-100%) translateY(0) }
}
.amsh__toastt{ min-width:0 }
.amsh__toasta{
  flex:0 0 auto; text-decoration:none; color:#12172a; background:#fff;
  padding:5px 12px; border-radius:999px; font-weight:800; font-size:12.5px;
}
.amsh__toasta:hover{ color:#12172a; opacity:.9 }

/* بجِ «دیده‌اید» — روی ظرفِ مستقل به اندازهٔ همان یک ردیف پایین‌تر می‌رود (زیرِ چیپ‌ها). */
.amsh[data-chrome="standalone"] .amsh__seen{ top:calc(106px + env(safe-area-inset-top, 0px)) }
.amsh__seen{
  position:absolute; top:52px; inset-inline-end:12px;
  background:rgba(0,0,0,.5); color:#fff; font-size:11px; font-weight:700;
  padding:4px 9px; border-radius:999px;
}

/* کلیدِ پخش/مکثِ وسط (فقط وقتی مکث است دیده می‌شود) */
.amsh__pp{
  position:absolute; inset:0; margin:auto; width:66px; height:66px; border:0; border-radius:50%;
  background:rgba(0,0,0,.42); color:#fff; display:none; align-items:center; justify-content:center; cursor:pointer;
}
.amsh__item.is-paused .amsh__pp{ display:flex }
.amsh__pp svg{ width:30px; height:30px }

/* ── کارتِ پایان ─────────────────────────────────────────────────────────── */
.amsh__end{
  height:100%; scroll-snap-align:start; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,#1B2F6E 0%,#0b1022 70%);
}
.amsh__endt{ font-size:20px; font-weight:800; margin:0 }
.amsh__endb{
  display:inline-block; border:0; cursor:pointer; text-decoration:none;
  background:#fff; color:#12172a; font:inherit; font-size:14px; font-weight:800;
  padding:11px 20px; border-radius:999px; min-width:170px;
}
.amsh__endb--ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45) }

/* ── حالتِ خالی / خطا ───────────────────────────────────────────────────── */
.amsh__empty{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:#cfd5e6; font-size:14px; text-align:center; padding:24px;
}
.amsh__empty button{
  border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff;
  font:inherit; padding:9px 18px; border-radius:999px; cursor:pointer;
}

/* ── فلش‌های دسکتاپ ────────────────────────────────────────────────────── *
 * ⚠ SH-R1 (۲۰۲۶-۰۸-۲۸، حکمِ مالک: «اون فلش بالا و پایین رو از کنارِ راست بردار»):
 * `.amsh__nav` / `.amsh__navb` **حذف شدند** — نه پنهان، حذف: نه مارک‌آپی در
 * `includes/shorts-feed.php` ساخته می‌شود، نه هندلری در `assets/shorts.js` می‌ماند،
 * نه قاعده‌ای این‌جا. جایگزینشان کلیدهای ↑/↓ (که بودند) و چرخِ ماوس است که حالا در
 * `shorts.js` صریحاً **یک آیتم در هر ژست** جلو می‌برد.
 */

/* شیتِ قفل: همان کامپوننتِ podcasts.css (`.ampod__lockov`) — این‌جا فقط قلابِ تست.
 *
 * ⚠ نقصِ واقعی که R3-3 در بازتولیدِ زنده گرفت (۱۴۰۵/۰۶/۰۶): این قاعده `z-index` را از
 * ۲۱۴۷۴۸۳۰۰۰ِ کامپوننتِ اصلی به **۶۰** پایین می‌آورد. تا SH-P1 بی‌ضرر بود، ولی SH-R1
 * ریشهٔ پخش‌کننده را `position:fixed; z-index:90` کرد ⇒ از آن روز **شیتِ قفل/ورود پشتِ
 * خودِ پخش‌کننده** می‌افتاد: در DOM بود، رویدادهایش کار می‌کرد، ولی یک پیکسلش هم دیده
 * نمی‌شد. یعنی پی‌والِ «عضویتِ ویژه» روی هر ریلِ پریمیوم عملاً نامرئی بود.
 * حالا صریحاً **بالای** ریشه می‌نشیند. شیتِ نظرها از اول ۲۱۴۷۴۸۳۰۰۰ داشت و سالم بود —
 * همان عدد این‌جا هم منطقی است، ولی عمداً یک عددِ خواناتر و هنوز بالاتر از ریشه گرفتیم
 * تا لایه‌بندیِ داخلیِ ماژول قابلِ خواندن بماند.
 */
.amsh__lock, .amsh__login{ z-index:200 }

/* ── دسکتاپ / پنجرهٔ بزرگ: ستونِ ۹:۱۶ وسط، بقیهٔ صفحه تیره ───────────────── *
 * ⚠⚠ نقصِ واقعیِ ۲۰۲۶-۰۸-۲۷ (مالک، اندازه‌های میانی) که این بلوک بازنویسی شد:
 * نسخهٔ قبلی این‌جا `--amsh-nav:0px` و `height:100vh` می‌گذاشت — یعنی **ادعا می‌کرد
 * روی این عرض‌ها نوارِ پایینی وجود ندارد**. ولی «موبایل منو» طبقِ تصمیمِ مالک روی
 * دسکتاپ هم دیده می‌شود (docs/14: نوارِ پایین در همهٔ عرض‌ها). نتیجه: پخش‌کننده تمامِ
 * ۱۰۰vh را می‌گرفت، فید ۸۵vh وسط‌چین می‌شد و در پنجره‌های **کوتاه** (۱۲۰۰×۶۰۰،
 * ۹۰۰×۷۰۰) کفِ فید زیرِ نوارِ ثابت می‌رفت ⇒ ریلِ کنش‌ها (لایک/شیر/…) کلیک‌ناپذیر.
 * حالا ارتفاع در **هر** عرضی همان `--amsh-h`ِ اندازه‌گیری‌شده است (نوار کم‌شده) و پهنای
 * ستون از همان ارتفاع مشتق می‌شود، نه از `85vh`ِ ناآگاه از نوار.
 */
@media (min-width:880px){
  .amsh{
    background:#0a0d18;
    /**
     * SH-P1 — همان ریاضیِ ریشه، فقط با دو ورودیِ دسکتاپ:
     *  • ردیفِ چیپ‌ها این‌جا **در جریان** است (نه شناور)، پس از ارتفاعِ در دسترس کم می‌شود؛
     *  • سقفِ ۸۵vh و سقفِ پهنای ۴۶۰px هر دو می‌مانند — ولی سقفِ پهنا حالا به **ارتفاع**
     *    ترجمه شده (۴۶۰×۱۶/۹) تا در پنجرهٔ بلند هم ستون دقیقاً ۹:۱۶ بمانَد و لِتِرباکسِ
     *    بالا/پایین برنگردد (همان نقصی که روی موبایل هم رفع شد).
     */
    --amsh-avail:min(85vh, calc(var(--amsh-h) - 62px), calc(460px * 16 / 9));
    --amsh-colmax:460px;
  }
  .amsh__feed{
    border-radius:var(--radius-lg,20px);
    overflow:hidden auto;
    box-shadow:var(--sh-3,0 30px 60px rgba(0,0,0,.5));
    background:#000;
  }
  .amsh__chips{
    position:static;
    width:var(--amsh-col); margin:0 auto; padding-top:14px;
  }
  /**
   * SH-P1 (nit5) — ✕ به گوشهٔ **صحنه** می‌چسبد، نه به گوشهٔ پنجره.
   * روی ۱۴۴۰ ضربدر ~۵۰۰px دورتر از ستونِ ویدیو شناور بود و به هیچ‌چیز وصل نبود.
   * مختصات از `--amsh-stage-x/y`ِ اندازه‌گیری‌شدهٔ `syncStage()` می‌آید (چرایی‌اش
   * آن‌جا نوشته شده: مختصاتِ عمودیِ ستون در CSS عددِ خواندنی ندارد). فالبکِ بی‌JS
   * همان گوشهٔ پنجره است، پس بدترین حالت رفتارِ قبلی است نه چیزی خراب.
   */
  .amsh__close{
    left:calc(var(--amsh-stage-x, 0px) + 12px);
    top:calc(var(--amsh-stage-y, 0px) + 12px);
  }
}

/* ══════════ تمام‌صفحهٔ واقعی — `html.amsh-fs` (SH-R1) ══════════════════════ *
 * حکمِ مالک ۲۰۲۶-۰۸-۲۸: «هنوز ریلزهات میره زیر موبایل منو! … ویدیوی شورتس لود شد
 * تمام صفحه بشه کامل، بعد با ضربدر گوشهٔ چپ بسته بشه؛ یعنی موبایل منو موقتاً اصلاً
 * نمایش داده نشه.»
 *
 * کلاس را `assets/shorts.js` روی `<html>` می‌گذارد و **فقط** تا وقتی ریشهٔ پخش‌کننده
 * روی صحنه است نگه می‌دارد. چرا این‌جا و نه در فایلِ خودِ نوارها: نوارِ صفحهٔ مستقل را
 * `includes/podcasts.php` می‌سازد (`.amaudio-appnav`) و نوارِ اپ را
 * `amir-weclub/includes/app.php` (`nav.nav` با `.nav-inner` درونش) — هیچ‌کدام فایلِ این
 * گروه نیستند و نباید دست بخورند. دو قاعدهٔ اسکوپ‌شده هر دو را برمی‌دارند، و کلاس که
 * رفت هر دو **بی‌هیچ ردی** برمی‌گردند (نه inline-style‌ای دست‌کاری شده، نه صفتی).
 *
 * ⚠ سه چیز عمدی است:
 *  ۱) `!important` — نوارِ اپ `display:flex`ِ صریح دارد و از یک شیتِ دیگر می‌آید؛
 *     بی این، ترتیبِ بارگذاریِ شیت‌ها می‌توانست برنده شود.
 *  ۲) ریشه `position:fixed; inset:0` می‌شود، نه فقط «قدبلندتر»: در پنهٔ درونِ اپ،
 *     پخش‌کننده داخلِ یک ظرفِ در جریان (زیرِ نوارِ زیرتب‌ها) است و بی این هرگز به
 *     بالای دیدگاه نمی‌رسید.
 *  ۳) `--amsh-nav:0` و `--amsh-avail:var(--amsh-h)` — «هیچ نواری فضایی رزرو نمی‌کند».
 *     همان ریاضیِ SH-P1 با ورودیِ صفر، پس ستون هنوز دقیقاً ۹:۱۶ می‌مانَد هرجا که جا
 *     داشته باشد، و فقط روی گوشیِ باریک تمامِ عرض را می‌گیرد (آن‌جا `is-fill` پرش می‌کند).
 */
html.amsh-fs .amaudio-appnav,          /* نوارِ صفحهٔ مستقل (podcasts.php) */
html.amsh-fs nav.nav{                  /* نوارِ اپِ وی‌کلاب (amir-weclub/app.php) */
  display:none !important;
}
/**
 * ── R4-1 (BLOCKER) — بجِ «پخشِ زنده» هم عضوِ همین کروم است ─────────────────────
 *
 * **بازتولیدِ زنده (۱۴۰۵/۰۶/۱۲، کرومیوم ۳۹۰×۸۴۴، پیش‌نمایشِ واقعیِ بج):**
 *   `.amaudio-badge` → `y 0..50، تمامِ عرض، z-index 99999` (`includes/segments.php`)
 *   `.amsh__close`   → `y 8..52، x 10..54، z-index 9`
 *   `document.elementFromPoint(32, 30)` → `span.amaudio-badge__enter`
 *   و `page.click('.amsh__close')` **تایم‌اوت** می‌شد: پلی‌رایت هم می‌دید که هدف پوشیده است.
 * یعنی هر وقت یک اتاقِ زنده روی آنتن بود، کاربرِ ریلزِ تمام‌صفحه **هیچ راهِ خروجی نداشت**
 * — نه ✕ (پوشیده)، نه نوارِ پایین (همین بالا پنهانش کرده‌ایم).
 *
 * چرا «پنهان» و نه «ضربدر را بالاتر ببر»: بج یک نوارِ **سرتاسری** است، نه یک نشان گوشه —
 * جابه‌جا کردنِ ✕ فقط برخورد را به ردیفِ چیپ‌ها منتقل می‌کرد و بج همچنان روی قابِ ویدیو
 * می‌مانْد. و قاعدهٔ همین حالت از روزِ اول همین بوده: «تا وقتی پخش‌کننده تمام‌صفحه است،
 * کرومِ صفحه نیست». پس بج دقیقاً مثلِ دو نوارِ بالا رفتار می‌کند و با برداشته‌شدنِ کلاس
 * (لمسِ ✕) **بی‌هیچ ردی** برمی‌گردد — نه صفتی دست‌کاری شده، نه inline-style‌ای.
 * `segments.php` فایلِ این گروه نیست و دست نخورد؛ قاعده اسکوپ‌شده به `html.amsh-fs` است،
 * پس ماژولِ خاموش ⇒ این خط بی‌اثر.
 */
html.amsh-fs .amaudio-badge{ display:none !important }
/* پس‌زمینه نباید زیرِ لایه بلغزد (اسکرولِ پشتِ مودال). */
html.amsh-fs, html.amsh-fs body{ overflow:hidden }
html.amsh-fs .amsh{
  position:fixed; inset:0; z-index:90;
  /**
   * ⚠ `padding:0` عمدی و **لازم** است، نه آرایش: در پنهٔ درونِ اپ ریشه از استایلِ ظرفِ
   * وی‌کلاب ۲۲px پدینگ می‌گیرد (اندازه‌گیریِ زندهٔ ۲۰۲۶-۰۸-۲۸: `padding:22px`). بی این
   * خط، «تمام‌صفحه» یعنی یک قابِ ۳۴۴×۸۴۴ که ۲۲px از بالا شروع می‌شود و ۲۳px از کفِ
   * دیدگاه بیرون می‌زند — یعنی دقیقاً همان چیزی که نباید بشود.
   */
  /* و به همان دلیل `border:0`: ظرفِ اپ یک قابِ ۱px هم می‌دهد و همان ۱px کفِ فید را از
     کفِ دیدگاه بیرون می‌بُرد (سنجهٔ زنده: `feed.bottom = vh + 1`). */
  width:100%; margin:0; padding:0; border:0; border-radius:0;
  --amsh-nav:0px;
  --amsh-h:100vh;
  --amsh-avail:var(--amsh-h);
  --amsh-colmax:100%;
  height:var(--amsh-h);
}
@supports (height:100dvh){ html.amsh-fs .amsh{ --amsh-h:100dvh } }
/**
 * ردیفِ چیپ‌ها در هر عرضی **شناور** می‌شود (روی دسکتاپ تا امروز در جریان بود و از
 * ارتفاعِ صحنه می‌خورد) — صحنه باید دقیقاً تمامِ دیدگاه باشد.
 *
 * ⚠ مختصاتِ عمودیِ ✕ و چیپ‌ها از **یک** متغیر مشتق می‌شوند، نه دو عددِ مستقل. باگی که
 * آزمونِ مرورگر گرفت (۲۰۲۶-۰۸-۲۸، F1-H روی ۹۰۰×۷۰۰/۱۲۰۰×۶۰۰/۱۴۴۰×۹۰۰): روی دسکتاپ ✕
 * از `--amsh-stage-y + 12` می‌آمد و در تمام‌صفحه `stage-y=0` شد ⇒ ✕ در ۱۲..۵۶ و ردیفِ
 * چیپ از ۵۴ ⇒ دو پیکسل همپوشانی. حالا «کفِ ✕ + فاصله» تعریفِ خودِ `top`ِ چیپ‌هاست، پس
 * در هیچ دیدگاهی نمی‌توانند روی هم بیفتند.
 */
html.amsh-fs .amsh{
  --amsh-xtop:calc(8px + env(safe-area-inset-top, 0px));  /* بالای ✕ */
  --amsh-xh:44px;                                          /* قدِ خودِ ✕ (بالای همین فایل) */
  --amsh-chiptop:calc(var(--amsh-xtop) + var(--amsh-xh) + 8px);
  --amsh-chiph:52px;                                       /* قدِ ردیفِ چیپ (۱۰+۱۰ پدینگ + چیپ) */
}
html.amsh-fs .amsh__close{ top:var(--amsh-xtop) }
html.amsh-fs .amsh__chips{
  position:absolute; inset-inline:0; width:auto; margin:0;
  top:var(--amsh-chiptop);
  padding-top:10px;
}
/* بجِ «دیده‌اید» هم یک ردیف زیرِ چیپ‌ها می‌مانَد — با همان زنجیرهٔ مشتق، نه عددِ مستقل. */
html.amsh-fs .amsh__seen{ top:calc(var(--amsh-chiptop) + var(--amsh-chiph)) }
/* صحنه = تمامِ ارتفاعِ دیدگاه؛ پهنا از همان ارتفاع (۹:۱۶) یا تمامِ عرض، هرکدام کمتر. */
@supports (aspect-ratio: 9 / 16){
  html.amsh-fs .amsh__feed{
    aspect-ratio:auto;
    width:var(--amsh-col);
    height:var(--amsh-h);
    max-height:var(--amsh-h);
    margin:0 auto;
  }
}
html.amsh-fs .amsh__feed{ border-radius:0; box-shadow:none }
/**
 * «پر کردنِ قاب» — کلاسِ `is-fill` را `fitVideos()` بر پایهٔ نسبتِ قاب/ویدیو می‌گذارد
 * (چراییِ کامل آن‌جا). قابِ کشیده‌تر از ویدیو ⇒ `cover` (فقط کناره‌ها بریده می‌شود)؛
 * وگرنه `contain` می‌مانَد و پشتش پوسترِ **محوشده** می‌نشیند، نه سیاهیِ خالی.
 */
/**
 * ⚠ هر سه قاعده عمداً به `.amsh__item` **اسکوپ** شده‌اند: کلاسِ `amsh__video` را
 * `includes/podcasts.php` برای تایل‌های نوارِ صفحهٔ «آموزش‌ها» هم به‌کار می‌برد (خطِ ۹۱۲ و
 * ۱۱۴۹) و آن تایل‌ها `.amsh__item` ندارند. بی این اسکوپ، `z-index`/`object-fit` روی یک
 * کامپوننتِ کاملاً دیگر هم می‌نشست — همان‌جنس اثرِ جانبی‌ای که این دور باید حذفش کند.
 */
.amsh__item.is-fill .amsh__video{ object-fit:cover }
.amsh__item:not(.is-fill)::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  -webkit-backdrop-filter:blur(26px) brightness(.5); backdrop-filter:blur(26px) brightness(.5);
}
/* ویدیو باید **بالای** آن لایه بماند؛ عنصرِ بی‌موقعیت زیرِ هر عنصرِ موقعیت‌دار می‌افتد.
   (ریلِ کنش‌ها z=3 و بلوکِ متن z=2 است، پس هر دو بالای ویدیو می‌مانند — سنجهٔ زنده با
   `elementFromPoint`: هر سه هدف [OK].) */
.amsh__item .amsh__video{ position:relative; z-index:1 }

/* ── کم‌جنبشی: هیچ اسکرولِ نرم و هیچ ترنزیشنی ──────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .amsh__feed{ scroll-behavior:auto }
  .amsh__bar i{ transition:none }
  .amsh__item.is-locked .amsh__video{ transform:none }
  /* SH-F1 — جلوه‌ها خاموش، ولی **کارکرد** دست‌نخورده: قلب همچنان لایک می‌کند و توست
     همچنان دیده می‌شود؛ فقط حرکتشان حذف می‌شود. */
  .amsh__burst{ display:none }
  .amsh__cbtn.is-tap, .amsh__cbtn[data-act="like"].is-on svg{ animation:none }
  .amsh__toast{ animation:none }
  .amsh__unmute{ animation:none }
  .amsh__unmute:active{ transform:translateX(-100%) }
  .amsh__overlay, .amsh__bar{ transition:none }
  .amsh__video{ transition:none }
}

/* ══════════ R3-2 — «دسکتاپ = ویترین»: کارتِ «فقط روی موبایل» ══════════════ *
 * حکمِ مالک ۱۴۰۵/۰۶/۰۶: روی دسکتاپ (اشاره‌گرِ دقیق ∧ عرض ≥ آپشن) پخش‌کننده هرگز باز
 * نمی‌شود؛ به‌جایش این کارت. کلاسِ `is-deskonly` را `assets/shorts.js` می‌گذارد (داورِ
 * زنده)؛ یک قاعدهٔ رسانه‌ایِ درون‌خطیِ هم‌آستانه هم `includes/shorts-feed.php` چاپ می‌کند
 * تا در **اولین رنگ** هم درست باشد (عددِ آستانه از پنل می‌آید و در شیتِ ایستا جا نمی‌شود).
 *
 * ⚠ کارت زیرِ کلاسِ `is-deskonly` **flex** می‌شود و بس؛ نوارِ چیپ و فید همان‌جا مخفی.
 * ✕ عمداً می‌مانَد: کاربر باید بتواند از صفحهٔ عمیق برگردد.
 */
.amsh__deskonly{ display:none }
.amsh.is-deskonly > .amsh__chips,
.amsh.is-deskonly > .amsh__feed{ display:none }
.amsh.is-deskonly > .amsh__deskonly{
  display:flex; align-items:center; justify-content:center;
  /* `box-sizing` صریح: ریشه `align-items:center` است و بی این، `width:100%`+padding
     جعبه را ۴۸px از ریشه پهن‌تر می‌کرد (سنجهٔ زنده روی ۱۴۴۰: x=-24, w=1488). */
  flex:1 1 auto; width:100%; box-sizing:border-box; padding:24px;
}
.amsh__dcard{
  width:min(100%, 420px); text-align:center;
  padding:34px 28px 30px;
  border-radius:22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 18px 48px rgba(0,0,0,.42);
  color:#fff;
}
.amsh__dico{
  display:inline-flex; align-items:center; justify-content:center;
  width:62px; height:62px; margin-bottom:16px;
  border-radius:50%; color:#fff;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
}
.amsh__dtitle{ margin:0 0 10px; font-size:19px; line-height:1.65; font-weight:700 }
.amsh__dtext{ margin:0 0 20px; font-size:14px; line-height:2; opacity:.78 }
.amsh__dcopy{
  display:inline-block; padding:12px 26px; min-width:190px;
  border:0; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:700;
  background:#fff; color:#12172a;
  transition:transform .12s ease-out, opacity .12s ease-out;
}
.amsh__dcopy:hover{ opacity:.9 }
.amsh__dcopy:active{ transform:scale(.97) }
.amsh__dcopy:focus-visible{ outline:2px solid var(--dot,#F2674F); outline-offset:3px }
/* بازخوردِ کپی — جای ثابت می‌گیرد تا کارت با آمدنِ متن نپرد. */
.amsh__dhint{ display:block; margin-top:12px; min-height:19px; font-size:13px; line-height:19px; opacity:.72 }
@media (prefers-reduced-motion: reduce){
  .amsh__dcopy{ transition:none }
  .amsh__dcopy:active{ transform:none }
}

/* ══════════ R3-2 (ریشهٔ باگ‌های دسکتاپیِ گزارش‌شده) ═══════════════════════ *
 * دو نقصِ واقعی که در بازتولیدِ ۱۴۰۵/۰۶/۰۶ اندازه‌گیری شدند. با «ویترینِ دسکتاپ» دیگر
 * روی ماوس دیده نمی‌شوند، ولی در بازهٔ عرضِ ۵۶۰..آستانه روی دستگاهِ **لمسی** هنوز زنده
 * بودند — پس مکانیزمشان هم درست می‌شود، نه فقط پنهان:
 *
 * ۱) «نیم‌صفحهٔ راست‌چسبیده»: `room.css` قاعدهٔ `.amaudio{max-width:560px}` دارد و ریشهٔ
 *    پخش‌کننده کلاسِ `amaudio` را هم دارد (توکن‌ها از همان‌جا می‌آیند). زیرِ `html.amsh-fs`
 *    ریشه `position:fixed; inset:0; width:100%` می‌شود ولی `max-width` بازنشانی نمی‌شد ⇒
 *    عرضِ واقعی ۵۶۰px می‌ماند و چون `left:0` و `right:0` هر دو صفر و عرض مقید است،
 *    مشخصهٔ over-constrainedِ CSS در ریشهٔ `direction:rtl` مقدارِ **left** را دور می‌ریزد
 *    ⇒ جعبه به لبهٔ **راست** می‌چسبد. سنجهٔ زنده روی ۱۴۴۰×۹۰۰ داخلِ اپ:
 *    `x=880 w=560 maxWidth=560px` (منبعِ قاعده: `room.css`).
 * ۲) «چیپ‌بارِ سرتاسری»: قاعدهٔ `@media (min-width:880px)` ردیفِ چیپ را هم‌عرضِ ستون
 *    (`--amsh-col`) می‌کرد، ولی قاعدهٔ تمام‌صفحهٔ SH-R1 با `inset-inline:0; width:auto`
 *    آن را دوباره سرتاسری کرد (سنجهٔ زنده: چیپ ۱۴۴۰px در برابرِ ستونِ ۵۰۶px).
 */
html.amsh-fs .amsh{ max-width:none }
/* هر دو انسِت صفر می‌مانند و عرض مقید می‌شود ⇒ حاشیه‌های auto جعبه را **وسط** می‌نشانند
   (CSS 2.1 §10.3.7). با `inset-inline:auto` جعبه به موقعیتِ ایستا می‌افتاد، نه وسط.
   ⚠ عمداً **بی‌قاعدهٔ رسانه‌ای**: نسخهٔ اولِ این اصلاح داخلِ `@media (min-width:880px)` بود
   و آزمونِ مرورگر همان لحظه گرفتش — روی ۵۰۰×۸۰۰ چیپ ۵۰۰px بود و ستون ۴۵۰px، روی ۷۰۰×۹۰۰
   چیپ ۷۰۰px و ستون ۵۰۶px. یعنی همان «چیپ‌بارِ سرتاسری»ِ مالک در بازهٔ تبلت/گوشیِ بزرگ
   زنده می‌ماند. روی گوشیِ باریک `--amsh-col` برابرِ ۱۰۰٪ است، پس این قاعده آن‌جا هیچ
   تغییری نمی‌دهد — فقط جایی اثر دارد که ستون از دیدگاه باریک‌تر است. */
html.amsh-fs .amsh__chips{
  /* `box-sizing` صریح: ردیف پدینگِ افقی دارد و بی این، عرضِ واقعی ۳۶px از ستون بیشتر
     می‌شد (سنجهٔ زندهٔ آزمون: ۴۸۶ در برابرِ ۴۵۰، ۵۴۲ در برابرِ ۵۰۶). */
  width:var(--amsh-col); margin-inline:auto; box-sizing:border-box;
}

/* ══════════ R3-3 — شیتِ ورودِ مهمان ═══════════════════════════════════════ *
 * همان کامپوننتِ `.ampod__lockov`ِ `podcasts.css` است (هیچ استایلی کپی نشد)، فقط با
 * قلابِ `.amsh__login` برای آزمون/E2E — دقیقاً همان الگوی `.amsh__lock`.
 */