/* ════════════════════════════════════════════════════════════════════
   TERAN ILDIZ — mini-word/word.css   (v72 · 11-QATLAM)
   Mini Word — barcha qurilmalarda.
   ════════════════════════════════════════════════════════════════════ */
@layer board {

  .mw-root {
    grid-column: 1 / -1;
    display: flex; flex-direction: column;
    min-height: 320px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surf);
  }

  /* ── Sarlavha ── */
  .mw-head {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--rule);
    flex: 0 0 auto;
  }
  .mw-title {
    flex: 1; min-width: 0;
    background: none; border: 1px solid transparent; border-radius: 8px;
    padding: 8px 10px;
    color: var(--ink); font-family: inherit;
    font-size: .92rem; font-weight: 600;
  }
  .mw-title:focus { outline: none; border-color: var(--rule-strong); background: var(--surf-1); }

  /* ── Asboblar ── */
  .mw-bar {
    display: flex; align-items: center; gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--rule);
    background: var(--surf-1);
    overflow-x: auto; scrollbar-width: none;
    flex: 0 0 auto;
  }
  .mw-bar::-webkit-scrollbar { display: none; }

  .mw-b {
    flex: 0 0 auto;
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 8px;
    background: none; border: 1px solid transparent; border-radius: 8px;
    color: var(--muted); font-family: inherit; font-size: 13px;
    cursor: pointer; transition: background .12s, color .12s;
  }
  .mw-b.on { background: rgba(10,186,181,.16); border-color: rgba(10,186,181,.45); color: var(--ink); }
  .mw-b:focus-visible, .mw-btn:focus-visible, .mw-row:focus-visible, .mw-sw:focus-visible {
    outline: 2px solid #0abab5; outline-offset: 1px;
  }
  .mw-sep { flex: 0 0 auto; width: 1px; height: 20px; background: var(--rule); margin: 0 4px; }
  .mw-grp { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }

  /* ── Ochiluvchi panellar ── */
  .mw-pop {
    position: absolute; top: calc(100% + 7px); left: 0; z-index: 30;
    display: none; flex-direction: column; gap: 3px;
    min-width: 178px; padding: 7px;
    background: var(--surf-2, #1c2025);
    border: 1px solid var(--rule-strong, #3a4048);
    border-radius: 11px;
    box-shadow: 0 14px 34px rgba(0,0,0,.44);
    max-height: 58dvh; overflow-y: auto;
  }
  .mw-pop.open { display: flex; }
  .mw-pop[data-pop-body="align"] { flex-direction: row; min-width: 0; }
  .mw-grp:nth-last-child(-n+2) .mw-pop { left: auto; right: 0; }

  .mw-pop-h {
    font-size: .6rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
    padding: 5px 4px 2px;
  }
  .mw-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    padding: 9px 11px;
    background: none; border: 1px solid transparent; border-radius: 8px;
    color: var(--ink); font-family: inherit; font-size: .82rem;
    cursor: pointer; white-space: nowrap;
  }
  .mw-row:hover { background: rgba(10,186,181,.12); }
  .mw-row i { font-size: 11px; opacity: .8; width: 14px; }
  .mw-sizes { display: flex; flex-wrap: wrap; gap: 3px; }
  .mw-swatches { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px; }
  .mw-sw {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid var(--rule-strong); cursor: pointer; padding: 0;
  }

  /* ── Yozuv maydoni: qog'oz ko'rinishi ── */
  .mw-page-wrap {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    padding: 14px 12px 40px;
  }
  .mw-page {
    max-width: 794px;                 /* A4 kengligi 96dpi da */
    margin: 0 auto;
    background: var(--surf);
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 26px 24px 60px;
  }
  .mw-ed {
    outline: none;
    color: var(--ink);
    /* 16px dan kichik shrift iOS da fokusda sahifani kattalashtiradi */
    font-size: 16px;
    line-height: 1.75;
    word-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    min-height: 240px;
  }
  .mw-ed:empty::before {
    content: attr(aria-label);
    color: var(--dim); pointer-events: none;
  }
  .mw-ed h1 { font-size: 1.7rem; line-height: 1.22; margin: .7em 0 .35em; font-weight: 700; }
  .mw-ed h2 { font-size: 1.34rem; line-height: 1.26; margin: .7em 0 .3em; font-weight: 700; }
  .mw-ed h3 { font-size: 1.12rem; line-height: 1.3; margin: .6em 0 .3em; font-weight: 600; }
  .mw-ed p  { margin: 0 0 .75em; }
  .mw-ed ul, .mw-ed ol { margin: 0 0 .75em; padding-left: 1.6em; }
  .mw-ed li { margin-bottom: .3em; }
  .mw-ed blockquote {
    margin: .8em 0; padding: .5em 0 .5em 1em;
    border-left: 3px solid var(--gold, #e8c46a);
    color: var(--txt); font-style: italic;
  }
  .mw-ed pre {
    background: var(--surf-2); border: 1px solid var(--rule); border-radius: 8px;
    padding: 12px; overflow-x: auto;
    font-family: ui-monospace, "Courier New", monospace; font-size: .86rem;
  }
  .mw-ed img { max-width: 100%; height: auto; border-radius: 6px; margin: .5em 0; }
  .mw-ed hr { border: 0; border-top: 1px solid var(--rule); margin: 1.2em 0; }
  .mw-ed a { color: var(--aqua, #0abab5); }
  .mw-ed table { border-collapse: collapse; width: 100%; }
  .mw-ed td, .mw-ed th { border: 1px solid var(--rule); padding: 6px 8px; }

  /* ── Pastki qator ── */
  .mw-foot {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 8px;
    border-top: 1px solid var(--rule);
    background: var(--surf-1);
    overflow-x: auto; scrollbar-width: none;
    flex: 0 0 auto;
  }
  .mw-foot::-webkit-scrollbar { display: none; }
  .mw-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px;
    background: none; border: 1px solid var(--rule); border-radius: 8px;
    color: var(--ink); font-family: inherit;
    font-size: .74rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
  }
  .mw-btn i { font-size: 12px; opacity: .8; }
  .mw-key { background: rgba(10,186,181,.13); border-color: rgba(10,186,181,.42); }
  .mw-stat {
    margin-left: auto; flex: 0 0 auto;
    font-size: .68rem; color: var(--dim);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    padding-left: 8px;
  }
  .mw-exit { display: none; }
  .mw-full .mw-exit, body.mw-kb .mw-exit { display: inline-flex; }

  /* ── Modallar ── */
  .mw-modal {
    position: fixed; inset: 0; z-index: 9800;
    background: rgba(8,10,12,.6);
    display: grid; place-items: center; padding: 16px;
  }
  .mw-modal-box {
    width: min(540px, 100%); max-height: 78dvh;
    display: flex; flex-direction: column;
    background: var(--surf); border: 1px solid var(--rule-strong);
    border-radius: 12px; overflow: hidden;
  }
  .mw-modal-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid var(--rule); font-size: .84rem;
  }
  .mw-modal-x {
    width: 34px; height: 34px;
    background: none; border: 1px solid var(--rule); border-radius: 8px;
    color: var(--muted); cursor: pointer;
  }
  .mw-modal-body { overflow-y: auto; padding: 10px; }
  .mw-brow { display: flex; gap: 5px; margin-bottom: 6px; }
  .mw-brow .mw-row {
    flex: 1; flex-direction: column; align-items: flex-start; gap: 2px;
    border-color: var(--rule);
  }
  .mw-row-t { font-size: .88rem; font-weight: 600; }
  .mw-row-d { font-size: .7rem; color: var(--muted); }
  .mw-del { border: 1px solid var(--rule); height: auto; }
  .mw-del:hover { color: var(--brand); border-color: var(--brand); }
  .mw-hint { font-size: .78rem; color: var(--dim); padding: 20px; text-align: center; }

  .mw-toast {
    position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%);
    z-index: 9900; padding: 10px 18px;
    background: var(--chrome-bg); border: 1px solid var(--chrome-bdr);
    border-radius: 999px; color: var(--chrome-ink);
    font-size: .78rem; font-weight: 600;
  }

  /* ── Bo'lim ochiq: maydonga joy ── */
  body.mw-on #audioHeroBanner,
  body.mw-on .ti-rail,
  body.mw-on .ti-dateline,
  body.mw-on #ti-reco,
  body.mw-on .ed-topback { display: none; }
  body.mw-on .phd { margin-bottom: 8px; padding-top: 6px; }
  body.mw-on .pttl { font-size: 1.05rem; }
  body.mw-on .ti-portal { grid-template-columns: minmax(0, 1fr); }

  /* ════════════════════════════════════════════════════════════════
     KLAVIATURA OCHIQ — eng muhim mobil holat
     ────────────────────────────────────────────────────────────────
     Telefonda klaviatura ochilganda muharrir butun ekranga o'tadi:
     qobiq yashiriladi, asboblar paneli klaviatura ustida qoladi.
     Aynan shu narsa "telefonda bemalol yozish" ni beradi.
     ════════════════════════════════════════════════════════════════ */
  body.mw-kb #nav, body.mw-kb #catbar, body.mw-kb #tabbar,
  body.mw-kb .phd, body.mw-kb .ti-dateline { display: none; }
  body.mw-kb { overflow: hidden; }
  body.mw-kb .mw-root {
    position: fixed; left: 0; right: 0; top: 0;
    z-index: 9000;
    border: 0; border-radius: 0;
  }
  body.mw-kb .mw-page { border: 0; border-radius: 0; padding: 14px 14px 40px; }
  body.mw-kb .mw-page-wrap { padding: 0; }
  body.mw-kb .mw-head { display: none; }

  /* To'liq ekran (yotiq holat) */
  .mw-root.mw-full {
    position: fixed; inset: 0; z-index: 9000;
    border: 0; border-radius: 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  body.mw-full-on { overflow: hidden; }
  body.mw-full-on #nav, body.mw-full-on #catbar,
  body.mw-full-on #tabbar, body.mw-full-on .phd { display: none; }

  /* ════════════════════════════════════════════════════════════════
     QURILMA POG'ONALARI
     ════════════════════════════════════════════════════════════════ */

  /* Sensorli qurilma — WCAG 2.5.5 */
  @media (pointer: coarse) {
    .mw-b, .mw-btn, .mw-modal-x, .mw-row { min-width: 44px; min-height: 44px; }
    .mw-sw { width: 36px; height: 36px; }
    .mw-title { min-height: 44px; }
    .mw-pop[data-pop-body="align"] { flex-wrap: wrap; max-width: 240px; }
  }

  /* Telefon */
  @media (max-width: 719px) {
    .mw-root { border-radius: 10px; }
    .mw-page { border-radius: 0; border-left: 0; border-right: 0; padding: 18px 16px 50px; }
    .mw-page-wrap { padding: 0 0 20px; }
    .mw-wide { display: none; }              /* o'chirilgan matn -> keyinroq */
    .mw-btn span { display: inline; }
    .mw-stat { display: none; }              /* joy tor */
  }

  /* Kichik telefon */
  @media (max-width: 400px) {
    .mw-bar { gap: 1px; padding: 5px 5px; }
    .mw-sep { margin: 0 2px; }
    .mw-btn { padding: 9px 10px; font-size: .68rem; }
    .mw-btn span { display: none; }          /* faqat ikon */
    .mw-page { padding: 16px 13px 44px; }
  }

  /* Planshet */
  @media (min-width: 720px) and (max-width: 1023px) {
    .mw-page { padding: 30px 30px 70px; }
  }

  /* Kompyuter — qog'oz aniq ko'rinsin */
  @media (min-width: 1024px) {
    .mw-page {
      box-shadow: 0 6px 26px rgba(0,0,0,.18);
      padding: 44px 56px 90px;
    }
    .mw-ed { font-size: 17px; }
  }

  @media (hover: none) {
    .mw-b:hover, .mw-btn:hover, .mw-row:hover { background: none; }
    .mw-b.on { background: rgba(10,186,181,.16); }
    .mw-b:active, .mw-btn:active, .mw-row:active { opacity: .55; }
  }

  /* ════════════════════════════════════════════════════════════════
     CHOP ETISH -> PDF
     Telefonda ham: Ulashish -> Chop etish -> "PDF ga saqlash".
     ════════════════════════════════════════════════════════════════ */
  #mwPrint { display: none; }
  @media print {
    body.mw-printing > *:not(#mwPrint) { display: none !important; }
    body.mw-printing #mwPrint {
      display: block !important;
      color: #000; background: #fff;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 12pt; line-height: 1.6;
    }
    #mwPrint .mw-print-title {
      font-size: 20pt; margin: 0 0 16pt; padding-bottom: 8pt;
      border-bottom: 2pt solid #000;
    }
    #mwPrint img { max-width: 100%; height: auto; }
    #mwPrint blockquote {
      margin: 8pt 0; padding-left: 12pt; border-left: 2pt solid #888; font-style: italic;
    }
    #mwPrint pre { white-space: pre-wrap; font-size: 10pt; }
    #mwPrint h1, #mwPrint h2, #mwPrint h3 { page-break-after: avoid; }
    #mwPrint img, #mwPrint blockquote, #mwPrint pre { page-break-inside: avoid; }
    @page { size: A4; margin: 20mm; }
  }
}

/* ════════════════════════════════════════════════════════════════════
   (v72-b) TOR EKRANDA PANELNI QISQARTIRISH
   ────────────────────────────────────────────────────────────────────
   Telefonda 13 tugma x 44px = 572px, ekranda 356px joy bor.
   Gorizontal skroll Word va Google Docs mobil ilovalarida ham
   bor va u yerda normal hisoblanadi — LEKIN skroll masofasini
   qisqartirish mumkin: kam ishlatiladigan tugmalar ochiluvchi
   panelga ko'chadi.
   ════════════════════════════════════════════════════════════════════ */
@layer board {
  .mw-narrow { display: none; }
  .mw-wide   { display: inline-flex; align-items: center; }

  @media (max-width: 719px) {
    .mw-wide   { display: none; }
    .mw-narrow { display: inline-flex; align-items: center; flex-wrap: wrap; }
    .mw-pop[data-pop-body="align"] { flex-wrap: wrap; max-width: 236px; }
  }
}

/* ════════════════════════════════════════════════════════════════════
   (v73) YANGI IMKONIYATLAR
   ════════════════════════════════════════════════════════════════════ */
@layer board {

  /* ── Jadval ── */
  .mw-ed table.mw-tbl { border-collapse: collapse; width: 100%; margin: .8em 0; }
  .mw-ed table.mw-tbl th, .mw-ed table.mw-tbl td {
    border: 1px solid var(--rule-strong); padding: 7px 9px;
    min-width: 40px; vertical-align: top;
  }
  .mw-ed table.mw-tbl th { background: var(--surf-2); font-weight: 700; text-align: center; }
  .mw-ed table.mw-tbl td:focus, .mw-ed table.mw-tbl th:focus { outline: 2px solid #0abab5; }

  /* ── Sahifa uzilishi ── */
  .mw-pb {
    margin: 1.2em 0; padding: 5px 0;
    border-top: 2px dashed var(--rule-strong);
    color: var(--dim); font-size: .7rem; text-align: center;
    letter-spacing: .1em; text-transform: uppercase;
    user-select: none;
  }

  /* ── O'ngdan chapga ── */
  .mw-ed [dir="rtl"] {
    text-align: right;
    /* Arab yozuvi standart shriftda kichik ko'rinadi */
    font-size: 1.12em;
    line-height: 2;
  }

  /* ── Qidirish qatori ── */
  .mw-find {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--rule);
    background: var(--surf-2);
    flex: 0 0 auto; flex-wrap: wrap;
  }
  .mw-find[hidden] { display: none; }
  .mw-find input {
    flex: 1 1 120px; min-width: 90px;
    background: var(--surf); border: 1px solid var(--rule); border-radius: 8px;
    padding: 9px 10px; color: var(--ink);
    font-family: inherit; font-size: 16px;   /* iOS kattalashtirmasin */
  }
  .mw-find input:focus { outline: none; border-color: rgba(10,186,181,.5); }

  /* ── Belgilar ── */
  .mw-sym-g { margin-bottom: 12px; }
  .mw-sym-row { display: flex; flex-wrap: wrap; gap: 4px; }
  .mw-sym {
    min-width: 40px; height: 40px;
    background: var(--surf-1); border: 1px solid var(--rule); border-radius: 8px;
    color: var(--ink); font-size: 17px; cursor: pointer;
  }
  .mw-sym:hover { background: rgba(10,186,181,.14); border-color: rgba(10,186,181,.4); }

  /* ── Jadval o'lchami tanlash ── */
  .mw-grid6 {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 4px; padding: 6px; max-width: 260px; margin: 0 auto;
  }
  .mw-cell {
    aspect-ratio: 1; padding: 0;
    background: var(--surf-1); border: 1px solid var(--rule); border-radius: 4px;
    cursor: pointer;
  }
  .mw-cell.on { background: rgba(10,186,181,.35); border-color: #0abab5; }
  .mw-size { text-align: center; font-variant-numeric: tabular-nums; }

  @media (pointer: coarse) {
    .mw-sym { min-width: 44px; height: 44px; }
    .mw-cell { min-width: 34px; min-height: 34px; }
    .mw-find input { min-height: 44px; }
  }
  @media (max-width: 480px) {
    .mw-grid6 { max-width: 220px; }
    .mw-find { gap: 4px; }
    .mw-find .mw-btn { padding: 9px 8px; font-size: .68rem; }
  }
  @media print {
    #mwPrint .mw-pb { page-break-after: always; border: 0; color: transparent; }
    #mwPrint table { border-collapse: collapse; width: 100%; }
    #mwPrint td, #mwPrint th { border: 1px solid #666; padding: 5pt 7pt; }
    #mwPrint th { background: #eee; }
    #mwPrint [dir="rtl"] { text-align: right; }
  }
}