/* =========================================================================
   Masterclass — ictimai sənəd səhifəsi (/mexfilik, /qaydalar, /kuki, …)
   -------------------------------------------------------------------------
   Bu fayl `styles.css`-in ÜSTÜNƏ gəlir və ondan ASILIDIR: token qatı
   (--canvas, --ink, --accent …), `@font-face` elanları, baza sıfırlaması,
   naviqasiya və futer orada təyin olunub. Burada yalnız sənəd səhifəsinin
   özünə aid qaydalar var.

   Niyə ayrı fayl: landing-in `styles.css`-i nginx-də bir saatlıq keşdədir və
   hər ziyarətçidə onsuz da yüklüdür. Sənəd qaydalarını ora yazsaydıq bir
   səhifə üçün lazım olan ~4 KB bütün ziyarətçilərə gedərdi; ayrı fayl isə
   yalnız sənədi açan adama düşür.

   Vokabulyar `mobile/src/styles/tokens.css`-dəki `.rich-text` / `.legal-body`
   siyahısı ilə EYNİDİR, çünki mənbəsi də birdir: serverdəki `pkg/htmlsafe`
   icazə siyahısı. Redaktorda görünən hər düymə burada bir qaydaya çevrilir —
   yoxsa operator başlıq qoyur, saytda adi mətn görünür («yazdım, itdi»).
   Ölçülər isə tətbiqin deyil, LANDİNG-in dilindədir: bu, telefon ekranındakı
   kart deyil, brauzer səhifəsidir.
   ========================================================================= */


/* ---------- `hidden` HƏQİQƏTƏN gizlətməlidir ----------
   ÖLÇÜLMÜŞ BAQ (2026-09-03): sənəd yükləndikdən sonra «Sənəd yüklənir…»
   kartı mətnin ÜSTÜNDƏ qalırdı. `sened.js` `stateEl.hidden = true` yazır və
   atribut DOM-da həqiqətən qoyulurdu (yoxlandı: `stateHidden: true`) —
   çəkilməyə səbəb CSS idi:

     brauzerin öz qaydası   [hidden]     { display: none }   xüsusiyyət 0,1,0
     bizim qayda            .doc__state  { display: flex }   xüsusiyyət 0,1,0

   Xüsusiyyət EYNİDİR, ona görə sonra gələn qayda qazanır — yəni bizimki.
   `display` təyin edən hər sinif `hidden`-i SƏSSİZCƏ söndürür; bu faylda üç
   belə sinif var (`.doc__state`, `.doc__more`, `.doc__more-list`) və
   dördüncüsü yazılanda eyni baq təkrarlanardı.

   Ona görə qayda ayrı-ayrı siniflərə deyil, ÜMUMİ yazılır: bu səhifədə
   `hidden` həmişə gizlətmə deməkdir. `!important` qəsdlidir — funksiyası
   məhz sinif qaydalarını üstələməkdir. */
[hidden] { display: none !important; }


/* ---------- Səhifə çərçivəsi ----------
   `--pad-x` landing-dən gəlir: fon tam eni tutur, mətn isə `--content-max`-də
   mərkəzləşir. Sənəddə ondan başqa bir hədd də var — `--doc-max`.

   Səbəb ölçülüb: hüquqi mətn 1680px-lik sətirdə oxunmur, göz sətrin sonundan
   növbəti sətrin başına qayıda bilmir. 72ch ≈ 720px — mətn üçün qəbul edilmiş
   oxu eni. Yəni SƏHİFƏ tam ekrandır, SƏTİR isə deyil. */
.doc {
  --doc-max: 72ch;
  padding: clamp(24px, 3.4vw, 52px) var(--pad-x) clamp(40px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}

/* Sənədin bütün blokları eyni oxu sütununda dayanır. `margin-inline` ilə,
   `max-width` + `auto` deyil: `--pad-x` onsuz da mərkəzləşdirmə işini görür,
   ikinci mərkəzləşdirmə ultra-geniş ekranda sütunu sağa sürüşdürürdü. */
.doc > * {
  width: 100%;
  max-width: var(--doc-max);
}

/* ---------- Yol (breadcrumb) ----------
   Tətbiqdəki `DocumentScreen` ilə eyni məntiq: cari sənədin adı TƏKRARLANMIR,
   o, onsuz da başlıqdadır. */
.doc__crumbs {
  font: 600 13px/1.4 var(--font);
  color: var(--ink-2);   /* səhifə fonunda AA — bax `.doc__meta` şərhi */
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.doc__crumbs a { color: var(--ink-2); }
.doc__crumbs a:hover { color: var(--accent-strong); }
.doc__crumbs span[aria-hidden] { color: var(--ink-2); }

/* ---------- Başlıq ---------- */
.doc__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc__title {
  font: 900 clamp(26px, 3.6vw, 38px)/1.14 var(--font);
  letter-spacing: -.025em;
  color: var(--ink);
}

/* Tarix SERVERDƏN gəlir (`updated_at`), mətnin öz «Son yenilənmə: [tarix]»
   prefiksi ilə yan-yana durmasın deyə burada bir dəfə yazılır.
   `tabular-nums` — nizamnamə: bütün rəqəmlər. */
/* Rəng `--ink-3` DEYİL, `--ink-2`-dir. ÖLÇÜLDÜ (2026-09-03): `--ink-3`
   (#7d7371) KART fonunda (#fff) 4.60:1 verir — `styles.css`-dəki şərh məhz
   o rəqəmi yazır — amma bu sətir kartın İÇİNDƏ deyil, SƏHİFƏ fonundadır
   (#f7f6f3) və orada nisbət 4.26:1-ə düşür, yəni AA-dan aşağı.
   `--ink-2` eyni yerdə 6.05:1 verir. */
.doc__meta {
  font: 600 13px/1.4 var(--font);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Sənədin kartı ----------
   Mətn kartın içindədir. Səbəb tətbiqdəkinin eynisidir: kənarsız mətn
   səhifədə «hazır deyil» kimi oxunur. Kölgə YOXDUR — nizamnamə: kölgə yalnız
   üzən elementdə; burada saç teli sərhəd. */
.doc__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 34px);
}

/* ---------- Sənədin mətni (`pkg/htmlsafe` vokabulyarı) ---------- */

.legal-body {
  font: 500 clamp(15px, 1.05vw, 16.5px)/1.72 var(--font);
  color: var(--ink-2);
  /* Fasiləsiz söz — uzun URL, uzun e-poçt — kartı yarıb keçməsin.
     Nizamnamənin 2-ci şərti: üfüqi sürüşmə səhifə gövdəsində heç vaxt. */
  overflow-wrap: anywhere;
}

.legal-body > :first-child { margin-top: 0; }
.legal-body > :last-child  { margin-bottom: 0; }

/* Birinci abzas giriş cümləsidir — bir ton tünd. */
.legal-body > p:first-child { color: var(--ink); }

.legal-body h2 {
  font: 800 clamp(17px, 1.5vw, 21px)/1.25 var(--font);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 26px 0 10px;
}

/* Saç teli ayırıcı «yeni bölmə başladı» siqnalıdır: hüquqi mətndə
   nömrələnmiş başlıqlar bir-birinə oxşayır və yalnız qalınlıqla fərqlənəndə
   oxucu yerini itirir. Birinci başlıqda ayırıcı yoxdur — orada ayrılacaq
   bölmə hələ yoxdur. */
.legal-body > h2:not(:first-child) {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.legal-body h3 {
  font: 800 clamp(15px, 1.2vw, 17px)/1.3 var(--font);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 20px 0 8px;
}

.legal-body p { margin: 0 0 12px; }

.legal-body ul,
.legal-body ol { margin: 0 0 12px; padding-inline-start: 22px; }
.legal-body li { margin: 0 0 6px; }
.legal-body li::marker { color: var(--ink-3); }

.legal-body a { color: var(--accent-strong); text-decoration: underline; }
.legal-body a:hover { color: var(--accent-hover); }

.legal-body strong { color: var(--ink); font-weight: 700; }

.legal-body blockquote {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 10px 10px 0;
  color: var(--ink-2);
}

/* Kod bloku səhifəni yana sürüşdürmür: sətir qırılır, üfüqi sürüşmə yalnız
   blokun ÖZ içindədir. */
.legal-body pre {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--hatch-a);
  font: 500 13.5px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-x: auto;
}
.legal-body code {
  font: 500 .92em/1.5 var(--mono);
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--hatch-a);
}
.legal-body pre code { padding: 0; background: none; }

.legal-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 14px 0;
}

.legal-body hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 18px 0;
}

.legal-body table { border-collapse: collapse; width: 100%; }

/* Rəng SİNİFDİR, `style` deyil — sənədin içinə yazılmış `color:#000`
   qaranlıq rejimdə qara fonda qara mətn deməkdir. Siyahı serverdəki
   `allowedClasses` ilə eynidir. */
.legal-body .mc-text-accent { color: var(--accent-strong); }
.legal-body .mc-text-muted  { color: var(--ink-3); }
.legal-body .mc-text-ok     { color: var(--tint-ok-ink); }
.legal-body .mc-text-warn   { color: var(--tint-warn-ink); }
.legal-body .mc-mark {
  background: var(--tint-warn);
  color: var(--tint-warn-ink);
  border-radius: 4px;
  padding: 0 4px;
}


/* ---------- Vəziyyət kartı (yüklənir · xəta · JS yoxdur) ----------
   Bir forma, üç hal. Nizamnamənin üç hissəli qaydası: səbəbi de → itkini
   inkar et → növbəti addımı ver. Ona görə kartın quruluşu sabitdir və yalnız
   mətn dəyişir — hər hal üçün ayrı düzülüş yazılsaydı biri unudulardı. */
.doc__state {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.doc__state h2 {
  font: 800 clamp(16px, 1.4vw, 19px)/1.3 var(--font);
  letter-spacing: -.02em;
  color: var(--ink);
}

.doc__state p {
  font: 500 14.5px/1.6 var(--font);
  color: var(--ink-2);
  margin: 0;
}

/* «Növbəti addım» — kartdakı yeganə əməliyyat, ona görə yeganə aksent.
   Nizamnamə: aksent yalnız əməliyyat üçün. */
.doc__action {
  align-self: flex-start;
  margin-top: 4px;
  background: var(--btn);
  color: var(--btn-ink);
  font: 700 14px/1 var(--font);
  padding: 13px 18px;
  border-radius: 10px;
  min-height: 44px;              /* toxunma hədəfi */
  display: inline-flex;
  align-items: center;
}
.doc__action:hover { background: var(--btn-hover); color: var(--btn-ink); }

/* Yüklənmə halı «xəta» kimi oxunmasın: fon neytraldır, düymə yoxdur. */
.doc__state--loading { border-style: dashed; background: transparent; }
.doc__state--loading h2 { color: var(--ink-2); }


/* ---------- Digər sənədlər ----------
   Tətbiqdəki `DocumentScreen` ilə eyni: razılaşmanı oxuyan adam ardınca
   məxfilik siyasətini axtarır — geri qayıtmadan keçir.
   «Hüquqi sənədlər» adlı ümumi rəf YOXDUR (CLAUDE.md), sənədlər bir-bir
   sadalanır. */
.doc__more { display: flex; flex-direction: column; gap: 10px; }

.doc__more h2 {
  font: 800 11px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--ink-2);
}

.doc__more-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc__more-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: 700 14.5px/1.3 var(--font);
  color: var(--ink);
}
.doc__more-list a:hover { border-color: var(--accent-line); color: var(--accent-strong); }

/* Şevron mətnin bir hissəsi deyil — ekran oxuyucusu onu oxumamalıdır. */
.doc__more-list a::after {
  content: '›';
  font-size: 20px;
  line-height: 1;
  color: var(--ink-3);
  flex: none;
}


/* ---------- Toxunuş cihazları ----------
   Hover həqiqi deyil: toxunuşdan sonra rəng «ilişib qalmır». */
@media (hover: none) {
  .doc__crumbs a:hover,
  .doc__more-list a:hover { color: inherit; border-color: var(--line); }
}

/* ---------- Çap ----------
   Sənədi çap edən adam mətni istəyir: kart çərçivəsi, naviqasiya və
   «digər sənədlər» siyahısı kağızda yer yeyir. */
@media print {
  .nav, .footer, .doc__more, .doc__crumbs, .doc__action { display: none; }
  .doc { padding: 0; }
  .doc > * { max-width: none; }
  .doc__card { border: 0; padding: 0; background: none; }
  .legal-body, .doc__title, .doc__meta { color: #000; }
}