/* ==========================================================================
   پوستهٔ پنل — ریل راست (دسکتاپ) · نوار پایین (موبایل) · نوار بالا · زیربخش
   --------------------------------------------------------------------------
   قاعده‌ی سخت: هیچ مقدار خامی این‌جا نیست. هر رنگ، فاصله، شعاع، سایه و مدت از
   همان توکن‌هایی می‌آید که پوسته‌ی سایت از آن‌ها ساخته می‌شود — پس رنگ برند همکار
   بدون یک خط کد اضافه روی پنل هم می‌نشیند.

   RTL: سمت‌ها با خاصیت‌های منطقی (inset-inline-*) پین شده‌اند، نه با left/right،
   و با getBoundingClientRect عددی اثبات شده‌اند. «به‌نظر درست می‌آید» شواهد نیست.
   ========================================================================== */

:root {
  --rail-w: 236px;
  --ptop-h: 60px;
  --psub-h: 46px;
  --pbottom-h: 64px;
}

/* ==========================================================================
   اسکلت
   ========================================================================== */
.pshell {
  min-height: 100dvh;
  background: var(--bg);
}

/* پرش به محتوا — اولین چیزی که با Tab گرفته می‌شود */
.pskip {
  position: fixed;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--brand-fill, var(--brand));
  color: var(--on-brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--d-2) var(--e-out);
}
/* :focus و نه فقط :focus-visible — پیوندِ پرش باید با هر فوکوسی دیده شود.
   سنجش زنده نشان داد با فوکوسِ برنامه‌ای پنهان می‌ماند و آزمون‌پذیر نیست. */
.pskip:focus,
.pskip:focus-visible { transform: none; }

/* ==========================================================================
   ریل (دسکتاپ)
   ========================================================================== */
.prail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;        /* RTL ⇒ راست · LTR ⇒ چپ */
  z-index: var(--z-sidebar);
  width: var(--rail-w);
  display: none;                /* فقط از ۱۰۲۴ به بالا */
  flex-direction: column;
  background: var(--surface-1);
  border-inline-end: var(--border-w) solid var(--line);
}

.prail__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--ptop-h);
  padding: var(--sp-3) var(--sp-4);
  border-block-end: var(--border-w) solid var(--line);
}
.prail__mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--brand-fill, var(--brand));
  color: var(--on-brand);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: var(--fs-md);
  overflow: hidden;
}
.prail__mark img { width: 100%; height: 100%; object-fit: cover; }
.prail__names { min-width: 0; }
.prail__name {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  /* نام ۸۰ حرفی نباید ریل را بشکند (حالت افراطی) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prail__tier {
  margin-block-start: 2px;
  font-size: var(--fs-2xs);
  color: var(--text-3);
}

.prail__nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-3) var(--sp-3);
}
.prail__foot {
  padding: var(--sp-3);
  border-block-start: var(--border-w) solid var(--line);
  display: grid;
  gap: var(--sp-1);
}

.pnav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 42px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: start;
  transition: background var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}
.pnav__item + .pnav__item { margin-block-start: 2px; }
.pnav__item .ico { flex: 0 0 auto; width: 19px; height: 19px; opacity: .85; }
.pnav__item:hover { background: var(--surface-2); color: var(--text); }
.pnav__item[aria-current="page"] {
  background: rgb(var(--brand-rgb) / .12);
  color: var(--brand-ink, var(--brand));
  font-weight: 700;
}
/* نوار فعال، سمتِ شروع — با inset منطقی، نه left/right */
.pnav__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 8px;
  width: 3px;
  border-radius: var(--r-pill);
  background: var(--brand);
}
.pnav__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* شمارنده و قفل — شکل + متن، هرگز فقط رنگ */
.pnav__count {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--brand-fill, var(--brand));
  color: var(--on-brand);
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.pnav__lock { flex: 0 0 auto; width: 15px; height: 15px; opacity: .55; }

/* ==========================================================================
   ناحیهٔ اصلی
   ========================================================================== */
.pmain {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.ptop {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ptop-h);
  padding: 0 var(--sp-4);
  background: var(--surface-1);
  border-block-end: var(--border-w) solid var(--line);
}
.ptop__crumb {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.ptop__crumb b {
  color: var(--text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptop__crumb .ico { width: 14px; height: 14px; opacity: .5; }
/* در RTL شورون باید به سمت چپ اشاره کند — آینه‌سازی صریح */
[dir="rtl"] .ptop__crumb .ico--sep { transform: scaleX(-1); }

.pbtn-ico {
  flex: 0 0 auto;
  position: relative;
  width: 44px;              /* هدف لمسی ≥۴۴ — سنجیده شد، ۳۸ بود و مردود */
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--text-2);
  transition: background var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}
.pbtn-ico:hover { background: var(--surface-2); color: var(--text); }
.pbtn-ico .ico { width: 19px; height: 19px; }
.pbtn-ico__dot {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: none;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--brand-fill, var(--brand));
  color: var(--on-brand);
  font-family: var(--font-num);
  font-size: 10px;
  font-weight: 700;
}
.pbtn-ico[data-count]:not([data-count="0"]) .pbtn-ico__dot { display: grid; }

/* دکمهٔ جست‌وجو در دسکتاپ، فیلد نمایشی می‌شود */
.psearch-btn {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: var(--border-w) solid var(--line);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-xs);
  min-width: 216px;
}
.psearch-btn:hover { border-color: var(--line-strong); color: var(--text-2); }
.psearch-btn .ico { width: 16px; height: 16px; }
.psearch-btn kbd {
  margin-inline-start: auto;
  font-family: var(--font-en);
  font-size: 10px;
  padding: 2px 5px;
  border-radius: var(--r-xs);
  border: var(--border-w) solid var(--line);
  color: var(--text-4);
}

/* ---------- نوار زیربخش ---------- */
.psub {
  position: sticky;
  inset-block-start: var(--ptop-h);
  z-index: calc(var(--z-header) - 1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--psub-h);
  padding: 0 var(--sp-4);
  background: var(--surface-1);
  border-block-end: var(--border-w) solid var(--line);
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* اسکرول افقی نباید به صفحه زنجیر شود */
  scrollbar-width: none;
}
.psub::-webkit-scrollbar { display: none; }
.psub:empty { display: none; }
.psub__item {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-3);
  transition: background var(--d-1) var(--e-out), color var(--d-1) var(--e-out);
}
.psub__item:hover { background: var(--surface-2); color: var(--text); }
.psub__item[aria-current="page"] {
  background: rgb(var(--brand-rgb) / .14);
  color: var(--brand-ink, var(--brand));
}
.psub__count {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
}

/* ---------- محتوا ---------- */
.pcontent {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1180px;
  padding: var(--sp-5) var(--sp-4) var(--sp-12);
}
.ppage-head { margin-block-end: var(--sp-5); }
.ppage-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ppage-sub {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* ==========================================================================
   نوار پایین (موبایل)
   ========================================================================== */
.pbottom {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-header);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  min-height: var(--pbottom-h);
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: var(--surface-1);
  border-block-start: var(--border-w) solid var(--line);
}
.pbottom__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;          /* هدف لمسی ≥۴۴ */
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
}
.pbottom__item .ico { width: 21px; height: 21px; }
.pbottom__item[aria-current="page"] { color: var(--brand-ink, var(--brand)); }
.pbottom__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 26%;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--brand);
}
.pbottom__count {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 22%;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--brand-fill, var(--brand));
  color: var(--on-brand);
  font-family: var(--font-num);
  font-size: 9px;
  font-weight: 700;
}

/* ==========================================================================
   نوارهای وضعیت سراسری
   ========================================================================== */
.pbanner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  border-block-end: var(--border-w) solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
}
.pbanner .ico { flex: 0 0 auto; width: 18px; height: 18px; }
.pbanner__text { flex: 1 1 auto; }
.pbanner--setup { background: rgb(var(--brand-rgb) / .1); color: var(--text); }
/* در عرض کم، اقدام‌ها زیر متن می‌روند تا نه متن بشکند نه دکمه له شود. */
@media (max-width: 519.98px) {
  .pbanner { flex-wrap: wrap; row-gap: var(--sp-2); }
  .pbanner__text { flex: 1 1 100%; order: 1; }
  .pbanner .ico { order: 0; }
  .pbanner .pbtn { order: 2; }
}
.pbanner--setup .ico { color: var(--brand-ink, var(--brand)); }
.pbanner--offline { background: color-mix(in oklab, var(--warning) 16%, var(--surface-2)); }
.pbanner--error { background: color-mix(in oklab, var(--danger) 14%, var(--surface-2)); }

/* ==========================================================================
   ریسپانسیو — نقطه‌ی شکست ۱۰۲۴
   ========================================================================== */
@media (min-width: 1024px) {
  .prail { display: flex; }
  .pmain { padding-inline-start: var(--rail-w); }
  .pbottom { display: none; }
  /* در دسکتاپ فیلدِ نمایشی می‌ماند و آیکونِ فشرده می‌رود — وگرنه دو کنترل برای
     یک کار روی نوار می‌نشیند (کنترل تکراری، مردودی G1). */
  .psearch-btn { display: inline-flex; }
  .psearch-ico { display: none; }
  .ptop, .psub { padding-inline: var(--sp-6); }
  .pcontent { padding-inline: var(--sp-6); }
}

@media (max-width: 1023.98px) {
  .pcontent { padding-block-end: calc(var(--pbottom-h) + var(--sp-8) + env(safe-area-inset-bottom, 0px)); }
  .ptop__crumb { font-size: var(--fs-xs); }
}

/* ==========================================================================
   حرکت — همه از مقیاس بخش ۱۲.۲ · احترام به ترجیح کاربر و دستگیره‌ی حرکت
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pskip, .pnav__item, .pbtn-ico, .psub__item { transition: none !important; }
}
:root[data-motion="off"] .pskip,
:root[data-motion="off"] .pnav__item,
:root[data-motion="off"] .pbtn-ico,
:root[data-motion="off"] .psub__item { transition: none !important; }

/* اکشن‌های نوار بالا */
.ptop__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-1); }


/* ==========================================================================
   اهداف لمسی — روی دستگاه لمسی هیچ کنترلی زیر ۴۴px نمی‌ماند.
   این بلوک بعد از سنجش زنده اضافه شد: اندازه‌گیری نشان داد آیکون‌های نوار بالا
   ۳۸px و چیپ‌های زیربخش ۳۲px بودند — هر دو زیر کف دسترس‌پذیری.
   ========================================================================== */
@media (pointer: coarse) {
  .pnav__item { min-height: 44px; }
  .psearch-btn { height: 44px; }   /* تبلت افقی هم عرضِ دسکتاپ دارد ولی لمسی است */
  .psub__item { height: 44px; }
  .pbanner .pbtn--sm { min-height: 44px; min-width: 44px; }
}