/* ─────────────────────────────────────────────────────────────────────────
   CAD KO'RINISHI — katakli fon va AutoCAD uslubidagi crosshair.
   Egasi so'radi (2026-09-08): «sichqoncha — xuddi autocaddek crosshair,
   orqa fon ham katakli bo'lsin. asosiy kirish oynasida ham».

   Ikkita sahifada ishlatiladi: `index.html` (tanishtiruv) va `kirish.html`.
   Studiya ekrani (`studio.html`) ATAYLAB tegilmagan — u yerda chizmaning
   o'z kursori va o'z to'ri bor, ikkitasi ustma-ust tushardi.
   ⚠️ RANG JONLI SAHIFADA TANLANGAN (2026-09-08). Birinchi qiymatlar
      (#1e242c / #262e39) qog'ozda to'g'ri ko'rinardi, lekin haqiqiy ekranda
      katak deyarli sezilmasdi — brauzerda ranglar almashtirib, surat olib
      tanlandi. Yana o'zgartirilsa — xuddi shunday tekshirilsin, ko'z bilan.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --kat-mayda:  #232b36;   /* 10 px katak — mayda tekstura */
  --kat-yirik:  #3a4657;   /* 100 px katak — asosiy to'r, aniq ko'rinadi */
  --nishon:     #4d8dff;   /* crosshair rangi — asosiy rang bilan bir xil */
}

/* ── Katakli fon ────────────────────────────────────────────────────────────
   To'rt qatlam gradient: mayda to'r (10 px) + yirik to'r (100 px).
   Rasm emas, CSS — ya'ni qo'shimcha so'rov yo'q va istalgan ekranda aniq. */
/* ⚠️ TO'LIQ QOPLAYDIGAN EKRANLAR HAM KATAKLI BO'LISHI KERAK.
      2026-09-08 da katak studiyada ko'rinmadi: `.bosh-ekran` (loyiha
      tanlash) `position: fixed; inset: 0` va noshaffof `--fon` bilan
      bodyni butunlay yopib turgan edi. `.tor-ekran` (tor ekran
      ogohlantirishi) ham shunday. Ular ro'yxatga qo'shildi —
      «hamma joyda katak» degani shu. */
.cad-fon,
.cad-fon .bosh-ekran,
.cad-fon .tor-ekran {
  background-color: var(--fon, #14171c);
  background-image:
    linear-gradient(var(--kat-mayda, #232b36) 1px, transparent 1px),
    linear-gradient(90deg, var(--kat-mayda, #232b36) 1px, transparent 1px),
    linear-gradient(var(--kat-yirik, #3a4657) 1px, transparent 1px),
    linear-gradient(90deg, var(--kat-yirik, #3a4657) 1px, transparent 1px);
  background-size: 10px 10px, 10px 10px, 100px 100px, 100px 100px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* ── Crosshair ──────────────────────────────────────────────────────────────
   Ikki chiziq + o'rtada pickbox (AutoCAD dagi kichik kvadrat).
   ⚠️ `pointer-events: none` SHART — aks holda qatlam bosishni yutadi va
      sahifadagi hech bir tugma ishlamaydi. */
.nishon-qatlam {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .12s;
}
.nishon-qatlam.korin { opacity: 1; }

.nishon-x, .nishon-y {
  position: absolute;
  background: var(--nishon, #4d8dff);
  opacity: .55;
}
.nishon-x { left: 0; width: 100%; height: 1px; }
.nishon-y { top: 0; height: 100%; width: 1px; }

.nishon-quti {
  position: absolute;
  width: 13px; height: 13px;
  margin: -7px 0 0 -7px;
  border: 1px solid var(--nishon, #4d8dff);
  opacity: .9;
}

/* ⚠️ Kursor faqat BO'SH joyda yashiriladi. Tugma, havola va maydon ustida
      odatdagi ko'rsatkich qaytadi — AutoCAD ham shunday qiladi: crosshair
      chizma maydonida, panel ustida esa oddiy strelka. */
.cad-kursor { cursor: none; }
.cad-kursor a,
.cad-kursor button,
.cad-kursor input,
.cad-kursor textarea,
.cad-kursor select,
.cad-kursor label { cursor: auto; }

/* ⚠️ CHIZMA MAYDONI ISTISNO — va bu ataylab (2026-09-08).
      `#tuval` ning kursori REJIMNI BILDIRADI, bezak emas:
          grab      surish
          grabbing  hozir surilyapti
          crosshair o'lchash / tahrir
          cell      chizish
      Global krestik ularning ustiga chiqsa, muhandis qaysi rejimda
      ekanini bilmay qoladi. AutoCAD ham shunday ishlaydi — chizma
      maydonida krestik, lekin surishda qo'lga aylanadi.
      Shuning uchun tuvalda dasturning O'Z kursori qoladi; qatlam esa
      `cad.js` da tuval ustida yashiriladi. */
.cad-kursor canvas { cursor: unset; }

/* ⚠️ Sensorli ekranda crosshair ma'nosiz (sichqoncha yo'q) va kursorni
      yashirish zarar qiladi — telefonda butunlay o'chiriladi. */
@media (hover: none), (pointer: coarse) {
  .cad-kursor { cursor: auto; }
  .nishon-qatlam { display: none !important; }
}

/* ⚠️ Harakatni kamaytirish so'ralgan bo'lsa — chiziqlar qoladi, lekin
      paydo bo'lish animatsiyasi o'chadi. */
@media (prefers-reduced-motion: reduce) {
  .nishon-qatlam { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   TANLASH — AutoCAD window/crossing ramka (Faza 1, `tanlash.js`).
   Faqat `index.html` da yuklanadi. Egasi so'radi (2026-09-08).
   ⚠️ z-index nishondan (9999) PAST — crosshair ramka ustida qoladi.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --tan-window:   #4d8dff;   /* o'ngga sudrash — to'liq ichidagilar */
  --tan-crossing: #5fce7f;   /* chapga sudrash — tekkani ham */
}

.tanlash-qatlam {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}

.tanlash-ramka { position: fixed; pointer-events: none; }
.tanlash-ramka.window {
  background: rgba(77, 141, 255, .10);
  border: 1px solid var(--tan-window, #4d8dff);
}
.tanlash-ramka.crossing {
  background: rgba(95, 206, 127, .10);
  border: 1px dashed var(--tan-crossing, #5fce7f);
}

/* Ramka chizilayotganda matn tanlanib qolmasin. */
body.tanlash-faol { user-select: none; -webkit-user-select: none; }

/* Tanlangan blok — uzuq kontur + burchak griplari (AutoCAD tutqichi). */
.tanlangan { outline: 1px dashed var(--tan-window, #4d8dff); outline-offset: 3px; }
.tanlash-grip {
  position: fixed;
  width: 7px; height: 7px;
  margin: -4px 0 0 -4px;
  background: var(--tan-window, #4d8dff);
  border: 1px solid #cfe0ff;
  pointer-events: none;
  z-index: 9998;
}

/* Komand qatori — past chapda, AutoCAD komand satri. */
.komand-qator {
  position: fixed;
  left: 0; bottom: 0;
  z-index: 9998;
  max-width: 100%;
  padding: 6px 14px;
  font: 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #c7d0dc;
  background: rgba(13, 16, 20, .92);
  border-top: 1px solid var(--kat-yirik, #3a4657);
  border-right: 1px solid var(--kat-yirik, #3a4657);
}
.komand-nom { color: var(--nishon, #4d8dff); }
.komand-yozuv { color: #e6e9ee; margin-left: 12px; white-space: nowrap; }
.komand-yozuv:empty { display: none; }
.komand-eslatma { color: #6b7686; margin-left: 12px; white-space: nowrap; }

/* M/C bilan tushirilgan nusxa — sahifa bezagi, havolasi bosilmaydi. */
.cad-nusxa { pointer-events: none; }
.komand-eslatma kbd {
  display: inline-block;
  margin: 0 2px 0 10px;
  padding: 0 5px;
  font: inherit;
  color: #c7d0dc;
  background: #262e39;
  border: 1px solid var(--kat-yirik, #3a4657);
  border-radius: 3px;
}
.komand-eslatma kbd + kbd { margin-left: 2px; }

@media (hover: none), (pointer: coarse) {
  .tanlash-qatlam, .komand-qator { display: none !important; }
}