/* Shell — header, drawer, pastki nav, footer. Spec §4.
   Chegara faqat pastki chiziq; karta, soya, gradient yo'q. */

/* Sticky panel: kontent uning ostidan o'tadi, shuning uchun yupqa parda va
   blur. Matn to'liq o'qiladi — parda 82%, blur esa faqat ostidagi harakatni
   yumshatadi. Blur qo'llab-quvvatlanmasa fon to'liq noshaffof bo'ladi. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--canvas); transition: transform 220ms var(--ease-out); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header { background: var(--panel-veil); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
}

/* O'qish rejimi: pastga aylantirilganda panel yuqoriga chiqib ketadi va
   matn butun ekranni egallaydi. Yuqoriga aylantirilsa qaytadi. */
[data-reading="hidden"] .site-header { transform: translateY(-100%); }
/* Lavanda eskizi (docs/mockups/2026-10-15-imkonia-tema-lavanda.html): belgi chapda, navigatsiya
   va asboblar o'ngda bir guruh bo'lib turadi. */
.header-inner { width: min(var(--content-width), calc(100% - 64px)); height: var(--header-height); margin: auto; display: flex; align-items: center; justify-content: flex-start; gap: 40px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 21px; font-weight: 500; letter-spacing: -.03em; text-decoration: none; color: var(--text-primary); }
/* Qisqa belgi (logo) «Imkonia» yozuvi oldida — spec 2026-10-16-lavanda-ui-tatbiq §5.1.
   Rasm temadagi `--brand-mark` dan keladi, havola va uning matni o'zgarmaydi. */
.brand::before { content: ""; flex: none; width: 26px; height: 26px; margin-right: 9px; background: var(--brand-mark) center / contain no-repeat; pointer-events: none; }
@media (max-width: 900px) { .brand::before { width: 22px; height: 22px; } }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--accent); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .nav-link:hover { color: var(--text-primary); } .nav-link[aria-current="page"]:hover { color: var(--accent); } }
.utilities { display: flex; align-items: center; gap: 4px; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--text-secondary); background: transparent; cursor: pointer; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .icon-button:hover { color: var(--text-primary); } }
/* Kabinet — eskizdagi avatar doirasi: yumshoq lavanda fon, faol rangdagi belgi. */
.utilities .icon-button[href="/kabinet"] { color: var(--accent); background: var(--accent-soft); }
/* «Pro» — kabinet belgisi yonida, faqat faol Imkonia obunasida (shell.js). */
.icon-button.has-pro { grid-auto-flow: column; gap: 5px; width: auto; padding: 0 10px 0 8px; }
.account-pro { padding: 1px 7px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); font-size: 11px; font-weight: 750; letter-spacing: .03em; line-height: 1.5; }
.bottom-link.has-pro { position: relative; }
.bottom-link .account-pro { position: absolute; top: 3px; left: calc(50% + 7px); padding: 0 5px; font-size: 9.5px; }
/* Til almashtirgich — ikonka va uchta dumaloq.

   Ilgari `<select>` edi: brauzer uni kompyuterda ro'yxat, mobilda esa OS ning
   suzuvchi oynasi qilib chizardi. Bitta kod, ikki xil ruhiyat. Endi ikkalasida
   ham bir xil.

   Kirish harakati `transform` da emas, mustaqil `translate`/`scale`
   xossalarida: `motion.css` bosish javobini `transform: scale(.97)` bilan
   beradi va ikkalasi bitta xossada bo'lsa biri ikkinchisini o'chirardi.
   Mustaqil xossalar `transform` dan OLDIN qo'llanadi, ya'ni ular qo'shiladi. */
.language-switch { position: relative; display: inline-flex; }
.language-trigger { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.language-trigger[aria-expanded="true"] { color: var(--accent); }
.language-options { position: absolute; z-index: 30; top: calc(100% + 6px); left: 50%; display: grid; gap: 6px; margin: 0; padding: 0; translate: -50% 0; opacity: 0; visibility: hidden; transition: opacity 140ms var(--ease-standard), visibility 140ms step-end; }
.language-options[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 180ms var(--ease-out); }
/* 44px — sensorli nishonning eng kichik o'lchami. Ikonka tugmasi bilan bir xil. */
.language-option { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text-secondary); background: var(--canvas-raised); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; cursor: pointer; translate: 0 -6px; scale: .94; transition: translate 200ms var(--ease-out), scale 200ms var(--ease-out), color var(--press-fast) var(--ease-standard), border-color var(--press-fast) var(--ease-standard), background-color var(--press-fast) var(--ease-standard); }
.language-options[data-open="true"] .language-option { translate: 0 0; scale: 1; }
/* Uchta element uchun stagger — dumaloqlar ketma-ket ochiladi. Uzun ro'yxatda
   bu taqiqlangan (sekinlik hissi), uchtada esa harakatga yo'nalish beradi. */
.language-options[data-open="true"] .language-option:nth-child(2) { transition-delay: 40ms; }
.language-options[data-open="true"] .language-option:nth-child(3) { transition-delay: 80ms; }
.language-option[aria-checked="true"] { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
@media (hover: hover) and (pointer: fine) { .language-option:hover { border-color: var(--accent); color: var(--accent); } .language-option[aria-checked="true"]:hover { color: var(--text-on-accent); } }
.mobile-menu-button { display: none; }

/* Drawer — mobil navigatsiya */
.drawer-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; justify-items: end; border: 0; padding: 0; width: 100%; background: var(--backdrop); opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease-standard), visibility 220ms step-end; }
.drawer-backdrop[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 220ms var(--ease-standard); }
.drawer { width: min(84vw, 320px); height: 100%; padding: max(12px, env(safe-area-inset-top)) 16px 24px; color: var(--text-primary); background: var(--canvas); box-shadow: var(--shadow-float); transform: translateX(100%); transition: transform 240ms var(--ease-out); overflow-y: auto; }
.drawer-backdrop[data-open="true"] .drawer { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; min-height: 52px; margin-bottom: 8px; padding-left: 8px; font-size: 16px; font-weight: 500; }
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav .nav-link { min-height: 48px; padding: 0 8px; border-top: 1px solid var(--border-subtle); font-size: 15px; }
.drawer-nav .nav-link:first-child { border-top: 0; }

/* Pastki nav — faqat mobil */
.mobile-bottom-nav { display: none; }
.bottom-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 50px; color: var(--text-tertiary); text-decoration: none; font-size: 10px; font-weight: 500; line-height: 1; }
.bottom-link[aria-current="page"] { color: var(--accent); }

.site-footer { width: min(var(--content-width), calc(100% - 64px)); margin: 56px auto 0; padding: 18px 0 24px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: 12px; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 900px) {
  body { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); }
  .header-inner { width: calc(100% - 24px); gap: 8px; }
  .desktop-nav, .desktop-only { display: none; }
  /* Navigatsiya yashiringach asboblar baribir o'ng chetda turadi. */
  .utilities { margin-left: auto; }
  .mobile-menu-button { display: inline-grid; }
  /* Hamkorlar telefonda ham tepada qoladi: til, tema, hamkor, menyu. HTML'da
     u tildan oldin turadi, shuning uchun tartib `order` bilan beriladi. */
  .utilities .desktop-only[href="/hamkorlar"] { display: inline-grid; order: 1; }
  .mobile-menu-button { order: 2; }
  .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); min-height: var(--bottom-nav-height); padding: 4px 8px env(safe-area-inset-bottom); border-top: 1px solid var(--border-subtle); background: var(--canvas); transition: transform 220ms var(--ease-out); }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .mobile-bottom-nav { background: var(--panel-veil); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
  }
  /* O'qish rejimida pastki nav ham ketadi: matn to'liq ekranga chiqadi. */
  [data-reading="hidden"] .mobile-bottom-nav { transform: translateY(100%); }
  .site-footer { width: calc(100% - 48px); flex-direction: column; gap: 6px; }
}

/* ─── Telegram Mini App (spec 2026-09-27 §5.3, §6) ───────────────────────
   `data-muhit="telegram"` ni <head> dagi yuklovchi birinchi chizishdan oldin
   qo'yadi — miltillash bo'lmaydi. Telegram ichida xarid ko'rinmaydi:
   obunaga havola, narx, chek, «To'lovlarim»; «Chiqish» ham (keyingi
   ochilishda kirish baribir avtomatik). `.tg-faqat` — faqat Telegram'da. */
.tg-faqat { display: none; }
[data-muhit="telegram"] .tg-faqat { display: block; }
[data-muhit="telegram"] a[href^="/obuna"],
[data-muhit="telegram"] a[href^="https://imkonia.uz/obuna"],
[data-muhit="telegram"] [data-tolov],
[data-muhit="telegram"] [data-account-signout],
[data-muhit="telegram"] [data-login-form],
[data-muhit="telegram"] [data-account-register] { display: none !important; }

/* ─── Imkonia obunasi taklifi — Telegram ichidagi yagona blok (2026-09-29) ──────
   Mini App'da obunaga havola, narx va karta yo'q (spec 2026-09-27 §5.3,
   2026-09-28 §6.6). Pro to'sig'ining hammasida (11 joy) bitta blok:
   «Imkoniyatlar va shartlarni ko'rish» va ostida nima bo'lishi — sahifa
   brauzerda ochiladi. Tuzilish `telegram/taklif.js`, holat telegram.js.
   Sukunat: karta, soya va gradient yo'q — tugma, izoh va bo'sh joy.

   Harakat (kamdan-kam ko'rinadi — 260 ms gacha ruxsat):
   - blok tayyor bo'lganda bir marta 6 px pastdan ko'tariladi. Tayyorgacha
     (`kutish`) u umuman chizilmaydi: bayroq va rasmiy skript kelguncha
     bo'sh joy yoki ishlamaydigan tugma ko'rinmaydi;
   - kod so'ralayotganda tugma ostida ingichka chiziq to'ladi — sahifa
     o'tishi chizig'i kabi (pastda): boshi tez, oxiri sekin, 92% da to'xtaydi.
     Cheksiz aylanma yo'q (loyiha qoidasi, test-next-yangi-home/task8). Javob
     kelsa chiziq oxirigacha yetib so'nadi;
   - tugmadagi ikki ikonka bitta katakda ustma-ust: tashqi havola → belgi.
     Faqat shaffoflik va o'lcham o'zgaradi — tugma kengligi qimirlamaydi;
   - sichqonchada ikonka yo'nalishiga siljiydi (tashqi havola — yuqori-o'ngga,
     mehmonning «kirish» o'qi — o'ngga);
   - holat satri («Sahifa brauzerda ochildi») o'z harakati bilan chiqadi.
   Bosish javobi `.button` orqali (motion.css). */
.tg-brauzer { display: none; }
[data-muhit="telegram"] .tg-brauzer:not([hidden]):not([data-holat="kutish"]) {
  display: grid; justify-items: start; gap: 10px; margin-top: 16px; text-align: start;
  animation: tg-taklif-kirish var(--page-in) var(--ease-out) both;
}
.tg-brauzer-matn, .tg-brauzer-izoh, .tg-brauzer-holat { margin: 0; max-width: 46ch; line-height: 1.5; }
.tg-brauzer-matn { font-size: 14px; color: var(--text-secondary); }
.tg-brauzer-matn:empty { display: none; }
.tg-brauzer-tugma { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding-inline: 20px 18px; }
.tg-brauzer-tugma::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
.tg-brauzer[data-holat="yuklanmoqda"] .tg-brauzer-tugma::after { opacity: 1; animation: tg-taklif-yuk 3s var(--ease-out) forwards; }
.tg-brauzer[data-holat="ochildi"] .tg-brauzer-tugma::after { animation: tg-taklif-yetdi 260ms var(--ease-out) forwards; }
.tg-brauzer-ikonka { display: inline-grid; flex: none; width: 16px; height: 16px; }
.tg-brauzer-ikonka > span {
  grid-area: 1 / 1; display: grid; place-items: center;
  transition: opacity 160ms var(--ease-standard), transform 220ms var(--ease-out);
}
.tg-brauzer-ikonka svg { display: block; width: 16px; height: 16px; }
.tg-brauzer-ikonka-tayyor { opacity: 0; transform: scale(.6); }
.tg-brauzer[data-holat="yuklanmoqda"] .tg-brauzer-ikonka-tashqi { opacity: .35; }
.tg-brauzer[data-holat="ochildi"] .tg-brauzer-ikonka-tashqi { opacity: 0; transform: scale(.6); }
.tg-brauzer[data-holat="ochildi"] .tg-brauzer-ikonka-tayyor { opacity: 1; transform: none; }
.tg-brauzer[data-holat="yuklanmoqda"] .tg-brauzer-tugma { cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .tg-brauzer[data-holat="tayyor"] .tg-brauzer-tugma:hover .tg-brauzer-ikonka-tashqi { transform: translate(2px, -2px); }
  .tg-brauzer[data-tg-kim="mehmon"][data-holat="tayyor"] .tg-brauzer-tugma:hover .tg-brauzer-ikonka-tashqi { transform: translateX(3px); }
}
.tg-brauzer-izoh { font-size: 13px; color: var(--text-tertiary); }
.tg-brauzer-holat { font-size: 14px; color: var(--text-secondary); }
.tg-brauzer-holat:not([hidden]) { animation: tg-taklif-kirish 220ms var(--ease-out) both; }
.tg-brauzer[data-holat="xato"] .tg-brauzer-holat { color: var(--danger); }
@keyframes tg-taklif-kirish { from { opacity: 0; transform: translateY(6px); } }
@keyframes tg-taklif-yuk { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
@keyframes tg-taklif-yetdi { from { transform: scaleX(.92); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } to { transform: scaleX(1); opacity: 0; } }
/* Telefonda tugma to'liq kenglikda — bosh barmoq nishoni va bir xil chiziq. */
@media (max-width: 560px) {
  [data-muhit="telegram"] .tg-brauzer:not([hidden]):not([data-holat="kutish"]) { justify-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  [data-muhit="telegram"] .tg-brauzer:not([hidden]):not([data-holat="kutish"]), .tg-brauzer-holat:not([hidden]) { animation: none; }
  .tg-brauzer-ikonka > span { transition: none; }
  .tg-brauzer[data-holat="yuklanmoqda"] .tg-brauzer-tugma::after { animation: none; transform: scaleX(.6); }
  .tg-brauzer[data-holat="ochildi"] .tg-brauzer-tugma::after { animation: none; opacity: 0; }
}
/* Joylar: qatorli (flex) konteyner ichida blok o'z qatorini egallaydi. */
.malaka-gate-actions > .tg-brauzer, .next-search-foot > .tg-brauzer, .account-maqsad-actions > .tg-brauzer { flex: 1 1 100%; margin-top: 0; }
.drug-locked > .tg-brauzer, .reader-locked > .tg-brauzer { margin-top: 0; }
/* Malaka to'sig'ida telefonda blok ikonka ustunini ham oladi: tor ustunda
   tugma yozuvi ikki qatorga bo'linardi (Chrome'da 390 px da ko'rilgan). */
@media (max-width: 560px) { .malaka-gate-actions:has(> .tg-brauzer) { grid-column: 1 / -1; } }

/* Bosh sahifada oxirgi «orqaga» (Telegram, telefon; egasi 29.09.2026):
   «Yana bir marta bosilsa, ilova yopiladi». Ko'rinishi suzuvchi xabar bilan
   bir (`receipt.css` `.floating-toast`) — u bosh sahifada yuklanmaydi,
   shuning uchun shu yerda. ✕ yo'q va bosilmaydi: eslatma o'zi ketadi.
   Chiqishi va ketishi — `js/oyna.js` (`telegram.js` `chiqishEslat`). */
.tg-chiqish {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 999px;
  color: var(--text-on-inverse); background: var(--inverse);
  box-shadow: var(--shadow-float); font-size: 14px; font-weight: 600; line-height: 1.4;
  text-align: center; pointer-events: none;
  transform: translateX(-50%);
}
@media (max-width: 900px) { .tg-chiqish { bottom: calc(var(--bottom-nav-height) + 18px + env(safe-area-inset-bottom)); } }
/* Telegram kirish ekrani: raqam qatori (2-bosqich §3.2). */
.tg-raqam-qiymat { margin: 0; font-size: 16px; font-weight: 600; color: var(--text-primary); }
/* Raqam kelgach — ikki yo'l haqida ogohlantirish (egasi 28.09.2026). To'q
   sariq (29.09.2026): raqam login'da qolsa yangi, bo'sh profil ochiladi —
   eski profildagi obuna va progress unda yo'q. Odam buni o'tkazib yubormasin. */
.tg-eslatma { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--warning); border-left-width: 4px; border-radius: var(--radius-control); background: var(--warning-soft); }
.tg-eslatma p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-body); }
.tg-eslatma strong { color: var(--text-primary); font-weight: 600; }
.tg-eslatma .tg-eslatma-bosh { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.tg-eslatma-bosh [data-icon] { display: inline-flex; flex: none; color: var(--warning); }
/* Oyna boshqaruvi — kompyuterdagi Telegram (2026-09-28; telegram/ekran.js).
   Sarlavha qatorining o'ng chetida. Oddiy oynada ⛶ yaxlit panel ochadi
   (Windows joylashtirish paneli uslubi): to'liq ekran va brauzer mulyajlari.
   Panel foni to'liq — orqadagi sahifa ko'rinmaydi. To'liq ekranda o'rniga
   «oddiy oynaga qaytish» turadi (yopish — Telegram'ning o'z ✕ tugmasi). */
.tg-ekran { position: relative; display: inline-flex; gap: 8px; }
:root[data-tg-toliq] .tg-ekran-oddiyda,
:root:not([data-tg-toliq]) .tg-ekran-toliqda { display: none; }
.tg-ekran-panel {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0;
  display: grid; grid-template-columns: repeat(2, 92px); gap: 6px; padding: 10px;
  border: 1px solid var(--border-subtle); border-radius: 14px;
  background: var(--canvas-raised); box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; translate: 0 -4px;
  transition: opacity 140ms var(--ease-standard), translate 140ms var(--ease-standard), visibility 140ms step-end;
}
.tg-ekran-panel[data-open="true"] { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out); }
.tg-ekran-variant {
  display: grid; justify-items: center; gap: 6px; padding: 8px 4px;
  border: 1px solid transparent; border-radius: 10px; background: none;
  color: var(--text-secondary); font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer;
  transition: background-color var(--press-fast) var(--ease-standard), color var(--press-fast) var(--ease-standard);
}
.tg-ekran-variant:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tg-mulyaj { position: relative; display: block; width: 64px; height: 42px; border: 1.5px solid var(--border-strong); border-radius: 6px; background: var(--canvas); transition: border-color var(--press-fast) var(--ease-standard); }
.tg-mulyaj i { position: absolute; left: 3px; right: 3px; border-radius: 2px; }
.tg-mulyaj-toliq i { top: 3px; bottom: 3px; background: var(--accent); }
.tg-mulyaj-brauzer i:first-child { top: 3px; height: 6px; background: var(--border-strong); }
.tg-mulyaj-brauzer i:last-child { top: 12px; bottom: 3px; background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) {
  .tg-ekran-variant:hover { background: var(--canvas); color: var(--text-primary); }
  .tg-ekran-variant:hover .tg-mulyaj { border-color: var(--accent); }
}
.tg-ekran-izoh { grid-column: 1 / -1; margin: 2px 2px 0; font-size: 12px; line-height: 1.4; color: var(--text-tertiary); text-align: center; }
@media (prefers-reduced-motion: reduce) { .tg-ekran-panel, .tg-ekran-panel[data-open="true"] { translate: none; transition: none; } }
/* Kompyuterda to'liq ekranda sarlavha qatori yashirilmaydi — «oddiy oynaga
   qaytish» tugmasi doim ko'rinib turadi (joy yetarli). */
[data-tg-kompyuter][data-tg-toliq][data-tg-yigiq] .site-header,
[data-tg-kompyuter][data-tg-toliq][data-reading="hidden"] .site-header { transform: none; opacity: 1; pointer-events: auto; }
[data-tg-kompyuter][data-tg-toliq][data-tg-yigiq] .reader-progress,
[data-tg-kompyuter][data-tg-toliq][data-reading="hidden"] .reader-progress { transform: none; }
/* Telefondagi nom bandi (Telegram tugmalari orasidagi sahifa nomi) kompyuterda
   kerak emas: qatorda menyu bor, band uning ustiga tushardi. */
[data-tg-kompyuter][data-tg-toliq] .tg-sarlavha { display: none; }

/* ─── Mini App: o'qish chizig'i doim ko'rinadi (2026-09-28) ─────────────
   Saytda pastga aylantirilganda panel bilan birga chiziq ham ketadi.
   Telegram ichida tepada Telegram'ning o'z sarlavhasi qoladi, ya'ni
   o'qish paytida chiziq umuman ko'rinmas edi. Endi u ekran tepasiga
   yopishib qoladi va bir oz qalinroq. */
[data-muhit="telegram"] .reader-progress, [data-muhit="telegram"] .reader-progress > i { height: 2px; }
[data-muhit="telegram"][data-reading="hidden"] .reader-progress { transform: translateY(calc(-1 * var(--header-height))); opacity: 1; }
/* Qator pastga aylantirilganda ham yashirinadi (`data-tg-yigiq`). Oddiy
   oynada chiziq uchun bu holat qoidasi yo'q edi: u yashirilgan qatorning
   pastki chegarasida osilib qolib, matnni kesib o'tardi (egasining
   kompyuterdagi skrinshoti, 28.09 — manbalar ro'yxati ustida). To'liq ekran
   va kompyuterdagi to'liq ekran uchun o'z qoidalari bor (pastda va yuqorida). */
[data-tg-sarlavha][data-tg-yigiq] .reader-progress { transform: translateY(calc(-1 * var(--header-height))); opacity: 1; }

/* ─── Mini App sarlavhasi va plitkalar (2026-09-28) ─────────────────────
   `data-tg-sarlavha` da — yuklovchi uni Telegram ichida hammaga qo'yadi
   (egasi 28.09.2026 ochdi; ilgari admin yoki `?sinov=tgsarlavha`).

   Plitkalar: til, tema, hamkorlar, menyu — har biri o'z yuzasida. «ENT
   Medical» yozuvi yashiriladi: Telegram sarlavhasida u allaqachon bor.
   Pastga aylantirilganda qator yashirinadi, yuqoriga — qaytadi
   (`data-tg-yigiq`, telegram.js). */
[data-tg-sarlavha] .brand { display: none; }
[data-tg-sarlavha] .header-inner { justify-content: flex-end; }
[data-tg-sarlavha] .utilities { gap: 8px; }
[data-tg-sarlavha] .utilities .icon-button { width: 44px; height: 44px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--canvas-raised); color: var(--text-primary); }
[data-tg-sarlavha][data-tg-yigiq] .site-header { transform: translateY(-100%); }
/* Menyu tugmasi Mini App'da yashirin (egasi, 2026-09-28): bandlari pastki
   navigatsiyada va bosh sahifa plitkalarida bor. Til, tema, hamkorlar qoladi. */
[data-tg-sarlavha] .mobile-menu-button { display: none; }
/* Keng oynada navda oltinchi band — «Bosh sahifa» (telegram.js, 29.09.2026).
   Tor kompyuter oynasida (901–1100 px) u ikki qatorga bo'linardi: yozuvlar
   bir qatorda, oraliq qisqaroq. */
[data-tg-sarlavha] .nav-link { white-space: nowrap; }
@media (max-width: 1100px) { [data-tg-sarlavha] .desktop-nav { gap: 16px; } }

/* To'liq ekran (`data-tg-toliq`): Telegram sarlavhasi yo'q, uning ikki
   tugmasi sahifa ustida suzadi. `--tg-ust` — status bar, `--tg-tugma` —
   Telegram tugmalari qatori (telegram.js, `safeAreaInset` va
   `contentSafeAreaInset`). Tugmalar orasiga sahifa nomi yoziladi. Panel
   qatori band ostida turadi va yashirilganda band ostiga kirib ketadi;
   band o'zi doim joyida. `--header-height` bandni ham o'z ichiga oladi —
   yopishqoq elementlar (o'qish chizig'i, yon ustunlar) avtomatik suriladi. */
.tg-sarlavha { display: none; }
:root[data-tg-toliq] { --tg-bosh: calc(var(--tg-ust, 0px) + var(--tg-tugma, 0px)); }
/* Qator balandligi to'liq ekranda har kenglikda 52 px (quyida) — kompyuterda ham. */
:root[data-tg-toliq] { --header-height: calc(52px + var(--tg-bosh)); }
[data-tg-toliq] .site-header { padding-top: var(--tg-bosh); transition: transform 220ms var(--ease-out), opacity 120ms var(--ease-out); }
/* Yashirishda qator band ostidan O'TMAYDI (2026-09-28, kadrma-kadr o'lchov):
   band shaffof va xiralashtirilgan, qator birinchi 2–3 kadrdayoq uning
   ostiga kirib «uzilib» yo'qolar, qolgan ~200 ms orqasida xira dog' bo'lib
   qimirlardi. Endi qator joyida so'nadi, keyin ko'rinmas holda band ostiga
   suriladi. Qaytishda — yuqoridagi qoida: band ostidan sirg'alib tushadi
   (bu yo'nalish silliq edi). O'tish manzil holatidan olinadi, shuning uchun
   ikki yo'nalish ikki xil. O'qish rejimi (mavzu sahifasi) ham shu qatorni
   yashiradi — u ham shu yerda. */
[data-tg-toliq][data-tg-yigiq] .site-header,
[data-tg-toliq][data-reading="hidden"] .site-header {
  opacity: 0; pointer-events: none;
  transition: opacity 160ms var(--ease-out), transform 0s linear 160ms;
}
[data-tg-toliq] .header-inner { height: 52px; }
[data-tg-toliq] .drawer { padding-top: calc(var(--tg-bosh) + 8px); }
[data-tg-toliq] .tg-sarlavha {
  position: fixed; top: 0; left: 0; right: 0; z-index: 25;
  display: grid; place-items: center; height: var(--tg-bosh);
  /* 96 px — Telegram tugmalari chap va o'ngda; nom ularning ostiga kirmaydi. */
  padding: var(--tg-ust) 96px 0; box-sizing: border-box;
  background: var(--canvas); cursor: pointer;
  view-transition-name: tg-sarlavha;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  [data-tg-toliq] .tg-sarlavha { background: var(--panel-veil); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); }
}
.tg-sarlavha-matn { display: grid; justify-items: center; max-width: 100%; min-width: 0; view-transition-name: tg-sarlavha-matn; }
.tg-sarlavha-nom, .tg-sarlavha-ost { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tg-sarlavha-nom { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--text-primary); }
.tg-sarlavha-ost { font-size: 12px; line-height: 1.3; color: var(--text-tertiary); }
.tg-sarlavha-ost:empty { display: none; }
.tg-sarlavha[data-ikki="1"] .tg-sarlavha-nom { font-size: 15px; }
/* O'qish chizig'i band ostiga yopishadi — panel qatori ketganda ham. */
[data-tg-toliq][data-reading="hidden"] .reader-progress,
[data-tg-toliq][data-tg-yigiq] .reader-progress { transform: translateY(-52px); opacity: 1; }

/* ─── Yopishqoq chegara (2026-09-28) ────────────────────────────────────
   `--header-height` qator yashiringanda ham o'zgarmaydi. Unga yopishgan
   element (admin navigatsiyasi) yashirilgan qator o'rnida osilib qolardi,
   bo'sh yo'lakdan ortidagi narsa o'tib ko'rinardi. `--yopishqoq-ust` —
   qatorning haqiqiy pastki chegarasi: oddiy oynada va saytdagi o'qish
   rejimida 0, telefonning to'liq ekranida band osti, kompyuterning to'liq
   ekranida qator yashirilmaydi. Yopishqoq element uni `top` da ishlatadi,
   `transform` da emas: element hali yopishmagan bo'lsa, `top` ta'sir
   qilmaydi, `transform` esa uni sarlavha matni ustiga chiqarib qo'yardi. */
:root { --yopishqoq-ust: var(--header-height); }
:root[data-reading="hidden"],
:root[data-tg-sarlavha][data-tg-yigiq] { --yopishqoq-ust: 0px; }
:root[data-tg-toliq][data-tg-yigiq],
:root[data-tg-toliq][data-reading="hidden"] { --yopishqoq-ust: var(--tg-bosh); }
:root[data-tg-kompyuter][data-tg-toliq][data-tg-yigiq],
:root[data-tg-kompyuter][data-tg-toliq][data-reading="hidden"] { --yopishqoq-ust: var(--header-height); }

/* Sahifadan sahifaga: band joyida turadi, faqat nom almashadi — eski nom
   so'nadi, yangisi 6 px pastdan ko'tariladi (motion.css qoidasi: chiqish
   kirishdan qisqa). */
::view-transition-old(tg-sarlavha-matn) { animation: page-fade-out var(--page-out) var(--ease-standard) both; }
::view-transition-new(tg-sarlavha-matn) { animation: tg-nom-kirish var(--page-in) var(--ease-out) both; }
@keyframes tg-nom-kirish { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(tg-sarlavha-matn), ::view-transition-new(tg-sarlavha-matn) { animation: none; }
}

/* Sahifa o'tishi chizig'i (shell.js, 2026-09-28). Havola bosilgach 120 ms
   ichida sahifa almashmasa chiqadi; tez o'tishda umuman ko'rinmaydi. Boshi
   tez, oxiri sekin va 92% da to'xtaydi — yangi sahifa uni o'zi almashtiradi.
   Rang — faol holat tokeni (progress), harakatni kamaytirish rejimida qotgan. */
.otish-chizigi {
  position: fixed; top: var(--tg-ust, 0px); left: 0; right: 0; z-index: 60;
  height: 2px; pointer-events: none;
  background: var(--accent);
  transform-origin: 0 50%;
  animation: otish-chizigi 8s var(--ease-out) forwards;
}
@keyframes otish-chizigi { from { transform: scaleX(0); } to { transform: scaleX(.92); } }
@media (prefers-reduced-motion: reduce) {
  .otish-chizigi { animation: none; transform: scaleX(.5); }
}

/* ─── Uzun bosish — ilova hissi (spec 2026-09-29 §6, sinov) ──────────────
   `data-tg-premium` ni yuklovchi qo'yadi. Barmoq tugma, pastki nav yoki
   plitkada ushlab turilganda so'z belgilanmaydi va iOS havola oynasi
   chiqmaydi — bu Mini App sayt ekanini birinchi sotadigan narsa.
   Matnga (mavzu, standart, javob) tegilmaydi: belgilash va nusxa o'z joyida.
   Maydonlar qaytadan ochiladi — iOS WebKit'da `user-select: none` ostidagi
   maydonga yozib bo'lmay qolishi mumkin (sarlavhadagi qidiruv). */
:root[data-tg-premium] :is(.site-header, .mobile-bottom-nav, .drawer, .button, .chip, .icon-button, .quick-tile, .float-pill, a.tile, .tile[href], a.row, .row[href], .quiz-option, .quiz-mode, .lesson-practice-option, .view-option, .language-option, .lesson-pager-link, .home-section-link, .catalog-card) {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
:root[data-tg-premium] :is(input, textarea, [contenteditable="true"], [contenteditable=""]) {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}