/* ═══════════════════════════════════════════════════════════════
   YaqinJoy — MATN KATTALIGI (v115)

   Foydalanuvchi tanlagan kattalik: Sozlamalar → Matn kattaligi.
     Oddiy      → 1
     Kattaroq   → 1.15
     Eng katta  → 1.3

   ─── NEGA KERAK ────────────────────────────────────────────────
   `base.css` telefonning TIZIM shrift kattaligini bloklaydi — chunki
   u faqat MATNNI cho'zib, qutilarni joyida qoldiradi va maketni
   buzadi (o'lchandi: 160% da pastki paneldagi yozuvlar bir-birining
   ustiga chiqib ketardi).

   Lekin ko'zi xira odam imkoniyatsiz qolmasligi kerak. Shu sababli
   kattalashtirish ILOVANING O'ZIDA beriladi — va bu yerda u
   BOSHQACHA ishlaydi: matn bilan birga qutilar, oraliqlar, ikonkalar
   va rasmlar ham bir tekis kattalashadi. Ya'ni maket AYNAN o'sha
   qoladi, faqat kattaroq bo'ladi — hech narsa buzilmaydi.

   ─── QANDAY ────────────────────────────────────────────────────
   `zoom` orqali — planshet va televizor qatlamlaridagi bilan bir xil
   mexanizm (izohlar `planshet.css` boshida).

   Planshet va televizor qatlamlari O'ZI ham `zoom` ishlatadi. Ikkitasi
   urishib qolmasligi uchun ular `--ts` ni O'Z koeffitsientiga
   ko'paytiradi (`--k: calc(1.45 * var(--ts))`), bu fayl esa faqat
   QOLGAN holatlarda ishlaydi:
     · telefon — 559.98px gacha
     · sichqonchali tor oyna — 560–1023px, `pointer: fine`
     · oddiy kompyuter — 1024–2559px

   TOPILGAN XATO (v121): bu fayl avval `max-width: 767.98px` deb
   yozilgandi — o'shanda planshet qatlami 768px dan boshlanardi.
   v120 da planshet chegarasi 560px ga tushirildi, lekin bu yerda
   767.98 qolib ketdi. Natijada 560–767px oralig'ida IKKI FAYL
   bir-birining ustiga tushdi va `kattalik.css` keyinroq
   yuklanganligi uchun G'OLIB CHIQDI: planshetda xarita kartalari
   telefon o'lchamida qolib, ichidagi matn sig'may ketdi
   (ega suratda aynan shuni ko'rsatdi).

   ─── XARITA ────────────────────────────────────────────────────
   Xarita sahifasida `zoom` ishlatib bo'lmaydi (Leaflet o'lchamni ikki
   xil usulda o'qiydi — `planshet.css` boshidagi izohga qarang).
   Shuning uchun u yerda tugmalar bittalab kattalashtiriladi.

   ─── QAYTARISH ─────────────────────────────────────────────────
   `index.html` dagi bitta qatorni o'chirish kifoya: `--ts` `tokens.css`
   da 1 bo'lib qoladi, planshet va televizor esa o'z holicha ishlayveradi.
   ═══════════════════════════════════════════════════════════════ */

html[data-tsize="2"] { --ts: 1.15; }
html[data-tsize="3"] { --ts: 1.3; }

/* DIQQAT: "Oddiy" holatda (`data-tsize` yo'q yoki "1") bu faylda
   BIRORTA qoida ishlamaydi — hatto `zoom: 1` ham yozilmaydi.
   Ya'ni tanlov qilinmagan foydalanuvchi uchun sayt bir piksel ham
   o'zgarmaydi. */

/* ═══ TELEFON (≤767px) va ODDIY KOMPYUTER (1024–2559px) ═════════
   Planshet va televizor oralig'i bu yerda YO'Q — ularning o'z
   `zoom`i bor va u `--ts` ni ichiga olgan. */
@media (max-width: 559.98px),
       (min-width: 560px) and (max-width: 1023.98px) and (pointer: fine),
       (min-width: 1024px) and (max-width: 2559.98px) {

  /* Tayyor foiz — `var()` ham, `calc()` ham yo'q: `zoom` eski
     xususiyat va Safari uni hisoblangan qiymat bilan rad etishi
     mumkin (batafsil izoh `planshet.css` boshida). */
  html[data-tsize="2"] body:not(.map-mode) { zoom: 115%; --zoom-want: 1.15; }
  html[data-tsize="3"] body:not(.map-mode) { zoom: 130%; --zoom-want: 1.3; }

  /* `100dvh` va `vw` zoom ostida avval ekrandan o'qiladi, keyin
     koeffitsientga ko'paytiriladi — sahifa shuncha barobar uzun
     bo'lib ketardi. Bo'linadi. */
  html[data-tsize="2"] body:not(.map-mode) #app,
  html[data-tsize="3"] body:not(.map-mode) #app,
  html[data-tsize="2"] body:not(.map-mode) .page,
  html[data-tsize="3"] body:not(.map-mode) .page,
  html[data-tsize="2"] body:not(.map-mode) #app > .page,
  html[data-tsize="3"] body:not(.map-mode) #app > .page,
  html[data-tsize="2"] body:not(.map-mode) .wiz-page,
  html[data-tsize="3"] body:not(.map-mode) .wiz-page,
  html[data-tsize="2"] body:not(.map-mode) .cab-app,
  html[data-tsize="3"] body:not(.map-mode) .cab-app,
  html[data-tsize="2"] body:not(.map-mode) .adm-app,
  html[data-tsize="3"] body:not(.map-mode) .adm-app {
    min-height: calc(100dvh / var(--ts));
  }
  html[data-tsize="2"] body:not(.map-mode) .bottom-nav,
  html[data-tsize="3"] body:not(.map-mode) .bottom-nav { min-height: auto; }
  html[data-tsize="2"] body:not(.map-mode) .adm-side,
  html[data-tsize="3"] body:not(.map-mode) .adm-side { height: calc(100dvh / var(--ts)); }
  html[data-tsize="2"] body:not(.map-mode) #toast-wrap,
  html[data-tsize="3"] body:not(.map-mode) #toast-wrap {
    width: min(calc(92vw / var(--ts)), 480px);
  }
}

/* Kompyuterda yon panel butun ekran bo'yi cho'zilgan bo'lishi kerak */
@media (min-width: 1024px) and (max-width: 2559.98px) {
  html[data-tsize="2"] body:not(.cab-mode):not(.adm-mode):not(.map-mode) .bottom-nav,
  html[data-tsize="3"] body:not(.cab-mode):not(.adm-mode):not(.map-mode) .bottom-nav {
    min-height: calc(100dvh / var(--ts));
  }
  html[data-tsize="2"] body:not(.cab-mode):not(.adm-mode):not(.map-mode) .sheet,
  html[data-tsize="3"] body:not(.cab-mode):not(.adm-mode):not(.map-mode) .sheet {
    width: min(520px, calc(60vw / var(--ts)));
  }
}

/* ═══ XARITA — zoom'siz, qo'lda ══════════════════════════════════
   Telefon o'lchamlari (pages.css "IXCHAM REJIM") asos qilib olinadi. */
@media (max-width: 559.98px),
       (min-width: 560px) and (max-width: 1023.98px) and (pointer: fine) {
  .map-mode .map-ui-top.slim { padding: calc(8px * var(--ts)) calc(12px * var(--ts)) calc(4px * var(--ts)); }
  .map-mode .map-ui-top.slim .map-search {
    padding: calc(7px * var(--ts)) calc(5px * var(--ts)) calc(7px * var(--ts)) calc(13px * var(--ts)); }
  .map-mode .map-search input { font-size: calc(14px * var(--ts)); }
  .map-mode .map-filter-inline { width: calc(30px * var(--ts)); height: calc(30px * var(--ts)); }
  .map-mode .chip { padding: calc(6px * var(--ts)) calc(13px * var(--ts));
    font-size: calc(12.5px * var(--ts)); }
  .map-mode .icon-btn { width: calc(36px * var(--ts)); height: calc(36px * var(--ts)); }
  .map-mode .ic { width: calc(22px * var(--ts)); height: calc(22px * var(--ts)); }
  .map-mode .ic-sm { width: calc(17px * var(--ts)); height: calc(17px * var(--ts)); }
  .map-mode .sheet-head { height: calc(40px * var(--ts)); }
  .map-mode .sheet-title { font-size: calc(12.5px * var(--ts)); }
  .map-mode .sheet-title b { font-size: calc(13.5px * var(--ts)); }
  .map-mode .map-sheet { transform: translateY(calc(100% - 40px * var(--ts))); }
  .map-mode .map-sheet.open { transform: translateY(0); }
  .map-mode .pop-card { width: calc(144px * var(--ts)); }
  .map-mode .pop-img { height: calc(88px * var(--ts)); }
  .map-mode .bn-item { font-size: calc(9.5px * var(--ts)); }
  .map-mode .bn-item .ic { width: calc(20px * var(--ts)); height: calc(20px * var(--ts)); }
  .map-mode .bn-fab { width: calc(46px * var(--ts)); height: calc(46px * var(--ts));
    margin-top: calc(-16px * var(--ts)); }
  .map-mode .bn-fab .ic { width: calc(20px * var(--ts)); height: calc(20px * var(--ts)); }
  .map-mode { --nav-h: calc(56px * var(--ts)); }
}
/* Kompyuterda xaritaning o'z (kattaroq) o'lchamlari bor — desktop.css */
@media (min-width: 1024px) and (max-width: 2559.98px) {
  .map-mode .map-ui-top,
  .map-mode .map-ui-top.slim { padding: calc(18px * var(--ts)) calc(20px * var(--ts)) calc(12px * var(--ts)); }
  .map-mode .map-search { max-width: calc(480px * var(--ts)); }
  .map-mode .map-search input { font-size: calc(14.5px * var(--ts)); }
  .map-mode .chip { padding: calc(6px * var(--ts)) calc(13px * var(--ts));
    font-size: calc(12.5px * var(--ts)); }
  .map-mode .icon-btn { width: calc(36px * var(--ts)); height: calc(36px * var(--ts)); }
  .map-mode .ic { width: calc(22px * var(--ts)); height: calc(22px * var(--ts)); }
  .map-mode .ic-sm { width: calc(17px * var(--ts)); height: calc(17px * var(--ts)); }
  .map-mode .sheet-title { font-size: calc(12.5px * var(--ts)); }
  .map-mode .sheet-title b { font-size: calc(13.5px * var(--ts)); }
  .map-mode .map-sheet .pop-card { width: calc(200px * var(--ts)); }
  .map-mode .map-sheet .pop-img { height: calc(116px * var(--ts)); }
  .map-mode .bottom-nav .bn-item,
  .map-mode .bn5 .bn-center { height: calc(44px * var(--ts)); font-size: calc(14.5px * var(--ts)); }
  .map-mode .bottom-nav .bn-item svg,
  .map-mode .bn5 .bn-center .bn-fab svg { width: calc(20px * var(--ts)); height: calc(20px * var(--ts)); }
  .map-mode .bn5 .bn-center .bn-lbl { font-size: calc(14.5px * var(--ts)); }
}
/* Karusel kartasidagi uchta o'lcham HTML ichida `style=""` bilan
   yozilgan — oddiy qoida ularni bosa olmaydi. */
@media (max-width: 559.98px),
       (min-width: 560px) and (max-width: 1023.98px) and (pointer: fine),
       (min-width: 1024px) and (max-width: 2559.98px) {
  .map-mode .pop-body .bc-name,
  .map-mode .pop-body .bc-name span { font-size: calc(14.5px * var(--ts)) !important; }
  .map-mode .pop-body .bc-meta { font-size: calc(12px * var(--ts)) !important; }
  .map-mode .pop-body .stars { font-size: calc(11.5px * var(--ts)) !important; }
}

/* ═══ PASTKI PANEL — YORLIQLAR BITTA QATORDA ════════════════════
   `zoom` sahifani kattalashtirganda ichkaridagi maydon shuncha
   TORAYADI: 390px li telefonda 1.3 koeffitsient bilan ichkarida
   300px qoladi. O'sha yerda pastki paneldagi eng uzun yorliq
   ("Bosh sahifa") ikki qatorga bo'linib, panelni qiyshaytirardi
   (o'lchandi: 300px da yorliq balandligi 11px → 22px).

   Yorliq bitta qatorda qoladi va bir pog'ona kichrayadi — lekin
   `zoom` hisobidan baribir odatdagidan KATTAROQ chiqadi:
     Oddiy     9.5px
     Kattaroq  9.0 × 1.15 = 10.4px
     Eng katta 8.8 × 1.30 = 11.4px */
html[data-tsize] .bn-item,
html[data-tsize] .bn-lbl { white-space: nowrap; }
html[data-tsize="2"] .bn-item { font-size: 9px; }
html[data-tsize="3"] .bn-item { font-size: 8.8px; }

/* ═══ SOZLAMALARDAGI TANLOV ══════════════════════════════════════ */
.ts-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ts-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 6px 12px; cursor: pointer;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: var(--r-md); color: var(--text);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.ts-opt .ts-a { font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ts-opt:nth-child(1) .ts-a { font-size: 15px; }
.ts-opt:nth-child(2) .ts-a { font-size: 18px; }
.ts-opt:nth-child(3) .ts-a { font-size: 21px; }
.ts-opt .ts-l { font-size: 12px; font-weight: 600; color: var(--text-2); }
.ts-opt.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.ts-opt.on .ts-l { color: var(--blue); }