/* «Xarajatlar» 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:var(--w-head); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ⛔ Toifa va manba — ixcham qator, katta katak emas (NeoKarta namunasi,
   2026-09-29): to‘qqiz toifa ikki ustunli to‘rda o‘ng kartani ekrandan
   uzun qilardi va «Qayerdan» savoli pastga, ko‘rinmas joyga tushardi.
   ⛔ Ikki sinf (`.xp-form .xp-pick`): `plan.css` dagi `.outcomes` to‘ri
   undan keyin yuklanmasa ham, oldin yuklansa ham shu qoida yutadi. */
.xp-form .xp-pick { display: flex; flex-wrap: wrap; gap: 8px; }

/* 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:var(--w-mid);
}

/* ⛔ 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; }

/* ── Xarajat qatori — tugma (5-qism, K3) ─────────────────── */
/* ⛔ Qator bosiladi — to‘liq ma'lumot va bekor qilish. `.debt-row`
   ko‘rinishi saqlanadi, tugmaning brauzer bezagi olinadi. */
.xp-row {
  width: 100%; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
/* ⛔ Bekor qilingan qator O‘CHMAYDI — xira va summasi chizilgan:
   «kim, qachon, nega» oynada ko‘rinadi. */
.xp-off { opacity: .72; }
.xp-card .xp-off .xp-sum { text-decoration: line-through; color: var(--muted); }
.xp-pill {
  margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: #fdecec; color: var(--danger); white-space: nowrap;
  font-size: var(--t-1); font-weight: var(--w-mid);
}
.xp-quiet { padding: 0 0 12px; font-size: var(--t-1); color: var(--muted); }

/* ── Xarajat oynasi ───────────────────────────────────────── */
.xp-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.xp-sheet-title { font-size: var(--t-5); font-weight: var(--w-bold); }
.xp-x {
  display: grid; place-items: center;
  min-width: var(--tap); min-height: var(--tap);
  border: 0; border-radius: 12px; background: var(--field); color: var(--ink);
}
.xp-big {
  margin: 4px 0 14px; white-space: nowrap;
  font-size: var(--t-6); font-weight: var(--w-head); font-variant-numeric: tabular-nums;
}
.xp-struck { text-decoration: line-through; color: var(--muted); }
.xp-facts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.xp-fact {
  display: grid; grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px; align-items: baseline;
}
.xp-k { font-size: var(--t-2); color: var(--muted); }
.xp-v { overflow-wrap: anywhere; }
.xp-part { white-space: nowrap; }
.xp-strong { font-weight: var(--w-bold); }
/* ⛔ Oqibat tugmadan OLDIN (N5): pul kassaga qaytadimi — o‘qib bosadi */
.xp-done, .xp-note {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 14px; padding: 12px 14px; border-radius: 12px;
  font-size: var(--t-2);
}
.xp-done { background: #fdecec; color: var(--danger); }
.xp-done b { font-size: var(--t-3); }
.xp-note { background: var(--soft); color: var(--ink); }
.xp-note b { color: var(--mid); }
.xp-warn { background: #fff6e5; }
.xp-warn b { color: var(--warn); }
.xp-undo { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   «XARAJATLAR» — NEOKARTA (egasi, 2026-09-29; `expense.js`)

   ⛔ Karta, tugmalar, ro‘yxat belgilari, pastki tugma — UMUMIY qismlar,
   `neokarta.css` (`nk-`). Bu yerda FAQAT shu ekranning joylashuvi
   (`xp-`): ikki ustun, qator tugmasi, telefondagi tartib.
   ═══════════════════════════════════════════════════════════ */
.xp-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.xp-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* ⛔ Kartadagi toifalar — o‘ralib tushadi: to‘rtta toifa bitta qatorga
   sig‘masa, summa o‘rtasidan sinmasin (har bo‘lak `nowrap`) */
.xp-hbar { margin-top: 12px; }
.xp-cats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.xp-cat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Xarajat qatori: ikonka · nomi va tafsiloti · summa */
.xp-rows { display: flex; flex-direction: column; }
.xp-list .xp-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px; min-height: var(--tap); padding: 8px 0;
}
.xp-who { display: flex; flex-direction: column; min-width: 0; }
.xp-who b { font-weight: var(--w-mid); }
.xp-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-list .xp-off .xp-sum { text-decoration: line-through; color: var(--muted); }
/* «hammasi ›» — barmoq sig‘adigan balandlikda (`--tap`) */
.xp-all { display: inline-flex; align-items: center; min-height: var(--tap); }
.xp-side .field { margin-bottom: 12px; }
.xp-nk .go { background: #5a4de0; }

@media (max-width: 1100px) {
  .xp-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ── TELEFON: karta → tugmalar karta chetida → ro‘yxat → pastda tugma ── */
/* ⛔ PASTKI TUGMA MENYU USTIDA (suratda topildi, 2026-09-29): `nk-dock`
   ekranga qotadi (`fixed`), Moliyada esa telefonda pastki menyu bor va
   tugma uning ostida qolardi. `sticky` — varaq oxirida, menyudan yuqorida. */
.xp-nk .xp-dock { position: sticky; bottom: 0; }
@media (max-width: 560px) {
  .xp-nk .xp-dock { padding-left: 0; padding-right: 0; }
  /* ⛔ `stretch`: kompyuterdagi `align-items:start` qolsa, bolalar
     o‘z mazmuni eniga qisilardi (suratda ro‘yxat 30px bo‘lib qoldi) */
  .xp-grid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
  /* Ustunlar yo‘qoladi — bolalar bitta oqimda, tartib `order` bilan:
     tugmalar kartaning KETIDAN kelishi shart (`nk-float`) */
  .xp-col { display: contents; }
  .xp-hero { order: 0; }
  .xp-acts { order: 1; }
  .xp-left > [data-list] { order: 2; }
  .xp-side { order: 3; }
  .xp-hbar { display: none; }
  /* Forma — pastki tugma bosilgandagina (smena paneli naqshi) */
  .xp-nk:not(.xp-writing) .xp-side { display: none; }
  .xp-writing .xp-dock { display: none; }
}