/* =========================================================
   BO'LIM NAMOYISHLARI

   Peshtoqdagi "varaqa" tili butun sahifaga tarqatildi: har bo'lim
   o'zini gapirib emas, KO'RSATIB tushuntiradi. Shu sabab bu yerdagi
   hamma narsa bitta tildan: to'q tekis yuza, 4px burchak, monoshrift
   yorliq, jez hoshiya, tartib raqamlari.

   BIR QOIDA: markupda har doim TUGALLANGAN holat turadi, JS uni
   bo'shatib qaytadan to'ldiradi. Shu sabab quyidagi qoidalarning
   ko'pchiligi "namoyish ishlayotganda" holatiga tegishli —
   .namoyish sinfi JS tomonidan emas, MARKUPDA turadi va faqat
   qo'shimcha sinflar (ishlamoqda / tayyor / faol) almashadi.

   Harakat prefers-reduced-motion bilan 08-jonlanish.css da
   umumiy tarzda o'chiriladi.
   ========================================================= */

/* ---------------------------------------------------------
   UMUMIY VARAQA — peshtoqdagi .hujjat bilan bir xil, lekin
   yorug' tasmalarda ham turishi kerak. Shuning uchun fon
   token orqali beriladi.
   --------------------------------------------------------- */
.varaqa{
  background:var(--srf-inverse);
  border:1px solid rgba(221,188,133,.18);
  border-left:2px solid var(--law-brass-500);
  border-radius:4px;
  color:var(--law-parch-50);
  overflow:hidden;
}
.varaqa-bosh{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;
  border-bottom:1px solid rgba(221,188,133,.16);
}
.varaqa-nom,.varaqa-manba{
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.varaqa-nom{color:var(--law-brass-300)}
.varaqa-manba{color:var(--law-navy-300)}

.varaqa-qator{padding:13px 16px 15px;border-bottom:1px solid rgba(221,188,133,.09)}
.varaqa-qator:last-child{border-bottom:0}
.varaqa-yorliq{
  display:block;margin-bottom:7px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--law-navy-300);
}
.varaqa-matn{font-size:.87rem;line-height:1.55;color:var(--law-parch-50);min-height:2.7em}

/* Yozuv kursori */
.kursor{
  display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;
  background:var(--law-brass-300);
  animation:kursorLip 1s steps(1) infinite;
}
@keyframes kursorLip{0%,50%{opacity:1}51%,100%{opacity:0}}

/* =========================================================
   1. IMKONIYATLAR — chapda ro'yxat, o'ngda varaqa

   Ilgari bu yerda oltita katta karta bor edi va har birida
   uch qatordan matn — jami 40 qatordan ortiq o'qish. Endi
   ro'yxatda bitta qator, tushuntirishni esa varaqa ko'rsatadi.
   ========================================================= */
.imk{
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:clamp(26px, 3vw, 52px);
  align-items:start;
}

.imk-royxat{list-style:none;counter-reset:imk}
.imk-band{
  counter-increment:imk;
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;
  padding:13px 0 13px 16px;
  border-bottom:1px solid var(--line-soft);
  transition:opacity var(--dur) var(--ease);
}
.imk-band:last-child{border-bottom:0}
/* Joriy bandni belgilovchi jez tayoqcha — chapda */
.imk-band::before{
  content:"";position:absolute;left:0;top:13px;bottom:13px;width:2px;
  background:var(--accent);
  transform:scaleY(0);transform-origin:top;
  transition:transform .4s var(--ease);
}
.imk-band.joriy::before{transform:scaleY(1)}

/* JORIY BANDNING SANOG'I.
   Ilgari faol bo'lmagan bandlar 50% ga xiralashardi va butun
   ro'yxat kulrang, o'chgandek ko'rinardi — eng yoqimsiz joyi shu
   edi. Endi teskarisi: hech narsa xiralashmaydi, faqat JORIY band
   kuchayadi va uning tagida qancha vaqt qolganini ko'rsatuvchi jez
   chiziq to'ladi. Ya'ni harakat "o'chirish" emas, "yoqish" orqali
   beriladi. */
.jonli-yur .imk-band:not(.joriy) .imk-nom{color:var(--txt-secondary)}
.imk-band.joriy{background:linear-gradient(90deg,var(--accent-soft),transparent 70%)}
.imk-band.joriy .imk-nom{color:var(--txt-primary)}
.imk-band.joriy .imk-raqam{color:var(--accent)}
.imk-band .imk-nom,.imk-band .imk-raqam{transition:color var(--dur) var(--ease)}

/* Sanoq chizig'i — bandning tagida, faqat joriysida */
.imk-band::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--accent);
}
.imk-band.joriy::after{animation:imkSanoq var(--sanoq, 5.5s) linear forwards}
@keyframes imkSanoq{from{width:0}to{width:100%}}

.imk-raqam{
  grid-row:1 / span 2;
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.06em;color:var(--txt-accent);
  padding-top:3px;
}
.imk-nom{font-family:var(--font-ui);font-size:1rem;font-weight:700;color:var(--txt-primary)}
.imk-izoh{font-size:.86rem;color:var(--txt-secondary);line-height:1.5}

/* ---- O'ngdagi varaqa ---- */
/* Varaqa nomi JS'da almashadi — CSS attr() bilan emas, chunki
   nom markupda ham ko'rinib turishi kerak. */

/* Ishlov chizig'i — o'lchov shkalasi kabi to'ladi */
.imk-chiziq{display:block;height:2px;margin-top:11px;background:rgba(221,188,133,.14);overflow:hidden}
.imk-chiziq > i{display:block;height:100%;width:100%;background:var(--law-brass-500)}
.jonli-yur .imk-chiziq > i{width:0}
.imk-varaqa.ishlamoqda .imk-chiziq > i{animation:imkTol 1.4s cubic-bezier(.4,0,.2,1) forwards}
.imk-varaqa.tayyor .imk-chiziq > i{width:100%;animation:none;background:var(--law-verd-500)}
@keyframes imkTol{from{width:0}to{width:100%}}
.imk-varaqa.tayyor .imk-ishlov{color:var(--law-verd-300)}

.imk-natijalar{list-style:none}
.imk-natijalar li{
  display:flex;align-items:baseline;gap:11px;
  padding:8px 0;border-bottom:1px solid rgba(221,188,133,.07);
}
.imk-natijalar li:last-child{border-bottom:0}
.imk-natijalar .raqam{
  font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  color:var(--law-brass-400);flex-shrink:0;min-width:2ch;
}
.imk-natija{font-size:.85rem;line-height:1.45;color:var(--law-navy-100)}
/* Natija faqat "tayyor" bo'lganda ko'rinadi — tuzilma esa doim
   turadi. Qatorlar chapdan surilib chiqadi, ikkinchisi kechikib:
   shunda ular "birdan paydo bo'ldi" emas, "yozib qo'yildi" bo'lib
   o'qiladi. */
.jonli-yur .imk-varaqa .imk-natija{opacity:0;transform:translateX(-10px)}
.imk-varaqa.tayyor .imk-natija{
  opacity:1;transform:none;
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.imk-varaqa.tayyor .imk-natijalar li:nth-child(2) .imk-natija{transition-delay:.13s}

/* Natija raqami ham javob kelgach jonlanadi */
.imk-natijalar .raqam{transition:color .3s var(--ease)}
.jonli-yur .imk-varaqa .imk-natijalar .raqam{color:var(--law-navy-300)}
.imk-varaqa.tayyor .imk-natijalar .raqam{color:var(--law-brass-400)}

/* VARAQ AG'DARISH — imkoniyat almashganda.
   Ilgari mazmun jimgina almashardi va o'tish sezilmasdi. Endi
   varaqa qisqa vaqtga bir oz orqaga ketib qaytadi: ko'z o'zgarish
   sodir bo'lganini ilg'aydi, lekin sakrash bo'lmaydi. */
.imk-varaqa{transition:transform .3s var(--ease),opacity .3s var(--ease)}
.imk-varaqa.agdarilmoqda{opacity:.25;transform:translateY(6px) scale(.995)}

/* =========================================================
   2. OVOZ — ovozli xabar va jonli qo'ng'iroq
   ========================================================= */
.ovoz-panellar{
  display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}

/* ---- TO'LQIN ----------------------------------------------------
   Ilgari 55 ta ustun bir xil naqsh bo'yicha, bir xil keyframe bilan
   sakrardi — natija shtrix-kodga o'xshardi. Endi uchta narsa
   o'zgardi:

     1. Har ustunning O'Z amplitudasi bor (--a). Uni JS ochilishda
        tasodifiy beradi; JS yo'q bo'lsa CSS'dagi 7 lik naqsh
        zaxira bo'lib qoladi.
     2. Yozib olish CHIZILADI: ustunlar chapdan o'ngga birin-ketin
        yonadi, xuddi mikrofon tovushni yozib borayotgandek.
     3. O'qish ALOHIDA holat: ijro boshi suriladi, o'tgan ustunlar
        jez, qolgani xira — haqiqiy ovozli xabar pleyeridek.

   Ustunlar orasidagi farq shu uch holatda ko'rinadi, shuning uchun
   bir xil element uch xil ma'no beradi va animatsiya "bezak"
   bo'lib qolmaydi.
   ----------------------------------------------------------------- */
.tolqin{display:flex;align-items:center;gap:2px;height:36px}
.tolqin > i{
  display:block;flex:1 1 0;min-width:2px;height:100%;
  border-radius:1px;
  background:var(--law-brass-400);
  transform:scaleY(var(--a, .4));
  transform-origin:center;
}
.tolqin--jim > i{opacity:.35}
.tolqin--past{height:22px;margin-top:12px}

/* SKANER CHIZIG'I — "matnga o'girilmoqda" bosqichida to'lqin
   ustidan chapdan o'ngga o'tadi. Bu bosqich ilgari hech qanday
   harakatsiz o'tardi: yozuv o'zgarardi, ekranda esa hech nima
   bo'lmasdi va kutish uzoq tuyulardi. */
[data-namoyish="xabar"] .varaqa-qator{position:relative;overflow:hidden}
[data-namoyish="xabar"].ogirilmoqda .tolqin::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--law-brass-200);
  box-shadow:0 0 12px 2px rgba(221,188,133,.45);
  animation:skaner 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
[data-namoyish="xabar"] .tolqin{position:relative}
@keyframes skaner{from{left:0}to{left:100%}}

/* Zaxira amplitudalar (JS yo'q bo'lsa). 7 ta ustunda takrorlanadi,
   ustunlar soni esa 55 — 7 ga bo'linmaydi, shuning uchun naqsh
   ko'zga takror bo'lib tashlanmaydi. */
.tolqin > i:nth-child(7n+1){--a:.22}
.tolqin > i:nth-child(7n+2){--a:.52}
.tolqin > i:nth-child(7n+3){--a:.86}
.tolqin > i:nth-child(7n+4){--a:.38}
.tolqin > i:nth-child(7n+5){--a:.66}
.tolqin > i:nth-child(7n+6){--a:.28}
.tolqin > i:nth-child(7n+7){--a:.74}

/* 1-holat: YOZIB OLINMOQDA — ustunlar birin-ketin chiziladi */
.tolqin.chizilmoqda > i{transform:scaleY(.05);opacity:.28}
.tolqin.chizilmoqda > i.yonik{
  transform:scaleY(var(--a, .4));opacity:1;
  /* Ozgina "otib o'tish" — ustun tik chiqib, joyiga qo'nadi.
     Aynan shu narsa harakatni tirik qiladi. */
  transition:transform .22s cubic-bezier(.2,1.5,.4,1),opacity .12s linear;
}

/* 2-holat: O'QILMOQDA — ijro boshi chapdan o'ngga suriladi */
.tolqin.ijro > i{opacity:.26;transition:opacity .18s linear}
.tolqin.ijro > i.otildi{opacity:1;background:var(--law-brass-300)}

/* 3-holat: GAPIRYAPTI — ustunlar o'z amplitudasi atrofida tebranadi.
   Har biriga boshqa davomiylik va manfiy kechikish beriladi, shunda
   ular bir vaqtda sakramaydi. */
.tolqin.gapiryapti > i{
  animation:tolqinUr .7s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * -.043s);
  animation-duration:calc(.42s + var(--i) * .009s);
}
@keyframes tolqinUr{
  from{transform:scaleY(.1)}
  to  {transform:scaleY(var(--a, .5))}
}

/* ---- Ovozli xabar ---- */
.ovoz-vaqt{font-family:var(--font-mono);font-size:.68rem;color:var(--law-navy-300);letter-spacing:.08em}
[data-namoyish="xabar"] .tolqin{margin-top:2px}
/* Holat yozuvi JS'da almashadi (CSS content bilan emas): matn
   markupda ham turishi kerak, aks holda JS yo'q brauzerda maydon
   bo'sh qolardi. */
.ovoz-holat{margin-top:11px}
[data-namoyish="xabar"].yozilmoqda .ovoz-holat{color:var(--law-brass-300)}
[data-namoyish="xabar"].tayyor .ovoz-holat{color:var(--law-verd-300)}
.ovoz-matn{font-size:.87rem;line-height:1.55;color:var(--law-parch-50);min-height:2.6em}
/* Matn kelguncha bu joy uzuq chiziq bilan belgilanadi — bo'sh
   maydon emas, TO'LDIRILADIGAN MAYDON bo'lib o'qiladi. Blankaning
   o'zi shu ishni qiladi. */
[data-namoyish="xabar"]:not(.tayyor) .ovoz-matn{
  border-bottom:1px dashed rgba(221,188,133,.20);
}

/* "Javob" qatori — uchburchak, yozuv va davomiylik */
.ovoz-javob{display:flex;align-items:center;gap:10px;font-size:.86rem;color:var(--law-parch-50)}
.ovoz-ijro{
  width:0;height:0;flex-shrink:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:10px solid var(--law-brass-300);
}
.ovoz-davom{margin-left:auto;font-family:var(--font-mono);font-size:.68rem;color:var(--law-navy-300);letter-spacing:.08em}

/* ---- Qo'ng'iroq ---- */
.qng-holat{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--law-navy-300);
}
.qng-nuqta{width:6px;height:6px;border-radius:50%;background:var(--law-navy-400);flex-shrink:0}
[data-namoyish="qongiroq"].ulanmoqda .qng-nuqta{background:var(--law-amber-300);animation:nuqtaLip 1s steps(1) infinite}
[data-namoyish="qongiroq"].ulandi .qng-nuqta{background:var(--law-verd-300)}
@keyframes nuqtaLip{0%,50%{opacity:1}51%,100%{opacity:.25}}
.qng-vaqt{font-family:var(--font-mono);font-size:.68rem;color:var(--law-navy-300);letter-spacing:.08em}

.qng-tolqinlar{display:grid;gap:9px}
.qng-satr{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px}
.qng-kimligi{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--law-navy-300);
}
/* Gapirmayotgan tomon TEKIS CHIZIQQA aylanadi — jim turgani shundan
   darhol ko'rinadi. Ikkalasi ham tebranib tursa, kim gapirayotgani
   bilinmasdi. */
.qng-satr .tolqin > i{transition:transform .3s var(--ease),opacity .3s var(--ease)}
[data-namoyish="qongiroq"].ulandi .qng-satr .tolqin > i{transform:scaleY(.06);opacity:.4}
[data-namoyish="qongiroq"].siz-gapiryapti .qng-satr--siz .tolqin > i,
[data-namoyish="qongiroq"].ai-gapiryapti  .qng-satr--ai  .tolqin > i{
  opacity:1;
  animation:tolqinUr .7s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * -.043s);
  animation-duration:calc(.42s + var(--i) * .009s);
}
[data-namoyish="qongiroq"].ai-gapiryapti .qng-satr--ai .tolqin > i{background:var(--law-verd-300)}
/* Gapirayotgan tomonning yorlig'i ham yonadi */
.qng-satr{transition:opacity var(--dur) var(--ease)}
[data-namoyish="qongiroq"].siz-gapiryapti .qng-satr--ai,
[data-namoyish="qongiroq"].ai-gapiryapti  .qng-satr--siz{opacity:.45}

/* Qatorlar markupda tayyor turadi, gap joyi oldindan band —
   shuning uchun panel bo'yi o'zgarmaydi va matn yozilayotganda
   sahifa sakramaydi. */
.qng-suhbat{display:grid;gap:9px}
.qng-gap{min-height:1.45em}
.qng-qator{
  display:grid;grid-template-columns:52px 1fr;gap:12px;
  font-size:.84rem;line-height:1.45;
  padding-bottom:8px;border-bottom:1px solid rgba(221,188,133,.07);
}
.qng-qator:last-child{border-bottom:0;padding-bottom:0}
.qng-kim{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--law-navy-300);padding-top:3px;
}
.qng-qator--ai .qng-gap{color:var(--law-brass-200)}
.qng-gap{color:var(--law-parch-50)}

/* =========================================================
   3. QANDAY ISHLAYDI — qadamlar navbat bilan yonadi
   ========================================================= */
.qadamlar--jonli{position:relative}
/* Qadamlar ustidan o'tuvchi yo'l. Faqat keng ekranda: bitta
   ustunga tushganda gorizontal chiziqning ma'nosi qolmaydi. */
.qadam-yol{display:none}
@media (min-width:760px){
  .qadam-yol{
    display:block;position:absolute;left:0;right:0;top:42px;height:2px;
    background:var(--line);
  }
  .qadam-yol::after{
    content:"";position:absolute;left:0;top:0;height:100%;
    width:var(--otildi, 0%);
    background:var(--accent);
    transition:width .6s cubic-bezier(.65,0,.35,1);
  }
  /* Yo'lning boshida yuruvchi nuqta — jarayon "ketayotgani"ni
     ko'rsatadi. Chiziqning o'zi bilan bir vaqtda suriladi. */
  .qadam-nuqta{
    position:absolute;top:50%;left:var(--otildi, 0%);
    width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
    border-radius:50%;background:var(--accent);
    transition:left .6s cubic-bezier(.65,0,.35,1);
  }
  .qadam-nuqta::after{
    content:"";position:absolute;inset:-4px;border-radius:50%;
    border:1px solid var(--accent);
    animation:nuqtaHalqa 1.6s ease-out infinite;
  }
  @keyframes nuqtaHalqa{
    0%{transform:scale(.6);opacity:.8}
    100%{transform:scale(1.9);opacity:0}
  }
  .tasma--togq .qadam-yol{background:rgba(221,188,133,.18)}
  /* Yo'l qadam raqamlari ortidan o'tadi, ustidan emas */
  .qadamlar--jonli .qadam{z-index:1}
  .qadamlar--jonli .qadam::after{display:none}
}
.qadamlar--jonli .qadam{transition:opacity .4s var(--ease)}
/* Xiralashtirish faqat namoyish yurayotganda — JS yo'q bo'lsa
   to'rtala qadam ham bir xil to'liq ko'rinadi.
   Qiymatlar ataylab yumshoq: 0.42 juda o'chgan ko'rinardi. */
.jonli-yur .qadam:not(.faol):not(.otdi){opacity:.55}
.jonli-yur .qadam.otdi{opacity:.78}

/* Joriy qadamning raqami kattalashadi va jez rangga o'tadi.
   Ilgari faqat rang o'zgarardi va o'tish deyarli sezilmasdi. */
.qadamlar--jonli .qadam::before{
  transition:color .35s var(--ease),transform .35s cubic-bezier(.2,1.4,.4,1);
  transform-origin:left bottom;
}
.qadamlar--jonli .qadam.faol::before{color:var(--accent);transform:scale(1.14)}
.qadamlar--jonli .qadam.otdi::before{color:var(--accent)}

/* Sarlavha va matn ham joriy qadamda kuchayadi */
.qadamlar--jonli .qadam h3{transition:color .35s var(--ease)}
.qadamlar--jonli .qadam.faol h3{color:var(--txt-accent)}
/* Joriy qadamning raqami ostida qisqa jez chiziq */
.qadamlar--jonli .qadam.faol .qadam-belgi{transform:scaleX(1)}
.qadam-belgi{
  display:block;position:absolute;left:0;top:42px;width:26px;height:2px;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}

/* =========================================================
   4. MUDDAT SANOG'I — hikoya bo'limi

   Bo'limning butun gapi bitta: muddat qisqa va u o'tib ketadi.
   Yozib tushuntirgandan ko'ra ko'rsatgan kuchliroq.
   ========================================================= */
.muddat{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:6px 22px;
  padding:clamp(20px,2.2vw,28px);
  background:var(--srf-raised);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:4px;
  max-width:var(--sayt-tor);
}
.mud-son{
  grid-row:1 / span 2;
  font-family:var(--font-display);font-size:clamp(2.6rem,2rem + 2vw,3.6rem);
  font-weight:600;line-height:1;color:var(--txt-primary);
  font-variant-numeric:tabular-nums;
  min-width:2.2ch;text-align:right;
}
.mud-izoh{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-accent);
}
.mud-gap{font-size:.92rem;color:var(--txt-secondary);line-height:1.6}
.mud-chiziq{
  grid-column:1 / -1;height:2px;margin-top:14px;
  background:var(--line);overflow:hidden;
}
.mud-chiziq > i{
  display:block;height:100%;width:var(--ulush, 100%);
  background:var(--accent);
  transition:width .55s var(--ease),background var(--dur) var(--ease);
}
.muddat.otdi{border-left-color:var(--bad)}
.muddat.otdi .mud-son{color:var(--bad)}
.muddat.otdi .mud-izoh{color:var(--bad)}
.muddat.otdi .mud-chiziq > i{background:var(--bad)}

/* =========================================================
   5. TAQQOSLASH — nega biz

   Tepada BITTA savol yoziladi, tagida esa o'sha savolga ikki xil
   javob yonma-yon to'ladi. Chapdagi javob bir zumda va bitta
   qatorda tugaydi; o'ngdagi esa bosqichma-bosqich to'ladi.
   Farqni AYTMAYMIZ — vaqt farqining o'zi ko'rsatadi.
   ========================================================= */
.taqqos{max-width:var(--sayt-eni)}

/* ---- Savol ---- */
.tq-savol{
  max-width:var(--sayt-tor);
  padding:16px 20px;
  margin-bottom:clamp(18px,2vw,28px);
  background:var(--srf-sunken);
  border:1px solid var(--line);
  border-left:2px solid var(--line-strong);
  border-radius:4px;
}
.tq-savol-yorliq{
  display:block;margin-bottom:7px;
  font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--txt-muted);
}
.tq-savol-matn{
  font-size:.95rem;line-height:1.55;color:var(--txt-primary);
  min-height:1.6em;
}
.tq-savol .kursor{background:var(--accent)}

/* ---- Ikki ustun ---- */
.tq-ustunlar{
  display:grid;gap:clamp(14px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:stretch;
}
.tq-ustun{
  padding:clamp(18px,2vw,24px);
  border-radius:4px;
  border:1px solid var(--line);
  background:var(--srf-raised);
}
.tq-oddiy{border-left:2px solid var(--line-strong)}
/* O'ng ustun urg'uli: aynan shu tomon bizniki */
.tq-biz{
  border-left:2px solid var(--accent);
  box-shadow:var(--sh-sm);
}
.tq-bosh{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:11px;margin-bottom:6px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--font-mono);font-size:.64rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
}
.tq-oddiy .tq-bosh{color:var(--txt-muted)}
.tq-biz .tq-bosh{color:var(--txt-accent)}

.tq-qator{
  display:flex;align-items:baseline;gap:11px;
  padding:10px 0;border-bottom:1px solid var(--line-soft);
  font-size:.88rem;line-height:1.5;color:var(--txt-secondary);
  transition:opacity .42s var(--ease),transform .42s var(--ease);
}
.tq-qator:last-child{border-bottom:0}
.tq-biz .tq-qator{color:var(--txt-primary)}
.tq-biz .tq-qator b{font-weight:700}
/* Yashirish faqat namoyish yurayotganda */
.jonli-yur .tq-qator{opacity:0;transform:translateY(8px)}
.jonli-yur .tq-qator.chiqdi{opacity:1;transform:none}

.tq-belgi{
  font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  flex-shrink:0;min-width:2ch;
}
.tq-oddiy .tq-belgi{color:var(--txt-muted)}
.tq-biz .tq-belgi{color:var(--txt-accent)}

/* Chapdagi ustun tugagach xiralashadi: javob berib bo'ldi va
   u yerda boshqa hech narsa bo'lmaydi. O'ngdagisi esa davom
   etadi — ikkalasining vaqt farqi ko'zga tashlanadi. */
.tq-oddiy{transition:opacity .5s var(--ease)}
.taqqos.chap-tugadi .tq-oddiy{opacity:.55}

/* Ishlov qatori asosiy matndan kichikroq — u holat, gap emas */
.varaqa-matn--kichik{font-size:.81rem;color:var(--law-navy-200);min-height:1.5em}