/* Pediatric Care — harakat va ikonka qatlami
   ══════════════════════════════════════════════════════════════════════════
   Bu fayl oxirgi bo'lib ulanadi va oldingi uslublarni ustidan yozadi.
   Bitta joyda turishining sababi: egri chiziq va davomiylik butun sayt
   bo'ylab bir xil bo'lishi kerak, aks holda har bo'lim o'z ritmida
   harakatlanadi va interfeys yaxlit tuyulmaydi.

   Qoidalar:
   · kirish va chiqish — `ease-out` (darhol qimirlaydi = javob berdi)
   · ekran ichidagi siljish — `ease-in-out`
   · chiqish har doim kirishdan tez: foydalanuvchi qaror qilayotganda sekin,
     tizim javob berayotganda tez
   · faqat `transform` va `opacity` animatsiyalanadi; balandlik zarur
     bo'lgan uchta joyda alohida izohlangan */

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-press:.16s;
  --dur-hover:.18s;
  --dur-enter:.26s;
  --dur-exit:.18s;
}

/* ═══ Ikonkalar ════════════════════════════════════════════════════════════
   Barchasi js/icons.js dan keladigan Lucide SVG lari. O'lchov `1em` —
   konteynerning `font-size` i ikonka o'lchamini belgilaydi, shuning uchun
   emoji turgan joyga qo'yilganda tartib o'zgarmaydi. */

.ent-icon{
  width:1em;height:1em;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.v2-metric-icon,.v2-question-chevron,.v2-bookmark,.v2-review-flag,.v2-master-flag,.v2-check,.v2-x{
  display:inline-grid;place-items:center;line-height:0;
}

/* Kichik o'lchamda 1.9 ingichka ko'rinadi — nishonlar qalinroq chiziladi. */
.v2-review-flag,.v2-master-flag{font-size:15px}
.v2-review-flag .ent-icon,.v2-master-flag .ent-icon{stroke-width:2.2}

/* Belgilangan holat to'ldirilgan shakl bilan o'qiladi, kontur bilan emas —
   ro'yxatni ko'zdan kechirganda belgilangani darhol ajralib tursin. */
.v2-review-flag .ent-icon{fill:currentColor;stroke:none}
.v2-bookmark[data-on="1"] .ent-icon{fill:currentColor}
.v2-mark-action.on .ent-icon{fill:currentColor;stroke:none}

/* Matnli tugmada ikonka matn kegliga emas, o'z o'lchamiga bo'ysunadi:
   12px shriftda 12px ikonka juda mayda chiqadi. */
.v2-mark-action,.v2-read-action,.v2-practice-action{display:inline-flex;align-items:center;gap:7px}
.v2-mark-action .ent-icon,.v2-read-action .ent-icon,.v2-practice-action .ent-icon{width:15px;height:15px;stroke-width:2.1}
.v2-btn .ent-icon,.v2-badge .ent-icon{width:16px;height:16px;stroke-width:2.1}
.v2-feature .ent-icon{width:17px;height:17px;stroke-width:2.2;margin-top:3px}
.v2-check .ent-icon{stroke:var(--v2-success)}
.v2-test-option b{display:inline-flex;align-items:center;gap:5px}
.v2-test-option b .ent-icon{width:14px;height:14px;stroke-width:2.3}
.v2-practice-note{display:flex;align-items:flex-start;gap:8px;margin:0}
.v2-practice-note .ent-icon{width:17px;height:17px;stroke-width:2.1;margin-top:3px}
.v2-theme .ent-icon,.standards-theme .ent-icon{width:19px;height:19px}
.v2-theme,.standards-theme{display:inline-grid;place-items:center;line-height:0}
.v2-admin-link .ent-icon{width:15px;height:15px}

/* ═══ Bosish javobi ════════════════════════════════════════════════════════
   Bosiladigan har bir element bosimga qimirlashi kerak. Buningsiz plitka
   bosilgandan tarmoq javobi kelguncha ekranda hech narsa o'zgarmaydi va
   interfeys "eshitmayapti" degan taassurot qoladi. */

.v2-btn{transition:transform var(--dur-press) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out),opacity var(--dur-hover) ease}
.v2-btn:active:not(:disabled){transform:scale(.97)}

.v2-card.hover,.v2-action-card{transition:transform var(--dur-hover) var(--ease-out),border-color var(--dur-hover) ease,box-shadow var(--dur-hover) var(--ease-out),opacity var(--dur-hover) ease}
.v2-card.hover:active,.v2-action-card:active{transform:scale(.985)}
.v2-card.hover:hover:active,.v2-action-card:hover:active{transform:translateY(-3px) scale(.985)}

/* Plitka bosilgach ma'lumot yuklanadi — o'sha oraliqda plitka band ekanini
   ko'rsatadi, aks holda kutish uzilish bo'lib tuyuladi. */
.v2-card[disabled],.v2-card:disabled{opacity:.62;transform:scale(.99);cursor:progress}

.v2-tab{transition:background .15s var(--ease-out),color .15s var(--ease-out),box-shadow .15s var(--ease-out),transform var(--dur-press) var(--ease-out)}
.v2-tab:active{transform:scale(.98)}
.v2-chip,.v2-qnav button,.v2-option{transition:background .15s var(--ease-out),border-color .15s var(--ease-out),color .15s var(--ease-out),box-shadow .15s var(--ease-out),transform var(--dur-press) var(--ease-out)}
.v2-chip:active,.v2-qnav button:active,.v2-option:active:not(:disabled){transform:scale(.985)}
.v2-bookmark{transition:transform var(--dur-press) var(--ease-out),color .15s ease}
.v2-bookmark:active{transform:scale(.88)}

/* `transition:.15s` = `transition:all` edi — brauzer o'zgargan har qanday
   xossani, jumladan tartibga ta'sir qiladiganini ham animatsiyalardi. */
.v2-mark-action{transition:background .15s ease,border-color .15s ease,color .15s ease,transform var(--dur-press) var(--ease-out)}
.v2-practice-action{transition:background .15s ease,border-color .15s ease,transform var(--dur-press) var(--ease-out)}
.v2-read-action{transition:background .15s ease,border-color .15s ease,color .15s ease,transform var(--dur-press) var(--ease-out)}
.v2-mark-action:active:not(:disabled),.v2-practice-action:active,.v2-read-action:active:not(.done){transform:scale(.97)}

.v2-toast{transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.v2-profile-avatar{transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.v2-profile-trigger:active .v2-profile-avatar{transform:scale(.96)}

/* ═══ Sensorli ekran ═══════════════════════════════════════════════════════
   `:hover` barmoq bilan bosilganda ham yonadi va bosgandan keyin o'sha
   ko'tarilgan holatda qotib qoladi. Sichqonchasi yo'q qurilmada hover
   ko'tarilishini umuman qaytarmaymiz. */
@media (hover:none){
  .v2-card.hover:hover,.v2-action-card:hover{transform:none;box-shadow:var(--v2-shadow-sm);border-color:var(--v2-line)}
  .v2-btn:hover{transform:none;box-shadow:0 9px 24px rgba(8,127,197,.22)}
  .v2-profile-trigger:hover .v2-profile-avatar{transform:none}
  .pharma-card:hover,.standard-card:hover{transform:none;box-shadow:var(--st-shadow-sm)}
}

/* ═══ Savol kartasi ochilishi ══════════════════════════════════════════════
   Asosiy muammo shu edi: `<details>` balandligi animatsiyasiz o'sardi —
   sahifa sakrab kengayardi, matn esa alohida suzib chiqardi, ya'ni ko'z
   bir-biriga bog'lanmagan ikkita harakatni ko'rardi.

   `::details-content` konteynerning o'zini animatsiyalaydi. Qo'llab-
   quvvatlamaydigan brauzerda butun blok tushib qoladi va xatti-harakat
   avvalgidek qoladi — regressiya yo'q. */
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}

  .v2-question::details-content{
    block-size:0;
    overflow:hidden;
    opacity:0;
    transition:
      block-size var(--dur-exit) var(--ease-out),
      opacity .1s ease-out,
      content-visibility var(--dur-exit) allow-discrete;
  }
  .v2-question[open]::details-content{
    block-size:auto;
    opacity:1;
    transition:
      block-size var(--dur-enter) var(--ease-out),
      opacity .2s var(--ease-out) .05s,
      content-visibility var(--dur-enter) allow-discrete;
  }
  /* Balandlik animatsiyalanadigan bo'lgach matnning alohida siljishi ortiqcha. */
  .v2-question .v2-answer{animation:none}
}

/* Balandlik animatsiyasi yo'q brauzer uchun — hech bo'lmasa so'nish qolsin.
   Vertikal siljish olib tashlandi: karta pastga o'sadi, matn esa yuqoridan
   tushardi — ikki qarama-qarshi yo'nalish. */
@keyframes v2Reveal{from{opacity:0}to{opacity:1}}
.v2-answer{animation-duration:.22s;animation-timing-function:cubic-bezier(.23,1,.32,1)}

/* ═══ Tab almashinuvi ══════════════════════════════════════════════════════
   Tab kuniga o'nlab marta bosiladi. 350ms + 12px siljish bunday chastotada
   sekin tuyuladi; indikator esa aksincha darhol javob berishi kerak. */
.v2-panel.active{animation:v2PanelIn .17s var(--ease-out)}
@keyframes v2PanelIn{from{opacity:0}to{opacity:1}}

/* ═══ Ro'yxat paydo bo'lishi ═══════════════════════════════════════════════
   Faqat birinchi chizishda va faqat birinchi kartalarda (JS da cheklangan).
   Filtr yoki qidiruvda takrorlanmaydi: tez-tez ko'riladigan animatsiya
   bezak emas, to'siq bo'lib qoladi. */
@media (prefers-reduced-motion:no-preference){
  .ent-enter{opacity:0;animation:entEnterUp .32s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*40ms)}
}
@keyframes entEnterUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ═══ Mashq paneli (Bildim / Bilmadim) ═════════════════════════════════════
   Oqimning har qadami `innerHTML` bilan almashadi. Balandlik JS da (WAAPI)
   animatsiyalanadi — mazmun uzunligi savoldan savolga farq qiladi va aks
   holda quti sakraydi. Mazmunning o'zi shu yerda so'nib kiradi. */
[data-practice] .v2-practice{animation:v2PanelIn .18s var(--ease-out)}
.v2-practice-answer{overflow:hidden}
.v2-practice-actions{transition:opacity .16s var(--ease-out),filter .16s var(--ease-out)}
.v2-practice-score{animation:v2ScoreIn .3s var(--ease-out) both}
@keyframes v2ScoreIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* Nishon paydo bo'lishi — belgilash tasdig'i, foydalanuvchi aynan shu
   javobni kutib turadi. */
@keyframes entFlagIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}

/* ═══ Farmakologiya va standartlar kartalari ═══════════════════════════════ */
.pharma-card{transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out),border-color var(--dur-hover) ease}
.pharma-card:active{transform:scale(.99)}
.pharma-card:hover:active{transform:translateY(-2px) scale(.99)}
.standard-card{transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out),border-color var(--dur-hover) ease}
.standard-card:active{transform:scale(.995)}
.standard-card:hover:active{transform:translateY(-3px) scale(.995)}
/* `.citation-link:hover` da `translateY(-1px)` bor edi, transition esa yo'q —
   sichqoncha ustiga kelganda sakrab qo'yardi. */
.citation-link{transition:background .14s ease,color .14s ease,transform .14s var(--ease-out)}
.references-list li{transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.standard-button,.pharma-link{transition:transform var(--dur-press) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.standard-button:active{transform:scale(.97)}

/* Tor ekranda javob ostidagi tugmalar butun kenglikni egallaydi. Ular endi
   flex konteyner — `text-align:center` bunday elementni markazlamaydi. */
@media (max-width:520px){
  .v2-answer-actions>.v2-mark-action,
  .v2-answer-actions>.v2-read-action,
  .v2-answer-actions>.v2-practice-action{justify-content:center}
}

/* Matn ichida turadigan ikonka (masalan "… ostidagi 🔖 tugmasi bilan"). */
.v2-inline-icon{display:inline-flex;vertical-align:-3px;color:var(--v2-warning)}
.v2-inline-icon .ent-icon{width:15px;height:15px;fill:currentColor;stroke:none}

/* ═══ Yuklanish skeleti ════════════════════════════════════════════════════
   Toifa javobi ro'yxat bilan birga kelmaydi (bittasi ~11 KB) — savol
   ochilganda alohida so'raladi. Ilgari o'sha oraliqda "Javob yuklanmoqda…"
   matni turardi va javob kelganda karta balandligi keskin o'zgarardi.
   Skelet taxminiy joyni oldindan band qiladi.

   `.sk-sr` standards.css da ham bor — ikkala fayl mustaqil ishlashi kerak,
   malaka sahifasi standards.css ni yuklamaydi. */
.sk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.v2-sk{position:relative;overflow:hidden;border-radius:9px;background:var(--v2-soft)}
.v2-sk::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--v2-surface) 70%,transparent),transparent);
  animation:v2SkShimmer 1.4s linear infinite;
}
@keyframes v2SkShimmer{to{transform:translateX(100%)}}
.v2-sk-line{height:13px;margin:11px 0}
/* 120ms kechikish: javob kesh'dan tez kelsa skelet umuman ko'rinmaydi. */
.v2-sk-answer{opacity:0;animation:v2SkIn .2s ease-out .12s forwards}
@keyframes v2SkIn{to{opacity:1}}

/* ═══ Kamaytirilgan harakat ════════════════════════════════════════════════
   Butunlay nolga tushirish ham xato: rang va shaffoflik o'tishlari nima
   o'zgarganini tushunishga yordam beradi. Faqat siljish va o'lcham
   o'zgarishi olib tashlanadi. */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .v2-panel.active,.v2-answer,.v2-message,.v2-toast,[data-practice] .v2-practice{
    animation-duration:.14s!important;transition-duration:.14s!important;
  }
  .ent-enter{animation:none!important;opacity:1!important}
  .v2-sk::after{animation:none!important}
  .v2-sk-answer{animation:none!important;opacity:1!important}
  .v2-btn:active,.v2-card.hover:active,.v2-action-card:active,.v2-tab:active,
  .v2-chip:active,.v2-option:active,.v2-qnav button:active,.v2-bookmark:active,
  .pharma-card:active,.standard-card:active,.standard-button:active{transform:none}
  .v2-practice-score{animation:none!important;opacity:1}
}