/* «Chiqimlar» ekrani — Moliya bo‘limi.
 *
 * ⛔ FAQAT SHU EKRANGA TEGISHLI QOIDALAR. Ro‘yxat qatori
 * (`.debt-row`), toifa tugmalari (`.oc`) va maydonlar allaqachon
 * bor — nusxa olinmadi, ikkinchi ta'rif ikki xil ko‘rinish
 * bergan bo‘lardi.
 */

/* ⛔ QATORLAR OQ KARTOCHKADA — «Men» ekranidagi dars (2026-09-13).
 *
 * Kulrang fonda yalang‘och qator qoldirilsa, yupqa chiziqlar
 * havoda osilib turadi. BILLZ da har blok kartochka.
 *
 * ⛔ Keng ekranda TOR ustun. 1280px da yorliq chap chekkada,
 * summa esa ming piksel narida o‘ng chekkada turardi va ko‘z
 * ularni ulay olmasdi — aynan shu xato «Men» ekranida
 * 2026-09-12 da suratdan topilgan edi. */
.xp-card {
  background: var(--glass); border-radius: var(--card-r);
  box-shadow: var(--card-sh); padding: 6px 16px; margin-bottom: 14px;
}
@media (min-width: 820px) {
  .xp-card { max-width: 560px; }
}

/* ⛔ JAMI — EKRANNING BIRINCHI JAVOBI.
 *
 * Direktor bu ekranga bitta savol bilan keladi: «shu oyda qancha
 * ketdi». Javob eng tepada va ro‘yxat qatoridan kattaroq
 * turadi; qolgan hamma narsa — o‘sha raqamning tafsiloti. */
.xp-total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 14px 0 12px; border-bottom: 1px solid var(--line);
}
.xp-total .k { color: var(--muted); font-size: var(--t-2); }
/* ⛔ 600 dan qalin emas (DIZAYN.md): 700 kichik matnda «qalin»
   emas, qora bo‘lib ko‘rinadi. */
.xp-total .v {
  font-size: var(--t-6); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Forma qutisi — o‘z kengligida, keng ekranda cho‘zilib ketmasin */
@media (min-width: 820px) {
  .xp-form { max-width: 460px; }
}

/* ⛔ RO‘YXATDA SUMMA — ASOSIY RAQAM, kunlik sana emas.
 *
 * `.debt-row .when` qarz ro‘yxati uchun yozilgan: u yerda o‘ng
 * ustunda SANA turadi va kulrang bo‘lishi to‘g‘ri. Bu yerda
 * o‘sha ustunda PUL turibdi — suratda u toifa nomidan xira
 * ko‘rinib qoldi, holbuki ekran aynan pul haqida. */
/* ⛔ Selektorda `.debt-row` YOZILMAYDI: u `debt.css` niki va
   yalang‘och sinfni ikkinchi faylda qayta ta'riflash ekranlar
   orasida sirg‘alishning boshlanishi (`test_bare_layout_class_
   does_not_leak` — uch marta sodir bo‘lgan). Shuning uchun
   qatorga O‘Z belgim qo‘yiladi. */
.xp-card .xp-sum {
  font-size: var(--t-4); color: var(--ink); font-weight: 500;
}

/* ⛔ «Chiqim yozish» oq TASMA bo‘lib qolgandi: `.ghost.wide` uni
   340px oq to‘rtburchakka aylantirib, ostidagi kartochkaga
   o‘xshab ketardi. Tugma o‘z mazmuni kengligida turadi. */
.xp-new { width: auto; margin: 0 0 14px; }

/* ⛔ Eslatma o‘Z maydonining o‘rnida turadi. Sana maydoni
   yashiringach u pastdagi «Qaysi filial» yorlig‘iga yopishib
   qolgandi va o‘sha maydonga tegishlidek o‘qilardi (suratda
   ko‘rindi). */
.xp-hint:not([hidden]) { display: block; margin: 0 0 14px; }

/* ⛔ Sotuvchining IKKINCHI qatori (ulgurji) — yangi odam emas,
   davomi: ajratuvchi chiziqsiz va ism ostiga yaqin. Chiziq
   qolsa «ismsiz allakim» bo‘lib o‘qilardi (suratda ko‘rindi,
   2026-09-19). */
/* ⛔ Chiziq OLDINGI qatorning `border-bottom` i. Uni olib
   tashlash uchun `.debt-row` ga BU FAYLDAN tegib bo‘lmaydi —
   u `debt.css` niki va qo‘riqchi buni ushladi (DIZAYN.md:
   yalang‘och sinf ikki ekranda ikki ma'no). Shuning uchun
   guruh BOSHI o‘z prefiksli sinfini oladi (`xp-head`), uni
   `bonus.js` qo‘yadi. */
.xp-head { border-bottom: 0; padding-bottom: 2px; }
.xp-more { padding-top: 0; }