/* ════════════════════════════════════════════════════════════════════
   TERAN ILDIZ — css/polish.css   (v129 · MOSLASHUV VA SAYQAL)
   ────────────────────────────────────────────────────────────────────
   ENG OXIRGI QATLAM (`@layer … mobile, polish`). Faqat brauzerda
   o'lchangan, aniq muammolarga javob — har qoida ustida sababi.

   O'lchangan ekranlar: 320×640 · 375×667 · 390×844 · 430×932 ·
   844×390 (telefon yotiq) · 768×1024 · 1024×768 · 1180×820 ·
   1366×768 · 1920×1080, 9 ta mavzu.
   ════════════════════════════════════════════════════════════════════ */

@layer polish {

  /* ══════════════════════════════════════════════════════════════════
     1) TELEFON SARLAVHA PANELI — «TERAN…» KESILMASIN
     ──────────────────────────────────────────────────────────────────
     390 px da panelda 6 element bor edi: menyu, logo, qidiruv, til,
     mavzu, maxfiylik. Logo matni «TERAN…» bo'lib kesilardi. Qidiruv
     va mavzu tugmalari pastki panelda (#tabbar → «Qidiruv», «Mavzu»)
     ALLAQACHON bor va aynan shu tugmalarni bosadi (04-tabbar.js) —
     ya'ni tepada ular takror edi. Pastki panel ko'rinadigan kenglikda
     (≤ 768) tepadagilari yashiriladi; DOM da qoladi, ishlayveradi.
     ══════════════════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    #nav #searchToggleBtn,
    #nav #themeBtn { display: none; }
    #nav .logo-tx { overflow: visible; }
  }
  @media (max-width: 359px) {
    html.ed .logo-nm { font-size: .78rem; letter-spacing: .06em; }
    html.ed .logo-sb { display: none; }
  }

  /* ══════════════════════════════════════════════════════════════════
     2) MAVZU TANLASH — telefonda pastdan, bosgan joy yonida
     Pastki paneldagi «Mavzu» bosilganda menyu ekran TEPASIDA
     (o'ng burchakda) ochilardi — barmoqdan eng uzoq joyda.
     ══════════════════════════════════════════════════════════════════ */
  @media (max-width: 768px) {
    .theme-menu {
      top: auto;
      bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px);
      left: max(12px, env(safe-area-inset-left));
      right: max(12px, env(safe-area-inset-right));
      width: auto;
      max-height: min(62dvh, 460px);
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
      border-radius: 16px;
      padding: 8px;
    }
    .theme-opt { min-height: 46px; border-radius: 10px; }
  }

  /* Menyu foni — sarlavha paneli kabi har doim QORA (glass.css →
     --gl-chrome). Lekin variant matni `--txt` dan olinardi: yorug'
     mavzularda (Oq, Kumush, Tiffany) u ham to'q — qora fonda to'q
     yozuv, variantlar O'QILMASDI (o'lchandi). Endi panel ranglari. */
  .theme-opt { color: var(--chrome-txt); }
  .theme-opt i { color: var(--chrome-ink); background: rgba(255, 255, 255, .07); border-color: var(--chrome-bdr); }
  .theme-opt:hover, .theme-opt.on { color: var(--chrome-ink); background: var(--chrome-hover, rgba(255, 255, 255, .08)); }
  .theme-opt.on i { background: var(--brand); border-color: var(--brand); color: #fff; }

  /* ══════════════════════════════════════════════════════════════════
     3) TAKRORLANGAN TUGMALAR — sana qatoridagi «Кирилл» va mavzu
     Sarlavha panelida (til, mavzu) aynan shu tugmalar bor. Telefonda
     ular v128.1 da olib tashlangan edi; kompyuterda ham takror.
     ══════════════════════════════════════════════════════════════════ */
  /* (pastda, qatlamsiz qoidaga qarang — islamic-tools.css qatlamsiz) */

  /* ══════════════════════════════════════════════════════════════════
     4) BARMOQ UCHUN BOSISH MAYDONLARI
     Kartochkadagi «Tinglash», «Saqlash · Nusxa · Ulashish» 27–31 px
     edi (o'lchandi). Sensorli ekranda kamida 40 px.
     ══════════════════════════════════════════════════════════════════ */
  @media (pointer: coarse) {
    .cbtn { min-height: 40px; }
    .cab-btn { min-height: 40px; min-width: 40px; }
    .tcard-dl { min-height: 40px; }
  }

  /* ══════════════════════════════════════════════════════════════════
     5) TELEFON YOTIQ HOLATDA (bo'yi ≤ 500)
     740×360 da sarlavha + bo'lim lentasi + sana + pastki panel ekranning
     ~65% ini egallardi, kontentga ~120 px qolardi. Bo'lim lentasi
     yashiriladi (pastki paneldagi «Bo'limlar» shu ishni qiladi),
     panellar ixchamlashadi.
     ══════════════════════════════════════════════════════════════════ */
  @media (max-height: 500px) and (max-width: 1024px) and (orientation: landscape) {
    :root { --nav-h: 48px; --cat-h: 0px; --tab-h: 46px; }
    #catbar { display: none; }
    #tabbar .tb { flex-direction: row; gap: 8px; font-size: .7rem; }
    #tabbar .tb i { font-size: 15px; }
    #ti-dateline { margin-bottom: 8px; }
  }

  /* ══════════════════════════════════════════════════════════════════
     6) KATTA MONITOR — kontent ekran o'rtasida «orolcha» bo'lib qolmasin
     ══════════════════════════════════════════════════════════════════ */
  @media (min-width: 1700px) {
    :root { --maxw: 1520px; }
  }

  /* ══════════════════════════════════════════════════════════════════
     6.5) TEZLIK — ekrandan tashqaridagi bosh sahifa bo'limlari chizilmaydi
     Bosh sahifa ~6 000 px uzun (o'lchandi, 390 px telefonda). Brauzer
     endi faqat ko'rinayotgan bo'limlarni chizadi; qolganlari aylantirib
     yetib kelinganda. `auto` — bir marta chizilgan bo'lim o'lchami
     eslab qolinadi, aylantirish chizig'i sakramaydi.
     ══════════════════════════════════════════════════════════════════ */
  .hm-sec {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
  }

  /* ══════════════════════════════════════════════════════════════════
     7) UMUMIY SAYQAL
     ══════════════════════════════════════════════════════════════════ */
  /* Klaviatura bilan yurganda fokus aniq ko'rinsin (sichqoncha/barmoq bilan — yo'q).
     Matn maydonlari bu yerda yo'q: ular bosilganda ham :focus-visible
     oladi va o'z fokus uslubi bor. */
  :where(button, a, [role="button"]):focus-visible {
    outline: 2px solid var(--gold-hi, #f0bd77);
    outline-offset: 2px;
  }
}

/* Qatlamsiz: islamic-tools.css (qatlamsiz) `.tdl-tools` ni ko'rsatadi,
   qatlamli qoida uni bosa olmaydi. ID og'irligi bilan yashiriladi. */
#ti-dateline .tdl-tools { display: none; }