/* ==========================================================================
   پایه — ریست، تایپوگرافی، شبکه، ابزارهای عمومی
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-snug);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* حلقهٔ تمرکز یکسان — فقط برای صفحه‌کلید، نه کلیک ماوس */
:focus-visible {
  outline: 2px solid var(--ring-line);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  text-align: inherit;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol { list-style: none; }

table { border-collapse: collapse; }

hr {
  border: none;
  border-top: var(--bw) solid var(--line);
}

/* ============================ تایپوگرافی ============================ */
h1, h2, h3, h4, h5 {
  line-height: var(--lh-tight);
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  text-wrap: balance;          /* از تک‌واژه‌ماندن سطر آخر جلوگیری می‌کند */
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-body); }

/* اندازهٔ تیتر مستقل از سطح آن — وقتی سلسله‌مراتب سند
   با سلسله‌مراتب بصری یکی نیست (مثلاً h2 در کارت کوچک) */
.t-h3 { font-size: var(--t-h3); }

p { text-wrap: pretty; }

b, strong { font-weight: var(--w-semi); }
small { font-size: var(--t-small); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

/* نقش‌های متنی — نام بر پایهٔ معنا، نه اندازه */
.t-caption { font-size: var(--t-caption); }
.t-body-sm { font-size: var(--t-body-sm); }
.t-lead { font-size: var(--t-lead); line-height: var(--lh-normal); }

.muted { color: var(--ink-2); }
.dim { color: var(--ink-3); }

.fg-red { color: var(--red); }
.fg-green { color: var(--green); }
.fg-amber { color: var(--amber); }

.semi { font-weight: var(--w-semi); }

/* اعداد هم‌عرض — برای هم‌ترازی ستون‌های مالی حیاتی است */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.phone-display {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  display: inline-block;
}

input.num {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

.center { text-align: center; }
.start { text-align: start; }
.end { text-align: end; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* بریدن در دو سطر */
.clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* متن پیاده‌شدهٔ ویس — سطرهای بازتر چون یک‌بار و با دقت خوانده می‌شود */
.transcript { line-height: 2.2; }

/* ============================ آیکون ============================ */
/* اندازه‌ها توکن‌اند: sm=14 / base=16 / md=20 / lg=24 */
.icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 0.875rem; height: 0.875rem; stroke-width: 2; }
.icon--md { width: 1.25rem; height: 1.25rem; }
.icon--xl { width: 2rem; height: 2rem; stroke-width: 1.4; }

/* ============================ چیدمان ============================ */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--s-5));
  min-width: 0;
}
.stack--tight { --stack-gap: var(--s-3); }
.stack--loose { --stack-gap: var(--s-8); }

.row {
  display: flex;
  align-items: center;
  gap: var(--row-gap, var(--s-3));
  min-width: 0;
}
.row--wrap { flex-wrap: wrap; }
.row--top { align-items: flex-start; }
.row--end { align-items: flex-end; }
.row--base { align-items: baseline; }
.row--tight { --row-gap: var(--s-2); }
.row--loose { --row-gap: var(--s-5); }

.push { margin-inline-start: auto; }
.grow { flex: 1; min-width: 0; }

/* شبکهٔ خودتنظیم — بدون media query تعداد ستون را تطبیق می‌دهد.
   این ستون فقرات ریسپانسیو محیط کار است. */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--gap-block));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col, 17rem), 100%), 1fr));
}
.grid--sm { --col: 13rem; }
.grid--md { --col: 17rem; }
.grid--lg { --col: 22rem; }

/* شبکهٔ ثابت — جایی که تعداد ستون معنا دارد */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-block); }
.cols--tight { gap: var(--s-4); }

/* نگه‌داشتن سه‌ستونه در موبایل — برای ردیف اعداد سربرگ روم که مقدارها کوتاه‌اند
   و روی‌هم‌افتادن‌شان صفحه را بی‌دلیل بلند و دکمهٔ «حرف بزن» را پایین می‌اندازد. */
@media (max-width: 560px) {
  .cols-3--keep { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
}
@media (max-width: 400px) {
  .cols-3--keep .metric__value { font-size: var(--t-h3); }
  .cols-3--keep .metric__unit { font-size: 0.625rem; }
}

/* چیدمان محتوا + ستون کنار.
   .split--even خودکفاست: تنها هم به کار می‌رود (بدون .split)، پس باید
   display و gap را خودش بدهد — وگرنه ستون‌ها روی هم می‌ریزند. */
.split,
.split--even {
  display: grid;
  gap: var(--gap-section);
  align-items: start;
}
.split { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split > *,
.split--even > * { min-width: 0; }

@media (max-width: 1100px) {
  .split, .split--even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cols-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ردیف اسکرول افقی با چسبندگی — برای کاشی و چیپ در موبایل */
.scroller {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* لبه‌ها تا حاشیهٔ صفحه کشیده می‌شوند تا اسکرول طبیعی حس شود */
  margin-inline: calc(-1 * var(--pad-x, var(--s-4)));
  padding-inline: var(--pad-x, var(--s-4));
  padding-bottom: var(--s-1);
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: none; }
/* داخل کارت، لبه‌ها به تورفتگی کارت می‌چسبند نه به حاشیهٔ صفحه */
.scroller--inset { --pad-x: var(--s-3); }

.divider--dashed { height: 0; border-top: var(--bw) dashed var(--line); }

/* ============================ ابزارها ============================ */
.hidden { display: none !important; }

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

/* پرش به محتوا — برای کاربر صفحه‌کلید */
.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: calc(-1 * var(--s-16));
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  transition: top var(--d-base) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* ============================ ترجیح کاربر ============================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .app-sidebar,
  .app-topbar,
  .tabbar,
  .fab,
  .site-header,
  .site-footer,
  .toasts { display: none !important; }
  body { background: #fff; }
  .app { grid-template-columns: 1fr !important; }
}