/* MasterAI — bazis: reset, tipoqrafika, layout ilkinləri.
 * Yalnız `tokens.css`-dəki dəyişənlərdən istifadə edir. */

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-black); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-xl);  font-weight: var(--weight-bold); }
h4 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); }

p { margin: 0; }

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; height: auto; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

/* Klaviatura ilə naviqasiya edən istifadəçi fokusu HƏMİŞƏ görməlidir.
 * `:focus-visible` siçan tıklamasında görünmür, yalnız klaviaturada. */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* `hidden` atributu HƏMİŞƏ gizlətməlidir.
 *
 * Real render testində tapıldı: brauzerin öz `[hidden] { display: none }`
 * qaydası ilə bizim `.notice { display: flex }` qaydasının spesifikliyi
 * eynidir, sonra gələn qalib gəlir — nəticədə `hidden` xəta qutuları
 * BOŞ QIRMIZI ZOLAQ kimi hər səhifədə görünürdü. Yalnız brauzerdə
 * baxanda üzə çıxan növ səhvdir. */
[hidden] { display: none !important; }

/* Yalnız ekran oxuyucu üçün — vizual olaraq gizli, oxunur. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Layout ---- */

.container {
  width: 100%;
  max-width: var(--width-container);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.prose { max-width: var(--width-prose); }

/* Şaquli yığın — sabit boşluqla. Hər ekranda `margin-bottom`
 * təkrarlamamaq üçün. */
.stack        { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }
.stack--loose { gap: var(--space-6); }
/* Flex sütunda `text-align` uşağın qutusunu mərkəzləmir. */
.stack--center { align-items: center; }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.row--between { justify-content: space-between; }
.row--end     { justify-content: flex-end; }

/* Avtomatik uyğunlaşan şəbəkə — sıxılma nöqtəsi yazmadan.
 * `--grid-min` ilə hər kartın minimum eni tənzimlənir. */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
}

/* Kartların hündürlüyü BƏRABƏRLƏŞMƏSİN. Defolt `stretch` eyni sətirdəki
   bütün kartları ən uzununa çəkir; məzmunu az olan kart nəhəng boş
   qutuya çevrilir. Çat siyahısında bu real olaraq göründü: dəvət kodu
   və gözləyən istəklər olan kartın yanındakı adi kart yarımçıq
   göründü. */
.grid--start { align-items: start; }

/* Statistika şəbəkəsi — mediapulse naxışı: geniş ekranda 4 sütun,
 * mobildə 2 (1 deyil — rəqəmlər qısadır, 1 sütun yer itirir). */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

/* Tam ekran hündürlüyündə mərkəzləşmiş məzmun — giriş/qeydiyyat
 * kimi tək kartlı səhifələr üçün. */
.page-centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

/* Giriş/qeydiyyat/PIN formasının qutusu.
 *
 * REAL BUG İDİ: səhifələr `style="width: var(--width-form)"` yazırdı,
 * yəni SABİT 420px. 390px-lik telefonda (ən çox rast gəlinən ölçü)
 * səhifə üfüqi sürüşürdü - PIN ilə qoşulma ekranı məhz telefonda
 * işlədilir. `max-width` kiçik ekranda daralır, böyükdə isə eyni qalır. */
.form-shell {
  width: 100%;
  max-width: var(--width-form);
}

.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.text-sm    { font-size: var(--text-sm); }
.text-xs    { font-size: var(--text-xs); }

@media (max-width: 768px) {
  .container   { padding: var(--space-4) var(--space-3); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  h1 { font-size: var(--text-2xl); }
  h2 { font-size: var(--text-xl); }
}

/* Hərəkəti azaldılmış rejim — istifadəçinin sistem seçimi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
.row--tight { gap: var(--space-2); }