/* ---------------------------------------------------------------
   لایهٔ برندِ پی‌هاب روی قالب Sneat.

   قاعده: خودِ قالب دست نمی‌خورد (تولیدشده است، `tools/build_sneat.py`).
   هرچه مالِ ماست این‌جاست — فونت، سلسله‌مراتب، و کامپوننت‌هایی که قالب ندارد.
   --------------------------------------------------------------- */

/* ================================================================
   فونت — یک فایل، همهٔ وزن‌ها

   ایران‌سنس X نسخهٔ **متغیر** است: به‌جای ده فایل جدا، یک فایل ۱۰۰ کیلوبایتی
   که کلِ بازهٔ ۱۰۰ تا ۹۰۰ را می‌دهد. یعنی هیچ‌وقت ضخیمِ تقلبی ساخته نمی‌شود.

   🔴 ارقامِ **لاتین** انتخاب شد نه نسخهٔ FaNum. اگر FaNum بگذاریم، شمارهٔ کارت و
   شمارهٔ مرجع هم فارسی *دیده* می‌شوند در حالی که عمداً باید عیناً همان چیزی
   باشند که بانک داده (سند §۹٫۱). تبدیل ارقام کارِ فیلتر `fa` در پایتون است.

   ⚠️ فونتِ تجاری است — `static/fonts/README.md` و `docs/fonts/`.
   ================================================================ */

@font-face {
  font-family: "IRANSansX";
  src: url("../fonts/IRANSansXVF.woff2") format("woff2"),
       url("../fonts/IRANSansXVF.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ph-font: "IRANSansX", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* هیچ لاتینی نباید از لای درز رد شود. */
html, body,
button, input, select, textarea, optgroup,
.btn, .form-control, .form-select, .form-label,
.nav-link, .dropdown-item, .card-title, .table,
code, pre, kbd, samp, .text-monospace {
  font-family: var(--ph-font) !important;
}

/* عددها با هم تراز بمانند بدون اینکه به مونواسپیس پناه ببریم. */
.num, .table td, .table th, .fs-num, .card-title.num {
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   سلسله‌مراتبِ تایپوگرافی

   نردبان: ۴۰۰ متن · ۵۰۰ نشان و برچسب · ۶۰۰ عنوان کارت · ۷۰۰ تیتر صفحه.
   بالاتر از ۷۰۰ عمداً نمی‌رویم — پنلِ حسابداری است نه پوستر.
   ================================================================ */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-weight: 700;
  letter-spacing: -.2px;
}

.content-wrapper h4 { font-size: 1.4rem; }

.card-header h6 {
  font-weight: 600;
  color: var(--bs-heading-color);
}

/* عددهای بزرگِ آمار: ضخیم، ولی با ارقامِ هم‌عرض تا ستون‌ها نلرزند. */
.card-body h4.num {
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -.3px;
}

.ph-auth-brand { font-weight: 700; }
.app-brand-text { font-weight: 700; font-size: 1.15rem; }

.badge { font-weight: 500; }
.form-label { font-weight: 500; }

/* سرستونِ جدول باید از ردیف‌ها جدا باشد وگرنه چشم گم می‌شود. */
.table thead th { font-weight: 600; }

/* ================================================================
   اصلاح‌های RTL که مکانیکی برنمی‌گردند
   ================================================================ */

/* 🔴 شمارهٔ موبایل و مبلغ همیشه چپ‌به‌راست‌اند حتی وسط صفحهٔ راست‌به‌چپ —
   وگرنه «۰۹۱۲» با «۳۴۵۶» جا عوض می‌کند و کاربر فکر می‌کند اشتباه تایپ کرده. */
input[dir="ltr"], .ltr-num {
  direction: ltr;
  text-align: center;
}

/* نوار جستجوی بالای صفحه نباید کلِ عرض را ببلعد. */
.ph-search { max-width: 420px; flex: 1 1 auto; }

/* ================================================================
   صفحهٔ ورود
   ================================================================ */

.ph-auth-mark {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--bs-primary);
  color: #fff;
  margin-inline: auto;
  box-shadow: 0 8px 22px rgba(var(--bs-primary-rgb), .28);
}

.ph-auth-brand {
  font-size: 21px;
  color: var(--bs-heading-color);
  margin-top: 14px;
  text-align: center;
}

.ph-auth-sub {
  font-size: 13px;
  color: var(--bs-secondary-color);
  text-align: center;
}

.ph-otp {
  font-size: 24px;
  letter-spacing: .5em;
  text-align: center;
  direction: ltr;
  padding-inline: 0;
}

.ph-auth-note {
  font-size: 12.5px;
  color: var(--bs-secondary-color);
  line-height: 2.1;
  text-align: center;
  margin-bottom: 0;
}

.ph-hero-card {
  border: 0;
  box-shadow: 0 12px 40px rgba(16, 25, 22, .09);
}

/* پیام توسعه: باید دیده شود ولی جای دکمهٔ اصلی را نگیرد. */
.ph-devcode {
  font-size: 19px;
  letter-spacing: .3em;
  direction: ltr;
  display: inline-block;
}

/* ================================================================
   کامپوننت‌های اختصاصیِ ما — نه مالِ قالب

   لاگ خام و صفحهٔ راهنما ساختارِ خاص خودشان را دارند. رنگ‌ها به متغیرهای
   قالب گره خورده‌اند تا اگر روزی رنگ اصلی عوض شد، این‌ها هم دنبالش بروند.
   ================================================================ */

.ph-warn-num { color: var(--bs-warning); }

/* ---------- لاگ خام ---------- */

.ph-events { display: flex; flex-direction: column; }

.ph-event { border-bottom: 1px solid var(--bs-border-color); }
.ph-event:last-child { border-bottom: none; }

.ph-event > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 4px;
  cursor: pointer;
  font-size: 13px;
  flex-wrap: wrap;
}
.ph-event > summary::marker { color: var(--bs-border-color); }
.ph-event[open] > summary { background: var(--bs-body-bg); }

.ph-raw { padding: 0 4px 14px; }
.ph-raw b {
  font-size: 11.5px;
  color: var(--bs-secondary-color);
  display: block;
  margin-bottom: 5px;
}
.ph-raw pre {
  margin: 0;
  padding: 12px 14px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 7px;
  /* 🔴 نه مونواسپیس: روی ویندوز به Consolas می‌افتد، یعنی فونت لاتین وسطِ
     صفحهٔ فارسی. ساختارِ لاگ با pre و tab-size حفظ می‌شود، نه با فونت. */
  font-family: var(--ph-font);
  font-size: 12px;
  line-height: 1.7;
  direction: ltr;
  text-align: left;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  tab-size: 2;
}

/* ---------- راهنمای اتصال ---------- */

.ph-steps {
  list-style: none;
  counter-reset: ph-step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
}
.ph-steps li {
  counter-increment: ph-step;
  position: relative;
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 16px 18px;
}
/* شماره این‌جا تزئین نیست — ترتیب واقعاً معنا دارد. */
.ph-steps li::before {
  content: counter(ph-step, persian);
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 16px;
  font-size: 22px;
  font-weight: 300;
  color: var(--bs-border-color);
  line-height: 1;
}
.ph-steps li b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--bs-heading-color);
  margin-bottom: 6px;
}
.ph-steps li span { font-size: 12.5px; line-height: 1.9; color: var(--bs-secondary-color); }
.ph-steps li span b { display: inline; font-size: inherit; color: var(--bs-body-color); }

.ph-rule {
  background: var(--bs-card-bg);
  border: 1px solid var(--bs-warning);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.ph-rule-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--bs-warning);
  margin-bottom: 8px;
}
.ph-rule p { margin: 0 0 10px; font-size: 13px; line-height: 2; color: var(--bs-body-color); }
.ph-rule-foot { font-size: 12.5px; color: var(--bs-secondary-color); margin-bottom: 0 !important; }

.ph-code {
  position: relative;
  margin: 0 0 14px;
  padding: 13px 15px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.9;
  direction: ltr;
  text-align: left;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
}
.ph-code code { font: inherit; color: var(--bs-body-color); background: none; padding: 0; }

.ph-copy {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 7px;
  padding: 3px 9px;
  font-size: 11px;
  border-radius: 5px;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-card-bg);
  color: var(--bs-secondary-color);
  cursor: pointer;
  /* 🔴 پنهان‌کردن تا زمان hover کار نمی‌کند: لپ‌تاپ لمسی هم `hover` را `true`
     گزارش می‌کند، پس `pointer: coarse` نجاتش نمی‌دهد و دکمه روی آن دستگاه
     هرگز دیده نمی‌شود. کم‌رنگ ولی همیشه پیدا. */
  opacity: .5;
  transition: opacity .12s;
}
.ph-code:hover .ph-copy,
.ph-copy:hover,
.ph-copy:focus-visible { opacity: 1; }
.ph-copy.is-done { color: var(--bs-primary); border-color: var(--bs-primary); }

.ph-guide h3 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bs-heading-color);
  margin: 22px 0 9px;
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--bs-primary-bg-subtle);
}
.ph-guide h3:first-child { margin-top: 0; }
.ph-guide p { font-size: 13px; line-height: 2; color: var(--bs-body-color); margin: 0 0 12px; }

.ph-warn {
  background: var(--bs-warning-bg-subtle);
  border-inline-start: 3px solid var(--bs-warning);
  border-radius: 0 7px 7px 0;
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--bs-body-color);
  margin-bottom: 12px;
}

.ph-list { margin: 0; padding-inline-start: 18px; }
.ph-list li { font-size: 12.5px; line-height: 2.1; color: var(--bs-body-color); }

.ph-kbd {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  font-size: 12px;
}

/* ================================================================
   کامپوننت‌های ما روی موبایل
   ================================================================ */

@media (max-width: 900px) {
  /* سه‌ستونهٔ «سه قدم» باید بشکند، وگرنه هر ستون صد پیکسل می‌شود. */
  .ph-steps { grid-template-columns: 1fr; }

  /* عنوان و نشانِ رویداد در یک خط جا نمی‌شوند؛ اجازهٔ شکستن. */
  .ph-event > summary { gap: 6px; padding: 10px 2px; }
  .ph-raw { padding: 0 2px 12px; }

  .ph-search { max-width: none; }
}