/* =========================================================
   QOBIQ: tayanch, konteyner, bo'lim tasmalari
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}

body{
  font-family:var(--font-ui);
  background:var(--srf-canvas);
  color:var(--txt-primary);
  font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--txt-link)}
img{max-width:100%;height:auto;display:block}

/* TEGINISHNI KUTMASLIK.

   Mobil brauzerlar bosilgandan keyin ~300 ms kutadi: odam ikki
   marta tez bosib sahifani kattalashtirmoqchi bo'lishi mumkin.
   Bizda kattalashtiriladigan mazmun yo'q, kutish esa har
   bosishni "sekin" qilib ko'rsatadi.

   DIQQAT: bu `user-scalable=no` EMAS. Sahifani barmoq bilan
   kattalashtirish ochiq qoladi — u ko'rish qobiliyati past
   odamlar uchun zarur va uni o'chirish qo'pol xato bo'lardi.
   Bu yerda faqat IKKI MARTA BOSIB kattalashtirish, ya'ni
   tugmaga ikki marta bosilganda kutish, olib tashlanadi. */
a,button,summary,label,[role="button"]{touch-action:manipulation}

/* Ochiq menyuda barmoq ro'yxat oxiriga yetganda sahifaning
   o'zi surila boshlaydi va menyu "sirg'anib ketgandek"
   bo'ladi. contain shuni to'sadi. */
.panel-menyu.ochiq{overscroll-behavior:contain}

/* Klaviatura bilan yuruvchilar uchun */
.otish{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--brand);color:var(--txt-on-brand);
  padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:700;
}
.otish:focus{left:0}

/* ---- Bo'lim tasmasi ----
   Har bo'lim TO'LIQ KENGLIKDA fon oladi, mazmun ichkarida
   markazlashadi. Shunda uzun sahifa bo'lib-bo'lib o'qiladi. */
.tasma{padding:var(--bolim-y) var(--bolim-x);position:relative}
.ichki{max-width:var(--sayt-eni);margin:0 auto;width:100%}
.tor{max-width:var(--sayt-tor)}

.tasma--pergament{background:var(--tasma-pergament)}
.tasma--oq{background:var(--tasma-oq)}
.tasma--suyak{background:var(--tasma-suyak)}

/* To'q tasma — sud zali ohangi. Ichidagi ranglar qayta
   belgilanadi, aks holda to'q fonda o'qilmaydi. */
.tasma--togq{background:var(--tasma-togq);color:var(--law-navy-100)}
.tasma--togq h2,.tasma--togq h3{color:var(--law-parch-50)}
.tasma--togq .yorliq{color:var(--law-brass-300)}
.tasma--togq .yorliq::before{background:var(--law-brass-400)}
.tasma--togq .lede{color:var(--law-navy-200)}
.tasma--togq a{color:var(--law-brass-300)}

.tasma + .tasma{border-top:1px solid var(--line-soft)}
.tasma--togq + .tasma,.tasma + .tasma--togq{border-top:0}

/* ---- Sarlavha oilasi ---- */
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.16}
h1{font-size:var(--h1);text-wrap:balance}
h2{font-size:var(--h2);text-wrap:balance;margin-bottom:14px}
h3{font-family:var(--font-ui);font-size:var(--h3);font-weight:700;letter-spacing:-.005em;line-height:1.35}

.lede{font-size:var(--lede);color:var(--txt-secondary);line-height:1.7;max-width:62ch}

/* ---- Bo'lim yorlig'i va BO'LIM RAQAMI ----

   Ilgari yorliq oldida qisqa jez chiziqcha turardi. Endi uning
   o'rnida BO'LIM RAQAMI: 01, 02, 03... Sahifa shu bilan
   ro'yxatlangan hujjatga o'xshaydi — o'quvchi qayerdaligini
   bilib turadi.

   Raqam markupda yozilmaydi, CSS hisoblagichi beradi: bo'lim
   qo'shsangiz yoki o'rnini almashtirsangiz raqamlar o'zi
   qayta tartiblanadi. Qo'lda yozilsa, birinchi qo'shilgan
   bo'limdayoq adashib ketardi. */
main{counter-reset:bolim}

/* HISOBLAGICH TASMADA EMAS, YORLIQNING O'ZIDA.

   Ilgari har `.tasma` hisobni oshirardi va `#raqamlar` uchun
   alohida istisno kerak bo'lardi (u yorliqsiz bo'lim).

   Yorliqlar soni kamaytirilgach (sakkiztadan uchtaga — sabab
   pastdagi izohda) o'sha usul buzildi: hisob baribir har
   tasmada oshaverar va qolgan yorliqlar 02, 06, 10 bo'lib,
   raqamlar sakrab ketgandek ko'rinardi.

   Endi hisobni yorliqning o'zi oshiradi. Ya'ni raqam
   "nechanchi tasma" emas, "nechanchi belgilangan bo'lim"
   degani va u doim 01, 02, 03 bo'lib boradi. Yorliq
   qo'shsangiz yoki olib tashlasangiz raqamlar o'zi
   qayta tartiblanadi — istisno yozish shart emas. */
.yorliq{counter-increment:bolim}

.yorliq{
  display:flex;align-items:baseline;gap:12px;
  font-family:var(--font-mono);
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-accent);margin-bottom:16px;
}
.yorliq::before{
  content:counter(bolim, decimal-leading-zero);
  flex-shrink:0;
  font-weight:700;
  color:var(--accent);
  /* Raqamdan keyin ingichka hoshiya — ular bir butun bo'lib
     o'qilsin, ikki alohida narsa emas. */
  padding-right:12px;
  border-right:1px solid var(--line-accent);
}
.tasma--togq .yorliq::before{color:var(--law-brass-300);border-right-color:rgba(221,188,133,.30)}

.bolim-bosh{margin-bottom:clamp(32px,4vw,54px)}

/* Yopishib turuvchi panel bo'lim sarlavhasini bosib qolmasin:
   havoladan sakraganda brauzer shuncha joy qoldiradi. */
section[id],header[id]{scroll-margin-top:76px}